@psnext/design-system 2.2.0 → 2.4.0

package/dist/patterns/DataTable/index.cjs

@@ -1,12 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../../chunk.cjs");
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 const require_primitives_Button_index = require("../../primitives/Button/index.cjs");
 const require_primitives_Table_index = require("../../primitives/Table/index.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 let _tanstack_react_table = require("@tanstack/react-table");
 //#region src/patterns/DataTable/DataTable.tsx
 /**
@@ -109,7 +110,10 @@ function DataTableColumnHeader({ column, title, className }) {
 		size: "sm",
 		className: require_cn.cn("-ml-2 h-8 text-xs leading-4 font-medium", className),
 		onClick: () => column.toggleSorting(sorted === "asc"),
-		children: [title, sorted === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDownIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDownIcon, { className: "opacity-50" })]
+		children: [title, sorted === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { as: lucide_react.ArrowUpIcon }) : sorted === "desc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { as: lucide_react.ArrowDownIcon }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			as: lucide_react.ChevronsUpDownIcon,
+			className: "opacity-50"
+		})]
 	});
 }
 //#endregion

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-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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"}
+{"version":3,"file":"index.cjs","names":["React","Table","TableHeader","TableRow","TableHead","TableBody","TableCell","Button","cn","Icon","ArrowUpIcon","ArrowDownIcon","ChevronsUpDownIcon"],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon } from \"@/primitives/Icon\";\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        <Icon as={ArrowUpIcon} />\n      ) : sorted === \"desc\" ? (\n        <Icon as={ArrowDownIcon} />\n      ) : (\n        <Icon as={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/DataTable/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime149 from "react/jsx-runtime";
+import * as react_jsx_runtime161 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_runtime149.JSX.Element;
+}: DataTableProps<TData, TValue>): react_jsx_runtime161.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_runtime149.JSX.Element;
+}): react_jsx_runtime161.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;;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"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"mappings":";;;;KAqBK;;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.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime121 from "react/jsx-runtime";
+import * as react_jsx_runtime24 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_runtime121.JSX.Element;
+}: DataTableProps<TData, TValue>): react_jsx_runtime24.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_runtime121.JSX.Element;
+}): react_jsx_runtime24.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;;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"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"mappings":";;;;KAqBK;;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.js

@@ -1,9 +1,10 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
 import { Button } from "../../primitives/Button/index.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../primitives/Table/index.js";
 import * as React from "react";
-import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 //#region src/patterns/DataTable/DataTable.tsx
 /**
@@ -106,7 +107,10 @@ function DataTableColumnHeader({ column, title, className }) {
 		size: "sm",
 		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, { className: "opacity-50" })]
+		children: [title, sorted === "asc" ? /* @__PURE__ */ jsx(Icon, { as: ArrowUpIcon }) : sorted === "desc" ? /* @__PURE__ */ jsx(Icon, { as: ArrowDownIcon }) : /* @__PURE__ */ jsx(Icon, {
+			as: 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-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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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon } from \"@/primitives/Icon\";\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        <Icon as={ArrowUpIcon} />\n      ) : sorted === \"desc\" ? (\n        <Icon as={ArrowDownIcon} />\n      ) : (\n        <Icon as={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.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime151 from "react/jsx-runtime";
+import * as react_jsx_runtime77 from "react/jsx-runtime";
 import * as React from "react";
 
 //#region src/patterns/Footer/Footer.d.ts
@@ -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_runtime151.JSX.Element;
+}): react_jsx_runtime77.JSX.Element;
 /** Leading region — left-aligned on md+ (e.g. an app version). */
 declare function FooterStart({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime151.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime77.JSX.Element;
 /** Centre region — always centred (e.g. a "Powered by" lockup). */
 declare function FooterCenter({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime151.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime77.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_runtime151.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime77.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_runtime151.JSX.Element;
+}): react_jsx_runtime77.JSX.Element;
 /** Visual divider between trailing links. */
 declare function FooterSeparator({
   className,
   ...props
-}: React.ComponentProps<"span">): react_jsx_runtime151.JSX.Element;
+}: React.ComponentProps<"span">): react_jsx_runtime77.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,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"}
+{"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,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime63 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/patterns/Footer/Footer.d.ts
 declare const footerBackgrounds: {
@@ -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_runtime63.JSX.Element;
+}): react_jsx_runtime18.JSX.Element;
 /** Leading region — left-aligned on md+ (e.g. an app version). */
 declare function FooterStart({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime63.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime18.JSX.Element;
 /** Centre region — always centred (e.g. a "Powered by" lockup). */
 declare function FooterCenter({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime63.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime18.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_runtime63.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime18.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_runtime63.JSX.Element;
+}): react_jsx_runtime18.JSX.Element;
 /** Visual divider between trailing links. */
 declare function FooterSeparator({
   className,
   ...props
-}: React.ComponentProps<"span">): react_jsx_runtime63.JSX.Element;
+}: React.ComponentProps<"span">): react_jsx_runtime18.JSX.Element;
 //#endregion
 export { Footer, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator, FooterStart };
 //# sourceMappingURL=index.d.ts.map

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

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

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

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

