@rojaostudio/ds 1.0.0

package/dist/components/choice-carousel.js

@@ -0,0 +1,154 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useRef, useState, useEffect, useCallback } from "react";
+function ChoiceCarousel({
+  options,
+  getKey,
+  renderCard,
+  value,
+  onChange,
+  multiple = false,
+  ariaLabel,
+  isDisabled
+}) {
+  const trackRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const valueArray = multiple ? value != null ? value : [] : [];
+  const valueSingle = multiple ? null : value;
+  const isSelected = useCallback(
+    (option) => {
+      if (multiple) return valueArray.some((v) => getKey(v) === getKey(option));
+      return valueSingle != null && getKey(valueSingle) === getKey(option);
+    },
+    [multiple, valueArray, valueSingle, getKey]
+  );
+  const handleSelect = useCallback(
+    (option) => {
+      if (isDisabled == null ? void 0 : isDisabled(option)) return;
+      if (multiple) {
+        const exists = valueArray.some((v) => getKey(v) === getKey(option));
+        const next = exists ? valueArray.filter((v) => getKey(v) !== getKey(option)) : [...valueArray, option];
+        onChange(next);
+      } else {
+        onChange(option);
+      }
+    },
+    [multiple, valueArray, onChange, getKey, isDisabled]
+  );
+  const updateScrollState = useCallback(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 4);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
+  }, []);
+  useEffect(() => {
+    updateScrollState();
+    const el = trackRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", updateScrollState, { passive: true });
+    window.addEventListener("resize", updateScrollState);
+    return () => {
+      el.removeEventListener("scroll", updateScrollState);
+      window.removeEventListener("resize", updateScrollState);
+    };
+  }, [updateScrollState, options.length]);
+  const scrollByAmount = (dir) => {
+    var _a, _b;
+    const el = trackRef.current;
+    if (!el) return;
+    const cardWidth = (_b = (_a = el.firstElementChild) == null ? void 0 : _a.getBoundingClientRect().width) != null ? _b : 160;
+    const gap = 12;
+    el.scrollBy({ left: dir * (cardWidth + gap), behavior: "smooth" });
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      scrollByAmount(1);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      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)"
+      }
+    },
+    /* @__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
+      }
+    },
+    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"
+          }
+        },
+        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)"
+      }
+    },
+    /* @__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.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * ChoicePreviewCard — cartão de seleção VERTICAL: mini-preview (mockup/swatch/imagem) em
+ * cima, label + descrição embaixo, check no selecionado. Para escolhas onde o rótulo não
+ * basta e o usuário precisa VER a opção (layout da home, tema, densidade, modo).
+ *
+ * Quando usar cada "card clicável" do DS:
+ *   - ChoicePreviewCard — tile VERTICAL de preview selecionável (este).
+ *   - ChoiceCard        — row HORIZONTAL com radio (escolha exclusiva textual).
+ *   - SelectableCard    — clicável genérico (ação/navegação), button/a.
+ *   - ToggleCard        — toggle dentro de card.
+ *   - MediaTile         — thumbnail de navegação (sem estado selecionado).
+ *
+ * Estado selected é NEUTRO (stroke-focus), seguro no admin. A seleção única é gerenciada
+ * pelo consumidor (map + selected/onSelect) — sem grupo no DS de propósito.
+ */
+interface ChoicePreviewCardProps {
+    selected: boolean;
+    onSelect: () => void;
+    /** Mini-mockup/swatch/imagem no topo. */
+    preview: ReactNode;
+    label: string;
+    description?: string;
+    /** Bloqueado por gate de plano — mostra cadeado; o clique segue (consumidor abre paywall). */
+    locked?: boolean;
+    /** Desabilitado (não-clicável). */
+    disabled?: boolean;
+    /** Selo no canto do preview (ex.: "PRO"). */
+    badge?: ReactNode;
+    previewAspect?: 'square' | 'video' | 'wide';
+    className?: string;
+}
+declare function ChoicePreviewCard({ selected, onSelect, preview, label, description, locked, disabled, badge, previewAspect, className, }: ChoicePreviewCardProps): react.JSX.Element;
+
+export { ChoicePreviewCard, type ChoicePreviewCardProps };

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

@@ -0,0 +1,39 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { Check, Lock } from "lucide-react";
+function ChoicePreviewCard({
+  selected,
+  onSelect,
+  preview,
+  label,
+  description,
+  locked = false,
+  disabled = false,
+  badge,
+  previewAspect = "video",
+  className = ""
+}) {
+  const aspect = previewAspect === "square" ? "aspect-square" : previewAspect === "wide" ? "aspect-[2/1]" : "aspect-video";
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onSelect,
+      disabled,
+      "aria-pressed": selected,
+      className: [
+        "relative w-full text-left rounded-(--radius-card) border p-2 transition-all",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
+        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))
+  );
+}
+export {
+  ChoicePreviewCard
+};

