@rojaostudio/ds 1.0.0 → 1.0.2

package/dist/components/choice-card.js

@@ -1,7 +1,8 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 function ChoiceCard({ selected, onClick, label, description, icon, disabled = false, className = "" }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -12,47 +13,52 @@ function ChoiceCard({ selected, onClick, label, description, icon, disabled = fa
         selected ? "[border-color:var(--choice-card-border-active)] [background:var(--choice-card-bg-active)]" : "[border-color:var(--choice-card-border)] [background:var(--choice-card-bg)] hover:[border-color:var(--choice-card-border-hover)]",
         disabled ? "opacity-50 cursor-not-allowed" : "",
         className
-      ].filter(Boolean).join(" ")
-    },
-    icon && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: [
-          "shrink-0 w-9 h-9 rounded-(--radius-card) flex items-center justify-center transition-colors",
-          selected ? "[background:var(--choice-card-icon-bg-active)] [color:var(--choice-card-icon-active)]" : "[background:var(--choice-card-icon-bg)] [color:var(--choice-card-icon)]"
-        ].join(" ")
-      },
-      icon
-    ),
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement(
-      "p",
-      {
-        className: [
-          "text-label font-semibold",
-          selected ? "[color:var(--choice-card-label-active)]" : "[color:var(--choice-card-label)]"
-        ].join(" ")
-      },
-      label
-    ), description && /* @__PURE__ */ React.createElement(
-      "p",
-      {
-        className: [
-          "text-caption mt-0.5",
-          selected ? "[color:var(--choice-card-description-active)]" : "[color:var(--choice-card-description)]"
-        ].join(" ")
-      },
-      description
-    )),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: [
-          "shrink-0 w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors",
-          selected ? "[border-color:var(--choice-card-radio-border-active)]" : "[border-color:var(--choice-card-radio-border)]"
-        ].join(" ")
-      },
-      selected && /* @__PURE__ */ React.createElement("div", { className: "w-2 h-2 rounded-full [background:var(--choice-card-radio-dot)]" })
-    )
+      ].filter(Boolean).join(" "),
+      children: [
+        icon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              "shrink-0 w-9 h-9 rounded-(--radius-card) flex items-center justify-center transition-colors",
+              selected ? "[background:var(--choice-card-icon-bg-active)] [color:var(--choice-card-icon-active)]" : "[background:var(--choice-card-icon-bg)] [color:var(--choice-card-icon)]"
+            ].join(" "),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: [
+                "text-label font-semibold",
+                selected ? "[color:var(--choice-card-label-active)]" : "[color:var(--choice-card-label)]"
+              ].join(" "),
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: [
+                "text-caption mt-0.5",
+                selected ? "[color:var(--choice-card-description-active)]" : "[color:var(--choice-card-description)]"
+              ].join(" "),
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              "shrink-0 w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors",
+              selected ? "[border-color:var(--choice-card-radio-border-active)]" : "[border-color:var(--choice-card-radio-border)]"
+            ].join(" "),
+            children: selected && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full [background:var(--choice-card-radio-dot)]" })
+          }
+        )
+      ]
+    }
   );
 }
 export {

package/dist/components/choice-carousel.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback } from "react";
 function ChoiceCarousel({
   options,
@@ -70,84 +71,88 @@ function ChoiceCarousel({
       scrollByAmount(-1);
     }
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      "aria-label": "Anterior",
-      onClick: () => scrollByAmount(-1),
-      disabled: !canScrollLeft,
-      className: "hidden md:flex absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 z-10 w-9 h-9 rounded-full items-center justify-center transition-opacity disabled:opacity-0 disabled:pointer-events-none",
-      style: {
-        background: "var(--choice-carousel-chevron-bg)",
-        border: `1px solid var(--choice-carousel-chevron-border)`,
-        color: "var(--choice-carousel-chevron-text)",
-        boxShadow: "var(--shadow-md)"
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Anterior",
+        onClick: () => scrollByAmount(-1),
+        disabled: !canScrollLeft,
+        className: "hidden md:flex absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 z-10 w-9 h-9 rounded-full items-center justify-center transition-opacity disabled:opacity-0 disabled:pointer-events-none",
+        style: {
+          background: "var(--choice-carousel-chevron-bg)",
+          border: `1px solid var(--choice-carousel-chevron-border)`,
+          color: "var(--choice-carousel-chevron-text)",
+          boxShadow: "var(--shadow-md)"
+        },
+        children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: /* @__PURE__ */ jsx("path", { d: "M10 4l-4 4 4 4", strokeLinecap: "round", strokeLinejoin: "round" }) })
       }
-    },
-    /* @__PURE__ */ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.8" }, /* @__PURE__ */ React.createElement("path", { d: "M10 4l-4 4 4 4", strokeLinecap: "round", strokeLinejoin: "round" }))
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref: trackRef,
-      role: multiple ? "group" : "radiogroup",
-      "aria-label": ariaLabel,
-      tabIndex: 0,
-      onKeyDown: handleKeyDown,
-      className: "flex overflow-x-auto scroll-smooth focus:outline-none",
-      style: {
-        gap: "var(--choice-carousel-gap)",
-        scrollSnapType: "x mandatory",
-        scrollbarWidth: "none",
-        paddingBlock: 4
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: trackRef,
+        role: multiple ? "group" : "radiogroup",
+        "aria-label": ariaLabel,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        className: "flex overflow-x-auto scroll-smooth focus:outline-none",
+        style: {
+          gap: "var(--choice-carousel-gap)",
+          scrollSnapType: "x mandatory",
+          scrollbarWidth: "none",
+          paddingBlock: 4
+        },
+        children: options.map((option) => {
+          var _a;
+          const selected = isSelected(option);
+          const disabled = (_a = isDisabled == null ? void 0 : isDisabled(option)) != null ? _a : false;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: multiple ? "checkbox" : "radio",
+              "aria-checked": selected,
+              "aria-disabled": disabled,
+              tabIndex: disabled ? -1 : 0,
+              onClick: () => handleSelect(option),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelect(option);
+                }
+              },
+              className: "shrink-0",
+              style: {
+                width: "var(--choice-carousel-card-width-mobile)",
+                scrollSnapAlign: "start",
+                cursor: disabled ? "not-allowed" : "pointer"
+              },
+              children: renderCard(option, selected)
+            },
+            getKey(option)
+          );
+        })
       }
