@psnext/design-system 1.5.1 → 2.0.0

package/dist/patterns/DataTable/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","Table","TableHeader","TableRow","TableHead","TableBody","TableCell","Button","cn","ArrowUpIcon","ArrowDownIcon","ChevronsUpDownIcon"],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type RowSelectionState,\n  type SortingState,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"@/primitives/Table\";\nimport { cn } from \"@/utils\";\n\ntype DataTableProps<TData, TValue> = {\n  /** TanStack Table column definitions describing each column's header and cell. */\n  columns: ColumnDef<TData, TValue>[];\n  /** The row objects to render in the table body. */\n  data: TData[];\n  /** Zebra-stripe the rows (default true). */\n  striped?: boolean;\n  /** Client-side pagination + page size (default true, 10). */\n  enablePagination?: boolean;\n  /** Rows per page when pagination is enabled (default 10). */\n  pageSize?: number;\n};\n\n/**\n * TanStack-Table-backed data table with sorting, row selection, and optional\n * client-side pagination, rendered through the Table primitives.\n */\nfunction DataTable<TData, TValue>({\n  columns,\n  data,\n  striped = true,\n  enablePagination = true,\n  pageSize = 10,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { sorting, rowSelection },\n    onSortingChange: setSorting,\n    onRowSelectionChange: setRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,\n    initialState: { pagination: { pageSize } },\n  });\n\n  return (\n    <div data-slot=\"data-table\" className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table striped={striped}>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id} colSpan={header.colSpan}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow key={row.id} data-state={row.getIsSelected() ? \"selected\" : undefined}>\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center text-muted-foreground\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {enablePagination ? (\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-sm text-muted-foreground\" data-slot=\"data-table-selection\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm text-muted-foreground\">\n              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}\n            </span>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.previousPage()}\n              disabled={!table.getCanPreviousPage()}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.nextPage()}\n              disabled={!table.getCanNextPage()}\n            >\n              Next\n            </Button>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** Sortable column header — drop into a column's `header` to get click-to-sort. */\nfunction DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n}: {\n  /** The TanStack Table column instance this header controls. */\n  column: Column<TData, TValue>;\n  /** Visible label for the column. */\n  title: string;\n  /** Optional class applied to the header button (or span when unsortable). */\n  className?: string;\n}) {\n  if (!column.getCanSort()) {\n    return <span className={className}>{title}</span>;\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      className={cn(\"-ml-2 h-8\", className)}\n      onClick={() => column.toggleSorting(sorted === \"asc\")}\n    >\n      {title}\n      {sorted === \"asc\" ? (\n        <ArrowUpIcon />\n      ) : sorted === \"desc\" ? (\n        <ArrowDownIcon />\n      ) : (\n        <ChevronsUpDownIcon />\n      )}\n    </Button>\n  );\n}\n\nexport { DataTable, DataTableColumnHeader };\nexport type { ColumnDef };\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["React","Table","TableHeader","TableRow","TableHead","TableBody","TableCell","Button","cn","ArrowUpIcon","ArrowDownIcon","ChevronsUpDownIcon"],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type RowSelectionState,\n  type SortingState,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"@/primitives/Table\";\nimport { cn } from \"@/utils\";\n\ntype DataTableProps<TData, TValue> = {\n  /** TanStack Table column definitions describing each column's header and cell. */\n  columns: ColumnDef<TData, TValue>[];\n  /** The row objects to render in the table body. */\n  data: TData[];\n  /** Zebra-stripe the rows (default true). */\n  striped?: boolean;\n  /** Client-side pagination + page size (default true, 10). */\n  enablePagination?: boolean;\n  /** Rows per page when pagination is enabled (default 10). */\n  pageSize?: number;\n};\n\n/**\n * TanStack-Table-backed data table with sorting, row selection, and optional\n * client-side pagination, rendered through the Table primitives.\n */\nfunction DataTable<TData, TValue>({\n  columns,\n  data,\n  striped = true,\n  enablePagination = true,\n  pageSize = 10,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { sorting, rowSelection },\n    onSortingChange: setSorting,\n    onRowSelectionChange: setRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,\n    initialState: { pagination: { pageSize } },\n  });\n\n  return (\n    <div data-slot=\"data-table\" className=\"space-y-4\">\n      <div className=\"overflow-x-auto\">\n        <Table striped={striped}>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead\n                    key={header.id}\n                    colSpan={header.colSpan}\n                    // Data Table header spec: glass-60 band, mini/medium 12/16.\n                    className=\"h-auto bg-glass-60-bg backdrop-blur-glass px-2 py-2 text-xs leading-4 font-medium\"\n                  >\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() ? \"selected\" : undefined}\n                  className=\"hover:bg-muted-bg data-[state=selected]:bg-secondary-bg\"\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id} className=\"px-2 py-2 text-xs leading-4\">\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell colSpan={columns.length} className=\"h-24 text-center text-muted-txt\">\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {enablePagination ? (\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-sm text-muted-txt\" data-slot=\"data-table-selection\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm text-muted-txt\">\n              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}\n            </span>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.previousPage()}\n              disabled={!table.getCanPreviousPage()}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.nextPage()}\n              disabled={!table.getCanNextPage()}\n            >\n              Next\n            </Button>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** Sortable column header — drop into a column's `header` to get click-to-sort. */\nfunction DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n}: {\n  /** The TanStack Table column instance this header controls. */\n  column: Column<TData, TValue>;\n  /** Visible label for the column. */\n  title: string;\n  /** Optional class applied to the header button (or span when unsortable). */\n  className?: string;\n}) {\n  if (!column.getCanSort()) {\n    return <span className={className}>{title}</span>;\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      className={cn(\"-ml-2 h-8 text-xs leading-4 font-medium\", className)}\n      onClick={() => column.toggleSorting(sorted === \"asc\")}\n    >\n      {title}\n      {sorted === \"asc\" ? (\n        <ArrowUpIcon />\n      ) : sorted === \"desc\" ? (\n        <ArrowDownIcon />\n      ) : (\n        <ChevronsUpDownIcon className=\"opacity-50\" />\n      )}\n    </Button>\n  );\n}\n\nexport { DataTable, DataTableColumnHeader };\nexport type { ColumnDef };\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,SAAS,UAAyB,EAChC,SACA,MACA,UAAU,MACV,mBAAmB,MACnB,WAAW,MACqB;CAChC,MAAM,CAAC,SAAS,cAAcA,MAAM,SAAuB,CAAC,CAAC;CAC7D,MAAM,CAAC,cAAc,mBAAmBA,MAAM,SAA4B,CAAC,CAAC;CAE5E,MAAM,SAAA,GAAA,sBAAA,eAAsB;EAC1B;EACA;EACA,OAAO;GAAE;GAAS;EAAa;EAC/B,iBAAiB;EACjB,sBAAsB;EACtB,kBAAA,GAAA,sBAAA,iBAAiC;EACjC,oBAAA,GAAA,sBAAA,mBAAqC;EACrC,uBAAuB,oBAAA,GAAA,sBAAA,uBAAyC,IAAI,KAAA;EACpE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE;CAC3C,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,aAAU;EAAa,WAAU;YAAtC,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACb,iBAAA,GAAA,kBAAA,MAACC,+BAAAA,OAAD;IAAgB;cAAhB,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,aAAD,EAAA,UACG,MAAM,gBAAgB,EAAE,KAAK,gBAC5B,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,UAAD,EAAA,UACG,YAAY,QAAQ,KAAK,WACxB,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,WAAD;KAEE,SAAS,OAAO;KAEhB,WAAU;eAET,OAAO,gBACJ,QAAA,GAAA,sBAAA,YACW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;IACzD,GARJ,OAAO,EAQH,CACZ,EACO,GAbK,YAAY,EAajB,CACX,EACU,CAAA,GACb,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,WAAD,EAAA,UACG,MAAM,YAAY,EAAE,KAAK,SACxB,MAAM,YAAY,EAAE,KAAK,KAAK,QAC5B,iBAAA,GAAA,kBAAA,KAACF,+BAAAA,UAAD;KAEE,cAAY,IAAI,cAAc,IAAI,aAAa,KAAA;KAC/C,WAAU;eAET,IAAI,gBAAgB,EAAE,KAAK,SAC1B,iBAAA,GAAA,kBAAA,KAACG,+BAAAA,WAAD;MAAyB,WAAU;sDACrB,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;KAChD,GAFK,KAAK,EAEV,CACZ;IACO,GATH,IAAI,EASD,CACX,IAED,iBAAA,GAAA,kBAAA,KAACH,+BAAAA,UAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACG,+BAAAA,WAAD;KAAW,SAAS,QAAQ;KAAQ,WAAU;eAAkC;IAErE,CAAA,EACH,CAAA,EAEH,CAAA,CACN;;EACJ,CAAA,GAEJ,mBACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,MAAC,KAAD;IAAG,WAAU;IAAyB,aAAU;cAAhD;KACG,MAAM,4BAA4B,EAAE,KAAK;KAAO;KAAI;KACpD,MAAM,oBAAoB,EAAE,KAAK;KAAO;IACxC;OACH,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf;KACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;MAAM,WAAU;gBAAhB;OAAyC;OACjC,MAAM,SAAS,EAAE,WAAW,YAAY;OAAE;OAAK,MAAM,aAAa,KAAK;MACzE;;KACN,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe,MAAM,aAAa;MAClC,UAAU,CAAC,MAAM,mBAAmB;gBACrC;KAEO,CAAA;KACR,iBAAA,GAAA,kBAAA,KAACA,gCAAAA,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe,MAAM,SAAS;MAC9B,UAAU,CAAC,MAAM,eAAe;gBACjC;KAEO,CAAA;IACL;KACF;OACH,IACD;;AAET;;AAGA,SAAS,sBAAqC,EAC5C,QACA,OACA,aAQC;CACD,IAAI,CAAC,OAAO,WAAW,GACrB,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAiB;YAAY;CAAY,CAAA;CAGlD,MAAM,SAAS,OAAO,YAAY;CAElC,OACE,iBAAA,GAAA,kBAAA,MAACA,gCAAAA,QAAD;EACE,SAAQ;EACR,MAAK;EACL,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;EAClE,eAAe,OAAO,cAAc,WAAW,KAAK;YAJtD,CAMG,OACA,WAAW,QACV,iBAAA,GAAA,kBAAA,KAACC,aAAAA,aAAD,CAAc,CAAA,IACZ,WAAW,SACb,iBAAA,GAAA,kBAAA,KAACC,aAAAA,eAAD,CAAgB,CAAA,IAEhB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,oBAAD,EAAoB,WAAU,aAAc,CAAA,CAExC;;AAEZ"}

