motion-brew 0.0.0-stage → 0.1.0

package/dist/components/avatar-testimonial/avatar-testimonial.d.ts

@@ -0,0 +1,39 @@
+/**
+ * AvatarTestimonial
+ *
+ * Trigger: press (plus a timeline). A testimonial card driven by a row of
+ * avatars. The quote reveals word by word, each word rising out of a soft blur,
+ * and blurs away before the next one comes in. The card's height glides to fit.
+ * The name and role roll in, the stars pop in one after another, and the active
+ * avatar wears a ring that fills as time runs down to the next testimonial.
+ * The other avatars sit back in gray and come back to color on hover. Click an avatar or use
+ * the arrow keys to switch; autoplay pauses while the card is hovered or
+ * focused. The avatars are real tabs. Reduced motion swaps quotes with a fade.
+ *
+ * Engine: motion/react (word blur reveal, height glide, progress ring driven by
+ * a pausable animation, rolling captions and staggered stars).
+ */
+import * as React from "react";
+export interface Testimonial {
+    quote: string;
+    name: string;
+    role: string;
+    /** Photo URL. Without it the avatar shows initials on `color`. */
+    avatar?: string;
+    /** Avatar color behind the initials. */
+    color?: string;
+    /** Stars out of five. Default `5`. */
+    rating?: number;
+}
+export interface AvatarTestimonialProps {
+    /** Testimonials, one per avatar. Default three. */
+    items?: Testimonial[];
+    /** Milliseconds each testimonial stays. `0` turns autoplay off. Default `6500`. */
+    interval?: number;
+    /** Show the star rating. Default `true`. */
+    stars?: boolean;
+    /** Called with the index when the testimonial changes. */
+    onChange?: (index: number) => void;
+    className?: string;
+}
+export declare const AvatarTestimonial: React.ForwardRefExoticComponent<AvatarTestimonialProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/avatar-testimonial/index.d.ts

@@ -0,0 +1 @@
+export { AvatarTestimonial, type AvatarTestimonialProps, type Testimonial } from "./avatar-testimonial";

package/dist/components/backspace-text/backspace-text.d.ts

@@ -0,0 +1,27 @@
+/**
+ * BackspaceText
+ *
+ * Trigger: timeline. Types a word, holds, backspaces it letter by letter and
+ * types the next, on a loop, with a blinking caret. New letters pop in with a
+ * tiny rise. Screen readers get the full list once. Reduced motion shows the
+ * first word, still.
+ *
+ * Engine: motion/react (letter pop-ins and a blinking caret; plain timers pace the typing).
+ */
+import * as React from "react";
+export interface BackspaceTextProps {
+    /** Fixed text before the typed word. Default `"We design for"`. */
+    before?: string;
+    /** Words to type in turn. Default `["people.", "speed.", "delight."]`. */
+    words?: string[];
+    /** Milliseconds per typed letter. Default `75`. */
+    typeSpeed?: number;
+    /** Milliseconds per deleted letter. Default `40`. */
+    deleteSpeed?: number;
+    /** Milliseconds a finished word stays before deleting. Default `1400`. */
+    pause?: number;
+    /** Classes for the typed word. Default a violet tone. */
+    wordClassName?: string;
+    className?: string;
+}
+export declare const BackspaceText: React.ForwardRefExoticComponent<BackspaceTextProps & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/backspace-text/index.d.ts

@@ -0,0 +1 @@
+export { BackspaceText, type BackspaceTextProps } from "./backspace-text";

package/dist/components/bell-toggle/bell-toggle.d.ts

