motion-brew 0.0.0-stage → 0.1.1

package/dist/components/growth-stream/growth-stream.d.ts

@@ -0,0 +1,47 @@
+/**
+ * GrowthStream
+ *
+ * Trigger: in view, then hover. A total built up over time, drawn as nested
+ * bands that step wider before each checkpoint. When the card scrolls into view
+ * the stream reveals left to right while the headline counts up on odometer
+ * wheels, both from one motion value, and each checkpoint pill pops in exactly
+ * as the reveal reaches it. Hovering or focusing a checkpoint rolls the headline
+ * to the running total there, swaps the caption and hides the other pills.
+ * Reduced motion shows the final state at once.
+ *
+ * Engine: motion/react (one motion value drives the clip-path reveal, the count
+ * and the pill timing; odometer wheels; AnimatePresence for pills and captions).
+ */
+import * as React from "react";
+export interface StreamCheckpoint {
+    /** Name shown in the caption on hover, e.g. "Week 2". */
+    label: string;
+    /** Running total at this checkpoint. */
+    value: number;
+}
+export interface GrowthStreamProps {
+    /** Running totals, left to right. The last one is the headline. Default three weeks. */
+    checkpoints?: StreamCheckpoint[];
+    /** Total for the previous period, for the change badge and caption. Default `31350`. */
+    previous?: number;
+    /** Small label above the number. Default `"Income"`. */
+    title?: React.ReactNode;
+    /** Name of the previous period in the caption. Default `"last month"`. */
+    previousLabel?: string;
+    /** Name of the whole period in the hover caption. Default `"the month"`. */
+    periodLabel?: string;
+    /** Band color. Default `"#8b5cf6"`. */
+    color?: string;
+    /** Currency for the amounts (ISO code). Default `"USD"`. */
+    currency?: string;
+    /** Locale for number formatting. Default `"en-US"`. */
+    locale?: string;
+    /** Length of the reveal and count, in seconds. Default `1.6`. */
+    duration?: number;
+    /** Called when the round header button is pressed. Leave out to hide it. */
+    onAction?: () => void;
+    /** Accessible label for the round header button. Default `"View report"`. */
+    actionLabel?: string;
+    className?: string;
+}
+export declare const GrowthStream: React.ForwardRefExoticComponent<GrowthStreamProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/growth-stream/index.d.ts

@@ -0,0 +1 @@
+export { GrowthStream, type GrowthStreamProps, type StreamCheckpoint } from "./growth-stream";

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

@@ -0,0 +1,22 @@
+/**
+ * HighlightText
+ *
+ * Trigger: in view. A marker sweeps behind chosen phrases one after another as
+ * the paragraph scrolls into view, with a slight hand-held skew. The text stays
+ * plain and readable. Reduced motion shows the highlights already drawn.
+ *
+ * Engine: motion/react (useInView plus a staggered scaleX sweep behind each phrase).
+ */
+import * as React from "react";
+export interface HighlightTextProps {
+    /** The paragraph. Default a short line about motion. */
+    text?: string;
+    /** Phrases to highlight, in reading order. Each must appear in `text`. */
+    highlights?: string[];
+    /** Marker color. Default a soft yellow. */
+    color?: string;
+    /** Seconds each sweep takes. Default `0.6`. */
+    duration?: number;
+    className?: string;
+}
+export declare const HighlightText: React.ForwardRefExoticComponent<HighlightTextProps & React.RefAttributes<HTMLParagraphElement>>;

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

@@ -0,0 +1 @@
+export { HighlightText, type HighlightTextProps } from "./highlight-text";

package/dist/components/hold-to-confirm/hold-to-confirm.d.ts

@@ -0,0 +1,32 @@
+/**
+ * HoldToConfirm
+ *
+ * Trigger: press and hold. Holding the button (pointer, or Space / Enter)
+ * fills it left to right. Let go early and the fill springs back. Hold to the
+ * end and the label lifts away while a check draws itself and the confirmed
+ * label rises in letter by letter, at the same button size. `onConfirm` fires,
+ * then it resets.
+ * Built for destructive or deliberate actions where a plain click is too easy.
+ *
+ * Engine: motion/react (`animate` on a motion value, pathLength for the check,
+ * AnimatePresence for the label swap). Transform and opacity only.
+ */
+import * as React from "react";
+import { type HTMLMotionProps } from "motion/react";
+export interface HoldToConfirmProps extends Omit<HTMLMotionProps<"button">, "children" | "onPointerDown" | "onPointerUp"> {
+    /** Label shown before and during the hold. Default `"Hold to delete"`. */
+    children?: React.ReactNode;
+    /** Icon before the label. Default a trash icon. Pass `null` for none. */
+    icon?: React.ReactNode;
+    /** Label shown after the hold completes. Default `"Deleted"`. */
+    confirmedLabel?: React.ReactNode;
+    /** How long the hold takes, in ms. Default `1200`. */
+    duration?: number;
+    /** How long the confirmed state shows before the button resets, in ms. Default `1600`. */
+    resetAfter?: number;
+    /** Called once when the hold completes. */
+    onConfirm?: () => void;
+    /** Fill color class. Default near-black (near-white in dark mode). */
+    fillClassName?: string;
+}
+export declare const HoldToConfirm: React.ForwardRefExoticComponent<Omit<HoldToConfirmProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/hold-to-confirm/index.d.ts

@@ -0,0 +1 @@
+export { HoldToConfirm, type HoldToConfirmProps } from "./hold-to-confirm";

package/dist/components/infinite-gallery/index.d.ts

@@ -0,0 +1 @@
+export { InfiniteGallery, type InfiniteGalleryItem, type InfiniteGalleryProps } from "./infinite-gallery";

package/dist/components/infinite-gallery/infinite-gallery.d.ts

@@ -0,0 +1,73 @@
+/**
+ * InfiniteGallery
+ *
+ * Trigger: drag (plus wheel and touch). An endless wall of work that you can
+ * move in any direction and never reach the edge of: cards wrap around
+ * seamlessly, so there is no visible reset. Drag to pan with momentum, scroll
+ * the wheel or trackpad to glide, or leave it alone and it drifts slowly.
+ * Cards shrink a touch while the wall moves fast, cards near the edges sit
+ * slightly smaller than the center for depth, and each image shifts inside its
+ * frame for parallax. While you drag or flick, the cards stretch like rubber
+ * along the direction of travel and smear with a matching motion blur, then
+ * snap back with a little overshoot when the wall stops. Hovering a card breaks its image into big pixels that
+ * resolve back to sharp in a few quick steps, zooms it in and slides up a title
+ * pill on that card only. Cards can be images or muted looping videos, with alt text and links.
+ * On first view the wall blooms in from the center outward: each card rises,
+ * scales up and fades in while its image resolves out of pixels.
+ * Reduced motion turns off drift, momentum and the depth effects.
+ *
+ * Engine: motion/react (useAnimationFrame runs the camera; every card's
+ * transform is written straight to the DOM, so panning never re-renders React).
+ */
+import * as React from "react";
+export interface InfiniteGalleryItem {
+    /** Image URL (also the poster for a video). */
+    src: string;
+    /** Optional video URL; plays muted and looped. */
+    video?: string;
+    title: string;
+    /** Alt text. Default the title. */
+    alt?: string;
+    /** Where the card goes when clicked. */
+    href?: string;
+}
+export interface InfiniteGalleryProps {
+    /** Cards to tile endlessly. Default a set of sample photos. */
+    items?: InfiniteGalleryItem[];
+    /** Card width, px. Default `220`. */
+    cardWidth?: number;
+    /** Card height, px. Default `280`. */
+    cardHeight?: number;
+    /** Space between cards, px. Default `20`. */
+    gap?: number;
+    /** Offset every other column for a staggered wall. Default `true`. */
+    stagger?: boolean;
+    /** Idle drift speed, px/s. `0` stops it. Default `24`. */
+    drift?: number;
+    /** How far momentum carries a flick, 0 to 1. Default `0.6`. */
+    momentum?: number;
+    /** Cards near the edges sit smaller than the center, 0 to 1. Default `0.35`. */
+    depth?: number;
+    /** Images shift inside their frames as they move, 0 to 1. Default `0.5`. */
+    parallax?: number;
+    /** The mouse wheel and trackpad pan the gallery while the pointer is over it. Default `true`. */
+    wheel?: boolean;
+    /** Rubbery stretch along the direction of travel while the wall moves, 0 to 1. Default `0.6`. */
+    stretch?: number;
+    /** Strongest directional motion blur while the wall moves, px. `0` turns it off. Default `6`. */
+    blur?: number;
+    /** Bloom the cards in from the center the first time the gallery scrolls into view. Default `true`. */
+    intro?: boolean;
+    /** Hovering a card pixelates its image, then resolves it back to sharp. Default `true`. */
+    pixelate?: boolean;
+    /** Starting pixel size for the hover resolve, px. Default `12`. */
+    pixelSize?: number;
+    /** Show the title pill on hover. Default `true`. */
+    showTitles?: boolean;
+    /** Open links in a new tab. Default `false`. */
+    newTab?: boolean;
+    /** Accessible name. Default `"Project gallery"`. */
+    label?: string;
+    className?: string;
+}
+export declare const InfiniteGallery: React.ForwardRefExoticComponent<InfiniteGalleryProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/integration-hub/index.d.ts

@@ -0,0 +1 @@
+export { IntegrationHub, type IntegrationHubProps, type HubApp, } from "./integration-hub";

package/dist/components/integration-hub/integration-hub.d.ts

@@ -0,0 +1,40 @@
+/**
+ * IntegrationHub
+ *
+ * Trigger: hover (plus in view). A ring of app tiles wired into one hub in the
+ * middle. When it scrolls into view the hub springs in out of a blur and
+ * gives off a pulse, two faint rings open around it, then the curved wires
+ * grow out from it one by one, clockwise, and each tile springs in from the
+ * hub's side just as its wire reaches it. Then dots (one by default, or
+ * packets with a fading trail) flow along every wire into the hub, which
+ * pulses softly as they land. Hovering a tile or its wire (or focusing a
+ * tile) lifts the tile, turns its wire solid ink, speeds up and enlarges its
+ * dots, dims the rest and names the app in a pill under the hub. Reduced
+ * motion skips the entrance and keeps the dots still.
+ *
+ * Engine: motion/react (springs for the hub and tiles, pathLength for the
+ * wires) with one requestAnimationFrame loop that moves the packets along the
+ * SVG paths and pauses off screen.
+ */
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+export interface HubApp {
+    /** App name, shown on hover and read to screen readers. */
+    label: string;
+    /** Icon inside the tile: a lucide icon or any node, like an `<img>` logo. */
+    icon: LucideIcon | React.ReactNode;
+}
+export interface IntegrationHubProps {
+    /** Apps around the ring, clockwise from the top. Default fourteen. */
+    apps?: HubApp[];
+    /** What sits in the hub. Default a small orbit mark. */
+    hub?: React.ReactNode;
+    /** Name of the hub, read to screen readers. Default `"Your workspace"`. */
+    label?: string;
+    /** Packet speed; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    /** Dots in each packet, head included; `1` is a single dot. Default `1`. */
+    trail?: number;
+    className?: string;
+}
+export declare const IntegrationHub: React.ForwardRefExoticComponent<IntegrationHubProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { LiquidCard, LiquidCarousel, type LiquidCardProps, type LiquidCarouselProps, type LiquidIcon, } from "./liquid-card";

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

@@ -0,0 +1,66 @@
+/**
+ * LiquidCard
+ *
+ * Trigger: drag (plus hover, keys and in view). A tall card with a huge icon
+ * bleeding off its right edge, used as a glass container: the empty part is a
+ * soft tint and a coloured liquid fills it to the value, glowing. When the
+ * card scrolls into view the liquid pours in from empty and settles with a
+ * little spring while the number counts up. Its surface rolls with two offset
+ * waves and bubbles rise through it. Moving the pointer quickly sloshes the
+ * liquid, tilting its surface against the motion before it wobbles level
+ * again. Drag up or down on the icon (or use the arrow keys) to set the level;
+ * the number follows. A blurred copy of the icon glows behind it and a faint
+ * glow rises from the bottom edge, softer on the white card. On hover a soft glow in the liquid's colour follows the
+ * pointer and a thin line of the colour runs round the outline, all inside
+ * the card. Four icons ship: a bolt, a
+ * cloud, a shield and a drop, and LiquidCarousel shows them one at a time.
+ * Reduced motion shows the level still, with no waves or bubbles.
+ *
+ * Engine: gsap + @gsap/react (an elastic pour, endless wave tweens, bubble
+ * timelines, a counting tween, svgOrigin rotation for the slosh, quickTo for
+ * dragging the level), scoped with useGSAP; motion/react springs for the
+ * carousel slide.
+ */
+import * as React from "react";
+export type LiquidIcon = "bolt" | "cloud" | "shield" | "drop";
+export interface LiquidCardProps {
+    /** Which icon holds the liquid. Default `"bolt"`. */
+    icon?: LiquidIcon;
+    /** Fill level, 0 to 100. Default per icon. */
+    value?: number;
+    /** Small label at the top. Default per icon. */
+    label?: string;
+    /** Word under the number. Default per icon. */
+    caption?: string;
+    /** Two line message at the bottom. Default per icon. */
+    message?: [string, string];
+    /** Liquid colour. Default per icon. */
+    color?: string;
+    /** Light (white card) or dark. Default `"light"`. */
+    theme?: "light" | "dark";
+    /** Let people drag the level. Default `true`. */
+    interactive?: boolean;
+    onChange?: (value: number) => void;
+    className?: string;
+}
+export declare const LiquidCard: React.ForwardRefExoticComponent<LiquidCardProps & React.RefAttributes<HTMLDivElement>>;
+export interface LiquidCarouselProps {
+    /** The cards, in order. Default one of each icon. */
+    cards?: LiquidCardProps[];
+    /** Theme for every card. Default `"light"`. */
+    theme?: "light" | "dark";
+    /** Card shown, when you control it. */
+    index?: number;
+    /** Card shown first, when it keeps its own. Default `0`. */
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    className?: string;
+}
+/**
+ * A carousel of LiquidCards laid out side by side in one row. Drag or swipe
+ * the row left and right (it carries on a little and eases to a stop, with a
+ * soft give at the ends), or use the Left and Right keys to move one card at
+ * a time. The row is not clipped, so the cards run on past its edges. Dragging inside a card's icon still sets
+ * its level rather than moving the row.
+ */
+export declare const LiquidCarousel: React.ForwardRefExoticComponent<LiquidCarouselProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { LiquidMetalCard, type LiquidMetalCardProps, } from "./liquid-metal-card";

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

@@ -0,0 +1,45 @@
+/**
+ * LiquidMetalCard
+ *
+ * Trigger: hover (or press). A white image card that melts into a second
+ * picture under a flood of black liquid metal. The moment the pointer comes
+ * onto it, the metal pours in from the corner nearest the pointer: rivulets
+ * run ahead toward the middle, each led by a heavy bead riding its tip, then
+ * the pool surges after them and slows as it thickens, its front bulging
+ * unevenly. It is lit like polished black chrome, shaded round its edges
+ * with a hot highlight on top and a cool rim light below, and while it moves
+ * its surface ripples and the reflections slide across it. A beat behind the
+ * metal front the second picture surfaces from inside it, settling in from a
+ * slight zoom, so the change always arrives through the metal. Leaving drains
+ * it back into the same corner: the picture sinks, the rivulets pull in, then
+ * the pool. A press or tap pours from the nearest corner too, and Enter and
+ * Space from the bottom right. The title under the image rolls to the second
+ * picture's name while it shows. `speed` runs the pour and the drain faster
+ * or slower. Reduced motion swaps the metal for a crossfade.
+ *
+ * Engine: gsap + @gsap/react. SVG circles and stroked limb paths filled with
+ * a reflection gradient run through a filter chain (gentle turbulence for a
+ * living edge, blur and an alpha threshold to melt them together, then
+ * diffuse and specular lighting on the alpha for the chrome); a second,
+ * lagging shape masks the revealed picture. Timelines and the turning
+ * reflections are scoped with useGSAP, and motion/react rolls the title.
+ */
+import * as React from "react";
+export interface LiquidMetalCardProps {
+    /** The picture on show. */
+    src?: string;
+    /** The picture the liquid reveals. */
+    revealSrc?: string;
+    /** Title for the first picture. Default `"Daylight"`. */
+    title?: string;
+    /** Title while the second picture shows. Default `"Golden hour"`. */
+    revealTitle?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** Limbs that race out ahead of the metal. Default `9`. */
+    tendrils?: number;
+    /** Speed of the pour and the drain. `1` is the slow, heavy pour; higher is faster. Default `2`. */
+    speed?: number;
+    className?: string;
+}
+export declare const LiquidMetalCard: React.ForwardRefExoticComponent<LiquidMetalCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { LiquidTabs, type LiquidTabsProps, type LiquidTab } from "./liquid-tabs";

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";