package/dist/patterns/DataTable/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime221 from "react/jsx-runtime";
+import * as react_jsx_runtime47 from "react/jsx-runtime";
 import { Column, ColumnDef } from "@tanstack/react-table";
 
 //#region src/patterns/DataTable/DataTable.d.ts
@@ -24,7 +24,7 @@ declare function DataTable<TData, TValue>({
   striped,
   enablePagination,
   pageSize
-}: DataTableProps<TData, TValue>): react_jsx_runtime221.JSX.Element;
+}: DataTableProps<TData, TValue>): react_jsx_runtime47.JSX.Element;
 /** Sortable column header — drop into a column's `header` to get click-to-sort. */
 declare function DataTableColumnHeader<TData, TValue>({
   column,
@@ -37,7 +37,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   title: string;
   /** Optional class applied to the header button (or span when unsortable). */
   className?: string;
-}): react_jsx_runtime221.JSX.Element;
+}): react_jsx_runtime47.JSX.Element;
 //#endregion
 export { type ColumnDef, DataTable, DataTableColumnHeader };
 //# sourceMappingURL=index.d.cts.map

package/dist/patterns/DataTable/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"mappings":";;;;KAoBK;;WAEM,UAAU,OAAO;EAFvB;EAAc,IAAA,EAIX,KAJW,EAAA;;SAES,CAAA,EAAA,OAAA;;kBAEpB,CAAA,EAAA,OAAA;EAAK;EAaJ,QAAA,CAAA,EAAA,MAAS;CAAA;;;;;iBAAT,SAKP,CAAA,KAAA,EAAA,MAAA,CAAA,CAAA;EAAA,OAAA;EAAA,IAAA;EAAA,OAAA;EAAA,gBAAA;EAAA;AAAA,CAAA,EACC,cADD,CACgB,KADhB,EACuB,MADvB,CAAA,CAAA,EAC8B,oBAAA,CAAA,GAAA,CAAA,OAD9B;;iBA6FO,qBA5FgB,CAAA,KAAA,EAAA,MAAA,CAAA,CAAA;EAAA,MAAA;EAAA,KAAA;EAAA;CAAA,EAAA;;QAAO,EAkGtB,MAlGsB,CAkGf,KAlGe,EAkGR,MAlGQ,CAAA;EAAA;EA4FvB,KAAA,EAAA,MAAA;EAAqB;WAC5B,CAAA,EAAA,MAAA;IAUD,oBAAA,CAAA,GAAA,CAAA,OATC"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"mappings":";;;;KAoBK;;WAEM,UAAU,OAAO;EAFvB;EAAc,IAAA,EAIX,KAJW,EAAA;;SAES,CAAA,EAAA,OAAA;;kBAEpB,CAAA,EAAA,OAAA;EAAK;EAaJ,QAAA,CAAA,EAAA,MAAS;CAAA;;;;;iBAAT,SAKP,CAAA,KAAA,EAAA,MAAA,CAAA,CAAA;EAAA,OAAA;EAAA,IAAA;EAAA,OAAA;EAAA,gBAAA;EAAA;AAAA,CAAA,EACC,cADD,CACgB,KADhB,EACuB,MADvB,CAAA,CAAA,EAC8B,mBAAA,CAAA,GAAA,CAAA,OAD9B;;iBAmGO,qBAlGgB,CAAA,KAAA,EAAA,MAAA,CAAA,CAAA;EAAA,MAAA;EAAA,KAAA;EAAA;CAAA,EAAA;;QAAO,EAwGtB,MAxGsB,CAwGf,KAxGe,EAwGR,MAxGQ,CAAA;EAAA;EAkGvB,KAAA,EAAA,MAAA;EAAqB;WAC5B,CAAA,EAAA,MAAA;IAUD,mBAAA,CAAA,GAAA,CAAA,OATC"}

package/dist/patterns/DataTable/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime156 from "react/jsx-runtime";
+import * as react_jsx_runtime231 from "react/jsx-runtime";
 import { Column, ColumnDef } from "@tanstack/react-table";
 
 //#region src/patterns/DataTable/DataTable.d.ts
@@ -24,7 +24,7 @@ declare function DataTable<TData, TValue>({
   striped,
   enablePagination,
   pageSize
-}: DataTableProps<TData, TValue>): react_jsx_runtime156.JSX.Element;
+}: DataTableProps<TData, TValue>): react_jsx_runtime231.JSX.Element;
 /** Sortable column header — drop into a column's `header` to get click-to-sort. */
 declare function DataTableColumnHeader<TData, TValue>({
   column,
@@ -37,7 +37,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   title: string;
   /** Optional class applied to the header button (or span when unsortable). */
   className?: string;
-}): react_jsx_runtime156.JSX.Element;
+}): react_jsx_runtime231.JSX.Element;
 //#endregion
 export { type ColumnDef, DataTable, DataTableColumnHeader };
 //# sourceMappingURL=index.d.ts.map

package/dist/patterns/DataTable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"mappings":";;;;KAoBK;;WAEM,UAAU,OAAO;EAFvB;EAAc,IAAA,EAIX,KAJW,EAAA;;SAES,CAAA,EAAA,OAAA;;kBAEpB,CAAA,EAAA,OAAA;EAAK;EAaJ,QAAA,CAAA,EAAA,MAAS;CAAA;;;;;iBAAT,SAKP,CAAA,KAAA,EAAA,MAAA,CAAA,CAAA;EAAA,OAAA;EAAA,IAAA;EAAA,OAAA;EAAA,gBAAA;EAAA;AAAA,CAAA,EACC,cADD,CACgB,KADhB,EACuB,MADvB,CAAA,CAAA,EAC8B,oBAAA,CAAA,GAAA,CAAA,OAD9B;;iBA6FO,qBA5FgB,CAAA,KAAA,EAAA,MAAA,CAAA,CAAA;EAAA,MAAA;EAAA,KAAA;EAAA;CAAA,EAAA;;QAAO,EAkGtB,MAlGsB,CAkGf,KAlGe,EAkGR,MAlGQ,CAAA;EAAA;EA4FvB,KAAA,EAAA,MAAA;EAAqB;WAC5B,CAAA,EAAA,MAAA;IAUD,oBAAA,CAAA,GAAA,CAAA,OATC"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"mappings":";;;;KAoBK;;WAEM,UAAU,OAAO;EAFvB;EAAc,IAAA,EAIX,KAJW,EAAA;;SAES,CAAA,EAAA,OAAA;;kBAEpB,CAAA,EAAA,OAAA;EAAK;EAaJ,QAAA,CAAA,EAAA,MAAS;CAAA;;;;;iBAAT,SAKP,CAAA,KAAA,EAAA,MAAA,CAAA,CAAA;EAAA,OAAA;EAAA,IAAA;EAAA,OAAA;EAAA,gBAAA;EAAA;AAAA,CAAA,EACC,cADD,CACgB,KADhB,EACuB,MADvB,CAAA,CAAA,EAC8B,oBAAA,CAAA,GAAA,CAAA,OAD9B;;iBAmGO,qBAlGgB,CAAA,KAAA,EAAA,MAAA,CAAA,CAAA;EAAA,MAAA;EAAA,KAAA;EAAA;CAAA,EAAA;;QAAO,EAwGtB,MAxGsB,CAwGf,KAxGe,EAwGR,MAxGQ,CAAA;EAAA;EAkGvB,KAAA,EAAA,MAAA;EAAqB;WAC5B,CAAA,EAAA,MAAA;IAUD,oBAAA,CAAA,GAAA,CAAA,OATC"}

package/dist/patterns/DataTable/index.js

@@ -31,25 +31,30 @@ function DataTable({ columns, data, striped = true, enablePagination = true, pag
 		"data-slot": "data-table",
 		className: "space-y-4",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "overflow-hidden rounded-md border",
+			className: "overflow-x-auto",
 			children: /* @__PURE__ */ jsxs(Table, {
 				striped,
 				children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
 					colSpan: header.colSpan,
+					className: "h-auto bg-glass-60-bg backdrop-blur-glass px-2 py-2 text-xs leading-4 font-medium",
 					children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
 				}, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
 					"data-state": row.getIsSelected() ? "selected" : void 0,
-					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+					className: "hover:bg-muted-bg data-[state=selected]:bg-secondary-bg",
+					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+						className: "px-2 py-2 text-xs leading-4",
+						children: flexRender(cell.column.columnDef.cell, cell.getContext())
+					}, cell.id))
 				}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
 					colSpan: columns.length,