@@ -0,0 +1,33 @@
+/**
+ * BellToggle
+ *
+ * Trigger: press. A pill toggle for notifications. Off, it is a soft gray
+ * pill with a muted bell crossed by a slash. Pressing it turns it on: the
+ * pill unfurls wider and turns white, the slash draws itself away, the
+ * bell rings (it swings on its hanger while the clapper swings the other way
+ * a beat behind, and two sound waves draw out on each side and fade), and the
+ * label crossfades to the on text. Pressing again turns it off: the slash
+ * strokes back across the bell, the bell gives a small droop, the label
+ * crossfades back and the pill folds down to its gray rest. Hovering the on
+ * pill gives the bell a little nudge. It is a real switch for screen readers,
+ * and reduced motion keeps the changes but drops the swinging.
+ *
+ * Engine: gsap + @gsap/react for the bell (swing, clapper, waves and slash,
+ * scoped with useGSAP), with motion/react for the pill's layout unfurl and
+ * the label crossfade.
+ */
+import * as React from "react";
+export interface BellToggleProps {
+    /** Whether it is on. Leave out to let the toggle keep its own state. */
+    on?: boolean;
+    /** Whether it starts on. Default `false`. */
+    defaultOn?: boolean;
+    /** Called with the new state. */
+    onChange?: (on: boolean) => void;
+    /** Label while off. Default `"Notify me"`. */
+    label?: string;
+    /** Label while on. Default `"Notifications on"`. */
+    onLabel?: string;
+    className?: string;
+}
+export declare const BellToggle: React.ForwardRefExoticComponent<BellToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/bell-toggle/index.d.ts

@@ -0,0 +1 @@
+export { BellToggle, type BellToggleProps } from "./bell-toggle";

package/dist/components/bill-list/bill-list.d.ts

@@ -0,0 +1,49 @@
+/**
+ * BillList
+ *
+ * Trigger: in view, then hover, press and keys. A white card of upcoming bills
+ * and subscriptions. When it scrolls into view it builds one piece at a time:
+ * the title, the amount due counting up, the filter pill popping in, then each
+ * row on its own beat, its icon disc and amount landing just after it. Each row shows an icon in a soft
+ * disc, when it is due (an amber chip with a breathing dot when it is close)
+ * and its amount. Hover or focus a row and it tints, its icon plays and the
+ * amount gives way to a Pay button; press it and a spinner turns into a check,
+ * the row turns paid where it stands, and the total counts down. A filter
+ * pill opens a small menu; picking a filter reflows the list, rows gliding to
+ * their places and blurring in and out. Escape and a click outside close the
+ * menu, and reduced motion shows every state at once.
+ *
+ * Engine: motion/react (layout animations and AnimatePresence for the rows,
+ * the menu and the pay button, a motion value counting the total) with
+ * animated icons from lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+/** The animated icons a bill can carry. */
+export type BillIcon = "wifi" | "power" | "phone" | "cloud" | "health";
+export interface Bill {
+    id: string;
+    name: string;
+    amount: number;
+    /** When it is due. */
+    due: Date;
+    icon: BillIcon;
+    /** Which filter it belongs to, as in `"Bills"` or `"Subscriptions"`. */
+    kind: string;
+    /** Paid automatically; shown as a small tag. */
+    autopay?: boolean;
+    paid?: boolean;
+}
+export interface BillListProps {
+    /** Card title. Default `"Coming up"`. */
+    title?: string;
+    /** The bills. Default five household bills and subscriptions, due over the next two weeks. */
+    bills?: Bill[];
+    /** Currency code for the amounts. Default `"USD"`. */
+    currency?: string;
+    /** Days ahead that count as due soon, with an amber chip. Default `3`. */
+    soonDays?: number;
+    /** Called after a bill is paid. */
+    onPay?: (bill: Bill) => void;
+    className?: string;
+}
+export declare const BillList: React.ForwardRefExoticComponent<BillListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/bill-list/index.d.ts

@@ -0,0 +1 @@
+export { BillList, type BillListProps, type Bill, type BillIcon } from "./bill-list";

package/dist/components/binary-text/binary-text.d.ts

