@rojaostudio/ds 1.0.0

package/dist/components/notice.js

@@ -0,0 +1,103 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useState, useEffect } from "react";
+import { Info, CheckCircle2, AlertTriangle, AlertOctagon, Lock, X } from "lucide-react";
+const STYLES = {
+  critical: {
+    container: "border-danger-border bg-danger-soft",
+    title: "text-danger-text",
+    desc: "text-danger-text/85",
+    icon: "text-danger-text",
+    cta: "bg-danger text-fg-inverse hover:bg-danger-text",
+    solidCta: true
+  },
+  warning: {
+    container: "border-warning-border bg-warning-soft",
+    title: "text-warning-text",
+    desc: "text-warning-text/85",
+    icon: "text-warning-text",
+    cta: "bg-surface-default border border-warning-border hover:bg-warning-soft text-warning-text",
+    solidCta: false
+  },
+  info: {
+    container: "border-info-border bg-info-soft",
+    title: "text-info-text",
+    desc: "text-info-text/85",
+    icon: "text-info-text",
+    cta: "bg-surface-default border border-info-border hover:bg-info-soft text-info-text",
+    solidCta: false
+  },
+  success: {
+    container: "border-success-border bg-success-soft",
+    title: "text-success-text",
+    desc: "text-success-text/85",
+    icon: "text-success-text",
+    cta: "bg-surface-default border border-success-border hover:bg-success-soft text-success-text",
+    solidCta: false
+  }
+};
+function iconFor(severity, intent) {
+  if (intent === "commercial" && (severity === "critical" || severity === "warning")) return Lock;
+  switch (severity) {
+    case "critical":
+      return AlertOctagon;
+    case "warning":
+      return AlertTriangle;
+    case "success":
+      return CheckCircle2;
+    default:
+      return Info;
+  }
+}
+function DefaultLink({ href, className, children }) {
+  return /* @__PURE__ */ React.createElement("a", { href, className }, children);
+}
+function Notice({
+  severity,
+  title,
+  description,
+  intent = "operational",
+  cta,
+  linkAs: LinkAs = DefaultLink,
+  dismissible = false,
+  id,
+  dismissLabel = "Dispensar",
+  className = ""
+}) {
+  const canDismiss = dismissible && severity !== "critical" && !!id;
+  const [dismissed, setDismissed] = useState(false);
+  useEffect(() => {
+    if (canDismiss && id) setDismissed(localStorage.getItem(`notice-dismissed:${id}`) === "1");
+  }, [canDismiss, id]);
+  if (dismissed) return null;
+  const s = STYLES[severity];
+  const Icon = iconFor(severity, intent);
+  const ctaClass = ["text-caption font-semibold px-3 py-1.5 rounded-(--radius-card) shrink-0 transition-colors", s.cta].join(" ");
+  function dismiss() {
+    if (id) localStorage.setItem(`notice-dismissed:${id}`, "1");
+    setDismissed(true);
+  }
+  const ctaNode = (cta == null ? void 0 : cta.href) ? /* @__PURE__ */ React.createElement(LinkAs, { href: cta.href, className: ctaClass }, cta.label, " \u2192") : (cta == null ? void 0 : cta.onClick) ? /* @__PURE__ */ React.createElement("button", { type: "button", onClick: cta.onClick, className: ctaClass }, cta.label, " \u2192") : null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: severity === "critical" ? "alert" : "status",
+      "aria-live": severity === "critical" ? "assertive" : "polite",
+      className: ["rounded-(--radius-card) border px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2", s.container, className].join(" ")
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2.5 min-w-0" }, /* @__PURE__ */ React.createElement(Icon, { size: 18, "aria-hidden": true, className: ["shrink-0 mt-0.5", s.icon].join(" ") }), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: ["text-label font-semibold", s.title].join(" ") }, title), description && /* @__PURE__ */ React.createElement("div", { className: ["text-caption mt-0.5", s.desc].join(" ") }, description))),
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 shrink-0 self-end sm:self-auto" }, ctaNode, canDismiss && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: dismiss,
+        "aria-label": dismissLabel,
+        className: ["transition-opacity hover:opacity-70 shrink-0", s.icon].join(" ")
+      },
+      /* @__PURE__ */ React.createElement(X, { size: 16, "aria-hidden": true })
+    ))
+  );
+}
+export {
+  Notice
+};

