@breathe-ds/ui 0.6.5 → 0.6.7

package/README.md

@@ -246,7 +246,7 @@ from color, not from extra markup.
   shrinks the tap targets); the rest and the external exits (`extras`, with the domain spelled out
   and a ↗ arrow) go to the "More" panel, a native popover (Esc, tap outside, no
   JS). Gradient veil behind the bar. `hideFrom` = `md` (creeta) or `lg`
-  (ttcab). `labels` for another language. `embedded` for the demo frame.
+  (ttcab). `labels` for another language. `embedded` for the demo frame. `collapseOnScroll` (reading mode): scrolling down shrinks it to a slim icon strip; scrolling up, a tap or keyboard focus brings it back; full at the top and the end (`scrollContainer` when the window is not what scrolls). `group` on a page lists it under a section title in "More" (sticky while the list scrolls).
 - **AnchorNav**: floating capsule of page anchors (scroll-spy + sliding
   indicator), extracted from ttcab's TreatmentAnchorNav. Target sections need
   a `scroll-mt-*` compatible with the sticky header. White capsule (`card`);

package/components/BottomNav.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { version as REACT_VERSION, useEffect, useId, useRef, useState, type ComponentType, type ElementType, type ReactNode } from "react";
+import { version as REACT_VERSION, useEffect, useId, useRef, useState, type ComponentType, type ElementType, type ReactNode, type RefObject } from "react";
 
 // the popover trigger attribute: camelCase in React 19+, lowercase passthrough in 18
 const POPOVER_TARGET = parseInt(REACT_VERSION, 10) >= 19 ? "popoverTarget" : "popovertarget";
 
 /** Icon in the lucide pattern (the component, not the node): the bar decides the size. */
-export type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+export type IconType = ComponentType<{ size?: number | string; strokeWidth?: number | string; className?: string; "aria-hidden"?: boolean | "true" | "false" }>;
 
 /** One page of the site, in order of importance. The first ones stay on the bar;
  *  those that don't fit go into "More". */
@@ -16,6 +16,9 @@ export type BottomPage = {
   Icon: IconType;
   /** Is this the current page? (the app decides: route/locale are its own) */
   active?: boolean;
+  /** Section title in the "More" panel. Pages with the same group are listed
+   *  together under it, in order of first appearance. Without it: one plain list. */
+  group?: string;
 };
 
 /** Extra exit in the "More" panel (e.g. courses on another site): address written
@@ -66,6 +69,12 @@ type Props = {
   /** Embedded in a `relative` container (demo, phone frame): bar, veil and
    *  panel are `absolute` inside it and show at any width. */
   embedded?: boolean;
+  /** Reading mode: scrolling down shrinks the bar to a slim icon strip at the
+   *  bottom; scrolling up, tapping it or reaching it by keyboard brings it back.
+   *  Always full at the top and at the end of the page. Off by default. */
+  collapseOnScroll?: boolean;
+  /** Element that scrolls, when it isn't the window (e.g. the demo frame). */
+  scrollContainer?: RefObject<HTMLElement | null>;
 };
 
 /** Minimum width of a tab, in px: below this the label doesn't fit. */