@@ -0,0 +1,24 @@
+/**
+ * BinaryText
+ *
+ * Trigger: hover (and in view). The text scrambles into 0s and 1s, then decodes
+ * left to right back into the real characters. It plays when it first scrolls
+ * into view and again on every hover or focus. A monospace face keeps widths
+ * steady while it churns. Screen readers only ever get the real text.
+ *
+ * Engine: motion/react (one animated progress value drives the decode; letters
+ * left of it are settled, the rest flicker).
+ */
+import * as React from "react";
+export interface BinaryTextProps {
+    /** The text to decode. Default `"Access granted"`. */
+    text?: string;
+    /** Seconds for the full decode. Default `1.1`. */
+    duration?: number;
+    /** Characters used while scrambling. Default `"01"`. */
+    charset?: string;
+    /** Element to render. Default `"p"`. */
+    as?: "h1" | "h2" | "h3" | "p" | "span";
+    className?: string;
+}
+export declare const BinaryText: React.ForwardRefExoticComponent<BinaryTextProps & React.RefAttributes<HTMLElement>>;

package/dist/components/binary-text/index.d.ts

@@ -0,0 +1 @@
+export { BinaryText, type BinaryTextProps } from "./binary-text";

package/dist/components/blur-accordion/blur-accordion.d.ts

@@ -0,0 +1,35 @@
+/**
+ * BlurAccordion
+ *
+ * Trigger: press. An accordion whose panels open on a spring and smear with a
+ * vertical motion blur while they move, scaled by how fast the height changes,
+ * so the blur peaks mid-travel and clears as the panel settles. The plus icon
+ * folds into a minus, the open row picks up a soft tint, and the content rises
+ * out of a light blur. Arrow keys, Home and End move between headers. Reduced
+ * motion opens and closes instantly with no blur.
+ *
+ * Engine: motion/react (spring-driven height motion value, useVelocity feeding
+ * an SVG vertical blur, variants on the icon and content).
+ */
+import * as React from "react";
+export interface BlurAccordionItem {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+}
+export interface BlurAccordionProps {
+    /** Rows, top to bottom. Default a short FAQ. */
+    items?: BlurAccordionItem[];
+    /** Let several panels stay open at once. Default `false`. */
+    multiple?: boolean;
+    /** Ids open on first render. Default the first item. */
+    defaultOpen?: string[];
+    /** Strongest vertical blur mid-travel, in px. `0` turns it off. Default `6`. */
+    blur?: number;
+    /** Spring stiffness for the height. Higher is snappier. Default `380`. */
+    stiffness?: number;
+    /** Called with the open ids whenever they change. */
+    onOpenChange?: (open: string[]) => void;
+    className?: string;
+}
+export declare const BlurAccordion: React.ForwardRefExoticComponent<BlurAccordionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/blur-accordion/index.d.ts

@@ -0,0 +1 @@
+export { BlurAccordion, type BlurAccordionItem, type BlurAccordionProps } from "./blur-accordion";

package/dist/components/blur-text/blur-text.d.ts

@@ -0,0 +1,33 @@
+/**
+ * BlurText
+ *
+ * Trigger: in view (or on mount). Words (or letters) rise out of a blur one
+ * after another when the text scrolls into view, settling sharp and in place. Screen readers
+ * get the plain sentence once. Reduced motion shows the text at once.
+ *
+ * Engine: motion/react (useInView plus staggered variants on transform, opacity
+ * and filter).
+ */
+import * as React from "react";
+export interface BlurTextProps {
+    /** The text to reveal. Default `"Every word drifts out of the blur and settles into sharp focus"`. */
+    text?: string;
+    /** Element to render. Default `"p"`. */
+    as?: "h1" | "h2" | "h3" | "p" | "span";
+    /** Animate each `"word"` or each `"letter"`. Default `"word"`. */
+    by?: "word" | "letter";
+    /** Seconds between pieces. Default `0.08`. */
+    stagger?: number;
+    /** Seconds each piece takes. Default `0.7`. */
+    duration?: number;
+    /** Starting blur, px. Default `12`. */
+    blur?: number;
+    /** Pieces rise `"up"` or drop `"down"` into place. Default `"up"`. */
+    direction?: "up" | "down";
+    /** Seconds to wait before starting. Default `0`. */
+    delay?: number;
+    /** Start when it scrolls into view (`"inView"`) or right away (`"mount"`). Default `"inView"`. */
+    trigger?: "inView" | "mount";
+    className?: string;
+}
+export declare const BlurText: React.ForwardRefExoticComponent<BlurTextProps & React.RefAttributes<HTMLElement>>;

