@timmbr/ui 1.13.1 → 1.14.0

package/dist/components/AttributeValueField/AttributeValueField.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export type AttributeValueFieldType = "STRING" | "INTEGER" | "DECIMAL" | "LIST" | "BOOLEAN";
+export interface AttributeValueFieldOption {
+    label: string;
+    slug: string;
+    swatchHex?: string | null;
+}
+export interface AttributeValueFieldProps {
+    type: AttributeValueFieldType;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    options?: AttributeValueFieldOption[];
+    unit?: string | null;
+    disabled?: boolean;
+    size?: "sm" | "md";
+    className?: string;
+    id?: string;
+}
+export declare const AttributeValueField: React.FC<AttributeValueFieldProps>;
+//# sourceMappingURL=AttributeValueField.d.ts.map

package/dist/components/AttributeValueField/AttributeValueField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeValueField.d.ts","sourceRoot":"","sources":["../../../src/components/AttributeValueField/AttributeValueField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,MAAM,uBAAuB,GAC/B,QAAQ,GACR,SAAS,GACT,SAAS,GACT,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,uBAAuB,CAAC;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAiIlE,CAAC"}

package/dist/components/AttributeValueField/AttributeValueField.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { Switch } from '../Switch/Switch.js';
+import { Inline } from '../Inline/Inline.js';
+import { Input } from '../Input/Input.js';
+import { Text } from '../Text/Text.js';
+import { Stack } from '../Stack/Stack.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { Select } from '../Select/Select.js';
+
+const AttributeValueField = ({
+  type,
+  value,
+  onChange,
+  options = [],
+  unit,
+  disabled,
+  size = "sm",
+  className,
+  id
+}) => {
+  const inputSize = size === "sm" ? "sm" : "md";
+  if (type === "BOOLEAN") {
+    const checked = value === true || value === "true";
+    return /* @__PURE__ */ jsx(
+      Switch,
+      {
+        id,
+        checked,
+        onCheckedChange: (next) => onChange(next),
+        disabled,
+        className
+      }
+    );
+  }
+  if (type === "INTEGER" || type === "DECIMAL") {
+    return /* @__PURE__ */ jsxs(Inline, { gap: 2, align: "center", className: cn("w-full", className), children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id,
+          type: "number",
+          size: inputSize,
+          step: type === "INTEGER" ? 1 : "any",
+          value: value === void 0 || value === null ? "" : String(value),
+          onChange: (e) => {
+            const raw = e.target.value;
+            if (raw === "") {
+              onChange("");
+              return;
+            }
+            onChange(type === "INTEGER" ? parseInt(raw, 10) : parseFloat(raw));
+          },
+          disabled,
+          className: "flex-1"
+        }
+      ),
+      unit ? /* @__PURE__ */ jsx(Text, { variant: "caption", foreground: "muted", className: "shrink-0", children: unit }) : null
+    ] });
+  }
+  if (type === "LIST" && options.length > 0) {
+    const selected = Array.isArray(value) ? value : value ? [String(value)] : [];
+    return /* @__PURE__ */ jsx(Stack, { gap: 2, className, children: options.map((opt) => {
+      const optValue = opt.slug || opt.label;
+      const isChecked = selected.includes(optValue);
+      return /* @__PURE__ */ jsxs(Inline, { gap: 2, align: "center", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: id ? `${id}-${opt.slug}` : void 0,
+            checked: isChecked,
+            disabled,
+            onCheckedChange: (checked) => {
+              if (checked) {
+                onChange([...selected, optValue]);
+              } else {
+                onChange(selected.filter((v) => v !== optValue));
+              }
+            }
+          }
+        ),
+        opt.swatchHex ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "size-4 rounded-sm border border-border shrink-0",
+            style: { backgroundColor: opt.swatchHex }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Text, { variant: "body-2", children: opt.label })
+      ] }, opt.slug);
+    }) });
+  }
+  if (type === "LIST" || type === "STRING") {
+    if (options.length > 0) {
+      const selectValue = value === void 0 || value === null ? "" : String(value);
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          id,
+          size: inputSize,
+          value: selectValue,
+          onValueChange: (v) => onChange(v),
+          disabled,
+          className,
+          options: [
+            { value: "", label: "Select…" },
+            ...options.map((o) => ({
+              value: o.slug || o.label,
+              label: o.label
+            }))
+          ]
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      size: inputSize,
+      value: value === void 0 || value === null ? "" : String(value),
+      onChange: (e) => onChange(e.target.value),
+      disabled,
+      className
+    }
+  );
+};
+
+export { AttributeValueField };