package/dist/components/option-tile.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { ReactNode, KeyboardEvent } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+/**
+ * OptionTile / OptionTileGrid — grade de escolha única (onboarding #449).
+ *
+ * MESMA FAMÍLIA visual do ChoiceCard (os dois single-choice): casca idle suave
+ * (borda 1px border-default, hover border-strong) e selecionado = fill SÓLIDO
+ * derivado da camada semântica de seleção (--selection-fill-active). Baixa visão:
+ * a seleção é distinguível por mais que cor — fill de alto contraste + check
+ * redundante (badge on-fill, glifo fill), nunca só um realce sutil. Todo conteúdo
+ * sobre o fill ativo usa tokens de contraste próprios (*-active → on-fill), nunca
+ * os tokens de superfície clara.
+ *
+ * Acessibilidade: OptionTileGrid é um radiogroup com roving tabindex — só um tile é
+ * tabbable; setas movem foco E seleção (padrão ARIA), Home/End vão às pontas.
+ */
+interface OptionTileProps {
+    selected: boolean;
+    label: string;
+    onClick: () => void;
+    icon?: ReactNode;
+    disabled?: boolean;
+    multiple?: boolean;
+    tabIndex?: number;
+    onKeyDown?: (e: KeyboardEvent<HTMLButtonElement>) => void;
+    buttonRef?: (el: HTMLButtonElement | null) => void;
+    fullSpan?: boolean;
+    className?: string;
+}
+declare function OptionTile({ selected, label, onClick, icon, disabled, multiple, tabIndex, onKeyDown, buttonRef, fullSpan, className, }: OptionTileProps): react.JSX.Element;
+interface OptionTileItem<T extends string = string> {
+    value: T;
+    label: string;
+    icon?: LucideIcon;
+    fullSpan?: boolean;
+}
+interface OptionTileGridBase<T extends string = string> {
+    label?: ReactNode;
+    options: OptionTileItem<T>[];
+    /** 2 = sempre 2 colunas; 3 = 2 no mobile, 3 no >= sm. default 3. */
+    columns?: 2 | 3;
+    className?: string;
+    'aria-label'?: string;
+}
+type OptionTileGridSingle<T extends string = string> = OptionTileGridBase<T> & {
+    multiple?: false;
+    value: T | null;
+    onChange: (value: T) => void;
+};
+type OptionTileGridMulti<T extends string = string> = OptionTileGridBase<T> & {
+    multiple: true;
+    value: T[];
+    onChange: (value: T[]) => void;
+};
+type OptionTileGridProps<T extends string = string> = OptionTileGridSingle<T> | OptionTileGridMulti<T>;
+declare function OptionTileGrid<T extends string = string>(props: OptionTileGridProps<T>): react.JSX.Element;
+
+export { OptionTile, OptionTileGrid, type OptionTileGridProps, type OptionTileItem, type OptionTileProps };

package/dist/components/option-tile.js