-					className: "h-24 text-center text-muted-foreground",
+					className: "h-24 text-center text-muted-txt",
 					children: "No results."
 				}) }) })]
 			})
 		}), enablePagination ? /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between gap-4",
 			children: [/* @__PURE__ */ jsxs("p", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-muted-txt",
 				"data-slot": "data-table-selection",
 				children: [
 					table.getFilteredSelectedRowModel().rows.length,
@@ -62,7 +67,7 @@ function DataTable({ columns, data, striped = true, enablePagination = true, pag
 				className: "flex items-center gap-2",
 				children: [
 					/* @__PURE__ */ jsxs("span", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-muted-txt",
 						children: [
 							"Page ",
 							table.getState().pagination.pageIndex + 1,
@@ -99,9 +104,9 @@ function DataTableColumnHeader({ column, title, className }) {
 	return /* @__PURE__ */ jsxs(Button, {
 		variant: "ghost",
 		size: "sm",
-		className: cn("-ml-2 h-8", className),
+		className: cn("-ml-2 h-8 text-xs leading-4 font-medium", className),
 		onClick: () => column.toggleSorting(sorted === "asc"),
-		children: [title, sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})]
+		children: [title, sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "opacity-50" })]
 	});
 }
 //#endregion

package/dist/patterns/DataTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type RowSelectionState,\n  type SortingState,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"@/primitives/Table\";\nimport { cn } from \"@/utils\";\n\ntype DataTableProps<TData, TValue> = {\n  /** TanStack Table column definitions describing each column's header and cell. */\n  columns: ColumnDef<TData, TValue>[];\n  /** The row objects to render in the table body. */\n  data: TData[];\n  /** Zebra-stripe the rows (default true). */\n  striped?: boolean;\n  /** Client-side pagination + page size (default true, 10). */\n  enablePagination?: boolean;\n  /** Rows per page when pagination is enabled (default 10). */\n  pageSize?: number;\n};\n\n/**\n * TanStack-Table-backed data table with sorting, row selection, and optional\n * client-side pagination, rendered through the Table primitives.\n */\nfunction DataTable<TData, TValue>({\n  columns,\n  data,\n  striped = true,\n  enablePagination = true,\n  pageSize = 10,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { sorting, rowSelection },\n    onSortingChange: setSorting,\n    onRowSelectionChange: setRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,\n    initialState: { pagination: { pageSize } },\n  });\n\n  return (\n    <div data-slot=\"data-table\" className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table striped={striped}>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id} colSpan={header.colSpan}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow key={row.id} data-state={row.getIsSelected() ? \"selected\" : undefined}>\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center text-muted-foreground\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {enablePagination ? (\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-sm text-muted-foreground\" data-slot=\"data-table-selection\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm text-muted-foreground\">\n              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}\n            </span>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.previousPage()}\n              disabled={!table.getCanPreviousPage()}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.nextPage()}\n              disabled={!table.getCanNextPage()}\n            >\n              Next\n            </Button>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** Sortable column header — drop into a column's `header` to get click-to-sort. */\nfunction DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n}: {\n  /** The TanStack Table column instance this header controls. */\n  column: Column<TData, TValue>;\n  /** Visible label for the column. */\n  title: string;\n  /** Optional class applied to the header button (or span when unsortable). */\n  className?: string;\n}) {\n  if (!column.getCanSort()) {\n    return <span className={className}>{title}</span>;\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      className={cn(\"-ml-2 h-8\", className)}\n      onClick={() => column.toggleSorting(sorted === \"asc\")}\n    >\n      {title}\n      {sorted === \"asc\" ? (\n        <ArrowUpIcon />\n      ) : sorted === \"desc\" ? (\n        <ArrowDownIcon />\n      ) : (\n        <ChevronsUpDownIcon />\n      )}\n    </Button>\n  );\n}\n\nexport { DataTable, DataTableColumnHeader };\nexport type { ColumnDef };\n"],"mappings":";;;;;;;;;;;;AAqCA,SAAS,UAAyB,EAChC,SACA,MACA,UAAU,MACV,mBAAmB,MACnB,WAAW,MACqB;CAChC,MAAM,CAAC,SAAS,cAAc,MAAM,SAAuB,CAAC,CAAC;CAC7D,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAA4B,CAAC,CAAC;CAE5E,MAAM,QAAQ,cAAc;EAC1B;EACA;EACA,OAAO;GAAE;GAAS;EAAa;EAC/B,iBAAiB;EACjB,sBAAsB;EACtB,iBAAiB,gBAAgB;EACjC,mBAAmB,kBAAkB;EACrC,uBAAuB,mBAAmB,sBAAsB,IAAI,KAAA;EACpE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE;CAC3C,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,aAAU;EAAa,WAAU;YAAtC,CACE,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,OAAD;IAAgB;cAAhB,CACE,oBAAC,aAAD,EAAA,UACG,MAAM,gBAAgB,EAAE,KAAK,gBAC5B,oBAAC,UAAD,EAAA,UACG,YAAY,QAAQ,KAAK,WACxB,oBAAC,WAAD;KAA2B,SAAS,OAAO;eACxC,OAAO,gBACJ,OACA,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;IACzD,GAJK,OAAO,EAIZ,CACZ,EACO,GARK,YAAY,EAQjB,CACX,EACU,CAAA,GACb,oBAAC,WAAD,EAAA,UACG,MAAM,YAAY,EAAE,KAAK,SACxB,MAAM,YAAY,EAAE,KAAK,KAAK,QAC5B,oBAAC,UAAD;KAAuB,cAAY,IAAI,cAAc,IAAI,aAAa,KAAA;eACnE,IAAI,gBAAgB,EAAE,KAAK,SAC1B,oBAAC,WAAD,EAAA,UACG,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC,EAChD,GAFK,KAAK,EAEV,CACZ;IACO,GANK,IAAI,EAMT,CACX,IAED,oBAAC,UAAD,EAAA,UACE,oBAAC,WAAD;KACE,SAAS,QAAQ;KACjB,WAAU;eACX;IAEU,CAAA,EACH,CAAA,EAEH,CAAA,CACN;;EACJ,CAAA,GAEJ,mBACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,KAAD;IAAG,WAAU;IAAgC,aAAU;cAAvD;KACG,MAAM,4BAA4B,EAAE,KAAK;KAAO;KAAI;KACpD,MAAM,oBAAoB,EAAE,KAAK;KAAO;IACxC;OACH,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OAAgD;OACxC,MAAM,SAAS,EAAE,WAAW,YAAY;OAAE;OAAK,MAAM,aAAa,KAAK;MACzE;;KACN,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe,MAAM,aAAa;MAClC,UAAU,CAAC,MAAM,mBAAmB;gBACrC;KAEO,CAAA;KACR,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe,MAAM,SAAS;MAC9B,UAAU,CAAC,MAAM,eAAe;gBACjC;KAEO,CAAA;IACL;KACF;OACH,IACD;;AAET;;AAGA,SAAS,sBAAqC,EAC5C,QACA,OACA,aAQC;CACD,IAAI,CAAC,OAAO,WAAW,GACrB,OAAO,oBAAC,QAAD;EAAiB;YAAY;CAAY,CAAA;CAGlD,MAAM,SAAS,OAAO,YAAY;CAElC,OACE,qBAAC,QAAD;EACE,SAAQ;EACR,MAAK;EACL,WAAW,GAAG,aAAa,SAAS;EACpC,eAAe,OAAO,cAAc,WAAW,KAAK;YAJtD,CAMG,OACA,WAAW,QACV,oBAAC,aAAD,CAAc,CAAA,IACZ,WAAW,SACb,oBAAC,eAAD,CAAgB,CAAA,IAEhB,oBAAC,oBAAD,CAAqB,CAAA,CAEjB;;AAEZ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type RowSelectionState,\n  type SortingState,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"@/primitives/Table\";\nimport { cn } from \"@/utils\";\n\ntype DataTableProps<TData, TValue> = {\n  /** TanStack Table column definitions describing each column's header and cell. */\n  columns: ColumnDef<TData, TValue>[];\n  /** The row objects to render in the table body. */\n  data: TData[];\n  /** Zebra-stripe the rows (default true). */\n  striped?: boolean;\n  /** Client-side pagination + page size (default true, 10). */\n  enablePagination?: boolean;\n  /** Rows per page when pagination is enabled (default 10). */\n  pageSize?: number;\n};\n\n/**\n * TanStack-Table-backed data table with sorting, row selection, and optional\n * client-side pagination, rendered through the Table primitives.\n */\nfunction DataTable<TData, TValue>({\n  columns,\n  data,\n  striped = true,\n  enablePagination = true,\n  pageSize = 10,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { sorting, rowSelection },\n    onSortingChange: setSorting,\n    onRowSelectionChange: setRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,\n    initialState: { pagination: { pageSize } },\n  });\n\n  return (\n    <div data-slot=\"data-table\" className=\"space-y-4\">\n      <div className=\"overflow-x-auto\">\n        <Table striped={striped}>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead\n                    key={header.id}\n                    colSpan={header.colSpan}\n                    // Data Table header spec: glass-60 band, mini/medium 12/16.\n                    className=\"h-auto bg-glass-60-bg backdrop-blur-glass px-2 py-2 text-xs leading-4 font-medium\"\n                  >\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() ? \"selected\" : undefined}\n                  className=\"hover:bg-muted-bg data-[state=selected]:bg-secondary-bg\"\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id} className=\"px-2 py-2 text-xs leading-4\">\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell colSpan={columns.length} className=\"h-24 text-center text-muted-txt\">\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {enablePagination ? (\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-sm text-muted-txt\" data-slot=\"data-table-selection\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm text-muted-txt\">\n              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}\n            </span>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.previousPage()}\n              disabled={!table.getCanPreviousPage()}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.nextPage()}\n              disabled={!table.getCanNextPage()}\n            >\n              Next\n            </Button>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** Sortable column header — drop into a column's `header` to get click-to-sort. */\nfunction DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n}: {\n  /** The TanStack Table column instance this header controls. */\n  column: Column<TData, TValue>;\n  /** Visible label for the column. */\n  title: string;\n  /** Optional class applied to the header button (or span when unsortable). */\n  className?: string;\n}) {\n  if (!column.getCanSort()) {\n    return <span className={className}>{title}</span>;\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      className={cn(\"-ml-2 h-8 text-xs leading-4 font-medium\", className)}\n      onClick={() => column.toggleSorting(sorted === \"asc\")}\n    >\n      {title}\n      {sorted === \"asc\" ? (\n        <ArrowUpIcon />\n      ) : sorted === \"desc\" ? (\n        <ArrowDownIcon />\n      ) : (\n        <ChevronsUpDownIcon className=\"opacity-50\" />\n      )}\n    </Button>\n  );\n}\n\nexport { DataTable, DataTableColumnHeader };\nexport type { ColumnDef };\n"],"mappings":"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"}

package/dist/patterns/Footer/index.cjs

@@ -5,15 +5,15 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/patterns/Footer/Footer.tsx
 const footerBackgrounds = {
 	none: "",
-	muted: "bg-muted",
-	glass: "bg-[var(--glass-light)] backdrop-blur-glass"
+	muted: "bg-muted-bg",
+	glass: "bg-glass-20-bg backdrop-blur-glass"
 };
 /** App chrome shown at the bottom of a page: a responsive three-region row (start / center / end). */
 function Footer({ className, bordered = false, background = "none", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
 		"data-slot": "footer",
 		"data-background": background,
-		className: require_cn.cn("grid w-full grid-cols-1 gap-3 px-4 py-3 text-center md:grid-cols-3 md:items-center md:px-6", "text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]", footerBackgrounds[background], bordered && "border-t border-border", className),
+		className: require_cn.cn("grid w-full grid-cols-1 gap-3 px-3 py-1 text-center md:grid-cols-3 md:items-center", "text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]", footerBackgrounds[background], bordered && "border-t border-primary-border", className),
 		...props
 	});
 }
