@rojaostudio/ds 1.0.0

package/dist/components/dropzone.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Dropzone — área de arrastar-e-soltar / clicar para selecionar arquivos.
+ * Substitui `<div className="border-2 border-dashed rounded-xl" onDrop=...>` reimplementado.
+ * Gerencia estado de drag, input file escondido e clique. O conteúdo (ícone + texto) é livre.
+ */
+interface DropzoneProps {
+    onFiles: (files: FileList) => void;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+declare function Dropzone({ onFiles, accept, multiple, disabled, className, children }: DropzoneProps): react.JSX.Element;
+
+export { Dropzone, type DropzoneProps };

package/dist/components/dropzone.js

@@ -0,0 +1,65 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useRef, useState } from "react";
+function Dropzone({ onFiles, accept, multiple = false, disabled = false, className = "", children }) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  function handleDrop(e) {
+    var _a;
+    e.preventDefault();
+    setDragging(false);
+    if (disabled) return;
+    if ((_a = e.dataTransfer.files) == null ? void 0 : _a.length) onFiles(e.dataTransfer.files);
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onClick: () => {
+        var _a;
+        return !disabled && ((_a = inputRef.current) == null ? void 0 : _a.click());
+      },
+      onKeyDown: (e) => {
+        var _a;
+        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          (_a = inputRef.current) == null ? void 0 : _a.click();
+        }
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!disabled) setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop: handleDrop,
+      className: [
+        "flex flex-col items-center justify-center gap-3 rounded-(--radius-card) border-2 border-dashed py-10 transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
+        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        dragging ? "border-stroke-focus bg-surface-raised" : "border-stroke-control hover:border-stroke-strong hover:bg-surface-page",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        className: "hidden",
+        onChange: (e) => {
+          var _a;
+          if ((_a = e.target.files) == null ? void 0 : _a.length) onFiles(e.target.files);
+          e.target.value = "";
+        }
+      }
+    ),
+    children
+  );
+}
+export {
+  Dropzone
+};

package/dist/components/empty-state.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as lucide_react from 'lucide-react';
+
+declare const ICON_MAP: {
+    readonly box: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly service: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly kit: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly input: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly order: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly customer: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly finance: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly schedule: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly inventory: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly price: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly category: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly generic: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly search: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly lock: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly catalog: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly channels: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly commercial: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly operation: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly intelligence: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly billing: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+};
+type EmptyStateIcon = keyof typeof ICON_MAP;
+interface EmptyStateCta {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface EmptyStateProps {
+    icon?: EmptyStateIcon;
+    title: string;
+    description?: string;
+    cta?: EmptyStateCta;
+    /**
+     * full   = fills available height (use inside page containers)
+     * compact = inline fit with vertical padding
+     */
+    size?: 'full' | 'compact';
+    children?: ReactNode;
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, cta, size, children, className, }: EmptyStateProps): react.JSX.Element;
+
+export { EmptyState, type EmptyStateCta, type EmptyStateIcon, type EmptyStateProps, ICON_MAP };

package/dist/components/empty-state.js

