@breathe-ds/ui 0.3.0 → 0.5.1

package/components/Rail.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect, useRef, useState, type ComponentPropsWithoutRef, type ReactNode } from "react";
+
+type RailProps = {
+  /** Name of the list for screen readers: "Treatments", "Team". */
+  label: string;
+  /** Grid classes from md up, written in full (Tailwind only generates whole
+   *  classes). Default: three columns. */
+  grid?: string;
+  /** <li> children, usually RailItem. */
+  children: ReactNode;
+  className?: string;
+};
+
+/**
+ * Rail — novo.creeta's `Trilho` (components/trilho.tsx) with the Breathe
+ * tokens. On a phone it is a horizontal rail with snap, and the next card
+ * shows by half to say there is more. From md it becomes a grid.
+ *
+ * Under the rail, a small bar follows the finger: it starts the size of what
+ * is already in view and fills to the end — it says how much is left. Shown
+ * only when the rail really scrolls, decoration for screen readers. The fill
+ * is written straight to the style, without re-rendering on every scroll frame.
+ */
+export function Rail({ label, grid = "md:grid-cols-3", children, className = "" }: RailProps) {
+  const list = useRef<HTMLUListElement>(null);
+  const bar = useRef<HTMLSpanElement>(null);
+  const [scrolls, setScrolls] = useState(false);
+
+  useEffect(() => {
+    const ul = list.current;
+    if (!ul) return;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const overflow = ul.scrollWidth - ul.clientWidth;
+      setScrolls(overflow > 8);
+      if (bar.current && ul.scrollWidth > 0) {
+        const seen = Math.min(1, (ul.scrollLeft + ul.clientWidth) / ul.scrollWidth);
+        bar.current.style.transform = `scaleX(${seen})`;
+      }
+    };
+    const ask = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    measure();
+    ul.addEventListener("scroll", ask, { passive: true });
+    window.addEventListener("resize", ask);
+    return () => {
+      ul.removeEventListener("scroll", ask);
+      window.removeEventListener("resize", ask);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  return (
+    <>
+      <ul
+        ref={list}
+        aria-label={label}
+        className={`cg-no-scrollbar -mx-4 flex snap-x snap-mandatory scroll-px-4 gap-3 overflow-x-auto px-4 pb-1 md:mx-0 md:grid md:snap-none md:gap-5 md:overflow-visible md:px-0 ${grid} ${className}`}
+      >
+        {children}
+      </ul>
+      <div
+        aria-hidden="true"
+        data-cg-rail-progress=""
+        className={`mx-auto mt-4 h-1 w-14 overflow-hidden rounded-full bg-ink/15 md:hidden ${scrolls ? "" : "hidden"}`}
+      >
+        <span ref={bar} className="block h-full w-full origin-left rounded-full bg-ink-soft" />
+      </div>
+    </>
+  );
+}
+
+/** Widths of one item on the rail (phone / sm); from md the grid decides.
+ *  The next card shows by half: that is what says "there is more". */
+export const RAIL_ITEM = {
+  /** Treatments, videos: one card almost full width. */
+  wide: "w-[78%] shrink-0 snap-start sm:w-[46%] md:w-auto",
+  /** Team (medium ProfessionalCard): two cards and a bit. */
+  narrow: "w-[46%] shrink-0 snap-start sm:w-[30%] md:w-auto",
+} as const;
+
+type RailItemProps = ComponentPropsWithoutRef<"li"> & {
+  /** `wide` (default) or `narrow`. */
+  width?: keyof typeof RAIL_ITEM;
+};
+
+/** One <li> of the Rail, with the phone width preset. */
+export function RailItem({ width = "wide", className = "", ...rest }: RailItemProps) {
+  return <li className={`${RAIL_ITEM[width]} ${className}`} {...rest} />;
+}

package/components/RegistrationBox.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { Check } from "lucide-react";
+
+export type TicketOption = {
+  id: string;
+  label: ReactNode;
+  /** "6 left", as a small pill after the label. */
+  remaining?: ReactNode;
+  /** "Free", "R$ 1.900". */
+  price: ReactNode;
+  disabled?: boolean;
+};
+
+type Props = {
+  /** The strip at the top ("Registration"). */
+  title: ReactNode;
+  /** The sentence above the options ("Hi! Choose your ticket:"). */
+  intro?: ReactNode;
+  options: TicketOption[];
+  /** Selected option id (controlled); without it, the first enabled one. */
+  value?: string;
+  onChange?: (id: string) => void;
+  /** The button at the foot (a Button `accent`, or `solid`); receives nothing: read the selection through onChange. */
+  action: ReactNode;
+  /** Small line under the button ("Only physiotherapists can attend."). */
+  footnote?: ReactNode;
+  /** Name of the radio group, for the form. */
+  name?: string;
+  className?: string;
+};
+
+/**
+ * Registration box of an event (Luma): a strip with the title, a sentence,
+ * the ticket options as a radio group (the chosen one gets the ring and the
+ * check), the price on the right, and the one button at the foot. By tone:
+ * the box is a surface card inside the page's card.
+ */
+export function RegistrationBox({ title, intro, options, value, onChange, action, footnote, name = "ticket", className = "" }: Props) {
+  const first = options.find((o) => !o.disabled)?.id;
+  const [inner, setInner] = useState(first);
+  const selected = value ?? inner;
+  const choose = (id: string) => {
+    setInner(id);
+    onChange?.(id);
+  };
+  return (
+    <section className={`overflow-hidden rounded-[24px] bg-surface ${className}`}>
+      <h2 className="border-b border-ink/10 px-5 py-3 text-sm font-semibold text-ink-soft">{title}</h2>
+      <div className="p-5">
+        {intro && <p className="mb-4 text-ink">{intro}</p>}
+        <fieldset className="m-0 border-0 p-0">
+          <legend className="sr-only">{title}</legend>
+          <div className="flex flex-col gap-2">
+            {options.map((o) => {
+              const on = o.id === selected;
+              return (
+                <label
+                  key={o.id}
+                  className={`flex min-h-12 cursor-pointer items-center gap-3 rounded-2xl px-4 py-2.5 transition-colors duration-150 motion-reduce:transition-none ${on ? "bg-card shadow-[inset_0_0_0_2px_var(--color-ink)]" : "bg-card/60 hover:bg-card"} ${o.disabled ? "cursor-not-allowed opacity-50" : ""}`}
+                >
+                  <input type="radio" name={name} value={o.id} checked={on} disabled={o.disabled} onChange={() => choose(o.id)} className="sr-only" />
+                  <span aria-hidden="true" className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${on ? "bg-ink text-surface" : "border-2 border-ink/25"}`}>
+                    {on && <Check size={12} strokeWidth={3} />}
+                  </span>
+                  <span className="flex min-w-0 flex-1 flex-wrap items-center gap-2 font-semibold text-ink">
+                    {o.label}
+                    {o.remaining && <span className="rounded-pill bg-ink/[0.08] px-2 py-0.5 text-xs font-semibold text-ink-soft">{o.remaining}</span>}
+                  </span>
+                  <span className="shrink-0 font-semibold text-ink">{o.price}</span>
+                </label>
+              );
+            })}
+          </div>
+        </fieldset>
+        <div className="mt-4 [&>*]:w-full [&>*]:justify-center">{action}</div>
+        {footnote && <p className="mt-3 text-sm text-ink-soft">{footnote}</p>}
+      </div>
+    </section>
+  );
+}

package/components/Rows.tsx

@@ -18,8 +18,14 @@ import { ArrowDown, ArrowUpRight, ChevronDown } from "lucide-react";
 export const ROW =
   "flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 text-sm font-semibold text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink [&::-webkit-details-marker]:hidden";
 
+/** Hover tells the two rows apart (2026-10-29): a link row underlines its label
+ *  (the family's sign for "goes somewhere", as the Footer and the Byline) and
+ *  its arrow takes the step; a collapse row never underlines — it goes nowhere —
+ *  its chevron dips 2px, "opens down here", and turns up when open. */
+const ROW_LINK = `${ROW} underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-ink motion-reduce:transition-none`;
+
 const OPEN_CHEVRON =
-  "shrink-0 text-ink-soft transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none";
+  "shrink-0 text-ink-soft transition-[transform,translate] duration-200 group-hover/row:translate-y-0.5 group-open/row:rotate-180 group-open/row:group-hover/row:translate-y-0 motion-reduce:transition-none";
 
 /** What appears out of nowhere (the content of a <details>) fades in briefly
  *  instead of jumping on screen: `@starting-style` via Tailwind's `starting:`
@@ -72,7 +78,7 @@ export function CollapseRow({ label, srLabel, count, links, linkComponent, child
   const L: ElementType = linkComponent ?? "a";
   const n = count ?? links?.length;
   return (
-    <details className={`group ${className}`} {...rest}>
+    <details className={`group/row ${className}`} {...rest}>
       <summary className={ROW}>
         <span>
           {label}
@@ -120,7 +126,7 @@ export type LinkRowProps = Omit<ComponentPropsWithoutRef<"a">, "children"> & {
 export function LinkRow({ label, href, srLabel, arrow, external = false, icon, linkComponent, className = "", ...rest }: LinkRowProps) {
   const L: ElementType = linkComponent ?? "a";
   return (
-    <L href={href} className={`${ROW} ${className}`} {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})} {...rest}>
+    <L href={href} className={`${ROW_LINK} ${className}`} {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})} {...rest}>
       <span>
         {label}
         {srLabel && <span className="sr-only">{srLabel}</span>}

package/components/SidePanel.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useId, useRef, type ReactNode } from "react";
+import { X } from "lucide-react";
+
+type Labels = {
+  close: string;
+};
+const EN: Labels = { close: "Close" };
+
+type Props = {
+  open: boolean;
+  /** Called when the person closes it (Esc, the backdrop, the close button). */
+  onClose: () => void;
+  /** Accessible name of the panel (sr-only unless you render it in `children`). */
+  title: string;
+  /** Small actions on the top bar, beside the close button ("Copy link", "Event page ↗"). */
+  actions?: ReactNode;
+  children: ReactNode;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/**
+ * Side panel of the Cuidado Global family (Luma's event drawer): a native
+ * <dialog> that slides in from the right, full height, up to 32rem wide (full
+ * width on the phone), with a top bar (close on the left, actions on the
+ * right) and a scrolling body. Focus is trapped by the dialog, Esc and the
+ * backdrop close it, focus goes back to what opened it. The content is
+ * whatever you pass: a course, an event, a person.
+ */
+export function SidePanel({ open, onClose, title, actions, children, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const box = useRef<HTMLDialogElement>(null);
+  const headingId = useId();
+
+  // open/close follow the prop; the way out waits for the slide to finish
+  useEffect(() => {
+    const d = box.current;
+    if (!d) return;
+    if (open) {
+      if (!d.open) d.showModal();
+      // paint the closed state first (the dialog was display:none), then open:
+      // a forced reflow plus a frame, or the slide would not play
+      void d.getBoundingClientRect();
+      const frame = requestAnimationFrame(() => d.setAttribute("data-open", ""));
+      return () => cancelAnimationFrame(frame);
+    }
+    if (!d.open) return;
+    d.removeAttribute("data-open");
+    const wait = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : 260;
+    const timer = window.setTimeout(() => d.close(), wait);
+    return () => window.clearTimeout(timer);
+  }, [open]);
+
+  // Esc (cancel) and click on the backdrop → the parent closes it
+  useEffect(() => {
+    const d = box.current;
+    if (!d) return;
+    const onCancel = (e: Event) => {
+      e.preventDefault();
+      onClose();
+    };
+    const onClick = (e: MouseEvent) => {
+      if (e.target === d) onClose();
+    };
+    d.addEventListener("cancel", onCancel);
+    d.addEventListener("click", onClick);
+    return () => {
+      d.removeEventListener("cancel", onCancel);
+      d.removeEventListener("click", onClick);
+    };
+  }, [onClose]);
+
+  return (
+    <dialog
+      ref={box}
+      aria-labelledby={headingId}
+      className={`fixed inset-y-0 right-0 left-auto m-0 flex h-dvh max-h-none w-[min(100vw,32rem)] max-w-none translate-x-full flex-col overflow-hidden bg-card p-0 text-ink shadow-2xl [transition:translate_280ms_var(--ease-cg)] data-open:translate-x-0 motion-reduce:transition-none backdrop:bg-ink/50 backdrop:backdrop-blur-sm backdrop:opacity-0 backdrop:[transition:opacity_240ms_ease-out] [&[data-open]::backdrop]:opacity-100 ${className}`}
+    >
+      <h2 id={headingId} className="sr-only">{title}</h2>
+      <div className="flex shrink-0 items-center justify-between gap-3 border-b border-ink/10 px-4 py-3">
+        <button
+          type="button"
+          onClick={onClose}
+          className="flex h-11 w-11 items-center justify-center rounded-full text-ink transition-colors duration-150 hover:bg-ink/[0.06] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none"
+        >
+          <X aria-hidden="true" size={20} strokeWidth={2} />
+          <span className="sr-only">{t.close}</span>
+        </button>
+        {actions && <div className="flex flex-wrap items-center justify-end gap-2">{actions}</div>}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">{children}</div>
+    </dialog>
+  );
+}

package/components/StoryPanel.tsx

@@ -0,0 +1,107 @@
+import type { ElementType, ReactNode } from "react";
+
+export type StoryPillar = { title: ReactNode; text: ReactNode };
+export type StoryLink = { label: ReactNode; href: string; external?: boolean };
+
+type Labels = {
+  /** sr-only after an external link. */
+  newTab: string;
+};
+const EN: Labels = { newTab: "(opens in a new tab)" };
+
+type Props = {
+  /** What fills the media box at the top: a BackgroundVideo, an <img>
+   *  (absolute inset-0, object-cover). The panel's film fades it into the panel. */
+  media: ReactNode;
+  /** Box of the media: 4:3 on the phone, 21:8 from md (creeta). */
+  mediaAspect?: string;
+  /** Logo for the dark background, at the base of the media where the film is already full. */
+  logo?: ReactNode;
+  title: ReactNode;
+  lead?: ReactNode;
+  /** Three columns with a hairline on top: a short title and a paragraph. */
+  pillars: StoryPillar[];
+  /** Outbound links at the end ("Learn about the method ↗"). */
+  links?: StoryLink[];
+  headingLevel?: "h2" | "h3";
+  /** Colour of the pillar titles. Default `text-surface`; creeta passes its light teal. */
+  pillarTitleClassName?: string;
+  linkComponent?: ElementType;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+const link =
+  "inline-flex min-h-11 items-center gap-1.5 font-semibold underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface";
+
+/**
+ * Story panel of the Cuidado Global family — creeta's `OrigemRta`, by tokens:
+ * a dark panel (surface-panel) that groups a story in one piece. Media at the
+ * top with a film that fades into the panel, the logo at its base, a title and
+ * a lead, three pillars in columns with a hairline above each, and the outbound
+ * links. Good for "who we are" blocks: one rounded card, everything inside.
+ */
+export function StoryPanel({
+  media,
+  mediaAspect = "aspect-[4/3] md:aspect-[21/8]",
+  logo,
+  title,
+  lead,
+  pillars,
+  links,
+  headingLevel: Title = "h2",
+  pillarTitleClassName = "text-surface",
+  linkComponent,
+  labels,
+  className = "",
+}: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const t = { ...EN, ...labels };
+  return (
+    <section className={`overflow-hidden rounded-[28px] bg-surface-panel text-surface ${className}`}>
+      <div className={`relative ${mediaAspect}`}>
+        {media}
+        {/* -bottom-px: the box's height is fractional and a light half pixel showed under the film */}
+        <span aria-hidden="true" className="pointer-events-none absolute inset-0 -bottom-px bg-gradient-to-t from-surface-panel from-10% via-surface-panel/70 via-40% to-surface-panel/10" />
+        {logo && <div className="absolute bottom-2 left-6 md:bottom-4 md:left-12">{logo}</div>}
+      </div>
+
+      <div className="px-6 pb-9 pt-7 md:px-12 md:pb-14 md:pt-9">
+        <Title className="max-w-3xl font-heading text-[1.75rem] font-medium leading-[1.12] tracking-[-0.01em] md:text-5xl">{title}</Title>
+        {lead && <p className="mt-4 max-w-2xl text-lg leading-relaxed text-surface/85">{lead}</p>}
+
+        <ul className="mt-8 grid list-none gap-6 md:mt-12 md:grid-cols-3 md:gap-10">
+          {pillars.map((p, i) => (
+            <li key={i} className="border-t border-surface/25 pt-5">
+              <p className={`font-heading text-2xl font-medium ${pillarTitleClassName}`}>{p.title}</p>
+              <p className="mt-2 leading-relaxed text-surface/85">{p.text}</p>
+            </li>
+          ))}
+        </ul>
+
+        {links && links.length > 0 && (
+          <div className="mt-8 flex flex-wrap gap-x-8 gap-y-1 md:mt-10">
+            {links.map((l, i) =>
+              l.external ? (
+                <a key={i} href={l.href} target="_blank" rel="noopener noreferrer" className={link}>
+                  {l.label}
+                  <ArrowUpRight />
+                  <span className="sr-only"> {t.newTab}</span>
+                </a>
+              ) : (
+                <L key={i} href={l.href} className={link}>
+                  {l.label}
+                  <ArrowUpRight />
+                </L>
+              ),
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/components/useOnAppear.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+/** whole:   the drawing finished, not animating (no JavaScript, no
+ *           IntersectionObserver, or reduced motion).
+ *  waiting: hidden, until it shows up on screen.
+ *  playing: it showed up; the animation runs. */
+export type AppearState = "whole" | "waiting" | "playing";
+
+export const reducedMotion = () =>
+  typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+/** For drawings that animate once half of them is on screen (creeta's
+ *  `useAoAparecer`). The default is the finished drawing: it only hides to
+ *  animate when it can animate. `onScreen` follows the drawing the whole time:
+ *  a looping animation only runs while someone can see it. */
+export function useOnAppear<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [state, setState] = useState<AppearState>("whole");
+  const [onScreen, setOnScreen] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined" || reducedMotion()) return;
+    setState("waiting");
+    const eye = new IntersectionObserver(
+      ([e]) => {
+        setOnScreen(!!e.isIntersecting);
+        if (e.isIntersecting) setState("playing");
+      },
+      { threshold: 0.5 },
+    );
+    eye.observe(el);
+    return () => eye.disconnect();
+  }, []);
+
+  return { ref, state, onScreen };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.3.0",
+  "version": "0.5.1",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",
@@ -15,9 +15,18 @@
     "LICENSE"
   ],
   "exports": {
-    "./theme.css": "./theme.css",
-    "./tokens/ttcab.css": "./tokens/ttcab.css",
-    "./tokens/creeta.css": "./tokens/creeta.css",
+    "./theme.css": {
+      "style": "./theme.css",
+      "default": "./theme.css"
+    },
+    "./tokens/ttcab.css": {
+      "style": "./tokens/ttcab.css",
+      "default": "./tokens/ttcab.css"
+    },
+    "./tokens/creeta.css": {
+      "style": "./tokens/creeta.css",
+      "default": "./tokens/creeta.css"
+    },
     "./components/Accordion": "./components/Accordion.tsx",
     "./components/PageVideoHero": "./components/PageVideoHero.tsx",
     "./components/Footer": "./components/Footer.tsx",
@@ -42,12 +51,16 @@
     "./components/BreatheMark": "./components/BreatheMark.tsx",
     "./components/Curtain": "./components/Curtain.tsx",
     "./components/Lockup": "./components/Lockup.tsx",
-    "./tokens/neutral.css": "./tokens/neutral.css",
+    "./tokens/neutral.css": {
+      "style": "./tokens/neutral.css",
+      "default": "./tokens/neutral.css"
+    },
     "./components/icons": "./components/icons.tsx",
     "./components/AnchorNav": "./components/AnchorNav.tsx",
     "./components/LanguageSwitcher": "./components/LanguageSwitcher.tsx",
     "./components/List": "./components/List.tsx",
     "./components/Rows": "./components/Rows.tsx",
+    "./components/Rail": "./components/Rail.tsx",
     "./components/Avatar": "./components/Avatar.tsx",
     "./components/Byline": "./components/Byline.tsx",
     "./components/ProfessionalCard": "./components/ProfessionalCard.tsx",
@@ -57,7 +70,24 @@
     "./components/Breadcrumb": "./components/Breadcrumb.tsx",
     "./components/Timeline": "./components/Timeline.tsx",
     "./components/marks/ttcab": "./components/marks/ttcab.tsx",
-    "./components/marks/creeta": "./components/marks/creeta.tsx"
+    "./components/marks/creeta": "./components/marks/creeta.tsx",
+    "./components/CareSteps": "./components/CareSteps.tsx",
+    "./components/ChatPreview": "./components/ChatPreview.tsx",
+    "./components/PlanTimeline": "./components/PlanTimeline.tsx",
+    "./components/PhotoSequence": "./components/PhotoSequence.tsx",
+    "./components/PauseButton": "./components/PauseButton.tsx",
+    "./components/useOnAppear": "./components/useOnAppear.ts",
+    "./components/StoryPanel": "./components/StoryPanel.tsx",
+    "./components/PostCard": "./components/PostCard.tsx",
+    "./components/FeaturedPosts": "./components/FeaturedPosts.tsx",
+    "./components/PostArticle": "./components/PostArticle.tsx",
+    "./components/CourseCard": "./components/CourseCard.tsx",
+    "./components/DateBadge": "./components/DateBadge.tsx",
+    "./components/EventRow": "./components/EventRow.tsx",
+    "./components/EventList": "./components/EventList.tsx",
+    "./components/EventFacts": "./components/EventFacts.tsx",
+    "./components/RegistrationBox": "./components/RegistrationBox.tsx",
+    "./components/SidePanel": "./components/SidePanel.tsx"
   },
   "publishConfig": {
     "access": "public"