@@ -37,7 +37,7 @@ function FooterCenter({ className, ...props }) {
 function FooterEnd({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "footer-end",
-		className: require_cn.cn("flex flex-wrap items-center justify-center gap-2 md:justify-end md:justify-self-end md:text-right", className),
+		className: require_cn.cn("flex flex-wrap items-center justify-center gap-4 md:justify-end md:justify-self-end md:text-right", className),
 		...props
 	});
 }
@@ -60,7 +60,7 @@ function FooterSeparator({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-slot": "footer-separator",
 		"aria-hidden": "true",
-		className: require_cn.cn("select-none text-border", className),
+		className: require_cn.cn("select-none text-primary-border", className),
 		...props,
 		children: "|"
 	});

package/dist/patterns/Footer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","Text"],"sources":["../../../src/patterns/Footer/Footer.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { Text } from \"@/primitives/Text\";\nimport { cn } from \"@/utils\";\n\n// Footer — app chrome shown at the bottom of a page. A responsive three-region\n// row: the regions stack centered on mobile and spread to start / center / end\n// on md+ (a grid, so the centre region stays centred regardless of the side\n// widths). Compose content from Text / Link / Logo; the helpers below cover the\n// common pieces (a \"Powered by\" lockup and a link separator).\n//\n//   <Footer>\n//     <FooterStart><Text size=\"mini\" variant=\"muted\">v2.6.0</Text></FooterStart>\n//     <FooterCenter>\n//       <FooterPoweredBy><Logo brand=\"slingshot\" variant=\"icon\" className=\"size-5\" /></FooterPoweredBy>\n//     </FooterCenter>\n//     <FooterEnd>\n//       <Link href=\"/tnc\" underline=\"hover\">T&C</Link>\n//       <FooterSeparator />\n//       <Link href=\"/privacy\" underline=\"hover\">Privacy</Link>\n//     </FooterEnd>\n//   </Footer>\n\n// Surface fills. `glass` is a translucent, backdrop-blurred panel (same --glass-*\n// tokens as Card/Container) — reads over a textured page background.\nconst footerBackgrounds = {\n  none: \"\",\n  muted: \"bg-muted\",\n  glass: \"bg-[var(--glass-light)] backdrop-blur-glass\",\n} as const;\n\n/** App chrome shown at the bottom of a page: a responsive three-region row (start / center / end). */\nfunction Footer({\n  className,\n  bordered = false,\n  background = \"none\",\n  ...props\n}: React.ComponentProps<\"footer\"> & {\n  /** Add a subtle top border separating the footer from page content. */\n  bordered?: boolean;\n  /** Surface fill. `glass` is a translucent, blurred panel over the page background. */\n  background?: keyof typeof footerBackgrounds;\n}) {\n  return (\n    <footer\n      data-slot=\"footer\"\n      data-background={background}\n      className={cn(\n        // Footer content is small by default (matches the version text); links and\n        // other unstyled children inherit this. Explicitly-sized <Text> is unaffected.\n        \"grid w-full grid-cols-1 gap-3 px-4 py-3 text-center md:grid-cols-3 md:items-center md:px-6\",\n        \"text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]\",\n        footerBackgrounds[background],\n        bordered && \"border-t border-border\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Leading region — left-aligned on md+ (e.g. an app version). */\nfunction FooterStart({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-start\"\n      className={cn(\n        \"flex items-center justify-center gap-2 md:justify-self-start md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Centre region — always centred (e.g. a \"Powered by\" lockup). */\nfunction FooterCenter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-center\"\n      className={cn(\"flex items-center justify-center gap-2 md:justify-self-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Trailing region — right-aligned on md+ (e.g. legal links). Wraps on small screens. */\nfunction FooterEnd({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-end\"\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-2 md:justify-end md:justify-self-end md:text-right\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Powered by\" lockup — the label plus a slot for the brand mark (a <Logo />). */\nfunction FooterPoweredBy({\n  className,\n  label = \"Powered by\",\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Override the default \"Powered by\" label. */\n  label?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"footer-powered-by\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    >\n      <Text as=\"span\" size=\"small\" variant=\"muted\">\n        {label}\n      </Text>\n      {children}\n    </div>\n  );\n}\n\n/** Visual divider between trailing links. */\nfunction FooterSeparator({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"footer-separator\"\n      aria-hidden=\"true\"\n      className={cn(\"select-none text-border\", className)}\n      {...props}\n    >\n      |\n    </span>\n  );\n}\n\nexport { Footer, FooterStart, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator };\n"],"mappings":";;;;;AAyBA,MAAM,oBAAoB;CACxB,MAAM;CACN,OAAO;CACP,OAAO;AACT;;AAGA,SAAS,OAAO,EACd,WACA,WAAW,OACX,aAAa,QACb,GAAG,SAMF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,aAAU;EACV,mBAAiB;EACjB,WAAWA,WAAAA,GAGT,8FACA,6FACA,kBAAkB,aAClB,YAAY,0BACZ,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,6EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,qGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EACvB,WACA,QAAQ,cACR,UACA,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAClD,GAAI;YAHN,CAKE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,MAAD;GAAM,IAAG;GAAO,MAAK;GAAQ,SAAQ;aAClC;EACG,CAAA,GACL,QACE;;AAET;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAWD,WAAAA,GAAG,2BAA2B,SAAS;EAClD,GAAI;YACL;CAEK,CAAA;AAEV"}
+{"version":3,"file":"index.cjs","names":["cn","Text"],"sources":["../../../src/patterns/Footer/Footer.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { Text } from \"@/primitives/Text\";\nimport { cn } from \"@/utils\";\n\n// Footer — app chrome shown at the bottom of a page. A responsive three-region\n// row: the regions stack centered on mobile and spread to start / center / end\n// on md+ (a grid, so the centre region stays centred regardless of the side\n// widths). Compose content from Text / Link / Logo; the helpers below cover the\n// common pieces (a \"Powered by\" lockup and a link separator).\n//\n//   <Footer>\n//     <FooterStart><Text size=\"mini\" variant=\"muted\">v2.6.0</Text></FooterStart>\n//     <FooterCenter>\n//       <FooterPoweredBy><Logo brand=\"slingshot\" variant=\"icon\" className=\"size-5\" /></FooterPoweredBy>\n//     </FooterCenter>\n//     <FooterEnd>\n//       <Link href=\"/tnc\" underline=\"hover\">T&C</Link>\n//       <FooterSeparator />\n//       <Link href=\"/privacy\" underline=\"hover\">Privacy</Link>\n//     </FooterEnd>\n//   </Footer>\n\n// Surface fills. `glass` is a translucent, backdrop-blurred panel (same --glass-*\n// tokens as Card/Container) — reads over a textured page background.\nconst footerBackgrounds = {\n  none: \"\",\n  muted: \"bg-muted-bg\",\n  glass: \"bg-glass-20-bg backdrop-blur-glass\",\n} as const;\n\n/** App chrome shown at the bottom of a page: a responsive three-region row (start / center / end). */\nfunction Footer({\n  className,\n  bordered = false,\n  background = \"none\",\n  ...props\n}: React.ComponentProps<\"footer\"> & {\n  /** Add a subtle top border separating the footer from page content. */\n  bordered?: boolean;\n  /** Surface fill. `glass` is a translucent, blurred panel over the page background. */\n  background?: keyof typeof footerBackgrounds;\n}) {\n  return (\n    <footer\n      data-slot=\"footer\"\n      data-background={background}\n      className={cn(\n        // Footer content is small by default (matches the version text); links and\n        // other unstyled children inherit this. Explicitly-sized <Text> is unaffected.\n        \"grid w-full grid-cols-1 gap-3 px-3 py-1 text-center md:grid-cols-3 md:items-center\",\n        \"text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]\",\n        footerBackgrounds[background],\n        bordered && \"border-t border-primary-border\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Leading region — left-aligned on md+ (e.g. an app version). */\nfunction FooterStart({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-start\"\n      className={cn(\n        \"flex items-center justify-center gap-2 md:justify-self-start md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Centre region — always centred (e.g. a \"Powered by\" lockup). */\nfunction FooterCenter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-center\"\n      className={cn(\"flex items-center justify-center gap-2 md:justify-self-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Trailing region — right-aligned on md+ (e.g. legal links). Wraps on small screens. */\nfunction FooterEnd({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-end\"\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-4 md:justify-end md:justify-self-end md:text-right\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Powered by\" lockup — the label plus a slot for the brand mark (a <Logo />). */\nfunction FooterPoweredBy({\n  className,\n  label = \"Powered by\",\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Override the default \"Powered by\" label. */\n  label?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"footer-powered-by\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    >\n      <Text as=\"span\" size=\"small\" variant=\"muted\">\n        {label}\n      </Text>\n      {children}\n    </div>\n  );\n}\n\n/** Visual divider between trailing links. */\nfunction FooterSeparator({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"footer-separator\"\n      aria-hidden=\"true\"\n      className={cn(\"select-none text-primary-border\", className)}\n      {...props}\n    >\n      |\n    </span>\n  );\n}\n\nexport { Footer, FooterStart, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator };\n"],"mappings":";;;;;AAyBA,MAAM,oBAAoB;CACxB,MAAM;CACN,OAAO;CACP,OAAO;AACT;;AAGA,SAAS,OAAO,EACd,WACA,WAAW,OACX,aAAa,QACb,GAAG,SAMF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,aAAU;EACV,mBAAiB;EACjB,WAAWA,WAAAA,GAGT,sFACA,6FACA,kBAAkB,aAClB,YAAY,kCACZ,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,6EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,qGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EACvB,WACA,QAAQ,cACR,UACA,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAClD,GAAI;YAHN,CAKE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,MAAD;GAAM,IAAG;GAAO,MAAK;GAAQ,SAAQ;aAClC;EACG,CAAA,GACL,QACE;;AAET;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAWD,WAAAA,GAAG,mCAAmC,SAAS;EAC1D,GAAI;YACL;CAEK,CAAA;AAEV"}

package/dist/patterns/Footer/index.d.cts