@@ -0,0 +1,91 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import {
+  Package,
+  Clock,
+  Combine,
+  Boxes,
+  FileText,
+  Users,
+  Wallet,
+  CalendarDays,
+  Warehouse,
+  Tag,
+  LayoutGrid,
+  Info,
+  SearchX,
+  Lock,
+  Send,
+  HandCoins,
+  Store,
+  BarChart3,
+  CreditCard
+} from "lucide-react";
+const ICON_MAP = {
+  box: Package,
+  service: Clock,
+  kit: Combine,
+  input: Boxes,
+  order: FileText,
+  customer: Users,
+  finance: Wallet,
+  schedule: CalendarDays,
+  inventory: Warehouse,
+  price: Tag,
+  category: LayoutGrid,
+  generic: Info,
+  search: SearchX,
+  lock: Lock,
+  // Categorias de feature (Paywall) ──
+  catalog: Package,
+  channels: Send,
+  commercial: HandCoins,
+  operation: Store,
+  intelligence: BarChart3,
+  billing: CreditCard
+};
+function EmptyState({
+  icon = "generic",
+  title,
+  description,
+  cta,
+  size = "full",
+  children,
+  className = ""
+}) {
+  const Icon = ICON_MAP[icon];
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: [
+        "flex flex-col items-center justify-center text-center px-6",
+        size === "full" ? "min-h-[320px] flex-1" : "min-h-[200px] py-10",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "mb-5 text-stroke-strong" }, /* @__PURE__ */ React.createElement(Icon, { size: 72, strokeWidth: 1.25 })),
+    /* @__PURE__ */ React.createElement("p", { className: "text-body font-semibold text-fg-primary mb-2" }, title),
+    description && /* @__PURE__ */ React.createElement("p", { className: "text-label text-fg-muted max-w-sm leading-relaxed mb-4" }, description),
+    cta && (cta.href ? /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: cta.href,
+        className: "mt-3 inline-block px-4 py-2 text-label font-medium rounded-(--radius-card) transition-colors text-brand-on-primary bg-brand-primary hover:bg-brand-hover"
+      },
+      cta.label
+    ) : /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: cta.onClick,
+        className: "mt-3 inline-block px-4 py-2 text-label font-medium rounded-(--radius-card) transition-colors text-brand-on-primary bg-brand-primary hover:bg-brand-hover"
+      },
+      cta.label
+    )),
+    children
+  );
+}
+export {
+  EmptyState,
+  ICON_MAP
+};

package/dist/components/fab.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type FABConfig = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    /** cta = primary action button | save = saving-bar with primary + secondary */
+    variant?: 'cta' | 'save';
+    disabled?: boolean;
+    loading?: boolean;
+    secondary?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+type FABContextValue = {
+    config: FABConfig | null;
+    setFAB: (config: FABConfig) => void;
+    clearFAB: () => void;
+    bottomOffset: number;
+    setBottomOffset: (n: number) => void;
+    fabHidden: boolean;
+    setFabHidden: (v: boolean) => void;
+};
+declare function FABProvider({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function useFAB(): FABContextValue;
+/**
+ * Register the page's primary FAB action.
+ * Clears the FAB automatically on unmount.
+ * Pass a stable deps array to avoid re-registering on every render.
+ */
+declare function usePageFAB(config: FABConfig | null, deps?: unknown[]): void;
+declare function FABRoot(): react.JSX.Element;
+
+export { type FABConfig, FABProvider, FABRoot, useFAB, usePageFAB };

package/dist/components/fab.js

@@ -0,0 +1,100 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import Link from "next/link";
+import { Plus, Loader2 } from "lucide-react";
+import { useSavingBarActive } from "./saving-bar-context.js";
+const FABContext = createContext({
+  config: null,
+  setFAB: () => {
+  },
+  clearFAB: () => {
+  },
+  bottomOffset: 0,
+  setBottomOffset: () => {
+  },
+  fabHidden: false,
+  setFabHidden: () => {
+  }
+});
+function FABProvider({ children }) {
+  const [config, setConfig] = useState(null);
+  const [bottomOffset, setBottomOffset] = useState(0);
+  const [fabHidden, setFabHidden] = useState(false);
+  const setFAB = useCallback((cfg) => setConfig(cfg), []);
+  const clearFAB = useCallback(() => setConfig(null), []);
+  return /* @__PURE__ */ React.createElement(FABContext.Provider, { value: { config, setFAB, clearFAB, bottomOffset, setBottomOffset, fabHidden, setFabHidden } }, children);
+}
+function useFAB() {
+  return useContext(FABContext);
+}
+function usePageFAB(config, deps = []) {
+  const { setFAB, clearFAB } = useFAB();
+  const configRef = useRef(config);
+  configRef.current = config;
+  useEffect(() => {
+    if (configRef.current) {
+      setFAB(configRef.current);
+    } else {
+      clearFAB();
+    }
+    return () => clearFAB();
+  }, [setFAB, clearFAB, ...deps]);
+}
+function FABRoot() {
+  const { config, bottomOffset, fabHidden } = useFAB();
+  const savingBarActive = useSavingBarActive();
+  const hiddenByBar = savingBarActive && (config == null ? void 0 : config.variant) !== "save";
+  const visible = !!config && !fabHidden && !hiddenByBar;
+  const wrapCls = [
+    "fixed right-6 z-40 flex items-center gap-2 transition-all duration-200",
+    visible ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-2 pointer-events-none"
+  ].join(" ");
+  const bottomStyle = { bottom: `${24 + bottomOffset}px` };
+  if ((config == null ? void 0 : config.variant) === "save") {
+    return /* @__PURE__ */ React.createElement("div", { className: wrapCls, style: bottomStyle }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 rounded-(--radius-control) px-4 py-3 [background:var(--fab-save-bg)] [box-shadow:var(--fab-save-shadow)]" }, config.secondary && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: config.secondary.onClick,
+        disabled: config.loading,
+        className: "rounded-(--radius-control) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 cursor-pointer [border-color:var(--fab-save-discard-border)] [color:var(--fab-save-discard-text)] hover:[border-color:var(--fab-save-discard-border-hover)] hover:[color:var(--fab-save-discard-text-hover)]"
+      },
+      config.secondary.label
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: config.onClick,
+        disabled: config.disabled || config.loading,
+        className: "rounded-(--radius-control) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 cursor-pointer flex items-center gap-2 [background:var(--fab-save-primary-bg)] [color:var(--fab-save-primary-text)] hover:[background:var(--fab-save-primary-bg-hover)]"
+      },
+      config.loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 animate-spin" }), "Salvando...") : config.label
+    )));
+  }
+  const btnCls = "flex items-center gap-2 h-12 pl-4 pr-5 rounded-(--radius-control) text-label font-semibold shadow-lg transition-colors cursor-pointer [background:var(--fab-cta-bg)] [color:var(--fab-cta-text)] hover:[background:var(--fab-cta-bg-hover)]";
+  return /* @__PURE__ */ React.createElement("div", { className: wrapCls, style: bottomStyle }, (config == null ? void 0 : config.href) ? /* @__PURE__ */ React.createElement(Link, { href: config.href, className: btnCls }, /* @__PURE__ */ React.createElement(Plus, { size: 16, strokeWidth: 2.5 }), config == null ? void 0 : config.label) : /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: config == null ? void 0 : config.onClick,
+      disabled: config == null ? void 0 : config.disabled,
+      className: btnCls + " disabled:opacity-50"
+    },
+    /* @__PURE__ */ React.createElement(Plus, { size: 16, strokeWidth: 2.5 }),
+    config == null ? void 0 : config.label
+  ));
+}
+export {
+  FABProvider,
+  FABRoot,
+  useFAB,
+  usePageFAB
+};

