@rojaostudio/ds 1.0.0 → 1.0.2

package/dist/components/saving-bar-context.js

@@ -3,6 +3,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
   useCallback,
@@ -39,7 +40,7 @@ function SavingBarProvider({ children }) {
     });
   }, []);
   const value = useMemo(() => ({ bars, register, unregister }), [bars, register, unregister]);
-  return /* @__PURE__ */ React.createElement(SavingBarContext.Provider, { value }, children);
+  return /* @__PURE__ */ jsx(SavingBarContext.Provider, { value, children });
 }
 function usePageSavingBar(reg, deps = []) {
   const id = useId();
@@ -88,34 +89,39 @@ function SavingBarRoot() {
   const onSave = single ? single.onSave : saveAll;
   const onDiscard = single ? single.onDiscard : discardAll;
   const secondary = single == null ? void 0 : single.secondary;
-  return /* @__PURE__ */ React.createElement("div", { className: "fixed bottom-3 right-6 z-50 transition-all duration-300 ease-out" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 rounded-(--radius-card) px-4 py-3 [background:var(--saving-bar-bg)] [box-shadow:var(--saving-bar-shadow)]" }, message && /* @__PURE__ */ React.createElement("span", { className: "text-label pr-1 [color:var(--saving-bar-message)]" }, message), onDiscard && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: onDiscard,
-      disabled: anyPending,
-      className: "rounded-(--radius-card) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 [border-color:var(--saving-bar-discard-border)] [color:var(--saving-bar-discard-text)] hover:[border-color:var(--saving-bar-discard-border-hover)] hover:[color:var(--saving-bar-discard-text-hover)]"
-    },
-    discardLabel
-  ), secondary && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: secondary.onClick,
-      disabled: anyPending,
-      className: "rounded-(--radius-card) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 [border-color:var(--saving-bar-discard-border)] [color:var(--saving-bar-discard-text)] hover:[border-color:var(--saving-bar-discard-border-hover)] hover:[color:var(--saving-bar-discard-text-hover)]"
-    },
-    secondary.label
-  ), onSave && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => onSave(),
-      disabled: anyPending,
-      className: "rounded-(--radius-card) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[80px] justify-center [background:var(--saving-bar-save-bg)] [color:var(--saving-bar-save-text)] hover:[background:var(--saving-bar-save-bg-hover)]"
-    },
-    anyPending ? /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 animate-spin" }) : saveLabel
-  )));
+  return /* @__PURE__ */ jsx("div", { className: "fixed bottom-3 right-6 z-50 transition-all duration-300 ease-out", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-(--radius-card) px-4 py-3 [background:var(--saving-bar-bg)] [box-shadow:var(--saving-bar-shadow)]", children: [
+    message && /* @__PURE__ */ jsx("span", { className: "text-label pr-1 [color:var(--saving-bar-message)]", children: message }),
+    onDiscard && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onDiscard,
+        disabled: anyPending,
+        className: "rounded-(--radius-card) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 [border-color:var(--saving-bar-discard-border)] [color:var(--saving-bar-discard-text)] hover:[border-color:var(--saving-bar-discard-border-hover)] hover:[color:var(--saving-bar-discard-text-hover)]",
+        children: discardLabel
+      }
+    ),
+    secondary && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: secondary.onClick,
+        disabled: anyPending,
+        className: "rounded-(--radius-card) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 [border-color:var(--saving-bar-discard-border)] [color:var(--saving-bar-discard-text)] hover:[border-color:var(--saving-bar-discard-border-hover)] hover:[color:var(--saving-bar-discard-text-hover)]",
+        children: secondary.label
+      }
+    ),
+    onSave && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSave(),
+        disabled: anyPending,
+        className: "rounded-(--radius-card) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[80px] justify-center [background:var(--saving-bar-save-bg)] [color:var(--saving-bar-save-text)] hover:[background:var(--saving-bar-save-bg-hover)]",
+        children: anyPending ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : saveLabel
+      }
+    )
+  ] }) });
 }
 export {
   SavingBarProvider,

package/dist/components/saving-bar.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
 function SavingBar({
   visible,
@@ -12,59 +13,61 @@ function SavingBar({
   children,
   variant = "floating"
 }) {
-  const pill = /* @__PURE__ */ React.createElement(
+  const pill = /* @__PURE__ */ jsxs(
     "div",
     {
       className: [
         "flex items-center gap-3 rounded-(--radius-card) px-4 py-3",
         "[background:var(--saving-bar-bg)]",
         variant === "floating" ? "[box-shadow:var(--saving-bar-shadow)]" : ""
-      ].filter(Boolean).join(" ")
-    },
-    message && /* @__PURE__ */ React.createElement("span", { className: "text-label pr-1 [color:var(--saving-bar-message)]" }, message),
-    children,
-    onDiscard && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: onDiscard,
-        disabled: pending,
-        className: "rounded-(--radius-card) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 [border-color:var(--saving-bar-discard-border)] [color:var(--saving-bar-discard-text)] hover:[border-color:var(--saving-bar-discard-border-hover)] hover:[color:var(--saving-bar-discard-text-hover)]"
-      },
-      discardLabel
-    ),
-    onSave && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: onSave,
-        disabled: pending,
-        className: "rounded-(--radius-card) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[80px] justify-center [background:var(--saving-bar-save-bg)] [color:var(--saving-bar-save-text)] hover:[background:var(--saving-bar-save-bg-hover)]"
-      },
-      pending ? /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 animate-spin" }) : saveLabel
-    )
+      ].filter(Boolean).join(" "),
+      children: [
+        message && /* @__PURE__ */ jsx("span", { className: "text-label pr-1 [color:var(--saving-bar-message)]", children: message }),
+        children,
+        onDiscard && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDiscard,
+            disabled: pending,
+            className: "rounded-(--radius-card) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 [border-color:var(--saving-bar-discard-border)] [color:var(--saving-bar-discard-text)] hover:[border-color:var(--saving-bar-discard-border-hover)] hover:[color:var(--saving-bar-discard-text-hover)]",
+            children: discardLabel
+          }
+        ),
+        onSave && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onSave,
+            disabled: pending,
+            className: "rounded-(--radius-card) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[80px] justify-center [background:var(--saving-bar-save-bg)] [color:var(--saving-bar-save-text)] hover:[background:var(--saving-bar-save-bg-hover)]",
+            children: pending ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : saveLabel
+          }
+        )
+      ]
+    }
   );
   if (variant === "inline") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         className: [
           "flex justify-end mt-8 transition-all duration-300 ease-out",
           visible ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
-        ].join(" ")
-      },
-      pill
+        ].join(" "),
+        children: pill
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: [
         "fixed bottom-3 right-6 z-50 transition-all duration-300 ease-out",
         visible ? "translate-y-0 opacity-100 pointer-events-auto" : "translate-y-4 opacity-0 pointer-events-none"
-      ].join(" ")
-    },
-    pill
+      ].join(" "),
+      children: pill
+    }
   );
 }
 export {

package/dist/components/search.js

@@ -3,6 +3,7 @@ import {
   __objRest,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from "react";
 import { Search as SearchIcon, X } from "lucide-react";
 const SIZE_CLASS = {
@@ -31,50 +32,54 @@ const Search = forwardRef(function Search2(_a, ref) {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     onClear == null ? void 0 : onClear();
   }
-  return /* @__PURE__ */ React.createElement("div", { className: ["relative inline-flex", width === "full" ? "w-full" : "w-auto"].join(" ") }, /* @__PURE__ */ React.createElement(
-    SearchIcon,
-    {
-      size: ICON_SIZE[size],
-      className: ["absolute top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none", ICON_POS[size]].join(" ")
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "input",
-    __spreadValues({
-      ref,
-      type: "search",
-      role: "searchbox",
-      value,
-      onChange: handleChange,
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          if (debounceRef.current) clearTimeout(debounceRef.current);
-          onSearch == null ? void 0 : onSearch(e.target.value);
-        }
-      },
-      className: [
-        "w-full rounded-(--radius-control) bg-surface-default text-fg-primary placeholder:text-fg-placeholder",
-        "border border-stroke-control transition-colors outline-none",
-        "focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
-        "[&::-webkit-search-cancel-button]:hidden",
-        SIZE_CLASS[size],
-        className
-      ].join(" ")
-    }, rest)
-  ), hasValue && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: handleClear,
-      "aria-label": "Limpar busca",
-      className: [
-        "absolute top-1/2 -translate-y-1/2 inline-flex items-center justify-center",
-        "rounded-(--radius-control) text-fg-muted hover:text-fg-primary transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-        CLEAR_POS[size]
-      ].join(" ")
-    },
-    /* @__PURE__ */ React.createElement(X, { size: ICON_SIZE[size] - 2 })
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: ["relative inline-flex", width === "full" ? "w-full" : "w-auto"].join(" "), children: [
+    /* @__PURE__ */ jsx(
+      SearchIcon,
+      {
+        size: ICON_SIZE[size],
+        className: ["absolute top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none", ICON_POS[size]].join(" ")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      __spreadValues({
+        ref,
+        type: "search",
+        role: "searchbox",
+        value,
+        onChange: handleChange,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+            onSearch == null ? void 0 : onSearch(e.target.value);
+          }
+        },
+        className: [
+          "w-full rounded-(--radius-control) bg-surface-default text-fg-primary placeholder:text-fg-placeholder",
+          "border border-stroke-control transition-colors outline-none",
+          "focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
+          "[&::-webkit-search-cancel-button]:hidden",
+          SIZE_CLASS[size],
+          className
+        ].join(" ")
+      }, rest)
+    ),
+    hasValue && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClear,
+        "aria-label": "Limpar busca",
+        className: [
+          "absolute top-1/2 -translate-y-1/2 inline-flex items-center justify-center",
+          "rounded-(--radius-control) text-fg-muted hover:text-fg-primary transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
+          CLEAR_POS[size]
+        ].join(" "),
+        children: /* @__PURE__ */ jsx(X, { size: ICON_SIZE[size] - 2 })
+      }
+    )
+  ] });
 });
 export {
   Search

package/dist/components/section-card.js

@@ -1,47 +1,55 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronRight } from "lucide-react";
 function SectionCard({ label, badge, open, onToggle, children }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: [
         "rounded-(--radius-card) overflow-hidden transition-colors border",
         open ? "[border-color:var(--section-card-border-active)]" : "[border-color:var(--section-card-border)]"
-      ].join(" ")
-    },
-    /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: onToggle,
-        className: [
-          "w-full flex items-center justify-between px-4 py-3 text-left transition-colors",
-          open ? "[background:var(--section-card-header-bg-active)]" : "hover:[background:var(--section-card-header-bg-hover)]"
-        ].join(" ")
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: [
-            "text-caption font-semibold uppercase tracking-wide shrink-0",
-            open ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
-          ].join(" ")
-        },
-        label
-      ), badge && /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: [
-            "text-caption truncate min-w-0",
-            open ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
-          ].join(" ")
-        },
-        badge
-      )),
-      open ? /* @__PURE__ */ React.createElement(ChevronDown, { className: "w-4 h-4 shrink-0 [color:var(--section-card-chevron)]" }) : /* @__PURE__ */ React.createElement(ChevronRight, { className: "w-4 h-4 shrink-0 [color:var(--section-card-chevron)]" })
-    ),
-    open && /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-4 pt-4 space-y-4 [border-top:1px_solid_var(--section-card-divider)] [background:var(--surface-default)]" }, children)
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onToggle,
+            className: [
+              "w-full flex items-center justify-between px-4 py-3 text-left transition-colors",
+              open ? "[background:var(--section-card-header-bg-active)]" : "hover:[background:var(--section-card-header-bg-hover)]"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: [
+                      "text-caption font-semibold uppercase tracking-wide shrink-0",
+                      open ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
+                    ].join(" "),
+                    children: label
+                  }
+                ),
+                badge && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: [
+                      "text-caption truncate min-w-0",
+                      open ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
+                    ].join(" "),
+                    children: badge
+                  }
+                )
+              ] }),
+              open ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 shrink-0 [color:var(--section-card-chevron)]" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 shrink-0 [color:var(--section-card-chevron)]" })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-4 space-y-4 [border-top:1px_solid_var(--section-card-divider)] [background:var(--surface-default)]", children })
+      ]
+    }
   );
 }
 export {

package/dist/components/section-header.js

@@ -1,6 +1,16 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 function SectionHeader({ eyebrow, number, title, description, action, className = "" }) {
-  return /* @__PURE__ */ React.createElement("div", { className: ["mb-6", className].filter(Boolean).join(" ") }, eyebrow && /* @__PURE__ */ React.createElement("p", { className: "uppercase text-fg-muted mb-1.5 [font-size:var(--font-size-eyebrow)] [font-weight:var(--font-weight-eyebrow)] [letter-spacing:var(--letter-spacing-eyebrow)]" }, number ? `${number} \xB7 ${eyebrow}` : eyebrow), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("h2", { className: "text-body font-semibold text-fg-primary" }, title), description && /* @__PURE__ */ React.createElement("p", { className: "text-label text-fg-muted mt-1" }, description)), action && /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, action)));
+  return /* @__PURE__ */ jsxs("div", { className: ["mb-6", className].filter(Boolean).join(" "), children: [
+    eyebrow && /* @__PURE__ */ jsx("p", { className: "uppercase text-fg-muted mb-1.5 [font-size:var(--font-size-eyebrow)] [font-weight:var(--font-weight-eyebrow)] [letter-spacing:var(--letter-spacing-eyebrow)]", children: number ? `${number} \xB7 ${eyebrow}` : eyebrow }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-body font-semibold text-fg-primary", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-label text-fg-muted mt-1", children: description })
+      ] }),
+      action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+    ] })
+  ] });
 }
 export {
   SectionHeader

package/dist/components/select.js

@@ -1,8 +1,10 @@
 "use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   Children,
   forwardRef,
@@ -72,68 +74,87 @@ const Select = forwardRef(function Select2(_a, ref) {
     setter == null ? void 0 : setter.call(el, value);
     el.dispatchEvent(new Event("change", { bubbles: true }));
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 w-full" }, label && /* @__PURE__ */ React.createElement("label", { htmlFor: selectId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary" }, /* @__PURE__ */ React.createElement("span", null, label), required && /* @__PURE__ */ React.createElement("span", { className: "text-danger", "aria-label": "obrigat\xF3rio" }, "*"), optional && !required && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted font-normal" }, "(opcional)")), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-    "select",
-    __spreadValues({
-      ref: setRefs,
-      id: selectId,
-      required,
-      className: [
-        "w-full rounded-(--radius-control) appearance-none",
-        "bg-surface-default text-fg-primary",
-        "border transition-colors outline-none",
-        sz.h,
-        sz.text,
-        sz.padL,
-        sz.padR,
-        error ? "border-danger focus:border-danger focus:ring-2 focus:ring-danger/20" : "border-stroke-control focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
-        "disabled:opacity-50 disabled:cursor-not-allowed",
-        className
-      ].filter(Boolean).join(" "),
-      "aria-invalid": error ? true : void 0,
-      "aria-describedby": error ? `${selectId}-error` : helper ? `${selectId}-helper` : void 0
-    }, props),
-    placeholder && /* @__PURE__ */ React.createElement("option", { value: "", disabled: true, hidden: true }, placeholder),
-    options.map((o) => /* @__PURE__ */ React.createElement("option", { key: o.value, value: o.value, disabled: o.disabled }, o.label)),
-    children
-  ), /* @__PURE__ */ React.createElement(
-    ChevronDown,
-    {
-      size: size === "sm" ? 14 : size === "lg" ? 18 : 16,
-      className: [
-        "absolute top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none",
-        size === "sm" ? "right-2.5" : size === "lg" ? "right-3.5" : "right-3"
-      ].join(" ")
-    }
-  ), isXs && !props.disabled && allOptions.length > 0 && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      "aria-label": (_a2 = label != null ? label : placeholder) != null ? _a2 : "Selecionar",
-      "aria-haspopup": "dialog",
-      onClick: openSheet,
-      className: "absolute inset-0 w-full h-full rounded-(--radius-control) opacity-0"
-    }
-  )), error && /* @__PURE__ */ React.createElement("p", { id: `${selectId}-error`, className: "text-caption text-danger-text" }, error), !error && helper && /* @__PURE__ */ React.createElement("p", { id: `${selectId}-helper`, className: "text-caption text-fg-muted" }, helper), isXs && /* @__PURE__ */ React.createElement(BottomSheet, { open: sheetOpen, onClose: () => setSheetOpen(false), title: label != null ? label : placeholder }, /* @__PURE__ */ React.createElement("div", { className: "pb-2" }, allOptions.map((o) => {
-    const selected = o.value === sheetValue;
-    return /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        key: o.value,
-        type: "button",
-        disabled: o.disabled,
-        onClick: () => commitSheetValue(o.value),
-        className: [
-          "w-full flex items-center justify-between gap-3 px-1 py-3.5 text-left text-label",
-          "border-b border-stroke-subtle last:border-0 transition-colors",
-          selected ? "font-medium text-fg-primary" : "text-fg-secondary",
-          "disabled:opacity-50 disabled:cursor-not-allowed"
-        ].join(" ")
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1" }, o.label),
-      selected && /* @__PURE__ */ React.createElement(Check, { size: 16, className: "shrink-0" })
-    );
-  }))));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: selectId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      required && /* @__PURE__ */ jsx("span", { className: "text-danger", "aria-label": "obrigat\xF3rio", children: "*" }),
+      optional && !required && /* @__PURE__ */ jsx("span", { className: "text-fg-muted font-normal", children: "(opcional)" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        __spreadProps(__spreadValues({
+          ref: setRefs,
+          id: selectId,
+          required,
+          className: [
+            "w-full rounded-(--radius-control) appearance-none",
+            "bg-surface-default text-fg-primary",
+            "border transition-colors outline-none",
+            sz.h,
+            sz.text,
+            sz.padL,
+            sz.padR,
+            error ? "border-danger focus:border-danger focus:ring-2 focus:ring-danger/20" : "border-stroke-control focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            className
+          ].filter(Boolean).join(" "),
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error ? `${selectId}-error` : helper ? `${selectId}-helper` : void 0
+        }, props), {
+          children: [
+            placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+            options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value)),
+            children
+          ]
+        })
+      ),
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          size: size === "sm" ? 14 : size === "lg" ? 18 : 16,
+          className: [
+            "absolute top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none",
+            size === "sm" ? "right-2.5" : size === "lg" ? "right-3.5" : "right-3"
+          ].join(" ")
+        }
+      ),
+      isXs && !props.disabled && allOptions.length > 0 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": (_a2 = label != null ? label : placeholder) != null ? _a2 : "Selecionar",
+          "aria-haspopup": "dialog",
+          onClick: openSheet,
+          className: "absolute inset-0 w-full h-full rounded-(--radius-control) opacity-0"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { id: `${selectId}-error`, className: "text-caption text-danger-text", children: error }),
+    !error && helper && /* @__PURE__ */ jsx("p", { id: `${selectId}-helper`, className: "text-caption text-fg-muted", children: helper }),
+    isXs && /* @__PURE__ */ jsx(BottomSheet, { open: sheetOpen, onClose: () => setSheetOpen(false), title: label != null ? label : placeholder, children: /* @__PURE__ */ jsx("div", { className: "pb-2", children: allOptions.map((o) => {
+      const selected = o.value === sheetValue;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: o.disabled,
+          onClick: () => commitSheetValue(o.value),
+          className: [
+            "w-full flex items-center justify-between gap-3 px-1 py-3.5 text-left text-label",
+            "border-b border-stroke-subtle last:border-0 transition-colors",
+            selected ? "font-medium text-fg-primary" : "text-fg-secondary",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: o.label }),
+            selected && /* @__PURE__ */ jsx(Check, { size: 16, className: "shrink-0" })
+          ]
+        },
+        o.value
+      );
+    }) }) })
+  ] });
 });
 export {
   Select

package/dist/components/selectable-card.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRight } from "lucide-react";
 function SelectableCard({
   selected = false,
@@ -16,11 +17,17 @@ function SelectableCard({
   const state = selected ? "border-2 border-stroke-focus bg-surface-raised" : "border border-stroke-default bg-surface-default hover:border-stroke-strong";
   const disabledCls = disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "cursor-pointer";
   const cls = [base, state, disabledCls, className].filter(Boolean).join(" ");
-  const inner = /* @__PURE__ */ React.createElement(React.Fragment, null, ribbon && /* @__PURE__ */ React.createElement("span", { className: "absolute -top-3 left-1/2 -translate-x-1/2" }, ribbon), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, children), indicator === "radio" && /* @__PURE__ */ React.createElement("span", { className: `shrink-0 size-4 rounded-full border-2 flex items-center justify-center ${selected ? "border-stroke-focus" : "border-stroke-strong"}` }, selected && /* @__PURE__ */ React.createElement("span", { className: "size-2 rounded-full bg-stroke-focus" })), indicator === "check" && selected && /* @__PURE__ */ React.createElement(Check, { className: "shrink-0 size-4 text-fg-primary", strokeWidth: 2.5 }), indicator === "chevron" && /* @__PURE__ */ React.createElement(ChevronRight, { className: "shrink-0 size-4 text-fg-muted", strokeWidth: 2 }));
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    ribbon && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: ribbon }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children }),
+    indicator === "radio" && /* @__PURE__ */ jsx("span", { className: `shrink-0 size-4 rounded-full border-2 flex items-center justify-center ${selected ? "border-stroke-focus" : "border-stroke-strong"}`, children: selected && /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-stroke-focus" }) }),
+    indicator === "check" && selected && /* @__PURE__ */ jsx(Check, { className: "shrink-0 size-4 text-fg-primary", strokeWidth: 2.5 }),
+    indicator === "chevron" && /* @__PURE__ */ jsx(ChevronRight, { className: "shrink-0 size-4 text-fg-muted", strokeWidth: 2 })
+  ] });
   if (as === "a") {
-    return /* @__PURE__ */ React.createElement("a", { href, className: cls, "aria-disabled": disabled || void 0, "aria-current": selected || void 0 }, inner);
+    return /* @__PURE__ */ jsx("a", { href, className: cls, "aria-disabled": disabled || void 0, "aria-current": selected || void 0, children: inner });
   }
-  return /* @__PURE__ */ React.createElement("button", { type: "button", onClick, disabled, "aria-pressed": selected, className: cls }, inner);
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick, disabled, "aria-pressed": selected, className: cls, children: inner });
 }
 export {
   SelectableCard