package/dist/components/blur-text/index.d.ts

@@ -0,0 +1 @@
+export { BlurText, type BlurTextProps } from "./blur-text";

package/dist/components/booking-card/booking-card.d.ts

@@ -0,0 +1,56 @@
+/**
+ * BookingCard
+ *
+ * Trigger: press. A white booking card for a trial class, a demo call or any
+ * slot someone reserves. A strip of upcoming days scrolls sideways; picking a
+ * day glides an ink pill to it on a spring, and the times for that day unfold
+ * below with their own sliding pill. The full-width button wakes up once a
+ * day and a time are chosen: its label rolls to the chosen slot, the arrow
+ * nudges on hover, and a press runs a short spinner before the button turns
+ * green and draws a check. Then the whole card becomes the confirmation: a
+ * green seal spins in, draws its check and bursts sparks (the same seal as
+ * VerifyFlow), the date and time tiles rise in with a clock whose hands sweep
+ * to the booked time, and the add to calendar button flips its icon to a
+ * check. Change goes back to the picker with the slot kept. Days and times
+ * that are taken stay visible but can't be picked. Dates and times are radio groups with arrow keys, and
+ * every change is announced. Reduced motion swaps the glides for fades.
+ *
+ * Engine: motion/react for the sliding pills, the unfolding times, the
+ * button's label, spinner and check, and the confirmation's layout; gsap +
+ * @gsap/react for the confirmation's drawn icons (scoped with useGSAP).
+ */
+import * as React from "react";
+export interface BookingCardProps {
+    /** Card title. Default `"Book a free trial"`. */
+    title?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** First day in the strip. Default today. */
+    start?: Date;
+    /** How many days the strip shows. The month menu lists every month they cover. Default `45`. */
+    days?: number;
+    /** Times offered each day, as labels. Default five slots from 09:00 to 18:00. */
+    times?: string[];
+    /** Days that can't be booked. Default Sundays. */
+    isUnavailable?: (date: Date) => boolean;
+    /** Times taken on a given day. Default a few, varying by day. */
+    takenTimes?: (date: Date) => string[];
+    /** Button label before a slot is chosen. Default `"Book a trial"`. */
+    cta?: string;
+    /** Heading on the confirmation. Default `"You're booked"`. */
+    doneTitle?: string;
+    /** Line under the confirmation heading. */
+    doneText?: string;
+    /** Called by the confirmation's add to calendar button. */
+    onAddToCalendar?: (slot: {
+        date: Date;
+        time: string;
+    }) => void;
+    /** Called on press with the chosen slot. Return a promise to hold the spinner until it settles. */
+    onBook?: (slot: {
+        date: Date;
+        time: string;
+    }) => void | Promise<unknown>;
+    className?: string;
+}
+export declare const BookingCard: React.ForwardRefExoticComponent<BookingCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/booking-card/index.d.ts

@@ -0,0 +1 @@
+export { BookingCard, type BookingCardProps } from "./booking-card";

package/dist/components/brand-bridge/brand-bridge.d.ts

