motion-brew 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,60 @@
+/**
+ * PricingCard
+ *
+ * Trigger: hover (plus press and in view). One plan as a white card resting in
+ * a soft grey shell, like a print in a mount, with a label strip along the top
+ * of the shell. Hover or focus the card and the shell warms with a slowly
+ * drifting pastel gradient, the card lifts, the strip rolls up from below to a
+ * quiet "Recommended for you" with a sparkle, the plan icon plays and the
+ * button turns ink; leaving lets it all settle back. A small Yearly switch sits
+ * beside the price: flip it and the knob slides, a saving chip pops in, the
+ * price rolls like an odometer and the billing line blurs to match. Each
+ * feature's icon plays when you point at its row. When the card scrolls into
+ * view the shell rises in, the white card settles into it, the plan icon plays
+ * once and the features follow in a short cascade. Reduced motion keeps every
+ * state without movement.
+ *
+ * Engine: motion/react (springs for the lift, knob and digit columns, a
+ * looping gradient drift, AnimatePresence for the rolling strip and billing
+ * line, staggered in view entrances).
+ */
+import * as React from "react";
+/** An icon that takes className, strokeWidth and an `active` flag, like the animated icons. */
+export type PricingIcon = React.ComponentType<{
+    className?: string;
+    strokeWidth?: number;
+    active?: boolean;
+}>;
+export interface PricingFeature {
+    title: string;
+    /** A short line under the title. */
+    detail?: string;
+    icon?: PricingIcon;
+}
+export interface PricingPlan {
+    name: string;
+    /** The label strip along the top of the shell. */
+    label: string;
+    /** One line under the name. */
+    blurb: string;
+    /** Price per month when billed monthly. */
+    monthly: number;
+    /** Price per month when billed yearly. */
+    yearly: number;
+    features: PricingFeature[];
+    cta: string;
+    /** A small line under the button. */
+    footnote?: string;
+    icon?: PricingIcon;
+}
+export interface PricingCardProps {
+    plan?: PricingPlan;
+    /** Billing shown first. Default `"monthly"`. */
+    defaultBilling?: "monthly" | "yearly";
+    /** What the strip rolls to on hover. Default `"Recommended for you"`. */
+    note?: string;
+    /** Called by the button. */
+    onSelect?: (billing: "monthly" | "yearly") => void;
+    className?: string;
+}
+export declare const PricingCard: React.ForwardRefExoticComponent<PricingCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/prism-carousel/index.d.ts

@@ -0,0 +1 @@
+export { PrismCarousel, type PrismCarouselProps, type PrismCard } from "./prism-carousel";

package/dist/components/prism-carousel/prism-carousel.d.ts

@@ -0,0 +1,54 @@
+/**
+ * PrismCarousel
+ *
+ * Trigger: drag (plus press, wheel and keys). An endless loop of cards (images,
+ * or metric cards) circling slowly through a soft stage that fills its
+ * container, with a liquid glass lens at each edge. The lenses are frosted,
+ * magnifying strips that blur and over saturate whatever passes beneath them,
+ * so a card's colours bloom as it slides into the glass. They behave like a
+ * magnetic field: as a card nears an edge the lens swells out to meet it.
+ * Inside the glass a card pivots on its inner edge so its outer top and bottom
+ * corners flare out, stretched toward the edge, and it eases back to its
+ * perfect flat shape before it comes out; the same on both sides. An optional
+ * flip turns each card over as it leaves the right glass and enters the left. The row
+ * drifts on its own at a set speed; hover slows it to a crawl, and dragging,
+ * scrolling sideways, tapping a side card, the arrow keys or the dots take
+ * over, snapping to a card, until it eases back in a couple of seconds later.
+ * Reduced motion keeps the layout without the movement.
+ *
+ * Engine: motion/react (one track motion value that the drift, drag and
+ * springs all move, and that every card and both lenses derive their bend,
+ * stretch, colour, swell and turns from).
+ */
+import * as React from "react";
+export interface PrismCard {
+    label: string;
+    /** An image fills the card; without one it shows the metric below. */
+    image?: string;
+    /** The headline number, for metric cards. */
+    value?: number;
+    /** Text after the number, like "%" or " ms". */
+    suffix?: string;
+    /** Decimal places for the number. */
+    decimals?: number;
+    caption?: string;
+    /** Two colours for a metric card's glowing orb. */
+    hues?: [string, string];
+}
+export interface PrismCarouselProps {
+    cards?: PrismCard[];
+    /** Card shown first. Default the second. */
+    defaultIndex?: number;
+    /** Flip each card over as it leaves the right glass and enters the left. Default `false`. */
+    flip?: boolean;
+    /** Circle slowly on its own, resting after a touch. Default `true`. */
+    autoplay?: boolean;
+    /** How fast the row circles on its own, in px per second. Default `80`. */
+    speed?: number;
+    /** Blur of the edge glass in px. Default `26`. */
+    blur?: number;
+    /** How much the edge glass saturates what passes under it. Default `2.9`. */
+    saturation?: number;
+    className?: string;
+}
+export declare const PrismCarousel: React.ForwardRefExoticComponent<PrismCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/prism-flow/index.d.ts