@@ -1,11 +1,11 @@
-import * as react_jsx_runtime215 from "react/jsx-runtime";
+import * as react_jsx_runtime69 from "react/jsx-runtime";
 import * as React from "react";
 
 //#region src/patterns/Footer/Footer.d.ts
 declare const footerBackgrounds: {
   readonly none: "";
-  readonly muted: "bg-muted";
-  readonly glass: "bg-[var(--glass-light)] backdrop-blur-glass";
+  readonly muted: "bg-muted-bg";
+  readonly glass: "bg-glass-20-bg backdrop-blur-glass";
 };
 /** App chrome shown at the bottom of a page: a responsive three-region row (start / center / end). */
 declare function Footer({
@@ -18,22 +18,22 @@ declare function Footer({
   bordered?: boolean;
   /** Surface fill. `glass` is a translucent, blurred panel over the page background. */
   background?: keyof typeof footerBackgrounds;
-}): react_jsx_runtime215.JSX.Element;
+}): react_jsx_runtime69.JSX.Element;
 /** Leading region — left-aligned on md+ (e.g. an app version). */
 declare function FooterStart({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime215.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime69.JSX.Element;
 /** Centre region — always centred (e.g. a "Powered by" lockup). */
 declare function FooterCenter({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime215.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime69.JSX.Element;
 /** Trailing region — right-aligned on md+ (e.g. legal links). Wraps on small screens. */
 declare function FooterEnd({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime215.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime69.JSX.Element;
 /** "Powered by" lockup — the label plus a slot for the brand mark (a <Logo />). */
 declare function FooterPoweredBy({
   className,
@@ -43,12 +43,12 @@ declare function FooterPoweredBy({
 }: React.ComponentProps<"div"> & {
   /** Override the default "Powered by" label. */
   label?: React.ReactNode;
-}): react_jsx_runtime215.JSX.Element;
+}): react_jsx_runtime69.JSX.Element;
 /** Visual divider between trailing links. */
 declare function FooterSeparator({
   className,
   ...props
-}: React.ComponentProps<"span">): react_jsx_runtime215.JSX.Element;
+}: React.ComponentProps<"span">): react_jsx_runtime69.JSX.Element;
 //#endregion
 export { Footer, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator, FooterStart };
 //# sourceMappingURL=index.d.cts.map

package/dist/patterns/Footer/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../../src/patterns/Footer/Footer.tsx"],"mappings":";;;;cAyBM;;;EAAA,SAAA,KAAA,EAAA,6CAII;AAAA,CAAA;;iBAGD,MAAA,CACP;EAAA,SAAA;EAAA,QAAA;EAAA,UAAA;EAAA,GAAA;CAAA,EAIC,KAAA,CAAM,cAJP,CAAA,QAAA,CAAA,GAAA;;UAEA,CAAA,EAAA,OAAA;;YAM0B,CAAA,EAAA,MAAA,OAAA,iBAAA;IAC3B,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;AAAA,iBAoBQ,WAAA,CAAW;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAA0B,KAAA,CAAM,cAAhC,CAAA,KAAA,CAAA,CAAA,EAAqD,oBAAA,CAAA,GAAA,CAAA,OAArD;;iBAcX,YAAA,CAdc;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAcwB,KAAA,CAAM,cAd9B,CAAA,KAAA,CAAA,CAAA,EAcmD,oBAAA,CAAA,GAAA,CAAA,OAdnD;;iBAyBd,SAAA,CAzBgE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAyB7B,KAAA,CAAM,cAzBuB,CAAA,KAAA,CAAA,CAAA,EAyBF,oBAAA,CAAA,GAAA,CAAA,OAzBE;AAAA;AAAA,iBAuChE,eAAA,CAzBY;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;CAAA,EA8BlB,KAAA,CAAM,cA9BY,CAAA,KAAA,CAAA,GAAA;EAAA;OAAG,CAAA,EAgCd,KAAA,CAAM,SAhCQ;IAiCvB,oBAAA,CAAA,GAAA,CAAA,OAjCoD;;AAAqB,iBAiDjE,eAAA,CAjDiE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAiDxB,KAAA,CAAM,cAjDkB,CAAA,MAAA,CAAA,CAAA,EAiDI,oBAAA,CAAA,GAAA,CAAA,OAjDJ"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../../src/patterns/Footer/Footer.tsx"],"mappings":";;;;cAyBM;;;EAAA,SAAA,KAAA,EAAA,oCAII;AAAA,CAAA;;iBAGD,MAAA,CACP;EAAA,SAAA;EAAA,QAAA;EAAA,UAAA;EAAA,GAAA;CAAA,EAIC,KAAA,CAAM,cAJP,CAAA,QAAA,CAAA,GAAA;;UAEA,CAAA,EAAA,OAAA;;YAM0B,CAAA,EAAA,MAAA,OAAA,iBAAA;IAC3B,mBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;AAAA,iBAoBQ,WAAA,CAAW;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAA0B,KAAA,CAAM,cAAhC,CAAA,KAAA,CAAA,CAAA,EAAqD,mBAAA,CAAA,GAAA,CAAA,OAArD;;iBAcX,YAAA,CAdc;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAcwB,KAAA,CAAM,cAd9B,CAAA,KAAA,CAAA,CAAA,EAcmD,mBAAA,CAAA,GAAA,CAAA,OAdnD;;iBAyBd,SAAA,CAzBgE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAyB7B,KAAA,CAAM,cAzBuB,CAAA,KAAA,CAAA,CAAA,EAyBF,mBAAA,CAAA,GAAA,CAAA,OAzBE;AAAA;AAAA,iBAuChE,eAAA,CAzBY;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;CAAA,EA8BlB,KAAA,CAAM,cA9BY,CAAA,KAAA,CAAA,GAAA;EAAA;OAAG,CAAA,EAgCd,KAAA,CAAM,SAhCQ;IAiCvB,mBAAA,CAAA,GAAA,CAAA,OAjCoD;;AAAqB,iBAiDjE,eAAA,CAjDiE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAiDxB,KAAA,CAAM,cAjDkB,CAAA,MAAA,CAAA,CAAA,EAiDI,mBAAA,CAAA,GAAA,CAAA,OAjDJ"}

package/dist/patterns/Footer/index.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
-import * as react_jsx_runtime133 from "react/jsx-runtime";
+import * as react_jsx_runtime225 from "react/jsx-runtime";
 
 //#region src/patterns/Footer/Footer.d.ts
 declare const footerBackgrounds: {
   readonly none: "";
-  readonly muted: "bg-muted";
-  readonly glass: "bg-[var(--glass-light)] backdrop-blur-glass";
+  readonly muted: "bg-muted-bg";
+  readonly glass: "bg-glass-20-bg backdrop-blur-glass";
 };
 /** App chrome shown at the bottom of a page: a responsive three-region row (start / center / end). */
 declare function Footer({
@@ -18,22 +18,22 @@ declare function Footer({
   bordered?: boolean;
   /** Surface fill. `glass` is a translucent, blurred panel over the page background. */
   background?: keyof typeof footerBackgrounds;
-}): react_jsx_runtime133.JSX.Element;
+}): react_jsx_runtime225.JSX.Element;
 /** Leading region — left-aligned on md+ (e.g. an app version). */
 declare function FooterStart({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime133.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime225.JSX.Element;
 /** Centre region — always centred (e.g. a "Powered by" lockup). */
 declare function FooterCenter({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime133.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime225.JSX.Element;
 /** Trailing region — right-aligned on md+ (e.g. legal links). Wraps on small screens. */
 declare function FooterEnd({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime133.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime225.JSX.Element;
 /** "Powered by" lockup — the label plus a slot for the brand mark (a <Logo />). */
 declare function FooterPoweredBy({
   className,
@@ -43,12 +43,12 @@ declare function FooterPoweredBy({
 }: React.ComponentProps<"div"> & {
   /** Override the default "Powered by" label. */
   label?: React.ReactNode;
-}): react_jsx_runtime133.JSX.Element;
+}): react_jsx_runtime225.JSX.Element;
 /** Visual divider between trailing links. */
 declare function FooterSeparator({
   className,
   ...props
-}: React.ComponentProps<"span">): react_jsx_runtime133.JSX.Element;
+}: React.ComponentProps<"span">): react_jsx_runtime225.JSX.Element;
 //#endregion
 export { Footer, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator, FooterStart };
 //# sourceMappingURL=index.d.ts.map

package/dist/patterns/Footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/patterns/Footer/Footer.tsx"],"mappings":";;;;cAyBM;;;EAAA,SAAA,KAAA,EAAA,6CAII;AAAA,CAAA;;iBAGD,MAAA,CACP;EAAA,SAAA;EAAA,QAAA;EAAA,UAAA;EAAA,GAAA;CAAA,EAIC,KAAA,CAAM,cAJP,CAAA,QAAA,CAAA,GAAA;;UAEA,CAAA,EAAA,OAAA;;YAM0B,CAAA,EAAA,MAAA,OAAA,iBAAA;IAC3B,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;AAAA,iBAoBQ,WAAA,CAAW;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAA0B,KAAA,CAAM,cAAhC,CAAA,KAAA,CAAA,CAAA,EAAqD,oBAAA,CAAA,GAAA,CAAA,OAArD;;iBAcX,YAAA,CAdc;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAcwB,KAAA,CAAM,cAd9B,CAAA,KAAA,CAAA,CAAA,EAcmD,oBAAA,CAAA,GAAA,CAAA,OAdnD;;iBAyBd,SAAA,CAzBgE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAyB7B,KAAA,CAAM,cAzBuB,CAAA,KAAA,CAAA,CAAA,EAyBF,oBAAA,CAAA,GAAA,CAAA,OAzBE;AAAA;AAAA,iBAuChE,eAAA,CAzBY;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;CAAA,EA8BlB,KAAA,CAAM,cA9BY,CAAA,KAAA,CAAA,GAAA;EAAA;OAAG,CAAA,EAgCd,KAAA,CAAM,SAhCQ;IAiCvB,oBAAA,CAAA,GAAA,CAAA,OAjCoD;;AAAqB,iBAiDjE,eAAA,CAjDiE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAiDxB,KAAA,CAAM,cAjDkB,CAAA,MAAA,CAAA,CAAA,EAiDI,oBAAA,CAAA,GAAA,CAAA,OAjDJ"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/patterns/Footer/Footer.tsx"],"mappings":";;;;cAyBM;;;EAAA,SAAA,KAAA,EAAA,oCAII;AAAA,CAAA;;iBAGD,MAAA,CACP;EAAA,SAAA;EAAA,QAAA;EAAA,UAAA;EAAA,GAAA;CAAA,EAIC,KAAA,CAAM,cAJP,CAAA,QAAA,CAAA,GAAA;;UAEA,CAAA,EAAA,OAAA;;YAM0B,CAAA,EAAA,MAAA,OAAA,iBAAA;IAC3B,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;AAAA,iBAoBQ,WAAA,CAAW;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAA0B,KAAA,CAAM,cAAhC,CAAA,KAAA,CAAA,CAAA,EAAqD,oBAAA,CAAA,GAAA,CAAA,OAArD;;iBAcX,YAAA,CAdc;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAcwB,KAAA,CAAM,cAd9B,CAAA,KAAA,CAAA,CAAA,EAcmD,oBAAA,CAAA,GAAA,CAAA,OAdnD;;iBAyBd,SAAA,CAzBgE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAyB7B,KAAA,CAAM,cAzBuB,CAAA,KAAA,CAAA,CAAA,EAyBF,oBAAA,CAAA,GAAA,CAAA,OAzBE;AAAA;AAAA,iBAuChE,eAAA,CAzBY;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;CAAA,EA8BlB,KAAA,CAAM,cA9BY,CAAA,KAAA,CAAA,GAAA;EAAA;OAAG,CAAA,EAgCd,KAAA,CAAM,SAhCQ;IAiCvB,oBAAA,CAAA,GAAA,CAAA,OAjCoD;;AAAqB,iBAiDjE,eAAA,CAjDiE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAiDxB,KAAA,CAAM,cAjDkB,CAAA,MAAA,CAAA,CAAA,EAiDI,oBAAA,CAAA,GAAA,CAAA,OAjDJ"}

package/dist/patterns/Footer/index.js

@@ -4,15 +4,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/Footer/Footer.tsx
 const footerBackgrounds = {
 	none: "",
-	muted: "bg-muted",
-	glass: "bg-[var(--glass-light)] backdrop-blur-glass"
+	muted: "bg-muted-bg",
+	glass: "bg-glass-20-bg backdrop-blur-glass"
 };
 /** App chrome shown at the bottom of a page: a responsive three-region row (start / center / end). */
 function Footer({ className, bordered = false, background = "none", ...props }) {
 	return /* @__PURE__ */ jsx("footer", {
 		"data-slot": "footer",
 		"data-background": background,
-		className: cn("grid w-full grid-cols-1 gap-3 px-4 py-3 text-center md:grid-cols-3 md:items-center md:px-6", "text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]", footerBackgrounds[background], bordered && "border-t border-border", className),
+		className: cn("grid w-full grid-cols-1 gap-3 px-3 py-1 text-center md:grid-cols-3 md:items-center", "text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]", footerBackgrounds[background], bordered && "border-t border-primary-border", className),
 		...props
 	});
 }
@@ -36,7 +36,7 @@ function FooterCenter({ className, ...props }) {
 function FooterEnd({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "footer-end",
-		className: cn("flex flex-wrap items-center justify-center gap-2 md:justify-end md:justify-self-end md:text-right", className),
+		className: cn("flex flex-wrap items-center justify-center gap-4 md:justify-end md:justify-self-end md:text-right", className),
 		...props
 	});
 }
@@ -59,7 +59,7 @@ function FooterSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "footer-separator",
 		"aria-hidden": "true",
-		className: cn("select-none text-border", className),
+		className: cn("select-none text-primary-border", className),
 		...props,
 		children: "|"
 	});

package/dist/patterns/Footer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/patterns/Footer/Footer.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { Text } from \"@/primitives/Text\";\nimport { cn } from \"@/utils\";\n\n// Footer — app chrome shown at the bottom of a page. A responsive three-region\n// row: the regions stack centered on mobile and spread to start / center / end\n// on md+ (a grid, so the centre region stays centred regardless of the side\n// widths). Compose content from Text / Link / Logo; the helpers below cover the\n// common pieces (a \"Powered by\" lockup and a link separator).\n//\n//   <Footer>\n//     <FooterStart><Text size=\"mini\" variant=\"muted\">v2.6.0</Text></FooterStart>\n//     <FooterCenter>\n//       <FooterPoweredBy><Logo brand=\"slingshot\" variant=\"icon\" className=\"size-5\" /></FooterPoweredBy>\n//     </FooterCenter>\n//     <FooterEnd>\n//       <Link href=\"/tnc\" underline=\"hover\">T&C</Link>\n//       <FooterSeparator />\n//       <Link href=\"/privacy\" underline=\"hover\">Privacy</Link>\n//     </FooterEnd>\n//   </Footer>\n\n// Surface fills. `glass` is a translucent, backdrop-blurred panel (same --glass-*\n// tokens as Card/Container) — reads over a textured page background.\nconst footerBackgrounds = {\n  none: \"\",\n  muted: \"bg-muted\",\n  glass: \"bg-[var(--glass-light)] backdrop-blur-glass\",\n} as const;\n\n/** App chrome shown at the bottom of a page: a responsive three-region row (start / center / end). */\nfunction Footer({\n  className,\n  bordered = false,\n  background = \"none\",\n  ...props\n}: React.ComponentProps<\"footer\"> & {\n  /** Add a subtle top border separating the footer from page content. */\n  bordered?: boolean;\n  /** Surface fill. `glass` is a translucent, blurred panel over the page background. */\n  background?: keyof typeof footerBackgrounds;\n}) {\n  return (\n    <footer\n      data-slot=\"footer\"\n      data-background={background}\n      className={cn(\n        // Footer content is small by default (matches the version text); links and\n        // other unstyled children inherit this. Explicitly-sized <Text> is unaffected.\n        \"grid w-full grid-cols-1 gap-3 px-4 py-3 text-center md:grid-cols-3 md:items-center md:px-6\",\n        \"text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]\",\n        footerBackgrounds[background],\n        bordered && \"border-t border-border\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Leading region — left-aligned on md+ (e.g. an app version). */\nfunction FooterStart({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-start\"\n      className={cn(\n        \"flex items-center justify-center gap-2 md:justify-self-start md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Centre region — always centred (e.g. a \"Powered by\" lockup). */\nfunction FooterCenter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-center\"\n      className={cn(\"flex items-center justify-center gap-2 md:justify-self-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Trailing region — right-aligned on md+ (e.g. legal links). Wraps on small screens. */\nfunction FooterEnd({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-end\"\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-2 md:justify-end md:justify-self-end md:text-right\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Powered by\" lockup — the label plus a slot for the brand mark (a <Logo />). */\nfunction FooterPoweredBy({\n  className,\n  label = \"Powered by\",\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Override the default \"Powered by\" label. */\n  label?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"footer-powered-by\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    >\n      <Text as=\"span\" size=\"small\" variant=\"muted\">\n        {label}\n      </Text>\n      {children}\n    </div>\n  );\n}\n\n/** Visual divider between trailing links. */\nfunction FooterSeparator({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"footer-separator\"\n      aria-hidden=\"true\"\n      className={cn(\"select-none text-border\", className)}\n      {...props}\n    >\n      |\n    </span>\n  );\n}\n\nexport { Footer, FooterStart, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator };\n"],"mappings":";;;;AAyBA,MAAM,oBAAoB;CACxB,MAAM;CACN,OAAO;CACP,OAAO;AACT;;AAGA,SAAS,OAAO,EACd,WACA,WAAW,OACX,aAAa,QACb,GAAG,SAMF;CACD,OACE,oBAAC,UAAD;EACE,aAAU;EACV,mBAAiB;EACjB,WAAW,GAGT,8FACA,6FACA,kBAAkB,aAClB,YAAY,0BACZ,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EACvB,WACA,QAAQ,cACR,UACA,GAAG,SAIF;CACD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;YAHN,CAKE,oBAAC,MAAD;GAAM,IAAG;GAAO,MAAK;GAAQ,SAAQ;aAClC;EACG,CAAA,GACL,QACE;;AAET;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;YACL;CAEK,CAAA;AAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/patterns/Footer/Footer.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { Text } from \"@/primitives/Text\";\nimport { cn } from \"@/utils\";\n\n// Footer — app chrome shown at the bottom of a page. A responsive three-region\n// row: the regions stack centered on mobile and spread to start / center / end\n// on md+ (a grid, so the centre region stays centred regardless of the side\n// widths). Compose content from Text / Link / Logo; the helpers below cover the\n// common pieces (a \"Powered by\" lockup and a link separator).\n//\n//   <Footer>\n//     <FooterStart><Text size=\"mini\" variant=\"muted\">v2.6.0</Text></FooterStart>\n//     <FooterCenter>\n//       <FooterPoweredBy><Logo brand=\"slingshot\" variant=\"icon\" className=\"size-5\" /></FooterPoweredBy>\n//     </FooterCenter>\n//     <FooterEnd>\n//       <Link href=\"/tnc\" underline=\"hover\">T&C</Link>\n//       <FooterSeparator />\n//       <Link href=\"/privacy\" underline=\"hover\">Privacy</Link>\n//     </FooterEnd>\n//   </Footer>\n\n// Surface fills. `glass` is a translucent, backdrop-blurred panel (same --glass-*\n// tokens as Card/Container) — reads over a textured page background.\nconst footerBackgrounds = {\n  none: \"\",\n  muted: \"bg-muted-bg\",\n  glass: \"bg-glass-20-bg backdrop-blur-glass\",\n} as const;\n\n/** App chrome shown at the bottom of a page: a responsive three-region row (start / center / end). */\nfunction Footer({\n  className,\n  bordered = false,\n  background = \"none\",\n  ...props\n}: React.ComponentProps<\"footer\"> & {\n  /** Add a subtle top border separating the footer from page content. */\n  bordered?: boolean;\n  /** Surface fill. `glass` is a translucent, blurred panel over the page background. */\n  background?: keyof typeof footerBackgrounds;\n}) {\n  return (\n    <footer\n      data-slot=\"footer\"\n      data-background={background}\n      className={cn(\n        // Footer content is small by default (matches the version text); links and\n        // other unstyled children inherit this. Explicitly-sized <Text> is unaffected.\n        \"grid w-full grid-cols-1 gap-3 px-3 py-1 text-center md:grid-cols-3 md:items-center\",\n        \"text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]\",\n        footerBackgrounds[background],\n        bordered && \"border-t border-primary-border\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Leading region — left-aligned on md+ (e.g. an app version). */\nfunction FooterStart({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-start\"\n      className={cn(\n        \"flex items-center justify-center gap-2 md:justify-self-start md:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Centre region — always centred (e.g. a \"Powered by\" lockup). */\nfunction FooterCenter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-center\"\n      className={cn(\"flex items-center justify-center gap-2 md:justify-self-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Trailing region — right-aligned on md+ (e.g. legal links). Wraps on small screens. */\nfunction FooterEnd({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"footer-end\"\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-4 md:justify-end md:justify-self-end md:text-right\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Powered by\" lockup — the label plus a slot for the brand mark (a <Logo />). */\nfunction FooterPoweredBy({\n  className,\n  label = \"Powered by\",\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Override the default \"Powered by\" label. */\n  label?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"footer-powered-by\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    >\n      <Text as=\"span\" size=\"small\" variant=\"muted\">\n        {label}\n      </Text>\n      {children}\n    </div>\n  );\n}\n\n/** Visual divider between trailing links. */\nfunction FooterSeparator({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"footer-separator\"\n      aria-hidden=\"true\"\n      className={cn(\"select-none text-primary-border\", className)}\n      {...props}\n    >\n      |\n    </span>\n  );\n}\n\nexport { Footer, FooterStart, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator };\n"],"mappings":";;;;AAyBA,MAAM,oBAAoB;CACxB,MAAM;CACN,OAAO;CACP,OAAO;AACT;;AAGA,SAAS,OAAO,EACd,WACA,WAAW,OACX,aAAa,QACb,GAAG,SAMF;CACD,OACE,oBAAC,UAAD;EACE,aAAU;EACV,mBAAiB;EACjB,WAAW,GAGT,sFACA,6FACA,kBAAkB,aAClB,YAAY,kCACZ,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EACvB,WACA,QAAQ,cACR,UACA,GAAG,SAIF;CACD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;YAHN,CAKE,oBAAC,MAAD;GAAM,IAAG;GAAO,MAAK;GAAQ,SAAQ;aAClC;EACG,CAAA,GACL,QACE;;AAET;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;YACL;CAEK,CAAA;AAEV"}