package/dist/components/color-input.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+
+interface ColorInputProps {
+    /** Hex #RRGGBB. */
+    value: string;
+    /** Dispara apenas com hex válido, normalizado em UPPERCASE. */
+    onChange: (hex: string) => void;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * ColorInput — campo de cor único: swatch (abre o picker nativo) + hex
+ * editável, no mesmo controle. Molécula sobre os tokens do Input: mesma
+ * altura, borda, radius e anel de foco.
+ */
+declare function ColorInput({ value, onChange, size, disabled, className, 'aria-label': ariaLabel, }: ColorInputProps): react.JSX.Element;
+
+export { ColorInput, type ColorInputProps };

package/dist/components/color-input.js

@@ -0,0 +1,79 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useEffect, useRef, useState } from "react";
+const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+function ColorInput({
+  value,
+  onChange,
+  size = "md",
+  disabled = false,
+  className = "",
+  "aria-label": ariaLabel
+}) {
+  const [draft, setDraft] = useState(value.toUpperCase());
+  const inputRef = useRef(null);
+  useEffect(() => {
+    setDraft(value.toUpperCase());
+  }, [value]);
+  function commit() {
+    const raw = draft.trim();
+    const hex = raw.startsWith("#") ? raw : `#${raw}`;
+    if (HEX_RE.test(hex)) {
+      onChange(hex.toUpperCase());
+      setDraft(hex.toUpperCase());
+    } else {
+      setDraft(value.toUpperCase());
+    }
+  }
+  const h = size === "sm" ? "h-control-sm" : "h-control-md";
+  const swatch = size === "sm" ? "size-5" : "size-6";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: [
+        "inline-flex items-center gap-2 px-2.5 w-36",
+        h,
+        "rounded-(--radius-control) border border-stroke-control bg-surface-default",
+        "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();
+          }
+        },
+        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 {
+  ColorInput
+};

package/dist/components/combobox.d.ts

@@ -0,0 +1,70 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Combobox — Search + Select. Lista filtrada por digitação.
+ * Inspirado em shadcn Combobox / cmdk.
+ *
+ * Uso:
+ *   <Combobox
+ *     options={cities}
+ *     value={selected}
+ *     onChange={setSelected}
+ *     placeholder="Buscar cidade..."
+ *   />
+ *
+ * Multi-select:
+ *   <Combobox
+ *     multi
+ *     options={tags}
+ *     value={selectedTags}
+ *     onChange={setSelectedTags}
+ *   />
+ *
+ * Suporta filtro custom (por default usa includes case-insensitive em label).
+ */
+interface ComboboxOption {
+    value: string;
+    label: string;
+    /** Subtítulo opcional (ex: email abaixo do nome). */
+    description?: string;
+    /** Ícone leading. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface ComboboxSingleProps {
+    multi?: false;
+    value: string | null;
+    onChange: (value: string | null) => void;
+}
+interface ComboboxMultiProps {
+    multi: true;
+    value: string[];
+    onChange: (value: string[]) => void;
+}
+type ComboboxProps = (ComboboxSingleProps | ComboboxMultiProps) & {
+    options: ComboboxOption[];
+    placeholder?: string;
+    /** Filtro custom. default = includes case-insensitive em label/description. */
+    filter?: (option: ComboboxOption, query: string) => boolean;
+    /** Texto quando lista vazia. default = "Nada encontrado". */
+    emptyMessage?: string;
+    /** Largura. default = full. */
+    width?: 'full' | 'hug';
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    className?: string;
+    'aria-label'?: string;
+    /** Customiza o conteúdo do trigger fechado (ex: só o ícone). default = ícone + label. */
+    triggerContent?: (selected: ComboboxOption | null) => ReactNode;
+    /** Largura mínima do dropdown em px. Útil quando o trigger é compacto (width="hug"). */
+    dropdownMinWidth?: number;
+    /** Buscar→criar: quando a busca não casa com nenhuma opção (por label), mostra uma
+     *  linha "criar" que chama onCreate(query). Campo padrão tipo cliente/fornecedor. */
+    onCreate?: (query: string) => void;
+    /** Rótulo da linha de criar. default = `+ "<query>"`. Passe localizado. */
+    createLabel?: (query: string) => string;
+};
+declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Combobox, type ComboboxOption, type ComboboxProps };

package/dist/components/combobox.js