@@ -0,0 +1,144 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useId, useRef } from "react";
+import { Check } from "lucide-react";
+function OptionTile({
+  selected,
+  label,
+  onClick,
+  icon,
+  disabled = false,
+  multiple = false,
+  tabIndex,
+  onKeyDown,
+  buttonRef,
+  fullSpan = false,
+  className = ""
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      role: multiple ? "checkbox" : "radio",
+      "aria-checked": selected,
+      tabIndex,
+      disabled,
+      ref: buttonRef,
+      onClick,
+      onKeyDown,
+      className: [
+        "relative flex w-full flex-col items-center justify-center gap-2 rounded-(--radius-card) border text-center transition-all",
+        icon ? "min-h-[88px] px-3 py-4" : "min-h-[52px] px-3 py-3",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-offset-2",
+        selected ? "[border-color:var(--option-tile-border-active)] [background:var(--option-tile-bg-active)]" : "[border-color:var(--option-tile-border)] [background:var(--option-tile-bg)] hover:[border-color:var(--option-tile-border-hover)]",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        fullSpan ? "col-span-full" : "",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    selected && /* @__PURE__ */ React.createElement("span", { className: "absolute right-2 top-2 flex size-4 items-center justify-center rounded-full [background:var(--option-tile-check)] [color:var(--option-tile-check-icon)]" }, /* @__PURE__ */ React.createElement(Check, { size: 11, strokeWidth: 3 })),
+    icon && /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: [
+          "flex size-10 items-center justify-center rounded-(--radius-card) transition-colors [&_svg]:size-5",
+          selected ? "[background:var(--option-tile-icon-bg-active)] [color:var(--option-tile-icon-active)]" : "[background:var(--option-tile-icon-bg)] [color:var(--option-tile-icon)]"
+        ].join(" ")
+      },
+      icon
+    ),
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: [
+          icon ? "text-caption" : "text-label",
+          "font-semibold leading-tight",
+          selected ? "[color:var(--option-tile-label-active)]" : "[color:var(--option-tile-label)]"
+        ].join(" ")
+      },
+      label
+    )
+  );
+}
+function OptionTileGrid(props) {
+  const { label, options, columns = 3, className = "" } = props;
+  const ariaLabel = props["aria-label"];
+  const multiple = props.multiple === true;
+  const groupId = useId();
+  const btns = useRef([]);
+  const isSel = (v) => multiple ? props.value.includes(v) : props.value === v;
+  const activate = (v) => {
+    if (props.multiple) {
+      const cur = props.value;
+      props.onChange(cur.includes(v) ? cur.filter((x) => x !== v) : [...cur, v]);
+    } else {
+      props.onChange(v);
+    }
+  };
+  const activeIdx = multiple ? -1 : Math.max(0, options.findIndex((o) => isSel(o.value)));
+  const move = (i) => {
+    var _a;
+    const n = options.length;
+    const idx = (i % n + n) % n;
+    (_a = btns.current[idx]) == null ? void 0 : _a.focus();
+    if (!multiple) activate(options[idx].value);
+  };
+  const onKeyDown = (e, i) => {
+    if (multiple) return;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault();
+        move(i + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault();
+        move(i - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        move(0);
+        break;
+      case "End":
+        e.preventDefault();
+        move(options.length - 1);
+        break;
+    }
+  };
+  const grid = /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      id: groupId,
+      role: multiple ? "group" : "radiogroup",
+      "aria-label": ariaLabel,
+      className: ["grid gap-2", columns === 2 ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-3", label ? "" : className].join(" ")
+    },
+    options.map((opt, i) => {
+      const Icon = opt.icon;
+      return /* @__PURE__ */ React.createElement(
+        OptionTile,
+        {
+          key: opt.value,
+          multiple,
+          selected: isSel(opt.value),
+          label: opt.label,
+          icon: Icon ? /* @__PURE__ */ React.createElement(Icon, null) : void 0,
+          fullSpan: opt.fullSpan,
+          onClick: () => activate(opt.value),
+          tabIndex: multiple ? 0 : i === activeIdx ? 0 : -1,
+          onKeyDown: (e) => onKeyDown(e, i),
+          buttonRef: (el) => {
+            btns.current[i] = el;
+          }
+        }
+      );
+    })
+  );
+  if (!label) return grid;
+  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col gap-2", className].join(" ") }, /* @__PURE__ */ React.createElement("span", { className: "text-label font-medium text-fg-primary" }, label), grid);
+}
+export {
+  OptionTile,
+  OptionTileGrid
+};

