@rojaostudio/ds 1.0.1 → 1.0.2

package/dist/components/drawer.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId } from "react";
 import { X } from "lucide-react";
 import { createPortal } from "react-dom";
@@ -45,35 +46,46 @@ function Drawer({
   }, [open, onClose]);
   if (!open) return null;
   return createPortal(
-    /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-50 flex" }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 [background:var(--overlay-scrim)]", onClick: closeOnBackdrop ? onClose : void 0, "aria-hidden": "true" }), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref: panelRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": title ? titleId : void 0,
-        tabIndex: -1,
-        className: [
-          "relative z-10 flex flex-col bg-surface-default shadow-xl h-full max-w-full",
-          "focus:outline-none",
-          widthClass,
-          side === "right" ? "ml-auto" : "mr-auto",
-          className
-        ].join(" ")
-      },
-      (title || !hideClose) && /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4 px-6 py-4 border-b border-stroke-default shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, title && /* @__PURE__ */ React.createElement("h2", { id: titleId, className: "text-body font-semibold text-fg-primary" }, title), subtitle && /* @__PURE__ */ React.createElement("p", { className: "text-label text-fg-muted mt-0.5" }, subtitle)), !hideClose && /* @__PURE__ */ React.createElement(
-        "button",
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [background:var(--overlay-scrim)]", onClick: closeOnBackdrop ? onClose : void 0, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          type: "button",
-          onClick: onClose,
-          className: "shrink-0 text-fg-muted hover:text-fg-primary transition-colors rounded focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:outline-none p-0.5",
-          "aria-label": "Fechar"
-        },
-        /* @__PURE__ */ React.createElement(X, { size: 20 })
-      )),
-      /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto px-6 py-4" }, children),
-      footer && /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-stroke-default shrink-0" }, footer)
-    )),
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? titleId : void 0,
+          tabIndex: -1,
+          className: [
+            "relative z-10 flex flex-col bg-surface-default shadow-xl h-full max-w-full",
+            "focus:outline-none",
+            widthClass,
+            side === "right" ? "ml-auto" : "mr-auto",
+            className
+          ].join(" "),
+          children: [
+            (title || !hideClose) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-4 border-b border-stroke-default shrink-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-body font-semibold text-fg-primary", children: title }),
+                subtitle && /* @__PURE__ */ jsx("p", { className: "text-label text-fg-muted mt-0.5", children: subtitle })
+              ] }),
+              !hideClose && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: "shrink-0 text-fg-muted hover:text-fg-primary transition-colors rounded focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:outline-none p-0.5",
+                  "aria-label": "Fechar",
+                  children: /* @__PURE__ */ jsx(X, { size: 20 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children }),
+            footer && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-stroke-default shrink-0", children: footer })
+          ]
+        }
+      )
+    ] }),
     container != null ? container : document.body
   );
 }