@@ -0,0 +1 @@
+export { PrismFlow, type PrismFlowProps } from "./prism-flow";

package/dist/components/prism-flow/prism-flow.d.ts

@@ -0,0 +1,41 @@
+/**
+ * PrismFlow
+ *
+ * Trigger: hover (plus a timeline). A dark background crossed by a soft band
+ * of light that bends and drifts like a ribbon caught in slow air. Its edges
+ * split into colour the way light does through a prism: a bright near white
+ * core fades out through your four colours on either side, under a wide glow.
+ * A fainter echo band trails behind it. The ribbon leans toward the pointer
+ * and settles back when it leaves. Fine film grain keeps the gradients smooth.
+ * Anything you place inside sits on top. It pauses off screen and in a hidden
+ * tab, and reduced motion holds one still frame.
+ *
+ * Engine: a WebGL fragment shader (a domain warped curve, a spectral spread of
+ * gaussian bands and a filmic tone curve) on requestAnimationFrame.
+ */
+import * as React from "react";
+export interface PrismFlowProps {
+    /** Four colours from one edge of the band to the other; the core between them is near white. Default an ember ramp. */
+    colors?: [string, string, string, string];
+    /** The background the light sits on. Default `"#050507"`. */
+    background?: string;
+    /** Drift speed, 0 (still) to 5. Default `2.7`. */
+    speed?: number;
+    /** Width of the band, 0.2 to 5. Default `2.75`. */
+    width?: number;
+    /** How far the colours fan out from the core, 0 to 4. Default `1.45`. */
+    spread?: number;
+    /** How much the band curls and folds, 0 to 2.5. Default `1`. */
+    warp?: number;
+    /** Overall brightness, 0.2 to 4. Default `2.25`. */
+    intensity?: number;
+    /** Film grain, 0 to 2.5. Default `1.75`. */
+    grain?: number;
+    /** Show the fainter echo band. Default `true`. */
+    echo?: boolean;
+    /** The light leans toward the pointer. Default `true`. */
+    interactive?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const PrismFlow: React.ForwardRefExoticComponent<PrismFlowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/privacy-banner/index.d.ts

@@ -0,0 +1 @@
+export { PrivacyBanner, type PrivacyBannerProps, type CookieKind, type CookieChoices, } from "./privacy-banner";

package/dist/components/privacy-banner/privacy-banner.d.ts

@@ -0,0 +1,41 @@
+/**
+ * PrivacyBanner
+ *
+ * Trigger: press (plus hover and in view). A white cookie consent card. It
+ * rises in from below while its outline cookie rolls in and settles; hovering
+ * the cookie makes its chips hop and takes a bite out of it. Three actions sit
+ * at the bottom: Customize, Reject all and an ink Accept all whose arrow slides
+ * through on hover. Customize grows the card on a spring to show a switch for
+ * each kind of cookie (essential stays on), and its button becomes Save
+ * choices. Any choice turns the whole card into a short confirmation: a check
+ * draws itself in a circle, the title rolls to what was chosen, and a small
+ * link opens the settings again. Reduced motion keeps the states without
+ * movement.
+ *
+ * Engine: motion/react (a layout animation for the card's height,
+ * AnimatePresence for the panel and the confirmation, springs for the
+ * switches, pathLength for the check, variants on the cookie's SVG parts).
+ */
+import * as React from "react";
+export interface CookieKind {
+    id: string;
+    label: string;
+    description: string;
+    /** Always on and cannot be switched off. */
+    required?: boolean;
+}
+export type CookieChoices = Record<string, boolean>;
+export interface PrivacyBannerProps {
+    title?: string;
+    description?: React.ReactNode;
+    /** The kinds of cookie shown under Customize. Default essential, analytics, marketing. */
+    kinds?: CookieKind[];
+    /** Called with every kind switched on. */
+    onAccept?: (choices: CookieChoices) => void;
+    /** Called with only the required kinds on. */
+    onReject?: (choices: CookieChoices) => void;
+    /** Called with the switches as set under Customize. */
+    onSave?: (choices: CookieChoices) => void;
+    className?: string;
+}
+export declare const PrivacyBanner: React.ForwardRefExoticComponent<PrivacyBannerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { ProfileCard, type ProfileCardProps, type ProfileStat } from "./profile-card";

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

@@ -0,0 +1,52 @@
+/**
+ * ProfileCard
+ *
+ * Trigger: in view, then hover, press and keys. A white profile card for a
+ * creator. Its cover is a soft aurora of pastel colour that drifts on its own
+ * and, on hover, flows toward the pointer like liquid. When the card scrolls into view it rises in, the avatar
+ * pops over the cover with a breathing online dot, the name, role and skill
+ * chips follow one after another and the stats count up. Press "+3" and more
+ * skills spring open. Follow morphs into Following with a check and the
+ * follower count ticks up; the round buttons play their icons on hover and
+ * the bookmark fills with a pop when saved. Reduced motion keeps everything
+ * still and shows every state at once.
+ *
+ * Engine: motion/react (springs on motion values for the flowing cover, looping keyframes for the drift, layout animations for the chips and
+ * the follow button, motion values counting the stats) with animated icons
+ * from lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export interface ProfileStat {
+    label: string;
+    value: number;
+    /** Decimal places. Default `0`. */
+    decimals?: number;
+    /** Shorten thousands to "12.4k". Default `false`. */
+    compact?: boolean;
+}
+export interface ProfileCardProps {
+    name?: string;
+    role?: string;
+    /** City or place, shown with a pin. Pass `null` to hide it. */
+    location?: string | null;
+    bio?: string;
+    /** Portrait URL. */
+    avatar?: string;
+    /** Shows a verified badge by the name. Default `true`. */
+    verified?: boolean;
+    /** The status on the cover, as in `"Available"`. Pass `null` to hide it. */
+    status?: string | null;
+    /** Skill chips; the first three show, the rest open from a "+n" chip. */
+    skills?: string[];
+    /** Three numbers. The first one counts followers and ticks up on Follow. */
+    stats?: ProfileStat[];
+    /** Pastel colours for the cover's aurora, three of them. */
+    cover?: [string, string, string];
+    /** Following at first. Default `false`. */
+    defaultFollowing?: boolean;
+    onFollowChange?: (following: boolean) => void;
+    onMessage?: () => void;
+    onSaveChange?: (saved: boolean) => void;
+    className?: string;
+}
+export declare const ProfileCard: React.ForwardRefExoticComponent<ProfileCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/profile-menu/index.d.ts