-    },
-    options.map((option) => {
-      var _a;
-      const selected = isSelected(option);
-      const disabled = (_a = isDisabled == null ? void 0 : isDisabled(option)) != null ? _a : false;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: getKey(option),
-          role: multiple ? "checkbox" : "radio",
-          "aria-checked": selected,
-          "aria-disabled": disabled,
-          tabIndex: disabled ? -1 : 0,
-          onClick: () => handleSelect(option),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleSelect(option);
-            }
-          },
-          className: "shrink-0",
-          style: {
-            width: "var(--choice-carousel-card-width-mobile)",
-            scrollSnapAlign: "start",
-            cursor: disabled ? "not-allowed" : "pointer"
-          }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Pr\xF3ximo",
+        onClick: () => scrollByAmount(1),
+        disabled: !canScrollRight,
+        className: "hidden md:flex absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 z-10 w-9 h-9 rounded-full items-center justify-center transition-opacity disabled:opacity-0 disabled:pointer-events-none",
+        style: {
+          background: "var(--choice-carousel-chevron-bg)",
+          border: `1px solid var(--choice-carousel-chevron-border)`,
+          color: "var(--choice-carousel-chevron-text)",
+          boxShadow: "var(--shadow-md)"
         },
-        renderCard(option, selected)
-      );
-    })
-  ), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      "aria-label": "Pr\xF3ximo",
-      onClick: () => scrollByAmount(1),
-      disabled: !canScrollRight,
-      className: "hidden md:flex absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 z-10 w-9 h-9 rounded-full items-center justify-center transition-opacity disabled:opacity-0 disabled:pointer-events-none",
-      style: {
-        background: "var(--choice-carousel-chevron-bg)",
-        border: `1px solid var(--choice-carousel-chevron-border)`,
-        color: "var(--choice-carousel-chevron-text)",
-        boxShadow: "var(--shadow-md)"
+        children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4", strokeLinecap: "round", strokeLinejoin: "round" }) })
       }
