@ramme-io/ui 4.0.1 → 4.1.0

package/dist/components/navigation/Menu.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as p, Fragment as b } from "react/jsx-runtime";
-import m, { useState as v, useRef as d, useCallback as f, useEffect as x } from "react";
-import { Slot as w } from "@radix-ui/react-slot";
+import m, { useState as v, useRef as d, useCallback as f, useEffect as w } from "react";
+import { Slot as x } from "@radix-ui/react-slot";
 import { cn as E } from "../../utils/cn.js";
 const y = () => /* @__PURE__ */ n("div", { className: "my-1 h-px bg-border", role: "separator" }), R = ({
   children: s,
@@ -11,14 +11,14 @@ const y = () => /* @__PURE__ */ n("div", { className: "my-1 h-px bg-border", rol
 }) => {
   const o = E(
     "flex items-center w-full text-left px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150 ease-in-out whitespace-nowrap rounded-md",
-    "hover:bg-accent hover:text-accent-foreground text-text",
+    "hover:bg-accent hover:text-accent-foreground text-foreground",
     l && "opacity-50 cursor-not-allowed"
   ), r = e && m.isValidElement(e) ? m.cloneElement(e, {
     size: 14,
     className: "mr-2 text-muted-foreground"
   }) : null;
   return /* @__PURE__ */ n(
-    t ? w : "button",
+    t ? x : "button",
     {
       onClick: c,
       disabled: l,
@@ -42,7 +42,7 @@ const y = () => /* @__PURE__ */ n("div", { className: "my-1 h-px bg-border", rol
   }, h = f(() => t((a) => !a), []), i = f((a) => {
     o.current && !o.current.contains(a.target) && t(!1);
   }, []);
-  return x(() => (e ? document.addEventListener("mousedown", i) : document.removeEventListener("mousedown", i), () => {
+  return w(() => (e ? document.addEventListener("mousedown", i) : document.removeEventListener("mousedown", i), () => {
     document.removeEventListener("mousedown", i);
   }), [e, i]), /* @__PURE__ */ p(
     "div",
@@ -57,7 +57,7 @@ const y = () => /* @__PURE__ */ n("div", { className: "my-1 h-px bg-border", rol
           "div",
           {
             onMouseEnter: u,
-            className: `origin-top-right absolute z-50 rounded-md shadow-lg bg-card border border-border ring-1 ring-black ring-opacity-5 focus:outline-none min-w-[12rem] w-max ${(() => {
+            className: `origin-top-right absolute z-popover rounded-md shadow-lg bg-card border border-border ring-1 ring-black ring-opacity-5 focus:outline-none min-w-[12rem] w-max ${(() => {
               switch (l) {
                 case "bottom-left":
                   return "top-full left-0 mt-1";

package/dist/components/navigation/MobileNav.js

@@ -66,7 +66,7 @@ const C = ({ tab: n, isActive: o, onTap: s }) => /* @__PURE__ */ l(
       "nav",
       {
         className: c(
-          "fixed inset-x-0 bottom-0 z-40 md:hidden",
+          "fixed inset-x-0 bottom-0 z-nav md:hidden",
           "border-t border-border bg-card/95 backdrop-blur-md",
           "supports-[backdrop-filter]:bg-card/80",
           // Safe area for notched phones (iPhone etc.)

package/dist/components/navigation/Pagination.js

@@ -1,6 +1,6 @@
-import { jsxs as x, jsx as m } from "react/jsx-runtime";
-import { useMemo as N, useCallback as o } from "react";
-import { Button as e } from "../ui/Button.js";
+import { jsxs as u, jsx as m } from "react/jsx-runtime";
+import { useMemo as N, useCallback as e } from "react";
+import { Button as o } from "../ui/Button.js";
 const j = ({
   currentPage: s,
   totalPages: l,
@@ -21,50 +21,55 @@ const j = ({
     for (let f = h; f <= d; f++)
       i.push(f);
     return d < l && (d < l - 1 && i.push("..."), i.push(l)), i;
-  }, [s, l, c]), v = o((i) => {
+  }, [s, l, c]), v = e((i) => {
     n(i);
-  }, [n]), k = o(() => {
+  }, [n]), x = e(() => {
     n(s - 1);
-  }, [s, n]), u = o(() => {
+  }, [s, n]), k = e(() => {
     n(s + 1);
   }, [s, n]);
-  return l <= 1 ? null : /* @__PURE__ */ x("nav", { className: `flex items-center justify-center gap-2 ${p || ""}`, "aria-label": "Pagination", children: [
-    /* @__PURE__ */ m(
-      e,
-      {
-        variant: "outline",
-        size: "sm",
-        onClick: k,
-        disabled: s === 1,
-        iconLeft: "chevron-left",
-        children: "Previous"
-      }
-    ),
-    /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: t.map(
-      (i, r) => typeof i == "number" ? /* @__PURE__ */ m(
-        e,
+  return l <= 1 ? null : (
+    /* flex-wrap so the control folds instead of overflowing. Previous + the
+       page buttons + Next is wider than a 360px viewport, and without wrapping
+       the nav painted 74px past its container on every product that paginates. */
+    /* @__PURE__ */ u("nav", { className: `flex flex-wrap items-center justify-center gap-2 ${p || ""}`, "aria-label": "Pagination", children: [
+      /* @__PURE__ */ m(
+        o,
         {
-          variant: s === i ? "primary" : "ghost",
+          variant: "outline",
           size: "sm",
-          onClick: () => v(i),
-          className: "w-10",
-          children: i
-        },
-        i
-      ) : /* @__PURE__ */ m("span", { className: "px-2 py-1 text-sm text-muted-foreground", children: "..." }, `ellipsis-${r}`)
-    ) }),
-    /* @__PURE__ */ m(
-      e,
-      {
-        variant: "outline",
-        size: "sm",
-        onClick: u,
-        disabled: s === l,
-        iconRight: "chevron-right",
-        children: "Next"
-      }
-    )
-  ] });
+          onClick: x,
+          disabled: s === 1,
+          iconLeft: "chevron-left",
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: t.map(
+        (i, r) => typeof i == "number" ? /* @__PURE__ */ m(
+          o,
+          {
+            variant: s === i ? "primary" : "ghost",
+            size: "sm",
+            onClick: () => v(i),
+            className: "w-10",
+            children: i
+          },
+          i
+        ) : /* @__PURE__ */ m("span", { className: "px-2 py-1 text-sm text-muted-foreground", children: "..." }, `ellipsis-${r}`)
+      ) }),
+      /* @__PURE__ */ m(
+        o,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: k,
+          disabled: s === l,
+          iconRight: "chevron-right",
+          children: "Next"
+        }
+      )
+    ] })
+  );
 };
 export {
   j as Pagination

package/dist/components/navigation/Stepper.js

@@ -1,33 +1,33 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import n from "react";
-import { Icon as d } from "../ui/Icon.js";
-const b = ({ steps: i, currentStep: r, className: c }) => /* @__PURE__ */ e("div", { className: `flex justify-between items-start ${c || ""}`, children: i.map((l, t) => {
-  const s = t < r, m = t === r, o = t > r;
-  return /* @__PURE__ */ a(n.Fragment, { children: [
-    /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center", children: [
-      /* @__PURE__ */ e(
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import d from "react";
+import { Icon as n } from "../ui/Icon.js";
+const b = ({ steps: m, currentStep: t, className: o }) => /* @__PURE__ */ r("div", { className: `flex justify-between items-start ${o || ""}`, children: m.map((a, e) => {
+  const s = e < t, i = e === t, c = e > t;
+  return /* @__PURE__ */ l(d.Fragment, { children: [
+    /* @__PURE__ */ l("div", { className: "flex flex-col items-center text-center", children: [
+      /* @__PURE__ */ r(
         "div",
         {
           className: `w-8 h-8 rounded-full flex items-center justify-center border-2 transition-all duration-300
                   ${s ? "bg-primary border-primary text-white" : ""}
-                  ${m ? "bg-card border-primary text-primary" : ""}
-                  ${o ? "bg-card border-border text-text-light" : ""}
+                  ${i ? "bg-card border-primary text-primary" : ""}
+                  ${c ? "bg-card border-border text-muted-foreground" : ""}
                 `,
-          children: s ? /* @__PURE__ */ e(d, { name: "check", size: 16 }) : /* @__PURE__ */ e("span", { children: t + 1 })
+          children: s ? /* @__PURE__ */ r(n, { name: "check", size: 16 }) : /* @__PURE__ */ r("span", { children: e + 1 })
         }
       ),
-      /* @__PURE__ */ a("div", { className: "mt-2", children: [
-        /* @__PURE__ */ e("p", { className: `font-semibold text-sm ${m ? "text-primary" : "text-text"}`, children: l.label }),
-        l.summary && /* @__PURE__ */ e("p", { className: "text-xs text-text-light mt-1", children: l.summary })
+      /* @__PURE__ */ l("div", { className: "mt-2", children: [
+        /* @__PURE__ */ r("p", { className: `font-semibold text-sm ${i ? "text-primary" : "text-foreground"}`, children: a.label }),
+        a.summary && /* @__PURE__ */ r("p", { className: "text-xs text-muted-foreground mt-1", children: a.summary })
       ] })
     ] }),
-    t < i.length - 1 && /* @__PURE__ */ e("div", { className: "flex-1 mt-4 mx-2 h-0.5", children: /* @__PURE__ */ e(
+    e < m.length - 1 && /* @__PURE__ */ r("div", { className: "flex-1 mt-4 mx-2 h-0.5", children: /* @__PURE__ */ r(
       "div",
       {
-        className: `h-full w-full rounded-full transition-colors duration-300 ${t < r ? "bg-primary" : "bg-border"}`
+        className: `h-full w-full rounded-full transition-colors duration-300 ${e < t ? "bg-primary" : "bg-border"}`
       }
     ) })
-  ] }, t);
+  ] }, e);
 }) });
 export {
   b as Stepper

package/dist/components/navigation/Tabs.js

@@ -1,13 +1,13 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import p, { useMemo as f, useState as g, useCallback as v } from "react";
-import { cn as l } from "../../utils/cn.js";
-const k = ({ children: o }) => /* @__PURE__ */ a("div", { role: "tabpanel", className: "p-4 bg-card rounded-b-lg border border-t-0 border-border", children: o }), C = ({ children: o, defaultActiveTab: e, className: c, size: s = "md" }) => {
-  const d = f(() => e || (o.length > 0 ? o[0].props.id : ""), [o, e]), [n, m] = g(d), b = v((r) => m(r), []);
-  return /* @__PURE__ */ i("div", { className: c, children: [
-    /* @__PURE__ */ a("div", { className: "flex border-b border-border mb-px", role: "tablist", children: o.map((r) => {
-      const t = r.props.icon, u = s === "sm" ? 14 : 16, x = t && p.isValidElement(t) ? p.cloneElement(t, {
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import p, { useMemo as x, useState as g, useCallback as v } from "react";
+import { cn as d } from "../../utils/cn.js";
+const k = ({ children: o }) => /* @__PURE__ */ l("div", { role: "tabpanel", className: "p-4 bg-card rounded-b-lg border border-t-0 border-border", children: o }), C = ({ children: o, defaultActiveTab: e, className: a, size: s = "md" }) => {
+  const c = x(() => e || (o.length > 0 ? o[0].props.id : ""), [o, e]), [n, m] = g(c), b = v((r) => m(r), []);
+  return /* @__PURE__ */ i("div", { className: a, children: [
+    /* @__PURE__ */ l("div", { className: "flex border-b border-border mb-px", role: "tablist", children: o.map((r) => {
+      const t = r.props.icon, u = s === "sm" ? 14 : 16, f = t && p.isValidElement(t) ? p.cloneElement(t, {
         size: u,
-        className: l("mr-2", s === "sm" ? "mt-[1px]" : "")
+        className: d("mr-2", s === "sm" ? "mt-[1px]" : "")
         // slight alignment tweak for smaller text
       }) : null;
       return /* @__PURE__ */ i(
@@ -18,13 +18,13 @@ const k = ({ children: o }) => /* @__PURE__ */ a("div", { role: "tabpanel", clas
           "aria-controls": r.props.id,
           "aria-selected": n === r.props.id,
           onClick: () => b(r.props.id),
-          className: l(
-            "inline-flex items-center text-text font-medium border-b-2 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+          className: d(
+            "inline-flex items-center text-foreground font-medium border-b-2 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
             s === "sm" ? "px-3 py-1.5 text-sm" : "px-4 py-2 text-lg",
             n === r.props.id ? "border-primary" : "border-transparent hover:border-border"
           ),
           children: [
-            x,
+            f,
             r.props.label
           ]
         },

package/dist/components/theme/ThemeLab.d.ts

@@ -17,8 +17,14 @@ export interface ThemeLabProps {
     onTokensChange: (tokens: ThemeTokensDraft) => void;
     /** Saves activeTokens as the new master restore point. */
     onSave: () => void;
-    /** Restores DOM and store to savedTokens. */
+    /** Restores DOM and store to savedTokens — discards edits since the last save. */
     onRevert: () => void;
+    /**
+     * Drops the user's theme entirely so the app's own theme takes over again.
+     * Optional: a host that has no baked-in theme has nothing to reset to, and
+     * the control is hidden rather than shown doing nothing.
+     */
+    onResetToDefault?: () => void;
     profiles: AestheticProfile[];
     profileIcons: Record<string, string>;
     activeProfileId?: string;