@@ -0,0 +1 @@
+export { ProfileMenu, type ProfileMenuProps, type ProfileMenuItem, type ProfileIcon, type ProfileTheme, } from "./profile-menu";

package/dist/components/profile-menu/profile-menu.d.ts

@@ -0,0 +1,43 @@
+/**
+ * ProfileMenu
+ *
+ * Trigger: hover and press (plus keys and in view). A white profile menu card:
+ * a header with avatar, name and email, groups of rows, an appearance switch and
+ * log out. When it scrolls into view the card rises in and its rows follow
+ * one after another. A soft gray pill glides between rows under the pointer,
+ * and every row's animated icon plays while its row is hovered: the house,
+ * the folder, the people, the envelope, the card and the pulse line each have
+ * their own move. Thin lines run edge to edge between the groups. In the
+ * Appearance switch a white pill slides to the choice and the chosen icon
+ * plays, and the card itself turns dark for Dark, or follows the device for
+ * System, fading between the two. Log out plays its door. The arrow keys move through the rows.
+ * Reduced motion keeps the states without movement.
+ *
+ * Engine: motion/react (staggered variants for the entrance, layoutId pills
+ * for the hover and the theme switch) with animated icons from
+ * lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export type ProfileTheme = "light" | "dark" | "system";
+export type ProfileIcon = "home" | "folder" | "users" | "mail" | "card" | "activity" | "palette" | "heart" | "pin" | "bell" | "clock";
+export interface ProfileMenuItem {
+    label: string;
+    /** One of the built in animated icons. */
+    icon: ProfileIcon;
+    /** A small count on the right, like unread messages. */
+    badge?: number;
+    onSelect?: () => void;
+}
+export interface ProfileMenuProps {
+    name?: string;
+    email?: string;
+    avatar?: string;
+    /** Groups of rows, split by a thin line. Default two groups of three. */
+    groups?: ProfileMenuItem[][];
+    theme?: ProfileTheme;
+    defaultTheme?: ProfileTheme;
+    onThemeChange?: (theme: ProfileTheme) => void;
+    onSignOut?: () => void;
+    className?: string;
+}
+export declare const ProfileMenu: React.ForwardRefExoticComponent<ProfileMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/project-index/index.d.ts

