@signalflare-ai/ui 0.5.0

package/dist/data-grid-UJ9ja5cu.js

@@ -0,0 +1,305 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Loader } from "./loader-DAcc-Uag.js";
+import { t as Button } from "./button-De0267YU.js";
+import { t as Checkbox } from "./checkbox-CPX7lBaU.js";
+import { t as DropdownMenu } from "./dropdown-J5T4pHaR.js";
+import { t as Pagination } from "./pagination-C_YqCy8l.js";
+import { r as Table } from "./table-CIMx0Oq0.js";
+import { t as Filters } from "./filters-BdBogf7D.js";
+import { t as Empty } from "./empty-D2TypIId.js";
+import { createContext, useContext, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon, CaretUpDownIcon, CaretUpIcon, ColumnsIcon, FadersHorizontalIcon } from "@phosphor-icons/react";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/components/data-grid/data-grid.tsx
+/** DataGrid layout variant definitions */
+var SF_DATA_GRID_VARIANTS = { layout: {
+	auto: {
+		classes: "",
+		description: "Auto column sizing - columns resize based on content"
+	},
+	fixed: {
+		classes: "table-fixed",
+		description: "Fixed column sizing - columns have equal width"
+	}
+} };
+/** Default variants for DataGrid */
+var SF_DATA_GRID_DEFAULT_VARIANTS = { layout: "auto" };
+var DataGridContext = createContext(null);
+function useDataGridContext() {
+	const context = useContext(DataGridContext);
+	if (!context) throw new Error("DataGrid compound components must be used within a DataGrid");
+	return context;
+}
+function SortIcon({ sorted }) {
+	if (sorted === "asc") return /* @__PURE__ */ jsx(CaretUpIcon, { className: "size-3.5 text-sf-brand" });
+	if (sorted === "desc") return /* @__PURE__ */ jsx(CaretDownIcon, { className: "size-3.5 text-sf-brand" });
+	return /* @__PURE__ */ jsx(CaretUpDownIcon, { className: "size-3.5 text-sf-subtle" });
+}
+/**
+* Toolbar component for DataGrid.
+* Shows filters, column visibility toggle, and custom actions.
+*/
+function DataGridToolbar({ className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2 border-b border-sf-line p-3", className),
+		children
+	});
+}
+DataGridToolbar.displayName = "DataGrid.Toolbar";
+/**
+* Column visibility toggle dropdown.
+* Shows checkboxes for each hideable column.
+*/
+function DataGridColumnToggle({ className, trigger, label = "Columns" }) {
+	const { table } = useDataGridContext();
+	const hideableColumns = useMemo(() => {
+		return table.getAllColumns().filter((col) => col.getCanHide() && (col.columnDef.enableHiding !== false || col.getCanHide()));
+	}, [table]);
+	if (hideableColumns.length === 0) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: trigger ?? /* @__PURE__ */ jsxs(Button, {
+		variant: "secondary",
+		size: "sm",
+		className,
+		children: [/* @__PURE__ */ jsx(ColumnsIcon, { className: "mr-1.5 size-4" }), label]
+	}) }), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+		className: "w-48",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 p-1",
+			children: [hideableColumns.map((column) => /* @__PURE__ */ jsxs("label", {
+				className: "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-sf-tint",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					checked: column.getIsVisible(),
+					onCheckedChange: (checked) => column.toggleVisibility(!!checked)
+				}), /* @__PURE__ */ jsx("span", {
+					className: "flex-1",
+					children: typeof column.columnDef.header === "string" ? column.columnDef.header : column.id
+				})]
+			}, column.id)), hideableColumns.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-sf-line" }),
+				/* @__PURE__ */ jsx(DropdownMenu.Item, {
+					onClick: () => hideableColumns.forEach((col) => col.toggleVisibility(true)),
+					children: "Show all"
+				}),
+				/* @__PURE__ */ jsx(DropdownMenu.Item, {
+					onClick: () => hideableColumns.forEach((col) => col.toggleVisibility(false)),
+					children: "Hide all"
+				})
+			] })]
+		})
+	})] });
+}
+DataGridColumnToggle.displayName = "DataGrid.ColumnToggle";
+/**
+* Main table content component.
+* Renders the table with headers, rows, and cells.
+*/
+function DataGridContent({ className }) {
+	const { table, loading, loadingRows, enableColumnResizing } = useDataGridContext();
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className: "p-4",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "space-y-2",
+			children: Array.from({ length: loadingRows ?? 5 }).map((_, i) => /* @__PURE__ */ jsx(Loader, { className: "h-10 w-full" }, i))
+		})
+	});
+	return /* @__PURE__ */ jsxs(Table, {
+		className,
+		children: [/* @__PURE__ */ jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table.Row, { children: headerGroup.headers.map((header) => {
+			const canSort = header.column.getCanSort();
+			const sorted = header.column.getIsSorted();
+			const canResize = enableColumnResizing && header.column.getCanResize();
+			const isResizing = header.column.getIsResizing();
+			return /* @__PURE__ */ jsxs(Table.Head, {
+				className: cn("bg-sf-base relative group", canSort && "cursor-pointer select-none hover:bg-sf-overlay", header.column.columnDef.headerClassName),
+				style: canResize ? { width: header.getSize() } : void 0,
+				onClick: canSort ? () => header.column.toggleSorting() : void 0,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), canSort && /* @__PURE__ */ jsx(SortIcon, { sorted })]
+				}), canResize && /* @__PURE__ */ jsx(Table.ResizeHandle, {
+					onMouseDown: header.getResizeHandler(),
+					onTouchStart: header.getResizeHandler(),
+					onDoubleClick: () => header.column.resetSize(),
+					className: cn(isResizing && "visible bg-sf-brand/20")
+				})]
+			}, header.id);
+		}) }, headerGroup.id)) }), /* @__PURE__ */ jsx(Table.Body, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(Table.Row, {
+			variant: row.getIsSelected() ? "selected" : "default",
+			className: cn(row.getIsSelected() && "bg-sf-tint", "hover:bg-sf-overlay"),
+			children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table.Cell, {
+				className: cell.column.columnDef.cellClassName,
+				style: enableColumnResizing ? { width: cell.column.getSize() } : void 0,
+				children: flexRender(cell.column.columnDef.cell, cell.getContext())
+			}, cell.id))
+		}, row.id)) })]
+	});
+}
+DataGridContent.displayName = "DataGrid.Content";
+/**
+* Pagination controls for DataGrid.
+* Wraps the Pagination component with table state.
+*/
+function DataGridPagination({ className }) {
+	const { table, pageSize: _pageSize, pageIndex: _pageIndex, totalCount, manualPagination } = useDataGridContext();
+	const paginationState = table.getState().pagination;
+	const currentPageIndex = paginationState.pageIndex;
+	const currentPageSize = paginationState.pageSize;
+	const startRow = currentPageIndex * currentPageSize + 1;
+	const endRow = Math.min((currentPageIndex + 1) * currentPageSize, manualPagination ? totalCount : table.getCoreRowModel().rows.length);
+	if (table.getPageCount() <= 1 && !manualPagination) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-between border-t border-sf-line p-3", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-sm text-sf-subtle",
+			children: [
+				"Showing ",
+				startRow,
+				"–",
+				endRow,
+				" of",
+				" ",
+				manualPagination ? totalCount : table.getCoreRowModel().rows.length
+			]
+		}), /* @__PURE__ */ jsx(Pagination, {
+			page: currentPageIndex + 1,
+			setPage: (page) => table.setPageIndex(page - 1),
+			perPage: currentPageSize,
+			totalCount: manualPagination ? totalCount : table.getCoreRowModel().rows.length,
+			text: ({ pageShowingRange, totalCount: total }) => `Showing ${pageShowingRange} of ${total}`
+		})]
+	});
+}
+DataGridPagination.displayName = "DataGrid.Pagination";
+/**
+* Empty state component for DataGrid.
+* Shown when there are no rows to display.
+*/
+function DataGridEmpty({ className, children, title = "No results", description = "No data to display." }) {
+	const { table } = useDataGridContext();
+	if (table.getCoreRowModel().rows.length > 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("p-8", className),
+		children: children ?? /* @__PURE__ */ jsx(Empty, {
+			icon: /* @__PURE__ */ jsx(FadersHorizontalIcon, { className: "size-10 text-sf-subtle" }),
+			title,
+			description
+		})
+	});
+}
+DataGridEmpty.displayName = "DataGrid.Empty";
+/**
+* DataGrid root component.
+* Sets up the react-table instance and provides context to child components.
+*/
+function DataGridRoot({ data, columns, sorting: controlledSorting, onSortingChange, enableSorting = true, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, enableColumnVisibility = true, rowSelection: controlledRowSelection, onRowSelectionChange, enableRowSelection, pageSize = 10, pageIndex = 0, onPaginationChange, totalCount, manualPagination = false, pageSizeOptions: _pageSizeOptions = [
+	10,
+	25,
+	50,
+	100
+], filters, onFiltersChange, filterFields, enableFiltering, layout: _layout = SF_DATA_GRID_DEFAULT_VARIANTS.layout, className, tableClassName, emptyState, loading, loadingRows, toolbar, showToolbar = true, showPagination = true, pagination: customPagination, enableColumnResizing, columnResizeMode = "onEnd", children }) {
+	const [internalSorting, setInternalSorting] = useState([]);
+	const [internalColumnVisibility, setInternalColumnVisibility] = useState({});
+	const [internalRowSelection, setInternalRowSelection] = useState({});
+	const [internalPagination, setInternalPagination] = useState({
+		pageIndex,
+		pageSize
+	});
+	const sorting = controlledSorting ?? internalSorting;
+	const columnVisibility = controlledColumnVisibility ?? internalColumnVisibility;
+	const rowSelection = controlledRowSelection ?? internalRowSelection;
+	const pagination = internalPagination;
+	const handleSortingChange = (updater) => {
+		const newSorting = typeof updater === "function" ? updater(sorting) : updater;
+		if (onSortingChange) onSortingChange(newSorting);
+		else setInternalSorting(newSorting);
+	};
+	const handleColumnVisibilityChange = (updater) => {
+		const newVisibility = typeof updater === "function" ? updater(columnVisibility) : updater;
+		if (onColumnVisibilityChange) onColumnVisibilityChange(newVisibility);
+		else setInternalColumnVisibility(newVisibility);
+	};
+	const handleRowSelectionChange = (updater) => {
+		const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+		if (onRowSelectionChange) onRowSelectionChange(newSelection);
+		else setInternalRowSelection(newSelection);
+	};
+	const handlePaginationChange = (updater) => {
+		const newPagination = typeof updater === "function" ? updater(pagination) : updater;
+		setInternalPagination(newPagination);
+		if (onPaginationChange) onPaginationChange({
+			pageIndex: newPagination.pageIndex,
+			pageSize: newPagination.pageSize
+		});
+	};
+	const contextValue = {
+		table: useReactTable({
+			data,
+			columns,
+			state: {
+				sorting,
+				columnVisibility,
+				rowSelection,
+				pagination
+			},
+			onSortingChange: handleSortingChange,
+			onColumnVisibilityChange: handleColumnVisibilityChange,
+			onRowSelectionChange: handleRowSelectionChange,
+			onPaginationChange: handlePaginationChange,
+			getCoreRowModel: getCoreRowModel(),
+			getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
+			getPaginationRowModel: getPaginationRowModel(),
+			getFilteredRowModel: getFilteredRowModel(),
+			enableSorting,
+			enableRowSelection: enableRowSelection !== false,
+			enableColumnResizing,
+			columnResizeMode,
+			manualPagination,
+			pageCount: manualPagination ? Math.ceil((totalCount ?? data.length) / pageSize) : void 0,
+			enableMultiRowSelection: true
+		}),
+		pageSize,
+		pageIndex,
+		totalCount: totalCount ?? data.length,
+		manualPagination,
+		loading,
+		loadingRows,
+		enableColumnResizing,
+		columnResizeMode
+	};
+	return /* @__PURE__ */ jsx(DataGridContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex flex-col overflow-hidden rounded-lg border border-sf-line bg-sf-base", className),
+			children: children || /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				showToolbar && /* @__PURE__ */ jsx(DataGridToolbar, { children: toolbar ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [enableFiltering && filterFields && /* @__PURE__ */ jsx(Filters, {
+					filters: filters ?? [],
+					fields: filterFields,
+					onChange: onFiltersChange ?? (() => {}),
+					size: "sm"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "ml-auto flex items-center gap-2",
+					children: enableColumnVisibility && /* @__PURE__ */ jsx(DataGridColumnToggle, {})
+				})] }) }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 overflow-auto",
+					children: [/* @__PURE__ */ jsx(DataGridContent, { className: tableClassName }), /* @__PURE__ */ jsx(DataGridEmpty, { children: emptyState })]
+				}),
+				showPagination && (customPagination ?? /* @__PURE__ */ jsx(DataGridPagination, {}))
+			] })
+		})
+	});
+}
+DataGridRoot.displayName = "DataGrid";
+var DataGrid = Object.assign(DataGridRoot, {
+	Toolbar: DataGridToolbar,
+	Content: DataGridContent,
+	Pagination: DataGridPagination,
+	ColumnToggle: DataGridColumnToggle,
+	Empty: DataGridEmpty
+});
+//#endregion
+export { SF_DATA_GRID_DEFAULT_VARIANTS as n, SF_DATA_GRID_VARIANTS as r, DataGrid as t };
+
+//# sourceMappingURL=data-grid-UJ9ja5cu.js.map

