laif-ds 0.2.91 → 1.0.0

package/dist/components/design-tokens.js

@@ -16,6 +16,10 @@ const e = {
     default: "h-9 px-3 py-2 text-sm",
     sm: "h-8 px-2.5 py-1.5 text-xs",
     lg: "h-10 px-4 py-2 text-base",
+    // Minimum comfortable touch target (44px). `min-h-` rather than `h-`: a row
+    // that wraps onto a second line has to grow, not clip. The other sizes top
+    // out at h-10 = 40px, which is fine for a mouse and short for a thumb.
+    touch: "min-h-11 px-4 py-2.5 text-sm",
     icon: {
       default: "size-9"
     }
@@ -25,8 +29,24 @@ const e = {
     base: "text-sm font-medium whitespace-nowrap",
     placeholder: "placeholder:text-d-muted-foreground"
   },
+  // Motion
+  //
+  // The house curve: a strong, front-loaded ease-out that covers most of the
+  // distance immediately and settles, where Tailwind's built-in `ease-out`
+  // (cubic-bezier(0, 0, 0.2, 1)) decelerates too gently to read as deliberate
+  // over the short travels UI actually animates. `duration` is the paired
+  // value — long enough to be seen, short enough not to be waited on.
+  //
+  // `button.tsx` still spells both out inline; it predates this token and is
+  // deliberately left alone here. Adopting it there is a follow-up, so the
+  // curve has one source of truth instead of two.
+  motion: {
+    ease: "ease-[cubic-bezier(0.23,1,0.32,1)]",
+    duration: "duration-[160ms]"
+  },
   // Common interactive behaviors
   interaction: {
+    hover: "hover:bg-d-accent hover:text-d-accent-foreground",
     // Press feedback: the element is pushed down onto the surface and squashes
     // against it, so the shadow must shrink, never grow. Squash-and-stretch —
     // the 2% vertical compression is paid back as 2% horizontal spread
@@ -50,6 +70,70 @@ const e = {
   badge: {
     base: "inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1"
   },
+  // Navigation rows (sidebar / menu lists) specific.
+  //
+  // Not `dropdownItem.selected`: that one paints the accent colour *on a 10%
+  // dilution of itself* — measured 1.85:1 in light, 3.28 tangerine, 4.23
+  // claymorphism, 6.62 dark. Fine as a chip inside a dropdown, unreadable as a
+  // row label. Here the tint stays on the surface and the label keeps
+  // full-contrast `text-d-foreground` (12.19 / 10.35 / 9.35 / 10.22).
+  //
+  // The bar is `d-foreground`, not `d-primary`, for the same reason: in the
+  // light theme `--d-primary` is a pale cyan that measures 1.85:1 against the
+  // tinted row, so a primary bar would fail WCAG 1.4.11 (>= 3:1 for a non-text
+  // indicator) in the default theme. Shape and position carry the state; the
+  // tint adds the brand colour on top where the theme can afford it.
+  //
+  // `base` goes on every row so the selected row's 2px does not shift content.
+  navItem: {
+    base: "border-l-2 border-l-transparent",
+    selected: "bg-d-primary/10 border-l-d-foreground text-d-foreground font-semibold",
+    // A bottom bar's cells are columns, not rows, so the left rule has no edge
+    // to run along and the state has to be carried by the cell's own surface: a
+    // pill, no border on any side.
+    //
+    // The pill is the sidebar row's own state, ported: `bg-d-sidebar-accent` +
+    // `text-d-sidebar-accent-foreground` + a bold label, which is exactly what
+    // `sidebarMenuButtonVariants` paints under `data-[active=true]`. One
+    // vocabulary for "you are here" across the two navigations, which is worth
+    // more than either surface being optimal on its own.
+    //
+    // What comes with it is the sidebar's contrast, and it is very low.
+    // `--d-sidebar-accent` is `--colors--surface--tertiary` at 40% alpha, so on
+    // the bar (`d-card`, #fafafa light / #1f1f1f dark) it composites to #efefef
+    // and #2f2f2f — **1.10:1 in light and 1.23:1 in dark**, far under the 3:1 of
+    // WCAG 1.4.11 for a non-text state indicator. That is not a regression
+    // introduced here: the same fill on the sidebar's own surface (#f5f5f5)
+    // measures 1.08:1, so the desktop sidebar has always marked the current row
+    // by *weight*, with the tint as a hint. The label is never at risk either
+    // way — `--d-sidebar-accent-foreground` is `--colors--text--body-primary`,
+    // the colour the inactive cells already use, 11.9:1 on the composited fill.
+    //
+    // `font-bold` and not `semibold`: with a fill this faint the weight is the
+    // state, and it is the sidebar's own value. It costs label width on a cell
+    // that already truncates at 375px — if that has to be bought back,
+    // `font-semibold` is the place to spend it, not the fill.
+    //
+    // Measured alternatives, for whenever the 3:1 floor has to be met.
+    // `bg-d-primary` + `text-d-primary-foreground`: 1.98:1 light / 7.99:1 dark —
+    // the brand fill this replaced, under the floor in light but separating by
+    // hue, which 1.4.11 does not measure. `bg-d-foreground` + `text-d-background`:
+    // 13.01:1 / 12.49:1 — conforming, but it reads as a selected chip rather
+    // than the current tab and leaves the bar with no brand. Not a tint of
+    // primary: /10 is 1.07:1 light, /40 still 1.30:1, solid `bg-d-accent` 1.26:1.
+    //
+    // `rounded-md` (6px, = `radius.default`) and not `radius.sm`: `sm` is 4px in
+    // the v4 build and 2px in the v3 one, and this would be the single place
+    // where the two CSS bundles disagree. Not `rounded-d-md` either — that maps
+    // onto `--d-radius` and becomes 18px under claymorphism, while the dock it
+    // sits inside is a fixed `rounded-t-lg`.
+    //
+    // `basePill` reserves nothing (there is no border to reserve), so activating
+    // a cell cannot shift its content; it is there so every cell shares the
+    // radius and only the fill changes.
+    basePill: "rounded-md",
+    selectedPill: "bg-d-sidebar-accent text-d-sidebar-accent-foreground font-bold"
+  },
   // Dropdown item specific
   dropdownItem: {
     selected: "bg-d-primary/10 text-d-primary font-medium data-[selected=true]:text-d-primary data-[selected=true]:bg-d-primary/30 hover:text-d-primary hover:bg-d-primary/30",

package/dist/components/ui/app-bottom-nav.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx as o, jsxs as y, Fragment as T } from "react/jsx-runtime";
+import * as F from "react";
+import { designTokens as u } from "../design-tokens.js";
+import { Icon as K } from "./icon.js";
+import { useSidebar as R } from "./sidebar.js";
+import { cn as i } from "../../lib/utils.js";
+const I = 6, w = /* @__PURE__ */ new Set(), c = (t) => {
+  w.has(t) || (w.add(t), console.warn(t));
+}, $ = (t) => `${t.url} ${t.title}`, k = (t) => !!t.isActive || !!t.subItems?.some((n) => n.isActive), z = "md:hidden shrink-0 overflow-hidden bg-d-card border-d-border rounded-t-lg border-t pb-[env(safe-area-inset-bottom)]", D = "flex items-stretch p-1", m = i(
+  // `min-h-11` (44px) written out rather than `sizes.touch`: that token also
+  // carries `px-4`, and 16px of horizontal padding inside a ~61px cell would
+  // leave 29px for the label. `min-h-`, never `h-`: a cell must be able to grow.
+  // `py-1.5` and not `py-2.5`: the bar's breathing room is the `<nav>`'s 4px
+  // inset, and paying for it twice would put the cell at 54px and the bar at
+  // 63px — past the column budget for no legibility gained. It stayed at
+  // `py-1.5` when the icon dropped to 16px, deliberately: `py-2` would have held
+  // the bar at the 59px it had with a 20px glyph, and a lower bar was the point
+  // of the smaller glyph, not a side effect of it. 12px of vertical padding
+  // around 34px of content (16 + 2 + 16) puts the pill at 46px.
+  //
+  // Which leaves this value boxed in from both directions, and tighter than it
+  // was: upwards by the column budget, downwards by the 44px touch floor, now
+  // 2px away instead of 6. Trim `py-1.5`, the icon or the label's line-height
+  // any further and `min-h-11` takes the cell's height over from the padding —
+  // at which point the class list stops describing what renders, silently.
+  // Measure the rendered cell, not the padding.
+  // `cursor-pointer` because the two cell elements must not diverge: v4's
+  // preflight sets `cursor: default` on `<button>`, so without it the Menu cell
+  // would feel inert next to the `<a>` cells on a desktop-narrow window.
+  //
+  // `flex-1 min-w-0` is the equal-width guarantee, and both halves are load
+  // bearing. `flex-1` alone is `1 1 0%`, which distributes the row evenly only
+  // as long as no cell's content forces it wider: a flex item's automatic
+  // minimum size is its min-content width, so a cell whose contents cannot
+  // shrink below the fair share silently takes more than it and every other
+  // cell takes less. Here that floor is 24px — a `shrink-0` 16px icon plus
+  // `px-1` — and the narrowest cell the budget produces is 52px (six cells at
+  // 320px), so today the row is even by arithmetic. `min-w-0` makes it even by
+  // construction instead, at any width and whatever a cell holds, which is what
+  // the row's rhythm actually depends on. The label shrinks in exchange
+  // (`w-full truncate`, whose `overflow-hidden` already floors its own
+  // min-content size at 0) — the label is the right thing to spend.
+  "flex min-h-11 min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 px-1 py-1.5 text-xs",
+  // The radius goes on every cell, not only the marked one: it costs nothing
+  // while the fill is transparent, and it keeps the hover and press surfaces of
+  // an inactive cell the same shape as the pill they can become.
+  u.navItem.basePill,
+  u.focusRing,
+  // `ring-inset` is still right, for a new reason: the cells now touch each
+  // other, not the dock's clipped corners, so a 3px outset ring would not be
+  // shaved — it would spill over the neighbouring cell and read as if two cells
+  // were focused.
+  "focus-visible:ring-inset"
+), p = i(
+  "text-d-foreground font-medium",
+  "[@media(hover:hover)_and_(pointer:fine)]:hover:bg-d-sidebar-accent [@media(hover:hover)_and_(pointer:fine)]:hover:text-d-sidebar-accent-foreground",
+  "active:bg-d-sidebar-accent active:text-d-sidebar-accent-foreground"
+), v = u.navItem.selectedPill, d = (t, n) => /* @__PURE__ */ y(T, { children: [
+  /* @__PURE__ */ o(K, { name: t, size: "xs", className: "shrink-0" }),
+  /* @__PURE__ */ o("span", { className: "w-full truncate text-center", children: n })
+] });
+function J({
+  items: t,
+  showMenu: n = !0,
+  menuLabel: A = "Menu",
+  ariaLabel: B = "Main navigation",
+  menuIconName: M = "Menu",
+  linkComponent: b,
+  linkProps: S = {},
+  className: _,
+  ...j
+}) {
+  const { openMobile: f, setOpenMobile: h, mobileNavTarget: L, setMobileNavTarget: g } = R(), s = n ? I - 1 : I, r = t.slice(0, s);
+  if (t.length > s) {
+    const e = t.slice(s).map((a) => `"${a.title}"`).join(", ");
+    c(
+      `AppBottomNav: ${t.length} items passed, ${s} slots available. Dropped: ${e}.`
+    );
+  }
+  const N = /* @__PURE__ */ new Set();
+  for (const e of r) {
+    const a = $(e);
+    N.has(a) && c(
+      `AppBottomNav: duplicate item "${a}" — one of them is ignored.`
+    ), N.add(a);
+  }
+  const l = r.findIndex(k);
+  r.filter(k).length > 1 && c(
+    `AppBottomNav: more than one active item — "${r[l].title}" wins.`
+  );
+  const x = n && l === -1, P = (e, a) => {
+    const C = {
+      className: i(
+        m,
+        a ? v : p
+      ),
+      "data-slot": "app-bottom-nav-item",
+      "data-active": a ? "true" : void 0,
+      // Not set unconditionally: `truncate` does not alter the text node, so
+      // the full title is already in the accessibility tree and a duplicating
+      // `aria-label` is dead weight.
+      "aria-label": e.ariaLabel,
+      "aria-current": a ? "page" : void 0
+    };
+    return b ? /* @__PURE__ */ o(b, { href: e.url, ...C, ...S, children: d(e.iconName, e.title) }) : /* @__PURE__ */ o("a", { href: e.url, ...C, children: d(e.iconName, e.title) });
+  }, O = (e, a) => (
+    // A button is not a page, so no `aria-current` even when the indicator is here.
+    // No `aria-controls` either — the drill panel's id is Radix-generated and
+    // unreachable from the bar, and a dangling reference is worse than none —
+    // and no `aria-haspopup`, which would promise arrow-key menu semantics the
+    // drill-down does not implement.
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        "data-slot": "app-bottom-nav-item",
+        "data-active": a ? "true" : void 0,
+        "aria-label": e.ariaLabel,
+        "aria-expanded": f && L === e.title,
+        className: i(
+          m,
+          a ? v : p
+        ),
+        onClick: () => {
+          g(e.title), h(!0);
+        },
+        children: d(e.iconName, e.title)
+      }
+    )
+  );
+  return r.length === 0 && !n ? (c(
+    "AppBottomNav: no items and showMenu={false} — nothing to render, the bar is omitted."
+  ), null) : /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "app-bottom-nav",
+      className: i(z, _),
+      ...j,
+      children: /* @__PURE__ */ y("nav", { "aria-label": B, className: D, children: [
+        r.map((e, a) => /* @__PURE__ */ o(F.Fragment, { children: e.subItems?.length ? O(e, a === l) : P(e, a === l) }, $(e))),
+        n && /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            "data-slot": "app-bottom-nav-item",
+            "data-active": x ? "true" : void 0,
+            "aria-expanded": f,
+            className: i(
+              m,
+              x ? v : p
+            ),
+            onClick: () => {
+              g(null), h(!0);
+            },
+            children: d(M, A)
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  J as AppBottomNav
+};

package/dist/components/ui/app-sidebar-mobile.js

@@ -0,0 +1,220 @@
+"use client";
+import { jsx as n, jsxs as f, Fragment as L } from "react/jsx-runtime";
+import * as l from "react";
+import { designTokens as c } from "../design-tokens.js";
+import { Icon as R } from "./icon.js";
+import { useSidebar as U } from "./sidebar.js";
+import { cn as d } from "../../lib/utils.js";
+const v = (t, i) => `${t} ${i.url} ${i.title}`, V = (t, i, a) => {
+  if (!t) return null;
+  for (const h of [...i, ...a ?? []]) {
+    const u = h.items.find(
+      (b) => b.title === t && b.subItems?.length
+    );
+    if (u) return { key: v(h.title, u), item: u };
+  }
+  return console.warn(
+    `AppSidebarMobile: no navigation item with sub-items titled "${t}" — opening at level 0.`
+  ), null;
+}, W = (t) => t.defaultPrevented || t.metaKey || t.ctrlKey || t.shiftKey || t.altKey || t.button !== 0, M = d(
+  "flex w-full items-center gap-3 text-left",
+  c.sizes.touch,
+  c.navItem.base,
+  c.focusRing,
+  // The card clips its children (`overflow-hidden` is what keeps the rounded
+  // corners on the first and last row), so an outset ring would be cut off.
+  "focus-visible:ring-inset",
+  // Touch has no hover, and the hover style is sticky after a tap: the press
+  // state is the only immediate feedback a finger gets. Not
+  // `interaction.active` — that is the button squash, wrong on a list row.
+  "active:bg-d-accent"
+), $ = (t) => t ? c.navItem.selected : c.interaction.hover, X = "text-d-foreground px-4 pb-2 text-xs font-semibold tracking-wide uppercase", E = d(
+  "divide-d-border border-d-border bg-d-card divide-y overflow-hidden border",
+  c.radius.lg
+), Y = (t) => {
+  if (t.icon) {
+    const i = t.icon;
+    return /* @__PURE__ */ n(i, { className: "size-5 shrink-0" });
+  }
+  return t.iconName ? /* @__PURE__ */ n(R, { name: t.iconName, size: "sm", className: "shrink-0" }) : null;
+}, T = (t) => !!t.iconName || !!t.icon, I = (t, { showIconColumn: i, hasChildren: a }) => /* @__PURE__ */ f(L, { children: [
+  i && (Y(t) ?? // Empty placeholder, not an initial: on a wide row the label is right
+  // there, so an initial would only add noise. Desktop icon mode needs
+  // the fallback because there the icon is the only affordance.
+  /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "size-5 shrink-0" })),
+  /* @__PURE__ */ n("span", { className: "flex-1", children: t.title }),
+  a && /* @__PURE__ */ n(
+    R,
+    {
+      name: "ChevronRight",
+      size: "sm",
+      className: "text-d-muted-foreground shrink-0"
+    }
+  )
+] });
+function se({
+  navigation: t,
+  navigationFooter: i,
+  headerContent: a,
+  footerContent: h,
+  linkComponent: u,
+  linkProps: b = {}
+}) {
+  const { openMobile: C, setOpenMobile: j, mobileNavTarget: D } = U(), [r, x] = l.useState(
+    () => V(D, t, i)
+  ), [G, N] = l.useState(!1), g = l.useRef(!0), w = (!!r || G) && !(g.current && r);
+  l.useEffect(() => {
+    g.current = !1;
+  }, []), l.useEffect(() => {
+    C || (x(null), N(!1));
+  }, [C]);
+  const B = l.useRef(null), k = l.useRef(/* @__PURE__ */ new Map()), y = l.useRef(null), O = (e) => (s) => {
+    s ? k.current.set(e, s) : k.current.delete(e);
+  };
+  l.useLayoutEffect(() => {
+    if (r) {
+      if (g.current) return;
+      B.current?.focus();
+      return;
+    }
+    const e = y.current;
+    e && (y.current = null, k.current.get(e)?.focus());
+  }, [r]);
+  const P = (e) => {
+    N(!1), x(e);
+  }, q = () => {
+    y.current = r?.key ?? null, N(!0), x(null);
+  }, A = (e, s) => {
+    const m = d(M, $(e.isActive)), o = (p) => {
+      W(p) || j(!1);
+    };
+    return u ? /* @__PURE__ */ n(
+      u,
+      {
+        href: e.url,
+        className: m,
+        "aria-current": e.isActive ? "page" : void 0,
+        onClick: o,
+        ...b,
+        children: I(e, s)
+      }
+    ) : /* @__PURE__ */ n(
+      "a",
+      {
+        href: e.url,
+        className: m,
+        "aria-current": e.isActive ? "page" : void 0,
+        onClick: o,
+        children: I(e, s)
+      }
+    );
+  }, F = (e, s, m) => {
+    const o = v(e.title, s), p = !!s.subItems?.length, K = { showIconColumn: m, hasChildren: p }, J = s.isActive || !!s.subItems?.some((Q) => Q.isActive);
+    return p ? /* @__PURE__ */ n(
+      "button",
+      {
+        ref: O(o),
+        type: "button",
+        className: d(M, $(J)),
+        onClick: () => P({ key: o, item: s }),
+        children: I(s, K)
+      }
+    ) : A(s, K);
+  }, S = (e, s = !0) => {
+    const m = e.items.some(T);
+    return /* @__PURE__ */ f("section", { children: [
+      s && e.title && /* @__PURE__ */ n("h3", { className: X, children: e.title }),
+      /* @__PURE__ */ n("ul", { className: E, children: e.items.map((o) => /* @__PURE__ */ n("li", { children: F(e, o, m) }, v(e.title, o))) })
+    ] }, e.title);
+  }, z = r?.item.subItems ?? [], H = z.some(T);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-slot": "app-sidebar-mobile",
+      className: d(
+        "bg-d-muted text-d-foreground flex min-h-0 flex-1 flex-col",
+        // The home indicator overlaps the bottom of the viewport, and
+        // `footerContent` is the last thing in the panel — so the reserve lives
+        // here, not on the scroll area above it.
+        "pb-[max(1rem,env(safe-area-inset-bottom))]"
+      ),
+      children: /* @__PURE__ */ f("div", { className: "flex min-h-0 w-full flex-1 flex-col sm:mx-auto sm:max-w-md", children: [
+        r ? /* @__PURE__ */ f(
+          "div",
+          {
+            "data-sidebar": "header",
+            className: "border-d-border shrink-0 border-b pb-2",
+            children: [
+              /* @__PURE__ */ n("div", { className: "p-2", children: /* @__PURE__ */ f(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Back to menu",
+                  onClick: q,
+                  className: d(
+                    "flex min-h-11 items-center gap-1 pr-3 pl-2",
+                    c.radius.default,
+                    c.focusRing,
+                    c.interaction.hover,
+                    "active:bg-d-accent"
+                  ),
+                  children: [
+                    /* @__PURE__ */ n(R, { name: "ChevronLeft", size: "sm", className: "shrink-0" }),
+                    /* @__PURE__ */ n("span", { className: "text-sm font-medium", children: "Menu" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ n(
+                "h2",
+                {
+                  ref: B,
+                  tabIndex: -1,
+                  className: "px-4 text-base font-semibold outline-none",
+                  children: r.item.title
+                }
+              )
+            ]
+          }
+        ) : a && // `px-4` so the consumer's header lands on the same grid as the cards.
+        /* @__PURE__ */ n("div", { "data-sidebar": "header", className: "shrink-0 px-4 py-2", children: a }),
+        /* @__PURE__ */ n(
+          "nav",
+          {
+            className: d(
+              "min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain px-4 pb-4",
+              // The sheet's close button floats over the top-right corner. A
+              // header (or the back bar) sits under it and gets `pr-12`; with
+              // neither, the list itself has to clear its 52px.
+              r || a ? "pt-3" : "pt-14",
+              w && "animate-in fade-in-0 duration-200 motion-reduce:animate-none",
+              w && (r ? "slide-in-from-right-4" : "slide-in-from-left-4")
+            ),
+            children: r ? (
+              // One card, no group heading: the level's title is already in the
+              // back bar.
+              /* @__PURE__ */ n("ul", { className: E, children: z.map((e) => /* @__PURE__ */ n("li", { children: A(e, {
+                showIconColumn: H,
+                hasChildren: !1
+              }) }, v(r.key, e))) })
+            ) : /* @__PURE__ */ f(L, { children: [
+              t.map(
+                (e) => S(e, t.length > 1)
+              ),
+              i?.length ? (
+                // Detached by a wider gap: the "system" block at the bottom of a
+                // native Settings list. `pt-6` on top of the `space-y-6` — 8px
+                // read as an accident, not as a separation.
+                /* @__PURE__ */ n("div", { className: "space-y-6 pt-6", children: i.map((e) => S(e)) })
+              ) : null
+            ] })
+          },
+          r ? `level-1 ${r.key}` : "level-0"
+        ),
+        h
+      ] })
+    }
+  );
+}
+export {
+  se as AppSidebarMobile
+};