package/dist/patterns/Header/index.d.cts

@@ -1,2 +1,2 @@
-import { C as HeaderProps, S as HeaderEndpoints, _ as HeaderLogo, a as isSessionValid, b as ThemeToggle, c as useHeaderCredits, d as TOGGLE_PROJECT_DROPDOWN_EVENT, f as ToggleProjectDropdownDetail, g as HeaderBar, h as Header, i as getSessionToken, l as useHeaderProject, m as ProjectPicker, n as Labels, o as HeaderSelection, p as useGlobalHeader, r as buildEndpoints, s as UseHeaderProjectResult, t as DEFAULT_LABELS, u as GlobalHeaderState, v as OrgPill, w as ProjectNode, x as Fetcher, y as ProfileMenu } from "../../index70.cjs";
+import { C as HeaderProps, S as HeaderEndpoints, _ as HeaderLogo, a as isSessionValid, b as ThemeToggle, c as useHeaderCredits, d as TOGGLE_PROJECT_DROPDOWN_EVENT, f as ToggleProjectDropdownDetail, g as HeaderBar, h as Header, i as getSessionToken, l as useHeaderProject, m as ProjectPicker, n as Labels, o as HeaderSelection, p as useGlobalHeader, r as buildEndpoints, s as UseHeaderProjectResult, t as DEFAULT_LABELS, u as GlobalHeaderState, v as OrgPill, w as ProjectNode, x as Fetcher, y as ProfileMenu } from "../../index71.cjs";
 export { DEFAULT_LABELS, Fetcher, GlobalHeaderState, Header, HeaderBar, HeaderEndpoints, HeaderLogo, HeaderProps, HeaderSelection, Labels, OrgPill, ProfileMenu, ProjectNode, ProjectPicker, TOGGLE_PROJECT_DROPDOWN_EVENT, ThemeToggle, ToggleProjectDropdownDetail, UseHeaderProjectResult, buildEndpoints, getSessionToken, isSessionValid, useGlobalHeader, useHeaderCredits, useHeaderProject };