@@ -0,0 +1 @@
+export { ProjectIndex, type ProjectIndexProps, type ProjectItem, type ProjectEffect, } from "./project-index";

package/dist/components/project-index/project-index.d.ts

@@ -0,0 +1,65 @@
+/**
+ * ProjectIndex
+ *
+ * Trigger: hover or press (plus keys, in view and an optional timeline). An
+ * editorial project index: a numbered list of projects beside a large image
+ * panel. Pointing at a project (or selecting it, or arrowing to it) brings
+ * its photograph into focus through a WebGL transition you choose: Pixel
+ * (the image breaks into blocks and resolves into the next), Grain (a
+ * speckled dissolve through film grain), Gradient (a soft diagonal wipe
+ * with a band of light) or Mirror (the next image opens from the centre
+ * while the last one folds outward over a bright seam). The active row
+ * gets a gliding soft highlight, its title slides in a touch and an arrow
+ * springs in; the panel's caption and title roll to match, and the photo
+ * leans gently with the pointer. One press on a row or on the panel's
+ * button opens the project. Autoplay can cycle through the list with a thin
+ * progress line, pausing while you are on it. Reduced motion swaps the
+ * images with a quick fade.
+ *
+ * Engine: a WebGL fragment shader for the transitions (a GSAP tween drives
+ * the progress, the GSAP ticker draws), motion/react for the list and
+ * caption.
+ */
+import * as React from "react";
+export interface ProjectItem {
+    title: string;
+    /** A short line under the title, like "Residential, 2026". */
+    meta?: string;
+    /** Image URL. Must allow cross origin use (CORS) to be drawn in WebGL. */
+    image: string;
+    /** Describes the image for screen readers. Defaults to the title. */
+    alt?: string;
+    /** Opens on a single press. */
+    href?: string;
+}
+export type ProjectEffect = "pixel" | "grain" | "gradient" | "mirror";
+export interface ProjectIndexProps {
+    projects?: ProjectItem[];
+    /** The small heading above the list. Default `"Selected projects"`. */
+    eyebrow?: string;
+    /** The image transition. Default `"pixel"`. */
+    effect?: ProjectEffect;
+    /** Transition length in seconds. Default `0.9`. */
+    duration?: number;
+    /** How strong the effect is, 0 to 1. Default `0.6`. */
+    intensity?: number;
+    /** Bring a project into focus on hover, or only when it is pressed. Default `"hover"`. */
+    select?: "hover" | "click";
+    /** Which side the image sits on (on wide cards). Default `"right"`. */
+    imageSide?: "left" | "right";
+    /** Show the 01, 02 numbers. Default `true`. */
+    numbers?: boolean;
+    /** Show each project's meta line. Default `true`. */
+    meta?: boolean;
+    /** Cycle through the projects on its own, pausing while you are on it. Default `false`. */
+    autoplay?: boolean;
+    /** Seconds per project while autoplaying. Default `4`. */
+    interval?: number;
+    /** How far the photo leans with the pointer, 0 to 1. Default `0.5`. */
+    parallax?: number;
+    defaultIndex?: number;
+    /** Called when a project is opened (a press on its row or the panel's button). */
+    onOpen?: (project: ProjectItem, index: number) => void;
+    className?: string;
+}
+export declare const ProjectIndex: React.ForwardRefExoticComponent<ProjectIndexProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/prompt-input/index.d.ts

