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:T1bea,"use client"; import * as stylex from "@stylexjs/stylex"; import { createContext, use } from "react"; import type { ComponentProps } from "react"; import { scrollFade } from "@/lib/constella/scroll-fade"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { tableVars } from "@/lib/constella/table.stylex"; import { colors, durations, fontWeights, media, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; const tableSizes = ["sm", "default"] as const; type TableSize = (typeof tableSizes)[number]; type Styled = Omit & { sx?: Sx; }; type TableProps = Styled> & { interactive?: boolean; size?: TableSize; }; const marked = ":is([data-state='selected'], [aria-current='true'])"; const open = "[aria-current='true']"; const checked = "[data-state='selected']"; const idle = ":not([data-state='selected'], [aria-current='true'])"; // As in the sidebar: an inset shadow, not a second fill, so hover stacks on a marked row's fill and still fades. const lit = `inset 0 0 0 100vmax ${colors.fillSubtle}`; const unlit = "inset 0 0 0 100vmax transparent"; const lastRow = ":is(tbody > :last-child > *, tfoot > :last-child > *)"; // A cell holding a checkbox hugs it, so the column stays as narrow as the box. const checkbox = ":has([data-slot='checkbox'])"; const styles = stylex.create({ container: { overflowX: "auto", position: "relative", scrollbarWidth: "none", width: "100%", }, // Separate, so the cells draw the dividers: collapsed, Chrome hides them under a selected row's fill in a cell that clips. table: { borderCollapse: "separate", borderSpacing: 0, captionSide: "bottom", color: colors.textPrimary, fontVariantNumeric: "tabular-nums", width: "100%", }, footer: { backgroundColor: colors.fillSubtle, fontWeight: fontWeights.medium, }, // Rows are divided by the faint edge; the last row of a body or footer needs none. divider: { borderBlockEndColor: colors.borderSubtle, borderBlockEndStyle: "solid", borderBlockEndWidth: { default: strokes.border, [lastRow]: 0 }, }, row: { backgroundColor: { default: "transparent", [media.hover]: { default: "transparent", [`:hover${idle}`]: colors.fillSubtle, [checked]: colors.fill, [open]: colors.fillStrong, }, [`:has([aria-expanded='true'])${idle}`]: colors.fillSubtle, [`:active${idle}`]: colors.fillSubtle, [checked]: colors.fill, // One row at a time, so it can stand a step above the checked ones. [open]: colors.fillStrong, }, boxShadow: { default: null, [marked]: { default: unlit, [media.hover]: { default: unlit, ":hover": lit }, ":has([aria-expanded='true'])": lit, }, }, // A row selected from the keyboard fills at once. transitionDuration: { default: durations.hover, ":focus-visible": "0s" }, transitionProperty: "background-color, box-shadow", transitionTimingFunction: "ease", }, // Reference tables a reader only reads: rows keep their marked fills but don't answer the pointer. rowStatic: { backgroundColor: { default: "transparent", [checked]: colors.fill, [open]: colors.fillStrong, }, boxShadow: null, }, head: { color: colors.textSecondary, fontWeight: fontWeights.regular, height: `calc(${sizes.controlLg} + ${space.xxs})`, paddingBlock: 0, paddingInlineEnd: { default: space.sm, [checkbox]: 0, ":last-child": tableVars.inset, }, paddingInlineStart: { default: space.sm, ":first-child": tableVars.inset }, textAlign: "start", verticalAlign: "middle", whiteSpace: "nowrap", }, cell: { // The footer's top edge; a row group can't draw a border in the separate model. borderBlockStartColor: colors.borderSubtle, borderBlockStartStyle: "solid", borderBlockStartWidth: { default: 0, ":is(tfoot > :first-child > *)": strokes.border, }, paddingBlock: space.xs, paddingInlineEnd: { default: space.sm, [checkbox]: 0, ":last-child": tableVars.inset, }, paddingInlineStart: { default: space.sm, ":first-child": tableVars.inset }, verticalAlign: "middle", whiteSpace: "nowrap", }, // Dense rows for data a reader scans, like logs and usage. headSm: { height: sizes.controlMd, }, cellSm: { paddingBlock: space.xxs, }, caption: { color: colors.textMuted, marginBlockStart: space.md, }, }); const TableSizeContext = createContext("default"); const TableInteractiveContext = createContext(true); function Table({ interactive = true, size = "default", sx, ...props }: TableProps) { return (

); } function TableHeader({ sx, ...props }: Styled>) { return ; } function TableBody({ sx, ...props }: Styled>) { return ; } function TableFooter({ sx, ...props }: Styled>) { return ( ); } function TableRow({ sx, ...props }: Styled>) { const interactive = use(TableInteractiveContext); return ( ); } function TableHead({ sx, ...props }: Styled>) { const size = use(TableSizeContext); return (

); } export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, tableSizes, }; export type { TableProps, TableSize }; 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","@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","https://constella.aayush.cv/r/scroll-fade.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/primitives/table.tsx","content":"$52","type":"registry:component"},{"path":"src/lib/constella/table.stylex.ts","content":"import * as stylex from \"@stylexjs/stylex\";\n\nimport { space } from \"./tokens.stylex\";\n\n// How far a row's first and last cells keep their content from the table's edges.\nexport const tableVars = stylex.defineVars({\n inset: space.sm,\n});\n","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]
); } function TableCell({ sx, ...props }: Styled>) { const size = use(TableSizeContext); return (	); } function TableCaption({ sx, ...props }: Styled>) { return (