@rojaostudio/ds 1.0.0

package/dist/components/radio.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: string;
+    size?: 'sm' | 'md';
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+interface RadioOption<T extends string = string> {
+    value: T;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+interface RadioGroupProps<T extends string = string> {
+    name: string;
+    value: T | null;
+    onChange: (value: T) => void;
+    options: RadioOption<T>[];
+    /** Layout. default = vertical. */
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md';
+    error?: string;
+    /** Label do group como `<legend>`. */
+    legend?: ReactNode;
+    required?: boolean;
+    className?: string;
+}
+declare function RadioGroup<T extends string = string>({ name, value, onChange, options, orientation, size, error, legend, required, className, }: RadioGroupProps<T>): react.JSX.Element;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioOption, type RadioProps };

package/dist/components/radio.js

@@ -0,0 +1,97 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { forwardRef, useId } from "react";
+const SIZE_CLASS = {
+  sm: { box: "size-3.5", dot: "size-1.5", label: "text-caption" },
+  md: { box: "size-4", dot: "size-2", label: "text-label" }
+};
+const Radio = forwardRef(function Radio2(_a, ref) {
+  var _b = _a, { label, description, error, size = "md", className = "", id } = _b, props = __objRest(_b, ["label", "description", "error", "size", "className", "id"]);
+  const generatedId = useId();
+  const inputId = id != null ? id : generatedId;
+  const errId = `${inputId}-error`;
+  const sz = SIZE_CLASS[size];
+  return /* @__PURE__ */ React.createElement("div", { className: "inline-flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      htmlFor: inputId,
+      className: [
+        "inline-flex items-start gap-2 cursor-pointer",
+        "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    /* @__PURE__ */ React.createElement("span", { className: ["relative flex shrink-0 mt-0.5", sz.box].join(" ") }, /* @__PURE__ */ React.createElement(
+      "input",
+      __spreadValues({
+        ref,
+        type: "radio",
+        id: inputId,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errId : void 0,
+        className: [
+          "peer appearance-none rounded-full shrink-0 cursor-pointer",
+          sz.box,
+          "bg-surface-default",
+          error ? "border border-danger checked:border-danger" : "border border-stroke-control checked:border-brand-primary",
+          "focus-visible:ring-2 focus-visible:ring-stroke-focus/30 focus-visible:outline-none",
+          "disabled:cursor-not-allowed transition-colors"
+        ].join(" ")
+      }, props)
+    ), /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": true,
+        className: [
+          "absolute inset-0 m-auto rounded-full bg-transparent transition-colors pointer-events-none",
+          sz.dot,
+          error ? "peer-checked:bg-danger" : "peer-checked:bg-brand-primary"
+        ].join(" ")
+      }
+    )),
+    (label || description) && /* @__PURE__ */ React.createElement("span", { className: "flex flex-col gap-0.5 select-none" }, label && /* @__PURE__ */ React.createElement("span", { className: [sz.label, "text-fg-primary leading-snug"].join(" ") }, label), description && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted leading-snug" }, description))
+  ), error && /* @__PURE__ */ React.createElement("p", { id: errId, className: [sz.box === "size-3.5" ? "pl-5" : "pl-6", "text-caption text-danger-text"].join(" ") }, error));
+});
+function RadioGroup({
+  name,
+  value,
+  onChange,
+  options,
+  orientation = "vertical",
+  size = "md",
+  error,
+  legend,
+  required,
+  className = ""
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "fieldset",
+    {
+      className: ["flex flex-col gap-2", className].join(" "),
+      "aria-invalid": error ? true : void 0
+    },
+    legend && /* @__PURE__ */ React.createElement("legend", { className: "text-label font-medium text-fg-primary mb-0.5" }, legend, required && /* @__PURE__ */ React.createElement("span", { className: "text-danger ml-0.5", "aria-label": "obrigat\xF3rio" }, "*")),
+    /* @__PURE__ */ React.createElement("div", { className: ["flex", orientation === "horizontal" ? "flex-row gap-4 flex-wrap" : "flex-col gap-2"].join(" ") }, options.map((opt) => /* @__PURE__ */ React.createElement(
+      Radio,
+      {
+        key: opt.value,
+        name,
+        value: opt.value,
+        checked: value === opt.value,
+        onChange: () => onChange(opt.value),
+        label: opt.label,
+        description: opt.description,
+        disabled: opt.disabled,
+        size
+      }
+    ))),
+    error && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-danger-text" }, error)
+  );
+}
+export {
+  Radio,
+  RadioGroup
+};