package/dist/data-grid-UJ9ja5cu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-UJ9ja5cu.js","names":[],"sources":["../src/components/data-grid/data-grid.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  CaretDownIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  ColumnsIcon,\n  FadersHorizontalIcon,\n} from \"@phosphor-icons/react\";\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  useReactTable,\n  getCoreRowModel,\n  getSortedRowModel,\n  getPaginationRowModel,\n  getFilteredRowModel,\n  flexRender,\n  type SortingState,\n  type VisibilityState,\n  type RowSelectionState,\n  type PaginationState,\n} from \"@tanstack/react-table\";\n\nimport { Button } from \"../button\";\nimport { Checkbox } from \"../checkbox\";\nimport { DropdownMenu } from \"../dropdown\";\nimport { Empty } from \"../empty\";\nimport { Filters } from \"../filters\";\nimport { Loader } from \"../loader\";\nimport { Pagination } from \"../pagination\";\nimport { Table } from \"../table\";\nimport { cn } from \"../../utils/cn\";\n\nimport type {\n  DataGridProps,\n  DataGridColumn,\n  DataGridContextValue,\n  DataGridToolbarProps,\n  DataGridContentProps,\n  DataGridPaginationProps,\n  DataGridColumnToggleProps,\n  DataGridEmptyProps,\n} from \"./types\";\n\n// ============================================================================\n// Variants\n// ============================================================================\n\n/** DataGrid layout variant definitions */\nexport const SF_DATA_GRID_VARIANTS = {\n  layout: {\n    auto: {\n      classes: \"\",\n      description: \"Auto column sizing - columns resize based on content\",\n    },\n    fixed: {\n      classes: \"table-fixed\",\n      description: \"Fixed column sizing - columns have equal width\",\n    },\n  },\n} as const;\n\n/** Default variants for DataGrid */\nexport const SF_DATA_GRID_DEFAULT_VARIANTS = {\n  layout: \"auto\",\n} as const;\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst DataGridContext = createContext<DataGridContextValue | null>(\n  null\n);\n\nfunction useDataGridContext<TData>() {\n  const context = useContext(DataGridContext);\n  if (!context) {\n    throw new Error(\n      \"DataGrid compound components must be used within a DataGrid\"\n    );\n  }\n  return context as DataGridContextValue<TData>;\n}\n\n// ============================================================================\n// Sort Icon Component\n// ============================================================================\n\nfunction SortIcon({\n  sorted,\n}: {\n  sorted: false | \"asc\" | \"desc\";\n}) {\n  if (sorted === \"asc\") {\n    return <CaretUpIcon className=\"size-3.5 text-sf-brand\" />;\n  }\n  if (sorted === \"desc\") {\n    return <CaretDownIcon className=\"size-3.5 text-sf-brand\" />;\n  }\n  return <CaretUpDownIcon className=\"size-3.5 text-sf-subtle\" />;\n}\n\n// ============================================================================\n// DataGrid Toolbar\n// ============================================================================\n\n/**\n * Toolbar component for DataGrid.\n * Shows filters, column visibility toggle, and custom actions.\n */\nfunction DataGridToolbar({ className, children }: DataGridToolbarProps) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 border-b border-sf-line p-3\",\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nDataGridToolbar.displayName = \"DataGrid.Toolbar\";\n\n// ============================================================================\n// DataGrid Column Toggle\n// ============================================================================\n\n/**\n * Column visibility toggle dropdown.\n * Shows checkboxes for each hideable column.\n */\nfunction DataGridColumnToggle({\n  className,\n  trigger,\n  label = \"Columns\",\n}: DataGridColumnToggleProps) {\n  const { table } = useDataGridContext();\n\n  const hideableColumns = useMemo(() => {\n    return table\n      .getAllColumns()\n      .filter(\n        (col) =>\n          col.getCanHide() &&\n          (col.columnDef.enableHiding !== false || col.getCanHide())\n      );\n  }, [table]);\n\n  if (hideableColumns.length === 0) return null;\n\n  return (\n    <DropdownMenu>\n      <DropdownMenu.Trigger>\n        {trigger ?? (\n          <Button variant=\"secondary\" size=\"sm\" className={className}>\n            <ColumnsIcon className=\"mr-1.5 size-4\" />\n            {label}\n          </Button>\n        )}\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content className=\"w-48\">\n        <div className=\"flex flex-col gap-1 p-1\">\n          {hideableColumns.map((column) => (\n            <label\n              key={column.id}\n              className=\"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-sf-tint\"\n            >\n              <Checkbox\n                checked={column.getIsVisible()}\n                onCheckedChange={(checked) =>\n                  column.toggleVisibility(!!checked)\n                }\n              />\n              <span className=\"flex-1\">\n                {typeof column.columnDef.header === \"string\"\n                  ? column.columnDef.header\n                  : column.id}\n              </span>\n            </label>\n          ))}\n          {hideableColumns.length > 0 && (\n            <>\n              <div className=\"my-1 h-px bg-sf-line\" />\n              <DropdownMenu.Item\n                onClick={() =>\n                  hideableColumns.forEach((col) => col.toggleVisibility(true))\n                }\n              >\n                Show all\n              </DropdownMenu.Item>\n              <DropdownMenu.Item\n                onClick={() =>\n                  hideableColumns.forEach((col) => col.toggleVisibility(false))\n                }\n              >\n                Hide all\n              </DropdownMenu.Item>\n            </>\n          )}\n        </div>\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n}\n\nDataGridColumnToggle.displayName = \"DataGrid.ColumnToggle\";\n\n// ============================================================================\n// DataGrid Content\n// ============================================================================\n\n/**\n * Main table content component.\n * Renders the table with headers, rows, and cells.\n */\nfunction DataGridContent({ className }: DataGridContentProps) {\n  const { table, loading, loadingRows, enableColumnResizing } = useDataGridContext();\n\n  if (loading) {\n    return (\n      <div className=\"p-4\">\n        <div className=\"space-y-2\">\n          {Array.from({ length: loadingRows ?? 5 }).map((_, i) => (\n            <Loader key={i} className=\"h-10 w-full\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <Table className={className}>\n      <Table.Header>\n        {table.getHeaderGroups().map((headerGroup) => (\n          <Table.Row key={headerGroup.id}>\n            {headerGroup.headers.map((header) => {\n              const canSort = header.column.getCanSort();\n              const sorted = header.column.getIsSorted();\n              const canResize = enableColumnResizing && header.column.getCanResize();\n              const isResizing = header.column.getIsResizing();\n\n              return (\n                <Table.Head\n                  key={header.id}\n                  className={cn(\n                    \"bg-sf-base relative group\",\n                    canSort && \"cursor-pointer select-none hover:bg-sf-overlay\",\n                    (header.column.columnDef as unknown as Record<string, unknown>).headerClassName as string\n                  )}\n                  style={canResize ? { width: header.getSize() } : undefined}\n                  onClick={\n                    canSort\n                      ? () => header.column.toggleSorting()\n                      : undefined\n                  }\n                >\n                  <div className=\"flex items-center gap-1.5\">\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                    {canSort && <SortIcon sorted={sorted} />}\n                  </div>\n                  {canResize && (\n                    <Table.ResizeHandle\n                      onMouseDown={header.getResizeHandler()}\n                      onTouchStart={header.getResizeHandler()}\n                      onDoubleClick={() => header.column.resetSize()}\n                      className={cn(isResizing && \"visible bg-sf-brand/20\")}\n                    />\n                  )}\n                </Table.Head>\n              );\n            })}\n          </Table.Row>\n        ))}\n      </Table.Header>\n      <Table.Body>\n        {table.getRowModel().rows.map((row) => (\n          <Table.Row\n            key={row.id}\n            variant={row.getIsSelected() ? \"selected\" : \"default\"}\n            className={cn(\n              row.getIsSelected() && \"bg-sf-tint\",\n              \"hover:bg-sf-overlay\"\n            )}\n          >\n            {row.getVisibleCells().map((cell) => (\n              <Table.Cell\n                key={cell.id}\n                className={(cell.column.columnDef as unknown as Record<string, unknown>).cellClassName as string}\n                style={enableColumnResizing ? { width: cell.column.getSize() } : undefined}\n              >\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </Table.Cell>\n            ))}\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table>\n  );\n}\n\nDataGridContent.displayName = \"DataGrid.Content\";\n\n// ============================================================================\n// DataGrid Pagination\n// ============================================================================\n\n/**\n * Pagination controls for DataGrid.\n * Wraps the Pagination component with table state.\n */\nfunction DataGridPagination({ className }: DataGridPaginationProps) {\n  const {\n    table,\n    pageSize: _pageSize,\n    pageIndex: _pageIndex,\n    totalCount,\n    manualPagination,\n  } = useDataGridContext();\n\n  // Get pagination state\n  const paginationState = table.getState().pagination;\n  const currentPageIndex = paginationState.pageIndex;\n  const currentPageSize = paginationState.pageSize;\n\n  // Calculate row range\n  const startRow = currentPageIndex * currentPageSize + 1;\n  const endRow = Math.min(\n    (currentPageIndex + 1) * currentPageSize,\n    manualPagination ? totalCount : table.getCoreRowModel().rows.length\n  );\n\n  if (table.getPageCount() <= 1 && !manualPagination) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between border-t border-sf-line p-3\",\n        className\n      )}\n    >\n      <div className=\"text-sm text-sf-subtle\">\n        Showing {startRow}–{endRow} of{\" \"}\n        {manualPagination ? totalCount : table.getCoreRowModel().rows.length}\n      </div>\n      <Pagination\n        page={currentPageIndex + 1}\n        setPage={(page) => table.setPageIndex(page - 1)}\n        perPage={currentPageSize}\n        totalCount={\n          manualPagination\n            ? totalCount\n            : table.getCoreRowModel().rows.length\n        }\n        text={({ pageShowingRange, totalCount: total }) => `Showing ${pageShowingRange} of ${total}`}\n      />\n    </div>\n  );\n}\n\nDataGridPagination.displayName = \"DataGrid.Pagination\";\n\n// ============================================================================\n// DataGrid Empty\n// ============================================================================\n\n/**\n * Empty state component for DataGrid.\n * Shown when there are no rows to display.\n */\nfunction DataGridEmpty({\n  className,\n  children,\n  title = \"No results\",\n  description = \"No data to display.\",\n}: DataGridEmptyProps) {\n  const { table } = useDataGridContext();\n\n  // Only show if there are no rows\n  if (table.getCoreRowModel().rows.length > 0) return null;\n\n  return (\n    <div className={cn(\"p-8\", className)}>\n      {children ?? (\n        <Empty\n          icon={<FadersHorizontalIcon className=\"size-10 text-sf-subtle\" />}\n          title={title}\n          description={description}\n        />\n      )}\n    </div>\n  );\n}\n\nDataGridEmpty.displayName = \"DataGrid.Empty\";\n\n// ============================================================================\n// DataGrid Root\n// ============================================================================\n\n/**\n * DataGrid root component.\n * Sets up the react-table instance and provides context to child components.\n */\nfunction DataGridRoot<TData>({\n  data,\n  columns,\n  sorting: controlledSorting,\n  onSortingChange,\n  enableSorting = true,\n  columnVisibility: controlledColumnVisibility,\n  onColumnVisibilityChange,\n  enableColumnVisibility = true,\n  rowSelection: controlledRowSelection,\n  onRowSelectionChange,\n  enableRowSelection,\n  pageSize = 10,\n  pageIndex = 0,\n  onPaginationChange,\n  totalCount,\n  manualPagination = false,\n  pageSizeOptions: _pageSizeOptions = [10, 25, 50, 100],\n  filters,\n  onFiltersChange,\n  filterFields,\n  enableFiltering,\n  layout: _layout = SF_DATA_GRID_DEFAULT_VARIANTS.layout,\n  className,\n  tableClassName,\n  emptyState,\n  loading,\n  loadingRows,\n  toolbar,\n  showToolbar = true,\n  showPagination = true,\n  pagination: customPagination,\n  enableColumnResizing,\n  columnResizeMode = \"onEnd\",\n  children,\n}: DataGridProps<TData> & { children?: ReactNode }) {\n  // Internal state for uncontrolled mode\n  const [internalSorting, setInternalSorting] = useState<SortingState>([]);\n  const [internalColumnVisibility, setInternalColumnVisibility] =\n    useState<VisibilityState>({});\n  const [internalRowSelection, setInternalRowSelection] =\n    useState<RowSelectionState>({});\n  const [internalPagination, setInternalPagination] = useState<PaginationState>(\n    {\n      pageIndex,\n      pageSize,\n    }\n  );\n\n  // Determine controlled vs uncontrolled\n  const sorting = controlledSorting ?? internalSorting;\n  const columnVisibility =\n    controlledColumnVisibility ?? internalColumnVisibility;\n  const rowSelection = controlledRowSelection ?? internalRowSelection;\n  const pagination = internalPagination;\n\n  // Handle sorting change\n  const handleSortingChange = (updater: SortingState | ((old: SortingState) => SortingState)) => {\n    const newSorting = typeof updater === \"function\" ? updater(sorting) : updater;\n    if (onSortingChange) {\n      onSortingChange(newSorting);\n    } else {\n      setInternalSorting(newSorting);\n    }\n  };\n\n  // Handle column visibility change\n  const handleColumnVisibilityChange = (\n    updater: VisibilityState | ((old: VisibilityState) => VisibilityState)\n  ) => {\n    const newVisibility = typeof updater === \"function\" ? updater(columnVisibility) : updater;\n    if (onColumnVisibilityChange) {\n      onColumnVisibilityChange(newVisibility);\n    } else {\n      setInternalColumnVisibility(newVisibility);\n    }\n  };\n\n  // Handle row selection change\n  const handleRowSelectionChange = (\n    updater: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)\n  ) => {\n    const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n    if (onRowSelectionChange) {\n      onRowSelectionChange(newSelection);\n    } else {\n      setInternalRowSelection(newSelection);\n    }\n  };\n\n  // Handle pagination change\n  const handlePaginationChange = (\n    updater: PaginationState | ((old: PaginationState) => PaginationState)\n  ) => {\n    const newPagination = typeof updater === \"function\" ? updater(pagination) : updater;\n    setInternalPagination(newPagination);\n    if (onPaginationChange) {\n      onPaginationChange({\n        pageIndex: newPagination.pageIndex,\n        pageSize: newPagination.pageSize,\n      });\n    }\n  };\n\n  // Create table instance\n  const table = useReactTable({\n    data,\n    columns: columns as import(\"@tanstack/react-table\").ColumnDef<TData, unknown>[],\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      pagination,\n    },\n    onSortingChange: handleSortingChange,\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onRowSelectionChange: handleRowSelectionChange,\n    onPaginationChange: handlePaginationChange,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,\n    getPaginationRowModel: getPaginationRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    enableSorting,\n    enableRowSelection: enableRowSelection !== false,\n    enableColumnResizing,\n    columnResizeMode,\n    manualPagination,\n    pageCount: manualPagination\n      ? Math.ceil((totalCount ?? data.length) / pageSize)\n      : undefined,\n    enableMultiRowSelection: true,\n  });\n\n  // Provide context to children\n  const contextValue: DataGridContextValue<TData> = {\n    table,\n    pageSize,\n    pageIndex,\n    totalCount: totalCount ?? data.length,\n    manualPagination,\n    loading,\n    loadingRows,\n    enableColumnResizing,\n    columnResizeMode,\n  };\n\n  return (\n    <DataGridContext.Provider value={contextValue as DataGridContextValue}>\n      <div\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-lg border border-sf-line bg-sf-base\",\n          className\n        )}\n      >\n        {children || (\n          // Auto mode - DataGrid renders everything based on props\n          <>\n            {/* Toolbar */}\n            {showToolbar && (\n              <DataGridToolbar>\n                {toolbar ?? (\n                  <>\n                    {enableFiltering && filterFields && (\n                      <Filters\n                        filters={filters ?? []}\n                        fields={filterFields}\n                        onChange={onFiltersChange ?? (() => {})}\n                        size=\"sm\"\n                      />\n                    )}\n                    <div className=\"ml-auto flex items-center gap-2\">\n                      {enableColumnVisibility && <DataGridColumnToggle />}\n                    </div>\n                  </>\n                )}\n              </DataGridToolbar>\n            )}\n\n            {/* Table content */}\n            <div className=\"flex-1 overflow-auto\">\n              <DataGridContent className={tableClassName} />\n              <DataGridEmpty>{emptyState}</DataGridEmpty>\n            </div>\n\n            {/* Pagination */}\n            {showPagination && (customPagination ?? <DataGridPagination />)}\n          </>\n        )}\n      </div>\n    </DataGridContext.Provider>\n  );\n}\n\nDataGridRoot.displayName = \"DataGrid\";\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport const DataGrid = Object.assign(DataGridRoot, {\n  Toolbar: DataGridToolbar,\n  Content: DataGridContent,\n  Pagination: DataGridPagination,\n  ColumnToggle: DataGridColumnToggle,\n  Empty: DataGridEmpty,\n});\n\nexport type {\n  DataGridProps,\n  DataGridColumn,\n  DataGridToolbarProps,\n  DataGridContentProps,\n  DataGridPaginationProps,\n  DataGridColumnToggleProps,\n  DataGridEmptyProps,\n} from \"./types\";\n"],"mappings":"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"}

