@rojaostudio/ds 1.0.1 → 1.0.2

package/dist/components/option-tile.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef } from "react";
 import { Check } from "lucide-react";
 function OptionTile({
@@ -15,7 +16,7 @@ function OptionTile({
   fullSpan = false,
   className = ""
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -34,30 +35,32 @@ function OptionTile({
         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
-    )
+      ].filter(Boolean).join(" "),
+      children: [
+        selected && /* @__PURE__ */ jsx("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)]", children: /* @__PURE__ */ jsx(Check, { size: 11, strokeWidth: 3 }) }),
+        icon && /* @__PURE__ */ jsx(
+          "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(" "),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: [
+              icon ? "text-caption" : "text-label",
+              "font-semibold leading-tight",
+              selected ? "[color:var(--option-tile-label-active)]" : "[color:var(--option-tile-label)]"
+            ].join(" "),
+            children: label
+          }
+        )
+      ]
+    }
   );
 }
 function OptionTileGrid(props) {
@@ -106,37 +109,40 @@ function OptionTileGrid(props) {
         break;
     }
   };
-  const grid = /* @__PURE__ */ React.createElement(
+  const grid = /* @__PURE__ */ jsx(
     "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;
-          }
-        }
-      );
-    })
+      className: ["grid gap-2", columns === 2 ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-3", label ? "" : className].join(" "),
+      children: options.map((opt, i) => {
+        const Icon = opt.icon;
+        return /* @__PURE__ */ jsx(
+          OptionTile,
+          {
+            multiple,
+            selected: isSel(opt.value),
+            label: opt.label,
+            icon: Icon ? /* @__PURE__ */ jsx(Icon, {}) : 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;
+            }
+          },
+          opt.value
+        );
+      })
+    }
   );
   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);
+  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-2", className].join(" "), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-label font-medium text-fg-primary", children: label }),
+    grid
+  ] });
 }
 export {
   OptionTile,

package/dist/components/page-shell.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 const WIDTH_CLS = {
   narrow: "max-w-screen-md",
   default: "max-w-screen-xl",
@@ -10,7 +11,7 @@ function PageShell({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: [
@@ -18,16 +19,22 @@ function PageShell({
         WIDTH_CLS[maxWidth],
         padded ? "px-4 sm:px-6 lg:px-8 py-6" : "",
         className
-      ].filter(Boolean).join(" ")
-    },
-    children
+      ].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));
+  return /* @__PURE__ */ jsxs("div", { className: ["flex items-start justify-between gap-4 mb-6", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      eyebrow && /* @__PURE__ */ jsx("p", { className: "text-caption font-medium text-fg-muted mb-1", children: eyebrow }),
+      /* @__PURE__ */ jsx("h1", { className: "text-heading-md font-semibold text-fg-primary truncate", children: title })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions })
+  ] });
 }
 function PageShellBody({ children, className = "" }) {
-  return /* @__PURE__ */ React.createElement("div", { className: ["space-y-6", className].filter(Boolean).join(" ") }, children);
+  return /* @__PURE__ */ jsx("div", { className: ["space-y-6", className].filter(Boolean).join(" "), children });
 }
 PageShell.Header = PageShellHeader;
 PageShell.Body = PageShellBody;

package/dist/components/page-skeleton.js

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

package/dist/components/page-tabs.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 function isActive(tab, pathname) {
@@ -18,37 +19,49 @@ function tabClass(active) {
   ].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));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tab.ghost && /* @__PURE__ */ jsx("span", { title: "Rota fantasma em valida\xE7\xE3o", children: "\u{1F47B}" }),