@@ -0,0 +1,63 @@
+/**
+ * BrandBridge
+ *
+ * Trigger: press and hover (plus in view). A feature card for any site or
+ * app: on top, brand tiles stand in two columns either side of a hub, and only
+ * the connected ones are wired in. On its own it wires the brands in one at
+ * a time in a random order and then stays connected; it pauses while hovered
+ * and hands over for good once a tile is pressed. Each wire is a gradient in its brand's own
+ * colours, fading into ink at the hub, and a glowing comet of the same
+ * gradient runs along it now and then; when it lands, the hub's rotating
+ * colour ring pulses and a few sparks of that brand fly off. Press a tile to
+ * connect it: the wire draws itself in, a burst of brand coloured particles
+ * streams to the hub and the logo turns from gray to colour. Press again to
+ * disconnect and the wire pulls back. Hovering a tile lifts it and previews or
+ * brightens its wire. The wires are magnetic: bring the pointer near one and
+ * it bends toward it on a spring, lights up and carries its comet along the
+ * bend, then snaps back with a small wobble when the pointer leaves. Behind the graphic a sparse field of particles drifts,
+ * slowly circles the hub and scatters from the pointer. Under it sit a
+ * centred heading and line. Everything pauses off screen. Reduced motion
+ * keeps the wires and particles still.
+ *
+ * Engine: motion/react (entrances and pathLength wires)
+ * with one requestAnimationFrame loop that drives the comets on SVG dash
+ * offsets and the particles on a 2D canvas.
+ */
+import * as React from "react";
+export interface BridgeBrand {
+    id: string;
+    name: string;
+    /** The wire's gradient, from the tile toward the hub. The first is the brand's main colour. */
+    colors: string[];
+    /** The mark inside the tile, about 28px. */
+    logo: React.ReactNode;
+}
+export interface BrandBridgeProps {
+    /** Up to eight brands; the first half stand on the left. Default six. */
+    brands?: BridgeBrand[];
+    /** Ids connected at first. Default none, so autoplay builds them up. */
+    defaultConnected?: string[];
+    /**
+     * Connect the brands by itself, one at a time in a random order, and stay
+     * connected. Plays again on reload or remount; pauses while the card is
+     * hovered and stops for good once a tile is pressed. Default `true`.
+     */
+    autoplay?: boolean;
+    onToggle?: (id: string, connected: boolean) => void;
+    /** Heading under the graphic. */
+    title?: React.ReactNode;
+    /** Line under the heading. */
+    description?: React.ReactNode;
+    /** What sits in the hub. Default a small mark. */
+    hub?: React.ReactNode;
+    /** Particles in the background field, 0 to 240. Default `48`. */
+    particles?: number;
+    /** Comet speed; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    className?: string;
+}
+/** Every built in brand; pick from these or pass your own. */
+export declare const BRANDS: BridgeBrand[];
+/** The default six: three a side. */
+export declare const DEFAULT_BRANDS: BridgeBrand[];
+export declare const BrandBridge: React.ForwardRefExoticComponent<BrandBridgeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/brand-bridge/index.d.ts

@@ -0,0 +1 @@
+export { BrandBridge, BRANDS, DEFAULT_BRANDS, type BrandBridgeProps, type BridgeBrand, } from "./brand-bridge";

package/dist/components/calendar-agenda/calendar-agenda.d.ts

@@ -0,0 +1,64 @@
+/**
+ * CalendarAgenda
+ *
+ * Trigger: drag (plus press and keys). A day planner card: a week strip on top
+ * and the chosen day's events below, each with its time, length and a colored
+ * bar. Swipe a row left to mark it done: a green Done grows from under its
+ * right edge, only as wide as the slide; tap it or swipe far, and the title is
+ * struck through while confetti rises from across the row and floats up out of
+ * the card. Swiping a done row left offers Undo. Swipe a row right to delete
+ * it: the row slides off a red Delete underneath, and the rows below slide up to
+ * close the gap. Picking another day slides the selection pill across and swaps
+ * the list with a soft blur, and the header counts what is left. Rows are real
+ * list items: Enter or Space marks done, Delete or Backspace removes, and
+ * changes are announced. Reduced motion keeps every action but skips the travel
+ * and the confetti.
+ *
+ * Engine: motion/react (drag with snap points, layout and exit animations, the
+ * sliding day pill) plus a small built-in canvas confetti system.
+ */
+import * as React from "react";
+export interface AgendaEvent {
+    id: string;
+    /** Start time label, like `"10:00"`. */
+    time: string;
+    /** Length label, like `"1h"`. */
+    length?: string;
+    title: string;
+    /** Second line, like `"4 people · Zoom"`. */
+    meta?: string;
+    /** Bar and confetti color. */
+    color?: string;
+    /** Small status pill, like `"in 19 min"`. */
+    tag?: string;
+    /** A free slot: shown muted, with no actions. */
+    free?: boolean;
+    done?: boolean;
+}
+export interface AgendaDay {
+    /** Short weekday, like `"Tue"`. */
+    label: string;
+    /** Day of the month. */
+    date: number;
+    /** Heading when selected, like `"Tuesday"`. */
+    title: string;
+    /** Line under the heading, like `"11 November"`. */
+    subtitle?: string;
+    events: AgendaEvent[];
+}
+export interface CalendarAgendaProps {
+    /** The week. Default a sample week. */
+    days?: AgendaDay[];
+    /** Index of the day shown first. Default `1`. */
+    defaultDay?: number;
+    /** Confetti when an event is marked done. Default `true`. */
+    confetti?: boolean;
+    /** Called when an event is marked done or reopened. */
+    onToggle?: (event: AgendaEvent, done: boolean) => void;
+    /** Called when an event is deleted. */
+    onDelete?: (event: AgendaEvent) => void;
+    /** Called by the round add button. */
+    onAdd?: () => void;
+    className?: string;
+}
+export declare const CalendarAgenda: React.ForwardRefExoticComponent<CalendarAgendaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/calendar-agenda/index.d.ts

@@ -0,0 +1 @@
+export { CalendarAgenda, type AgendaDay, type AgendaEvent, type CalendarAgendaProps } from "./calendar-agenda";

package/dist/components/channel-mix/channel-mix.d.ts

@@ -0,0 +1,63 @@
+/**
+ * ChannelMix
+ *
+ * Trigger: in view, then hover and press. A white marketing card: a light
+ * gray header with an icon tile, a title and a line of copy, then a white
+ * panel overlapping it with the
+ * week's sessions on rolling digits and a row of slim ticks that splits them
+ * by channel. When it scrolls into view the ticks rise in a wave from left to
+ * right while the numbers roll up from zero. Pointing at the bar or a legend
+ * chip lights up that channel's ticks, dims the rest, and rolls the headline
+ * to the channel's own sessions and change. Under a hairline, a small table of
+ * metrics: a soft pill glides between rows under the pointer, each row's
+ * animated icon plays, and its change arrow nudges the way it points. The info
+ * button explains the numbers in a tooltip, and Details slides its arrow out.
+ * Reduced motion keeps every state without movement.
+ *
+ * Engine: motion/react (staggered scale for the ticks, spring digit columns,
+ * layoutId pills, AnimatePresence for the headline) with animated icons from
+ * lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export interface ChannelMixChannel {
+    name: string;
+    /** Sessions from this channel in the period. */
+    sessions: number;
+    /** Change against the last period, in percent. */
+    change: number;
+    /** Tick and dot color. Defaults follow the card's palette. */
+    color?: string;
+}
+export type ChannelMixIcon = "people" | "time" | "money";
+export interface ChannelMixMetric {
+    label: string;
+    /** Shown as written; its digits roll, everything else stays put. */
+    value: string;
+    /** Change against the last period, in percent. */
+    change: number;
+    /** Whether a rise is good news. Default true; set false for costs and waits. */
+    higherIsBetter?: boolean;
+    icon: ChannelMixIcon;
+}
+export interface ChannelMixProps {
+    /** Title in the shell. Default `"Channel insights"`. */
+    title?: React.ReactNode;
+    /** Line under the title. */
+    description?: React.ReactNode;
+    /** Label over the headline number. Default `"Sessions this week"`. */
+    label?: string;
+    /** What the info button explains. */
+    info?: string;
+    channels?: ChannelMixChannel[];
+    /** Change of all sessions against the last period, in percent. Default `2.1`. */
+    change?: number;
+    metrics?: ChannelMixMetric[];
+    /** Called by the Details button. Leave out to hide it. */
+    onDetails?: () => void;
+    /** Locale for numbers. Default `"en-US"`. */
+    locale?: string;
+    /** Show the gray header band with the icon, title and copy. Default true; false leaves just the chart. */
+    header?: boolean;
+    className?: string;
+}
+export declare const ChannelMix: React.ForwardRefExoticComponent<ChannelMixProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/channel-mix/index.d.ts