package/dist/date-picker-ebekkC3R.js

@@ -0,0 +1,57 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { jsx } from "react/jsx-runtime";
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { DayPicker } from "react-day-picker";
+//#region src/components/date-picker/date-picker.tsx
+/**
+* Custom Chevron component using Phosphor icons
+*/
+var Chevron = ({ orientation, ...props }) => {
+	return /* @__PURE__ */ jsx(orientation === "left" ? CaretLeftIcon : CaretRightIcon, {
+		size: 16,
+		...props
+	});
+};
+/**
+* DatePicker — a date selection calendar.
+*
+* Built on [react-day-picker](https://daypicker.dev) with SF styling.
+* Supports three selection modes: single, multiple, and range.
+*
+* @example
+* ```tsx
+* // Single date selection
+* const [date, setDate] = useState<Date>();
+* <DatePicker mode="single" selected={date} onChange={setDate} />
+*
+* // Multiple date selection
+* const [dates, setDates] = useState<Date[]>([]);
+* <DatePicker mode="multiple" selected={dates} onChange={setDates} max={5} />
+*
+* // Date range selection
+* const [range, setRange] = useState<DateRange>();
+* <DatePicker mode="range" selected={range} onChange={setRange} numberOfMonths={2} />
+* ```
+*/
+function DatePicker({ className, classNames, onChange, ...props }) {
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays: true,
+		animate: true,
+		...props,
+		onSelect: onChange,
+		classNames: {
+			...classNames,
+			root: cn("rdp-root select-none rounded-xl bg-sf-base p-3", classNames?.root, className)
+		},
+		components: {
+			Chevron,
+			...props.components
+		}
+	});
+}
+DatePicker.displayName = "DatePicker";
+//#endregion
+export { DatePicker as t };
+
+//# sourceMappingURL=date-picker-ebekkC3R.js.map

