@pibit.ai/cure-design-system 0.1.0 → 0.2.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Button, type ButtonProps } from './primitives/button';
+export { Button, type ButtonProps, type Props as ButtonPropsAll, type CommonProps as ButtonCommonProps, styles as buttonStyles } from './primitives/button';
 export { Input, type InputProps } from './primitives/input';
 export { Checkbox, type CheckboxProps } from './primitives/checkbox';
 export { Toggle, type ToggleProps } from './primitives/toggle';
@@ -7,5 +7,7 @@ export { Avatar, type AvatarProps } from './primitives/avatar';
 export { Icon, type IconProps, type IconName } from './primitives/icon';
 export { Text, type TextProps } from './primitives/text';
 export { Heading, type HeadingProps } from './primitives/heading';
-export { cn } from './utils/cn';
+export { Table, TableCard, TableCell } from './patterns/table';
+export { cn, cx, sortCx } from './utils/cn';
+export { isReactComponent, isFunctionComponent, isClassComponent, isForwardRefComponent } from './utils/is-react-component';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGlE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,KAAK,IAAI,cAAc,EAAE,KAAK,WAAW,IAAI,iBAAiB,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC5J,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG/D,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/index.js

@@ -1,23 +1,36 @@
+import "./styles/theme.css";
 /* empty css                 */
-import { cn as e } from "./utils/cn.js";
-import { Button as x } from "./primitives/button/button.js";
-import { Input as f } from "./primitives/input/input.js";
-import { Checkbox as a } from "./primitives/checkbox/checkbox.js";
-import { Toggle as c } from "./primitives/toggle/toggle.js";
-import { Badge as i } from "./primitives/badge/badge.js";
-import { Avatar as B } from "./primitives/avatar/avatar.js";
-import { Icon as T } from "./primitives/icon/icon.js";
-import { Text as h } from "./primitives/text/text.js";
-import { Heading as l } from "./primitives/heading/heading.js";
+import { cn as p, cx as m, sortCx as n } from "./utils/cn.js";
+import { isClassComponent as f, isForwardRefComponent as a, isFunctionComponent as s, isReactComponent as l } from "./utils/is-react-component.js";
+import { Button as i, styles as c } from "./primitives/button/button.js";
+import { Input as T } from "./primitives/input/input.js";
+import { Checkbox as g } from "./primitives/checkbox/checkbox.js";
+import { Toggle as y } from "./primitives/toggle/toggle.js";
+import { Badge as F } from "./primitives/badge/badge.js";
+import { Avatar as R } from "./primitives/avatar/avatar.js";
+import { Icon as k } from "./primitives/icon/icon.js";
+import { Text as w } from "./primitives/text/text.js";
+import { Heading as H } from "./primitives/heading/heading.js";
+import { Table as j, TableCard as q, TableCell as z } from "./patterns/table/table.js";
 export {
-  B as Avatar,
-  i as Badge,
-  x as Button,
-  a as Checkbox,
-  l as Heading,
-  T as Icon,
-  f as Input,
-  h as Text,
-  c as Toggle,
-  e as cn
+  R as Avatar,
+  F as Badge,
+  i as Button,
+  g as Checkbox,
+  H as Heading,
+  k as Icon,
+  T as Input,
+  j as Table,
+  q as TableCard,
+  z as TableCell,
+  w as Text,
+  y as Toggle,
+  c as buttonStyles,
+  p as cn,
+  m as cx,
+  f as isClassComponent,
+  a as isForwardRefComponent,
+  s as isFunctionComponent,
+  l as isReactComponent,
+  n as sortCx
 };

package/dist/patterns/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/patterns/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Table, TableCard, TableCell } from './table';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/patterns/table/table.d.ts

