@rojaostudio/ds 1.0.0

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

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * SectionHeader — cabeçalho de seção fora de card: eyebrow (overline) opcional
+ * + título + texto de apoio. Areja a página agrupando conteúdo sem moldura.
+ *
+ * Uso:
+ *   <SectionHeader title="Seções da vitrine" />
+ *   <SectionHeader eyebrow="Conteúdo da vitrine" number="02" title="Seções da vitrine" description="Ative, desative e edite o que aparece" />
+ *   <SectionHeader title="Zonas" action={<Button size="sm">Adicionar</Button>} />
+ *
+ * O eyebrow consome os tokens --font-size/weight/letter-spacing-eyebrow — a
+ * decisão de "quão pequeno/espaçado" vive em base.css, não em cada tela.
+ */
+interface SectionHeaderProps {
+    /** Micro-rótulo uppercase acima do título (overline/kicker). */
+    eyebrow?: string;
+    /** Número de seção/etapa — prefixa o eyebrow: "02 · CONTEÚDO". */
+    number?: string;
+    title: string;
+    description?: string;
+    /** Slot à direita do título (ação, badge). */
+    action?: ReactNode;
+    className?: string;
+}
+declare function SectionHeader({ eyebrow, number, title, description, action, className }: SectionHeaderProps): react.JSX.Element;
+
+export { SectionHeader, type SectionHeaderProps };

package/dist/components/section-header.js

@@ -0,0 +1,7 @@
+import "../chunk-ORMEWXMH.js";
+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)));
+}
+export {
+  SectionHeader
+};

package/dist/components/select.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { SelectHTMLAttributes } from 'react';
+
+type SelectSize = 'sm' | 'md' | 'lg';
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    label?: string;
+    helper?: string;
+    error?: string;
+    placeholder?: string;
+    options?: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    size?: SelectSize;
+    required?: boolean;
+    optional?: boolean;
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+export { Select, type SelectProps, type SelectSize };

package/dist/components/select.js

