@cakejp/design-system 0.17.1 → 0.20.0

package/dist/components/foundations/calendar.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as n } from "react/jsx-runtime";
 import * as m from "react";
 import { ChevronLeftIcon as y, ChevronRightIcon as x, ChevronDownIcon as h } from "lucide-react";

package/dist/components/foundations/checkbox-group.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import * as p from "react";
 import x from "iconsax-reactjs/dist/esm/TickSquare.js";

package/dist/components/foundations/checkbox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import * as p from "react";
 import y from "iconsax-reactjs/dist/esm/TickSquare.js";

package/dist/components/foundations/command.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as t, jsxs as d } from "react/jsx-runtime";
 import "react";
 import { Command as r } from "cmdk";

package/dist/components/foundations/context-menu.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import "react";
 import { CheckIcon as i, CircleIcon as u, ChevronRightIcon as c } from "lucide-react";

package/dist/components/foundations/data-table.js

@@ -1,25 +1,61 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import { cva as r } from "class-variance-authority";
-import "iconsax-reactjs/dist/esm/ArrowSwapVertical.js";
-import "iconsax-reactjs/dist/esm/ArrowUp.js";
-import "iconsax-reactjs/dist/esm/ArrowDown.js";
-import "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import "iconsax-reactjs/dist/esm/More.js";
-import "iconsax-reactjs/dist/esm/Add.js";
-import "iconsax-reactjs/dist/esm/ExportSquare.js";
-import { cn as o } from "../../lib/utils.js";
-function x({ className: t, ...a }) {
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import * as b from "react";
+import { cva as p } from "class-variance-authority";
+import x from "iconsax-reactjs/dist/esm/ArrowSwapVertical.js";
+import f from "iconsax-reactjs/dist/esm/ArrowUp.js";
+import v from "iconsax-reactjs/dist/esm/ArrowDown.js";
+import g from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import w from "iconsax-reactjs/dist/esm/More.js";
+import y from "iconsax-reactjs/dist/esm/Add.js";
+import N from "iconsax-reactjs/dist/esm/ExportSquare.js";
+import { cn as i } from "../../lib/utils.js";
+import { FOCUS_RING as T } from "../../lib/focus-ring.js";
+import { Checkbox as C } from "./checkbox.js";
+import { Button as E } from "./button.js";
+import { Avatar as S, AvatarImage as D, AvatarFallback as k } from "./avatar.js";
+import { Select as A, SelectTrigger as L, SelectValue as _, SelectContent as B, SelectItem as H } from "./select.js";
+import { DropdownMenu as z, DropdownMenuTrigger as M, DropdownMenuContent as P, DropdownMenuSeparator as I, DropdownMenuItem as R } from "./dropdown-menu.js";
+function te({ className: r, ...a }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "data-table",
-      className: o("relative w-full overflow-x-auto rounded-lg border border-[var(--Border-Low-Emphasis)]", t),
+      className: i("relative w-full overflow-x-auto rounded-lg border border-[var(--Border-Low-Emphasis)]", r),
       ...a
     }
   );
 }