package/dist/components/row-actions.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface RowActionItem {
+    label: string;
+    icon?: ReactNode;
+    variant?: 'default' | 'danger';
+    disabled?: boolean;
+    onClick: () => void;
+}
+interface RowActionsProps {
+    /** Rótulo do botão principal (ex: "Ver detalhes"). */
+    primaryLabel: string;
+    /** Se href, renderiza <a>; se onClick, renderiza <button>. */
+    primaryHref?: string;
+    primaryOnClick?: () => void;
+    /** Itens do menu de 3-pontinhos. Se vazio, o menu não é renderizado. */
+    items?: RowActionItem[];
+    /** Separador antes de itens "danger" (último bloco). default: true quando há danger items. */
+    dangerSeparator?: boolean;
+}
+declare function RowActions({ primaryLabel, primaryHref, primaryOnClick, items, dangerSeparator, }: RowActionsProps): react.JSX.Element;
+
+export { type RowActionItem, RowActions, type RowActionsProps };

package/dist/components/row-actions.js

@@ -0,0 +1,76 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { MoreVertical } from "lucide-react";
+import { Menu, MenuItem, MenuSeparator } from "./menu.js";
+import { IconButton } from "./icon-button.js";
+function RowActions({
+  primaryLabel,
+  primaryHref,
+  primaryOnClick,
+  items = [],
+  dangerSeparator
+}) {
+  const hasDanger = items.some((i) => i.variant === "danger");
+  const showSep = dangerSeparator != null ? dangerSeparator : hasDanger;
+  const normalItems = showSep ? items.filter((i) => i.variant !== "danger") : items;
+  const dangerItems = showSep ? items.filter((i) => i.variant === "danger") : [];
+  const primaryCls = "inline-flex items-center gap-1 text-caption font-medium border border-stroke-default rounded-(--radius-control) px-2.5 py-1 text-fg-secondary hover:bg-surface-page hover:border-stroke-strong transition-colors whitespace-nowrap";
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end gap-1" }, primaryHref ? /* @__PURE__ */ React.createElement("a", { href: primaryHref, className: primaryCls, onClick: (e) => e.stopPropagation() }, primaryLabel) : primaryOnClick ? /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: primaryCls,
+      onClick: (e) => {
+        e.stopPropagation();
+        primaryOnClick();
+      }
+    },
+    primaryLabel
+  ) : null, items.length > 0 && /* @__PURE__ */ React.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      trigger: /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          icon: /* @__PURE__ */ React.createElement(MoreVertical, null),
+          "aria-label": "Mais a\xE7\xF5es",
+          size: "sm",
+          variant: "ghost",
+          color: "secondary"
+        }
+      ),
+      placement: "bottom-end",
+      minWidth: 160
+    },
+    ({ close }) => /* @__PURE__ */ React.createElement(React.Fragment, null, normalItems.map((item, i) => /* @__PURE__ */ React.createElement(
+      MenuItem,
+      {
+        key: i,
+        icon: item.icon,
+        variant: item.variant,
+        disabled: item.disabled,
+        onClick: () => {
+          item.onClick();
+          close();
+        }
+      },
+      item.label
+    )), showSep && dangerItems.length > 0 && /* @__PURE__ */ React.createElement(MenuSeparator, null), dangerItems.map((item, i) => /* @__PURE__ */ React.createElement(
+      MenuItem,
+      {
+        key: `d-${i}`,
+        icon: item.icon,
+        variant: "danger",
+        disabled: item.disabled,
+        onClick: () => {
+          item.onClick();
+          close();
+        }
+      },
+      item.label
+    )))
+  )));
+}
+export {
+  RowActions
+};