@@ -0,0 +1 @@
+export { ChannelMix, type ChannelMixProps, type ChannelMixChannel, type ChannelMixMetric, type ChannelMixIcon, } from "./channel-mix";

package/dist/components/column-card/column-card.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ColumnCard
+ *
+ * Trigger: in view, then hover, press and keys. A tall white card with a small
+ * live pill, a headline, a short line of body text and a few big rounded
+ * columns standing in a soft gray stage over faint guide lines, each carrying
+ * its value inside at the top, with a legend and the total in a footer. When
+ * it scrolls into view the columns grow up from the floor one after another,
+ * springing a little past their height, and each number counts up from zero
+ * inside its column, the total with them. Hovering (or focusing) a column
+ * lifts it, dims the others and floats an ink tooltip with its share above
+ * it; leaving settles it back. Reduced motion shows the final state at once.
+ *
+ * Engine: motion/react (animate on motion values for the counts, column
+ * heights on springs, AnimatePresence for the share tooltip).
+ */
+import * as React from "react";
+export interface Column {
+    label: string;
+    value: number;
+    /** Column colour. Defaults run violet, then ink. */
+    color?: string;
+}
+export interface ColumnCardProps {
+    /** Headline. Default `"Data that puts your health in motion"`. */
+    title?: React.ReactNode;
+    /** Body text under the headline. */
+    description?: React.ReactNode;
+    /** The columns, left to right. Heights are relative to the largest. */
+    columns?: Column[];
+    /** Small pill above the headline. Pass `null` to hide it. Default `"Last 30 days"`. */
+    eyebrow?: React.ReactNode;
+    /** Word after the total in the footer. Default `"readings"`. */
+    unit?: string;
+    /** Height of the tallest column in px. Default `220`. */
+    columnHeight?: number;
+    className?: string;
+}
+export declare const ColumnCard: React.ForwardRefExoticComponent<ColumnCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/column-card/index.d.ts