@@ -0,0 +1 @@
+export { PromptInput, type PromptInputProps, type PromptModel, type PromptSubmit, } from "./prompt-input";

package/dist/components/prompt-input/prompt-input.d.ts

@@ -0,0 +1,49 @@
+/**
+ * PromptInput
+ *
+ * Trigger: type (plus press). A white composer for an AI assistant. The field
+ * grows smoothly as you write, and while it is empty its placeholder rolls
+ * through example prompts. Underneath sits a row of tools: an attach icon that
+ * plays on hover and adds file chips that pop in (and shrink away when
+ * removed), a model picker that opens upward with a sliding highlight, a web
+ * search toggle with an earth that turns on hover, and a mic that turns into
+ * live sound bars while a ring of fine particles in the field ripples and
+ * brightens with the voice beside a running timer, then types out what it
+ * heard. The send
+ * button stays quiet until there is something to send, then wakes into ink;
+ * pressing it (or Enter) launches the arrow upward and turns the button into a
+ * stop square while a soft neutral glow breathes around the card and a light
+ * shimmer travels round its edge until the reply is done.
+ * Shift and Enter make a new line. Reduced motion keeps every state but drops
+ * the movement.
+ *
+ * Engine: motion/react (height glide, rolling placeholder, spring chips, a
+ * layoutId menu highlight, and a breathing neutral glow with a travelling
+ * edge shimmer while it works), with a GSAP ticker drawing the listening
+ * particle ring.
+ */
+import * as React from "react";
+export interface PromptModel {
+    id: string;
+    label: string;
+    /** A short line under the name in the menu. */
+    hint: string;
+}
+export interface PromptSubmit {
+    text: string;
+    model: string;
+    web: boolean;
+    files: string[];
+}
+export interface PromptInputProps {
+    /** Placeholders the empty field rolls through. */
+    placeholders?: string[];
+    /** Models in the picker. Default three. */
+    models?: PromptModel[];
+    /** Called on send. Return a promise to keep the working state until it settles. */
+    onSubmit?: (prompt: PromptSubmit) => void | Promise<unknown>;
+    /** Called by the attach button. Default adds a sample file chip. */
+    onAttach?: () => void;
+    className?: string;
+}
+export declare const PromptInput: React.ForwardRefExoticComponent<PromptInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/quota-gauge/index.d.ts

@@ -0,0 +1 @@
+export { QuotaGauge, type QuotaGaugeProps } from "./quota-gauge";

package/dist/components/quota-gauge/quota-gauge.d.ts

@@ -0,0 +1,30 @@
+/**
+ * QuotaGauge
+ *
+ * Trigger: in view, then hover. A white card for a plan's credit quota: a
+ * three quarter gauge made of radial ticks, like a speedometer, around a
+ * bolt. When it scrolls into view the ticks light up one by one up to the
+ * amount used, the lit ones growing a little longer, while the credits count
+ * up on odometer wheels beneath the bolt and the share of the plan rolls in.
+ * The tick at the tip glows. Hovering the card plays the bolt and swaps the
+ * caption to what is left. Reduced motion shows the final state at once.
+ *
+ * Engine: motion/react (a counting motion value drives the ticks and the
+ * numbers, springs for the ticks, AnimatePresence for the caption) with an
+ * animated bolt from lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export interface QuotaGaugeProps {
+    /** Credits used so far. Default `2022`. */
+    value?: number;
+    /** The plan limit. Default `2500`. */
+    goal?: number;
+    /** Unit after the amount. Default `"credits used"`. */
+    unit?: string;
+    /** Ticks on the gauge. Default `44`. */
+    ticks?: number;
+    /** Colour of lit ticks. Default ink. */
+    color?: string;
+    className?: string;
+}
+export declare const QuotaGauge: React.ForwardRefExoticComponent<QuotaGaugeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/range-chart/index.d.ts