package/dist/components/saving-bar-context.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type SavingBarRegistration = {
+    /** Internal id assigned by usePageSavingBar — do not set manually. */
+    id?: string;
+    visible: boolean;
+    message?: string;
+    onSave?: () => void | Promise<void>;
+    onDiscard?: () => void;
+    pending?: boolean;
+    saveLabel?: string;
+    discardLabel?: string;
+    /** Optional third button shown between Discard and Save. Hidden when bars are aggregated. */
+    secondary?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+declare function SavingBarProvider({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * Register a saving bar for the current page/section.
+ * The DS renders a single floating bar that aggregates all registrations:
+ *   - 0 visible → hidden
+ *   - 1 visible → shown directly (message + Salvar + Descartar)
+ *   - 2+ visible → "{N} alterações pendentes" + "Salvar tudo" + "Descartar tudo"
+ *
+ * Pass null to clear. Cleanup on unmount is automatic.
+ */
+declare function usePageSavingBar(reg: SavingBarRegistration | null, deps?: unknown[]): void;
+/**
+ * #485 — true quando existe QUALQUER saving-bar visível. O FAB (mesmo canto inferior
+ * direito) usa isto pra se esconder e não ser tapado pela barra.
+ */
+declare function useSavingBarActive(): boolean;
+declare function SavingBarRoot(): react.JSX.Element | null;
+
+export { SavingBarProvider, type SavingBarRegistration, SavingBarRoot, usePageSavingBar, useSavingBarActive };

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

@@ -0,0 +1,125 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Loader2 } from "lucide-react";
+const SavingBarContext = createContext({
+  bars: /* @__PURE__ */ new Map(),
+  register: () => {
+  },
+  unregister: () => {
+  }
+});
+function SavingBarProvider({ children }) {
+  const [bars, setBars] = useState(() => /* @__PURE__ */ new Map());
+  const register = useCallback((id, reg) => {
+    setBars((prev) => {
+      const next = new Map(prev);
+      next.set(id, __spreadProps(__spreadValues({}, reg), { id }));
+      return next;
+    });
+  }, []);
+  const unregister = useCallback((id) => {
+    setBars((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const value = useMemo(() => ({ bars, register, unregister }), [bars, register, unregister]);
+  return /* @__PURE__ */ React.createElement(SavingBarContext.Provider, { value }, children);
+}
+function usePageSavingBar(reg, deps = []) {
+  const id = useId();
+  const { register, unregister } = useContext(SavingBarContext);
+  const regRef = useRef(reg);
+  regRef.current = reg;
+  useEffect(() => {
+    if (regRef.current) register(id, regRef.current);
+    else unregister(id);
+    return () => unregister(id);
+  }, [id, register, unregister, ...deps]);
+}
+function useSavingBarActive() {
+  const { bars } = useContext(SavingBarContext);
+  for (const b of bars.values()) if (b.visible) return true;
+  return false;
+}
+function SavingBarRoot() {
+  var _a, _b, _c;
+  const { bars } = useContext(SavingBarContext);
+  const [aggPending, setAggPending] = useState(false);
+  const visible = useMemo(
+    () => [...bars.values()].filter((b) => b.visible),
+    [bars]
+  );
+  if (visible.length === 0) return null;
+  const single = visible.length === 1 ? visible[0] : null;
+  const anyPending = aggPending || visible.some((b) => b.pending);
+  async function saveAll() {
+    setAggPending(true);
+    try {
+      for (const b of visible) {
+        if (b.onSave) await b.onSave();
+      }
+    } finally {
+      setAggPending(false);
+    }
+  }
+  function discardAll() {
+    var _a2;
+    for (const b of visible) (_a2 = b.onDiscard) == null ? void 0 : _a2.call(b);
+  }
+  const message = (_a = single == null ? void 0 : single.message) != null ? _a : null;
+  const saveLabel = (_b = single == null ? void 0 : single.saveLabel) != null ? _b : "Salvar tudo";
+  const discardLabel = (_c = single == null ? void 0 : single.discardLabel) != null ? _c : "Descartar tudo";
+  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
+  )));
+}
+export {
+  SavingBarProvider,
+  SavingBarRoot,
+  usePageSavingBar,
+  useSavingBarActive
+};

package/dist/components/saving-bar.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface SavingBarProps {
+    visible: boolean;
+    onSave?: () => void;
+    onDiscard?: () => void;
+    pending?: boolean;
+    saveLabel?: string;
+    discardLabel?: string;
+    message?: string;
+    children?: ReactNode;
+    /** floating = fixed bottom-right; inline = inside page flow */
+    variant?: 'floating' | 'inline';
+}
+declare function SavingBar({ visible, onSave, onDiscard, pending, saveLabel, discardLabel, message, children, variant, }: SavingBarProps): react.JSX.Element;
+
+export { SavingBar, type SavingBarProps };

package/dist/components/saving-bar.js

@@ -0,0 +1,72 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { Loader2 } from "lucide-react";
+function SavingBar({
+  visible,
+  onSave,
+  onDiscard,
+  pending = false,
+  saveLabel = "Salvar",
+  discardLabel = "Descartar",
+  message,
+  children,
+  variant = "floating"
+}) {
+  const pill = /* @__PURE__ */ React.createElement(
+    "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
+    )
+  );
+  if (variant === "inline") {
+    return /* @__PURE__ */ React.createElement(
+      "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
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "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
+  );
+}
+export {
+  SavingBar
+};

package/dist/components/search.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { InputHTMLAttributes } from 'react';
+
+/**
+ * Search — input dedicado de busca. Ícone leading + botão clear quando tem valor.
+ *
+ * Uso (uncontrolled):
+ *   <Search placeholder="Buscar pedidos..." onSearch={q => doSearch(q)} />
+ *
+ * Uso (controlled):
+ *   <Search value={q} onChange={e => setQ(e.target.value)} onClear={() => setQ('')} />
+ *
+ * Disparos de busca:
+ *   - onSearch(query): debounce automático (default 250ms) ou Enter pressed
+ *   - onChange: cada keystroke (caso queira live-search direto)
+ */
+interface SearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'> {
+    onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
+    /** Callback debounced (250ms) ou em Enter. */
+    onSearch?: (query: string) => void;
+    /** Callback do botão clear. */
+    onClear?: () => void;
+    /** Tamanho. default = md. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Largura full ou hug. default = full. */
+    width?: 'full' | 'hug';
+}
+declare const Search: react.ForwardRefExoticComponent<SearchProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Search, type SearchProps };

package/dist/components/search.js

@@ -0,0 +1,81 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { forwardRef, useEffect, useRef } from "react";
+import { Search as SearchIcon, X } from "lucide-react";
+const SIZE_CLASS = {
+  sm: "h-control-sm text-caption pl-8 pr-7",
+  md: "h-control-md text-label pl-9 pr-8",
+  lg: "h-control-lg text-body pl-10 pr-9"
+};
+const ICON_SIZE = { sm: 14, md: 16, lg: 18 };
+const ICON_POS = { sm: "left-2.5", md: "left-3", lg: "left-3.5" };
+const CLEAR_POS = { sm: "right-1.5", md: "right-2", lg: "right-2.5" };
+const Search = forwardRef(function Search2(_a, ref) {
+  var _b = _a, { size = "md", width = "full", onSearch, onClear, onChange, value, className = "" } = _b, rest = __objRest(_b, ["size", "width", "onSearch", "onClear", "onChange", "value", "className"]);
+  const hasValue = !!(value != null ? value : "");
+  const debounceRef = useRef(null);
+  useEffect(() => () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+  }, []);
+  function handleChange(e) {
+    onChange == null ? void 0 : onChange(e);
+    if (onSearch) {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => onSearch(e.target.value), 250);
+    }
+  }
+  function handleClear() {
+    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 })
+  ));
+});
+export {
+  Search
+};

package/dist/components/section-card.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface SectionCardProps {
+    label: string;
+    /** Secondary text shown beside the label (e.g. a subtitle or count) */
+    badge?: string;
+    open: boolean;
+    onToggle: () => void;
+    children: ReactNode;
+}
+declare function SectionCard({ label, badge, open, onToggle, children }: SectionCardProps): react.JSX.Element;
+
+export { SectionCard, type SectionCardProps };

package/dist/components/section-card.js

@@ -0,0 +1,49 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { ChevronDown, ChevronRight } from "lucide-react";
+function SectionCard({ label, badge, open, onToggle, children }) {
+  return /* @__PURE__ */ React.createElement(
+    "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)
+  );
+}
+export {
+  SectionCard
+};