package/dist/components/page-shell.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type PageShellWidth = 'narrow' | 'default' | 'wide';
+interface PageShellProps {
+    maxWidth?: PageShellWidth;
+    padded?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+declare function PageShell({ maxWidth, padded, children, className, }: PageShellProps): react.JSX.Element;
+declare namespace PageShell {
+    var Header: typeof PageShellHeader;
+    var Body: typeof PageShellBody;
+}
+interface PageShellHeaderProps {
+    title: ReactNode;
+    eyebrow?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+declare function PageShellHeader({ title, eyebrow, actions, className }: PageShellHeaderProps): react.JSX.Element;
+interface PageShellBodyProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function PageShellBody({ children, className }: PageShellBodyProps): react.JSX.Element;
+
+export { PageShell, type PageShellBodyProps, type PageShellHeaderProps, type PageShellProps, type PageShellWidth };

package/dist/components/page-shell.js

@@ -0,0 +1,36 @@
+import "../chunk-ORMEWXMH.js";
+const WIDTH_CLS = {
+  narrow: "max-w-screen-md",
+  default: "max-w-screen-xl",
+  wide: "max-w-screen-2xl"
+};
+function PageShell({
+  maxWidth = "default",
+  padded = true,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: [
+        "mx-auto w-full",
+        WIDTH_CLS[maxWidth],
+        padded ? "px-4 sm:px-6 lg:px-8 py-6" : "",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    children
+  );
+}
+function PageShellHeader({ title, eyebrow, actions, className = "" }) {
+  return /* @__PURE__ */ React.createElement("div", { className: ["flex items-start justify-between gap-4 mb-6", className].filter(Boolean).join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, eyebrow && /* @__PURE__ */ React.createElement("p", { className: "text-caption font-medium text-fg-muted mb-1" }, eyebrow), /* @__PURE__ */ React.createElement("h1", { className: "text-heading-md font-semibold text-fg-primary truncate" }, title)), actions && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 shrink-0" }, actions));
+}
+function PageShellBody({ children, className = "" }) {
+  return /* @__PURE__ */ React.createElement("div", { className: ["space-y-6", className].filter(Boolean).join(" ") }, children);
+}
+PageShell.Header = PageShellHeader;
+PageShell.Body = PageShellBody;
+export {
+  PageShell
+};

package/dist/components/page-skeleton.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+
+/**
+ * PageSkeleton — loading state padrão pra páginas com tabela.
+ * Header (título + botão) + tabela com header + N rows.
+ *
+ * `padded` (default true) controla o padding interno. Use `padded={false}`
+ * quando o skeleton já vive dentro de um container que aplica padding
+ * (ex.: PageRoot/PageLayout), evitando padding duplicado.
+ *
+ * Uso:
+ *   <PageSkeleton rows={8} />
+ *   <PageSkeleton rows={8} padded={false} />  // dentro de um container
+ */
+interface PageSkeletonProps {
+    rows?: number;
+    padded?: boolean;
+}
+declare function PageSkeleton({ rows, padded }: PageSkeletonProps): react.JSX.Element;
+/**
+ * CardsSkeleton — loading state pra páginas com KPIs (4 cards no topo + 2 charts).
+ *
+ * `padded` (default true) — ver PageSkeleton.
+ *
+ * Uso:
+ *   <CardsSkeleton count={4} />
+ *   <CardsSkeleton count={4} padded={false} />  // dentro de um container
+ */
+interface CardsSkeletonProps {
+    count?: number;
+    padded?: boolean;
+}
+declare function CardsSkeleton({ count, padded }: CardsSkeletonProps): react.JSX.Element;
+
+export { CardsSkeleton, type CardsSkeletonProps, PageSkeleton, type PageSkeletonProps };

package/dist/components/page-skeleton.js

@@ -0,0 +1,12 @@
+import "../chunk-ORMEWXMH.js";
+import { Skeleton } from "./skeleton.js";
+function PageSkeleton({ rows = 5, padded = true }) {
+  return /* @__PURE__ */ React.createElement("div", { className: `space-y-6 ${padded ? "p-6" : ""}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-7 w-48" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-9 w-28" })), /* @__PURE__ */ React.createElement("div", { className: "border border-stroke-default rounded-(--radius-card) overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "bg-surface-raised border-b border-stroke-default px-4 py-3 flex gap-4" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-24" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-20" })), Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "px-4 py-3.5 flex gap-4 items-center border-b border-stroke-subtle last:border-0" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-40" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-28" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-16" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-20 ml-auto" })))));
+}
+function CardsSkeleton({ count = 4, padded = true }) {
+  return /* @__PURE__ */ React.createElement("div", { className: `space-y-6 ${padded ? "p-6" : ""}` }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-7 w-48" }), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4" }, Array.from({ length: count }).map((_, i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "border border-stroke-default rounded-(--radius-card) p-4 space-y-3" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-24" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-8 w-32" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-3 w-20" })))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4" }, Array.from({ length: 2 }).map((_, i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "border border-stroke-default rounded-(--radius-card) p-4 space-y-3" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-5 w-32" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-32 w-full" })))));
+}
+export {
+  CardsSkeleton,
+  PageSkeleton
+};

package/dist/components/page-tabs.d.ts

@@ -0,0 +1,35 @@
+import react__default from 'react';
+
+type PageTab = {
+    /** Route mode: a aba navega pra esta URL (default). */
+    href?: string;
+    /** Controlled mode: identifica a aba quando se usa value/onChange (sem navegar). */
+    value?: string;
+    label: string;
+    /** Show a numeric count badge */
+    count?: number;
+    /** Show a green "aberto" pill */
+    dot?: boolean;
+    /** Show an "em breve" label: tab is not yet available */
+    soon?: boolean;
+    /** Ghost route indicator (dev only) */
+    ghost?: boolean;
+    /** Match only the exact path (+ matchPaths). Use for root paths like /marketing */
+    exact?: boolean;
+    /** Extra paths that also activate this tab (prefix match) */
+    matchPaths?: string[];
+};
+interface PageTabsProps {
+    tabs: PageTab[];
+    trailing?: react__default.ReactNode;
+    /**
+     * Controlled mode: quando onChange é passado, as abas viram botões (sem
+     * navegação) e o ativo é tab.value === value. Use pra trocar conteúdo na
+     * mesma tela (ex: idiomas num form). Sem onChange, segue route-based (Link).
+     */
+    value?: string;
+    onChange?: (value: string) => void;
+}
+declare function PageTabs({ tabs, trailing, value, onChange }: PageTabsProps): react__default.JSX.Element;
+
+export { type PageTab, PageTabs, type PageTabsProps };

package/dist/components/page-tabs.js

@@ -0,0 +1,55 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+function isActive(tab, pathname) {
+  var _a, _b, _c, _d;
+  if (!tab.href) return false;
+  if (tab.exact) {
+    return pathname === tab.href || ((_b = (_a = tab.matchPaths) == null ? void 0 : _a.some((p) => pathname.startsWith(p))) != null ? _b : false);
+  }
+  return pathname === tab.href || pathname.startsWith(tab.href + "/") || ((_d = (_c = tab.matchPaths) == null ? void 0 : _c.some((p) => pathname.startsWith(p))) != null ? _d : false);
+}
+const TAB_BASE = "flex items-center gap-2 whitespace-nowrap shrink-0 px-4 sm:px-5 py-4 text-label font-medium border-b-2 transition-colors";
+function tabClass(active) {
+  return [
+    TAB_BASE,
+    active ? "[border-color:var(--page-tabs-indicator-active)] [color:var(--page-tabs-text-active)]" : "border-transparent [color:var(--page-tabs-text)] hover:[color:var(--page-tabs-text-hover)] hover:[border-color:var(--page-tabs-indicator-hover)]"
+  ].join(" ");
+}
+function TabContent({ tab, active }) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, tab.ghost && /* @__PURE__ */ React.createElement("span", { title: "Rota fantasma em valida\xE7\xE3o" }, "\u{1F47B}"), tab.label, tab.soon && /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-medium px-1.5 py-0.5 rounded [background:var(--page-tabs-soon-bg)] [color:var(--page-tabs-soon-text)]" }, "em breve"), tab.dot && /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-medium leading-none [background:var(--page-tabs-dot-bg)] [color:var(--page-tabs-dot-text)]" }, /* @__PURE__ */ React.createElement("span", { className: "w-1.5 h-1.5 rounded-full shrink-0 [background:var(--page-tabs-dot-indicator)]" }), "aberto"), tab.count != null && tab.count > 0 && /* @__PURE__ */ React.createElement("span", { className: [
+    "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1",
+    "rounded-full text-[11px] font-semibold",
+    active ? "[background:var(--page-tabs-count-bg-active)] [color:var(--page-tabs-count-text-active)]" : "[background:var(--page-tabs-count-bg)] [color:var(--page-tabs-count-text)]"
+  ].join(" ") }, tab.count > 99 ? "99+" : tab.count));
+}
+function PageTabs({ tabs, trailing, value, onChange }) {
+  const pathname = usePathname();
+  const controlled = onChange !== void 0;
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center [background:var(--page-tabs-bg)] [border-bottom:1px_solid_var(--page-tabs-border)]" }, /* @__PURE__ */ React.createElement("nav", { className: "flex flex-1 overflow-x-auto scrollbar-none px-4 sm:px-6 lg:px-8", role: controlled ? "tablist" : void 0 }, tabs.map((tab) => {
+    var _a, _b;
+    const active = controlled ? tab.value === value : isActive(tab, pathname);
+    if (controlled) {
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: (_a = tab.value) != null ? _a : tab.label,
+          type: "button",
+          role: "tab",
+          "aria-selected": active,
+          onClick: () => {
+            var _a2;
+            return onChange == null ? void 0 : onChange((_a2 = tab.value) != null ? _a2 : "");
+          },
+          className: tabClass(active)
+        },
+        /* @__PURE__ */ React.createElement(TabContent, { tab, active })
+      );
+    }
+    return /* @__PURE__ */ React.createElement(Link, { key: tab.href, href: (_b = tab.href) != null ? _b : "#", className: tabClass(active) }, /* @__PURE__ */ React.createElement(TabContent, { tab, active }));
+  })), trailing && /* @__PURE__ */ React.createElement("div", { className: "hidden sm:flex shrink-0 items-center pr-4 sm:pr-6 lg:pr-8" }, trailing));
+}
+export {
+  PageTabs
+};

package/dist/components/pagination.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+
+/**
+ * Pagination — navegação por páginas em listas longas.
+ *
+ * Uso:
+ *   <Pagination
+ *     page={2}
+ *     totalPages={10}
+ *     onChange={p => setPage(p)}
+ *   />
+ *
+ *   <Pagination page={1} totalPages={20} onChange={...} siblings={2} />
+ *
+ * Renderiza: Prev | 1 ... 4 5 [6] 7 8 ... 20 | Next
+ */
+interface PaginationProps {
+    page: number;
+    totalPages: number;
+    onChange: (page: number) => void;
+    /** Páginas vizinhas a mostrar de cada lado da atual. default = 1. */
+    siblings?: number;
+    /** Páginas fixas no início e no fim (sempre visíveis). default = 1. */
+    boundaries?: number;
+    className?: string;
+    /** Esconde quando totalPages <= 1. default = true. */
+    hideOnSinglePage?: boolean;
+}
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+export { Pagination, type PaginationProps };

package/dist/components/pagination.js

@@ -0,0 +1,80 @@
+import "../chunk-ORMEWXMH.js";
+import { forwardRef } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+function range(start, end) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function getRange(page, totalPages, siblings, boundaries) {
+  const totalNumbers = siblings * 2 + boundaries * 2 + 3;
+  if (totalPages <= totalNumbers) return range(1, totalPages);
+  const leftSiblingStart = Math.max(page - siblings, boundaries + 2);
+  const rightSiblingEnd = Math.min(page + siblings, totalPages - boundaries - 1);
+  const showLeftEllipsis = leftSiblingStart > boundaries + 2;
+  const showRightEllipsis = rightSiblingEnd < totalPages - boundaries - 1;
+  const items = [];
+  items.push(...range(1, boundaries));
+  if (showLeftEllipsis) {
+    items.push("ellipsis-left");
+  } else if (boundaries + 1 < leftSiblingStart) {
+    items.push(boundaries + 1);
+  }
+  items.push(...range(leftSiblingStart, rightSiblingEnd));
+  if (showRightEllipsis) {
+    items.push("ellipsis-right");
+  } else if (rightSiblingEnd + 1 < totalPages - boundaries + 1) {
+    items.push(rightSiblingEnd + 1);
+  }
+  items.push(...range(totalPages - boundaries + 1, totalPages));
+  return Array.from(new Set(items.filter((i) => typeof i === "string" || i >= 1 && i <= totalPages)));
+}
+const baseBtn = "inline-flex items-center justify-center min-w-9 h-9 px-2 rounded-(--radius-control) text-label transition-colors disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus";
+const Pagination = forwardRef(function Pagination2({
+  page,
+  totalPages,
+  onChange,
+  siblings = 1,
+  boundaries = 1,
+  className = "",
+  hideOnSinglePage = true
+}, ref) {
+  if (hideOnSinglePage && totalPages <= 1) return null;
+  const items = getRange(page, totalPages, siblings, boundaries);
+  const canPrev = page > 1;
+  const canNext = page < totalPages;
+  return /* @__PURE__ */ React.createElement("nav", { ref, role: "navigation", "aria-label": "Pagina\xE7\xE3o", className }, /* @__PURE__ */ React.createElement("ul", { className: "flex items-center gap-1" }, /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      disabled: !canPrev,
+      onClick: () => canPrev && onChange(page - 1),
+      "aria-label": "P\xE1gina anterior",
+      className: [baseBtn, "text-fg-secondary hover:bg-surface-raised"].join(" ")
+    },
+    /* @__PURE__ */ React.createElement(ChevronLeft, { size: 16 })
+  )), items.map((it, idx) => /* @__PURE__ */ React.createElement("li", { key: `${it}-${idx}` }, typeof it === "string" ? /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center justify-center min-w-9 h-9 text-fg-muted text-label" }, "\u2026") : /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange(it),
+      "aria-current": it === page ? "page" : void 0,
+      className: [
+        baseBtn,
+        it === page ? "bg-brand-primary text-brand-on-primary" : "text-fg-secondary hover:bg-surface-raised"
+      ].join(" ")
+    },
+    it
+  ))), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      disabled: !canNext,
+      onClick: () => canNext && onChange(page + 1),
+      "aria-label": "Pr\xF3xima p\xE1gina",
+      className: [baseBtn, "text-fg-secondary hover:bg-surface-raised"].join(" ")
+    },
+    /* @__PURE__ */ React.createElement(ChevronRight, { size: 16 })
+  ))));
+});
+export {
+  Pagination
+};

package/dist/components/paywall-banner.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { ReactNode, ComponentType } from 'react';
+
+/**
+ * PaywallBanner — gate de feature/plano. Diferente do BlockerCard que sinaliza
+ * problema (limite, falha), o PaywallBanner aponta pra um upgrade ou ação de plano.
+ *
+ * Uso:
+ *   <PaywallBanner
+ *     variant="warn"
+ *     title="Você está em 80% do limite"
+ *     description="Faça upgrade pra continuar cadastrando produtos."
+ *     ctaLabel="Ver planos"
+ *     ctaHref="/billing"
+ *   />
+ *
+ *   <PaywallBanner variant="blocked" title="..." description="..." />
+ */
+interface PaywallBannerProps {
+    variant: 'warn' | 'blocked';
+    title: string;
+    description: ReactNode;
+    ctaLabel?: string;
+    ctaHref?: string;
+    /** Handler alternativo (sem href). */
+    onCta?: () => void;
+    /** Component de link (next/link em apps Next). */
+    linkAs?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+    className?: string;
+}
+declare function PaywallBanner({ variant, title, description, ctaLabel, ctaHref, onCta, linkAs: LinkAs, className, }: PaywallBannerProps): react.JSX.Element;
+
+export { PaywallBanner, type PaywallBannerProps };