package/dist/components/filter-chip.d.ts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+
+interface FilterChipBaseProps {
+    label: string;
+    active: boolean;
+    count?: number;
+    disabled?: boolean;
+    className?: string;
+}
+interface FilterChipLinkProps extends FilterChipBaseProps {
+    href: string;
+    onClick?: never;
+}
+interface FilterChipButtonProps extends FilterChipBaseProps {
+    onClick: () => void;
+    href?: never;
+}
+type FilterChipProps = FilterChipLinkProps | FilterChipButtonProps;
+declare function FilterChip({ label, active, count, disabled, href, onClick, className }: FilterChipProps): react.JSX.Element;
+type FilterChipItem = {
+    label: string;
+    value: string | undefined;
+    count?: number;
+    href?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+};
+interface FilterChipGroupProps {
+    items: FilterChipItem[];
+    active: string | undefined;
+    label: string;
+    className?: string;
+}
+/**
+ * FilterChipGroup — barra de filtro com pills.
+ *
+ * Regra: ≤ 5 opções. Mais que isso → usar Select.
+ * Renderiza como links (href) para preservar URL e back/forward,
+ * ou como buttons (onClick) para filtro client-side.
+ *
+ * @example
+ * <FilterChipGroup
+ *   label="Filtrar por tipo"
+ *   items={[
+ *     { label: 'Todos',    value: undefined, href: '/stock' },
+ *     { label: 'Entradas', value: 'in',      href: '/stock?filter=in' },
+ *     { label: 'Saídas',   value: 'out',     href: '/stock?filter=out' },
+ *   ]}
+ *   active={searchParams.filter}
+ * />
+ */
+declare function FilterChipGroup({ items, active, label, className }: FilterChipGroupProps): react.JSX.Element;
+
+export { FilterChip, FilterChipGroup, type FilterChipGroupProps, type FilterChipItem, type FilterChipProps };