package/dist/patterns/Header/index.d.ts

@@ -1,2 +1,2 @@
-import { C as HeaderProps, S as HeaderEndpoints, _ as HeaderLogo, a as isSessionValid, b as ThemeToggle, c as useHeaderCredits, d as TOGGLE_PROJECT_DROPDOWN_EVENT, f as ToggleProjectDropdownDetail, g as HeaderBar, h as Header, i as getSessionToken, l as useHeaderProject, m as ProjectPicker, n as Labels, o as HeaderSelection, p as useGlobalHeader, r as buildEndpoints, s as UseHeaderProjectResult, t as DEFAULT_LABELS, u as GlobalHeaderState, v as OrgPill, w as ProjectNode, x as Fetcher, y as ProfileMenu } from "../../index70.js";
+import { C as HeaderProps, S as HeaderEndpoints, _ as HeaderLogo, a as isSessionValid, b as ThemeToggle, c as useHeaderCredits, d as TOGGLE_PROJECT_DROPDOWN_EVENT, f as ToggleProjectDropdownDetail, g as HeaderBar, h as Header, i as getSessionToken, l as useHeaderProject, m as ProjectPicker, n as Labels, o as HeaderSelection, p as useGlobalHeader, r as buildEndpoints, s as UseHeaderProjectResult, t as DEFAULT_LABELS, u as GlobalHeaderState, v as OrgPill, w as ProjectNode, x as Fetcher, y as ProfileMenu } from "../../index71.js";
 export { DEFAULT_LABELS, Fetcher, GlobalHeaderState, Header, HeaderBar, HeaderEndpoints, HeaderLogo, HeaderProps, HeaderSelection, Labels, OrgPill, ProfileMenu, ProjectNode, ProjectPicker, TOGGLE_PROJECT_DROPDOWN_EVENT, ThemeToggle, ToggleProjectDropdownDetail, UseHeaderProjectResult, buildEndpoints, getSessionToken, isSessionValid, useGlobalHeader, useHeaderCredits, useHeaderProject };

package/dist/patterns/MediaObject/index.cjs

@@ -9,7 +9,7 @@ let class_variance_authority = require("class-variance-authority");
 function MediaObject({ className, interactive, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {
 		"data-slot": "media-object",
-		className: require_cn.cn("group/media flex flex-col overflow-hidden rounded-2xl border bg-card", interactive && "transition-all hover:-translate-y-0.5 hover:shadow-md", className),
+		className: require_cn.cn("group/media flex flex-col overflow-hidden rounded-16 border bg-glass-none-bg", interactive && "transition-all hover:-translate-y-0.5 hover:shadow-md", className),
 		...props
 	});
 }