@@ -0,0 +1 @@
+export { ColumnCard, type ColumnCardProps, type Column } from "./column-card";

package/dist/components/contact-card/contact-card.d.ts

@@ -0,0 +1,44 @@
+/**
+ * ContactCard
+ *
+ * Trigger: hover (plus focus and press). A Contact link that lives inside a
+ * sentence ("Not just a simple Contact button."), set in the sentence's own
+ * size, weight and colour with just an arrow after it. Hovering draws an
+ * underline under it, turns the arrow up toward the card and lifts a white
+ * contact card out of it with a soft spring and a blur, its rows rising in one
+ * after another: an avatar with a breathing "available" dot, the name
+ * and role, the email address, a LinkedIn link and a Book a call button.
+ * Pressing the email copies it, the icon flipping to a check while the label
+ * rolls to Copied. The LinkedIn and Book arrows slide through on hover. The
+ * card stays open while the pointer travels from the link onto it, and
+ * closes a moment after it leaves, on Escape, or on a click elsewhere. Keyboard focus and a tap on
+ * touch open it too. Reduced motion keeps every state but drops the movement.
+ *
+ * Engine: motion/react (spring pop-over with a staggered reveal, rolling
+ * labels and icon swaps).
+ */
+import * as React from "react";
+export interface ContactCardProps {
+    /** Pill label. Default `"Contact"`. */
+    label?: string;
+    /** Who you are reaching. Default `"Maya Lindqvist"`. */
+    name?: string;
+    /** Their role. Default `"Design lead"`. */
+    role?: string;
+    /** Their photo. */
+    avatar?: string;
+    /** Email address. Default `"maya@studio.co"`. */
+    email?: string;
+    /** LinkedIn profile URL. */
+    linkedin?: string;
+    /** Booking link. Without it the button calls `onBook`. */
+    bookHref?: string;
+    /** Called by the book button when there is no `bookHref`. */
+    onBook?: () => void;
+    /** Book button label. Default `"Book a call"`. */
+    bookLabel?: string;
+    /** Show the available dot. Default `true`. */
+    available?: boolean;
+    className?: string;
+}
+export declare const ContactCard: React.ForwardRefExoticComponent<ContactCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/contact-card/index.d.ts

@@ -0,0 +1 @@
+export { ContactCard, type ContactCardProps } from "./contact-card";