package/dist/components/filter-chip.js

@@ -0,0 +1,66 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import Link from "next/link";
+const BASE = "h-control-sm inline-flex items-center text-caption font-medium border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus px-[var(--filter-chip-padding-x)] [border-radius:var(--filter-chip-radius)]";
+const ACTIVE = "[background:var(--filter-chip-color-surface-active)] [border-color:var(--filter-chip-color-stroke-active)] [color:var(--filter-chip-color-text-active)]";
+const INACTIVE = "[background:var(--filter-chip-color-surface-inactive)] [border-color:var(--filter-chip-color-stroke-inactive)] [color:var(--filter-chip-color-text-inactive)] hover:[background:var(--filter-chip-color-surface-hover)] hover:[border-color:var(--filter-chip-color-stroke-hover)] hover:[color:var(--filter-chip-color-text-hover)]";
+const DISABLED = "[background:var(--filter-chip-color-surface-disabled)] [border-color:var(--filter-chip-color-stroke-disabled)] [color:var(--filter-chip-color-text-disabled)] opacity-50 pointer-events-none cursor-not-allowed";
+function FilterChipBody({ label, count }) {
+  if (count === void 0) return /* @__PURE__ */ React.createElement(React.Fragment, null, label);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, label, /* @__PURE__ */ React.createElement("span", { className: "ml-1 opacity-60 tabular-nums" }, count));
+}
+function FilterChip({ label, active, count, disabled = false, href, onClick, className = "" }) {
+  const cls = [BASE, active ? ACTIVE : INACTIVE, disabled ? DISABLED : "", className].filter(Boolean).join(" ");
+  if (href) {
+    return /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        href,
+        "aria-current": active ? "true" : void 0,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : void 0,
+        className: cls
+      },
+      /* @__PURE__ */ React.createElement(FilterChipBody, { label, count })
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-pressed": active,
+      disabled,
+      className: cls
+    },
+    /* @__PURE__ */ React.createElement(FilterChipBody, { label, count })
+  );
+}
+function FilterChipGroup({ items, active, label, className = "" }) {
+  return /* @__PURE__ */ React.createElement("div", { role: "group", "aria-label": label, className: ["flex flex-wrap [gap:var(--filter-chip-group-gap)]", className].filter(Boolean).join(" ") }, items.map((item) => {
+    var _a;
+    if (process.env.NODE_ENV === "development" && !item.href && !item.onClick) {
+      console.warn(`[FilterChipGroup] item "${item.label}" has neither href nor onClick \u2014 click will have no effect`);
+    }
+    const isActive = active === item.value || !active && item.value === void 0;
+    if (item.href) {
+      return /* @__PURE__ */ React.createElement(FilterChip, { key: item.label, label: item.label, active: isActive, count: item.count, disabled: item.disabled, href: item.href });
+    }
+    return /* @__PURE__ */ React.createElement(
+      FilterChip,
+      {
+        key: item.label,
+        label: item.label,
+        active: isActive,
+        count: item.count,
+        disabled: item.disabled,
+        onClick: (_a = item.onClick) != null ? _a : (() => {
+        })
+      }
+    );
+  }));
+}
+export {
+  FilterChip,
+  FilterChipGroup
+};

package/dist/components/floating-stepper.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * FloatingStepper — pill flutuante de etapas de um fluxo (PDV, checkout).
+ *
+ * Mostra as etapas com dot de estado; etapas anteriores são navegáveis
+ * (volta no fluxo), futuras ficam desabilitadas. `canNavigate` permite
+ * customizar a regra. Slot `action` pra ação terminal (ex.: Reset).
+ *
+ * O POSICIONAMENTO é do caller (absolute/fixed via wrapper ou className) —
+ * o componente só renderiza a pill.
+ *
+ * Uso:
+ *   <FloatingStepper
+ *     steps={[{ key: 'cart', label: 'Carrinho' }, ...]}
+ *     current={step}
+ *     onNavigate={setStep}
+ *     action={{ label: 'Reset', icon: <RotateCcw />, onClick: reset }}
+ *     className="absolute bottom-3 left-1/2 -translate-x-1/2 z-30"
+ *   />
+ */
+type FloatingStepperStep = {
+    key: string;
+    label: string;
+};
+interface FloatingStepperProps {
+    steps: FloatingStepperStep[];
+    /** key da etapa atual */
+    current: string;
+    onNavigate?: (key: string) => void;
+    /** Regra de navegação por etapa. Default: só etapas anteriores à atual. */
+    canNavigate?: (key: string, index: number, currentIndex: number) => boolean;
+    /** Ação à direita, separada por divisor (ex.: Reset). */
+    action?: {
+        label: string;
+        icon?: ReactNode;
+        onClick: () => void;
+    };
+    className?: string;
+}
+declare function FloatingStepper({ steps, current, onNavigate, canNavigate, action, className, }: FloatingStepperProps): react.JSX.Element;
+
+export { FloatingStepper, type FloatingStepperProps, type FloatingStepperStep };