-    },
-    /* @__PURE__ */ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.8" }, /* @__PURE__ */ React.createElement("path", { d: "M6 4l4 4-4 4", strokeLinecap: "round", strokeLinejoin: "round" }))
-  ));
+    )
+  ] });
 }
 export {
   ChoiceCarousel

package/dist/components/choice-preview-card.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Lock } from "lucide-react";
 function ChoicePreviewCard({
   selected,
@@ -14,7 +15,7 @@ function ChoicePreviewCard({
   className = ""
 }) {
   const aspect = previewAspect === "square" ? "aspect-square" : previewAspect === "wide" ? "aspect-[2/1]" : "aspect-video";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -27,11 +28,21 @@ function ChoicePreviewCard({
         selected ? "border-2 border-stroke-focus bg-surface-raised" : "border border-stroke-default bg-surface-default hover:border-stroke-strong",
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
         className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement("div", { className: ["relative w-full overflow-hidden rounded-(--radius-card) ring-1 ring-inset ring-stroke-subtle", aspect].join(" ") }, preview, badge && /* @__PURE__ */ React.createElement("span", { className: "absolute top-1.5 left-1.5" }, badge), selected && /* @__PURE__ */ React.createElement("span", { className: "absolute bottom-1.5 right-1.5 size-5 rounded-full bg-stroke-focus text-surface-default flex items-center justify-center" }, /* @__PURE__ */ React.createElement(Check, { size: 12, strokeWidth: 3 })), locked && // TODO(DS): trocar por token de overlay (--choice-preview-overlay) — Patrick.
-    /* @__PURE__ */ React.createElement("span", { className: "absolute inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.55)]" }, /* @__PURE__ */ React.createElement(Lock, { size: 18, className: "text-white" }))),
-    /* @__PURE__ */ React.createElement("div", { className: "px-1 pt-2" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-medium text-fg-primary" }, label), description && /* @__PURE__ */ React.createElement("div", { className: "text-xs text-fg-muted mt-0.5 leading-snug" }, description))
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: ["relative w-full overflow-hidden rounded-(--radius-card) ring-1 ring-inset ring-stroke-subtle", aspect].join(" "), children: [
+          preview,
+          badge && /* @__PURE__ */ jsx("span", { className: "absolute top-1.5 left-1.5", children: badge }),
+          selected && /* @__PURE__ */ jsx("span", { className: "absolute bottom-1.5 right-1.5 size-5 rounded-full bg-stroke-focus text-surface-default flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { size: 12, strokeWidth: 3 }) }),
+          locked && // TODO(DS): trocar por token de overlay (--choice-preview-overlay) — Patrick.
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.55)]", children: /* @__PURE__ */ jsx(Lock, { size: 18, className: "text-white" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "px-1 pt-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-fg-primary", children: label }),
+          description && /* @__PURE__ */ jsx("div", { className: "text-xs text-fg-muted mt-0.5 leading-snug", children: description })
+        ] })
+      ]
+    }
   );
 }
 export {

package/dist/components/color-input.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 const HEX_RE = /^#[0-9a-fA-F]{6}$/;
 function ColorInput({
@@ -27,7 +28,7 @@ function ColorInput({
   }
   const h = size === "sm" ? "h-control-sm" : "h-control-md";
   const swatch = size === "sm" ? "size-5" : "size-6";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: [
@@ -37,41 +38,46 @@ function ColorInput({
         "transition-colors focus-within:border-stroke-focus focus-within:ring-2 focus-within:ring-stroke-focus/20",
         disabled ? "opacity-50 cursor-not-allowed" : "",
         className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement("span", { className: `relative shrink-0 ${swatch} rounded-(--radius-control) border border-stroke-subtle overflow-hidden` }, /* @__PURE__ */ React.createElement("span", { className: "absolute inset-0", style: { backgroundColor: value } }), /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        type: "color",
-        value: HEX_RE.test(value) ? value : "#000000",
-        onChange: (e) => onChange(e.target.value.toUpperCase()),
-        disabled,
-        "aria-label": ariaLabel,
-        className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer disabled:cursor-not-allowed"
-      }
-    )),
-    /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "text",
-        value: draft,
-        onChange: (e) => setDraft(e.target.value),
-        onBlur: commit,
-        onKeyDown: (e) => {
-          var _a;
-          if (e.key === "Enter") {
-            e.preventDefault();
-            commit();
-            (_a = inputRef.current) == null ? void 0 : _a.blur();
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: `relative shrink-0 ${swatch} rounded-(--radius-control) border border-stroke-subtle overflow-hidden`, children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-0", style: { backgroundColor: value } }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              value: HEX_RE.test(value) ? value : "#000000",
+              onChange: (e) => onChange(e.target.value.toUpperCase()),
+              disabled,
+              "aria-label": ariaLabel,
+              className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer disabled:cursor-not-allowed"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: draft,
+            onChange: (e) => setDraft(e.target.value),
+            onBlur: commit,
+            onKeyDown: (e) => {
+              var _a;
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commit();
+                (_a = inputRef.current) == null ? void 0 : _a.blur();
+              }
+            },
+            disabled,
+            maxLength: 7,
+            "aria-label": ariaLabel,
+            className: "min-w-0 flex-1 bg-transparent text-label font-mono text-fg-primary outline-none disabled:cursor-not-allowed"
           }
-        },
-        disabled,
-        maxLength: 7,
-        "aria-label": ariaLabel,
-        className: "min-w-0 flex-1 bg-transparent text-label font-mono text-fg-primary outline-none disabled:cursor-not-allowed"
-      }
-    )
+        )
+      ]
+    }
   );
 }
 export {

package/dist/components/combobox.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useEffect, useId, useImperativeHandle } from "react";
 import { ChevronDown, Check, Search as SearchIcon, X, Plus } from "lucide-react";
 import { Popover } from "./popover.js";