@@ -0,0 +1 @@
+export { RangeChart, type RangeChartProps, type RangeDay } from "./range-chart";

package/dist/components/range-chart/range-chart.d.ts

@@ -0,0 +1,47 @@
+/**
+ * RangeChart
+ *
+ * Trigger: hover and press (plus keys and in view). A white card that charts a
+ * range for each day, like heart rate: a pill from each day's low to high on
+ * a soft column track, separate bubbles for outlying readings, and a dashed
+ * average line. A 7D, 15D or 30D switch picks how many days to show: an ink
+ * pill slides to it, the bars slim down or widen to fit and grow back in, and
+ * the labels change from weekdays to dates. When the card scrolls into view
+ * it rises, the pills grow out from the average one after another and the
+ * average tag slides in. Hovering a day (or focusing it, or stepping with the
+ * arrow keys) widens its pills, marks their ends with white dots and fades
+ * the other days, while the big range in the header rolls to that day like
+ * an odometer, the caption names it, and the Lowest, Average and Peak tiles
+ * roll to match; leaving rolls it all back. The Full stats button slides its
+ * arrow through on hover. Reduced motion keeps the states without movement.
+ *
+ * Engine: motion/react (staggered springs for the bars, odometer digit
+ * columns for the numbers, layoutId pills for the switch and the hovered
+ * column, AnimatePresence for the captions).
+ */
+import * as React from "react";
+export interface RangeDay {
+    /** The day, used for labels and the header. */
+    date: Date;
+    /** One or more [low, high] ranges; a short one reads as a single bubble. */
+    ranges: [number, number][];
+}
+export interface RangeChartProps {
+    title?: string;
+    /** Unit after the numbers. Default `"bpm"`. */
+    unit?: string;
+    /** Every day you have, oldest first. The chart shows the most recent ones. Default 30 days. */
+    data?: RangeDay[];
+    /** Spans the switch offers, in days. Default `[7, 15, 30]`. */
+    spans?: number[];
+    /** Span shown first. Default `7`. */
+    defaultSpan?: number;
+    /** Value of the dashed average line. Default the mean of the shown readings. */
+    average?: number;
+    /** Range colour. Default a warm red. */
+    color?: string;
+    /** Called by the Full stats button. */
+    onFullStats?: () => void;
+    className?: string;
+}
+export declare const RangeChart: React.ForwardRefExoticComponent<RangeChartProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { ReactionCard, type ReactionCardProps, type Reaction, } from "./reaction-card";

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

@@ -0,0 +1,60 @@
+/**
+ * ReactionCard
+ *
+ * Trigger: hover and press (long press on touch). A white post card with
+ * three reaction buttons, each with its own pop-up of choices in the spirit
+ * of a social feed. React opens a row of faces, Love a row of coloured
+ * hearts, and Boost a row of numbers to add. Hovering a button for a moment,
+ * or holding it on touch, springs the pop-up open with each choice rising in
+ * turn; the choice under the pointer swells and lifts with its name above
+ * it. Picking one closes the pop-up, pops the choice into the button with a
+ * small burst of copies flying out, and rolls the count. A quick press
+ * without opening the pop-up toggles the first choice, and Boost adds one
+ * each time with a +1 that floats up. The summary line above the buttons
+ * stacks the faces picked so far. With the keyboard, Arrow Up opens a
+ * pop-up, arrows move through it, Enter picks and Escape closes. Reduced
+ * motion swaps the springs and bursts for fades.
+ *
+ * Engine: motion/react (spring pop-ups, staggered choices, bursts and
+ * rolling counts).
+ */
+import * as React from "react";
+export interface Reaction {
+    key: string;
+    /** What shows in the pop-up and on the button. */
+    emoji: string;
+    /** Name shown above it in the pop-up and on the button once picked. */
+    label: string;
+    /** For Boost style buttons, how much a pick adds. */
+    amount?: number;
+}
+export interface ReactionCardProps {
+    /** Who posted. Default `"Maya Lindqvist"`. */
+    author?: string;
+    /** Their photo. */
+    avatar?: string;
+    /** When they posted. Default `"2h"`. */
+    time?: string;
+    /** The post itself. */
+    text?: string;
+    /** Faces for the React button. */
+    faces?: Reaction[];
+    /** Hearts for the Love button. */
+    hearts?: Reaction[];
+    /** Amounts for the Boost button. */
+    boosts?: Reaction[];
+    /** Reactions before yours. Default `128`. */
+    reactions?: number;
+    /** Loves before yours. Default `64`. */
+    loves?: number;
+    /** Boost total before yours. Default `320`. */
+    boosted?: number;
+    /** Called whenever any button changes, with all three values. */
+    onChange?: (state: {
+        face: string | null;
+        heart: string | null;
+        boost: number;
+    }) => void;
+    className?: string;
+}
+export declare const ReactionCard: React.ForwardRefExoticComponent<ReactionCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { RecapCard, type RecapCardProps, type RecapStat, type RecapPart, type RecapBadge, type RecapIconName, } from "./recap-card";

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