package/dist/components/dropzone.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 function Dropzone({ onFiles, accept, multiple = false, disabled = false, className = "", children }) {
   const inputRef = useRef(null);
@@ -11,7 +12,7 @@ function Dropzone({ onFiles, accept, multiple = false, disabled = false, classNa
     if (disabled) return;
     if ((_a = e.dataTransfer.files) == null ? void 0 : _a.length) onFiles(e.dataTransfer.files);
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "button",
@@ -39,25 +40,27 @@ function Dropzone({ onFiles, accept, multiple = false, disabled = false, classNa
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
         dragging ? "border-stroke-focus bg-surface-raised" : "border-stroke-control hover:border-stroke-strong hover:bg-surface-page",
         className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "file",
-        accept,
-        multiple,
-        disabled,
-        className: "hidden",
-        onChange: (e) => {
-          var _a;
-          if ((_a = e.target.files) == null ? void 0 : _a.length) onFiles(e.target.files);
-          e.target.value = "";
-        }
-      }
-    ),
-    children
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            disabled,
+            className: "hidden",
+            onChange: (e) => {
+              var _a;
+              if ((_a = e.target.files) == null ? void 0 : _a.length) onFiles(e.target.files);
+              e.target.value = "";
+            }
+          }
+        ),
+        children
+      ]
+    }
   );
 }
 export {

package/dist/components/empty-state.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   Package,
   Clock,
@@ -54,35 +55,37 @@ function EmptyState({
   className = ""
 }) {
   const Icon = ICON_MAP[icon];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: [
         "flex flex-col items-center justify-center text-center px-6",
         size === "full" ? "min-h-[320px] flex-1" : "min-h-[200px] py-10",
         className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "mb-5 text-stroke-strong" }, /* @__PURE__ */ React.createElement(Icon, { size: 72, strokeWidth: 1.25 })),
-    /* @__PURE__ */ React.createElement("p", { className: "text-body font-semibold text-fg-primary mb-2" }, title),
-    description && /* @__PURE__ */ React.createElement("p", { className: "text-label text-fg-muted max-w-sm leading-relaxed mb-4" }, description),
-    cta && (cta.href ? /* @__PURE__ */ React.createElement(
-      "a",
-      {
-        href: cta.href,
-        className: "mt-3 inline-block px-4 py-2 text-label font-medium rounded-(--radius-card) transition-colors text-brand-on-primary bg-brand-primary hover:bg-brand-hover"
-      },
-      cta.label
-    ) : /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: cta.onClick,
-        className: "mt-3 inline-block px-4 py-2 text-label font-medium rounded-(--radius-card) transition-colors text-brand-on-primary bg-brand-primary hover:bg-brand-hover"
-      },
-      cta.label
-    )),
-    children
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-5 text-stroke-strong", children: /* @__PURE__ */ jsx(Icon, { size: 72, strokeWidth: 1.25 }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-body font-semibold text-fg-primary mb-2", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-label text-fg-muted max-w-sm leading-relaxed mb-4", children: description }),
+        cta && (cta.href ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: cta.href,
+            className: "mt-3 inline-block px-4 py-2 text-label font-medium rounded-(--radius-card) transition-colors text-brand-on-primary bg-brand-primary hover:bg-brand-hover",
+            children: cta.label
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: cta.onClick,
+            className: "mt-3 inline-block px-4 py-2 text-label font-medium rounded-(--radius-card) transition-colors text-brand-on-primary bg-brand-primary hover:bg-brand-hover",
+            children: cta.label
+          }
+        )),
+        children
+      ]
+    }
   );
 }
 export {

package/dist/components/fab.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
   useCallback,
@@ -30,7 +31,7 @@ function FABProvider({ children }) {
   const [fabHidden, setFabHidden] = useState(false);
   const setFAB = useCallback((cfg) => setConfig(cfg), []);
   const clearFAB = useCallback(() => setConfig(null), []);
-  return /* @__PURE__ */ React.createElement(FABContext.Provider, { value: { config, setFAB, clearFAB, bottomOffset, setBottomOffset, fabHidden, setFabHidden } }, children);
+  return /* @__PURE__ */ jsx(FABContext.Provider, { value: { config, setFAB, clearFAB, bottomOffset, setBottomOffset, fabHidden, setFabHidden }, children });
 }
 function useFAB() {
   return useContext(FABContext);
@@ -59,38 +60,49 @@ function FABRoot() {
   ].join(" ");
   const bottomStyle = { bottom: `${24 + bottomOffset}px` };
   if ((config == null ? void 0 : config.variant) === "save") {
-    return /* @__PURE__ */ React.createElement("div", { className: wrapCls, style: bottomStyle }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 rounded-(--radius-control) px-4 py-3 [background:var(--fab-save-bg)] [box-shadow:var(--fab-save-shadow)]" }, config.secondary && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: config.secondary.onClick,
-        disabled: config.loading,
-        className: "rounded-(--radius-control) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 cursor-pointer [border-color:var(--fab-save-discard-border)] [color:var(--fab-save-discard-text)] hover:[border-color:var(--fab-save-discard-border-hover)] hover:[color:var(--fab-save-discard-text-hover)]"
-      },
-      config.secondary.label
-    ), /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: config.onClick,
-        disabled: config.disabled || config.loading,
-        className: "rounded-(--radius-control) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 cursor-pointer flex items-center gap-2 [background:var(--fab-save-primary-bg)] [color:var(--fab-save-primary-text)] hover:[background:var(--fab-save-primary-bg-hover)]"
-      },
-      config.loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 animate-spin" }), "Salvando...") : config.label
-    )));
+    return /* @__PURE__ */ jsx("div", { className: wrapCls, style: bottomStyle, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-(--radius-control) px-4 py-3 [background:var(--fab-save-bg)] [box-shadow:var(--fab-save-shadow)]", children: [
+      config.secondary && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: config.secondary.onClick,
+          disabled: config.loading,
+          className: "rounded-(--radius-control) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 cursor-pointer [border-color:var(--fab-save-discard-border)] [color:var(--fab-save-discard-text)] hover:[border-color:var(--fab-save-discard-border-hover)] hover:[color:var(--fab-save-discard-text-hover)]",
+          children: config.secondary.label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: config.onClick,
+          disabled: config.disabled || config.loading,
+          className: "rounded-(--radius-control) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 cursor-pointer flex items-center gap-2 [background:var(--fab-save-primary-bg)] [color:var(--fab-save-primary-text)] hover:[background:var(--fab-save-primary-bg-hover)]",
+          children: config.loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
+            "Salvando..."
+          ] }) : config.label
+        }
+      )
+    ] }) });
   }
   const btnCls = "flex items-center gap-2 h-12 pl-4 pr-5 rounded-(--radius-control) text-label font-semibold shadow-lg transition-colors cursor-pointer [background:var(--fab-cta-bg)] [color:var(--fab-cta-text)] hover:[background:var(--fab-cta-bg-hover)]";