@@ -0,0 +1,80 @@
+import { ComponentPropsWithRef, HTMLAttributes, ReactNode, Ref, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { CellProps as AriaCellProps, ColumnProps as AriaColumnProps, RowProps as AriaRowProps, TableHeaderProps as AriaTableHeaderProps, TableProps as AriaTableProps, TableBody as AriaTableBody } from 'react-aria-components';
+interface TableCardHeaderProps {
+    /** The title of the table card header. */
+    title: string;
+    /** The badge displayed next to the title. */
+    badge?: ReactNode;
+    /** The description of the table card header. */
+    description?: string;
+    /** The content displayed after the title and badge. */
+    contentTrailing?: ReactNode;
+    /** The class name of the table card header. */
+    className?: string;
+}
+interface TableRootProps extends AriaTableProps, Omit<ComponentPropsWithRef<'table'>, 'className' | 'slot' | 'style'> {
+    size?: 'sm' | 'md';
+    isEditable?: boolean;
+}
+declare const TableRoot: {
+    ({ className, size, isEditable, ...props }: TableRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TableHeaderProps<T extends object> extends AriaTableHeaderProps<T>, Omit<ComponentPropsWithRef<'thead'>, 'children' | 'className' | 'slot' | 'style'> {
+    bordered?: boolean;
+    /** Whether any rows in the table are expandable */
+    hasExpandableRows?: boolean;
+}
+declare const TableHeader: {
+    <T extends object>({ columns, children, bordered, hasExpandableRows, className, ...props }: TableHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TableHeadProps extends AriaColumnProps, Omit<ThHTMLAttributes<HTMLTableCellElement>, 'children' | 'className' | 'style' | 'id'> {
+    label?: string;
+    sticky?: 'left' | 'right';
+    stickyOffset?: number;
+    headerCellClass?: string;
+}
+declare const TableHead: {
+    ({ className, label, children, sticky, stickyOffset, headerCellClass, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TableRowProps<T extends object> extends AriaRowProps<T>, Omit<ComponentPropsWithRef<'tr'>, 'children' | 'className' | 'onClick' | 'slot' | 'style' | 'id'> {
+    columns?: any[];
+    highlightSelectedRow?: boolean;
+    /** Whether this row is expandable */
+    isExpandable?: boolean;
+    /** Content to render when row is expanded */
+    renderExpandedContent?: (item: T) => ReactNode;
+}
+declare const TableRow: {
+    <T extends object>({ columns, children, className, highlightSelectedRow, isExpandable, renderExpandedContent, ...props }: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TableCellProps extends AriaCellProps, Omit<TdHTMLAttributes<HTMLTableCellElement>, 'children' | 'className' | 'style' | 'id'> {
+    ref?: Ref<HTMLTableCellElement>;
+    sticky?: 'left' | 'right';
+    stickyOffset?: number;
+}
+declare const TableCell: {
+    ({ className, children, sticky, stickyOffset, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const TableCard: {
+    Root: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        size?: "sm" | "md";
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Header: {
+        ({ title, badge, description, contentTrailing, className }: TableCardHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+declare const Table: typeof TableRoot & {
+    Body: typeof AriaTableBody;
+    Cell: typeof TableCell;
+    Head: typeof TableHead;
+    Header: typeof TableHeader;
+    Row: typeof TableRow;
+};
+export { Table, TableCard, TableCell };
+//# sourceMappingURL=table.d.ts.map

package/dist/patterns/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/patterns/table/table.tsx"],"names":[],"mappings":"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"}

package/dist/patterns/table/table.js

@@ -0,0 +1,319 @@
+import { jsx as o, jsxs as v, Fragment as V } from "react/jsx-runtime";
+import { forwardRef as W, useContext as y, createContext as F, useState as N, isValidElement as O, useRef as G, useEffect as L, Children as M, cloneElement as I } from "react";
+import { Table as k, useTableOptions as w, Cell as T, TableBody as J, Column as z, Group as Q, TableHeader as X, Collection as A, Row as B } from "react-aria-components";
+import { cn as d } from "../../utils/cn.js";
+import { Badge as Y } from "../../primitives/badge/badge.js";
+import { Icon as S } from "../../primitives/icon/icon.js";
+import { Checkbox as P } from "../../primitives/checkbox/checkbox.js";
+const g = F({
+  size: "md",
+  expandedRows: /* @__PURE__ */ new Set(),
+  toggleRow: () => {
+  }
+}), D = W(
+  ({ children: l, className: s, size: n = "md", ...c }, e) => {
+    const i = G(null), [a, f] = N(!1), [h, t] = N(/* @__PURE__ */ new Set());
+    L(() => {
+      const r = i.current;
+      if (!r) return;
+      const p = () => {
+        const { scrollWidth: R, clientWidth: C } = r;
+        f(R > C);
+      };
+      p();
+      const u = new ResizeObserver(p);
+      return u.observe(r), () => {
+        u.disconnect();
+      };
+    }, []);
+    const b = (r) => {
+      t((p) => {
+        const u = new Set(p);
+        return u.has(r) ? u.delete(r) : u.add(r), u;
+      });
+    };
+    return /* @__PURE__ */ o(g.Provider, { value: { size: n, hasOverflow: a, expandedRows: h, toggleRow: b }, children: /* @__PURE__ */ o(
+      "div",
+      {
+        ref: (r) => {
+          i.current = r, typeof e == "function" ? e(r) : e && (e.current = r);
+        },
+        ...c,
+        className: d("overflow-hidden rounded-lg bg-[var(--color-bg-primary)]", s),
+        children: l
+      }
+    ) });
+  }
+);
+D.displayName = "TableCardRoot";
+const E = ({ title: l, badge: s, description: n, contentTrailing: c, className: e }) => {
+  const { size: i } = y(g);
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: d(
+        "relative flex flex-col items-start gap-4 border-b border-[var(--color-border-secondary)] bg-[var(--color-bg-primary)] px-4 md:flex-row",
+        i === "sm" ? "py-2 md:px-4" : "py-3 md:px-6",
+        e
+      ),
+      children: [
+        /* @__PURE__ */ v("div", { className: "flex flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ v("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ o("h2", { className: d("font-semibold text-[var(--color-text-primary)]", i === "sm" ? "text-md" : "text-lg"), children: l }),
+            s ? O(s) ? s : /* @__PURE__ */ o(Y, { variant: "primary", size: "sm", children: s }) : null
+          ] }),
+          n && /* @__PURE__ */ o("p", { className: "text-sm text-[var(--color-text-tertiary)]", children: n })
+        ] }),
+        c
+      ]
+    }
+  );
+};
+E.displayName = "TableCardHeader";
+const q = ({ className: l, size: s = "md", isEditable: n = !1, ...c }) => {
+  const e = y(g), [i, a] = N(/* @__PURE__ */ new Set()), f = (e == null ? void 0 : e.expandedRows) ?? i, h = (e == null ? void 0 : e.toggleRow) ?? ((t) => {
+    a((b) => {
+      const r = new Set(b);
+      return r.has(t) ? r.delete(t) : r.add(t), r;
+    });
+  });
+  return /* @__PURE__ */ o(
+    g.Provider,
+    {
+      value: {
+        size: (e == null ? void 0 : e.size) ?? s,
+        hasOverflow: e == null ? void 0 : e.hasOverflow,
+        expandedRows: f,
+        toggleRow: h
+      },
+      children: n ? /* @__PURE__ */ o(
+        "div",
+        {
+          onKeyDownCapture: (t) => {
+            if ((/* @__PURE__ */ new Set([
+              "ArrowLeft",
+              "ArrowRight",
+              "ArrowUp",
+              "ArrowDown",
+              "Home",
+              "End",
+              "PageUp",
+              "PageDown",
+              " "
+              // space
+            ])).has(t.key)) {
+              const r = t.target;
+              r && (r.closest('[contenteditable]:not([contenteditable="false"])') || r.closest("input, textarea") || r.closest('[role="textbox"]')) && t.stopPropagation();
+            }
+          },
+          children: /* @__PURE__ */ o(
+            k,
+            {
+              className: (t) => d("w-full overflow-x-hidden", typeof l == "function" ? l(t) : l),
+              ...c
+            }
+          )
+        }
+      ) : /* @__PURE__ */ o(
+        k,
+        {
+          className: (t) => d("w-full overflow-x-hidden", typeof l == "function" ? l(t) : l),
+          ...c
+        }
+      )
+    }
+  );
+};
+q.displayName = "Table";
+const j = ({
+  columns: l,
+  children: s,
+  bordered: n = !1,
+  hasExpandableRows: c = !1,
+  className: e,
+  ...i
+}) => {
+  const { size: a } = y(g), { selectionBehavior: f, selectionMode: h } = w();
+  return /* @__PURE__ */ v(
+    X,
+    {
+      ...i,
+      className: (t) => d(
+        "sticky top-0 z-30 bg-[var(--color-bg-secondary)] rounded-lg h-11",
+        // Row border—using an "after" pseudo-element to avoid the border taking up space.
+        n && "[&>tr>th]:after:pointer-events-none [&>tr>th]:after:absolute [&>tr>th]:after:inset-x-0 [&>tr>th]:after:bottom-0 [&>tr>th]:after:h-px [&>tr>th]:after:bg-border-tertiary [&>tr>th]:focus-visible:after:bg-transparent",
+        typeof e == "function" ? e(t) : e
+      ),
+      children: [
+        c && /* @__PURE__ */ o(z, { className: d("relative p-0", a === "sm" ? "w-9" : "w-11") }),
+        f === "toggle" && /* @__PURE__ */ o(z, { className: d("relative p-0", a === "sm" ? "w-9" : "w-11"), children: h === "multiple" && /* @__PURE__ */ o("div", { className: "flex items-start", children: /* @__PURE__ */ o(P, { slot: "selection" }) }) }),
+        /* @__PURE__ */ o(A, { items: l, children: s })
+      ]
+    }
+  );
+};
+j.displayName = "TableHeader";
+const K = ({
+  className: l,
+  label: s,
+  children: n,
+  sticky: c,
+  stickyOffset: e = 0,
+  headerCellClass: i,
+  ...a
+}) => {
+  const { selectionBehavior: f } = w(), { size: h } = y(g);
+  return /* @__PURE__ */ o(
+    z,
+    {
+      ...a,
+      style: (t) => {
+        const b = c ? {
+          position: "sticky",
+          [c]: e,
+          zIndex: 30
+        } : {};
+        return { ...typeof a.style == "function" ? a.style(t) : a.style || {}, ...b };
+      },
+      className: (t) => d(
+        "relative p-0 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-[var(--color-bg-primary)] focus-visible:ring-inset",
+        h === "sm" && "px-4 py-2",
+        h === "md" && "px-6 py-2",
+        f === "toggle" && "nth-2:pl-3",
+        c && "bg-[var(--color-bg-secondary)]",
+        t.allowsSorting && "cursor-pointer",
+        typeof l == "function" ? l(t) : l
+      ),
+      children: (t) => /* @__PURE__ */ v(Q, { className: d("flex items-center gap-1", i), children: [
+        /* @__PURE__ */ v("div", { className: "flex items-center gap-1 overflow-hidden", children: [
+          s && /* @__PURE__ */ o("span", { className: "text-xs font-semibold whitespace-nowrap overflow-hidden text-ellipsis text-[var(--color-text-quaternary)]", children: s }),
+          typeof n == "function" ? n(t) : n
+        ] }),
+        t.allowsSorting && (t.sortDirection ? /* @__PURE__ */ o(
+          S,
+          {
+            name: "ArrowDown",
+            size: 12,
+            className: d(
+              "stroke-[3px] text-[var(--color-text-quaternary)]",
+              t.sortDirection === "ascending" && "rotate-180"
+            )
+          }
+        ) : /* @__PURE__ */ o(S, { name: "ChevronSelectorVertical", size: 12, className: "text-[var(--color-text-quaternary)]" }))
+      ] })
+    }
+  );
+};
+K.displayName = "TableHead";
+const $ = ({
+  columns: l,
+  children: s,
+  className: n,
+  highlightSelectedRow: c = !0,
+  isExpandable: e = !1,
+  renderExpandedContent: i,
+  ...a
+}) => {
+  const { size: f, expandedRows: h, toggleRow: t } = y(g), { selectionBehavior: b } = w(), r = typeof a.id == "string" ? a.id : String(a.id), p = h.has(r), R = e ? /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      onClick: (m) => {
+        m.stopPropagation(), t(r);
+      },
+      className: d(
+        "flex items-center justify-center transition-transform duration-200 ease-in-out cursor-pointer hover:bg-[var(--color-bg-secondary_hover)] rounded p-1 flex-shrink-0 -ml-1 mr-2",
+        p && "rotate-90"
+      ),
+      "aria-label": p ? "Collapse row" : "Expand row",
+      children: /* @__PURE__ */ o(S, { name: "ChevronRight", size: 16, className: "text-[var(--color-text-quaternary)]" })
+    }
+  ) : null, C = e ? (() => {
+    const m = M.toArray(s);
+    if (m.length > 0 && O(m[0])) {
+      const H = m[0], _ = H.props;
+      return [
+        I(H, {
+          ..._,
+          children: /* @__PURE__ */ v("div", { className: "flex items-center gap-2", children: [
+            R,
+            _.children
+          ] })
+        }),
+        ...m.slice(1)
+      ];
+    }
+    return s;
+  })() : s;
+  return /* @__PURE__ */ v(V, { children: [
+    /* @__PURE__ */ v(
+      B,
+      {
+        ...a,
+        className: (m) => d(
+          "relative outline-[var(--color-focus-ring)] transition-colors after:pointer-events-none hover:bg-[var(--color-bg-secondary_hover)] focus-visible:outline-2 focus-visible:-outline-offset-2",
+          f === "sm" ? "h-12" : "h-18",
+          c && "selected:bg-[var(--color-bg-secondary)]",
+          // Row border—using an "after" pseudo-element to avoid the border taking up space.
+          !p && "[&>td]:after:absolute [&>td]:after:inset-x-0 [&>td]:after:bottom-0 [&>td]:after:h-px [&>td]:after:w-full [&>td]:after:bg-border-tertiary last:[&>td]:after:hidden [&>td]:focus-visible:after:opacity-0 focus-visible:[&>td]:after:opacity-0",
+          typeof n == "function" ? n(m) : n
+        ),
+        children: [
+          b === "toggle" && /* @__PURE__ */ o(T, { className: d("relative p-0", f === "sm" ? "w-9" : "w-11"), children: /* @__PURE__ */ o("div", { className: "flex items-end", children: /* @__PURE__ */ o(P, { className: "hidden", slot: "selection" }) }) }),
+          /* @__PURE__ */ o(A, { items: l, children: C })
+        ]
+      }
+    ),
+    e && p && i && /* @__PURE__ */ o(B, { id: `${r}-expanded`, className: "relative bg-[var(--color-bg-secondary_hover)]", children: /* @__PURE__ */ o(
+      T,
+      {
+        className: "p-0",
+        colSpan: (l == null ? void 0 : l.length) || 0,
+        children: /* @__PURE__ */ o("div", { className: d("w-full"), children: i(a.value) })
+      }
+    ) })
+  ] });
+};
+$.displayName = "TableRow";
+const U = ({ className: l, children: s, sticky: n, stickyOffset: c = 0, ...e }) => {
+  const { size: i } = y(g), { selectionBehavior: a } = w();
+  return /* @__PURE__ */ o(
+    T,
+    {
+      ...e,
+      style: (f) => {
+        const h = n ? {
+          position: "sticky",
+          [n]: c,
+          zIndex: 20
+        } : {};
+        return { ...typeof e.style == "function" ? e.style(f) : e.style || {}, ...h };
+      },
+      className: (f) => d(
+        "relative text-sm text-[var(--color-text-tertiary)] outline-[var(--color-focus-ring)] focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2",
+        i === "sm" && "p-0 px-4 py-2",
+        i === "md" && "p-0 px-6 py-2",
+        a === "toggle" && "nth-2:pl-3",
+        n === "left" && "before:absolute before:top-0 before:right-0 before:h-full before:shadow-[4px_0_8px_2px_rgba(0,0,0,0.15)]",
+        n === "right" && "z-[2000] bg-[var(--color-bg-primary)] hover:bg-inherit before:absolute before:top-0 before:left-0 before:h-full before:shadow-[-4px_0_8px_2px_rgba(0,0,0,0.15)]",
+        typeof l == "function" ? l(f) : l
+      ),
+      children: s
+    }
+  );
+};
+U.displayName = "TableCell";
+const se = {
+  Root: D,
+  Header: E
+}, x = q;
+x.Body = J;
+x.Cell = U;
+x.Head = K;
+x.Header = j;
+x.Row = $;
+export {
+  x as Table,
+  se as TableCard,
+  U as TableCell
+};

package/dist/primitives/avatar/avatar.js

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-avatar";
-import { cva as n } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cva as n } from "class-variance-authority";
 import { cn as r } from "../../utils/cn.js";
 const f = n("relative inline-flex shrink-0 overflow-hidden rounded-full", {
   variants: {

package/dist/primitives/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "primary" | "outline" | "default" | "error" | "success" | "warning" | null | undefined;
+    variant?: "primary" | "default" | "error" | "success" | "warning" | "outline" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface BadgeProps extends VariantProps<typeof badgeVariants> {

package/dist/primitives/badge/badge.js

@@ -1,5 +1,5 @@
 import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import { cva as d } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cva as d } from "class-variance-authority";
 import { cn as m } from "../../utils/cn.js";
 const g = d(
   "inline-flex items-center gap-1 rounded-md font-medium",

package/dist/primitives/button/button.d.ts

@@ -1,34 +1,107 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from 'react';
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
-import { VariantProps } from 'class-variance-authority';
-import { ReactNode } from 'react';
-declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    fullWidth?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends Omit<AriaButtonProps, 'className'>, VariantProps<typeof buttonVariants> {
-    /** Content of the button */
-    children: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
+export declare const styles: {
+    common: {
+        root: string;
+        icon: string;
+    };
+    sizes: {
+        xs: {
+            root: string;
+            linkRoot: string;
+        };
+        sm: {
+            root: string;
+            linkRoot: string;
+        };
+        md: {
+            root: string;
+            linkRoot: string;
+        };
+        lg: {
+            root: string;
+            linkRoot: string;
+        };
+        xl: {
+            root: string;
+            linkRoot: string;
+        };
+    };
+    colors: {
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        tertiary: {
+            root: string;
+        };
+        'link-gray': {
+            root: string;
+        };
+        'link-color': {
+            root: string;
+        };
+        'primary-destructive': {
+            root: string;
+        };
+        'secondary-destructive': {
+            root: string;
+        };
+        'tertiary-destructive': {
+            root: string;
+        };
+        'link-destructive': {
+            root: string;
+        };
+    };
+};
+/**
+ * Common props shared between button and anchor variants
+ */
+export interface CommonProps {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** Shows a loading spinner and disables the button */
+    isLoading?: boolean;
+    /** The size variant of the button */
+    size?: keyof typeof styles.sizes;
+    /** The color variant of the button */
+    color?: keyof typeof styles.colors;
+    /** Icon component or element to show before the text */
+    iconLeading?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Icon component or element to show after the text */
+    iconTrailing?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Removes horizontal padding from the text content */
+    noTextPadding?: boolean;
+    /** When true, keeps the text visible during loading state */
+    showTextWhileLoading?: boolean;
+    childrenClassName?: string;
+    trailingClassName?: string;
+    leadingClassName?: string;
+}
+/**
+ * Props for the button variant (non-link)
+ */
+export interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'slot'>, HTMLButtonElement> {
+    /** Slot name for react-aria component */
+    slot?: AriaButtonProps['slot'];
 }
 /**
- * Button component built on React Aria for accessibility
- *
- * Features:
- * - Keyboard navigation (Space/Enter)
- * - Disabled state management
- * - Focus management
- * - Multiple variants and sizes
- *
- * @example
- * <Button>Click me</Button>
- * <Button variant="secondary" size="lg">Large Button</Button>
- * <Button isDisabled>Disabled</Button>
+ * Props for the link variant (anchor tag)
  */
-export declare function Button({ variant, size, fullWidth, className, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Button {
-    var displayName: string;
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>, HTMLAnchorElement> {
 }
+/** Union type of button and link props */
+export type Props = ButtonProps | LinkProps;
+export declare const Button: {
+    ({ size, color, children, className, noTextPadding, iconLeading: IconLeading, iconTrailing: IconTrailing, isDisabled: disabled, isLoading: loading, showTextWhileLoading, childrenClassName, trailingClassName, leadingClassName, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};
 //# sourceMappingURL=button.d.ts.map