@@ -100,81 +101,97 @@ const Combobox = forwardRef(function Combobox2(props, ref) {
   const sel = selectedOption();
   const triggerLabel = isMulti ? props.value.length === 0 ? placeholder : `${props.value.length} selecionado(s)` : (_a = sel == null ? void 0 : sel.label) != null ? _a : placeholder;
   const isPlaceholder = isMulti ? props.value.length === 0 : !sel;
-  const dropdown = /* @__PURE__ */ React.createElement(
+  const dropdown = /* @__PURE__ */ jsxs(
     "div",
     {
       id,
       role: "listbox",
       style: { width: Math.max(dropdownWidth, dropdownMinWidth != null ? dropdownMinWidth : 0) || void 0 },
-      className: "max-h-72 overflow-hidden rounded-(--radius-control) border border-stroke-control bg-surface-default shadow-lg flex flex-col"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "relative shrink-0 border-b border-stroke-subtle" }, /* @__PURE__ */ React.createElement(SearchIcon, { size: 14, className: "absolute left-3 top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none" }), /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "text",
-        value: query,
-        onChange: (e) => {
-          setQuery(e.target.value);
-          setActiveIdx(0);
-        },
-        onKeyDown: handleKey,
-        placeholder: "Buscar\u2026",
-        className: "w-full pl-9 pr-8 py-2 text-label bg-transparent outline-none text-fg-primary placeholder:text-fg-placeholder",
-        "aria-label": "Buscar op\xE7\xF5es"
-      }
-    ), query && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          var _a2;
-          setQuery("");
-          (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-        },
-        "aria-label": "Limpar",
-        className: "absolute right-2 top-1/2 -translate-y-1/2 text-fg-muted hover:text-fg-primary p-1"
-      },
-      /* @__PURE__ */ React.createElement(X, { size: 12 })
-    )),
-    /* @__PURE__ */ React.createElement("div", { className: "overflow-y-auto py-1 max-h-60" }, filtered.length === 0 && !showCreate ? /* @__PURE__ */ React.createElement("div", { className: "px-3 py-3 text-label text-fg-muted text-center" }, emptyMessage) : /* @__PURE__ */ React.createElement(React.Fragment, null, filtered.map((opt, idx) => {
-      const selected = isSelected(opt);
-      const active = idx === activeIdx;
-      return /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          key: opt.value,
-          type: "button",
-          role: "option",
-          "aria-selected": selected,
-          disabled: opt.disabled,
-          onClick: () => handleSelect(opt),
-          onMouseEnter: () => setActiveIdx(idx),
-          className: [
-            "w-full flex items-start gap-2.5 px-3 py-2 text-label text-left transition-colors",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            active ? "bg-surface-raised" : "hover:bg-surface-raised"
-          ].join(" ")
-        },
-        opt.icon && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-fg-muted mt-0.5 [&_svg]:size-4" }, opt.icon),
-        /* @__PURE__ */ React.createElement("span", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "block text-fg-primary truncate" }, opt.label), opt.description && /* @__PURE__ */ React.createElement("span", { className: "block text-caption text-fg-muted truncate" }, opt.description)),
-        selected && /* @__PURE__ */ React.createElement(Check, { size: 14, className: "shrink-0 text-fg-muted mt-0.5" })
-      );
-    }), showCreate && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: doCreate,
-        className: "w-full flex items-center gap-2.5 px-3 py-2 text-label text-left text-fg-primary transition-colors hover:bg-surface-raised border-t border-stroke-subtle"
-      },
-      /* @__PURE__ */ React.createElement(Plus, { size: 14, className: "shrink-0 text-fg-muted" }),
-      /* @__PURE__ */ React.createElement("span", { className: "truncate" }, createLabel(trimmed))
-    )))
+      className: "max-h-72 overflow-hidden rounded-(--radius-control) border border-stroke-control bg-surface-default shadow-lg flex flex-col",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative shrink-0 border-b border-stroke-subtle", children: [
+          /* @__PURE__ */ jsx(SearchIcon, { size: 14, className: "absolute left-3 top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: query,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setActiveIdx(0);
+              },
+              onKeyDown: handleKey,
+              placeholder: "Buscar\u2026",
+              className: "w-full pl-9 pr-8 py-2 text-label bg-transparent outline-none text-fg-primary placeholder:text-fg-placeholder",
+              "aria-label": "Buscar op\xE7\xF5es"
+            }
+          ),
+          query && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                var _a2;
+                setQuery("");
+                (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+              },
+              "aria-label": "Limpar",
+              className: "absolute right-2 top-1/2 -translate-y-1/2 text-fg-muted hover:text-fg-primary p-1",
+              children: /* @__PURE__ */ jsx(X, { size: 12 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-y-auto py-1 max-h-60", children: filtered.length === 0 && !showCreate ? /* @__PURE__ */ jsx("div", { className: "px-3 py-3 text-label text-fg-muted text-center", children: emptyMessage }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          filtered.map((opt, idx) => {
+            const selected = isSelected(opt);
+            const active = idx === activeIdx;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": selected,
+                disabled: opt.disabled,
+                onClick: () => handleSelect(opt),
+                onMouseEnter: () => setActiveIdx(idx),
+                className: [
+                  "w-full flex items-start gap-2.5 px-3 py-2 text-label text-left transition-colors",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  active ? "bg-surface-raised" : "hover:bg-surface-raised"
+                ].join(" "),
+                children: [
+                  opt.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-muted mt-0.5 [&_svg]:size-4", children: opt.icon }),
+                  /* @__PURE__ */ jsxs("span", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block text-fg-primary truncate", children: opt.label }),
+                    opt.description && /* @__PURE__ */ jsx("span", { className: "block text-caption text-fg-muted truncate", children: opt.description })
+                  ] }),
+                  selected && /* @__PURE__ */ jsx(Check, { size: 14, className: "shrink-0 text-fg-muted mt-0.5" })
+                ]
+              },
+              opt.value
+            );
+          }),
+          showCreate && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: doCreate,
+              className: "w-full flex items-center gap-2.5 px-3 py-2 text-label text-left text-fg-primary transition-colors hover:bg-surface-raised border-t border-stroke-subtle",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { size: 14, className: "shrink-0 text-fg-muted" }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: createLabel(trimmed) })
+              ]
+            }
+          )
+        ] }) })
+      ]
+    }
   );
