@arcadeai/design-system 0.4.0 → 0.6.0

package/dist/components/ui/atoms/scroll-area.d.ts

@@ -1,5 +1,7 @@
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import type * as React from 'react';
-declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollArea({ className, children, viewPortClassName, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+    viewPortClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
 declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
 export { ScrollArea, ScrollBar };

package/dist/components/ui/atoms/scroll-area.js

@@ -1,4 +1,4 @@
-import { jsx as b, jsxs as $, Fragment as se } from "react/jsx-runtime";
+import { jsx as b, jsxs as j, Fragment as se } from "react/jsx-runtime";
 import * as c from "react";
 import { P as L } from "../../../index-C9KW2H79.js";
 import { P as I } from "../../../index-p7nYL7BU.js";
@@ -9,11 +9,11 @@ import { u as ie } from "../../../index-ByaXH_ih.js";
 import { u as de } from "../../../index-DuekHEmj.js";
 import { c as ue } from "../../../index-rKs9bXHr.js";
 import { c as R } from "../../../index-DLeNytVF.js";
-import { c as j } from "../../../utils-Dy2WjYNJ.js";
+import { c as V } from "../../../utils-Dy2WjYNJ.js";
 function fe(e, o) {
   return c.useReducer((r, l) => o[r][l] ?? r, e);
 }
-var V = "ScrollArea", [q, Ye] = ae(V), [he, v] = q(V), G = c.forwardRef(
+var B = "ScrollArea", [q, Ye] = ae(B), [he, v] = q(B), G = c.forwardRef(
   (e, o) => {
     const {
       __scopeScrollArea: r,
@@ -63,11 +63,11 @@ var V = "ScrollArea", [q, Ye] = ae(V), [he, v] = q(V), G = c.forwardRef(
     );
   }
 );
-G.displayName = V;
+G.displayName = B;
 var J = "ScrollAreaViewport", K = c.forwardRef(
   (e, o) => {
     const { __scopeScrollArea: r, children: l, nonce: t, ...n } = e, s = v(J, r), a = c.useRef(null), i = T(o, a, s.onViewportChange);
-    return /* @__PURE__ */ $(se, { children: [
+    return /* @__PURE__ */ j(se, { children: [
       /* @__PURE__ */ b(
         "style",
         {
@@ -111,7 +111,7 @@ var g = "ScrollAreaScrollbar", Q = c.forwardRef(
     const { forceMount: r, ...l } = e, t = v(g, e.__scopeScrollArea), { onScrollbarXEnabledChange: n, onScrollbarYEnabledChange: s } = t, a = e.orientation === "horizontal";
     return c.useEffect(() => (a ? n(!0) : s(!0), () => {
       a ? n(!1) : s(!1);
-    }), [a, n, s]), t.type === "hover" ? /* @__PURE__ */ b(be, { ...l, ref: o, forceMount: r }) : t.type === "scroll" ? /* @__PURE__ */ b(me, { ...l, ref: o, forceMount: r }) : t.type === "auto" ? /* @__PURE__ */ b(Z, { ...l, ref: o, forceMount: r }) : t.type === "always" ? /* @__PURE__ */ b(B, { ...l, ref: o }) : null;
+    }), [a, n, s]), t.type === "hover" ? /* @__PURE__ */ b(be, { ...l, ref: o, forceMount: r }) : t.type === "scroll" ? /* @__PURE__ */ b(me, { ...l, ref: o, forceMount: r }) : t.type === "auto" ? /* @__PURE__ */ b(Z, { ...l, ref: o, forceMount: r }) : t.type === "always" ? /* @__PURE__ */ b(k, { ...l, ref: o }) : null;
   }
 );
 Q.displayName = g;
@@ -173,7 +173,7 @@ var be = c.forwardRef((e, o) => {
       return f.addEventListener("scroll", u), () => f.removeEventListener("scroll", u);
     }
   }, [t.viewport, n, i, s]), /* @__PURE__ */ b(I, { present: r || a !== "hidden", children: /* @__PURE__ */ b(
-    B,
+    k,
     {
       "data-state": a === "hidden" ? "hidden" : "visible",
       ...l,
@@ -190,14 +190,14 @@ var be = c.forwardRef((e, o) => {
     }
   }, 10);
   return A(r.viewport, i), A(r.content, i), /* @__PURE__ */ b(I, { present: l || n, children: /* @__PURE__ */ b(
-    B,
+    k,
     {
       "data-state": n ? "visible" : "hidden",
       ...t,
       ref: o
     }
   ) });
-}), B = c.forwardRef((e, o) => {
+}), k = c.forwardRef((e, o) => {
   const { orientation: r = "vertical", ...l } = e, t = v(g, e.__scopeScrollArea), n = c.useRef(null), s = c.useRef(0), [a, i] = c.useState({
     content: 0,
     viewport: 0,
@@ -221,7 +221,7 @@ var be = c.forwardRef((e, o) => {
       ref: o,
       onThumbPositionChange: () => {
         if (t.viewport && n.current) {
-          const u = t.viewport.scrollLeft, m = F(u, a, t.dir);
+          const u = t.viewport.scrollLeft, m = $(u, a, t.dir);
           n.current.style.transform = `translate3d(${m}px, 0, 0)`;
         }
       },
@@ -239,7 +239,7 @@ var be = c.forwardRef((e, o) => {
       ref: o,
       onThumbPositionChange: () => {
         if (t.viewport && n.current) {
-          const u = t.viewport.scrollTop, m = F(u, a);
+          const u = t.viewport.scrollTop, m = $(u, a);
           n.current.style.transform = `translate3d(0, ${m}px, 0)`;
         }
       },
@@ -429,15 +429,15 @@ var be = c.forwardRef((e, o) => {
   }
 );
 oe.displayName = z;
-var k = "ScrollAreaCorner", te = c.forwardRef(
+var F = "ScrollAreaCorner", te = c.forwardRef(
   (e, o) => {
-    const r = v(k, e.__scopeScrollArea), l = !!(r.scrollbarX && r.scrollbarY);
+    const r = v(F, e.__scopeScrollArea), l = !!(r.scrollbarX && r.scrollbarY);
     return r.type !== "scroll" && l ? /* @__PURE__ */ b(ge, { ...e, ref: o }) : null;
   }
 );
-te.displayName = k;
+te.displayName = F;
 var ge = c.forwardRef((e, o) => {
-  const { __scopeScrollArea: r, ...l } = e, t = v(k, r), [n, s] = c.useState(0), [a, i] = c.useState(0), f = !!(n && a);
+  const { __scopeScrollArea: r, ...l } = e, t = v(F, r), [n, s] = c.useState(0), [a, i] = c.useState(0), f = !!(n && a);
   return A(t.scrollbarX, () => {
     var h;
     const d = ((h = t.scrollbarX) == null ? void 0 : h.offsetHeight) || 0;
@@ -478,7 +478,7 @@ function Pe(e, o, r, l = "ltr") {
   const t = X(r), n = t / 2, s = o || n, a = t - s, i = r.scrollbar.paddingStart + s, f = r.scrollbar.size - r.scrollbar.paddingEnd - a, d = r.content - r.viewport, h = l === "ltr" ? [0, d] : [d * -1, 0];
   return le([i, f], h)(e);
 }
-function F(e, o, r = "ltr") {
+function $(e, o, r = "ltr") {
   const l = X(o), t = o.scrollbar.paddingStart + o.scrollbar.paddingEnd, n = o.scrollbar.size - t, s = o.content - o.viewport, a = n - l, i = r === "ltr" ? [0, s] : [s * -1, 0], f = ue(e, i);
   return le([0, s], [0, a])(f);
 }
@@ -524,19 +524,23 @@ var Re = G, Ee = K, Ae = te;
 function Me({
   className: e,
   children: o,
-  ...r
+  viewPortClassName: r,
+  ...l
 }) {
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ j(
     Re,
     {
-      className: j("relative", e),
+      className: V("relative", e),
       "data-slot": "scroll-area",
-      ...r,
+      ...l,
       children: [
         /* @__PURE__ */ b(
           Ee,
           {
-            className: "size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+            className: V(
+              "size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+              r
+            ),
             "data-slot": "scroll-area-viewport",
             children: o
           }
@@ -555,7 +559,7 @@ function Te({
   return /* @__PURE__ */ b(
     Q,
     {
-      className: j(
+      className: V(
         "flex touch-none select-none p-px transition-colors",
         o === "vertical" && "h-full w-2.5 border-l border-l-transparent",
         o === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",

package/dist/components/ui/atoms/sidebar.js

@@ -222,7 +222,7 @@ function fe({ className: a, ...e }) {
     {
       className: r(
         "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
+        "overflow-x-auto md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
         a
       ),
       "data-slot": "sidebar-inset",

package/dist/components/ui/atoms/table.d.ts

@@ -1,5 +1,5 @@
-import type * as React from 'react';
-declare function Table({ className, ...props }: React.ComponentProps<'table'>): import("react/jsx-runtime").JSX.Element;
+import * as React from 'react';
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): import("react/jsx-runtime").JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): import("react/jsx-runtime").JSX.Element;
 declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/atoms/table.js

@@ -1,23 +1,20 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import * as s from "react";
 import { c as o } from "../../../utils-Dy2WjYNJ.js";
-function n({ className: t, ...e }) {
-  return /* @__PURE__ */ a(
-    "div",
+import { ScrollArea as n, ScrollBar as c } from "./scroll-area.js";
+const d = s.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ l(n, { className: "relative w-full", viewPortClassName: "px-0", children: [
+  /* @__PURE__ */ a(
+    "table",
     {
-      className: "relative w-full overflow-x-auto",
-      "data-slot": "table-container",
-      children: /* @__PURE__ */ a(
-        "table",
-        {
-          className: o("w-full caption-bottom text-sm", t),
-          "data-slot": "table",
-          ...e
-        }
-      )
+      className: o("w-full caption-bottom text-sm", t),
+      ref: r,
+      ...e
     }
-  );
-}
-function s({ className: t, ...e }) {
+  ),
+  /* @__PURE__ */ a(c, { orientation: "horizontal" })
+] }));
+d.displayName = "Table";
+function u({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "thead",
     {
@@ -27,7 +24,7 @@ function s({ className: t, ...e }) {
     }
   );
 }
-function d({ className: t, ...e }) {
+function f({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "tbody",
     {
@@ -37,7 +34,7 @@ function d({ className: t, ...e }) {
     }
   );
 }
-function c({ className: t, ...e }) {
+function p({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "tfoot",
     {
@@ -50,7 +47,7 @@ function c({ className: t, ...e }) {
     }
   );
 }
-function b({ className: t, ...e }) {
+function h({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "tr",
     {
@@ -63,12 +60,12 @@ function b({ className: t, ...e }) {
     }
   );
 }
-function i({ className: t, ...e }) {
+function x({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "th",
     {
       className: o(
-        "h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 whitespace-nowrap px-4 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         t
       ),
       "data-slot": "table-head",
@@ -76,12 +73,12 @@ function i({ className: t, ...e }) {
     }
   );
 }
-function m({ className: t, ...e }) {
+function N({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "td",
     {
       className: o(
-        "whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "whitespace-nowrap px-4 py-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         t
       ),
       "data-slot": "table-cell",
@@ -89,7 +86,7 @@ function m({ className: t, ...e }) {
     }
   );
 }
-function u({
+function w({
   className: t,
   ...e
 }) {
@@ -103,12 +100,12 @@ function u({
   );
 }
 export {
-  n as Table,
-  d as TableBody,
-  u as TableCaption,
-  m as TableCell,
-  c as TableFooter,
-  i as TableHead,
-  s as TableHeader,
-  b as TableRow
+  d as Table,
+  f as TableBody,
+  w as TableCaption,
+  N as TableCell,
+  p as TableFooter,
+  x as TableHead,
+  u as TableHeader,
+  h as TableRow
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcadeai/design-system",
   "private": false,
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",