50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T210c,"use client"; import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"; import * as stylex from "@stylexjs/stylex"; import { createContext, use, useMemo } from "react"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { colors, durations, easings, fontWeights, media, opacities, radii, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; const tabsListVariants = ["default", "line"] as const; const tabsListSizes = ["sm", "default", "lg"] as const; type TabsListVariant = (typeof tabsListVariants)[number]; type TabsListSize = (typeof tabsListSizes)[number]; type Styled = Omit & { sx?: Sx; }; type TabsListProps = Styled & { size?: TabsListSize; variant?: TabsListVariant; }; const vertical = ":is([data-orientation='vertical'])"; const besideColumn = ":is([data-slot='tabs'][data-orientation='vertical'] > *)"; const styles = stylex.create({ tabs: { display: "flex", flexDirection: { default: "column", [vertical]: "row" }, flexWrap: { default: null, [vertical]: "wrap" }, gap: space.sm, }, // Beside a column of tabs while it has a menu's width, under it once it hasn't. panel: { flexBasis: { default: null, [besideColumn]: 0 }, flexGrow: { default: null, [besideColumn]: 1 }, minWidth: { default: null, [besideColumn]: sizes.menu }, }, // A row too long for its container scrolls; arrow keys bring the next tab into view. list: { display: "flex", flexDirection: { default: "row", [vertical]: "column" }, flexShrink: 0, maxWidth: "100%", overflowX: { default: "auto", [vertical]: "visible" }, position: "relative", scrollbarWidth: { default: "none", [vertical]: "auto" }, width: "fit-content", }, // A tinted pill slides between tabs, with no track around them. listDefault: { gap: 0, }, // An accent line slides along a faint baseline: under the row, beside the column. // The row's baseline is an inset shadow in its padding, not a border, so the scrolling list // doesn't clip the indicator that covers it. listLine: { boxShadow: { default: `inset 0 calc(-1 * ${strokes.border}) ${colors.borderSubtle}`, [vertical]: "none", }, paddingBlockEnd: { default: strokes.border, [vertical]: 0 }, borderInlineStartColor: colors.borderSubtle, borderInlineStartStyle: { default: "none", [vertical]: "solid" }, borderInlineStartWidth: { default: 0, [vertical]: strokes.border }, }, tab: { alignItems: "center", backgroundColor: "transparent", borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, borderBlockEndWidth: 0, borderBlockStartWidth: 0, borderInlineEndWidth: 0, borderInlineStartWidth: 0, color: { default: colors.textSecondary, ":is([data-active])": colors.textPrimary, [media.hover]: { default: colors.textSecondary, ":hover:not([data-disabled])": colors.textPrimary, ":is([data-active])": colors.textPrimary, }, ":active:not([data-disabled])": colors.textPrimary, }, cursor: { default: "pointer", ":is([data-disabled])": "not-allowed" }, display: "inline-flex", flexGrow: { default: 1, [vertical]: 0 }, fontWeight: fontWeights.semimedium, gap: space.xs, height: sizes.controlSm, justifyContent: { default: "center", [vertical]: "flex-start" }, opacity: { default: 1, ":is([data-disabled])": opacities.disabled }, paddingInline: space.sm, position: "relative", transitionDuration: durations.hover, transitionProperty: "color", transitionTimingFunction: "ease", userSelect: "none", WebkitTapHighlightColor: "transparent", whiteSpace: "nowrap", zIndex: 1, }, tabSm: { gap: space.xxs, height: sizes.controlXs, paddingInline: space.popup, }, tabLg: { height: sizes.controlMd, }, // Line tabs sit on the baseline, so they take the list's height, not a pill's corners. tabLine: { borderStartStartRadius: 0, borderStartEndRadius: 0, borderEndStartRadius: 0, borderEndEndRadius: 0, }, // Base UI measures from the physical left, so the indicator anchors there too. indicator: { left: 0, position: "absolute", top: 0, // Arrow keys move focus visibly and a click doesn't, so only the pointer slides it. transitionDuration: { default: durations.move, ":is([data-slot='tabs-list']:has(:focus-visible) > *)": "0s", [media.reducedMotion]: "0s", }, transitionProperty: "transform, width, height", transitionTimingFunction: easings.inOut, }, indicatorDefault: { backgroundColor: colors.fill, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, height: "var(--active-tab-height)", transform: "translate(var(--active-tab-left), var(--active-tab-top))", width: "var(--active-tab-width)", }, // Over the baseline, so the active tab's line replaces it. indicatorLine: { backgroundColor: colors.accentSolid, height: { default: strokes.indicator, [vertical]: "var(--active-tab-height)", }, insetInlineStart: { default: null, [vertical]: `calc(-1 * ${strokes.border})`, }, left: { default: 0, [vertical]: null }, top: { default: `calc(100% - ${strokes.indicator})`, [vertical]: 0, }, transform: { default: "translateX(var(--active-tab-left))", [vertical]: "translateY(var(--active-tab-top))", }, width: { default: "var(--active-tab-width)", [vertical]: strokes.indicator, }, }, }); const listVariantStyles = { default: styles.listDefault, line: styles.listLine, } satisfies Record; const indicatorVariantStyles = { default: styles.indicatorDefault, line: styles.indicatorLine, } satisfies Record; const tabSizeStyles = { default: null, lg: styles.tabLg, sm: [typeStyles.textSm, styles.tabSm], } satisfies Record; const TabsListContext = createContext<{ size: TabsListSize; variant: TabsListVariant; }>({ size: "default", variant: "default" }); function Tabs({ sx, ...props }: Styled) { return ( ); } /** Renders the list and the indicator that slides between its tabs. */ function TabsList({ children, size = "default", sx, variant = "default", ...props }: TabsListProps) { const context = useMemo(() => ({ size, variant }), [size, variant]); return ( {children} ); } function TabsTrigger({ sx, ...props }: Styled) { const { size, variant } = use(TabsListContext); return ( ); } function TabsIndicator({ sx, ...props }: Styled) { return ( ); } function TabsContent({ sx, ...props }: Styled) { return ( ); } export { Tabs, TabsContent, TabsIndicator, TabsList, tabsListSizes, tabsListVariants, TabsTrigger, }; export type { TabsListProps, TabsListSize, TabsListVariant }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@stylexjs/stylex"}]]}]}]]}],["$","$L50",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/primitives/tabs.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]