-  return /* @__PURE__ */ React.createElement("div", { className: wrapCls, style: bottomStyle }, (config == null ? void 0 : config.href) ? /* @__PURE__ */ React.createElement(Link, { href: config.href, className: btnCls }, /* @__PURE__ */ React.createElement(Plus, { size: 16, strokeWidth: 2.5 }), config == null ? void 0 : config.label) : /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: wrapCls, style: bottomStyle, children: (config == null ? void 0 : config.href) ? /* @__PURE__ */ jsxs(Link, { href: config.href, className: btnCls, children: [
+    /* @__PURE__ */ jsx(Plus, { size: 16, strokeWidth: 2.5 }),
+    config == null ? void 0 : config.label
+  ] }) : /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       onClick: config == null ? void 0 : config.onClick,
       disabled: config == null ? void 0 : config.disabled,
-      className: btnCls + " disabled:opacity-50"
-    },
-    /* @__PURE__ */ React.createElement(Plus, { size: 16, strokeWidth: 2.5 }),
-    config == null ? void 0 : config.label
-  ));
+      className: btnCls + " disabled:opacity-50",
+      children: [
+        /* @__PURE__ */ jsx(Plus, { size: 16, strokeWidth: 2.5 }),
+        config == null ? void 0 : config.label
+      ]
+    }
+  ) });
 }
 export {
   FABProvider,

package/dist/components/filter-chip.js

@@ -1,64 +1,68 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 const BASE = "h-control-sm inline-flex items-center text-caption font-medium border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus px-[var(--filter-chip-padding-x)] [border-radius:var(--filter-chip-radius)]";
 const ACTIVE = "[background:var(--filter-chip-color-surface-active)] [border-color:var(--filter-chip-color-stroke-active)] [color:var(--filter-chip-color-text-active)]";
 const INACTIVE = "[background:var(--filter-chip-color-surface-inactive)] [border-color:var(--filter-chip-color-stroke-inactive)] [color:var(--filter-chip-color-text-inactive)] hover:[background:var(--filter-chip-color-surface-hover)] hover:[border-color:var(--filter-chip-color-stroke-hover)] hover:[color:var(--filter-chip-color-text-hover)]";
 const DISABLED = "[background:var(--filter-chip-color-surface-disabled)] [border-color:var(--filter-chip-color-stroke-disabled)] [color:var(--filter-chip-color-text-disabled)] opacity-50 pointer-events-none cursor-not-allowed";
 function FilterChipBody({ label, count }) {
-  if (count === void 0) return /* @__PURE__ */ React.createElement(React.Fragment, null, label);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, label, /* @__PURE__ */ React.createElement("span", { className: "ml-1 opacity-60 tabular-nums" }, count));
+  if (count === void 0) return /* @__PURE__ */ jsx(Fragment, { children: label });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    /* @__PURE__ */ jsx("span", { className: "ml-1 opacity-60 tabular-nums", children: count })
+  ] });
 }
 function FilterChip({ label, active, count, disabled = false, href, onClick, className = "" }) {
   const cls = [BASE, active ? ACTIVE : INACTIVE, disabled ? DISABLED : "", className].filter(Boolean).join(" ");
   if (href) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Link,
       {
         href,
         "aria-current": active ? "true" : void 0,
         "aria-disabled": disabled || void 0,
         tabIndex: disabled ? -1 : void 0,
-        className: cls
-      },
-      /* @__PURE__ */ React.createElement(FilterChipBody, { label, count })
+        className: cls,
+        children: /* @__PURE__ */ jsx(FilterChipBody, { label, count })
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       onClick,
       "aria-pressed": active,
       disabled,
-      className: cls
-    },
-    /* @__PURE__ */ React.createElement(FilterChipBody, { label, count })
+      className: cls,
+      children: /* @__PURE__ */ jsx(FilterChipBody, { label, count })
+    }
   );
 }
 function FilterChipGroup({ items, active, label, className = "" }) {
-  return /* @__PURE__ */ React.createElement("div", { role: "group", "aria-label": label, className: ["flex flex-wrap [gap:var(--filter-chip-group-gap)]", className].filter(Boolean).join(" ") }, items.map((item) => {
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: ["flex flex-wrap [gap:var(--filter-chip-group-gap)]", className].filter(Boolean).join(" "), children: items.map((item) => {
     var _a;
     if (process.env.NODE_ENV === "development" && !item.href && !item.onClick) {
       console.warn(`[FilterChipGroup] item "${item.label}" has neither href nor onClick \u2014 click will have no effect`);
     }
     const isActive = active === item.value || !active && item.value === void 0;
     if (item.href) {
-      return /* @__PURE__ */ React.createElement(FilterChip, { key: item.label, label: item.label, active: isActive, count: item.count, disabled: item.disabled, href: item.href });
+      return /* @__PURE__ */ jsx(FilterChip, { label: item.label, active: isActive, count: item.count, disabled: item.disabled, href: item.href }, item.label);
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       FilterChip,
       {
-        key: item.label,
         label: item.label,
         active: isActive,
         count: item.count,
         disabled: item.disabled,
         onClick: (_a = item.onClick) != null ? _a : (() => {
         })
-      }
+      },
+      item.label
     );
-  }));
+  }) });
 }
 export {
   FilterChip,

package/dist/components/floating-stepper.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function FloatingStepper({
   steps,
   current,
@@ -9,43 +10,52 @@ function FloatingStepper({
   className = ""
 }) {
   const currentIdx = steps.findIndex((s) => s.key === current);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: [
         "flex items-center gap-0.5 rounded-full bg-surface-shell shadow-2xl px-1.5 py-1.5",
         className
-      ].filter(Boolean).join(" ")
-    },
-    steps.map((s, idx) => {
-      const isCurrent = idx === currentIdx;
-      const canGo = canNavigate ? canNavigate(s.key, idx, currentIdx) : idx < currentIdx;
-      return /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          key: s.key,
-          type: "button",
-          disabled: !canGo && !isCurrent,
-          "aria-current": isCurrent ? "step" : void 0,
-          onClick: () => {
-            if (canGo) onNavigate == null ? void 0 : onNavigate(s.key);
-          },
-          className: `flex items-center gap-1.5 rounded-full px-3 py-1.5 text-caption font-medium whitespace-nowrap transition-colors ${isCurrent ? "bg-(--surface-default) text-(--text-primary)" : canGo ? "text-on-shell-muted hover:text-on-shell" : "text-on-shell-subtle cursor-default"}`
-        },
-        /* @__PURE__ */ React.createElement("span", { className: `w-1.5 h-1.5 rounded-full shrink-0 ${isCurrent ? "bg-(--text-primary)" : "bg-on-shell-subtle"}` }),
-        s.label
-      );
-    }),
-    action && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "w-px h-4 bg-on-shell-line mx-1", "aria-hidden": true }), /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: action.onClick,
-        className: "flex items-center gap-1.5 rounded-full px-3 py-1.5 text-caption font-medium text-on-shell-muted hover:text-on-shell transition-colors whitespace-nowrap [&_svg]:w-3 [&_svg]:h-3 [&_svg]:shrink-0"
-      },
-      action.icon,
-      action.label
-    ))
+      ].filter(Boolean).join(" "),
+      children: [
+        steps.map((s, idx) => {
+          const isCurrent = idx === currentIdx;
+          const canGo = canNavigate ? canNavigate(s.key, idx, currentIdx) : idx < currentIdx;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: !canGo && !isCurrent,
+              "aria-current": isCurrent ? "step" : void 0,
+              onClick: () => {
+                if (canGo) onNavigate == null ? void 0 : onNavigate(s.key);
+              },
+              className: `flex items-center gap-1.5 rounded-full px-3 py-1.5 text-caption font-medium whitespace-nowrap transition-colors ${isCurrent ? "bg-(--surface-default) text-(--text-primary)" : canGo ? "text-on-shell-muted hover:text-on-shell" : "text-on-shell-subtle cursor-default"}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: `w-1.5 h-1.5 rounded-full shrink-0 ${isCurrent ? "bg-(--text-primary)" : "bg-on-shell-subtle"}` }),
+                s.label
+              ]
+            },
+            s.key
+          );
+        }),
+        action && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "w-px h-4 bg-on-shell-line mx-1", "aria-hidden": true }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: action.onClick,
+              className: "flex items-center gap-1.5 rounded-full px-3 py-1.5 text-caption font-medium text-on-shell-muted hover:text-on-shell transition-colors whitespace-nowrap [&_svg]:w-3 [&_svg]:h-3 [&_svg]:shrink-0",
+              children: [
+                action.icon,
+                action.label
+              ]
+            }
+          )
+        ] })
+      ]
+    }
   );
 }
 export {

package/dist/components/form-card-header.js

@@ -1,7 +1,15 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 function FormCardHeader({ icon, title, subtitle, action }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 pb-3" }, icon && /* @__PURE__ */ React.createElement("span", { className: "grid place-items-center shrink-0 size-9 rounded-(--radius-card) bg-brand-primary text-brand-on-primary" }, icon), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("p", { className: "text-label font-semibold text-(--text-primary)" }, title), subtitle && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-(--text-muted) mt-1 leading-snug" }, subtitle)), action && /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, action));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pb-3", children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "grid place-items-center shrink-0 size-9 rounded-(--radius-card) bg-brand-primary text-brand-on-primary", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-label font-semibold text-(--text-primary)", children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "text-caption text-(--text-muted) mt-1 leading-snug", children: subtitle })
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+  ] });
 }
 export {
   FormCardHeader

package/dist/components/icon-button.js

@@ -1,7 +1,9 @@
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const SIZE_CLASSES = {
   sm: "size-control-sm [&_svg]:size-4",
@@ -46,9 +48,9 @@ const IconButton = forwardRef(function IconButton2(_a, ref) {
     "disabled",
     "className"
   ]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "button",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       ref,
       type: "button",
       disabled: disabled || loading,
@@ -60,20 +62,24 @@ const IconButton = forwardRef(function IconButton2(_a, ref) {
         COLOR_CLASSES[variant][color],
         className
       ].join(" ")
-    }, rest),
-    loading ? /* @__PURE__ */ React.createElement(Spinner, null) : icon
+    }, rest), {
+      children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : icon
+    })
   );
 });
 function Spinner() {
-  return /* @__PURE__ */ React.createElement("svg", { className: "animate-spin", viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.25" }), /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      d: "M22 12a10 10 0 0 1-10 10",
-      stroke: "currentColor",
-      strokeWidth: "2.5",
-      strokeLinecap: "round"
-    }
-  ));
+  return /* @__PURE__ */ jsxs("svg", { className: "animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.25" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M22 12a10 10 0 0 1-10 10",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
 }
 export {
   IconButton