@@ -93,14 +102,21 @@ const ArrowUpRight = () => (
 // Tab: icon+label column. The active one gets a SHAPE (light pill), not just color —
 // readable for people who can't tell colors apart. Shrinks on touch, like an app button.
 // The view-transition name makes the highlight slide between tabs on page change.
-const tab = (active: boolean) =>
+const tab = (active: boolean, collapsed = false) =>
   [
-    "flex h-14 w-full flex-col items-center justify-center gap-1 rounded-[20px] px-1 text-[10.5px] font-medium leading-none tracking-tight",
-    "transition duration-150 active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100",
+    "flex w-full flex-col items-center justify-center rounded-[20px] px-1 text-[10.5px] font-medium leading-none tracking-tight",
+    collapsed ? "h-9 gap-0" : "h-14 gap-1",
+    "transition-all duration-200 ease-[cubic-bezier(.23,1,.32,1)] active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100",
     "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface",
     active ? "bg-surface text-ink [view-transition-name:aba-ativa]" : "text-surface/85 hover:bg-white/10",
   ].join(" ");
 
+// label under the icon: in the slim bar it folds away (still read by screen readers)
+const LABEL = "w-full truncate text-center transition-all duration-200 motion-reduce:transition-none";
+
+const GROUP_TITLE =
+  "sticky -top-2 z-10 -mx-2 bg-card px-5 pt-3 pb-1.5 font-heading text-[0.7rem] font-semibold tracking-[0.12em] text-ink-soft uppercase";
+
 const row = (active?: boolean) =>
   `flex min-h-14 items-center gap-3 rounded-[18px] px-3 font-medium transition-colors duration-150 active:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none ${
     active ? "bg-surface text-ink" : "text-ink"
@@ -121,7 +137,7 @@ const bubble = "flex h-10 w-10 shrink-0 items-center justify-center rounded-full
  *   (demo), it becomes an absolute panel inside the frame, with the same entrance.
  * - Hidden from `hideFrom` up (md on creeta, lg on ttcab), where the header takes over.
  */
-export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg", labels, embedded = false }: Props) {
+export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg", labels, embedded = false, collapseOnScroll = false, scrollContainer }: Props) {
   const L: ElementType = linkComponent ?? "a";
   const t = { ...EN, ...labels };
   const list = useRef<HTMLUListElement>(null);
@@ -131,6 +147,56 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
   // before measuring: the typical phone case (5 tabs = 4 pages + More)
   const [visible, setVisible] = useState(() => howManyFit(5 * TAB_MIN_WIDTH, pages.length));
   const [open, setOpen] = useState(false); // embedded mode only
+  const [collapsed, setCollapsed] = useState(false);
+
+  // Reading mode: direction of the scroll, with a small dead zone so a shaky
+  // thumb doesn't make the bar blink. Down 24px → slim; up 12px → full.
+  useEffect(() => {
+    if (!collapseOnScroll) return setCollapsed(false);
+    const el = scrollContainer?.current ?? null;
+    const y = () => (el ? el.scrollTop : window.scrollY);
+    const atEnd = () =>
+      el ? el.scrollTop + el.clientHeight >= el.scrollHeight - 8 : window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 8;
+    let last = y();
+    let run = 0;
+    let raf = 0;
+    const onScroll = () => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        const now = y();
+        const d = now - last;
+        last = now;
+        if (now < 80 || atEnd()) {
+          run = 0;
+          return setCollapsed(false);
+        }
+        run = Math.sign(d) === Math.sign(run) ? run + d : d;
+        if (run > 24) setCollapsed(true);
+        else if (run < -12) setCollapsed(false);
+      });
+    };
+    const target: HTMLElement | Window = el ?? window;
+    target.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      target.removeEventListener("scroll", onScroll);
+      cancelAnimationFrame(raf);
+    };
+  }, [collapseOnScroll, scrollContainer]);
+  // native popover (site mode): the panel's real state, so the bar stays full while it's open
+  const [popOpen, setPopOpen] = useState(false);
+  useEffect(() => {
+    const el = panel.current;
+    if (!el) return;
+    const onToggle = (e: Event) => {
+      const isOpen = (e as Event & { newState?: string }).newState === "open";
+      setPopOpen(isOpen);
+      if (isOpen) setCollapsed(false);
+    };
+    el.addEventListener("toggle", onToggle);
+    return () => el.removeEventListener("toggle", onToggle);
+  }, []);
+  const slim = collapsed && !open && !popOpen;
 
   useEffect(() => {
     const ul = list.current;
@@ -178,6 +244,13 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
 
   const onBar = pages.slice(0, visible);
   const inMore = pages.slice(visible);
+  // "More" pages by group (order of first appearance); ungrouped ones form a group without title
+  const groups: { title?: string; items: BottomPage[] }[] = [];
+  for (const p of inMore) {
+    const g = groups.find((x) => x.title === p.group);
+    if (g) g.items.push(p);
+    else groups.push({ title: p.group, items: [p] });
+  }
   const moreActive = inMore.some((p) => p.active) || extras.some((x) => x.active);
   const pos = embedded ? "absolute" : "fixed";
   // full class names (Tailwind only generates what it finds written in the code)
@@ -186,18 +259,25 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
   const panelInner = (
     <nav aria-label={t.morePages}>
       {/* One item per row: in two columns the panel got confusing. */}
-      {inMore.length > 0 && (
-        <ul className="grid list-none gap-1">
-          {inMore.map(({ href, label, Icon, active }, i) => (
-            <li key={`${i}-${href}`}>
-              <L href={href} aria-current={active ? "page" : undefined} onClick={close} className={row(active)}>
-                <span className={bubble}><Icon aria-hidden="true" size={19} strokeWidth={1.75} /></span>
-                {label}
-              </L>
-            </li>
-          ))}
-        </ul>
-      )}
+      {groups.map(({ title, items }, gi) => {
+        const headId = `${panelId}-g${gi}`;
+        return (
+          <div key={gi} className={gi > 0 ? "mt-1 border-t border-ink/10 pt-1" : undefined}>
+            {/* title sticks to the top of the panel while its list scrolls by */}
+            {title && <p id={headId} className={GROUP_TITLE}>{title}</p>}
+            <ul className="grid list-none gap-1" aria-labelledby={title ? headId : undefined}>
+              {items.map(({ href, label, Icon, active }, i) => (
+                <li key={`${i}-${href}`}>
+                  <L href={href} aria-current={active ? "page" : undefined} onClick={close} className={row(active)}>
+                    <span className={bubble}><Icon aria-hidden="true" size={19} strokeWidth={1.75} /></span>
+                    {label}
+                  </L>
+                </li>
+              ))}
+            </ul>
+          </div>
+        );
+      })}
       {extras.length > 0 && (
         <ul className={`grid list-none gap-1${inMore.length > 0 ? " mt-1 border-t border-ink/10 pt-1" : ""}`}>
           {extras.map(({ href, label, Icon, description, external, active }, i) => {
@@ -235,21 +315,31 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
           reaching it, instead of showing up clipped by the edges. */}
       <div
         aria-hidden="true"
-        className={`pointer-events-none ${pos} inset-x-0 bottom-0 z-40 h-28 bg-gradient-to-t from-surface from-35% via-surface/85 via-65% to-transparent [view-transition-name:veu]${hide}`}
+        className={`pointer-events-none ${pos} inset-x-0 bottom-0 z-40 ${slim ? "h-14" : "h-28"} transition-[height] duration-200 ease-[cubic-bezier(.23,1,.32,1)] motion-reduce:transition-none bg-gradient-to-t from-surface from-35% via-surface/85 via-65% to-transparent [view-transition-name:veu]${hide}`}
       />
       <nav
         aria-label={t.nav}
-        className={`${pos} inset-x-3 bottom-3 z-50 pb-[env(safe-area-inset-bottom)] [view-transition-name:barra]${hide}`}
+        className={`${pos} inset-x-3 ${slim ? "bottom-1.5" : "bottom-3"} z-50 pb-[env(safe-area-inset-bottom)] transition-[bottom] duration-200 ease-[cubic-bezier(.23,1,.32,1)] motion-reduce:transition-none [view-transition-name:barra]${hide}`}
+        // slim: a tap anywhere on the bar only brings it back (doesn't navigate);
+        // keyboard focus brings it back too (a mouse/touch focus doesn't, or the tap would navigate)
+        // …except "More": the hamburger is a clear intent, it expands AND opens the panel in one tap
+        onClickCapture={slim ? (e) => {
+          setCollapsed(false);
+          if ((e.target as Element).closest?.("[data-more]")) return;
+          e.preventDefault();
+          e.stopPropagation();
+        } : undefined}
+        onFocus={(e) => { if ((e.target as Element).matches?.(":focus-visible")) setCollapsed(false); }}
       >
         <ul
           ref={list}
-          className="flex list-none items-stretch justify-between gap-0.5 rounded-[26px] bg-ink/95 p-1.5 shadow-[0_12px_32px_-12px_rgba(0,0,0,0.5)] backdrop-blur-md"
+          className={`flex list-none items-stretch justify-between gap-0.5 rounded-[26px] bg-ink/95 ${slim ? "p-1" : "p-1.5"} transition-[padding] duration-200 motion-reduce:transition-none shadow-[0_12px_32px_-12px_rgba(0,0,0,0.5)] backdrop-blur-md`}
         >
           {onBar.map(({ href, label, Icon, active }, i) => (
             <li key={`${i}-${href}`} className="min-w-0 flex-1">
-              <L href={href} aria-current={active ? "page" : undefined} className={tab(!!active)}>
+              <L href={href} aria-current={active ? "page" : undefined} className={tab(!!active, slim)}>
                 <Icon aria-hidden="true" size={20} strokeWidth={1.75} />
-                <span className="w-full truncate text-center">{label}</span>
+                <span className={`${LABEL} ${slim ? "max-h-0 opacity-0" : "max-h-4 opacity-100"}`}>{label}</span>
               </L>
             </li>
           ))}
@@ -257,11 +347,12 @@ export function BottomNav({ pages, extras = [], linkComponent, hideFrom = "lg",
             {/* React 19 knows `popoverTarget`; React 18 only passes the lowercase attribute through as is. */}
             <button
               type="button"
+              data-more=""
               {...(embedded ? { "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((o) => !o) } : { [POPOVER_TARGET]: panelId })}
-              className={tab(embedded ? open || moreActive : moreActive)}
+              className={tab(embedded ? open || moreActive : moreActive, slim)}
             >
               <MenuIcon />
-              <span className="w-full truncate text-center">{t.more}</span>
+              <span className={`${LABEL} ${slim ? "max-h-0 opacity-0" : "max-h-4 opacity-100"}`}>{t.more}</span>
               <span className="sr-only"> {t.morePagesSr}{moreActive ? ` ${t.currentHere}` : ""}</span>
             </button>
           </li>
@@ -289,6 +380,10 @@ const CSS = `
 .cg-more-panel{
   position:fixed; inset:auto .75rem calc(5.75rem + env(safe-area-inset-bottom)) .75rem;
   width:auto; margin:0; border:0; border-radius:26px; padding:.5rem;
+  /* long list (many pages): the panel stops below the top of the screen and
+     scrolls inside, instead of running off the top with the first items lost */
+  max-height:calc(100dvh - 5.75rem - env(safe-area-inset-bottom) - .75rem);
+  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
   background:var(--color-card); color:var(--color-ink);
   box-shadow:0 20px 48px -16px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .1);
   opacity:0; transform:translateY(8px) scale(.97); transform-origin:88% 100%;
@@ -297,7 +392,7 @@ const CSS = `
 .cg-more-panel:popover-open, .cg-more-panel--embedded{ opacity:1; transform:none; }
 @starting-style{ .cg-more-panel:popover-open, .cg-more-panel--embedded{ opacity:0; transform:translateY(8px) scale(.97); } }
 .cg-more-panel::backdrop{ background:transparent; }
-.cg-more-panel--embedded{ position:absolute; z-index:50; }
+.cg-more-panel--embedded{ position:absolute; z-index:50; max-height:calc(100% - 6.5rem); }
 @media (prefers-reduced-motion:reduce){
   .cg-more-panel{ transform:none; transition:opacity 120ms ease; }
   @starting-style{ .cg-more-panel:popover-open, .cg-more-panel--embedded{ transform:none; } }

package/components/Callout.tsx

@@ -1,6 +1,6 @@
 import type { ComponentType, ReactNode } from "react";
 
-type IconType = ComponentType<{ size?: number; strokeWidth?: number; "aria-hidden"?: boolean | "true" }>;
+type IconType = ComponentType<{ size?: number | string; strokeWidth?: number | string; "aria-hidden"?: boolean | "true" | "false" }>;
 
 type Props = {
   title: ReactNode;

package/components/FactStrip.tsx

@@ -1,6 +1,6 @@
 import type { ComponentType, ReactNode } from "react";
 
-type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+type IconType = ComponentType<{ size?: number | string; strokeWidth?: number | string; className?: string; "aria-hidden"?: boolean | "true" | "false" }>;
 
 export type Fact = {
   Icon: IconType;

package/components/Footer.tsx

@@ -3,7 +3,7 @@ import { LanguageSwitcher, type Language } from "./LanguageSwitcher";
 import { List } from "./List";
 
 /** lucide-style icon component (the footer sets the size). */
-type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+type IconType = ComponentType<{ size?: number | string; strokeWidth?: number | string; className?: string; "aria-hidden"?: boolean | "true" | "false" }>;
 
 export type FooterLink = { href: string; label: ReactNode };
 /** A titled column of links, for footers with many pages ("Foundations", "Cards…"). */

package/components/InfoCard.tsx

@@ -1,7 +1,7 @@
 import type { ComponentType, ElementType, ReactNode } from "react";
 
 /** lucide-style icon component (the card sets the size). */
-type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+type IconType = ComponentType<{ size?: number | string; strokeWidth?: number | string; className?: string; "aria-hidden"?: boolean | "true" | "false" }>;
 
 export type InfoCardLink = {
   href: string;

package/components/MediaCard.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState, type ComponentType, type ElementType, type ReactNode } from "react";
 
 /** lucide-style icon component (the badge sets the size). */
-type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+type IconType = ComponentType<{ size?: number | string; strokeWidth?: number | string; className?: string; "aria-hidden"?: boolean | "true" | "false" }>;
 
 /** Event the card videos listen to when the person pauses/resumes them all
  *  (dispatch it on `window` after toggling the attribute below). */

package/components/ProfessionalModal.tsx

@@ -39,7 +39,7 @@ export type ProfessionalModalLabels = {
 
 /** Lucide's icon type is wider than MediaCardBadge's `IconType` under strict
  *  TS (propTypes allow a string `size`); this thin wrapper fits the slot. */
-const PlayIcon = (p: { size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }) => <Play {...p} />;
+const PlayIcon = (p: { size?: number | string; strokeWidth?: number | string; className?: string; "aria-hidden"?: boolean | "true" | "false" }) => <Play {...p} />;
 
 const EN: ProfessionalModalLabels = {
   presentation: "Presentation",

package/components/ProfileSpotlight.tsx

@@ -21,7 +21,7 @@ type Props = {
   actions?: ReactNode;
   /** Social profiles at the foot (Instagram, LinkedIn, Lattes…): round icon
    *  links, each with its name for screen readers, opening in a new tab. */
-  social?: { label: string; href: string; Icon: ComponentType<{ size?: number; strokeWidth?: number; "aria-hidden"?: boolean | "true" }> }[];
+  social?: { label: string; href: string; Icon: ComponentType<{ size?: number | string; strokeWidth?: number | string; "aria-hidden"?: boolean | "true" | "false" }> }[];
   /** sr-only after each social link. */
   newTabLabel?: string;
   /** `card`: on a white card. `plain` (default): straight on the page color. */

package/components/Timeline.tsx

@@ -1,6 +1,6 @@
 import type { ComponentType, ElementType, ReactNode } from "react";
 
-type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+type IconType = ComponentType<{ size?: number | string; strokeWidth?: number | string; className?: string; "aria-hidden"?: boolean | "true" | "false" }>;
 
 export type TimelineStep = {
   Icon: IconType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",