package/dist/components/AttributeValueField/index.d.ts

@@ -0,0 +1,2 @@
+export { AttributeValueField, type AttributeValueFieldProps, type AttributeValueFieldType, type AttributeValueFieldOption, } from "./AttributeValueField";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AttributeValueField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AttributeValueField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,GAC/B,MAAM,uBAAuB,CAAC"}

package/dist/components/Checkbox/Checkbox.js

@@ -83,7 +83,7 @@ const Checkbox = React.forwardRef(
                   children: label
                 }
               ),
-              description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted leading-normal mt-0.5", children: description })
+              description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted-foreground leading-normal mt-0.5", children: description })
             ] })
           ] }),
           errorMessage && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-destructive font-medium pl-7", children: errorMessage })

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { flexRender, type ColumnDef } from '@tanstack/react-table';
+import type { DataTableProps } from './DataTable.types';
+export declare function DataTable<TData, TValue = unknown>({ data, columns, sorting, onSortingChange, rowSelection, onRowSelectionChange, className, containerClassName, bordered, variant, size, emptyMessage, isLoading, getRowId, onRowClick, stickyHeader, showScrollIndicator, motion: motionProp, }: DataTableProps<TData, TValue>): React.JSX.Element;
+export declare namespace DataTable {
+    var displayName: string;
+}
+export { flexRender };
+export type { ColumnDef };
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/DataTable/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,UAAU,EAGV,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAc/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,EACjD,IAAI,EACJ,OAAO,EACP,OAAO,EACP,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,YAAkC,EAClC,SAAiB,EACjB,QAAQ,EACR,UAAU,EACV,YAAmB,EACnB,mBAA0B,EAC1B,MAAM,EAAE,UAAU,GACnB,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,qBA+L/B;yBAlNe,SAAS;;;AAsNzB,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,177 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+export { flexRender } from '@tanstack/react-table';
+import { ChevronUp, ChevronDown, ChevronsUpDown } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { motion } from '@timmbr/motion';
+import { resolveMotion } from '../../types/motion.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../Table/Table.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+function DataTable({
+  data,
+  columns,
+  sorting,
+  onSortingChange,
+  rowSelection,
+  onRowSelectionChange,
+  className,
+  containerClassName,
+  bordered,
+  variant,
+  size,
+  emptyMessage = "No results found.",
+  isLoading = false,
+  getRowId,
+  onRowClick,
+  stickyHeader = true,
+  showScrollIndicator = true,
+  motion: motionProp
+}) {
+  const [internalSorting, setInternalSorting] = React.useState([]);
+  const [internalRowSelection, setInternalRowSelection] = React.useState({});
+  const scrollContainerRef = React.useRef(null);
+  const globalMotion = useGlobalAnimation();
+  const { shouldAnimate } = resolveMotion(motionProp, globalMotion);
+  const [scrollProgress, setScrollProgress] = React.useState(0);
+  React.useEffect(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    const updateProgress = () => {
+      const maxScroll = el.scrollHeight - el.clientHeight;
+      setScrollProgress(maxScroll > 0 ? el.scrollTop / maxScroll : 0);
+    };
+    updateProgress();
+    el.addEventListener("scroll", updateProgress, { passive: true });
+    const resizeObserver = new ResizeObserver(updateProgress);
+    resizeObserver.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateProgress);
+      resizeObserver.disconnect();
+    };
+  }, [data]);
+  React.useEffect(() => {
+    if (typeof scrollContainerRef.current?.scrollTo === "function") {
+      scrollContainerRef.current.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }, [data]);
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting: sorting !== void 0 ? sorting : internalSorting,
+      rowSelection: rowSelection !== void 0 ? rowSelection : internalRowSelection
+    },
+    onSortingChange: onSortingChange ?? setInternalSorting,
+    onRowSelectionChange: onRowSelectionChange ?? setInternalRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableRowSelection: true,
+    getRowId
+  });
+  const resolvedContainerClassName = cn(
+    stickyHeader && "min-h-0 h-full",
+    containerClassName
+  );
+  return /* @__PURE__ */ jsxs(
+    Table,
+    {
+      className: cn(stickyHeader && "border-separate border-spacing-0", className),
+      containerClassName: resolvedContainerClassName,
+      containerRef: scrollContainerRef,
+      bordered,
+      variant,
+      size,
+      children: [
+        showScrollIndicator && shouldAnimate && /* @__PURE__ */ jsx("caption", { className: "p-0 caption-top", children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            style: { scaleX: scrollProgress },
+            className: "sticky top-0 z-30 h-0.5 w-full bg-primary origin-left pointer-events-none transition-transform duration-150 ease-out"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "border-b border-border hover:bg-transparent", children: headerGroup.headers.map((header) => {
+          const canSort = header.column.getCanSort();
+          const isSorted = header.column.getIsSorted();
+          return /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              colSpan: header.colSpan,
+              className: cn(
+                stickyHeader ? "sticky top-0 z-20 bg-card border-b border-border" : "static shadow-none",
+                canSort && "cursor-pointer select-none"
+              ),
+              onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+              children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx("span", { children: flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ) }),
+                canSort && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center text-muted-foreground", children: isSorted === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "size-3.5 text-foreground" }) : isSorted === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-foreground" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 opacity-40 hover:opacity-100 transition-opacity" }) })
+              ] })
+            },
+            header.id
+          );
+        }) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsx(TableBody, { children: isLoading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            colSpan: columns.length,
+            className: "h-28 text-center text-muted-foreground",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-block size-4 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
+              /* @__PURE__ */ jsx("span", { children: "Loading..." })
+            ] })
+          }
+        ) }) : table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row, index) => {
+          const isSelected = row.getIsSelected();
+          const cells = row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+          if (shouldAnimate) {
+            return /* @__PURE__ */ jsx(
+              motion.tr,
+              {
+                "data-state": isSelected ? "selected" : void 0,
+                initial: { opacity: 0, y: 4 },
+                animate: { opacity: 1, y: 0 },
+                transition: {
+                  duration: 0.2,
+                  ease: [0.16, 1, 0.3, 1],
+                  delay: Math.min(index * 0.015, 0.15)
+                },
+                className: cn(
+                  "border-b border-grey-200 dark:border-grey-800 transition-colors data-[state=selected]:bg-primary/5 hover:bg-grey-50/80 dark:hover:bg-grey-900/60",
+                  onRowClick && "cursor-pointer"
+                ),
+                onClick: () => onRowClick?.(row),
+                children: cells
+              },
+              row.id
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            TableRow,
+            {
+              "data-state": isSelected ? "selected" : void 0,
+              className: cn(onRowClick && "cursor-pointer"),
+              onClick: () => onRowClick?.(row),
+              children: cells
+            },
+            row.id
+          );
+        }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            colSpan: columns.length,
+            className: "h-28 text-center text-muted-foreground",
+            children: emptyMessage
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+DataTable.displayName = "DataTable";
+
+export { DataTable };

package/dist/components/DataTable/DataTable.types.d.ts

@@ -0,0 +1,42 @@
+import type * as React from 'react';
+import type { ColumnDef, HeaderContext, CellContext, SortingState, RowSelectionState, OnChangeFn, Row, Table as ReactTableInstance } from '@tanstack/react-table';
+import type { TableProps } from '../Table/Table.types';
+import type { MotionProps } from '../../types/motion';
+export type { ColumnDef, HeaderContext, CellContext, SortingState, RowSelectionState, OnChangeFn, Row, ReactTableInstance, };
+export interface DataTableProps<TData, TValue = unknown> extends MotionProps {
+    /** The data to display in the table. */
+    data: TData[];
+    /** Column definitions conforming to TanStack Table's ColumnDef specification. */
+    columns: ColumnDef<TData, TValue>[];
+    /** Controlled sorting state. */
+    sorting?: SortingState;
+    /** Callback fired when sorting changes. */
+    onSortingChange?: OnChangeFn<SortingState>;
+    /** Controlled row selection state (mapping rowId to boolean). */
+    rowSelection?: RowSelectionState;
+    /** Callback fired when row selection changes. */
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    /** Additional CSS class names for the table element. */
+    className?: string;
+    /** Additional CSS class names for the table container. */
+    containerClassName?: string;
+    /** Whether the table should render with borders. */
+    bordered?: boolean;
+    /** Table visual variant: 'default' | 'striped' | 'bordered'. */
+    variant?: TableProps['variant'];
+    /** Table row density: 'sm' | 'default'. */
+    size?: TableProps['size'];
+    /** Custom content to display when there are no records. */
+    emptyMessage?: React.ReactNode;
+    /** Whether data is loading (renders skeleton or loading indicator). */
+    isLoading?: boolean;
+    /** Optional function to determine unique ID for each row. */
+    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+    /** Optional click handler for table rows. */
+    onRowClick?: (row: Row<TData>) => void;
+    /** Whether the table header remains sticky while scrolling rows. @default true */
+    stickyHeader?: boolean;
+    /** Whether to render a smooth motion spring scroll progress indicator. @default true */
+    showScrollIndicator?: boolean;
+}
+//# sourceMappingURL=DataTable.types.d.ts.map

package/dist/components/DataTable/DataTable.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.types.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,UAAU,EACV,GAAG,EACH,KAAK,IAAI,kBAAkB,EAC5B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,YAAY,EACV,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,UAAU,EACV,GAAG,EACH,kBAAkB,GACnB,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAE,SAAQ,WAAW;IAC1E,wCAAwC;IACxC,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,iFAAiF;IACjF,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACpC,gCAAgC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IAC3C,iEAAiE;IACjE,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,iDAAiD;IACjD,oBAAoB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACrD,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChC,2CAA2C;IAC3C,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC;IAC9E,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACvC,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B"}

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

@@ -0,0 +1,3 @@
+export * from './DataTable';
+export * from './DataTable.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC"}

package/dist/components/Dialog/Dialog.js

@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef(({ className, children, motion, ...props
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "absolute right-3 top-3 z-20 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
+              className: "absolute right-3 top-3 z-20 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted-foreground hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
               children: [
                 /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })

package/dist/components/Drawer/Drawer.js

@@ -53,7 +53,7 @@ const DrawerContent = React.forwardRef(({ className, children, side = "right", s
             DialogPrimitive.Close,
             {
               "data-slot": "drawer-close",
-              className: "absolute right-3 top-3 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
+              className: "absolute right-3 top-3 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted-foreground hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
               children: [
                 /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })

package/dist/components/FormField/FormField.js

@@ -40,7 +40,7 @@ const FormField = React.forwardRef(
               id: `${id}-desc`,
               className: cn(
                 "text-body-3 mt-1 flex items-center gap-1.5",
-                isError ? "text-destructive font-medium" : "text-muted"
+                isError ? "text-destructive font-medium" : "text-muted-foreground"
               ),
               children: [
                 isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),

package/dist/components/ImageUpload/ImageUpload.js

@@ -203,13 +203,13 @@ const ImageUpload = React.forwardRef(
             (label || maxFiles || minFiles) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 select-none", children: [
               label && /* @__PURE__ */ jsxs("label", { className: "text-body-3 font-semibold text-foreground tracking-wide flex items-center gap-1.5", children: [
                 /* @__PURE__ */ jsx("span", { children: label }),
-                minFiles && minFiles > 0 && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted font-normal", children: [
+                minFiles && minFiles > 0 && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted-foreground font-normal", children: [
                   "(Min ",
                   minFiles,
                   ")"
                 ] })
               ] }),
-              multiple && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg font-medium text-muted", children: [
+              multiple && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg font-medium text-muted-foreground", children: [
                 items.length,
                 maxFiles ? ` / ${maxFiles}` : "",
                 " uploaded"
@@ -284,7 +284,7 @@ const ImageUpload = React.forwardRef(
                     onDragLeave: handleDragLeave,
                     onDrop: handleDrop
                   }
-                ) : /* @__PURE__ */ jsxs("div", { className: "w-full rounded-xl border border-dashed border-grey-300 dark:border-grey-700 bg-grey-50/50 dark:bg-grey-900/30 p-3 text-center text-body-3 text-muted", children: [
+                ) : /* @__PURE__ */ jsxs("div", { className: "w-full rounded-xl border border-dashed border-grey-300 dark:border-grey-700 bg-grey-50/50 dark:bg-grey-900/30 p-3 text-center text-body-3 text-muted-foreground", children: [
                   "Maximum upload limit reached (",
                   maxFiles,
                   "/",
@@ -335,7 +335,7 @@ const ImageUpload = React.forwardRef(
               {
                 className: cn(
                   "text-body-3 mt-1 flex items-center gap-1.5 leading-normal",
-                  isError ? "text-destructive font-medium" : minFilesWarning ? "text-warning dark:text-warning font-medium" : "text-muted"
+                  isError ? "text-destructive font-medium" : minFilesWarning ? "text-warning dark:text-warning font-medium" : "text-muted-foreground"
                 ),
                 children: [
                   (isError || minFilesWarning) && /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),

package/dist/components/ImageUpload/subcomponents/ImageUploadDropzone.js

@@ -73,7 +73,7 @@ const ImageUploadDropzone = ({
             " ",
             "or drag & drop"
           ] }),
-          /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted-foreground", children: [
             mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `Images & Videos (Max ${maxMb}MB each)` : `PNG, JPG, WEBP (Max ${maxMb}MB each)`,
             maxFiles && ` • Up to ${maxFiles} items`
           ] })
@@ -82,7 +82,7 @@ const ImageUploadDropzone = ({
         /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-grey-50 dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-4 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
           /* @__PURE__ */ jsx("span", { className: "text-body-3 font-semibold text-primary underline", children: "Upload" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-caption text-muted", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-caption text-muted-foreground", children: [
             "Max ",
             maxMb,
             "MB"
@@ -95,7 +95,7 @@ const ImageUploadDropzone = ({
             /* @__PURE__ */ jsx("span", { className: "text-primary underline font-semibold", children: "Click to upload" }),
             " or drag and drop"
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-caption-lg text-muted", children: mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `PNG, JPG, WEBP, MP4 (Max ${maxMb}MB)` : `PNG, JPG, or WEBP (Max ${maxMb}MB)` })
+          /* @__PURE__ */ jsx("span", { className: "text-caption-lg text-muted-foreground", children: mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `PNG, JPG, WEBP, MP4 (Max ${maxMb}MB)` : `PNG, JPG, or WEBP (Max ${maxMb}MB)` })
         ] })
       ] })
     }

package/dist/components/ImageUpload/subcomponents/ImageUploadModal.js

@@ -58,7 +58,7 @@ const ImageUploadModal = ({
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-body-3 font-semibold text-foreground tracking-wide truncate max-w-xs sm:max-w-md", children: activeItem.name || `Media Item #${activeIndex + 1}` }),
                   activeIndex === 0 && /* @__PURE__ */ jsx("span", { className: "bg-success/10 text-success dark:text-success border border-success/20 text-caption font-semibold px-2 py-0.5 rounded-full", children: "Cover" }),
-                  /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted-foreground", children: [
                     "(",
                     activeIndex + 1,
                     " of ",

package/dist/components/Input/Input.js

@@ -151,7 +151,7 @@ const Input = React.forwardRef(
                     type: "button",
                     tabIndex: -1,
                     onClick: handleClear,
-                    className: "flex items-center justify-center ml-1.5 p-1 rounded-sm text-muted hover:text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 transition-colors cursor-pointer active:scale-95",
+                    className: "flex items-center justify-center ml-1.5 p-1 rounded-sm text-muted-foreground hover:text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 transition-colors cursor-pointer active:scale-95",
                     "aria-label": "Clear input",
                     children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
                   }
@@ -162,12 +162,12 @@ const Input = React.forwardRef(
                     type: "button",
                     tabIndex: -1,
                     onClick: () => setShowPassword((prev) => !prev),
-                    className: "flex items-center justify-center ml-1.5 p-1 rounded-sm text-muted hover:text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 transition-colors cursor-pointer active:scale-95",
+                    className: "flex items-center justify-center ml-1.5 p-1 rounded-sm text-muted-foreground hover:text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 transition-colors cursor-pointer active:scale-95",
                     "aria-label": showPassword ? "Hide password" : "Show password",
                     children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" })
                   }
                 ),
-                rightAdornment && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center ml-2 text-muted shrink-0", children: rightAdornment })
+                rightAdornment && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center ml-2 text-muted-foreground shrink-0", children: rightAdornment })
               ]
             }
           ),

package/dist/components/Radio/Radio.js

@@ -111,7 +111,7 @@ const RadioGroup = React.forwardRef(
         {
           className: cn(
             "text-body-3 mt-1 flex items-center gap-1.5",
-            isError ? "text-destructive font-medium" : "text-muted"
+            isError ? "text-destructive font-medium" : "text-muted-foreground"
           ),
           children: [
             isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),

package/dist/components/Select/Select.js

@@ -79,7 +79,7 @@ const Select = React.forwardRef(
                     ),
                     children: [
                       /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
-                      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted opacity-60 transition-transform duration-200" }) })
+                      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground opacity-60 transition-transform duration-200" }) })
                     ]
                   }
                 ),
@@ -115,7 +115,7 @@ const Select = React.forwardRef(
             {
               className: cn(
                 "text-body-3 mt-1 flex items-center gap-1.5",
-                isError ? "text-destructive font-medium" : "text-muted"
+                isError ? "text-destructive font-medium" : "text-muted-foreground"
               ),
               children: [
                 isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),

package/dist/components/Switch/Switch.js

@@ -74,7 +74,7 @@ const Switch = React.forwardRef(
                 children: label
               }
             ),
-            description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted leading-normal mt-0.5", children: description })
+            description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted-foreground leading-normal mt-0.5", children: description })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "shrink-0 pt-0.5", children: switchElement })
         ]

package/dist/components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,cAAc,EACd,iBAAiB,EAClB,MAAM,eAAe,CAAC;AAEvB,eAAO,MAAM,KAAK,qFAWjB,CAAC;AAGF,eAAO,MAAM,WAAW,kGASvB,CAAC;AAGF,eAAO,MAAM,SAAS,gGASrB,CAAC;AAGF,eAAO,MAAM,WAAW,kGASvB,CAAC;AAGF,eAAO,MAAM,QAAQ,2FASpB,CAAC;AAGF,eAAO,MAAM,SAAS,6FASrB,CAAC;AAGF,eAAO,MAAM,SAAS,6FASrB,CAAC;AAGF,eAAO,MAAM,YAAY,mGASxB,CAAC;AAGF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,cAAc,EACd,iBAAiB,EAClB,MAAM,eAAe,CAAC;AAEvB,eAAO,MAAM,KAAK,qFAcjB,CAAC;AAGF,eAAO,MAAM,WAAW,kGASvB,CAAC;AAGF,eAAO,MAAM,SAAS,gGASrB,CAAC;AAGF,eAAO,MAAM,WAAW,kGASvB,CAAC;AAGF,eAAO,MAAM,QAAQ,2FASpB,CAAC;AAGF,eAAO,MAAM,SAAS,6FASrB,CAAC;AAGF,eAAO,MAAM,SAAS,6FASrB,CAAC;AAGF,eAAO,MAAM,YAAY,mGASxB,CAAC;AAGF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/Table/Table.js

@@ -5,15 +5,22 @@ import { cn } from '@timmbr/utils';
 import { tableVariants, tableContainerVariants, tableCellVariants, tableFooterVariants, tableHeadVariants, tableRowVariants } from './Table.styles.js';
 
 const Table = React.forwardRef(
-  ({ className, containerClassName, variant, size, bordered, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn(tableContainerVariants({ bordered }), containerClassName), children: /* @__PURE__ */ jsx(
-    "table",
+  ({ className, containerClassName, containerRef, variant, size, bordered, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
     {
-      ref,
-      "data-slot": "table",
-      className: cn(tableVariants({ variant, size }), className),
-      ...props
+      ref: containerRef,
+      className: cn(tableContainerVariants({ bordered }), containerClassName),
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          ref,
+          "data-slot": "table",
+          className: cn(tableVariants({ variant, size }), className),
+          ...props
+        }
+      )
     }
-  ) })
+  )
 );
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(