motion-brew 0.0.0-stage → 0.1.0

package/dist/components/liquid-tabs/liquid-tabs.d.ts

@@ -0,0 +1,47 @@
+/**
+ * LiquidTabs
+ *
+ * Trigger: press (plus hover, keys and in view). Icon tabs over a white
+ * panel. The chosen tab is a white bump that grows out of the panel's top
+ * edge, joined to it by soft inward curves, so the tab and the panel read as
+ * one piece. Choose another tab and the bump flows there like liquid: its
+ * leading edge shoots ahead on a quick spring while the trailing edge follows
+ * on a slower one, so the shape stretches into a long blob, its top sags and
+ * its curves widen, then it snaps back into a round tab under the new icon.
+ * The icon on the bump plays. The content slides in from the side you moved
+ * toward through a blur while the panel eases to the new height. The demo is
+ * a profile settings screen: a profile with a status picker, notification
+ * switches, security with your signed in devices, and usage with a rolling
+ * number and growing bars. The arrow keys, Home and End move
+ * between tabs. Reduced motion jumps the bump and swaps content without
+ * movement.
+ *
+ * Engine: motion/react (two springs for the bump's edges feeding one SVG
+ * path, AnimatePresence for the content, a measured height tween) with
+ * animated icons from lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export interface LiquidTab {
+    id: string;
+    /** Read by screen readers and shown in the tooltip. */
+    label: string;
+    /** An icon component; animated icons play while their tab is chosen. */
+    icon: React.ComponentType<{
+        active?: boolean;
+        className?: string;
+    }>;
+    content: React.ReactNode;
+}
+export interface LiquidTabsProps {
+    /** Tabs, left to right. Defaults to four demo tabs. */
+    tabs?: LiquidTab[];
+    /** Tab chosen first, by id. */
+    defaultValue?: string;
+    /** Chosen tab (controlled). */
+    value?: string;
+    onValueChange?: (id: string) => void;
+    /** How far the liquid stretches between tabs: 0 is firm, 1 is very stretchy. Default `0.6`. */
+    stretch?: number;
+    className?: string;
+}
+export declare const LiquidTabs: React.ForwardRefExoticComponent<LiquidTabsProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { MagneticButton, type MagneticButtonProps } from "./magnetic-button";

package/dist/components/magnetic-button/magnetic-button.d.ts

@@ -0,0 +1,46 @@
+/**
+ * MagneticButton
+ *
+ * Trigger: magnetic cursor. While a mouse hovers the button, the button leans
+ * toward the cursor on a spring and its label leans a little further, giving a
+ * parallax pull. A soft spotlight follows the cursor across the surface.
+ * Press gives a quick squash (scale 0.96). Touch and reduced-motion users get a
+ * still button with press feedback only.
+ *
+ * Engine: motion/react (springs + motion values, no re-renders on move).
+ */
+import * as React from "react";
+import { type HTMLMotionProps, type SpringOptions } from "motion/react";
+declare const VARIANTS: {
+    readonly solid: "bg-zinc-900 text-white shadow-[0_1px_0_0_rgba(255,255,255,0.12)_inset,0_8px_24px_-8px_rgba(0,0,0,0.5)] dark:bg-white dark:text-zinc-900";
+    readonly outline: "border border-zinc-300 bg-white/60 text-zinc-900 backdrop-blur dark:border-zinc-700 dark:bg-zinc-900/60 dark:text-zinc-100";
+    readonly ghost: "bg-transparent text-zinc-900 hover:bg-zinc-900/5 dark:text-zinc-100 dark:hover:bg-white/10";
+};
+declare const SIZES: {
+    readonly sm: "h-9 px-4 text-sm";
+    readonly md: "h-11 px-6 text-sm";
+    readonly lg: "h-14 px-8 text-base";
+};
+export interface MagneticButtonProps extends Omit<HTMLMotionProps<"button">, "children"> {
+    children?: React.ReactNode;
+    /** Visual style. Default `"solid"`. */
+    variant?: keyof typeof VARIANTS;
+    /** Height and padding preset. Default `"md"`. */
+    size?: keyof typeof SIZES;
+    /** How far the button follows the cursor, as a fraction of the cursor's offset from center. Default `0.3`. */
+    strength?: number;
+    /** Extra pull on the label, on top of the button's own movement. Default `0.15`. */
+    labelStrength?: number;
+    /** Spring used for the pull and the snap back. Default `{ stiffness: 400, damping: 25, mass: 0.6 }`. */
+    spring?: SpringOptions;
+    /** Show the cursor spotlight on the surface. Default `true`. */
+    spotlight?: boolean;
+    /** Render as a link to this address instead of a button. */
+    href?: string;
+    /** With `href`, where the link opens, like `"_blank"`. */
+    target?: string;
+    /** With `href`. Defaults to `"noopener noreferrer"` for a new tab. */
+    rel?: string;
+}
+export declare const MagneticButton: React.ForwardRefExoticComponent<Omit<MagneticButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1 @@
+export { MagneticFlow, type MagneticFlowProps } from "./magnetic-flow";

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