@@ -0,0 +1,213 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+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";
+const SIZE_CLASS = {
+  sm: "h-8 text-caption px-2.5",
+  md: "h-10 text-label px-3"
+};
+function defaultFilter(opt, q) {
+  var _a, _b;
+  if (!q) return true;
+  const lower = q.toLowerCase();
+  return opt.label.toLowerCase().includes(lower) || ((_b = (_a = opt.description) == null ? void 0 : _a.toLowerCase().includes(lower)) != null ? _b : false);
+}
+const Combobox = forwardRef(function Combobox2(props, ref) {
+  var _a;
+  const {
+    options,
+    placeholder = "Selecione\u2026",
+    filter = defaultFilter,
+    emptyMessage = "Nada encontrado",
+    width = "full",
+    size = "md",
+    disabled = false,
+    className = "",
+    triggerContent,
+    dropdownMinWidth,
+    onCreate,
+    createLabel = (q) => `+ "${q}"`
+  } = props;
+  const isMulti = props.multi === true;
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [dropdownWidth, setDropdownWidth] = useState(0);
+  const triggerRef = useRef(null);
+  const inputRef = useRef(null);
+  const id = useId();
+  useImperativeHandle(ref, () => triggerRef.current);
+  useEffect(() => {
+    if (open && triggerRef.current) {
+      setDropdownWidth(triggerRef.current.offsetWidth);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => {
+        var _a2;
+        return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      });
+      setActiveIdx(0);
+    } else {
+      setQuery("");
+    }
+  }, [open]);
+  const filtered = options.filter((o) => filter(o, query));
+  const trimmed = query.trim();
+  const showCreate = !!onCreate && trimmed.length > 0 && !options.some((o) => o.label.toLowerCase() === trimmed.toLowerCase());
+  function doCreate() {
+    if (!onCreate || !trimmed) return;
+    onCreate(trimmed);
+    setOpen(false);
+  }
+  function isSelected(opt) {
+    return isMulti ? props.value.includes(opt.value) : props.value === opt.value;
+  }
+  function selectedOption() {
+    var _a2;
+    if (isMulti) return null;
+    return (_a2 = options.find((o) => o.value === props.value)) != null ? _a2 : null;
+  }
+  function handleSelect(opt) {
+    if (opt.disabled) return;
+    if (isMulti) {
+      const current = props.value;
+      const next = current.includes(opt.value) ? current.filter((v) => v !== opt.value) : [...current, opt.value];
+      props.onChange(next);
+    } else {
+      props.onChange(opt.value);
+      setOpen(false);
+    }
+  }
+  function handleKey(e) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIdx((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIdx((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const opt = filtered[activeIdx];
+      if (opt) handleSelect(opt);
+      else if (showCreate) doCreate();
+    } else if (e.key === "Escape") {
+      setOpen(false);
+    }
+  }
+  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(
+    "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))
+    )))
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: ["relative inline-block", width === "full" ? "w-full" : "w-auto", className].join(" ") }, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      trigger: /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            if (!disabled) setOpen((o) => !o);
+          },
+          disabled,
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          "aria-controls": id,
+          className: [
+            "w-full flex items-center justify-between gap-2 rounded-(--radius-control) border border-stroke-control bg-surface-default",
+            "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" })
+      ),
+      triggerClassName: width === "full" ? "block w-full" : "inline-block",
+      placement: "bottom-start",
+      offset: 4,
+      open,
+      onOpenChange: (v) => {
+        if (!disabled) setOpen(v);
+      }
+    },
+    () => dropdown
+  ));
+});
+export {
+  Combobox
+};

package/dist/components/context-menu.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * ContextMenu — menu acionado por clique direito (contextmenu event).
+ *
+ * Uso:
+ *   <ContextMenu menu={({ close }) => (
+ *     <>
+ *       <MenuItem onClick={() => { copy(); close(); }}>Copiar</MenuItem>
+ *       <MenuItem onClick={() => { paste(); close(); }}>Colar</MenuItem>
+ *     </>
+ *   )}>
+ *     <div className="border p-4">Clique direito aqui</div>
+ *   </ContextMenu>
+ *
+ * Posiciona no ponto exato do clique. Fecha em ESC, clique fora, scroll.
+ */
+interface ContextMenuProps {
+    children: ReactNode;
+    /** Conteúdo do menu (mesmo formato do Menu — MenuItem, MenuSeparator, etc). */
+    menu: ReactNode | ((api: {
+        close: () => void;
+    }) => ReactNode);
+    /** Largura mínima em px. default = 180. */
+    minWidth?: number;
+    /** Desabilita o context menu. default = false. */
+    disabled?: boolean;
+    className?: string;
+}
+declare const ContextMenu: react.ForwardRefExoticComponent<ContextMenuProps & react.RefAttributes<HTMLDivElement>>;
+
+export { ContextMenu, type ContextMenuProps };