@@ -0,0 +1,61 @@
+/**
+ * RecapCard
+ *
+ * Trigger: in view, then hover, focus and press. A white summary card that
+ * reads like a sentence: the period's numbers sit inline in soft gray chips,
+ * each with an animated icon, and count up from zero when the card scrolls
+ * into view while their icons play once. Below, a row of round milestone
+ * badges pops in one after another on a spring. Earned badges carry their icon
+ * in ink with a small check; a badge still in reach shows a ring filling to
+ * how close it is. Hovering or focusing a badge lifts it, turns its disc to
+ * ink and plays its icon, and a dark note on how it was earned grows up out of
+ * the disc like liquid: a column shoots up, spreads into the note and stays
+ * joined to the disc by soft inward curves, then drains back on leave. A full width button at the bottom
+ * slides its arrow on hover and dips on press. Reduced motion shows the final
+ * state at once.
+ *
+ * Engine: motion/react (useInView, animate on motion values for the counts,
+ * staggered spring variants for the badges, a pathLength ring for progress,
+ * and two springs feeding one SVG path for the liquid note, as in LiquidTabs).
+ */
+import * as React from "react";
+/** The animated icons a stat or a badge can carry. */
+export type RecapIconName = "words" | "trend" | "streak" | "time" | "spark" | "sun" | "moon" | "feather";
+/** A number inside the sentence, set in a chip that counts up. */
+export interface RecapStat {
+    value: number;
+    /** Decimal places. Default `0`. */
+    decimals?: number;
+    /** Text before the number, as in `"$"`. */
+    prefix?: string;
+    /** Text after the number, as in `" words"` or `"%"`. */
+    suffix?: string;
+    icon?: RecapIconName;
+}
+/** The sentence, as plain text and stats in reading order. */
+export type RecapPart = string | RecapStat;
+export interface RecapBadge {
+    label: string;
+    icon: RecapIconName;
+    /** How it was earned, or how close it is, shown on hover and focus. */
+    note: string;
+    /** Share of the way there, 0 to 1. Below 1 the badge is still in reach and shows a ring. Default `1`. */
+    progress?: number;
+}
+export interface RecapCardProps {
+    /** Card title. Default `"Your month in words"`. */
+    title?: string;
+    /** Period shown in a chip by the title. Pass `null` to hide it. Default `"November"`. */
+    period?: string | null;
+    /** The summary sentence. Default a writing recap. */
+    parts?: RecapPart[];
+    /** The badges, left to right. Default four writing milestones. */
+    badges?: RecapBadge[];
+    /** Button label. Pass `null` to hide the button. Default `"View full recap"`. */
+    actionLabel?: string | null;
+    /** Makes the button a link. */
+    href?: string;
+    onAction?: () => void;
+    className?: string;
+}
+export declare const RecapCard: React.ForwardRefExoticComponent<RecapCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/receipt-button/index.d.ts

@@ -0,0 +1 @@
+export { ReceiptButton, type ReceiptButtonProps, type ReceiptItem } from "./receipt-button";