package/dist/patterns/MediaObject/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","Heading","Text"],"sources":["../../../src/patterns/MediaObject/MediaObject.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Heading, type HeadingProps } from \"@/primitives/Heading\";\nimport { Text } from \"@/primitives/Text\";\nimport { cn } from \"@/utils\";\n\n// MediaObject — a COMPOSITIONAL media card (Radix-style parts the consumer\n// assembles). Replaces the legacy landing \"media cards\" (image + title + text +\n// action) and slingshot \"feature cards\" (icon + title + description + action).\n// Each part is a thin styled wrapper carrying a data-slot; spacing and hover are\n// driven entirely by Tailwind tokens + CSS group-hover (no JS state).\n\n// MediaObject — root <article>. `interactive` opts into the CSS hover lift.\ntype MediaObjectProps = React.ComponentProps<\"article\"> & {\n  /** Add a CSS hover lift + shadow on hover (pure CSS, no JS state). */\n  interactive?: boolean;\n};\n\n/** Root <article> surface of a media card; consumers compose the parts inside it. */\nfunction MediaObject({ className, interactive, ...props }: MediaObjectProps) {\n  return (\n    <article\n      data-slot=\"media-object\"\n      className={cn(\n        \"group/media flex flex-col overflow-hidden rounded-2xl border bg-card\",\n        interactive && \"transition-all hover:-translate-y-0.5 hover:shadow-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectImage — the top media. `alt` is required for accessibility.\ntype MediaObjectImageProps = React.ComponentProps<\"img\"> & {\n  /** Required alt text describing the media (enforced for accessibility). */\n  alt: string;\n};\n\n/** Top media image of a card; renders a 16/9 cover image that scales on hover. */\nfunction MediaObjectImage({ className, alt, ...props }: MediaObjectImageProps) {\n  return (\n    // biome-ignore lint/a11y/useAltText: alt is required via props typing.\n    <img\n      data-slot=\"media-object-image\"\n      alt={alt}\n      className={cn(\n        \"aspect-[16/9] w-full object-cover transition-transform group-hover/media:scale-[1.02]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectIcon — the icon-top variant container; consumer renders an Icon inside.\n/** Square container for the icon-top card variant; place an Icon inside it. */\nfunction MediaObjectIcon({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-icon\"\n      className={cn(\"flex size-10 shrink-0 items-center justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectContent — the body region holding title/text/actions.\n/** Padded body region of a card that holds the title, text, and actions. */\nfunction MediaObjectContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-content\"\n      className={cn(\"flex flex-1 flex-col gap-3 p-5\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectTitle — reuses the Heading primitive (rendered as <h3>).\ntype MediaObjectTitleProps = Omit<HeadingProps, \"as\"> & {\n  /** Heading size step passthrough (defaults to \"4\"). */\n  size?: HeadingProps[\"size\"];\n};\n\n/** Card title; wraps the Heading primitive rendered as an <h3>. */\nfunction MediaObjectTitle({ size, ...props }: MediaObjectTitleProps) {\n  return <Heading data-slot=\"media-object-title\" as=\"h3\" size={size ?? \"4\"} {...props} />;\n}\n\n// MediaObjectText — reuses the Text primitive (muted, small body).\n/** Supporting body copy; wraps the Text primitive (muted, small). */\nfunction MediaObjectText({ ...props }: React.ComponentProps<typeof Text>) {\n  return <Text data-slot=\"media-object-text\" variant=\"muted\" size=\"small\" {...props} />;\n}\n\n// MediaObjectActions — pinned to the bottom of the content; holds a Button/Link.\n/** Action row pinned to the bottom of the content; holds a Button or Link. */\nfunction MediaObjectActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-actions\"\n      className={cn(\"mt-auto flex items-center gap-2 pt-2\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectGroup — responsive grid container. `columns` gives equal-width,\n// aligned items; `gap` lets the enclosing section own its spacing rhythm.\nconst mediaObjectGroupVariants = cva(\"grid\", {\n  variants: {\n    columns: {\n      1: \"grid-cols-1\",\n      2: \"grid-cols-1 sm:grid-cols-2\",\n      3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n      4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n    },\n    gap: {\n      sm: \"gap-4\",\n      md: \"gap-6\",\n      lg: \"gap-8\",\n    },\n  },\n  defaultVariants: {\n    columns: 3,\n    gap: \"lg\",\n  },\n});\n\ntype MediaObjectGroupProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof mediaObjectGroupVariants>;\n\n/** Responsive grid wrapper that lays out a set of MediaObject cards. */\nfunction MediaObjectGroup({ className, columns, gap, ...props }: MediaObjectGroupProps) {\n  return (\n    <div\n      data-slot=\"media-object-group\"\n      className={cn(mediaObjectGroupVariants({ columns, gap }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  MediaObject,\n  MediaObjectImage,\n  MediaObjectIcon,\n  MediaObjectContent,\n  MediaObjectTitle,\n  MediaObjectText,\n  MediaObjectActions,\n  MediaObjectGroup,\n  mediaObjectGroupVariants,\n  type MediaObjectProps,\n  type MediaObjectImageProps,\n  type MediaObjectTitleProps,\n  type MediaObjectGroupProps,\n};\n"],"mappings":";;;;;;;;AAoBA,SAAS,YAAY,EAAE,WAAW,aAAa,GAAG,SAA2B;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,wEACA,eAAe,yDACf,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AASA,SAAS,iBAAiB,EAAE,WAAW,KAAK,GAAG,SAAgC;CAC7E,OAEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACL;EACL,WAAWA,WAAAA,GACT,yFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAIA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsC;CAChF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;;AASA,SAAS,iBAAiB,EAAE,MAAM,GAAG,SAAgC;CACnE,OAAO,iBAAA,GAAA,kBAAA,KAACC,iCAAAA,SAAD;EAAS,aAAU;EAAqB,IAAG;EAAK,MAAM,QAAQ;EAAK,GAAI;CAAQ,CAAA;AACxF;;AAIA,SAAS,gBAAgB,EAAE,GAAG,SAA4C;CACxE,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,MAAD;EAAM,aAAU;EAAoB,SAAQ;EAAQ,MAAK;EAAQ,GAAI;CAAQ,CAAA;AACtF;;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsC;CAChF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWF,WAAAA,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAIA,MAAM,4BAAA,GAAA,yBAAA,KAA+B,QAAQ;CAC3C,UAAU;EACR,SAAS;GACP,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;EACL;EACA,KAAK;GACH,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,KAAK;CACP;AACF,CAAC;;AAMD,SAAS,iBAAiB,EAAE,WAAW,SAAS,KAAK,GAAG,SAAgC;CACtF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,yBAAyB;GAAE;GAAS;EAAI,CAAC,GAAG,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn","Heading","Text"],"sources":["../../../src/patterns/MediaObject/MediaObject.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Heading, type HeadingProps } from \"@/primitives/Heading\";\nimport { Text } from \"@/primitives/Text\";\nimport { cn } from \"@/utils\";\n\n// MediaObject — a COMPOSITIONAL media card (Radix-style parts the consumer\n// assembles). Replaces the legacy landing \"media cards\" (image + title + text +\n// action) and slingshot \"feature cards\" (icon + title + description + action).\n// Each part is a thin styled wrapper carrying a data-slot; spacing and hover are\n// driven entirely by Tailwind tokens + CSS group-hover (no JS state).\n\n// MediaObject — root <article>. `interactive` opts into the CSS hover lift.\ntype MediaObjectProps = React.ComponentProps<\"article\"> & {\n  /** Add a CSS hover lift + shadow on hover (pure CSS, no JS state). */\n  interactive?: boolean;\n};\n\n/** Root <article> surface of a media card; consumers compose the parts inside it. */\nfunction MediaObject({ className, interactive, ...props }: MediaObjectProps) {\n  return (\n    <article\n      data-slot=\"media-object\"\n      className={cn(\n        \"group/media flex flex-col overflow-hidden rounded-16 border bg-glass-none-bg\",\n        interactive && \"transition-all hover:-translate-y-0.5 hover:shadow-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectImage — the top media. `alt` is required for accessibility.\ntype MediaObjectImageProps = React.ComponentProps<\"img\"> & {\n  /** Required alt text describing the media (enforced for accessibility). */\n  alt: string;\n};\n\n/** Top media image of a card; renders a 16/9 cover image that scales on hover. */\nfunction MediaObjectImage({ className, alt, ...props }: MediaObjectImageProps) {\n  return (\n    // biome-ignore lint/a11y/useAltText: alt is required via props typing.\n    <img\n      data-slot=\"media-object-image\"\n      alt={alt}\n      className={cn(\n        \"aspect-[16/9] w-full object-cover transition-transform group-hover/media:scale-[1.02]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectIcon — the icon-top variant container; consumer renders an Icon inside.\n/** Square container for the icon-top card variant; place an Icon inside it. */\nfunction MediaObjectIcon({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-icon\"\n      className={cn(\"flex size-10 shrink-0 items-center justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectContent — the body region holding title/text/actions.\n/** Padded body region of a card that holds the title, text, and actions. */\nfunction MediaObjectContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-content\"\n      className={cn(\"flex flex-1 flex-col gap-3 p-5\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectTitle — reuses the Heading primitive (rendered as <h3>).\ntype MediaObjectTitleProps = Omit<HeadingProps, \"as\"> & {\n  /** Heading size step passthrough (defaults to \"4\"). */\n  size?: HeadingProps[\"size\"];\n};\n\n/** Card title; wraps the Heading primitive rendered as an <h3>. */\nfunction MediaObjectTitle({ size, ...props }: MediaObjectTitleProps) {\n  return <Heading data-slot=\"media-object-title\" as=\"h3\" size={size ?? \"4\"} {...props} />;\n}\n\n// MediaObjectText — reuses the Text primitive (muted, small body).\n/** Supporting body copy; wraps the Text primitive (muted, small). */\nfunction MediaObjectText({ ...props }: React.ComponentProps<typeof Text>) {\n  return <Text data-slot=\"media-object-text\" variant=\"muted\" size=\"small\" {...props} />;\n}\n\n// MediaObjectActions — pinned to the bottom of the content; holds a Button/Link.\n/** Action row pinned to the bottom of the content; holds a Button or Link. */\nfunction MediaObjectActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"media-object-actions\"\n      className={cn(\"mt-auto flex items-center gap-2 pt-2\", className)}\n      {...props}\n    />\n  );\n}\n\n// MediaObjectGroup — responsive grid container. `columns` gives equal-width,\n// aligned items; `gap` lets the enclosing section own its spacing rhythm.\nconst mediaObjectGroupVariants = cva(\"grid\", {\n  variants: {\n    columns: {\n      1: \"grid-cols-1\",\n      2: \"grid-cols-1 sm:grid-cols-2\",\n      3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n      4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n    },\n    gap: {\n      sm: \"gap-4\",\n      md: \"gap-6\",\n      lg: \"gap-8\",\n    },\n  },\n  defaultVariants: {\n    columns: 3,\n    gap: \"lg\",\n  },\n});\n\ntype MediaObjectGroupProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof mediaObjectGroupVariants>;\n\n/** Responsive grid wrapper that lays out a set of MediaObject cards. */\nfunction MediaObjectGroup({ className, columns, gap, ...props }: MediaObjectGroupProps) {\n  return (\n    <div\n      data-slot=\"media-object-group\"\n      className={cn(mediaObjectGroupVariants({ columns, gap }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  MediaObject,\n  MediaObjectImage,\n  MediaObjectIcon,\n  MediaObjectContent,\n  MediaObjectTitle,\n  MediaObjectText,\n  MediaObjectActions,\n  MediaObjectGroup,\n  mediaObjectGroupVariants,\n  type MediaObjectProps,\n  type MediaObjectImageProps,\n  type MediaObjectTitleProps,\n  type MediaObjectGroupProps,\n};\n"],"mappings":";;;;;;;;AAoBA,SAAS,YAAY,EAAE,WAAW,aAAa,GAAG,SAA2B;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,gFACA,eAAe,yDACf,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AASA,SAAS,iBAAiB,EAAE,WAAW,KAAK,GAAG,SAAgC;CAC7E,OAEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACL;EACL,WAAWA,WAAAA,GACT,yFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAIA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsC;CAChF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;;AASA,SAAS,iBAAiB,EAAE,MAAM,GAAG,SAAgC;CACnE,OAAO,iBAAA,GAAA,kBAAA,KAACC,iCAAAA,SAAD;EAAS,aAAU;EAAqB,IAAG;EAAK,MAAM,QAAQ;EAAK,GAAI;CAAQ,CAAA;AACxF;;AAIA,SAAS,gBAAgB,EAAE,GAAG,SAA4C;CACxE,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,MAAD;EAAM,aAAU;EAAoB,SAAQ;EAAQ,MAAK;EAAQ,GAAI;CAAQ,CAAA;AACtF;;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsC;CAChF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWF,WAAAA,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAIA,MAAM,4BAAA,GAAA,yBAAA,KAA+B,QAAQ;CAC3C,UAAU;EACR,SAAS;GACP,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;EACL;EACA,KAAK;GACH,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,KAAK;CACP;AACF,CAAC;;AAMD,SAAS,iBAAiB,EAAE,WAAW,SAAS,KAAK,GAAG,SAAgC;CACtF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,yBAAyB;GAAE;GAAS;EAAI,CAAC,GAAG,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}