@@ -0,0 +1,140 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { ChevronDown, Check } from "lucide-react";
+import { BottomSheet } from "./bottom-sheet.js";
+const SIZE = {
+  sm: { h: "h-control-sm", text: "text-caption", padL: "pl-2.5", padR: "pr-7" },
+  md: { h: "h-control-md", text: "text-label", padL: "pl-3", padR: "pr-9" },
+  lg: { h: "h-control-lg", text: "text-body", padL: "pl-4", padR: "pr-10" }
+};
+function optionsFromChildren(children) {
+  const out = [];
+  Children.forEach(children, (child) => {
+    var _a;
+    if (!isValidElement(child)) return;
+    const props = child.props;
+    if (child.type === "option" && props.value !== void 0) {
+      out.push({
+        value: String(props.value),
+        label: typeof props.children === "string" ? props.children : String((_a = props.children) != null ? _a : props.value),
+        disabled: props.disabled
+      });
+    }
+  });
+  return out;
+}
+const Select = forwardRef(function Select2(_a, ref) {
+  var _b = _a, { label, helper, error, options = [], placeholder, size = "md", required, optional, className = "", id, children } = _b, props = __objRest(_b, ["label", "helper", "error", "options", "placeholder", "size", "required", "optional", "className", "id", "children"]);
+  var _a2;
+  const generatedId = useId();
+  const selectId = id != null ? id : generatedId;
+  const sz = SIZE[size];
+  const innerRef = useRef(null);
+  const setRefs = (el) => {
+    innerRef.current = el;
+    if (typeof ref === "function") ref(el);
+    else if (ref) ref.current = el;
+  };
+  const [isXs, setIsXs] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [sheetValue, setSheetValue] = useState("");
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 639px)");
+    const update = () => setIsXs(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  const allOptions = options.length > 0 ? options : optionsFromChildren(children);
+  function openSheet() {
+    var _a3, _b2;
+    setSheetValue((_b2 = (_a3 = innerRef.current) == null ? void 0 : _a3.value) != null ? _b2 : "");
+    setSheetOpen(true);
+  }
+  function commitSheetValue(value) {
+    var _a3;
+    const el = innerRef.current;
+    setSheetOpen(false);
+    if (!el || el.value === value) return;
+    const setter = (_a3 = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")) == null ? void 0 : _a3.set;
+    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" })
+    );
+  }))));
+});
+export {
+  Select
+};

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

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * SelectableCard — cartão CLICÁVEL genérico (tile de ação OU escolha).
+ *
+ * Resolve os "card-as-div" reimplementados como `<button className="rounded-xl border">`:
+ * tiles de ação (abrir modal, navegar), cards de escolha, pricing card (com ribbon).
+ * Renderiza `<button>` (ação) ou `<a>` (navegação) — semântica correta, foco acessível.
+ *
+ * Estado `selected` usa destaque NEUTRO (border-focus + surface-raised) — NÃO usa brand,
+ * então é seguro no admin (onde cor de marca é proibida) e na vitrine.
+ *
+ * indicator:
+ *   'radio'   — bolinha de seleção (escolha exclusiva)
+ *   'check'   — check quando selecionado (multi-seleção/confirmação)
+ *   'chevron' — seta de navegação (tile que leva a outra tela)
+ *   'none'    — sem indicador (tile de ação puro)
+ */
+interface SelectableCardProps {
+    selected?: boolean;
+    onClick?: () => void;
+    /** Elemento renderizado: 'button' (ação, default) ou 'a' (navegação). */
+    as?: 'button' | 'a';
+    href?: string;
+    indicator?: 'radio' | 'check' | 'chevron' | 'none';
+    /** Selo flutuante no topo (ex: "Mais popular" no pricing card). */
+    ribbon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+declare function SelectableCard({ selected, onClick, as, href, indicator, ribbon, disabled, className, children, }: SelectableCardProps): react.JSX.Element;
+
+export { SelectableCard, type SelectableCardProps };

package/dist/components/selectable-card.js

@@ -0,0 +1,27 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { Check, ChevronRight } from "lucide-react";
+function SelectableCard({
+  selected = false,
+  onClick,
+  as = "button",
+  href,
+  indicator = "none",
+  ribbon,
+  disabled = false,
+  className = "",
+  children
+}) {
+  const base = "relative w-full flex items-center gap-4 px-4 py-4 rounded-(--radius-card) border text-left transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus";
+  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 }));
+  if (as === "a") {
+    return /* @__PURE__ */ React.createElement("a", { href, className: cls, "aria-disabled": disabled || void 0, "aria-current": selected || void 0 }, inner);
+  }
+  return /* @__PURE__ */ React.createElement("button", { type: "button", onClick, disabled, "aria-pressed": selected, className: cls }, inner);
+}
+export {
+  SelectableCard
+};

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

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * SettingRow — uma linha de configuração: título + texto de apoio à ESQUERDA,
+ * controle à DIREITA. Padrão "Settings" (rows com divisor, no lugar de card-por-item).
+ * Empilha no mobile (label em cima, controle embaixo). Os divisores entre rows são
+ * aplicados pelo <SettingsList> que as agrupa — a row nunca desenha a própria borda.
+ *
+ * controlWidth:
+ *   'auto' — controle estreito encostado à direita (toggle, pill, dropdown curto). DEFAULT.
+ *   'fill' — input/select que ocupa uma coluna de largura previsível (até ~20rem).
+ *   'full' — controle LARGO (fileira de <ChoicePreviewCard>): largura total, sempre abaixo do label.
+ *
+ * a11y: passe `htmlFor` quando o controle for um input/toggle único — o label vira
+ * <label> associado (sem isso, leitores de tela não associam rótulo↔controle).
+ */
+interface SettingRowProps {
+    label: ReactNode;
+    description?: ReactNode;
+    /** Ícone opcional à esquerda do label. */
+    icon?: ReactNode;
+    /** id do controle — associa o label (htmlFor) pra leitores de tela. */
+    htmlFor?: string;
+    controlWidth?: 'auto' | 'fill' | 'full';
+    /** Alinhamento vertical do controle vs. label. 'start' p/ textarea/multilinha. */
+    align?: 'center' | 'start';
+    control: ReactNode;
+    className?: string;
+}
+declare function SettingRow({ label, description, icon, htmlFor, controlWidth, align, control, className, }: SettingRowProps): react.JSX.Element;
+
+export { SettingRow, type SettingRowProps };

