@breathe-ds/ui 0.3.0 → 0.4.0

package/components/ProfessionalCard.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState, type ElementType, type ReactNode } from "react";
 import { initials } from "./Avatar";
 import { ProfessionalModal, type ProfessionalModalLabels, type ProfessionalPresentation } from "./ProfessionalModal";
-import { CollapseRow, LinkRow, RowList } from "./Rows";
+import { CollapseRow, LinkRow, RowList, type RowLink } from "./Rows";
 
 export type ProfessionalPhoto = {
   src: string;
@@ -22,28 +22,50 @@ export type ProfessionalLiving = {
   poster: string;
 };
 
-export type ProfessionalGuidance = { label: ReactNode; href: string };
+/**
+ * One row at the foot of the full card (RowList). Generic: the site decides
+ * what the rows are. On novo.creeta they are "Trajetória" (collapse with the
+ * bio), "Orientações" (collapse with the links the person signs, with
+ * `openOnArrival`) and "Instagram" (link with icon, new tab).
+ */
+export type ProfessionalCardRow =
+  | {
+      kind: "collapse";
+      label: ReactNode;
+      /** sr-only right after the label, e.g. " of Person name". */
+      srLabel?: ReactNode;
+      /** Text content (a string becomes one paragraph). */
+      content?: ReactNode;
+      /** Or a list of links, with the count beside the label. */
+      links?: RowLink[];
+      count?: number;
+      /** Marks the row with `data-cg-open-on-arrival`: the site opens it when
+       *  the page is reached by the card's anchor (creeta's `abre-ao-chegar`). */
+      openOnArrival?: boolean;
+    }
+  | {
+      kind: "link";
+      label: ReactNode;
+      href: string;
+      srLabel?: ReactNode;
+      /** ↗ another page (default) or ↓ an anchor on this page. */
+      arrow?: "go" | "down";
+      /** Opens in a new tab. */
+      external?: boolean;
+      /** Replaces the arrow (an 18px glyph): the Instagram icon, for instance. */
+      icon?: ReactNode;
+    };
 
 export type ProfessionalCardLabels = ProfessionalModalLabels & {
   /** alt of the portrait. */
   portrait: (name: string) => string;
-  trajectory: string;
-  /** The row of the guidance the person signs; the count goes beside it. */
-  guidance: string;
-  /** sr-only, right after "Trajectory" and "Guidance": " of {name}". */
-  of: (name: string) => string;
-  instagram: string;
-  /** sr-only, right after "Instagram". */
-  instagramOf: (name: string) => string;
+  /** The small badge on the medium card's photo, on hover ("Conhecer"). */
+  meet: string;
 };
 
 const EN: Omit<ProfessionalCardLabels, keyof ProfessionalModalLabels> = {
   portrait: (name) => `Portrait of ${name}`,
-  trajectory: "Trajectory",
-  guidance: "Guidance",
-  of: (name) => ` of ${name}`,
-  instagram: "Instagram",
-  instagramOf: (name) => ` of ${name} (opens in a new tab)`,
+  meet: "Meet",
 };
 
 const SIZES = "(min-width: 1024px) 30vw, (min-width: 640px) 45vw, 92vw";
@@ -52,6 +74,9 @@ const SIZES = "(min-width: 1024px) 30vw, (min-width: 640px) 45vw, 92vw";
 const ZOOM =
   "aspect-[4/5] h-auto w-full object-cover transition-transform duration-500 ease-[var(--ease-cg)] motion-reduce:transition-none";
 const ZOOM_CARD = `${ZOOM} [@media(hover:hover)_and_(pointer:fine)]:group-hover/card:scale-[1.03] motion-reduce:[@media(hover:hover)_and_(pointer:fine)]:group-hover/card:scale-100`;
+/* medium card: the 3:4 portrait, zoom with the mouse over the link */
+const ZOOM_MEDIUM =
+  "aspect-[3/4] h-auto w-full object-cover transition-transform duration-500 ease-[var(--ease-cg)] motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover:scale-[1.04] motion-reduce:[@media(hover:hover)_and_(pointer:fine)]:group-hover:scale-100";
 /* inside the modal trigger only the photo button is the hover target */
 const ZOOM_PHOTO = `${ZOOM} [@media(hover:hover)_and_(pointer:fine)]:group-hover/photo:scale-[1.03] motion-reduce:[@media(hover:hover)_and_(pointer:fine)]:group-hover/photo:scale-100`;
 
@@ -224,15 +249,25 @@ type Props = {
   living?: ProfessionalLiving;
   /** With a presentation video the portrait opens the modal (ProfessionalModal). */
   presentation?: ProfessionalPresentation;
-  /** The bio: a string (one paragraph) or your own paragraphs. Opens in place
-   *  under "Trajectory". */
+  /** The full bio, shown in the presentation modal: a string (one paragraph)
+   *  or your own paragraphs. To show it on the card too, put it in a
+   *  `rows` collapse. */
   bio?: ReactNode;
-  /** The guidance pages the person signs: the row lists them, with the count. */
-  guidance?: ProfessionalGuidance[];
-  /** Instagram profile URL (outbound row). */
-  instagram?: string;
-  /** Anchor of the card (the authorship link of a guidance page lands here). */
+  /** The rows at the foot of the card (full size): collapses with text or
+   *  links, links with an arrow or an icon. See ProfessionalCardRow. */
+  rows?: ProfessionalCardRow[];
+  /** Anchor of the card (a link elsewhere on the site lands here). */
   id?: string;
+  /** `full` (default): the team-page card. `medium`: the home's tile — a
+   *  white card with the 3:4 portrait and the name, a link to the full card
+   *  (living portrait and "Meet" badge on hover). `micro`: the "who treats"
+   *  row — 72px photo, name and role, also a link. The small sizes render the
+   *  link as the root; wrap them in your <li> (RailItem). */
+  size?: "full" | "medium" | "micro";
+  /** Where the small sizes lead: the full card on the team page ("/team/#slug"). */
+  href?: string;
+  /** Name shown on the medium card (the site uses the first two words). */
+  shortName?: string;
   /** h2 on the team page (default), h3 inside a section that already has an h2. */
   headingLevel?: "h2" | "h3";
   /** Root element. Default <article>. */
@@ -248,13 +283,14 @@ type Props = {
  * (components/professional-card.tsx) with the Breathe tokens. A `card`
  * surface with the portrait on top (plain, living, or opening the video
  * presentation), the name, role and registration, then one list of equal
- * rows separated by hairlines: Trajectory (opens the bio in place), Guidance
- * (opens the links in place) and Instagram (outbound). Six open bios used to
- * make the page 6,700px tall on a phone, hence the rows.
+ * rows separated by hairlines (`rows`): collapses that open in place (a text,
+ * or a list of links with the count) and links (arrow or icon). On creeta:
+ * Trajectory, Guidance and Instagram. Six open bios used to make the page
+ * 6,700px tall on a phone, hence the collapses.
  *
- * The Guidance row carries `data-cg-open-on-arrival`: the site opens it when
- * the page is reached by the card's anchor (creeta's `abre-ao-chegar.tsx`,
- * not part of the DS).
+ * A collapse with `openOnArrival` carries `data-cg-open-on-arrival`: the site
+ * opens it when the page is reached by the card's anchor (creeta's
+ * `abre-ao-chegar.tsx`, not part of the DS).
  */
 export function ProfessionalCard({
   name,
@@ -265,9 +301,11 @@ export function ProfessionalCard({
   living,
   presentation,
   bio,
-  guidance,
-  instagram,
+  rows,
   id,
+  size = "full",
+  href = "#",
+  shortName,
   headingLevel: Heading = "h2",
   as: As = "article",
   linkComponent,
@@ -279,6 +317,69 @@ export function ProfessionalCard({
   const alt = photo?.alt ?? t.portrait(name);
   const hasPortrait = Boolean(photo || media || living);
 
+  if (size === "micro") {
+    // the "who treats" row of a treatment page (creeta telas/tratamento.tsx):
+    // the text beside says who it is, so the photo is decoration
+    return (
+      <L
+        href={href}
+        id={id}
+        className={`flex items-center gap-4 rounded-[22px] bg-card p-3 pr-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink ${className}`}
+      >
+        {photo ? (
+          <img src={photo.src} srcSet={photo.srcSet} sizes="72px" alt="" loading="lazy" decoding="async" className="h-[72px] w-[72px] shrink-0 rounded-2xl object-cover" />
+        ) : media ? (
+          <span className="block h-[72px] w-[72px] shrink-0 overflow-hidden rounded-2xl">{media}</span>
+        ) : (
+          <span aria-hidden="true" className="flex h-[72px] w-[72px] shrink-0 items-center justify-center rounded-2xl bg-ink/[0.12] font-heading text-xl font-medium text-ink">
+            {initials(name)}
+          </span>
+        )}
+        <span>
+          <span className="block font-heading font-medium leading-snug text-ink">{name}</span>
+          {role && <span className="mt-0.5 block text-sm text-ink-soft">{role}</span>}
+        </span>
+      </L>
+    );
+  }
+
+  if (size === "medium") {
+    // the home's team tile (creeta telas/home.tsx): a white card with the
+    // photo and the name inside — without the card the name sat loose under
+    // the photo, with no "close". Mouse over: the clip plays, the photo zooms
+    // a little and a discreet "Meet" shows in the corner; on tap the card shrinks.
+    return (
+      <L
+        href={href}
+        id={id}
+        data-cg-professional-card=""
+        className={`group block h-full rounded-[26px] bg-card p-2 pb-4 transition-transform duration-200 ease-out active:scale-[0.98] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}
+      >
+        <span className="relative block overflow-hidden rounded-[20px]">
+          {hasPortrait ? (
+            <Portrait name={name} photo={photo ? { ...photo, sizes: photo.sizes ?? "(min-width: 768px) 16vw, 42vw" } : undefined} media={media} living={living} alt={alt} decorative className={ZOOM_MEDIUM} />
+          ) : (
+            <span aria-hidden="true" className="flex aspect-[3/4] w-full items-center justify-center bg-ink/[0.12] font-heading text-3xl font-medium text-ink">
+              {initials(name)}
+            </span>
+          )}
+          {/* only where a mouse exists, and with keyboard focus; the link
+              already has its name, so it is decoration */}
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute bottom-2 left-2 inline-flex translate-y-1 items-center gap-1.5 rounded-full border border-white/15 bg-ink/80 px-3 py-2 text-xs font-medium text-white opacity-0 backdrop-blur-md transition duration-200 ease-out group-focus-visible:translate-y-0 group-focus-visible:opacity-100 motion-reduce:translate-y-0 motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover:translate-y-0 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100"
+          >
+            {t.meet}
+            <svg aria-hidden="true" viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+          </span>
+        </span>
+        <span className="mt-3 block px-1.5 font-heading text-sm font-medium leading-snug text-ink transition-colors duration-150 group-hover:text-ink-soft motion-reduce:transition-none">
+          {shortName ?? name}
+        </span>
+      </L>
+    );
+  }
+
   return (
     <As id={id} data-cg-professional-card="" className={`group/card scroll-mt-24 rounded-2xl bg-card p-3 pb-6 ${className}`}>
       {hasPortrait && presentation ? (
@@ -315,26 +416,30 @@ export function ProfessionalCard({
             <p className="mt-1 text-xs text-ink/80">{registration}</p>
           </>
         )}
-        {/* Trajectory, guidance and Instagram: one list, of equal rows. They
-            used to be three things with three designs (an open button, a loose
-            list of links and a magenta link at the end). The first two open in
-            place: six open bios made 6,700px of page on a phone. */}
-        <RowList className="mt-4">
-          {bio && (
-            <CollapseRow label={t.trajectory} srLabel={t.of(name)}>
-              {bio}
-            </CollapseRow>
-          )}
-
-          {/* What the person signs: it is what makes this card the destination
-              of the authorship link of the guidance pages. Whoever arrives by
-              that link finds this block open (site-side, data-cg-open-on-arrival). */}
-          {guidance && guidance.length > 0 && (
-            <CollapseRow label={t.guidance} srLabel={t.of(name)} links={guidance} linkComponent={L} data-cg-open-on-arrival="" />
-          )}
-
-          {instagram && <LinkRow label={t.instagram} srLabel={t.instagramOf(name)} href={instagram} external />}
-        </RowList>
+        {/* One list of equal rows. On creeta they used to be three things
+            with three designs (an open button, a loose list of links and a
+            magenta link at the end); the collapses open in place. */}
+        {rows && rows.length > 0 && (
+          <RowList className="mt-4">
+            {rows.map((row, i) =>
+              row.kind === "collapse" ? (
+                <CollapseRow
+                  key={i}
+                  label={row.label}
+                  srLabel={row.srLabel}
+                  count={row.count}
+                  links={row.links}
+                  linkComponent={L}
+                  {...(row.openOnArrival ? { "data-cg-open-on-arrival": "" } : {})}
+                >
+                  {row.content}
+                </CollapseRow>
+              ) : (
+                <LinkRow key={i} label={row.label} srLabel={row.srLabel} href={row.href} arrow={row.arrow} external={row.external} icon={row.icon} linkComponent={L} />
+              ),
+            )}
+          </RowList>
+        )}
       </div>
     </As>
   );

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/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/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.4.0",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",
@@ -48,6 +48,7 @@
     "./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 +58,17 @@
     "./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"
   },
   "publishConfig": {
     "access": "public"