-r(
+function le({ className: r, ...a }) {
+  return /* @__PURE__ */ e(
+    "table",
+    {
+      "data-slot": "data-table-table",
+      className: i("w-full caption-bottom typo-body-md border-collapse", r),
+      ...a
+    }
+  );
+}
+function ne({ className: r, ...a }) {
+  return /* @__PURE__ */ e(
+    "thead",
+    {
+      "data-slot": "data-table-header",
+      className: i("bg-[var(--Surface-Secondary)] [&_tr]:border-b [&_tr]:border-[var(--Border-Low-Emphasis)]", r),
+      ...a
+    }
+  );
+}
+function ie({ className: r, ...a }) {
+  return /* @__PURE__ */ e(
+    "tbody",
+    {
+      "data-slot": "data-table-body",
+      className: i("[&_tr:last-child]:border-b-0", r),
+      ...a
+    }
+  );
+}
+const V = p(
   "group/row border-b border-[var(--Border-Low-Emphasis)] transition-colors",
   {
     variants: {
@@ -33,7 +69,80 @@ r(
     }
   }
 );
-r(
+function oe({
+  className: r,
+  state: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    "tr",
+    {
+      "data-slot": "data-table-row",
+      className: i(V({ state: a }), r),
+      ...t
+    }
+  );
+}
+function se({
+  className: r,
+  sortable: a,
+  sortDirection: t,
+  onSort: n,
+  width: l,
+  srLabel: o,
+  children: c,
+  ...d
+}) {
+  const h = t === "asc" ? f : t === "desc" ? v : x, u = t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
+  return /* @__PURE__ */ s(
+    "th",
+    {
+      "data-slot": "data-table-head",
+      className: i(
+        "h-16 px-4 text-left align-middle typo-label-sm whitespace-nowrap text-[var(--Text-Medium-Emphasis)]",
+        "[&:has([role=checkbox])]:w-12 [&:has([role=checkbox])]:pr-0",
+        a && "hover:bg-[var(--Surface-Tertiary)]",
+        l === "max" && "min-w-[320px] max-w-[360px]",
+        l === "hug" && "min-w-0 w-0",
+        r
+      ),
+      "aria-sort": a ? u : void 0,
+      ...d,
+      children: [
+        a ? (
+          // th の onClick はマウスにしか届かない（キーボードで到達できず role も無い）。
+          // 本物の <button> にして Tab / Enter / Space で並び替えられるようにする。
+          /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              onClick: n,
+              className: i(
+                "inline-flex items-center gap-1 rounded-sm outline-none",
+                "cursor-pointer select-none",
+                T,
+                t && "typo-label-sm font-bold text-[var(--Text-High-Emphasis)]"
+              ),
+              children: [
+                c,
+                /* @__PURE__ */ e(
+                  h,
+                  {
+                    size: 14,
+                    "aria-hidden": "true",
+                    className: i(t ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]")
+                  }
+                )
+              ]
+            }
+          )
+        ) : c,
+        o && /* @__PURE__ */ e("span", { className: "sr-only", children: o })
+      ]
+    }
+  );
+}
+const j = p(
   "px-4 py-4 align-middle whitespace-nowrap typo-body-md text-[var(--Text-High-Emphasis)] [&:has([role=checkbox])]:w-12 [&:has([role=checkbox])]:pr-0",
   {
     variants: {
@@ -54,6 +163,370 @@ r(
     }
   }
 );
+function m({
+  className: r,
+  width: a,
+  align: t,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    "td",
+    {
+      "data-slot": "data-table-cell",
+      className: i(j({ width: a, align: t }), r),
+      ...n
+    }
+  );
+}
+function ce({
+  className: r,
+  src: a,
+  fallback: t,
+  title: n,
+  caption: l,
+  ...o
+}) {
+  return /* @__PURE__ */ e(m, { className: i("min-w-[200px]", r), ...o, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ s(S, { children: [
+      a && /* @__PURE__ */ e(D, { src: a, alt: n }),
+      /* @__PURE__ */ e(k, { children: t || n.charAt(0) })
+    ] }),
+    /* @__PURE__ */ s("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ e("p", { className: "typo-label-sm text-[var(--Text-High-Emphasis)] truncate", children: n }),
+      l && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)] truncate", children: l })
+    ] })
+  ] }) });
+}
+function de({
+  className: r,
+  checked: a,
+  onCheckedChange: t,
+  indeterminate: n,
+  "aria-label": l,
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "td",
+    {
+      "data-slot": "data-table-checkbox-cell",
+      className: i("w-16 px-4 py-4 align-middle cursor-pointer", r),
+      onClick: (c) => {
+        c.stopPropagation(), t?.(!(!n && a));
+      },
+      ...o,
+      children: /* @__PURE__ */ e(
+        C,
+        {
+          checked: n ? "indeterminate" : a,
+          onCheckedChange: (c) => t?.(c === !0),
+          "aria-label": l || "行を選択",
+          className: "pointer-events-none"
+        }
+      )
+    }
+  );
+}
+function me({
+  className: r,
+  actions: a,
+  onClick: t,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    m,
+    {
+      className: i("w-10", r),
+      onClick: (l) => {
+        l.stopPropagation(), t?.(l);
+      },
+      ...n,
+      children: /* @__PURE__ */ s(z, { children: [
+        /* @__PURE__ */ e(M, { asChild: !0, children: /* @__PURE__ */ e(E, { variant: "ghost", size: "sm", className: "size-8 p-0", "aria-label": "アクションメニュー", children: /* @__PURE__ */ e(w, { size: 16 }) }) }),
+        /* @__PURE__ */ e(P, { align: "end", children: a.map((l, o) => /* @__PURE__ */ s(b.Fragment, { children: [
+          l.separator && /* @__PURE__ */ e(I, {}),
+          /* @__PURE__ */ e(
+            R,
+            {
+              onClick: l.onClick,
+              variant: l.destructive ? "destructive" : "default",
+              children: l.label
+            }
+          )
+        ] }, o)) })
+      ] })
+    }
+  );
+}
+function pe({
+  className: r,
+  selectedCount: a,
+  children: t,
+  ...n
+}) {
+  return a === 0 ? null : /* @__PURE__ */ s(
+    "div",
+    {
+      "data-slot": "data-table-bulk-actions",
+      className: i(
+        "flex items-center gap-3 px-4 py-3 bg-[var(--Surface-Accent-Primary-Light)] border-b border-[var(--Border-Low-Emphasis)]",
+        r
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ s("span", { className: "typo-label-sm text-[var(--Text-High-Emphasis)]", children: [
+          a,
+          "件を選択中"
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: t })
+      ]
+    }
+  );
+}
+function he({
+  className: r,
+  title: a,
+  colSpan: t,
+  expanded: n,
+  onToggle: l,
+  actions: o,
+  ...c
+}) {
+  return /* @__PURE__ */ e(
+    "tr",
+    {
+      "data-slot": "data-table-section-row",
+      className: i("border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Secondary)]", r),
+      ...c,
+      children: /* @__PURE__ */ e("td", { colSpan: t, className: "px-4 py-3", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: "flex items-center gap-1.5 typo-label-md text-[var(--Text-High-Emphasis)] cursor-pointer",
+            onClick: l,
+            "aria-expanded": n,
+            children: [
+              /* @__PURE__ */ e(g, { size: 16, className: i("transition-transform", n ? "" : "-rotate-90") }),
+              a
+            ]
+          }
+        ),
+        o && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: o })
+      ] }) })
+    }
+  );
+}
+function ue({
+  className: r,
+  colSpan: a,
+  label: t = "新しく追加",
+  onClick: n,
+  ...l
+}) {
+  return /* @__PURE__ */ e(
+    "tr",
+    {
+      "data-slot": "data-table-add-row",
+      className: i("border-b border-[var(--Border-Low-Emphasis)] hover:bg-[var(--Surface-Tertiary)] cursor-pointer transition-colors", r),
+      onClick: n,
+      ...l,
+      children: /* @__PURE__ */ e("td", { colSpan: a, className: "px-4 py-4", children: /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-2 typo-body-md text-[var(--Text-Medium-Emphasis)]", children: [
+        /* @__PURE__ */ e(y, { size: 16 }),
+        t
+      ] }) })
+    }
+  );
+}
+function be({
+  className: r,
+  colSpan: a,
+  message: t = "対象のデータはありません",
+  icon: n,
+  description: l,
+  action: o,
+  ...c
+}) {
+  return /* @__PURE__ */ e(
+    "tr",
+    {
+      "data-slot": "data-table-empty-state",
+      className: i("", r),
+      ...c,
+      children: /* @__PURE__ */ e("td", { colSpan: a, children: n ? /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center px-4 py-16", children: [
+        /* @__PURE__ */ e("div", { className: "text-[var(--Border-Medium-Emphasis)]", children: n }),
+        /* @__PURE__ */ e("p", { className: "mt-4 typo-heading-md text-[var(--Text-High-Emphasis)]", children: t }),
+        l && /* @__PURE__ */ e("div", { className: "mt-1 text-center typo-body-md text-[var(--Text-Medium-Emphasis)]", children: l }),
+        o && /* @__PURE__ */ e("div", { className: "mt-6", children: o })
+      ] }) : /* @__PURE__ */ e("p", { className: "py-12 text-center typo-body-md text-[var(--Text-Low-Emphasis)]", children: t }) })
+    }
+  );
+}
+function xe({
+  className: r,
+  src: a,
+  alt: t,
+  title: n,
+  caption: l,
+  ...o
+}) {
+  return /* @__PURE__ */ e(m, { className: i("min-w-[200px]", r), ...o, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e("div", { className: "size-10 rounded-lg bg-[var(--Surface-Tertiary)] overflow-hidden shrink-0", children: a && /* @__PURE__ */ e(
+      "img",
+      {
+        src: a,
+        alt: t || n,
+        className: "size-full object-cover",
+        loading: "lazy"
+      }
+    ) }),
+    /* @__PURE__ */ s("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ e("p", { className: "typo-body-md text-[var(--Text-High-Emphasis)] line-clamp-2", children: n }),
+      l && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)] truncate", children: l })
+    ] })
+  ] }) });
+}
+function fe({
+  className: r,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    "td",
+    {
+      "data-slot": "data-table-drag-handle-cell",
+      className: i("w-10 px-2 py-4 align-middle cursor-grab active:cursor-grabbing", r),
+      ...a,
+      children: /* @__PURE__ */ s(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "text-[var(--Text-Low-Emphasis)]",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ e("circle", { cx: "6", cy: "3", r: "1.5", fill: "currentColor" }),
+            /* @__PURE__ */ e("circle", { cx: "10", cy: "3", r: "1.5", fill: "currentColor" }),
+            /* @__PURE__ */ e("circle", { cx: "6", cy: "8", r: "1.5", fill: "currentColor" }),
+            /* @__PURE__ */ e("circle", { cx: "10", cy: "8", r: "1.5", fill: "currentColor" }),
+            /* @__PURE__ */ e("circle", { cx: "6", cy: "13", r: "1.5", fill: "currentColor" }),
+            /* @__PURE__ */ e("circle", { cx: "10", cy: "13", r: "1.5", fill: "currentColor" })
+          ]
+        }
+      )
+    }
+  );
+}
+function ve({
+  className: r,
+  href: a = "#",
+  external: t,
+  children: n,
+  ...l
+}) {
+  return /* @__PURE__ */ e(m, { className: r, ...l, children: /* @__PURE__ */ s(
+    "a",
+    {
+      href: a,
+      className: "inline-flex items-center gap-1 typo-body-md text-[var(--Text-Accent-Primary)] hover:underline",
+      ...t ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: [
+        n,
+        t && /* @__PURE__ */ e(N, { size: 14 })
+      ]
+    }
+  ) });
+}
+function ge({
+  className: r,
+  value: a,
+  onChange: t,
+  placeholder: n,
+  type: l = "text",
+  name: o,
+  ...c
+}) {
+  return /* @__PURE__ */ e(
+    "td",
+    {
+      "data-slot": "data-table-input-cell",
+      className: i(
+        "px-4 py-4 align-middle whitespace-nowrap",
+        "hover:shadow-[inset_0_0_0_2px_var(--Border-Accent-Primary)] hover:rounded",
+        "has-[input:focus]:shadow-[inset_0_0_0_2px_var(--Border-Accent-Primary)] has-[input:focus]:rounded",
+        r
+      ),
+      ...c,
+      children: /* @__PURE__ */ e(
+        "input",
+        {
+          type: l,
+          name: o,
+          value: a,
+          onChange: (d) => t?.(d.target.value),
+          placeholder: n,
+          className: "w-full bg-transparent outline-none typo-body-md text-[var(--Text-High-Emphasis)] placeholder:text-[var(--Text-Low-Emphasis)]"
+        }
+      )
+    }
+  );
+}
+function we({
+  className: r,
+  value: a,
+  onValueChange: t,
+  options: n,
+  placeholder: l = "選択してください",
+  "aria-label": o,
+  ...c
+}) {
+  return /* @__PURE__ */ e(
+    m,
+    {
+      className: i("hover:bg-[var(--Surface-Tertiary)] cursor-pointer p-0", r),
+      ...c,
+      children: /* @__PURE__ */ s(A, { value: a, onValueChange: t, children: [
+        /* @__PURE__ */ e(
+          L,
+          {
+            size: "sm",
+            "aria-label": o ?? l,
+            className: "w-full min-w-[160px] border-0 bg-transparent rounded-none px-4 py-4 h-auto hover:bg-transparent focus-visible:ring-0 focus-visible:border-0",
+            children: /* @__PURE__ */ e(_, { placeholder: l })
+          }
+        ),
+        /* @__PURE__ */ e(B, { children: n.map((d) => /* @__PURE__ */ e(H, { value: d.value, children: d.label }, d.value)) })
+      ] })
+    }
+  );
+}
+function ye({
+  className: r,
+  children: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(m, { align: "right", className: r, ...t, children: a });
+}
 export {
-  x as DataTable
+  te as DataTable,
+  me as DataTableActionCell,
+  ue as DataTableAddRow,
+  ce as DataTableAvatarCell,
+  ie as DataTableBody,
+  pe as DataTableBulkActions,
+  m as DataTableCell,
+  de as DataTableCheckboxCell,
+  fe as DataTableDragHandleCell,
+  be as DataTableEmptyState,
+  se as DataTableHead,
+  ne as DataTableHeader,
+  xe as DataTableImageCell,
+  ge as DataTableInputCell,
+  ve as DataTableLinkCell,
+  ye as DataTableNumberCell,
+  oe as DataTableRow,
+  he as DataTableSectionRow,
+  we as DataTableSelectCell,
+  le as DataTableTable
 };

package/dist/components/foundations/dialog.js

@@ -1,4 +1,4 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import "react";
 import { XIcon as d } from "lucide-react";
 import { Dialog as o } from "radix-ui";
@@ -43,24 +43,24 @@ function u({
 function N({
   className: a,
   children: e,
-  showCloseButton: l = !0,
+  showCloseButton: s = !0,
   ...r
 }) {
-  return /* @__PURE__ */ s(g, { "data-slot": "dialog-portal", children: [
+  return /* @__PURE__ */ l(g, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ t(u, {}),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ l(
       o.Content,
       {
         "data-slot": "dialog-content",
         onOpenAutoFocus: (n) => n.preventDefault(),
         className: i(
-          "fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-[calc(100%_-_32px)] max-w-[calc(100%_-_32px)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-background dark:bg-[var(--Primitive-Gray-800)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-[calc(100%_-_32px)] max-w-[calc(100%_-_32px)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-[var(--Surface-Elevated)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           a
         ),
         ...r,
         children: [
           e,
-          l && /* @__PURE__ */ s(
+          s && /* @__PURE__ */ l(
             o.Close,
             {
               "data-slot": "dialog-close",
@@ -89,10 +89,10 @@ function T({ className: a, ...e }) {
 function C({
   className: a,
   showCloseButton: e = !1,
-  children: l,
+  children: s,
   ...r
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -102,13 +102,13 @@ function C({
       ),
       ...r,
       children: [
-        l,
+        s,
         e && /* @__PURE__ */ t(o.Close, { asChild: !0, children: /* @__PURE__ */ t(c, { variant: "tertiary", children: "Close" }) })
       ]
     }
   );
 }
-function w({
+function E({
   className: a,
   ...e
 }) {
@@ -121,7 +121,7 @@ function w({
     }
   );
 }
-function z({
+function w({
   className: a,
   ...e
 }) {
@@ -138,11 +138,11 @@ export {
   D as Dialog,
   b as DialogClose,
   N as DialogContent,
-  z as DialogDescription,
+  w as DialogDescription,
   C as DialogFooter,
   T as DialogHeader,
   u as DialogOverlay,
   g as DialogPortal,
-  w as DialogTitle,
+  E as DialogTitle,
   y as DialogTrigger
 };

package/dist/components/foundations/drawer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
 import "react";
 import { Drawer as e } from "vaul";
@@ -50,7 +51,7 @@ function f({
       {
         "data-slot": "drawer-content",
         className: d(
-          "group/drawer-content fixed z-[var(--Z-Modal)] flex h-auto flex-col border-[var(--Border-Medium-Emphasis)] bg-background",
+          "group/drawer-content fixed z-[var(--Z-Modal)] flex h-auto flex-col border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)]",
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
@@ -89,7 +90,7 @@ function x({ className: r, ...a }) {
     }
   );
 }
-function b({
+function h({
   className: r,
   ...a
 }) {
@@ -102,7 +103,7 @@ function b({
     }
   );
 }
-function h({
+function b({
   className: r,
   ...a
 }) {
@@ -119,11 +120,11 @@ export {
   m as Drawer,
   p as DrawerClose,
   f as DrawerContent,
-  h as DrawerDescription,
+  b as DrawerDescription,
   x as DrawerFooter,
   g as DrawerHeader,
   l as DrawerOverlay,
   n as DrawerPortal,
-  b as DrawerTitle,
+  h as DrawerTitle,
   v as DrawerTrigger
 };

package/dist/components/foundations/file-input.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as b, jsx as n } from "react/jsx-runtime";
 import * as g from "react";
 import { Paperclip as H, X as _ } from "lucide-react";