-  return /* @__PURE__ */ React.createElement("div", { className: ["relative inline-block", width === "full" ? "w-full" : "w-auto", className].join(" ") }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: ["relative inline-block", width === "full" ? "w-full" : "w-auto", className].join(" "), children: /* @__PURE__ */ jsx(
     Popover,
     {
-      trigger: /* @__PURE__ */ React.createElement(
+      trigger: /* @__PURE__ */ jsxs(
         "button",
         {
           ref: triggerRef,
@@ -192,10 +209,15 @@ const Combobox = forwardRef(function Combobox2(props, ref) {
             "transition-colors focus:outline-none focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             SIZE_CLASS[size]
-          ].join(" ")
-        },
-        /* @__PURE__ */ React.createElement("span", { className: ["truncate inline-flex items-center", isPlaceholder ? "text-fg-placeholder" : "text-fg-primary"].join(" ") }, triggerContent ? triggerContent(sel) : /* @__PURE__ */ React.createElement(React.Fragment, null, (sel == null ? void 0 : sel.icon) && /* @__PURE__ */ React.createElement("span", { className: "inline-flex mr-2 align-middle [&_svg]:size-4" }, sel.icon), triggerLabel)),
-        /* @__PURE__ */ React.createElement(ChevronDown, { size: 16, className: "text-fg-muted shrink-0" })
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: ["truncate inline-flex items-center", isPlaceholder ? "text-fg-placeholder" : "text-fg-primary"].join(" "), children: triggerContent ? triggerContent(sel) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              (sel == null ? void 0 : sel.icon) && /* @__PURE__ */ jsx("span", { className: "inline-flex mr-2 align-middle [&_svg]:size-4", children: sel.icon }),
+              triggerLabel
+            ] }) }),
+            /* @__PURE__ */ jsx(ChevronDown, { size: 16, className: "text-fg-muted shrink-0" })
+          ]
+        }
       ),
       triggerClassName: width === "full" ? "block w-full" : "inline-block",
       placement: "bottom-start",
@@ -203,10 +225,10 @@ const Combobox = forwardRef(function Combobox2(props, ref) {
       open,
       onOpenChange: (v) => {
         if (!disabled) setOpen(v);
-      }
-    },
-    () => dropdown
-  ));
+      },
+      children: () => dropdown
+    }
+  ) });
 });
 export {
   Combobox