@polastack/design-system 0.1.33 → 0.1.35

package/dist/index.d.ts

@@ -452,9 +452,11 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 
+type DataTableVariant = 'rows' | 'grid';
 interface DataTableProps<TData> {
     columns: ColumnDef<TData, unknown>[];
     data: TData[];
+    variant?: DataTableVariant;
     enableSorting?: boolean;
     enableRowSelection?: boolean;
     enableColumnVisibility?: boolean;
@@ -466,7 +468,7 @@ interface DataTableProps<TData> {
     className?: string;
     'aria-label'?: string;
 }
-declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, enableColumnVisibility, enablePagination, pageSize, pageSizeOptions, onRowSelectionChange, emptyState, className, 'aria-label': ariaLabel, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData>({ columns, data, variant, enableSorting, enableRowSelection, enableColumnVisibility, enablePagination, pageSize, pageSizeOptions, onRowSelectionChange, emptyState, className, 'aria-label': ariaLabel, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }

package/dist/index.js

@@ -2696,6 +2696,7 @@ import { jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
+  variant = "rows",
   enableSorting = false,
   enableRowSelection = false,
   enableColumnVisibility = false,
@@ -2707,6 +2708,8 @@ function DataTable({
   className,
   "aria-label": ariaLabel
 }) {
+  const isGrid = variant === "grid";
+  const gridCellClass = isGrid ? "border-r border-[var(--color-border)] last:border-r-0" : "";
   const [sorting, setSorting] = React33.useState([]);
   const [rowSelection, setRowSelection] = React33.useState({});
   const [columnVisibility, setColumnVisibility] = React33.useState({});
@@ -2766,7 +2769,7 @@ function DataTable({
       }
     ),
     /* @__PURE__ */ jsxs14(Table, { "aria-label": ariaLabel, children: [
-      /* @__PURE__ */ jsx33(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx33(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx33(TableHead, { children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsx33(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx33(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx33(TableHead, { className: gridCellClass, children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs14(
         "button",
         {
           className: "flex items-center gap-1 -ml-2 px-2 py-1 rounded-md hover:bg-[var(--color-surface-muted)] transition-colors duration-fast",
@@ -2800,7 +2803,7 @@ function DataTable({
             onClick: () => row.toggleSelected(),
             className: "cursor-pointer"
           },
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx33(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx33(TableCell, { className: gridCellClass, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
         },
         row.id
       )) : /* @__PURE__ */ jsx33(TableRow, { children: /* @__PURE__ */ jsx33(
@@ -2866,14 +2869,14 @@ DataTableColumnHeader.displayName = "DataTableColumnHeader";
 // src/components/filter-bar/filter-bar.tsx
 import * as React34 from "react";
 import { cva as cva15 } from "class-variance-authority";
-import { X as X2 } from "lucide-react";
+import { X as X2, ListFilter } from "lucide-react";
 import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
 var FilterBar = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   "div",
   {
     ref,
     className: cn(
-      "flex flex-wrap items-center gap-2 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-3",
+      "flex flex-wrap items-center gap-2 rounded-lg border border-[var(--color-on-surface)] bg-[var(--color-surface-sunken)] p-3",
       className
     ),
     role: "toolbar",
@@ -2962,6 +2965,63 @@ var FilterBarActions = React34.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 FilterBarActions.displayName = "FilterBarActions";
+function FilterSelector({
+  options,
+  selected,
+  onToggle,
+  label = "Filters",
+  className
+}) {
+  const [open, setOpen] = React34.useState(false);
+  const menuRef = React34.useRef(null);
+  React34.useEffect(() => {
+    function handleClickOutside(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxs16("div", { className: cn("relative", className), ref: menuRef, children: [
+    /* @__PURE__ */ jsxs16(
+      "button",
+      {
+        type: "button",
+        className: "inline-flex items-center gap-1 rounded-md border border-[var(--color-border-input)] bg-[var(--color-surface-raised)] px-3 py-1.5 text-sm transition-colors hover:bg-[var(--color-surface-muted)]",
+        onClick: () => setOpen(!open),
+        "aria-label": label,
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx35(ListFilter, { className: "h-3.5 w-3.5" }),
+          label
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx35("div", { className: "absolute left-0 top-full z-popover mt-1 min-w-[10rem] rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-2 shadow-md", children: options.map((opt) => /* @__PURE__ */ jsxs16(
+      "label",
+      {
+        className: "flex items-center gap-2 rounded px-2 py-1 text-sm hover:bg-[var(--color-surface-sunken)] cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsx35(
+            "input",
+            {
+              type: "checkbox",
+              checked: selected.includes(opt.id),
+              onChange: (e) => onToggle(opt.id, e.target.checked),
+              className: "h-4 w-4"
+            }
+          ),
+          opt.label
+        ]
+      },
+      opt.id
+    )) })
+  ] });
+}
+FilterSelector.displayName = "FilterSelector";
 
 // src/components/popover/popover.tsx
 import * as React35 from "react";