@ramme-io/ui 4.0.1 → 4.1.1

package/dist/components/navigation/MobileNav.d.ts

@@ -24,11 +24,50 @@ export interface MobileNavProps {
     drawerFooter?: React.ReactNode;
     /** Additional CSS classes on the root bar. */
     className?: string;
+    /**
+     * How navigation is presented.
+     *
+     * - `'bar'` (default) — the fixed bottom tab bar, with a "More" drawer for
+     *   `secondaryItems`.
+     * - `'sheet'` — no fixed bar at all. Every destination (tabs AND
+     *   secondaryItems) lives in a `Sheet`, which the host opens via `isOpen`.
+     *   Use this when the app already has a top header to hang a trigger from:
+     *   a persistent bottom bar stacks directly on top of a mobile browser's
+     *   own toolbar, and the two together eat ~120px of a phone screen before
+     *   any content is drawn.
+     *
+     *   `Sheet`, not `Drawer` — this surface is thumb-driven, which is the line
+     *   Sheet's own docs draw between the two. It opens at 60% and grows to
+     *   full as you drag or scroll it up, keeping the page visible behind it so
+     *   the menu reads as a layer over where you are rather than a departure
+     *   from it. ramme-marketing's AppHeader uses the same component the same
+     *   way; this is that pattern, with the item rendering shared rather than
+     *   hand-rolled per app.
+     */
+    variant?: 'bar' | 'sheet';
+    /**
+     * Controlled drawer state. Required for `'sheet'`, which has no trigger of
+     * its own. Ignored by `'bar'`, whose "More" button owns its own state.
+     */
+    isOpen?: boolean;
+    /** Fired when the sheet wants to close (backdrop, Escape, item tapped). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Extra content rendered inside the panel body, after the destinations and
+     * scrolling with them.
+     *
+     * The mirror of `drawerHeader` at the other end, and deliberately NOT
+     * `drawerFooter`: that one maps to the surface's sticky footer, pinned above
+     * the home indicator and always visible. Use this for content that belongs
+     * *with* the list rather than under it — a control that the header hides at
+     * narrow widths and would otherwise be unreachable, say.
+     */
+    children?: React.ReactNode;
 }
 /**
  * @wizard
  * @name MobileNav
- * @description A fixed bottom tab bar for mobile screens, providing native-feeling navigation with primary icon+label tabs and a "More" drawer for secondary links. Hidden on md: and up via Tailwind. Designed as the mobile counterpart to the desktop Sidebar.
+ * @description Mobile navigation, in two shapes. 'bar' is a fixed bottom tab bar with icon+label tabs and a "More" drawer for secondary links. 'sheet' drops the bar entirely and puts every destination in a bottom drawer the host opens from its own trigger — the right choice when a mobile browser's toolbar already owns the bottom edge. Hidden on md: and up via Tailwind. The mobile counterpart to the desktop Sidebar.
  * @tags navigation, mobile, bottom-bar, shell, ui
  * @category navigation
  * @id mobile-nav
@@ -40,5 +79,9 @@ export interface MobileNavProps {
  * @param {ReactNode} drawerHeader - Optional slot rendered at the top of the drawer body.
  * @param {ReactNode} drawerFooter - Optional slot rendered in the sticky drawer footer (e.g. Logout button).
  * @param {string} className - Additional CSS classes on the root nav bar.
+ * @param {string} variant - 'bar' (default) renders the fixed bottom tab bar with a "More" Drawer. 'sheet' renders no bar at all and puts every destination in a Sheet — opening at 60% and growing to full as you drag or scroll it up — which the host opens itself — use it when a top header can hold the trigger, since a fixed bar and a mobile browser's own toolbar stack into ~120px of lost screen.
+ * @param {boolean} isOpen - Controlled drawer state. Required by 'sheet', which has no trigger of its own; ignored by 'bar'.
+ * @param {function} onOpenChange - Fired when the sheet wants to close (backdrop, Escape, or an item tapped).
+ * @param {ReactNode} children - Extra content rendered in the panel body after the destinations, scrolling with them. The mirror of drawerHeader; use it instead of drawerFooter when the content belongs with the list rather than pinned under it.
  */
 export declare const MobileNav: React.FC<MobileNavProps>;

package/dist/components/navigation/MobileNav.js

