motion-brew 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,40 @@
+/**
+ * UsageRing
+ *
+ * Trigger: in view, then press and hover. A white card for plan usage: a
+ * ring made of short segments around a big percent. When it scrolls into
+ * view the segments light up one after another, clockwise, while the percent
+ * and the caption's amount count up on odometer wheels. The library's
+ * PillTabs under the ring switch the resource (API, Storage, Seats): its white
+ * pill stretches across to the tab, the segments glide to the new share of
+ * the plan and the numbers roll to match. Hovering the ring lifts each lit
+ * segment a hair outward in a wave. Reduced motion shows the final state at
+ * once.
+ *
+ * Engine: motion/react (counting motion values drive the segments and the
+ * odometer numbers, springs for each segment) with PillTabs for the metric
+ * switch.
+ */
+import * as React from "react";
+export interface UsageMetric {
+    label: string;
+    value: number;
+    goal: number;
+    unit: string;
+}
+export interface UsageRingProps {
+    /** Title. Default `"Plan usage"`. */
+    title?: string;
+    /** The resources, one per tab. Default API calls, storage and seats. */
+    metrics?: UsageMetric[];
+    /** Segments around the ring. Default `20`. */
+    segments?: number;
+    /**
+     * Hues the ring walks between on the colour wheel, in degrees, from empty to
+     * the limit. Default `[265, 385]`: indigo through violet and magenta to coral
+     * red (385 is 25 once round the wheel).
+     */
+    hues?: [number, number];
+    className?: string;
+}
+export declare const UsageRing: React.ForwardRefExoticComponent<UsageRingProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { VerifyFlow, type VerifyFlowProps, type VerifyStage } from "./verify-flow";

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

@@ -0,0 +1,49 @@
+/**
+ * VerifyFlow
+ *
+ * Trigger: timeline. A verification card in three stages: connect, check,
+ * verified. A segmented progress bar fills as it goes, with a rolling timer
+ * underneath. First a provider row waits for sign-in; its button shimmers until
+ * pressed. Then the checks run in a soft list: a white highlight slides down to
+ * whichever check is running, each row's status rolls from Queued to Checking to
+ * Passed, and the header icon spins. Finally the header icon turns into a check
+ * with a ring pulse, a green seal spins in with a burst of sparks to show the
+ * account connected, and the Continue button counts down
+ * with a ring that drains inside it. The card's height glides between stages.
+ * Runs as a self-playing demo, or drive it with `stage` and `completed`. Status
+ * changes are announced politely. Reduced motion swaps states without travel.
+ *
+ * Engine: motion/react + gsap (Motion for the height glide, sliding highlight,
+ * bar fills, rolling text and press feedback; GSAP via @gsap/react for the
+ * button shimmer, spinners, check draws, ring pulse and the countdown ring).
+ */
+import * as React from "react";
+export type VerifyStage = "waiting" | "checking" | "done";
+export interface VerifyFlowProps {
+    /** Current stage. Leave unset to run the self-playing demo. */
+    stage?: VerifyStage;
+    /** How many checks have passed (the next one is running). Used with `stage="checking"`. */
+    completed?: number;
+    /** Checks to run. Default three. */
+    checks?: string[];
+    /** Card title. Default `"Verify your account"`. */
+    title?: string;
+    /** Provider shown on the sign-in row. Default `"GitHub"`. */
+    provider?: string;
+    /** Provider icon. Default the GitHub mark. */
+    providerIcon?: React.ReactNode;
+    /** Called when the sign-in button is pressed. */
+    onSignIn?: () => void;
+    /** Where Continue goes, named on the button. Default `"Acme"`. */
+    destination?: string;
+    /** Seconds before `onContinue` fires on its own. Default `5`. */
+    redirectSeconds?: number;
+    /** Called from Continue, or when the countdown runs out. */
+    onContinue?: () => void;
+    /** Demo only: start over after finishing. Default `false`. */
+    loop?: boolean;
+    /** Color for progress and passed checks. Default a calm green. */
+    accent?: string;
+    className?: string;
+}
+export declare const VerifyFlow: React.ForwardRefExoticComponent<VerifyFlowProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { VoicePrompt, type VoicePromptProps, type VoicePromptMode } from "./voice-prompt";

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

@@ -0,0 +1,55 @@
+/**
+ * VoicePrompt
+ *
+ * Trigger: press. A composer for an AI assistant that you can talk to. At rest
+ * a low tide of colour breathes along the bottom of the card. Press the mic and
+ * the card opens up while the tide rises: a soft glow that deepens from a lit
+ * crest to a dark core, with slow noise swirling through it, a thin light
+ * running along the crest and a light film grain. The crest is shaped by your
+ * voice: a wide lobe swells with low tones, twin lobes with the middle and a
+ * fine ripple with the highs. Loud moments overdrive it: rows shear, strips
+ * tear and the colour channels split apart, like a signal pushed too hard.
+ * With microphone access it follows your real voice; without it, a made-up
+ * voice drives it. The words it hears arrive one by one at the top of the
+ * card, each sharpening out of a blur, in a two line teleprompter window:
+ * as you keep talking the text glides up and the oldest line fades away
+ * through the top. A faint shimmer runs round the card's outline. Press the mic again (now a check) to
+ * keep them, ready to send, or the cross to throw them away. A mode picker
+ * opens upward with a sliding highlight, and the send button wakes once there
+ * is text. Reduced motion keeps every state but holds the glow still.
+ *
+ * Engine: GSAP (a ticker feeding the voice into a WebGL fragment shader,
+ * tweens for the listening energy, quick setters for the mic's level ring and
+ * a blur in for each heard word), with motion/react for the height glide and
+ * the menu.
+ */
+import * as React from "react";
+export interface VoicePromptMode {
+    id: string;
+    label: string;
+    /** A short line under the name in the menu. */
+    hint: string;
+}
+export interface VoicePromptProps {
+    /** Placeholder for the empty field. */
+    placeholder?: string;
+    /** Modes in the picker. Default three. */
+    modes?: VoicePromptMode[];
+    /** Four colours of the glow: its deep core, body, lit crest and outer bloom. Default dusk. */
+    colors?: string[];
+    /** Card theme. Default `"light"`. */
+    theme?: "light" | "dark";
+    /** Ask for the microphone so the wave follows a real voice. Default `true`. */
+    microphone?: boolean;
+    /** What the demo "hears", revealed word by word while listening. */
+    script?: string;
+    /** Called on send. */
+    onSubmit?: (prompt: {
+        text: string;
+        mode: string;
+    }) => void;
+    /** Called by the plus button. */
+    onAttach?: () => void;
+    className?: string;
+}
+export declare const VoicePrompt: React.ForwardRefExoticComponent<VoicePromptProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { WalletCard, type WalletCardProps, type WalletCurrency, type WalletAction } from "./wallet-card";

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

@@ -0,0 +1,54 @@
+/**
+ * WalletCard
+ *
+ * Trigger: in view, then press and hover. A balance card with a currency switch
+ * and quick actions. The balance counts up from zero on odometer wheels when the
+ * card comes into view (like the chart cards) while the action circles pop in.
+ * Picking another currency from the pill rolls the balance on odometer
+ * wheels (with a light motion blur) to the converted amount in that currency's
+ * own format. Each icon enters from its action's direction, then plays its
+ * own animation when its circle is hovered (animated icons from
+ * lucide-animated, MIT, in src/icons).
+ * Pressing squashes the circle and ripples a ring. "More features" expands to
+ * reveal more actions in a cascade. Reduced motion keeps every change instant.
+ *
+ * Engine: motion/react (odometer wheels on a motion value, a layoutId highlight
+ * in the currency list, animated icons, AnimatePresence for the list and panel).
+ */
+import * as React from "react";
+export interface WalletCurrency {
+    /** ISO code, e.g. "EUR". */
+    code: string;
+    /** Flag or symbol shown in the pill. */
+    flag: string;
+    /** Full name in the list. */
+    name: string;
+    /** Units of this currency per one unit of the base balance. */
+    rate: number;
+    /** Locale used to format it. Default `"en-US"`. */
+    locale?: string;
+    /** Decimal places to show. Default the currency's usual digits. */
+    digits?: number;
+}
+export interface WalletAction {
+    label: string;
+    /** Icon from the built-in set. */
+    icon: "transfer" | "topup" | "exchange" | "paylater" | "bills" | "savings" | "mobile" | "invest";
+    onSelect?: () => void;
+}
+export interface WalletCardProps {
+    /** Balance in the first currency's units. Default `3840.52`. */
+    balance?: number;
+    /** Currencies in the switch; the first is the base the balance is given in. */
+    currencies?: WalletCurrency[];
+    /** Actions always shown. Default transfer, top up, exchange, pay later. */
+    actions?: WalletAction[];
+    /** Extra actions revealed by "More features". Pass an empty list to hide the row. */
+    moreActions?: WalletAction[];
+    /** Action circle color. Default `"#2a2e3c"`. */
+    color?: string;
+    /** Length of the count-up and each currency roll, in seconds. Default `1.4`. */
+    duration?: number;
+    className?: string;
+}
+export declare const WalletCard: React.ForwardRefExoticComponent<WalletCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { WaveText, type WaveTextProps } from "./wave-text";

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

@@ -0,0 +1,27 @@
+/**
+ * WaveText
+ *
+ * Trigger: hover. A heading whose words warp like liquid when touched. Each
+ * word carries its own SVG filter: fractal noise drives a displacement map that
+ * bends the glyphs into flowing bands. Hovering a word ramps the displacement
+ * up and keeps the noise drifting, so the warp flows rather than freezing;
+ * leaving eases it back to crisp type. The filter is only attached while a word
+ * is warping, so idle text costs nothing. Touch taps a word to ripple it once.
+ * Reduced motion leaves the type still.
+ *
+ * Engine: motion/react (motion values animated on enter and leave, written
+ * straight into the SVG filter attributes, no re-renders per frame).
+ */
+import * as React from "react";
+export interface WaveTextProps {
+    /** The heading text; each word warps on its own. Default `"Bend the rules"`. */
+    text?: string;
+    /** Element to render. Default `"h2"`. */
+    as?: "h1" | "h2" | "h3" | "p" | "div";
+    /** Peak displacement in px. Higher bends harder. Default `40`. */
+    strength?: number;
+    /** Seconds for one full drift of the wave while hovered. Default `1.8`. */
+    speed?: number;
+    className?: string;
+}
+export declare const WaveText: React.ForwardRefExoticComponent<WaveTextProps & React.RefAttributes<HTMLElement>>;

package/dist/contact-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/contact-card/index";

package/dist/contact-card.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  ContactCard
+} from "./chunk-2NRXP4HM.js";
+import "./chunk-ADXWPWJR.js";
+import "./chunk-JJEWOQYQ.js";
+import "./chunk-M22UY764.js";
+import "./chunk-JHT6RCGY.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  ContactCard
+};

package/dist/context-menu.d.ts

@@ -0,0 +1 @@
+export * from "./components/context-menu/index";

package/dist/context-menu.js

@@ -0,0 +1,17 @@
+"use client";
+import {
+  ContextMenu
+} from "./chunk-T2TSMDP3.js";
+import "./chunk-VIR5NV5W.js";
+import "./chunk-MUDKP3LK.js";
+import "./chunk-XH6YNONO.js";
+import "./chunk-JFTD3YAL.js";
+import "./chunk-M22UY764.js";
+import "./chunk-BN4MA5UY.js";
+import "./chunk-YGONLKWH.js";
+import "./chunk-IKM7EEYN.js";
+import "./chunk-JHT6RCGY.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  ContextMenu
+};

package/dist/contour-feature-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/contour-feature-card/index";

package/dist/contour-feature-card.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  ContourFeatureCard
+} from "./chunk-TNLY4CSA.js";
+import "./chunk-WOR2GMMN.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  ContourFeatureCard
+};

package/dist/contour-lines.d.ts

@@ -0,0 +1 @@
+export * from "./components/contour-lines/index";

package/dist/contour-lines.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  ContourLines
+} from "./chunk-6JQY7AX5.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  ContourLines
+};

package/dist/decay-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/decay-card/index";

package/dist/decay-card.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  DecayCard
+} from "./chunk-6WSY725U.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  DecayCard
+};

package/dist/deploy-streak.d.ts

@@ -0,0 +1 @@
+export * from "./components/deploy-streak/index";

package/dist/deploy-streak.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  DeployStreak
+} from "./chunk-SVK4MQMV.js";
+import "./chunk-YVYYDPE2.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  DeployStreak
+};

package/dist/depth-carousel.d.ts

@@ -0,0 +1 @@
+export * from "./components/depth-carousel/index";

package/dist/depth-carousel.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  DepthCarousel
+} from "./chunk-SBDTC4UY.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  DepthCarousel
+};

package/dist/device-traffic.d.ts

@@ -0,0 +1 @@
+export * from "./components/device-traffic/index";

package/dist/device-traffic.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  DeviceTraffic
+} from "./chunk-BPF3FQRS.js";
+import "./chunk-NNKC6NEH.js";
+import "./chunk-25254AZA.js";
+import "./chunk-OS6REIBR.js";
+import "./chunk-I7KTTOOJ.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  DeviceTraffic
+};

package/dist/download-button.d.ts

@@ -0,0 +1 @@
+export * from "./components/download-button/index";

package/dist/download-button.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  DownloadButton
+} from "./chunk-6V6OTHNE.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  DownloadButton
+};

package/dist/event-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/event-card/index";

package/dist/event-card.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  EventCard
+} from "./chunk-6XSJC7M7.js";
+import "./chunk-JJEWOQYQ.js";
+import "./chunk-NIQFSLPC.js";
+import "./chunk-HK34LPY6.js";
+import "./chunk-JHT6RCGY.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  EventCard
+};

package/dist/file-drop.d.ts

@@ -0,0 +1 @@
+export * from "./components/file-drop/index";

package/dist/file-drop.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  FileDrop
+} from "./chunk-MQDOFNKI.js";
+import "./chunk-7FQ4XU7E.js";
+import "./chunk-JFTD3YAL.js";
+import "./chunk-YU6B7YRO.js";
+import "./chunk-2QCWELWT.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  FileDrop
+};

package/dist/flip-words.d.ts

@@ -0,0 +1 @@
+export * from "./components/flip-words/index";

package/dist/flip-words.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  FlipWords
+} from "./chunk-IDJOKV6S.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  FlipWords
+};

package/dist/flux-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/flux-card/index";

package/dist/flux-card.js

@@ -0,0 +1,13 @@
+"use client";
+import {
+  FluxCard
+} from "./chunk-PV3OYTMT.js";
+import "./chunk-IYZOANPX.js";
+import "./chunk-WFWO2EIW.js";
+import "./chunk-7PS2W7PU.js";
+import "./chunk-JJEWOQYQ.js";
+import "./chunk-CEQ56RF6.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  FluxCard
+};

package/dist/fuse-button.d.ts

@@ -0,0 +1 @@
+export * from "./components/fuse-button/index";

package/dist/fuse-button.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  FuseButton
+} from "./chunk-MGBS5LRY.js";
+import "./chunk-PJ5EVDNN.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  FuseButton
+};

package/dist/globe-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/globe-card/index";

package/dist/globe-card.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  GlobeCard
+} from "./chunk-OEDHLZ4T.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  GlobeCard
+};

package/dist/goal-gauge.d.ts

@@ -0,0 +1 @@
+export * from "./components/goal-gauge/index";