@@ -0,0 +1,35 @@
+/**
+ * MagneticFlow
+ *
+ * Trigger: hover, then press. A stack of cards travels as a chain: the front
+ * card follows the pointer and every card behind it chases the one ahead, so
+ * the stack slithers like a snake and tilts with its speed. With no pointer the
+ * stack floats gently at the center. Click (or Enter / Space) and the cards burst
+ * open around the center like rays of a sun; click again, or wait, and they
+ * fold back into the stack and flow on. Reduced motion keeps a still stack and
+ * a plain burst.
+ *
+ * Engine: gsap + @gsap/react (a gsap.ticker loop with quickSetter for the chase,
+ * staggered elastic tweens for the burst, all scoped with useGSAP).
+ */
+import * as React from "react";
+export interface MagneticFlowProps {
+    /** Card faces, back to front. The last one leads. Default eight graphic cards. */
+    cards?: React.ReactNode[];
+    /** Card edge length in px. Default `140`. */
+    cardSize?: number;
+    /** How tightly each card chases the one ahead, 0 to 1. Higher is snappier. Default `0.16`. */
+    follow?: number;
+    /** Stack offset between cards at rest, in px. Default `7`. */
+    spacing?: number;
+    /** Distance of the burst rays from the center, in px. Shrinks to fit. Default `150`. */
+    burstRadius?: number;
+    /** Fold back this many ms after a burst. `null` waits for a click. Default `2400`. */
+    burstHold?: number | null;
+    /** Float gently around the center when no pointer is over it. Default `true`. */
+    autoplay?: boolean;
+    /** Called when the cards burst open. */
+    onBurst?: () => void;
+    className?: string;
+}
+export declare const MagneticFlow: React.ForwardRefExoticComponent<MagneticFlowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/message-composer/index.d.ts

@@ -0,0 +1 @@
+export { MessageComposer, type MessageComposerProps, type ComposerMessage, type ComposerAttachment, type ComposerAttachmentKind, type ComposerPerson, type SendMode, } from "./message-composer";

package/dist/components/message-composer/message-composer.d.ts

@@ -0,0 +1,79 @@
+/**
+ * MessageComposer
+ *
+ * Trigger: type (plus press). A white rich text composer for a chat or a
+ * comment thread. A toolbar sits on top: a text style menu that pours open
+ * with its rows sliding in one after another and a pill gliding under the
+ * pointer, bold, italic and underline, bullet and numbered lists, a quote and
+ * a code block, each lighting up while the caret is inside that style, and a
+ * red bin that clears the message through a blur. The writing area grows with
+ * a spring as you write. Typing @ opens a list of people that inserts a
+ * mention chip, and an emoji button opens a small picker. Attachments sit in
+ * a row of thumbnails, each with an upload ring that turns into a check. The
+ * bottom bar holds attach, voice (a live timer with sound bars), video, an AI
+ * polish that sweeps a shimmer over the text and rewrites it, a button that
+ * hides the toolbar, and a split send button: the plane flies off as the
+ * message clears, and the chevron opens send now, schedule and send quietly.
+ * Reduced motion keeps every state but drops the movement.
+ *
+ * Engine: motion/react (a spring height glide for the writing area, clip
+ * path menus with staggered rows, layoutId highlights, spring chips, and a
+ * blur clear), on top of a contentEditable editor driven by execCommand.
+ */
+import * as React from "react";
+export interface ComposerPerson {
+    /** Used in the text as @id. */
+    id: string;
+    name: string;
+    /** A short line next to the name, like a role. */
+    title?: string;
+    avatar?: string;
+}
+export type ComposerAttachmentKind = "image" | "video" | "voice" | "file";
+export interface ComposerAttachment {
+    id: string;
+    name: string;
+    kind: ComposerAttachmentKind;
+    /** A preview image for images and videos. */
+    src?: string;
+    /** Shown on videos and voice notes, like 0:12. */
+    duration?: string;
+    /** The picked file, when it came from the attach button. */
+    file?: File;
+}
+export type SendMode = "now" | "schedule" | "silent";
+export interface ComposerMessage {
+    /** The message as HTML, with mentions as `<span data-mention="id">`. */
+    html: string;
+    /** The message as plain text, with mentions as `@id`. */
+    text: string;
+    mentions: string[];
+    attachments: ComposerAttachment[];
+    mode: SendMode;
+    /** When a scheduled message should go out. */
+    sendAt?: Date;
+}
+export interface MessageComposerProps {
+    /** Starting text. Lines become paragraphs and `@id` of a known person becomes a chip. */
+    defaultValue?: string;
+    placeholder?: string;
+    /** People offered after typing @. */
+    people?: ComposerPerson[];
+    /** Attachments already in the message; they upload when the composer comes into view. */
+    defaultAttachments?: ComposerAttachment[];
+    /** Show the formatting toolbar at first. Default `true`. */
+    toolbar?: boolean;
+    /** The writing area grows up to this height in px, then scrolls. Default `240`. */
+    maxHeight?: number;
+    /** Called on send. Return a promise to hold the sending state until it settles. */
+    onSend?: (message: ComposerMessage) => void | Promise<unknown>;
+    /** Uploads a picked file, reporting progress from 0 to 1. Default pretends to upload. */
+    onUpload?: (file: File, progress: (value: number) => void) => Promise<void>;
+    /** The AI button: gets the text, returns a better one. Default tidies it, or drafts one when empty. */
+    onEnhance?: (text: string) => string | Promise<string>;
+    /** The video button. Default adds a sample clip. */
+    onVideo?: () => void;
+    onChange?: (text: string) => void;
+    className?: string;
+}
+export declare const MessageComposer: React.ForwardRefExoticComponent<MessageComposerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/metal-card-stack/index.d.ts

@@ -0,0 +1 @@
+export { MetalCardStack, type MetalCardStackProps, type MetalCard, } from "./metal-card-stack";

package/dist/components/metal-card-stack/metal-card-stack.d.ts

@@ -0,0 +1,49 @@
+/**
+ * MetalCardStack
+ *
+ * Trigger: drag (plus hover and keys). A stack of metal payment cards that
+ * feel like the real thing: brushed metal with a fine grain, bevelled edges
+ * that catch the light, a visible card edge underneath, an embossed number
+ * and a light sheen that slides across the surface as the front card tilts
+ * toward the pointer. Grab the front card and it follows your hand, leaning
+ * into the drag. Throw it any way, left, right, up or down, and it flies off
+ * that way and tucks in at the back of the stack. Click the front card (or press Enter) and
+ * it turns over in 3D to show its back: the magnetic stripe, the signature
+ * panel with the security code and the small print; click again to turn it
+ * back. A short drag springs back. The rest of the
+ * stack slides up or down a step each time, smaller and dimmer the deeper it
+ * sits. The arrow keys do the same. Reduced motion swaps the throws for quick
+ * fades.
+ *
+ * Engine: gsap + @gsap/react (quickTo for the drag and tilt, timelines for the
+ * throw, scoped with useGSAP).
+ */
+import * as React from "react";
+export interface MetalCard {
+    /** Name on the card. */
+    holder: string;
+    /** The full card number, digits only. Grouped the way its network prints it. */
+    number: string;
+    /** The card network, shown as its mark in the corner. */
+    network: "visa" | "mastercard" | "amex" | "discover";
+    /** The issuer's name, top left. */
+    bank?: string;
+    /** Security code shown on the back. Default `"123"`. */
+    cvv?: string;
+    /** Expiry, MM/YY. */
+    expiry: string;
+    /** The metal. */
+    finish: "graphite" | "gold" | "titanium" | "obsidian";
+    /** Small label in the corner, like the plan name. */
+    tier?: string;
+}
+export interface MetalCardStackProps {
+    /** Cards in the stack, front first. Default four. */
+    cards?: MetalCard[];
+    /** Card width in px. Height follows the real card ratio. Default `320`. */
+    width?: number;
+    /** Called with the card now at the front. */
+    onChange?: (card: MetalCard, index: number) => void;
+    className?: string;
+}
+export declare const MetalCardStack: React.ForwardRefExoticComponent<MetalCardStackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/metric-split/index.d.ts

@@ -0,0 +1 @@
+export { MetricSplit, type MetricSplitProps, type MetricSplitPeriod } from "./metric-split";

package/dist/components/metric-split/metric-split.d.ts

@@ -0,0 +1,45 @@
+/**
+ * MetricSplit
+ *
+ * Trigger: in view, then hover and press. A card that splits a total across
+ * three metrics: one rounded bar of proportional segments (solid, light,
+ * striped) with each metric's dot, label and odometer number under its segment.
+ * When it scrolls into view the segments slide in one after another while the
+ * numbers count up from zero. Switching period rolls the numbers to the new values while the
+ * columns glide to their new widths. Hovering or focusing a column dims the
+ * others and swaps its label for its share. Reduced motion shows final states.
+ *
+ * Engine: motion/react (motion values for counts and widths, odometer wheels,
+ * a layoutId pill for the period switch, AnimatePresence for the labels).
+ */
+import * as React from "react";
+export interface MetricSplitPeriod {
+    /** Label on the period switch, e.g. "Week". */
+    label: string;
+    /** One value per metric, in the same order as `metrics`. */
+    values: number[];
+}
+export interface MetricSplitProps {
+    /** Metric names, left to right. Default visits, page views, downloads. */
+    metrics?: string[];
+    /** Periods on the switch, each with a value per metric. Default week, month, year. */
+    periods?: MetricSplitPeriod[];
+    /** Period shown first, by label. Default the first one. */
+    defaultPeriod?: string;
+    /** Base color: solid for the first column, lighter for the second, striped for the third. Default `"#8b5cf6"`. */
+    color?: string;
+    /** Card title. Default `"Site activity"`. */
+    title?: React.ReactNode;
+    /** Line under the title. Default `"How people find and use your page"`. */
+    subtitle?: React.ReactNode;
+    /** Length of the count-up and width glide, in seconds. Default `1.4`. */
+    duration?: number;
+    /** Locale for number formatting. Default `"en-US"`. */
+    locale?: string;
+    /** Accessible label for the round header button. Default `"View report"`. */
+    actionLabel?: React.ReactNode;
+    /** Called when the header button is pressed. Leave out to hide it. */
+    onAction?: () => void;
+    className?: string;
+}
+export declare const MetricSplit: React.ForwardRefExoticComponent<MetricSplitProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { MixChart, type MixChartProps, type MixSeries, type MixPoint, type MixRange, } from "./mix-chart";

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

@@ -0,0 +1,59 @@
+/**
+ * MixChart
+ *
+ * Trigger: in view, then hover, press and keys. A white chart card of stacked
+ * bars, each bar split into a few vivid segments with small gaps between them.
+ * When it scrolls into view the gridlines draw in and the bars grow from the
+ * baseline one after another, each segment stacking on the one below, while
+ * the total counts up. One bar is chosen and shows its full colours; the rest
+ * sit in soft hatched tints of theirs. Hover, tap or arrow to another bar and
+ * the colours move there; point at one of its segments and only that segment
+ * keeps its full colour while a small white card just above it names that
+ * source and its value, one source at a time. Click a source in the legend to switch it off or on: its segments
+ * shrink away or grow back, the scale eases to fit and the total recounts.
+ * Switch the range and new bars grow in as the total counts to the new figure.
+ * Reduced motion shows every state at once.
+ *
+ * Engine: motion/react (spring heights for the segments, a motion value
+ * counting the total, layoutId for the range pill, AnimatePresence for the
+ * bars and the tooltip card).
+ */
+import * as React from "react";
+export interface MixSeries {
+    key: string;
+    label: string;
+    /** A vivid colour for this source. */
+    color: string;
+}
+export interface MixPoint {
+    /** Short label under the bar, as in `"Mon"`. */
+    label: string;
+    /** Longer label in the tooltip, as in `"Monday 10 Nov"`. */
+    detail?: string;
+    /** One value per series, in series order. */
+    values: number[];
+}
+export interface MixRange {
+    id: string;
+    /** Label on the range switch, as in `"Week"`. */
+    label: string;
+    points: MixPoint[];
+    /** Change against the period before, in percent, shown as a chip. */
+    change?: number;
+    /** Shown under the total, as in `"used this week"`. */
+    caption?: string;
+}
+export interface MixChartProps {
+    /** Card title. Default `"Home energy"`. */
+    title?: string;
+    /** The sources, bottom of the stack first. Default solar, battery and grid. */
+    series?: MixSeries[];
+    /** The ranges on the switch, the first shown first. Default a week, a month and a year. */
+    ranges?: MixRange[];
+    /** Unit after the numbers. Default `"kWh"`. */
+    unit?: string;
+    /** Decimal places on the total and the tooltip. Default `1`. */
+    decimals?: number;
+    className?: string;
+}
+export declare const MixChart: React.ForwardRefExoticComponent<MixChartProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { MonthCalendar, type MonthCalendarProps } from "./month-calendar";

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

@@ -0,0 +1,34 @@
+/**
+ * MonthCalendar
+ *
+ * Trigger: hover and press. A white month calendar. A soft gray disc follows
+ * the pointer from day to day, and picking a day springs an ink disc to it.
+ * The arrows slide the month sideways in the direction you travel, with the
+ * month name rolling the same way and a touch of blur on the move; the arrow
+ * nudges toward its side on hover. Days with events carry a small dot, today
+ * wears a thin ring, and days from the months around it sit faded at the
+ * edges; picking one of those turns to its month. The grid works like a
+ * calendar with the keyboard: arrows move by day and week, Page Up and Page
+ * Down by month, Home and End to the ends of the week. Reduced motion swaps
+ * the slides for fades.
+ *
+ * Engine: motion/react (layoutId discs for hover and selection, direction
+ * aware AnimatePresence for the month change).
+ */
+import * as React from "react";
+export interface MonthCalendarProps {
+    /** The selected day. Leave it out to let the calendar keep its own. */
+    value?: Date;
+    /** The day selected at first. Default today. */
+    defaultValue?: Date;
+    /** Called with the picked day. */
+    onChange?: (date: Date) => void;
+    /** Days that get an event dot. Default a few days this month. */
+    events?: Date[];
+    /** First day of the week, 0 for Sunday or 1 for Monday. Default `1`. */
+    weekStartsOn?: 0 | 1;
+    /** Locale for month and weekday names. Default `"en-US"`. */
+    locale?: string;
+    className?: string;
+}
+export declare const MonthCalendar: React.ForwardRefExoticComponent<MonthCalendarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/morph-search/index.d.ts

@@ -0,0 +1 @@
+export { MorphSearch, type MorphSearchProps, type SearchItem } from "./morph-search";

package/dist/components/morph-search/morph-search.d.ts

@@ -0,0 +1,33 @@
+/**
+ * MorphSearch
+ *
+ * Trigger: focus, then type. A search pill that turns into a white card on
+ * focus. Each typed letter rises out of a light blur while the real input stays
+ * underneath, so the caret, selection and paste behave normally. Matches grow
+ * the card and cascade in, re-flowing smoothly as the list narrows, with the
+ * matched part of each name marked by a soft highlighter tint. No matches
+ * gives a small head-shake. Arrow keys move a sliding highlight, Enter picks, Escape
+ * clears then closes. Reduced motion drops the letter and list motion.
+ *
+ * Engine: motion/react (state-driven card morph, per-letter enter, layout list,
+ * layoutId highlight, AnimatePresence for the clear button and results).
+ */
+import * as React from "react";
+export interface SearchItem {
+    /** Main line; matching runs against it. */
+    title: string;
+    /** Second line. */
+    subtitle?: string;
+}
+export interface MorphSearchProps {
+    /** Items to search. Default a small address book. */
+    items?: SearchItem[];
+    /** Placeholder text. Default `"Search people"`. */
+    placeholder?: string;
+    /** Most results to show. Default `5`. */
+    limit?: number;
+    /** Called when a result is picked with a click or Enter. */
+    onSelect?: (item: SearchItem) => void;
+    className?: string;
+}
+export declare const MorphSearch: React.ForwardRefExoticComponent<MorphSearchProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { OrbitCard, type OrbitCardProps, type OrbitMember } from "./orbit-card";

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

@@ -0,0 +1,50 @@
+/**
+ * OrbitCard
+ *
+ * Trigger: drag (plus hover and in view). A feature card for a community,
+ * a network or a user count. Avatars and small app chips circle a center mark
+ * on three faint rings that turn at their own speeds, rising from the bottom
+ * of the card. Every few seconds someone joins: a spark leaves the center,
+ * lands on a member with a pop, a ripple spreads from the mark and the count
+ * in the title rolls up by one. Hover slows the rings and pulls nearby people
+ * gently toward the cursor; hovering a person stops them and shows who they
+ * are. Drag spins the whole system, and it keeps spinning with momentum when
+ * let go. The title, body and a gray ghost button rise out of a soft blur when
+ * the card scrolls into view. The rings are decorative; the text stays real
+ * content. Reduced motion shows a still system and a still count.
+ *
+ * Engine: motion/react for the reveal, rolling digits, ripples and pops, with
+ * one requestAnimationFrame loop placing the orbiting items.
+ */
+import * as React from "react";
+export interface OrbitMember {
+    name: string;
+    /** Shown under the name on hover, like a role or a city. */
+    role: string;
+    /** Photo URL. Without one, initials on a colored disc. */
+    avatar?: string;
+}
+export interface OrbitCardProps {
+    /** The number in the title. It rolls up by one each time someone joins. Default `24816`. */
+    count?: number;
+    /** Words after the number. Default `"creators"`. */
+    label?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** Button label. Default `"Join the community"`. */
+    cta?: string;
+    /** Where the button goes. Without it the button calls `onCta`. */
+    href?: string;
+    /** People on the rings, up to six. Default six members. */
+    members?: OrbitMember[];
+    /** The mark in the center. Default a four-point star. */
+    logo?: React.ReactNode;
+    /** Ring speed multiplier. `0` holds the rings still. Default `1`. */
+    speed?: number;
+    /** Seconds between joins. `0` turns joining off. Default `2.6`. */
+    joinEvery?: number;
+    /** Called by the button when there is no `href`. */
+    onCta?: () => void;
+    className?: string;
+}
+export declare const OrbitCard: React.ForwardRefExoticComponent<OrbitCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/otp-code/index.d.ts

@@ -0,0 +1 @@
+export { OtpCode, type OtpCodeProps, type OtpChannel } from "./otp-code";

package/dist/components/otp-code/otp-code.d.ts

@@ -0,0 +1,61 @@
+/**
+ * OtpCode
+ *
+ * Trigger: type (plus paste, focus and a timeline). A white card that asks
+ * for a one time code sent to an email address or a phone. It rises in out of
+ * a soft blur and its pieces follow one after another. The code boxes
+ * sit in two groups (3 and 3 for six digits) with a small gap between them.
+ * Each digit pops into its box, the box waiting for the next digit shows a
+ * blinking caret, and filled boxes turn white with a stroke. There is no
+ * confirm button: the last digit starts the check, the boxes ripple in a
+ * wave while a spinner says it is checking, and then either the boxes turn
+ * green for a beat and the card glides into a confirmation (a green badge
+ * whose shield draws a check while rings ripple out, You're verified, a panel
+ * with the verified address and a Remember this device switch, then
+ * Continue), or they shake red, a message slides in, and the digits drop away
+ * from the right so the next try can start. A resend line counts down and
+ * then turns into a button whose icon spins when pressed. It is one real
+ * input underneath, so paste, autofill of SMS codes, backspace and arrow
+ * keys all work. Reduced motion keeps every state without movement.
+ *
+ * Engine: motion/react (pops, waves, staggered colour changes, a keyframe
+ * shake and rolling text) with animated icons from lucide-animated (MIT),
+ * vendored in src/icons.
+ */
+import * as React from "react";
+export type OtpChannel = "email" | "phone";
+export interface OtpCodeProps {
+    /** Number of digits, 3 to 8. Default `6`. */
+    length?: number;
+    /** Where the code was sent. Default `"email"`. */
+    channel?: OtpChannel;
+    /** The email address or phone number the code went to. */
+    destination?: string;
+    /** Hide most of the destination, like jo•••@lumen.app. Default true. */
+    maskDestination?: boolean;
+    /** Split the boxes into two groups. Default true (3 and 3 for six digits). */
+    split?: boolean;
+    /** Show dots instead of the digits. Default false. */
+    mask?: boolean;
+    /** Seconds before the code can be sent again. Default `30`. */
+    resendAfter?: number;
+    /**
+     * Checks a complete code. Return true when it is right. Default: a short
+     * wait, then every code passes (a demo).
+     */
+    verify?: (code: string) => boolean | Promise<boolean>;
+    /** Called once a code passes. */
+    onVerified?: (code: string) => void;
+    /** Called when the person asks for a new code. */
+    onResend?: () => void | Promise<void>;
+    /** Called by the confirmation's main button. */
+    onContinue?: () => void;
+    /** Label of the confirmation's main button. Default `"Continue"`. */
+    continueLabel?: string;
+    /** Called when the confirmation's Remember this device switch changes. */
+    onRememberDevice?: (remember: boolean) => void;
+    /** Focus the boxes when the card scrolls into view. Default false; turn it on for a page that is only this step. */
+    autoFocus?: boolean;
+    className?: string;
+}
+export declare const OtpCode: React.ForwardRefExoticComponent<OtpCodeProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { ParticleCard, type ParticleCardProps, type ParticleLook } from "./particle-card";

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