package/dist/patterns/MediaObject/index.cjs

@@ -2,8 +2,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
 const require_primitives_Heading_index = require("../../primitives/Heading/index.cjs");
 const require_primitives_Text_index = require("../../primitives/Text/index.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/patterns/MediaObject/MediaObject.tsx
 /** Root <article> surface of a media card; consumers compose the parts inside it. */
 function MediaObject({ className, interactive, ...props }) {

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

@@ -1,7 +1,7 @@
 import { n as HeadingProps } from "../../index28.cjs";
 import { t as Text } from "../../index61.cjs";
-import * as react_jsx_runtime141 from "react/jsx-runtime";
-import * as class_variance_authority_types12 from "class-variance-authority/types";
+import * as react_jsx_runtime196 from "react/jsx-runtime";
+import * as class_variance_authority_types13 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
@@ -15,7 +15,7 @@ declare function MediaObject({
   className,
   interactive,
   ...props
-}: MediaObjectProps): react_jsx_runtime141.JSX.Element;
+}: MediaObjectProps): react_jsx_runtime196.JSX.Element;
 type MediaObjectImageProps = React.ComponentProps<"img"> & {
   /** Required alt text describing the media (enforced for accessibility). */
   alt: string;
@@ -25,17 +25,17 @@ declare function MediaObjectImage({
   className,
   alt,
   ...props
-}: MediaObjectImageProps): react_jsx_runtime141.JSX.Element;
+}: MediaObjectImageProps): react_jsx_runtime196.JSX.Element;
 /** Square container for the icon-top card variant; place an Icon inside it. */
 declare function MediaObjectIcon({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime141.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime196.JSX.Element;
 /** Padded body region of a card that holds the title, text, and actions. */
 declare function MediaObjectContent({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime141.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime196.JSX.Element;
 type MediaObjectTitleProps = Omit<HeadingProps, "as"> & {
   /** Heading size step passthrough (defaults to "4"). */
   size?: HeadingProps["size"];
@@ -44,20 +44,20 @@ type MediaObjectTitleProps = Omit<HeadingProps, "as"> & {
 declare function MediaObjectTitle({
   size,
   ...props
-}: MediaObjectTitleProps): react_jsx_runtime141.JSX.Element;
+}: MediaObjectTitleProps): react_jsx_runtime196.JSX.Element;
 /** Supporting body copy; wraps the Text primitive (muted, small). */
 declare function MediaObjectText({
   ...props
-}: React.ComponentProps<typeof Text>): react_jsx_runtime141.JSX.Element;
+}: React.ComponentProps<typeof Text>): react_jsx_runtime196.JSX.Element;
 /** Action row pinned to the bottom of the content; holds a Button or Link. */
 declare function MediaObjectActions({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime141.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime196.JSX.Element;
 declare const mediaObjectGroupVariants: (props?: ({
   columns?: 1 | 2 | 3 | 4 | null | undefined;
   gap?: "sm" | "lg" | "md" | null | undefined;
-} & class_variance_authority_types12.ClassProp) | undefined) => string;
+} & class_variance_authority_types13.ClassProp) | undefined) => string;
 type MediaObjectGroupProps = React.ComponentProps<"div"> & VariantProps<typeof mediaObjectGroupVariants>;
 /** Responsive grid wrapper that lays out a set of MediaObject cards. */
 declare function MediaObjectGroup({
@@ -65,7 +65,7 @@ declare function MediaObjectGroup({
   columns,
   gap,
   ...props
-}: MediaObjectGroupProps): react_jsx_runtime141.JSX.Element;
+}: MediaObjectGroupProps): react_jsx_runtime196.JSX.Element;
 //#endregion
 export { MediaObject, MediaObjectActions, MediaObjectContent, MediaObjectGroup, type MediaObjectGroupProps, MediaObjectIcon, MediaObjectImage, type MediaObjectImageProps, type MediaObjectProps, MediaObjectText, MediaObjectTitle, type MediaObjectTitleProps, mediaObjectGroupVariants };
 //# sourceMappingURL=index.d.cts.map

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

@@ -1,9 +1,9 @@
 import { n as HeadingProps } from "../../index28.js";
 import { t as Text } from "../../index61.js";
-import * as React from "react";
-import * as react_jsx_runtime55 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types7 from "class-variance-authority/types";
+import * as React from "react";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/patterns/MediaObject/MediaObject.d.ts
 type MediaObjectProps = React.ComponentProps<"article"> & {
@@ -15,7 +15,7 @@ declare function MediaObject({
   className,
   interactive,
   ...props
-}: MediaObjectProps): react_jsx_runtime55.JSX.Element;
+}: MediaObjectProps): react_jsx_runtime10.JSX.Element;
 type MediaObjectImageProps = React.ComponentProps<"img"> & {
   /** Required alt text describing the media (enforced for accessibility). */
   alt: string;
@@ -25,17 +25,17 @@ declare function MediaObjectImage({
   className,
   alt,
   ...props
-}: MediaObjectImageProps): react_jsx_runtime55.JSX.Element;
+}: MediaObjectImageProps): react_jsx_runtime10.JSX.Element;
 /** Square container for the icon-top card variant; place an Icon inside it. */
 declare function MediaObjectIcon({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime55.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime10.JSX.Element;
 /** Padded body region of a card that holds the title, text, and actions. */
 declare function MediaObjectContent({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime55.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime10.JSX.Element;
 type MediaObjectTitleProps = Omit<HeadingProps, "as"> & {
   /** Heading size step passthrough (defaults to "4"). */
   size?: HeadingProps["size"];
@@ -44,20 +44,20 @@ type MediaObjectTitleProps = Omit<HeadingProps, "as"> & {
 declare function MediaObjectTitle({
   size,
   ...props
-}: MediaObjectTitleProps): react_jsx_runtime55.JSX.Element;
+}: MediaObjectTitleProps): react_jsx_runtime10.JSX.Element;
 /** Supporting body copy; wraps the Text primitive (muted, small). */
 declare function MediaObjectText({
   ...props
-}: React.ComponentProps<typeof Text>): react_jsx_runtime55.JSX.Element;
+}: React.ComponentProps<typeof Text>): react_jsx_runtime10.JSX.Element;
 /** Action row pinned to the bottom of the content; holds a Button or Link. */
 declare function MediaObjectActions({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime55.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime10.JSX.Element;
 declare const mediaObjectGroupVariants: (props?: ({
-  columns?: 1 | 2 | 3 | 4 | null | undefined;
-  gap?: "sm" | "lg" | "md" | null | undefined;
-} & class_variance_authority_types7.ClassProp) | undefined) => string;
+  columns?: 3 | 1 | 2 | 4 | null | undefined;
+  gap?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
 type MediaObjectGroupProps = React.ComponentProps<"div"> & VariantProps<typeof mediaObjectGroupVariants>;
 /** Responsive grid wrapper that lays out a set of MediaObject cards. */
 declare function MediaObjectGroup({
@@ -65,7 +65,7 @@ declare function MediaObjectGroup({
   columns,
   gap,
   ...props
-}: MediaObjectGroupProps): react_jsx_runtime55.JSX.Element;
+}: MediaObjectGroupProps): react_jsx_runtime10.JSX.Element;
 //#endregion
 export { MediaObject, MediaObjectActions, MediaObjectContent, MediaObjectGroup, type MediaObjectGroupProps, MediaObjectIcon, MediaObjectImage, type MediaObjectImageProps, type MediaObjectProps, MediaObjectText, MediaObjectTitle, type MediaObjectTitleProps, mediaObjectGroupVariants };
 //# sourceMappingURL=index.d.ts.map

package/dist/patterns/MediaObject/index.js

@@ -1,8 +1,8 @@
 import { t as cn } from "../../cn.js";
 import { Heading } from "../../primitives/Heading/index.js";
 import { Text } from "../../primitives/Text/index.js";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
 //#region src/patterns/MediaObject/MediaObject.tsx
 /** Root <article> surface of a media card; consumers compose the parts inside it. */
 function MediaObject({ className, interactive, ...props }) {

package/dist/patterns/NavRail/index.cjs

@@ -1,13 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../../chunk.cjs");
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 const require_primitives_Popover_index = require("../../primitives/Popover/index.cjs");
 const require_primitives_Tooltip_index = require("../../primitives/Tooltip/index.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let radix_ui = require("radix-ui");
-let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/patterns/NavRail/NavRail.tsx
 const NavRailContext = react.createContext("icon");
 const RAIL_BY_MODE = {
@@ -152,7 +153,8 @@ function NavRailMenuTrigger({ label, active, className, children, ...props }) {
 					className: LABEL_BY_MODE[mode],
 					children: label
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					as: lucide_react.ChevronRightIcon,
 					"aria-hidden": true,
 					className: CHEVRON_BY_MODE[mode]
 				})