package/dist/components/floating-stepper.js

@@ -0,0 +1,53 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+function FloatingStepper({
+  steps,
+  current,
+  onNavigate,
+  canNavigate,
+  action,
+  className = ""
+}) {
+  const currentIdx = steps.findIndex((s) => s.key === current);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: [
+        "flex items-center gap-0.5 rounded-full bg-surface-shell shadow-2xl px-1.5 py-1.5",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    steps.map((s, idx) => {
+      const isCurrent = idx === currentIdx;
+      const canGo = canNavigate ? canNavigate(s.key, idx, currentIdx) : idx < currentIdx;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: s.key,
+          type: "button",
+          disabled: !canGo && !isCurrent,
+          "aria-current": isCurrent ? "step" : void 0,
+          onClick: () => {
+            if (canGo) onNavigate == null ? void 0 : onNavigate(s.key);
+          },
+          className: `flex items-center gap-1.5 rounded-full px-3 py-1.5 text-caption font-medium whitespace-nowrap transition-colors ${isCurrent ? "bg-(--surface-default) text-(--text-primary)" : canGo ? "text-on-shell-muted hover:text-on-shell" : "text-on-shell-subtle cursor-default"}`
+        },
+        /* @__PURE__ */ React.createElement("span", { className: `w-1.5 h-1.5 rounded-full shrink-0 ${isCurrent ? "bg-(--text-primary)" : "bg-on-shell-subtle"}` }),
+        s.label
+      );
+    }),
+    action && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "w-px h-4 bg-on-shell-line mx-1", "aria-hidden": true }), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: action.onClick,
+        className: "flex items-center gap-1.5 rounded-full px-3 py-1.5 text-caption font-medium text-on-shell-muted hover:text-on-shell transition-colors whitespace-nowrap [&_svg]:w-3 [&_svg]:h-3 [&_svg]:shrink-0"
+      },
+      action.icon,
+      action.label
+    ))
+  );
+}
+export {
+  FloatingStepper
+};

package/dist/components/form-card-header.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface FormCardHeaderProps {
+    icon?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Slot à direita (ação, badge) — alinhado ao centro vertical do bloco. */
+    action?: ReactNode;
+}
+declare function FormCardHeader({ icon, title, subtitle, action }: FormCardHeaderProps): react.JSX.Element;
+
+export { FormCardHeader, type FormCardHeaderProps };

package/dist/components/form-card-header.js

@@ -0,0 +1,8 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+function FormCardHeader({ icon, title, subtitle, action }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 pb-3" }, icon && /* @__PURE__ */ React.createElement("span", { className: "grid place-items-center shrink-0 size-9 rounded-(--radius-card) bg-brand-primary text-brand-on-primary" }, icon), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("p", { className: "text-label font-semibold text-(--text-primary)" }, title), subtitle && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-(--text-muted) mt-1 leading-snug" }, subtitle)), action && /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, action));
+}
+export {
+  FormCardHeader
+};

package/dist/components/icon-button.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type IconButtonVariant = 'filled' | 'outline' | 'ghost';
+type IconButtonColor = 'primary' | 'secondary' | 'danger' | 'neutral';
+type IconButtonSize = 'sm' | 'md' | 'lg';
+interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon: ReactNode;
+    'aria-label': string;
+    variant?: IconButtonVariant;
+    color?: IconButtonColor;
+    size?: IconButtonSize;
+    loading?: boolean;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonVariant };