motion-brew 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,62 @@
+/**
+ * SearchModal
+ *
+ * Trigger: type and press (plus keys and in view). A search field with a
+ * card that drops down once it is used. The empty field rolls through
+ * example searches, and Tab takes the one showing. Across the top of the
+ * card a segmented scope control (All, Products, Shops and so on) slides a
+ * white pill to the chosen scope, and while you type each scope shows how
+ * many matches it holds. With nothing typed the card offers Jump back in, a
+ * grid of soft tinted cards for recent things, and Shortcuts, small pills
+ * whose keys slide out on hover. As you type, the best match rises in as a
+ * featured Top result card and the rest follow as a quiet list, each tagged
+ * with its group and with the matched letters marked by a soft highlight
+ * that sweeps in. The active item (pointer or arrow keys) lifts or gains a
+ * soft pill and shows an Open hint; Enter or a press opens it.
+ * The card's height glides to fit, the search icon plays while you type, and
+ * a slim line at the foot counts the results. Set `modal` to open it over the
+ * page with Cmd or Ctrl K. Reduced motion keeps every state without movement.
+ *
+ * Engine: motion/react (a layoutId scope pill and row highlight, rolling
+ * counts, a measured height glide, staggered entrances) with animated icons
+ * from lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export interface SearchModalItem {
+    id: string;
+    title: string;
+    /** Which group (scope) it belongs to. */
+    group: string;
+    /** A short figure, like "1,210 sales". */
+    meta?: string;
+    /** Background of its tile and card. */
+    tint?: string;
+}
+export interface SearchModalAction {
+    id: string;
+    label: string;
+    icon: "chart" | "grid" | "compass" | "trend" | "bookmark";
+    /** The letter after ⌘, like "R". */
+    key?: string;
+}
+export interface SearchModalProps {
+    items?: SearchModalItem[];
+    /** The scopes, after All. */
+    groups?: string[];
+    /** The scope at first. Default `"All"`. */
+    defaultScope?: string;
+    /** Ids offered under Jump back in before anything is typed, up to four. */
+    recent?: string[];
+    actions?: SearchModalAction[];
+    /** Shown when there are no `examples`. */
+    placeholder?: string;
+    /** Example searches the empty field rolls through, as Search for "kettle". Tab fills the one showing. */
+    examples?: string[];
+    /** Open over the page with a backdrop, toggled with Cmd or Ctrl K. Default `false` (inline). */
+    modal?: boolean;
+    /** With `modal`, whether it starts open. */
+    defaultOpen?: boolean;
+    onSelect?: (item: SearchModalItem | SearchModalAction) => void;
+    className?: string;
+}
+export declare const SearchModal: React.ForwardRefExoticComponent<SearchModalProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { ShimmerText, type ShimmerTextProps } from "./shimmer-text";

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

@@ -0,0 +1,22 @@
+/**
+ * ShimmerText
+ *
+ * Trigger: timeline. A bright band sweeps across muted text on a loop, the
+ * "thinking" sheen used for AI and loading states. The text stays real. Reduced
+ * motion shows it plain.
+ *
+ * Engine: motion/react (a looping background-position sweep on clipped text).
+ */
+import * as React from "react";
+export interface ShimmerTextProps {
+    /** The text. Default `"Thinking…"`. */
+    text?: string;
+    /** Element to render. Default `"span"`. */
+    as?: "p" | "span" | "h3";
+    /** Seconds per sweep. Default `1.8`. */
+    duration?: number;
+    /** Width of the bright band, as a percent of the text. Default `14`. */
+    spread?: number;
+    className?: string;
+}
+export declare const ShimmerText: React.ForwardRefExoticComponent<ShimmerTextProps & React.RefAttributes<HTMLElement>>;

package/dist/components/sidebar-nav/index.d.ts

@@ -0,0 +1 @@
+export { SidebarNav, type SidebarNavProps, type SidebarSection, type SidebarItem, type SidebarChild, type SidebarIcon, } from "./sidebar-nav";

package/dist/components/sidebar-nav/sidebar-nav.d.ts

@@ -0,0 +1,71 @@
+/**
+ * SidebarNav
+ *
+ * Trigger: press and hover (plus keys and in view). A white app sidebar that
+ * folds between a full rail of icons and labels and a slim rail of icons only.
+ * The card glides to its new width while the icons hold still on their own
+ * line, so nothing jumps: labels blur out on the way in and come back one
+ * after another on the way out, section titles shrink to short hairlines,
+ * count badges become dots on their icons, and a single dark tooltip slides
+ * from row to row under the pointer while the rail is slim. A soft gray pill
+ * glides to the chosen page and a lighter one follows the pointer; every
+ * icon plays its own animation while its row is hovered. Groups open into a
+ * threaded list where a short ink tick slides to the chosen child. The fold
+ * button glides from the end of the brand row to just under the logo, so it
+ * stays in reach on the slim rail, and the logo's pinwheel turns when pointed
+ * at. The arrow keys move through the rows.
+ * Reduced motion keeps every state without movement.
+ *
+ * Engine: motion/react (width tween, staggered label fades, layoutId pills,
+ * a spring tooltip, AnimatePresence for the group) with animated
+ * icons from lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export type SidebarIcon = "home" | "search" | "messages" | "projects" | "analytics" | "calendar" | "agents" | "workflows" | "integrations" | "apps" | "explore" | "team" | "bell";
+export interface SidebarChild {
+    id: string;
+    label: string;
+    badge?: number;
+}
+export interface SidebarItem {
+    id: string;
+    label: string;
+    /** One of the built in animated icons. */
+    icon: SidebarIcon;
+    /** A count on the right; a dot on the icon while the rail is slim. */
+    badge?: number;
+    /** A small green tag, like "New". */
+    tag?: string;
+    /** Pages under this one, shown in a threaded list that opens and closes. */
+    children?: SidebarChild[];
+}
+export interface SidebarSection {
+    /** A small title over the rows; a short hairline while the rail is slim. */
+    label?: string;
+    items: SidebarItem[];
+}
+export interface SidebarNavProps {
+    /** The wordmark beside the logo. */
+    brand?: string;
+    /** The logo mark, about 28px. Default a pinwheel. It stays on the slim rail. */
+    logo?: React.ReactNode;
+    sections?: SidebarSection[];
+    /** The chosen page id (controlled). */
+    value?: string;
+    defaultValue?: string;
+    onNavigate?: (id: string) => void;
+    /** Groups open at the start, by item id. */
+    defaultOpen?: string[];
+    /** Slim rail, icons only (controlled). */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    user?: {
+        name: string;
+        email?: string;
+        avatar?: string;
+    };
+    onSettings?: () => void;
+    className?: string;
+}
+export declare const SidebarNav: React.ForwardRefExoticComponent<SidebarNavProps & React.RefAttributes<HTMLElement>>;

package/dist/components/slide-commit/index.d.ts

@@ -0,0 +1 @@
+export { SlideCommit, type SlideCommitProps } from "./slide-commit";

package/dist/components/slide-commit/slide-commit.d.ts

@@ -0,0 +1,39 @@
+/**
+ * SlideCommit
+ *
+ * Trigger: drag (plus keys). A slide-to-confirm pill for actions worth a
+ * deliberate gesture: paying, sending, deleting. An ink handle sits at the
+ * left with a row of chevrons that march toward the end, and the label in the
+ * track shimmers to show which way to go. Dragging the handle stretches a
+ * fill behind it and fades the label out as it travels; letting go early
+ * springs it back home with a small overshoot. Past the threshold the handle
+ * gives a little pulse to say it will commit, and on release it snaps to the
+ * end and turns into a spinner while "Committing..." rolls in beside it
+ * with a light sweeping through it. Then green floods back
+ * across the track from the handle, the track gives a small settle, the
+ * handle pops white and draws a check as two rings ripple out of it, and the
+ * label rolls in, centred in the space beside the handle. It resets itself
+ * after a moment, or on press. With the keyboard, Enter or Space commits and
+ * the arrow keys nudge the handle. Reduced motion swaps the springs, sweep
+ * and shimmer for plain changes.
+ *
+ * Engine: motion/react (drag on a motion value, springs, AnimatePresence for
+ * the handle's icon and the rolling label).
+ */
+import * as React from "react";
+export interface SlideCommitProps {
+    /** Label in the track. Default `"Slide to commit"`. */
+    label?: string;
+    /** Label while the action runs. Default `"Committing"`. */
+    pendingLabel?: string;
+    /** Label once committed. Default `"Committed"`. */
+    doneLabel?: string;
+    /** Share of the track the handle must pass to commit, 0.5 to 0.95. Default `0.82`. */
+    threshold?: number;
+    /** Called on commit. Return a promise to hold the spinner until it settles; a rejection springs back. */
+    onCommit?: () => void | Promise<unknown>;
+    /** Seconds before it resets on its own. `0` waits for a press. Default `2.4`. */
+    resetAfter?: number;
+    className?: string;
+}
+export declare const SlideCommit: React.ForwardRefExoticComponent<SlideCommitProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { SpatialGallery, type SpatialGalleryProps, type SpatialItem, type SpatialFacing, } from "./spatial-gallery";

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

@@ -0,0 +1,88 @@
+/**
+ * SpatialGallery
+ *
+ * Trigger: scroll, drag and hover (plus a timeline). A WebGL media tunnel
+ * that turns a list of images and videos into an endless space you travel
+ * through. The planes stand on a ring around the view with a hollow core
+ * that keeps the middle clear, and they recycle in both directions, so the
+ * journey never ends. Facing is Front (every plane faces you) or Funnel (the
+ * planes lean in toward the axis, by a blend amount). Spiral mode bends the
+ * ring into a corkscrew that turns as it travels, so scrolling makes the
+ * whole tunnel twist past you. Auto move drifts on its own and stacks with
+ * your input: the wheel (captured, or read from the page's own scrolling so
+ * it can sit in a normal page), dragging (with a threshold so a drag never
+ * fires a link) and the arrow keys. The scene leans with the pointer. A
+ * hovered plane grows a little and names itself in a caption; a hovered video
+ * plays, and only then loads, so many video planes cost one decoder. Rounded
+ * corners, cover cropping and the fade into the distance are all drawn in the
+ * shader. It pauses off screen and in a hidden tab, rebuilds itself after a
+ * lost WebGL context, and under reduced motion it stays put until you move it.
+ * A visually hidden list carries every item's alt text and link for search
+ * engines and screen readers.
+ *
+ * Engine: raw WebGL (one quad, one draw per plane, sorted back to front) on
+ * the GSAP ticker; motion/react for the caption and hint.
+ */
+import * as React from "react";
+export interface SpatialItem {
+    /** Image or video URL. Must allow cross origin use (CORS) to draw in WebGL. */
+    src: string;
+    /** Default `"image"`. */
+    type?: "image" | "video";
+    /** For videos: the still shown until it is hovered. */
+    poster?: string;
+    /** Alt text, shown in the caption and in the hidden list. */
+    alt: string;
+    /** Opens on click (a click, not a drag). */
+    href?: string;
+}
+export type SpatialFacing = "front" | "funnel";
+export interface SpatialGalleryProps {
+    items?: SpatialItem[];
+    /** Planes in the tunnel, 8 to 160. Default `124`. */
+    count?: number;
+    /** Tunnel radius, in scene units. Default `4.1`. */
+    radius?: number;
+    /** Hollow core: how much of the radius stays clear, 0 to 0.95. Default `0.8`. */
+    core?: number;
+    /** Depth between planes. Default `0.2`. */
+    spacing?: number;
+    /** Plane size. Default `0.95`. */
+    size?: number;
+    /** Planes face you, or lean in toward the axis. Default `"funnel"`. */
+    facing?: SpatialFacing;
+    /** How far Funnel leans into the tunnel wall, 0 to 1. Default `0.78`. */
+    funnel?: number;
+    /** Bend the ring into a turning corkscrew. Default `true`. */
+    spiral?: boolean;
+    /** Corkscrew strength, 0 to 1. Default `0.3`. */
+    twist?: number;
+    /** Drift on its own. Default `true`. */
+    autoMove?: boolean;
+    /** Auto move speed; negative goes backward. Default `0.8`. */
+    speed?: number;
+    /** How far the wheel or page scroll carries you. Default `2.1`. */
+    scrollSpeed?: number;
+    /** Scrolling over the gallery travels through it instead of scrolling the page. Default `true`. */
+    captureScroll?: boolean;
+    /** Read the page's own scrolling, so scrolling past it travels too. Default `true`. */
+    followPageScroll?: boolean;
+    /** Drag to travel. Default `true`. */
+    drag?: boolean;
+    /** How much the scene leans with the pointer, 0 to 1. Default `0.5`. */
+    parallax?: number;
+    /** Corner radius as a share of the plane's height, 0 to 0.5. Default `0.22`. */
+    corner?: number;
+    /** Fade out with distance, 0 to 1. The canvas is transparent, so it sits on any page. Default `0.8`. */
+    fog?: number;
+    /** Each plane's own tilt, so the images sit at varied angles, 0 to 1. Default `0`. */
+    roll?: number;
+    /** Name the hovered item in a caption. Default `true`. */
+    caption?: boolean;
+    /** How links open. Default `"_self"`. */
+    linkTarget?: "_self" | "_blank";
+    /** Anything on top, like a heading. */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const SpatialGallery: React.ForwardRefExoticComponent<SpatialGalleryProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spending-meter/index.d.ts

@@ -0,0 +1 @@
+export { SpendingMeter, type SpendingMeterProps } from "./spending-meter";

package/dist/components/spending-meter/spending-meter.d.ts

@@ -0,0 +1,41 @@
+/**
+ * SpendingMeter
+ *
+ * Trigger: in view, then hover. A spending card with a segmented bar. When it
+ * scrolls into view the pills fill one after another while the amount counts
+ * up from zero on odometer wheels with a light motion blur, all from one motion
+ * value. Each pill is an equal slice of the limit: hovering one dims
+ * the rest and rolls the number to what was spent in that slice, like the
+ * GoalGauge segments; arrow keys step through them and leaving rolls it back. Reaching the limit swaps the caption.
+ * Reduced motion shows the final state at once.
+ *
+ * Engine: motion/react (animate on a motion value, translate-only pill fills,
+ * odometer wheels, AnimatePresence for the caption).
+ */
+import * as React from "react";
+export interface SpendingMeterProps {
+    /** Amount spent so far. Default `1010`. */
+    value?: number;
+    /** Spending limit. Default `1800`. */
+    limit?: number;
+    /** Number of pills in the bar. Default `6`. */
+    pills?: number;
+    /** Fill color. Default `"#ff8f0f"`. */
+    color?: string;
+    /** Card title. Default `"Spending limit"`. */
+    title?: React.ReactNode;
+    /** Line under the title. Default `"1 to 12 Apr, 2026"`. */
+    subtitle?: React.ReactNode;
+    /** Currency for the amounts (ISO code). Default `"USD"`. */
+    currency?: string;
+    /** Locale for number formatting. Default `"en-US"`. */
+    locale?: string;
+    /** Length of the fill, in seconds. Default `1.4`. */
+    duration?: number;
+    /** Label for the header button. Pass `null` to hide it. Default `"View report"`. */
+    actionLabel?: React.ReactNode;
+    /** Called when the header button is pressed. */
+    onAction?: () => void;
+    className?: string;
+}
+export declare const SpendingMeter: React.ForwardRefExoticComponent<SpendingMeterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tab-bar/index.d.ts

@@ -0,0 +1 @@
+export { TabBar, type TabBarProps, type TabBarVariant, type TabIcon, type TabItem, } from "./tab-bar";

package/dist/components/tab-bar/tab-bar.d.ts

@@ -0,0 +1,44 @@
+/**
+ * TabBar
+ *
+ * Trigger: press (plus keys and in view). A white mobile bottom navigation in
+ * three styles. Pill: the active tab grows into an ink pill that shows its
+ * label while the others stay icons, and the pill glides between tabs as the
+ * row reflows. Labels: icons over labels; the active one turns to ink, sits
+ * on a soft disc and has a small dot gliding beneath it. Action: four tabs
+ * around a raised ink button in the middle that springs and turns its plus a
+ * quarter when pressed. In every style a tap plays the tab's animated icon,
+ * dips the tab, sends a soft ripple out from under it, and badges pop in
+ * and out. When it scrolls into view the bar rises in and its tabs follow.
+ * Left and right arrows move between tabs. Reduced motion keeps every state
+ * without movement.
+ *
+ * Engine: motion/react (layoutId pill, dot and disc, a layout reflow, spring
+ * presses and ripples) with animated icons from lucide-animated (MIT),
+ * vendored in src/icons.
+ */
+import * as React from "react";
+export type TabIcon = "home" | "search" | "analytics" | "history" | "profile" | "bell" | "chat" | "explore" | "settings";
+export interface TabItem {
+    id: string;
+    label: string;
+    icon: TabIcon;
+    /** A small count on the icon. */
+    badge?: number;
+}
+export type TabBarVariant = "pill" | "labels" | "action";
+export interface TabBarProps {
+    /** Four or five tabs work best (four for the action style). */
+    tabs?: TabItem[];
+    /** Default `"pill"`. */
+    variant?: TabBarVariant;
+    /** The selected tab, when you control it. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (id: string) => void;
+    /** The middle button in the action style. */
+    actionLabel?: string;
+    onAction?: () => void;
+    className?: string;
+}
+export declare const TabBar: React.ForwardRefExoticComponent<TabBarProps & React.RefAttributes<HTMLElement>>;

package/dist/components/team-member-card/index.d.ts

@@ -0,0 +1 @@
+export { TeamMemberCard, type TeamMemberCardProps, type SocialLink, type SocialKind, } from "./team-member-card";

package/dist/components/team-member-card/team-member-card.d.ts

@@ -0,0 +1,66 @@
+/**
+ * TeamMemberCard
+ *
+ * Trigger: hover and press (plus in view). A white card for a person on the
+ * team. When it scrolls into view the card rises in, the photo sharpens out of
+ * a soft blur and settles from a slight zoom, and the name, role and details
+ * follow. White dithered pixels burn up from the bottom of the photo like
+ * fire, rising in flickering tongues that thin into finer specks, and die
+ * down to a softer glow while the card is hovered so the face shows more. At rest it shows the photo, name, role
+ * and Connect; hovering the card
+ * (or moving keyboard focus into it, or tapping it on touch) slides the
+ * details out from under the header on a soft spring, the location with live
+ * local time, the bio and the social links rising in one after another out of
+ * a blur, and folds them away again on leave. Over the photo it tilts toward
+ * the pointer with a soft shine and a little zoom. Connect rolls to Connected
+ * as its icon swaps. The social links are round buttons whose animated icons
+ * play on hover while a small ink label pops above them. Reduced motion keeps
+ * the states without movement.
+ *
+ * Engine: motion/react (staggered variants for the entrance, springs for the
+ * tilt and shine, AnimatePresence for the labels and the button roll) with
+ * animated icons from lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export type SocialKind = "x" | "linkedin" | "github" | "dribbble" | "email";
+export interface SocialLink {
+    kind: SocialKind;
+    href: string;
+    /** Label shown on hover and read to screen readers. Defaults to the network name. */
+    label?: string;
+}
+export interface TeamMemberCardProps {
+    name?: string;
+    role?: string;
+    photo?: string;
+    /** City shown with the local time. */
+    location?: string;
+    /** IANA time zone for the live local time, like `"Europe/Madrid"`. */
+    timeZone?: string;
+    /** One or two lines about them. */
+    bio?: string;
+    socials?: SocialLink[];
+    /** Dithered pixels burning up the photo like fire, dying down on hover. Default `true`. */
+    pixels?: boolean;
+    /** Colour of the pixels over the photo. Default `"#ffffff"`. */
+    pixelColor?: string;
+    /** Pixel grid cell in px. Default `6`. */
+    pixelSize?: number;
+    /** Pixel shape. Default `"square"`. */
+    pixelShape?: "square" | "circle" | "diamond";
+    /** Drift and shimmer speed; `2` is twice as fast. Default `1`. */
+    pixelSpeed?: number;
+    /** How high the flames reach up the photo. Default `1`. */
+    pixelArea?: number;
+    /** How heavy the flames are: higher fills them with bigger, bolder dots. Default `0.85`. */
+    pixelDensity?: number;
+    /** Overall strength of the pixels, 0 to 1. Default `1`. */
+    pixelOpacity?: number;
+    /** How much of the field stays while the card is hovered, 0 to 1. Default `0.6`. */
+    pixelHover?: number;
+    /** Start as connected. Default `false`. */
+    defaultConnected?: boolean;
+    onConnect?: (connected: boolean) => void;
+    className?: string;
+}
+export declare const TeamMemberCard: React.ForwardRefExoticComponent<TeamMemberCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { TeamMorph, type TeamMorphProps, type TeamMember } from "./team-morph";

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

@@ -0,0 +1,38 @@
+/**
+ * TeamMorph
+ *
+ * Trigger: press, then hover. A presence pill that morphs into a team card. At
+ * rest it shows an overlapping stack of avatars, a "+n" chip and who is online;
+ * hovering lifts the pill, ripples the stack and sends the chevron through its circle. Pressing morphs the pill itself into a card: the
+ * shell flows from pill to rounded card while every avatar flies from its spot
+ * in the stack to its row in a calm two-group list (Online, Away), then names
+ * and roles cascade in. Close, Escape or a click outside morphs it back. Focus moves to
+ * the close button on open and returns to the pill on close.
+ *
+ * Engine: motion/react (one shell that stays mounted and resizes with a
+ * layout animation while its contents swap, shared layoutId avatars scoped by
+ * LayoutGroup, and staggered variants for the rows).
+ */
+import * as React from "react";
+export interface TeamMember {
+    name: string;
+    role: string;
+    /** Avatar color. Defaults through a soft built-in palette. */
+    color?: string;
+    /** Minutes since last seen; leave out when online. */
+    awayFor?: number;
+}
+export interface TeamMorphProps {
+    /** Team name. Default `"Design team"`. */
+    team?: string;
+    /** People, first ones are shown in the collapsed stack. Default five teammates. */
+    members?: TeamMember[];
+    /** Avatars shown in the collapsed stack. Default `3`. */
+    stack?: number;
+    /** Start expanded. Default `false`. */
+    defaultOpen?: boolean;
+    /** Called by the Invite button. Leave out to hide it. */
+    onInvite?: () => void;
+    className?: string;
+}
+export declare const TeamMorph: React.ForwardRefExoticComponent<TeamMorphProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { TiltCard, type TiltCardProps } from "./tilt-card";

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

@@ -0,0 +1,27 @@
+/**
+ * TiltCard
+ *
+ * Trigger: hover. The card tilts in 3D toward the cursor on a spring, lifts a
+ * touch, and a glare highlight slides across the surface opposite the tilt.
+ * Leaving the card settles it flat. Touch and reduced-motion users get a flat card.
+ *
+ * Engine: motion/react (motion values + springs, no re-renders on move).
+ */
+import * as React from "react";
+import { type HTMLMotionProps, type SpringOptions } from "motion/react";
+export interface TiltCardProps extends Omit<HTMLMotionProps<"div">, "children"> {
+    children?: React.ReactNode;
+    /** Largest tilt on each axis, in degrees. Default `12`. */
+    maxTilt?: number;
+    /** Scale while hovered. Default `1.03`. */
+    hoverScale?: number;
+    /** Show the moving glare highlight. Default `true`. */
+    glare?: boolean;
+    /** Peak glare opacity, 0 to 1. Default `0.35`. */
+    glareOpacity?: number;
+    /** Camera distance for the 3D effect, in px. Lower is more dramatic. Default `800`. */
+    perspective?: number;
+    /** Spring for tilt and settle. Default `{ stiffness: 260, damping: 22, mass: 0.7 }`. */
+    spring?: SpringOptions;
+}
+export declare const TiltCard: React.ForwardRefExoticComponent<Omit<TiltCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { TiltCarousel, type TiltCarouselProps, type TiltCarouselItem, } from "./tilt-carousel";

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

@@ -0,0 +1,43 @@
+/**
+ * TiltCarousel
+ *
+ * Trigger: drag (plus press and keys). A row of photo cards that moves on by
+ * itself: the one in the middle faces you square on and every card beside it
+ * turns away in 3D, shrinking, dimming and softening a little more the further
+ * out it sits. It starts gliding on its own and loops round forever, pausing
+ * while the pointer rests on it. Drag or flick the row and it follows your
+ * hand, then settles on the nearest card with a spring; clicking any card on
+ * the left steps one card left, on the right one card right, and the arrow
+ * keys step through it too. Reduced
+ * motion swaps the springs for plain moves and does not move on by itself.
+ *
+ * Engine: motion/react (one motion value for the position, per-card
+ * transforms derived from it, springs for the settle, a layoutId pill).
+ */
+import * as React from "react";
+export interface TiltCarouselItem {
+    src: string;
+    title: string;
+}
+export interface TiltCarouselProps {
+    /** Cards in the row. Default twelve photos. */
+    items?: TiltCarouselItem[];
+    /** Card width in px. Height follows at 4 by 5. Default `220`. */
+    cardWidth?: number;
+    /** How far the side cards turn away, in degrees. Default `40`. */
+    tilt?: number;
+    /** Perspective of the stage in px; lower is more dramatic. Default `900`. */
+    perspective?: number;
+    /** Size of the cards beside the middle one, 0.5 to 1. Default `0.86`. */
+    inactiveScale?: number;
+    /** How quickly the row glides and settles; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    /** Move on by itself, pausing while the pointer is over it. Default `true`. */
+    autoplay?: boolean;
+    /** Seconds each card stays with autoplay on. Default `3`. */
+    delay?: number;
+    /** Accessible name. Default `"Photo carousel"`. */
+    label?: string;
+    className?: string;
+}
+export declare const TiltCarousel: React.ForwardRefExoticComponent<TiltCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/toast-stack/index.d.ts

@@ -0,0 +1 @@
+export { ToastStack, type ToastStackProps, type ToastStackHandle, type ToastItem, type ToastKind, } from "./toast-stack";

package/dist/components/toast-stack/toast-stack.d.ts

@@ -0,0 +1,57 @@
+/**
+ * ToastStack
+ *
+ * Trigger: drag (plus hover and press). Notifications gather in a neat stack in
+ * the middle of their container instead of a screen corner: the newest sits in
+ * front and up to two older ones peek out behind it, smaller and quieter. A new
+ * toast rises in from below out of a blur and its icon plays (the check draws,
+ * the badge shakes, the bin lid lifts), while the rest step back. Hover or
+ * focus the stack and it fans open into a list, pausing every timer; leave and
+ * it folds back. Swipe a toast left or right and it tilts and fades with your
+ * finger, then flies off past a threshold (or springs back); the close button
+ * or Delete key works too. Toasts with a timer show a thin line that runs down
+ * at their foot. A row of pills below adds sample toasts, and Clear all sweeps
+ * them away one after another. Reduced motion keeps the states without the
+ * movement.
+ *
+ * Engine: motion/react (springs for the stack positions and heights, drag with
+ * transforms for the swipe, AnimatePresence for enter and exit, a motion value
+ * for each timer line).
+ */
+import * as React from "react";
+export type ToastKind = "success" | "warning" | "error" | "info";
+export interface ToastItem {
+    id?: string;
+    kind: ToastKind;
+    title: string;
+    description?: string;
+    /** A button in the toast, such as Undo. The toast closes after it runs. */
+    action?: {
+        label: string;
+        onClick?: () => void;
+    };
+    /** Milliseconds before it leaves on its own; 0 keeps it. Default: the stack's `duration`. */
+    duration?: number;
+}
+export interface ToastStackHandle {
+    /** Add a toast to the front. Returns its id. */
+    push: (toast: ToastItem) => string;
+    dismiss: (id: string) => void;
+    clear: () => void;
+}
+export interface ToastStackProps {
+    /** Toasts shown at the start, oldest first. They stay until dismissed. */
+    initial?: ToastItem[];
+    /** Default time on screen for new toasts, in ms; 0 keeps them. Default `6000`. */
+    duration?: number;
+    /** How many toasts the folded stack shows. Default `3`. */
+    visible?: number;
+    /** Show the row of sample buttons under the stack. Default `true`. */
+    triggers?: boolean;
+    /** Called when a toast leaves, for any reason. */
+    onDismiss?: (toast: ToastItem & {
+        id: string;
+    }) => void;
+    className?: string;
+}
+export declare const ToastStack: React.ForwardRefExoticComponent<ToastStackProps & React.RefAttributes<ToastStackHandle>>;

package/dist/components/usage-ring/index.d.ts

@@ -0,0 +1 @@
+export { UsageRing, type UsageRingProps } from "./usage-ring";