@devalok/shilp-sutra 0.1.0

package/dist/ui/context-menu.js

@@ -0,0 +1,145 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import * as n from "react";
+import { Root as N, Group as C, Portal as l, RadioGroup as g, Sub as w, Trigger as R, CheckboxItem as m, ItemIndicator as c, Content as p, Item as u, Label as f, RadioItem as x, Separator as b, SubContent as y, SubTrigger as h } from "../primitives/react-context-menu.js";
+import { IconCheck as I, IconCircle as M, IconChevronRight as S } from "@tabler/icons-react";
+import { cn as d } from "./lib/utils.js";
+const F = N, H = R, J = C, K = l, O = w, Q = g, v = n.forwardRef(({ className: e, inset: t, children: a, ...s }, r) => /* @__PURE__ */ i(
+  h,
+  {
+    ref: r,
+    className: d(
+      "flex cursor-default select-none items-center rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-none focus:bg-layer-02 focus:text-text-primary data-[state=open]:bg-layer-02 data-[state=open]:text-text-primary",
+      t && "pl-ds-07",
+      e
+    ),
+    ...s,
+    children: [
+      a,
+      /* @__PURE__ */ o(S, { className: "ml-auto h-ico-sm w-ico-sm" })
+    ]
+  }
+));
+v.displayName = h.displayName;
+const z = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+  y,
+  {
+    ref: a,
+    className: d(
+      "z-dropdown min-w-[8rem] overflow-hidden rounded-ds-lg border border-border bg-layer-01 p-ds-02 text-text-primary shadow-03 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      e
+    ),
+    ...t
+  }
+));
+z.displayName = y.displayName;
+const G = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
+  p,
+  {
+    ref: a,
+    className: d(
+      "z-dropdown overflow-hidden rounded-ds-lg border border-border bg-layer-01 p-ds-02 text-text-primary shadow-03 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      e
+    ),
+    ...t
+  }
+) }));
+G.displayName = p.displayName;
+const T = n.forwardRef(({ className: e, inset: t, ...a }, s) => /* @__PURE__ */ o(
+  u,
+  {
+    ref: s,
+    className: d(
+      "relative flex cursor-default select-none items-center rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-none focus:bg-layer-02 focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-[0.38]",
+      t && "pl-ds-07",
+      e
+    ),
+    ...a
+  }
+));
+T.displayName = u.displayName;
+const j = n.forwardRef(({ className: e, children: t, checked: a, ...s }, r) => /* @__PURE__ */ i(
+  m,
+  {
+    ref: r,
+    className: d(
+      "relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-none focus:bg-layer-02 focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-[0.38]",
+      e
+    ),
+    checked: a,
+    ...s,
+    children: [
+      /* @__PURE__ */ o("span", { className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center", children: /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(I, { className: "h-ico-sm w-ico-sm" }) }) }),
+      t
+    ]
+  }
+));
+j.displayName = m.displayName;
+const k = n.forwardRef(({ className: e, children: t, ...a }, s) => /* @__PURE__ */ i(
+  x,
+  {
+    ref: s,
+    className: d(
+      "relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-none focus:bg-layer-02 focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-[0.38]",
+      e
+    ),
+    ...a,
+    children: [
+      /* @__PURE__ */ o("span", { className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center", children: /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(M, { className: "h-ico-sm w-ico-sm fill-current" }) }) }),
+      t
+    ]
+  }
+));
+k.displayName = x.displayName;
+const L = n.forwardRef(({ className: e, inset: t, ...a }, s) => /* @__PURE__ */ o(
+  f,
+  {
+    ref: s,
+    className: d(
+      "px-ds-03 py-ds-02b text-ds-md font-semibold text-text-primary",
+      t && "pl-ds-07",
+      e
+    ),
+    ...a
+  }
+));
+L.displayName = f.displayName;
+const P = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+  b,
+  {
+    ref: a,
+    className: d("-mx-1 my-ds-02 h-px bg-border-subtle", e),
+    ...t
+  }
+));
+P.displayName = b.displayName;
+const q = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ o(
+  "span",
+  {
+    className: d(
+      "ml-auto text-ds-sm text-text-placeholder",
+      e
+    ),
+    ...t
+  }
+);
+q.displayName = "ContextMenuShortcut";
+export {
+  F as ContextMenu,
+  j as ContextMenuCheckboxItem,
+  G as ContextMenuContent,
+  J as ContextMenuGroup,
+  T as ContextMenuItem,
+  L as ContextMenuLabel,
+  K as ContextMenuPortal,
+  Q as ContextMenuRadioGroup,
+  k as ContextMenuRadioItem,
+  P as ContextMenuSeparator,
+  q as ContextMenuShortcut,
+  O as ContextMenuSub,
+  z as ContextMenuSubContent,
+  v as ContextMenuSubTrigger,
+  H as ContextMenuTrigger
+};

package/dist/ui/data-table-toolbar.d.ts

@@ -0,0 +1,16 @@
+import { Table } from '@tanstack/react-table';
+export type Density = 'compact' | 'standard' | 'comfortable';
+export interface DataTableToolbarProps<TData> {
+    table: Table<TData>;
+    globalFilter?: boolean;
+    globalFilterValue: string;
+    onGlobalFilterChange: (value: string) => void;
+    density: Density;
+    onDensityChange: (density: Density) => void;
+    enableExport?: boolean;
+}
+export declare function DataTableToolbar<TData>({ table, globalFilter, globalFilterValue, onGlobalFilterChange, density, onDensityChange, enableExport, }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DataTableToolbar {
+    var displayName: string;
+}
+//# sourceMappingURL=data-table-toolbar.d.ts.map

package/dist/ui/data-table-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-toolbar.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-toolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAiBlD,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAA;AAc5D,MAAM,WAAW,qBAAqB,CAAC,KAAK;IAC1C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAgDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,EACtC,KAAK,EACL,YAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,OAAO,EACP,eAAe,EACf,YAAmB,GACpB,EAAE,qBAAqB,CAAC,KAAK,CAAC,2CA+F9B;yBAvGe,gBAAgB"}

package/dist/ui/data-table-toolbar.js

@@ -0,0 +1,136 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { IconSearch as x, IconColumns3 as C, IconTextResize as y, IconDownload as v } from "@tabler/icons-react";
+import { DropdownMenu as w, DropdownMenuTrigger as D, DropdownMenuContent as N, DropdownMenuLabel as T, DropdownMenuSeparator as k, DropdownMenuCheckboxItem as I } from "./dropdown-menu.js";
+import { cn as g } from "./lib/utils.js";
+const b = {
+  compact: "Compact",
+  standard: "Standard",
+  comfortable: "Comfortable"
+}, L = {
+  compact: "standard",
+  standard: "comfortable",
+  comfortable: "compact"
+}, h = g(
+  "h-ds-sm px-ds-03 rounded-ds-md",
+  "border border-border",
+  "hover:bg-layer-02",
+  "text-ds-sm flex items-center gap-ds-02 transition-colors"
+), d = "text-icon-secondary";
+function j(l) {
+  const m = l.getAllLeafColumns().filter((t) => t.getIsVisible() && t.id !== "_select").map((t) => {
+    const e = t.columnDef.header;
+    return typeof e == "string" ? e : t.id;
+  }), p = l.getFilteredRowModel().rows.map(
+    (t) => l.getAllLeafColumns().filter((e) => e.getIsVisible() && e.id !== "_select").map((e) => {
+      const i = t.getValue(e.id), n = String(i ?? "");
+      return n.includes(",") || n.includes('"') || n.includes(`
+`) ? `"${n.replace(/"/g, '""')}"` : n;
+    })
+  ), u = [m.join(","), ...p.map((t) => t.join(","))].join(
+    `
+`
+  ), s = new Blob([u], { type: "text/csv;charset=utf-8;" }), c = URL.createObjectURL(s), r = document.createElement("a");
+  r.href = c, r.download = "table-export.csv", r.click(), URL.revokeObjectURL(c);
+}
+function M({
+  table: l,
+  globalFilter: m = !1,
+  globalFilterValue: p,
+  onGlobalFilterChange: u,
+  density: s,
+  onDensityChange: c,
+  enableExport: r = !0
+}) {
+  const t = l.getAllColumns().filter((e) => e.getCanHide() && e.id !== "_select");
+  return /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03 pb-ds-04", children: [
+    m && /* @__PURE__ */ a("div", { className: "flex flex-1 items-center gap-ds-02", children: [
+      /* @__PURE__ */ o(
+        x,
+        {
+          size: 16,
+          className: d,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ o(
+        "input",
+        {
+          type: "text",
+          value: p,
+          onChange: (e) => u(e.target.value),
+          placeholder: "Search all columns...",
+          "aria-label": "Search all columns",
+          className: g(
+            "flex-1 bg-transparent text-ds-md",
+            "text-text-primary placeholder:text-text-placeholder",
+            "outline-none",
+            "h-ds-sm"
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "ml-auto flex items-center gap-ds-03", children: [
+      t.length > 0 && /* @__PURE__ */ a(w, { children: [
+        /* @__PURE__ */ o(D, { asChild: !0, children: /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            className: h,
+            "aria-label": "Toggle column visibility",
+            children: [
+              /* @__PURE__ */ o(C, { size: 16, className: d }),
+              "Columns"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ a(N, { align: "end", className: "w-40", children: [
+          /* @__PURE__ */ o(T, { children: "Toggle columns" }),
+          /* @__PURE__ */ o(k, {}),
+          t.map((e) => {
+            const i = e.columnDef.header, n = typeof i == "string" ? i : e.id;
+            return /* @__PURE__ */ o(
+              I,
+              {
+                checked: e.getIsVisible(),
+                onCheckedChange: (f) => e.toggleVisibility(!!f),
+                children: n
+              },
+              e.id
+            );
+          })
+        ] })
+      ] }),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: h,
+          onClick: () => c(L[s]),
+          "aria-label": `Table density: ${b[s]}. Click to change.`,
+          title: `Density: ${b[s]}`,
+          children: [
+            /* @__PURE__ */ o(y, { size: 16, className: d }),
+            b[s]
+          ]
+        }
+      ),
+      r && /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: h,
+          onClick: () => j(l),
+          "aria-label": "Export table as CSV",
+          children: [
+            /* @__PURE__ */ o(v, { size: 16, className: d }),
+            "Export"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+M.displayName = "DataTableToolbar";
+export {
+  M as DataTableToolbar
+};

package/dist/ui/data-table.d.ts

@@ -0,0 +1,111 @@
+import { default as React } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import { Density } from './data-table-toolbar';
+/**
+ * Props for DataTable — a feature-rich TanStack Table wrapper supporting sorting, filtering,
+ * pagination, row selection, inline editing, row expansion, column pinning, and virtualization.
+ *
+ * All features are opt-in via boolean flags. The component manages its own internal state for
+ * sorting, filtering, pagination, and selection — just pass `columns` and `data`.
+ *
+ * **Feature flags:** `sortable` | `filterable` | `globalFilter` | `paginated` | `selectable` |
+ * `toolbar` | `editable` | `expandable` | `virtualRows`
+ *
+ * **Columns:** Use TanStack Table's `ColumnDef<TData, TValue>` type. Set
+ * `meta: { enableEditing: false }` on a column to disable cell editing for that column.
+ *
+ * @example
+ * // Minimal read-only table:
+ * const columns: ColumnDef<User, string>[] = [
+ *   { accessorKey: 'name', header: 'Name' },
+ *   { accessorKey: 'email', header: 'Email' },
+ * ]
+ * <DataTable columns={columns} data={users} />
+ *
+ * @example
+ * // Full-featured admin table with sorting, pagination, and selection:
+ * <DataTable
+ *   columns={projectColumns}
+ *   data={projects}
+ *   sortable
+ *   paginated
+ *   pageSize={20}
+ *   selectable
+ *   onSelectionChange={(rows) => setSelectedProjects(rows)}
+ *   toolbar
+ * />
+ *
+ * @example
+ * // Virtualized table for large datasets (10k+ rows):
+ * <DataTable
+ *   columns={logColumns}
+ *   data={allLogs}
+ *   virtualRows
+ *   virtualRowHeight={40}
+ *   maxHeight={500}
+ * />
+ *
+ * @example
+ * // Table with expandable rows for nested detail:
+ * <DataTable
+ *   columns={orderColumns}
+ *   data={orders}
+ *   expandable
+ *   renderExpanded={(order) => <OrderLineItems items={order.lineItems} />}
+ * />
+ * // These are just a few ways — feel free to combine props creatively!
+ */
+export interface DataTableProps<TData, TValue> {
+    /** Column definitions passed to TanStack Table */
+    columns: ColumnDef<TData, TValue>[];
+    /** Row data */
+    data: TData[];
+    /** Additional class name for the wrapper div */
+    className?: string;
+    /** Text shown when the table has no rows */
+    noResultsText?: string;
+    /** Enable column sorting (click headers to sort) */
+    sortable?: boolean;
+    /** Enable per-column filter inputs below headers */
+    filterable?: boolean;
+    /** Enable a global search input above the table */
+    globalFilter?: boolean;
+    /** Enable pagination controls below the table */
+    paginated?: boolean;
+    /** Number of rows per page when paginated (default 10) */
+    pageSize?: number;
+    /** Options for the page size selector dropdown (default [10, 20, 50, 100]) */
+    pageSizeOptions?: number[];
+    /** Enable row selection with checkboxes */
+    selectable?: boolean;
+    /** Callback when row selection changes */
+    onSelectionChange?: (selectedRows: TData[]) => void;
+    /** Show toolbar above the table with column visibility, density, and export controls */
+    toolbar?: boolean;
+    /** Row density — controls cell vertical padding */
+    density?: Density;
+    /** Initial column pinning configuration */
+    columnPinning?: {
+        left?: string[];
+        right?: string[];
+    };
+    /** Enable inline cell editing (double-click to edit) */
+    editable?: boolean;
+    /** Callback when a cell value is edited */
+    onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void;
+    /** Enable expandable rows with detail panels */
+    expandable?: boolean;
+    /** Render function for expanded row content */
+    renderExpanded?: (row: TData) => React.ReactNode;
+    /** Enable row virtualization for large datasets */
+    virtualRows?: boolean;
+    /** Height of each virtual row in pixels (default 48) */
+    virtualRowHeight?: number;
+    /** Maximum height of the scrollable container in pixels (default 600) */
+    maxHeight?: number;
+}
+export declare function DataTable<TData, TValue>({ columns, data, className, noResultsText, sortable, filterable, globalFilter, paginated, pageSize: initialPageSize, pageSizeOptions, selectable, onSelectionChange, toolbar, density: initialDensity, columnPinning: initialColumnPinning, editable, onCellEdit, expandable, renderExpanded, virtualRows, virtualRowHeight, maxHeight, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DataTable {
+    var displayName: string;
+}
+//# sourceMappingURL=data-table.d.ts.map

package/dist/ui/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/ui/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAA;AACvE,OAAO,EACL,KAAK,SAAS,EAiBf,MAAM,uBAAuB,CAAA;AAqB9B,OAAO,EAAoB,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAWrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,MAAM,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM;IAC3C,kDAAkD;IAClD,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAA;IACnC,eAAe;IACf,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8EAA8E;IAC9E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,CAAA;IACnD,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2CAA2C;IAC3C,aAAa,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;IAGrD,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAGzE,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA;IAGhD,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAuDD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,EACvC,OAAO,EACP,IAAI,EACJ,SAAS,EACT,aAAa,EACb,QAAgB,EAChB,UAAkB,EAClB,YAAoB,EACpB,SAAiB,EACjB,QAAQ,EAAE,eAAe,EACzB,eAAe,EACf,UAAkB,EAClB,iBAAiB,EACjB,OAAe,EACf,OAAO,EAAE,cAA2B,EACpC,aAAa,EAAE,oBAAoB,EACnC,QAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,cAAc,EACd,WAAmB,EACnB,gBAAqB,EACrB,SAAe,GAChB,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,2CAshB/B;yBA7iBe,SAAS"}