+    tab.label,
+    tab.soon && /* @__PURE__ */ jsx("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)]", children: "em breve" }),
+    tab.dot && /* @__PURE__ */ jsxs("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)]", children: [
+      /* @__PURE__ */ jsx("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__ */ jsx("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(" "), children: 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 : "");
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center [background:var(--page-tabs-bg)] [border-bottom:1px_solid_var(--page-tabs-border)]", children: [
+    /* @__PURE__ */ jsx("nav", { className: "flex flex-1 overflow-x-auto scrollbar-none px-4 sm:px-6 lg:px-8", role: controlled ? "tablist" : void 0, children: tabs.map((tab) => {
+      var _a, _b;
+      const active = controlled ? tab.value === value : isActive(tab, pathname);
+      if (controlled) {
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => {
+              var _a2;
+              return onChange == null ? void 0 : onChange((_a2 = tab.value) != null ? _a2 : "");
+            },
+            className: tabClass(active),
+            children: /* @__PURE__ */ jsx(TabContent, { tab, active })
           },
-          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));
+          (_a = tab.value) != null ? _a : tab.label
+        );
+      }
+      return /* @__PURE__ */ jsx(Link, { href: (_b = tab.href) != null ? _b : "#", className: tabClass(active), children: /* @__PURE__ */ jsx(TabContent, { tab, active }) }, tab.href);
+    }) }),
+    trailing && /* @__PURE__ */ jsx("div", { className: "hidden sm:flex shrink-0 items-center pr-4 sm:pr-6 lg:pr-8", children: trailing })
+  ] });
 }
 export {
   PageTabs

package/dist/components/pagination.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 function range(start, end) {
@@ -41,39 +42,43 @@ const Pagination = forwardRef(function Pagination2({
   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 })
-  ))));
+  return /* @__PURE__ */ jsx("nav", { ref, role: "navigation", "aria-label": "Pagina\xE7\xE3o", className, children: /* @__PURE__ */ jsxs("ul", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "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(" "),
+        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+      }
+    ) }),
+    items.map((it, idx) => /* @__PURE__ */ jsx("li", { children: typeof it === "string" ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center min-w-9 h-9 text-fg-muted text-label", children: "\u2026" }) : /* @__PURE__ */ jsx(
+      "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(" "),
+        children: it
+      }
+    ) }, `${it}-${idx}`)),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "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(" "),
+        children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+      }
+    ) })
+  ] }) });
 });
 export {
   Pagination

package/dist/components/paywall-banner.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Lock, AlertTriangle } from "lucide-react";
 const STYLES = {
   warn: {
@@ -19,7 +20,7 @@ const STYLES = {
   }
 };
 function DefaultLink({ href, className, children }) {
-  return /* @__PURE__ */ React.createElement("a", { href, className }, children);
+  return /* @__PURE__ */ jsx("a", { href, className, children });
 }
 function PaywallBanner({
   variant,
@@ -34,8 +35,23 @@ function PaywallBanner({
   const s = STYLES[variant];
   const Icon = s.Icon;
   const ctaClass = ["text-caption font-semibold px-3 py-1.5 rounded-(--radius-card) shrink-0 transition-colors", s.cta].join(" ");
-  const cta = ctaHref ? /* @__PURE__ */ React.createElement(LinkAs, { href: ctaHref, className: ctaClass }, ctaLabel, " \u2192") : onCta ? /* @__PURE__ */ React.createElement("button", { type: "button", onClick: onCta, className: ctaClass }, ctaLabel, " \u2192") : null;
-  return /* @__PURE__ */ React.createElement("div", { 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, className: ["shrink-0 mt-0.5", s.iconColor].join(" ") }), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: ["text-label font-semibold", s.title].join(" ") }, title), /* @__PURE__ */ React.createElement("div", { className: ["text-caption mt-0.5", s.desc].join(" ") }, description))), cta);
+  const cta = ctaHref ? /* @__PURE__ */ jsxs(LinkAs, { href: ctaHref, className: ctaClass, children: [
+    ctaLabel,
+    " \u2192"
+  ] }) : onCta ? /* @__PURE__ */ jsxs("button", { type: "button", onClick: onCta, className: ctaClass, children: [
+    ctaLabel,
+    " \u2192"
+  ] }) : null;
+  return /* @__PURE__ */ jsxs("div", { 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(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 min-w-0", children: [
+      /* @__PURE__ */ jsx(Icon, { size: 18, className: ["shrink-0 mt-0.5", s.iconColor].join(" ") }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: ["text-label font-semibold", s.title].join(" "), children: title }),
+        /* @__PURE__ */ jsx("div", { className: ["text-caption mt-0.5", s.desc].join(" "), children: description })
+      ] })
+    ] }),
+    cta
+  ] });
 }
 export {
   PaywallBanner

package/dist/components/paywall.js

@@ -4,6 +4,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Lock, Sparkles } from "lucide-react";
 import { ICON_MAP } from "./empty-state.js";
 import { Modal } from "./modal.js";