package/dist/goal-gauge.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  GoalGauge
+} from "./chunk-DQUXBNSH.js";
+import "./chunk-I7KTTOOJ.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  GoalGauge
+};

package/dist/gradient-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/gradient-card/index";

package/dist/gradient-card.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  GradientCard
+} from "./chunk-VAPHE4G4.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  GradientCard
+};

package/dist/gradient-text.d.ts

@@ -0,0 +1 @@
+export * from "./components/gradient-text/index";

package/dist/gradient-text.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  GradientText
+} from "./chunk-FK4TZ5OW.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  GradientText
+};

package/dist/gravity-tag-pile.d.ts

@@ -0,0 +1 @@
+export * from "./components/gravity-tag-pile/index";

package/dist/gravity-tag-pile.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  GravityTagPile
+} from "./chunk-4RHQKP2P.js";
+import "./chunk-YURGXJSP.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  GravityTagPile
+};

package/dist/growth-stream.d.ts

@@ -0,0 +1 @@
+export * from "./components/growth-stream/index";

package/dist/growth-stream.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  GrowthStream
+} from "./chunk-RE74K7KI.js";
+import "./chunk-2IMPUH4H.js";
+import "./chunk-I7KTTOOJ.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  GrowthStream
+};

package/dist/highlight-text.d.ts

@@ -0,0 +1 @@
+export * from "./components/highlight-text/index";

package/dist/highlight-text.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  HighlightText
+} from "./chunk-4BVCRIR4.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  HighlightText
+};

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

@@ -0,0 +1 @@
+export * from "./components/hold-to-confirm/index";

package/dist/hold-to-confirm.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  HoldToConfirm
+} from "./chunk-M4YMNHPI.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  HoldToConfirm
+};

package/dist/icons/activity.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "react";
+export interface ActivityIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ActivityIconProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Size in px; by default it follows className, like a lucide icon. */
+    size?: number;
+    /** Play while true; when set, hover no longer drives it. */
+    active?: boolean;
+    /** Line weight, like a lucide icon's. Default `2`. */
+    strokeWidth?: number | string;
+}
+declare const ActivityIcon: import("react").ForwardRefExoticComponent<ActivityIconProps & import("react").RefAttributes<ActivityIconHandle>>;
+export { ActivityIcon };

package/dist/icons/archive.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "react";
+export interface ArchiveIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ArchiveIconProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Size in px; by default it follows className, like a lucide icon. */
+    size?: number;
+    /** Play while true; when set, hover no longer drives it. */
+    active?: boolean;
+    /** Line weight, like a lucide icon's. Default `2`. */
+    strokeWidth?: number | string;
+}
+declare const ArchiveIcon: import("react").ForwardRefExoticComponent<ArchiveIconProps & import("react").RefAttributes<ArchiveIconHandle>>;
+export { ArchiveIcon };

package/dist/icons/arrow-down-right.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "react";
+export interface ArrowDownRightIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ArrowDownRightIconProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Size in px; by default it follows className, like a lucide icon. */
+    size?: number;
+    /** Play while true; when set, hover no longer drives it. */
+    active?: boolean;
+    /** Line weight, like a lucide icon's. Default `2`. */
+    strokeWidth?: number | string;
+}
+declare const ArrowDownRightIcon: import("react").ForwardRefExoticComponent<ArrowDownRightIconProps & import("react").RefAttributes<ArrowDownRightIconHandle>>;
+export { ArrowDownRightIcon };

package/dist/icons/arrow-down.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "react";
+export interface ArrowDownIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ArrowDownIconProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Size in px; by default it follows className, like a lucide icon. */
+    size?: number;
+    /** Play while true; when set, hover no longer drives it. */
+    active?: boolean;
+    /** Line weight, like a lucide icon's. Default `2`. */
+    strokeWidth?: number | string;
+}
+declare const ArrowDownIcon: import("react").ForwardRefExoticComponent<ArrowDownIconProps & import("react").RefAttributes<ArrowDownIconHandle>>;
+export { ArrowDownIcon };