package/dist/date-picker-ebekkC3R.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-ebekkC3R.js","names":[],"sources":["../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import { CaretLeftIcon, CaretRightIcon } from \"@phosphor-icons/react\";\nimport {\n  DayPicker,\n  type CustomComponents,\n  type PropsBase,\n  type PropsSingle,\n  type PropsSingleRequired,\n  type PropsMulti,\n  type PropsMultiRequired,\n  type PropsRange,\n  type PropsRangeRequired,\n} from \"react-day-picker\";\n\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Custom Chevron component using Phosphor icons\n */\nconst Chevron: CustomComponents[\"Chevron\"] = ({ orientation, ...props }) => {\n  const Icon = orientation === \"left\" ? CaretLeftIcon : CaretRightIcon;\n  return <Icon size={16} {...props} />;\n};\n\n/** Base props shared across all DatePicker modes */\ntype BaseProps = Omit<PropsBase, \"classNames\"> & {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Custom class names for internal elements */\n  classNames?: PropsBase[\"classNames\"];\n};\n\n/** Single date selection (optional) */\ntype SingleProps = BaseProps &\n  Omit<PropsSingle, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsSingle[\"onSelect\"];\n  };\n\n/** Single date selection (required) */\ntype SingleRequiredProps = BaseProps &\n  Omit<PropsSingleRequired, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsSingleRequired[\"onSelect\"];\n  };\n\n/** Multiple date selection (optional) */\ntype MultipleProps = BaseProps &\n  Omit<PropsMulti, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsMulti[\"onSelect\"];\n  };\n\n/** Multiple date selection (required) */\ntype MultipleRequiredProps = BaseProps &\n  Omit<PropsMultiRequired, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsMultiRequired[\"onSelect\"];\n  };\n\n/** Date range selection (optional) */\ntype RangeProps = BaseProps &\n  Omit<PropsRange, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsRange[\"onSelect\"];\n  };\n\n/** Date range selection (required) */\ntype RangeRequiredProps = BaseProps &\n  Omit<PropsRangeRequired, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsRangeRequired[\"onSelect\"];\n  };\n\n/**\n * DatePicker props - discriminated union based on `mode`.\n * Uses `onChange` instead of `onSelect` for SF consistency.\n * Full type inference is preserved via the discriminated union.\n */\nexport type DatePickerProps =\n  | SingleProps\n  | SingleRequiredProps\n  | MultipleProps\n  | MultipleRequiredProps\n  | RangeProps\n  | RangeRequiredProps;\n\n/**\n * DatePicker — a date selection calendar.\n *\n * Built on [react-day-picker](https://daypicker.dev) with SF styling.\n * Supports three selection modes: single, multiple, and range.\n *\n * @example\n * ```tsx\n * // Single date selection\n * const [date, setDate] = useState<Date>();\n * <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n *\n * // Multiple date selection\n * const [dates, setDates] = useState<Date[]>([]);\n * <DatePicker mode=\"multiple\" selected={dates} onChange={setDates} max={5} />\n *\n * // Date range selection\n * const [range, setRange] = useState<DateRange>();\n * <DatePicker mode=\"range\" selected={range} onChange={setRange} numberOfMonths={2} />\n * ```\n */\nexport function DatePicker({\n  className,\n  classNames,\n  onChange,\n  ...props\n}: DatePickerProps) {\n  return (\n    <DayPicker\n      showOutsideDays\n      animate\n      {...props}\n      onSelect={onChange as never}\n      classNames={{\n        ...classNames,\n        root: cn(\n          \"rdp-root select-none rounded-xl bg-sf-base p-3\",\n          classNames?.root,\n          className\n        ),\n      }}\n      components={{\n        Chevron,\n        ...props.components,\n      }}\n    />\n  );\n}\n\nDatePicker.displayName = \"DatePicker\";\n"],"mappings":";;;;;;;;;AAkBA,IAAM,WAAwC,EAAE,aAAa,GAAG,YAAY;AAE1E,QAAO,oBADM,gBAAgB,SAAS,gBAAgB,gBAC/C;EAAM,MAAM;EAAI,GAAI;EAAS,CAAA;;;;;;;;;;;;;;;;;;;;;;;AAiFtC,SAAgB,WAAW,EACzB,WACA,YACA,UACA,GAAG,SACe;AAClB,QACE,oBAAC,WAAD;EACE,iBAAA;EACA,SAAA;EACA,GAAI;EACJ,UAAU;EACV,YAAY;GACV,GAAG;GACH,MAAM,GACJ,kDACA,YAAY,MACZ,UACD;GACF;EACD,YAAY;GACV;GACA,GAAG,MAAM;GACV;EACD,CAAA;;AAIN,WAAW,cAAc"}