package/dist/components/setting-row.js

@@ -0,0 +1,19 @@
+import "../chunk-ORMEWXMH.js";
+function SettingRow({
+  label,
+  description,
+  icon,
+  htmlFor,
+  controlWidth = "auto",
+  align = "center",
+  control,
+  className = ""
+}) {
+  const cols = controlWidth === "full" ? "" : controlWidth === "fill" ? "sm:grid-cols-[minmax(0,1fr)_minmax(0,20rem)]" : "sm:grid-cols-[1fr_auto]";
+  const alignCls = align === "start" ? "sm:items-start" : "sm:items-center";
+  const LabelTag = htmlFor ? "label" : "div";
+  return /* @__PURE__ */ React.createElement("div", { className: ["grid grid-cols-1 gap-x-6 gap-y-3 py-4", cols, alignCls, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-3 min-w-0" }, icon && /* @__PURE__ */ React.createElement("div", { className: "shrink-0 text-fg-muted mt-0.5" }, icon), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement(LabelTag, { htmlFor, className: "block text-sm font-medium text-fg-primary" }, label), description && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-fg-muted mt-0.5 leading-snug" }, description))), /* @__PURE__ */ React.createElement("div", { className: controlWidth === "auto" ? "sm:justify-self-end" : "" }, control));
+}
+export {
+  SettingRow
+};

package/dist/components/settings-list.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * SettingsList — agrupa <SettingRow> num bloco com divisores entre elas. Substitui o
+ * boilerplate repetido `Card > CardBody noPadding > div.divide-y` espalhado pelas telas.
+ *
+ * O título do grupo é simples (sem número/eyebrow) — o padrão "Settings" não numera
+ * seções (são ajustes paralelos, não etapas). Divisor = `stroke-default` (visível, não o
+ * `stroke-subtle` quase invisível do Untitled UI) — acessibilidade > estética de Figma.
+ */
+interface SettingsListProps {
+    /** Título simples do grupo. Omita se o grupo não tem cabeçalho. */
+    title?: string;
+    description?: string;
+    /** Ação à direita do título (delega ao SectionHeader). */
+    action?: ReactNode;
+    /** Moldura (card) em volta. Default true; false = lista solta. */
+    framed?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+declare function SettingsList({ title, description, action, framed, children, className, }: SettingsListProps): react.JSX.Element;
+
+export { SettingsList, type SettingsListProps };

package/dist/components/settings-list.js

@@ -0,0 +1,22 @@
+import "../chunk-ORMEWXMH.js";
+import { SectionHeader } from "./section-header.js";
+function SettingsList({
+  title,
+  description,
+  action,
+  framed = true,
+  children,
+  className = ""
+}) {
+  const list = /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: framed ? "rounded-(--radius-card) border border-stroke-default bg-surface-default px-4 [&>*]:border-t [&>*]:border-stroke-default [&>*:first-child]:border-t-0" : "[&>*]:border-t [&>*]:border-stroke-default [&>*:first-child]:border-t-0"
+    },
+    children
+  );
+  return /* @__PURE__ */ React.createElement("section", { className: ["space-y-3", className].filter(Boolean).join(" ") }, title && /* @__PURE__ */ React.createElement(SectionHeader, { title, description, action }), list);
+}
+export {
+  SettingsList
+};