@@ -27,26 +28,35 @@ function PaywallContent({
   var _a;
   const Icon = (_a = ICON_MAP[icon]) != null ? _a : Lock;
   const isTrial = reason === "trial_value";
-  const cta = ctaHref && Link ? /* @__PURE__ */ React.createElement(Link, { href: ctaHref, className: CTA_CLASS, onClick: onCta }, ctaLabel) : ctaHref ? /* @__PURE__ */ React.createElement("a", { href: ctaHref, className: CTA_CLASS, onClick: onCta }, ctaLabel) : /* @__PURE__ */ React.createElement("button", { type: "button", className: CTA_CLASS, onClick: onCta }, ctaLabel);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center text-center px-2" }, /* @__PURE__ */ React.createElement("div", { className: "relative mb-4 text-fg-secondary" }, /* @__PURE__ */ React.createElement(Icon, { size: 52, strokeWidth: 1.25 }), /* @__PURE__ */ React.createElement("span", { className: `absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full ${isTrial ? "bg-amber-500 text-white" : "bg-brand-primary text-brand-on-primary"}` }, isTrial ? /* @__PURE__ */ React.createElement(Sparkles, { size: 12, strokeWidth: 2.5 }) : /* @__PURE__ */ React.createElement(Lock, { size: 12, strokeWidth: 2.5 }))), /* @__PURE__ */ React.createElement("span", { className: `inline-flex items-center rounded-full px-2.5 py-1 text-caption font-medium ${isTrial ? "bg-amber-100 text-amber-900" : "bg-surface-raised text-fg-secondary"}` }, planLineText(reason, planLabel)), /* @__PURE__ */ React.createElement("p", { className: "text-body font-semibold text-fg-primary mt-3 mb-1.5" }, title), description && /* @__PURE__ */ React.createElement("p", { className: "text-label text-fg-muted max-w-sm leading-relaxed mb-5" }, description), /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-xs" }, cta));
+  const cta = ctaHref && Link ? /* @__PURE__ */ jsx(Link, { href: ctaHref, className: CTA_CLASS, onClick: onCta, children: ctaLabel }) : ctaHref ? /* @__PURE__ */ jsx("a", { href: ctaHref, className: CTA_CLASS, onClick: onCta, children: ctaLabel }) : /* @__PURE__ */ jsx("button", { type: "button", className: CTA_CLASS, onClick: onCta, children: ctaLabel });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center px-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative mb-4 text-fg-secondary", children: [
+      /* @__PURE__ */ jsx(Icon, { size: 52, strokeWidth: 1.25 }),
+      /* @__PURE__ */ jsx("span", { className: `absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full ${isTrial ? "bg-amber-500 text-white" : "bg-brand-primary text-brand-on-primary"}`, children: isTrial ? /* @__PURE__ */ jsx(Sparkles, { size: 12, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx(Lock, { size: 12, strokeWidth: 2.5 }) })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-1 text-caption font-medium ${isTrial ? "bg-amber-100 text-amber-900" : "bg-surface-raised text-fg-secondary"}`, children: planLineText(reason, planLabel) }),
+    /* @__PURE__ */ jsx("p", { className: "text-body font-semibold text-fg-primary mt-3 mb-1.5", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-label text-fg-muted max-w-sm leading-relaxed mb-5", children: description }),
+    /* @__PURE__ */ jsx("div", { className: "w-full max-w-xs", children: cta })
+  ] });
 }
 function PaywallState(_a) {
   var _b = _a, { className = "" } = _b, content = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: ["flex flex-col items-center justify-center min-h-[320px] flex-1 py-10", className].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement(PaywallContent, __spreadValues({}, content))
+      className: ["flex flex-col items-center justify-center min-h-[320px] flex-1 py-10", className].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx(PaywallContent, __spreadValues({}, content))
+    }
   );
 }
 function PaywallModal(_c) {
   var _d = _c, { open, onClose } = _d, content = __objRest(_d, ["open", "onClose"]);
-  return /* @__PURE__ */ React.createElement(Modal, { open, onClose, size: "sm" }, /* @__PURE__ */ React.createElement("div", { className: "py-2" }, /* @__PURE__ */ React.createElement(PaywallContent, __spreadProps(__spreadValues({}, content), { onCta: () => {
+  return /* @__PURE__ */ jsx(Modal, { open, onClose, size: "sm", children: /* @__PURE__ */ jsx("div", { className: "py-2", children: /* @__PURE__ */ jsx(PaywallContent, __spreadProps(__spreadValues({}, content), { onCta: () => {
     var _a;
     (_a = content.onCta) == null ? void 0 : _a.call(content);
     onClose();
-  } }))));
+  } })) }) });
 }
 export {
   PaywallContent,

package/dist/components/phone-frame.js

@@ -1,6 +1,7 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 function PhoneFrame({ children, className = "" }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: [
@@ -8,9 +9,9 @@ function PhoneFrame({ children, className = "" }) {
         "relative rounded-[2.5rem] border-[6px] border-(--text-primary)",
         "bg-white overflow-hidden shadow-2xl",
         className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-y-auto overflow-x-hidden scrollbar-none" }, children)
+      ].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto overflow-x-hidden scrollbar-none", children })
+    }
   );
 }
 export {