@@ -1,98 +1,126 @@
-import { jsxs as l, Fragment as g, jsx as r } from "react/jsx-runtime";
-import { useState as w, useCallback as f } from "react";
-import { cn as c } from "../../utils/cn.js";
-import { Icon as a } from "../ui/Icon.js";
-import { Drawer as y } from "../layout/Drawer.js";
-const C = ({ tab: n, isActive: o, onTap: s }) => /* @__PURE__ */ l(
+import { jsxs as i, Fragment as w, jsx as r } from "react/jsx-runtime";
+import { useState as S, useCallback as p } from "react";
+import { cn as m } from "../../utils/cn.js";
+import { Icon as u } from "../ui/Icon.js";
+import { Drawer as z } from "../layout/Drawer.js";
+import { Sheet as B } from "../layout/Sheet.js";
+const v = ({ tab: t, isActive: s, onTap: o }) => /* @__PURE__ */ i(
   "button",
   {
-    onClick: s,
-    className: c(
+    onClick: o,
+    className: m(
       "flex flex-1 flex-col items-center justify-center gap-0.5 py-1.5 transition-colors duration-150",
-      o ? "text-primary" : "text-muted-foreground active:text-foreground"
+      s ? "text-primary" : "text-muted-foreground active:text-foreground"
     ),
     children: [
       /* @__PURE__ */ r(
-        a,
+        u,
         {
-          name: n.icon,
-          className: c(
+          name: t.icon,
+          className: m(
             "h-5 w-5 transition-transform duration-150",
-            o && "scale-110"
+            s && "scale-110"
           )
         }
       ),
-      /* @__PURE__ */ r("span", { className: "text-[10px] font-medium leading-tight", children: n.label })
+      /* @__PURE__ */ r("span", { className: "text-[10px] font-medium leading-tight", children: t.label })
     ]
   }
-), D = ({ item: n, isActive: o, onTap: s }) => /* @__PURE__ */ l(
+), A = ({ item: t, isActive: s, onTap: o }) => /* @__PURE__ */ i(
   "button",
   {
-    onClick: s,
-    className: c(
+    onClick: o,
+    className: m(
       "flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors duration-150",
-      o ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted active:bg-muted"
+      s ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted active:bg-muted"
     ),
     children: [
-      /* @__PURE__ */ r(a, { name: n.icon, className: "h-5 w-5 shrink-0" }),
-      /* @__PURE__ */ r("span", { className: "text-fluid-base font-medium", children: n.label })
+      /* @__PURE__ */ r(u, { name: t.icon, className: "h-5 w-5 shrink-0" }),
+      /* @__PURE__ */ r("span", { className: "text-fluid-base font-medium", children: t.label })
     ]
   }
-), z = ({
-  tabs: n,
-  secondaryItems: o = [],
-  activeTabId: s,
-  onNavigate: t,
-  drawerTitle: u = "Menu",
-  drawerHeader: m,
-  drawerFooter: x,
-  className: h
+), J = ({
+  tabs: t,
+  secondaryItems: s = [],
+  activeTabId: o,
+  onNavigate: l,
+  drawerTitle: x = "Menu",
+  drawerHeader: h,
+  drawerFooter: b,
+  className: g,
+  variant: D = "bar",
+  isOpen: j,
+  onOpenChange: a,
+  children: T
 }) => {
-  const [p, d] = w(!1), b = f(
+  const [C, I] = S(!1), n = D === "sheet", f = n ? !!j : C, c = p(
     (e) => {
-      var i;
-      (i = e.onClick) == null || i.call(e), t == null || t(e);
+      n ? a == null || a(e) : I(e);
     },
-    [t]
-  ), k = f(
+    [n, a]
+  ), k = n ? [...t, ...s] : s, M = p(
     (e) => {
-      var i;
-      (i = e.onClick) == null || i.call(e), t == null || t(e), d(!1);
+      var d;
+      (d = e.onClick) == null || d.call(e), l == null || l(e);
     },
-    [t]
+    [l]
+  ), N = p(
+    (e) => {
+      var d;
+      (d = e.onClick) == null || d.call(e), l == null || l(e), c(!1);
+    },
+    // `setIsDrawerOpen` closes over `onOpenChange`, so it belongs here. Without
+    // it, a host that memoises `onNavigate` but passes `onOpenChange` inline
+    // keeps the first render's close handler for the life of the component and
+    // the sheet stops closing on tap.
+    [l, c]
   );
-  return /* @__PURE__ */ l(g, { children: [
-    /* @__PURE__ */ r(
+  if (n && k.length === 0) return null;
+  const y = /* @__PURE__ */ i(w, { children: [
+    h && /* @__PURE__ */ r("div", { className: "mb-fluid-md pb-fluid-sm border-b border-border", children: h }),
+    /* @__PURE__ */ r("div", { className: "space-y-1", children: k.map((e) => /* @__PURE__ */ r(
+      A,
+      {
+        item: e,
+        isActive: o === e.id,
+        onTap: () => N(e)
+      },
+      e.id
+    )) }),
+    T
+  ] });
+  return /* @__PURE__ */ i(w, { children: [
+    !n && /* @__PURE__ */ r(
       "nav",
       {
-        className: c(
-          "fixed inset-x-0 bottom-0 z-40 md:hidden",
+        className: m(
+          "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.)
           "pb-[env(safe-area-inset-bottom,0px)]",
-          h
+          g
         ),
-        children: /* @__PURE__ */ l("div", { className: "flex items-stretch", children: [
-          n.map((e) => /* @__PURE__ */ r(
-            C,
+        children: /* @__PURE__ */ i("div", { className: "flex items-stretch", children: [
+          t.map((e) => /* @__PURE__ */ r(
+            v,
             {
               tab: e,
-              isActive: s === e.id,
-              onTap: () => b(e)
+              isActive: o === e.id,
+              onTap: () => M(e)
             },
             e.id
           )),
-          o.length > 0 && /* @__PURE__ */ l(
+          s.length > 0 && /* @__PURE__ */ i(
             "button",
             {
-              onClick: () => d(!0),
-              className: c(
+              onClick: () => c(!0),
+              className: m(
                 "flex flex-1 flex-col items-center justify-center gap-0.5 py-1.5 transition-colors duration-150",
-                p ? "text-primary" : "text-muted-foreground active:text-foreground"
+                f ? "text-primary" : "text-muted-foreground active:text-foreground"
               ),
               children: [
-                /* @__PURE__ */ r(a, { name: "menu", className: "h-5 w-5" }),
+                /* @__PURE__ */ r(u, { name: "menu", className: "h-5 w-5" }),
                 /* @__PURE__ */ r("span", { className: "text-[10px] font-medium leading-tight", children: "More" })
               ]
             }
@@ -100,31 +128,29 @@ const C = ({ tab: n, isActive: o, onTap: s }) => /* @__PURE__ */ l(
         ] })
       }
     ),
-    /* @__PURE__ */ l(
-      y,
+    n ? /* @__PURE__ */ r(
+      B,
       {
-        isOpen: p,
-        onClose: () => d(!1),
+        isOpen: f,
+        onClose: () => c(!1),
+        title: x,
+        footer: b,
+        children: y
+      }
+    ) : /* @__PURE__ */ r(
+      z,
+      {
+        isOpen: f,
+        onClose: () => c(!1),
         position: "bottom",
         size: "85dvh",
-        title: u,
-        footer: x,
-        children: [
-          m && /* @__PURE__ */ r("div", { className: "mb-fluid-md pb-fluid-sm border-b border-border", children: m }),
-          /* @__PURE__ */ r("div", { className: "space-y-1", children: o.map((e) => /* @__PURE__ */ r(
-            D,
-            {
-              item: e,
-              isActive: s === e.id,
-              onTap: () => k(e)
-            },
-            e.id
-          )) })
-        ]
+        title: x,
+        footer: b,
+        children: y
       }
     )
   ] });
 };
 export {
-  z as MobileNav
+  J as MobileNav
 };

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,30 +1,37 @@
-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 { jsxs as t, jsx as a } from "react/jsx-runtime";
+import p, { useMemo as x, 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: [
+const k = ({ children: o }) => /* @__PURE__ */ a(
+  "div",
+  {
+    role: "tabpanel",
+    className: "@container bg-card py-fluid-md px-0 @md:px-fluid-md",
+    children: o
+  }
+), C = ({ children: o, defaultActiveTab: e, className: c, size: s = "md" }) => {
+  const d = x(() => e || (o.length > 0 ? o[0].props.id : ""), [o, e]), [n, m] = g(d), u = v((r) => m(r), []);
+  return /* @__PURE__ */ t("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, {
-        size: u,
+      const i = r.props.icon, b = s === "sm" ? 14 : 16, f = i && p.isValidElement(i) ? p.cloneElement(i, {
+        size: b,
         className: l("mr-2", s === "sm" ? "mt-[1px]" : "")
         // slight alignment tweak for smaller text
       }) : null;
-      return /* @__PURE__ */ i(
+      return /* @__PURE__ */ t(
         "button",
         {
           id: `tab-${r.props.id}`,
           role: "tab",
           "aria-controls": r.props.id,
           "aria-selected": n === r.props.id,
-          onClick: () => b(r.props.id),
+          onClick: () => u(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",
+            "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;