package/dist/components/skeleton.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+
+declare const SKELETON_VARIANTS: {
+    readonly text: "h-4 w-full";
+    readonly title: "h-6 w-3/5";
+    readonly avatar: "size-10 rounded-full";
+    readonly circle: "size-12 rounded-full";
+    readonly button: "h-10 w-24 rounded-(--radius-card)";
+    readonly card: "h-32 w-full rounded-(--radius-card)";
+    readonly line: "h-3 w-full";
+};
+type SkeletonVariant = keyof typeof SKELETON_VARIANTS;
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: SkeletonVariant;
+    /** Renderiza N skeletons stackados (útil pra simular lista). */
+    count?: number;
+    /** Gap entre skeletons quando count > 1. default = 'sm'. */
+    gap?: 'sm' | 'md' | 'lg';
+    /** Sem animação pulse (placeholder estático). */
+    noPulse?: boolean;
+}
+declare function Skeleton({ variant, count, gap, noPulse, className, ...props }: SkeletonProps): react.JSX.Element;
+
+export { Skeleton, type SkeletonProps, type SkeletonVariant };

package/dist/components/skeleton.js

@@ -0,0 +1,49 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+const SKELETON_VARIANTS = {
+  text: "h-4 w-full",
+  title: "h-6 w-3/5",
+  avatar: "size-10 rounded-full",
+  circle: "size-12 rounded-full",
+  button: "h-10 w-24 rounded-(--radius-card)",
+  card: "h-32 w-full rounded-(--radius-card)",
+  line: "h-3 w-full"
+};
+const GAP = { sm: "gap-2", md: "gap-3", lg: "gap-4" };
+function Skeleton(_a) {
+  var _b = _a, {
+    variant = "text",
+    count = 1,
+    gap = "sm",
+    noPulse = false,
+    className = ""
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "count",
+    "gap",
+    "noPulse",
+    "className"
+  ]);
+  const classes = [
+    noPulse ? "" : "animate-pulse",
+    "rounded bg-stroke-default/50",
+    SKELETON_VARIANTS[variant],
+    className
+  ].filter(Boolean).join(" ");
+  if (count === 1) return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: classes }, props));
+  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col", GAP[gap]].join(" ") }, Array.from({ length: count }).map((_, i) => /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadProps(__spreadValues({
+      key: i,
+      className: classes
+    }, i === 0 ? props : {}), {
+      style: variant === "text" && i === count - 1 ? { width: "70%" } : void 0
+    })
+  )));
+}
+export {
+  Skeleton
+};

package/dist/components/slider.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { InputHTMLAttributes } from 'react';
+
+/**
+ * Slider — input range single (sem range duplo). Inspirado em M3 Slider.
+ *
+ * Uso:
+ *   <Slider value={vol} onChange={setVol} min={0} max={100} />
+ *   <Slider value={qty} onChange={setQty} min={1} max={50} step={1} showValue />
+ *   <Slider value={pct} onChange={setPct} formatValue={v => `${v}%`} showValue />
+ *
+ * Sem range duplo por enquanto (M3 e shadcn separam em RangeSlider). Adicionar
+ * componente próprio quando precisar.
+ */
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'size'> {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Mostra valor atual à direita. */
+    showValue?: boolean;
+    /** Formata valor (ex: `v => `R$ ${v}``). */
+    formatValue?: (value: number) => string;
+    /** Mostra ticks min/max abaixo. */
+    showRange?: boolean;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Slider, type SliderProps };

package/dist/components/slider.js