@@ -0,0 +1,57 @@
+/**
+ * ParticleCard
+ *
+ * Trigger: hover (and in view). A product feature card whose hero visual is
+ * made of particles: any SVG is sampled into a grid, and each cell is drawn as
+ * a mono glyph, a solid block or a thin scan dash. Rings spread out from the
+ * centre like a droplet on water and morph every region between those three
+ * looks while the shape turns. On first view the particles fly in and assemble.
+ * Move the cursor through it and the particles part like water, opening a clear
+ * pool with a dense, softly rippling rim that flows after you; click to drop a
+ * ripple that spreads outward. Reach sets the size of the pool and force how
+ * strongly it parts, and a film grain can be dialed over the card. Pass your
+ * own SVG (any filled or stroked shape) to make the pattern. The artwork is
+ * decorative; the title, line and button stay real content. Reduced
+ * motion draws a still, assembled frame.
+ *
+ * Engine: motion/react (useAnimationFrame runs the particle springs and wave;
+ * everything is drawn to one canvas, so thousands of cells stay smooth).
+ */
+import * as React from "react";
+export type ParticleLook = "mixed" | "glyph" | "block" | "scan";
+export interface ParticleCardProps {
+    /** SVG markup for the artwork. Its filled and stroked areas become particles. Default a radiating starburst mark. */
+    svg?: string;
+    /** How cells are drawn: all three looks morphing (`"mixed"`), or one look only. Default `"mixed"`. */
+    look?: ParticleLook;
+    /** Card color. Default white. */
+    background?: string;
+    /** Particle color. Only the artwork uses it. Default ink. */
+    color?: string;
+    /** Title, line and button color. Default ink. */
+    textColor?: string;
+    /** Grid cell size, px. Smaller is finer. Default `6`. */
+    cell?: number;
+    /** How fast the shape turns, turns per minute. `0` holds it still. Default `1`. */
+    spin?: number;
+    /** How strongly the cursor parts the particles, 0 to 3. Above 1 the pool opens wider and the rim is pushed out harder. Default `0.75`. */
+    force?: number;
+    /** Radius of the pool the cursor opens, px. Default `130`. */
+    reach?: number;
+    /** Film grain over the card, 0 (none) to 1 (heavy). Default `0`. */
+    grain?: number;
+    /** Characters for the glyph look, densest first. Default `"01/>."`. */
+    chars?: string;
+    /** Feature title. */
+    title?: string;
+    /** One short line about the feature. */
+    description?: string;
+    /** Button label. Default `"Learn more"`. */
+    cta?: string;
+    /** Where the button goes. Without it the button calls `onOpen`. */
+    href?: string;
+    /** Called by the button when there is no `href`. */
+    onOpen?: () => void;
+    className?: string;
+}
+export declare const ParticleCard: React.ForwardRefExoticComponent<ParticleCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/payment-form/index.d.ts

@@ -0,0 +1 @@
+export { PaymentForm, type PaymentFormProps, type PaymentDetails, } from "./payment-form";