@@ -0,0 +1,79 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { forwardRef, useId } from "react";
+const TRACK_HEIGHT = { sm: 4, md: 6 };
+const THUMB_SIZE = { sm: 14, md: 18 };
+const Slider = forwardRef(function Slider2(_a, ref) {
+  var _b = _a, {
+    value,
+    onChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    showValue = false,
+    formatValue,
+    showRange = false,
+    size = "md",
+    disabled,
+    className = ""
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "onChange",
+    "min",
+    "max",
+    "step",
+    "showValue",
+    "formatValue",
+    "showRange",
+    "size",
+    "disabled",
+    "className"
+  ]);
+  const id = useId();
+  const pct = (value - min) / (max - min) * 100;
+  const fmt = formatValue != null ? formatValue : ((v) => String(v));
+  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col gap-2", className].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 flex items-center", style: { height: THUMB_SIZE[size] } }, /* @__PURE__ */ React.createElement(
+    "input",
+    __spreadValues({
+      ref,
+      id,
+      type: "range",
+      min,
+      max,
+      step,
+      value,
+      disabled,
+      onChange: (e) => onChange(Number(e.target.value)),
+      className: [
+        "rojao-slider absolute inset-0 w-full bg-transparent appearance-none cursor-pointer",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-offset-2 focus-visible:rounded-full",
+        "disabled:cursor-not-allowed disabled:opacity-50"
+      ].join(" "),
+      style: {
+        ["--rojao-slider-pct"]: `${pct}%`,
+        ["--rojao-slider-track-h"]: `${TRACK_HEIGHT[size]}px`,
+        ["--rojao-slider-thumb-size"]: `${THUMB_SIZE[size]}px`
+      }
+    }, rest)
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "absolute inset-x-0 rounded-full bg-stroke-default pointer-events-none",
+      style: { height: TRACK_HEIGHT[size] }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "absolute left-0 rounded-full bg-brand-primary pointer-events-none",
+      style: { height: TRACK_HEIGHT[size], width: `${pct}%` }
+    }
+  )), showValue && /* @__PURE__ */ React.createElement("span", { className: "text-label font-medium text-fg-primary tabular-nums shrink-0 min-w-[3ch] text-right" }, fmt(value))), showRange && /* @__PURE__ */ React.createElement("div", { className: "flex justify-between text-[11px] font-mono text-fg-muted" }, /* @__PURE__ */ React.createElement("span", null, fmt(min)), /* @__PURE__ */ React.createElement("span", null, fmt(max))));
+});
+export {
+  Slider
+};

package/dist/components/spinner.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+
+type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerColor = 'current' | 'brand' | 'muted' | 'inverse';
+interface SpinnerProps {
+    size?: SpinnerSize;
+    color?: SpinnerColor;
+    /** Texto pra leitor de tela. default = "Carregando…". */
+    label?: string;
+    className?: string;
+}
+declare function Spinner({ size, color, label, className, }: SpinnerProps): react.JSX.Element;
+
+export { Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize };

package/dist/components/spinner.js

@@ -0,0 +1,36 @@
+import "../chunk-ORMEWXMH.js";
+const SIZE = {
+  xs: "size-3",
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6",
+  xl: "size-8"
+};
+const COLOR = {
+  current: "text-current",
+  brand: "text-brand-primary",
+  muted: "text-fg-muted",
+  inverse: "text-fg-inverse"
+};
+function Spinner({
+  size = "md",
+  color = "current",
+  label = "Carregando\u2026",
+  className = ""
+}) {
+  return /* @__PURE__ */ React.createElement("span", { role: "status", "aria-label": label, className: "inline-flex" }, /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      className: ["animate-spin", SIZE[size], COLOR[color], className].join(" "),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3" }),
+    /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, label));
+}
+export {
+  Spinner
+};

package/dist/components/step-progress.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+
+interface StepProgressProps {
+    /** Zero-based current step index */
+    current: number;
+    /** Total number of steps */
+    total: number;
+    className?: string;
+}
+declare function StepProgress({ current, total, className }: StepProgressProps): react.JSX.Element;
+
+export { StepProgress, type StepProgressProps };

package/dist/components/step-progress.js

@@ -0,0 +1,24 @@
+import "../chunk-ORMEWXMH.js";
+function StepProgress({ current, total, className = "" }) {
+  const pct = Math.round((current + 1) / total * 100);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: ["w-full h-1.5 rounded-full overflow-hidden [background:var(--border-subtle)]", className].join(" "),
+      role: "progressbar",
+      "aria-valuenow": current + 1,
+      "aria-valuemin": 1,
+      "aria-valuemax": total
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "h-full rounded-full transition-all duration-300 ease-out [background:var(--brand-primary)]",
+        style: { width: `${pct}%` }
+      }
+    )
+  );
+}
+export {
+  StepProgress
+};