motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-ZWGOAY27.js

@@ -0,0 +1,234 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/moon.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var SVG_VARIANTS = {
+  normal: {
+    rotate: 0
+  },
+  animate: {
+    rotate: [0, -10, 10, -5, 5, 0]
+  }
+};
+var SVG_TRANSITION = {
+  duration: 1.2,
+  ease: "easeInOut"
+};
+var MoonIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          motion.svg,
+          {
+            animate: controls,
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            transition: SVG_TRANSITION,
+            variants: SVG_VARIANTS,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+          }
+        )
+      }
+    );
+  }
+);
+MoonIcon.displayName = "MoonIcon";
+
+// src/icons/sun.tsx
+import { motion as motion2, useAnimation as useAnimation2, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PATH_VARIANTS = {
+  normal: { opacity: 1 },
+  animate: (i) => ({
+    opacity: [0, 1],
+    transition: { delay: i * 0.1, duration: 0.3 }
+  })
+};
+var SunIcon = forwardRef2(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation2();
+    const isControlledRef = useRef2(false);
+    useImperativeHandle2(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef2(null);
+    const reduced = useReducedMotion2();
+    const [hosted, setHosted] = useState2(false);
+    useEffect2(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "4" }),
+              [
+                "M12 2v2",
+                "m19.07 4.93-1.41 1.41",
+                "M20 12h2",
+                "m17.66 17.66 1.41 1.41",
+                "M12 20v2",
+                "m6.34 17.66-1.41 1.41",
+                "M2 12h2",
+                "m4.93 4.93 1.41 1.41"
+              ].map((d, index) => /* @__PURE__ */ jsx2(
+                motion2.path,
+                {
+                  animate: controls,
+                  custom: index + 1,
+                  d,
+                  variants: PATH_VARIANTS
+                },
+                d
+              ))
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SunIcon.displayName = "SunIcon";
+
+export {
+  MoonIcon,
+  SunIcon
+};

package/dist/column-card.d.ts

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

package/dist/column-card.js

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

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

@@ -0,0 +1,56 @@
+/**
+ * AccountMenu
+ *
+ * Trigger: press (plus hover and keys). A profile pill (avatar with a status
+ * dot, name and a chevron) that morphs into a full account card when pressed:
+ * the pill's outline grows into the card while the avatar and name fly into
+ * the header and the rest of the card rises in after them. In the header band
+ * a status picker slides a white pill between Online, Focus, Away and Hidden;
+ * the avatar's dot changes colour with a pop and a ring pulses out of it, and
+ * the line under the name rolls to match. Three quick tiles lift on hover and
+ * play their icons. A workspace switcher glides a pill under the pointer and
+ * the check flies to the chosen workspace while the header's plan line rolls.
+ * A storage meter fills with a spring and a sheen runs across it. Log out asks
+ * twice: the first press rolls the label and a red wash fills from the left
+ * as a countdown, and the second press signs out. Escape or the chevron folds
+ * the card back into the pill. Arrow keys move through the rows. Reduced
+ * motion keeps every state without movement.
+ *
+ * Engine: motion/react (a layout morph between the pill and the card,
+ * shared layoutIds for the avatar and name, layoutId pills and checks,
+ * staggered entrances and rolling labels) with animated icons from
+ * lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export type AccountStatus = "online" | "focus" | "away" | "hidden";
+export interface AccountWorkspace {
+    id: string;
+    name: string;
+    /** A short line under the name, like the plan. */
+    plan: string;
+    /** Background of the workspace's letter tile. */
+    color?: string;
+}
+export interface AccountMenuProps {
+    name?: string;
+    /** A short line under the name, like a handle. */
+    handle?: string;
+    avatar?: string;
+    /** Start as the open card instead of the pill. */
+    defaultOpen?: boolean;
+    defaultStatus?: AccountStatus;
+    onStatusChange?: (status: AccountStatus) => void;
+    workspaces?: AccountWorkspace[];
+    defaultWorkspace?: string;
+    onWorkspaceChange?: (id: string) => void;
+    /** Used and total storage in GB. Default `[6.4, 10]`. Pass `null` to hide the meter. */
+    storage?: [number, number] | null;
+    onUpgrade?: () => void;
+    onProfile?: () => void;
+    onSettings?: () => void;
+    onShortcuts?: () => void;
+    onNewWorkspace?: () => void;
+    onSignOut?: () => void;
+    className?: string;
+}
+export declare const AccountMenu: React.ForwardRefExoticComponent<AccountMenuProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { AccountMenu, type AccountMenuProps, type AccountStatus, type AccountWorkspace, } from "./account-menu";

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

@@ -0,0 +1,45 @@
+/**
+ * ActionMenu
+ *
+ * Trigger: press, then hover. A dropdown of actions and links. Opening springs
+ * the panel out of its trigger while the items cascade in. A soft highlight
+ * slides between items as you hover or arrow through them. Copy actions shrink
+ * their icon away and draw a check while the label swaps to "Copied"; download
+ * actions bounce their arrow while a light gray water fill washes across the
+ * row, then draw the check. Link items nudge their arrow. Escape or a click outside closes it and
+ * focus returns to the trigger.
+ *
+ * Engine: motion/react + gsap (Motion for the panel spring, sliding highlight,
+ * label swaps and arrow nudges; gsap + @gsap/react for the item cascade and
+ * the icon timelines).
+ */
+import * as React from "react";
+export type ActionMenuItem = {
+    kind: "copy" | "download";
+    label: string;
+    /** Label while the action confirms. Default "Copied" or "Downloaded". */
+    doneLabel?: string;
+    /** Text written to the clipboard for copy items. */
+    copyText?: string;
+    /** Runs when chosen. Download items wait for it before showing the check. */
+    onSelect?: () => void | Promise<void>;
+} | {
+    kind: "link";
+    label: string;
+    href?: string;
+    onSelect?: () => void;
+} | {
+    kind: "separator";
+};
+export interface ActionMenuProps {
+    /** Trigger button label. Default `"Brand assets"`. */
+    label?: React.ReactNode;
+    /** Menu items, top to bottom. Default a brand-asset menu. */
+    items?: ActionMenuItem[];
+    /** Start open. Default `false`. */
+    defaultOpen?: boolean;
+    /** How long a confirmed action shows its check, in ms. Default `1400`. */
+    confirmFor?: number;
+    className?: string;
+}
+export declare const ActionMenu: React.ForwardRefExoticComponent<ActionMenuProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { ActionMenu, type ActionMenuProps, type ActionMenuItem } from "./action-menu";

package/dist/components/activity-grid/activity-grid.d.ts

@@ -0,0 +1,54 @@
+/**
+ * ActivityGrid
+ *
+ * Trigger: in view, then hover, keys and resize. A white card with a year of
+ * daily activity as a heatmap: one column per week, one square per day, in
+ * tints and shades of one colour, dark ink by default. When the card scrolls into view the squares sweep
+ * in as a diagonal wave from the oldest week to today while the total counts
+ * up beside a change chip. Hover a day and its row and column stay lit while
+ * the rest dims, with a tooltip naming the day and its count; hover a step of
+ * the legend and only the days at that level stay lit. The grid measures its
+ * own width and shows as many recent weeks as fit, so it sits in a small card
+ * and stretches to the full year on a wide one; the total, the streak tiles
+ * and the period chip count to the new numbers when the width changes. The
+ * arrow keys move through the days. Reduced motion shows the final state at
+ * once.
+ *
+ * Engine: motion/react (motion values counting the numbers, AnimatePresence
+ * for the tooltip) with CSS transitions staggering the squares, a
+ * ResizeObserver fitting the weeks, and animated icons from lucide-animated
+ * (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+/**
+ * Ready made ramps: one colour each, from a light tint on quiet days to a
+ * deep shade on the busiest.
+ */
+export declare const ACTIVITY_PALETTES: {
+    readonly ink: readonly ["#dcdcda", "#a6a6a3", "#6e6e6b", "#242423"];
+    readonly green: readonly ["#c9f2d5", "#7ddc96", "#2fbf5c", "#17803a"];
+    readonly violet: readonly ["#ddd6ff", "#ad9bff", "#7b61ff", "#4a2fd1"];
+    readonly mint: readonly ["#c6f4e3", "#6fe0b8", "#16c79a", "#0b8a6a"];
+    readonly amber: readonly ["#ffe7b3", "#ffc85c", "#ffad1f", "#d98200"];
+    readonly sky: readonly ["#cbeaff", "#7cc8ff", "#2aa8f2", "#0a72b8"];
+};
+export interface ActivityGridProps {
+    /** Card title. Default `"Focus sessions"`. */
+    title?: string;
+    /** One value per day, oldest first, the last one is today. Default a year of sample sessions. */
+    data?: number[];
+    /** The last day in `data`. Default today. */
+    endDate?: Date;
+    /** What is counted, singular. Default `"session"`. */
+    unit?: string;
+    /** A ready made colour, in tints and shades. Default `"ink"`, which turns light in dark mode. */
+    palette?: keyof typeof ACTIVITY_PALETTES;
+    /** Four colours for the activity levels, quietest to busiest; overrides `palette`. */
+    colors?: readonly [string, string, string, string];
+    /** Preferred square size in px; squares grow up to 16px when the whole year fits. Default `11`. */
+    cellSize?: number;
+    /** Show the three streak tiles. Default `true`. */
+    showStats?: boolean;
+    className?: string;
+}
+export declare const ActivityGrid: React.ForwardRefExoticComponent<ActivityGridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/activity-grid/index.d.ts

@@ -0,0 +1 @@
+export { ActivityGrid, ACTIVITY_PALETTES, type ActivityGridProps } from "./activity-grid";

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

@@ -0,0 +1,41 @@
+/**
+ * AddCard
+ *
+ * Trigger: press (plus hover). An empty state for payments: a white card that
+ * asks for a first payment card. Above the copy, a dark card floats over a
+ * dashed slot, tipped and waiting. Hovering it tilts it toward the cursor with
+ * a glare that follows, and the plus in the button turns on hover. Pressing
+ * the button types the card in: the last four digits roll in one by one, the
+ * name and expiry fill, then the card drops into its slot with a bounce, the
+ * dashes fade, a check pops on the card and the button turns green and rolls
+ * to its done label. Changes are announced, and reduced motion swaps the
+ * movement for fades. When the card scrolls into view, the stage fades up,
+ * the payment card swings in from above and settles into its float, the
+ * title and line rise out of a soft blur, and the button follows.
+ *
+ * Engine: motion/react (springs for the float, tilt and drop; AnimatePresence
+ * for the rolling text and icon swaps).
+ */
+import * as React from "react";
+export interface AddCardProps {
+    /** Card title. Default `"Add your first card"`. */
+    title?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** Button label. Default `"Add card"`. */
+    cta?: string;
+    /** Button label once the card is in. Default `"Card added"`. */
+    doneLabel?: string;
+    /** Small line under the button. Pass an empty string to hide it. */
+    note?: string;
+    /** Last four digits shown once added. Default `"4242"`. */
+    last4?: string;
+    /** Name shown once added. Default `"Alex Morgan"`. */
+    holder?: string;
+    /** Expiry shown once added. Default `"08/29"`. */
+    expiry?: string;
+    /** Called on press. Return a promise to hold the card until it settles; a rejection puts it back. */
+    onAdd?: () => void | Promise<unknown>;
+    className?: string;
+}
+export declare const AddCard: React.ForwardRefExoticComponent<AddCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { AddCard, type AddCardProps } from "./add-card";

package/dist/components/amount-slider/amount-slider.d.ts

@@ -0,0 +1,43 @@
+/**
+ * AmountSlider
+ *
+ * Trigger: drag (plus press and keys). A white card for picking an amount: a
+ * label, a big amount whose digits roll like an odometer as it changes, a
+ * slider with an ink fill and a white grip thumb, and a soft gray row that
+ * works out the monthly payment as you go. Grabbing the thumb swells it and
+ * spreads its grip lines; dragging past either end stretches it a little like
+ * rubber before it springs back. Pressing the track glides the thumb there on
+ * a spring, and the arrow, Page and Home/End keys step it. The ink button's
+ * arrow slides through on hover. Reduced motion swaps the rolls and springs
+ * for plain changes.
+ *
+ * Engine: motion/react (a motion value for the thumb position, springs for
+ * track presses and the stretch, odometer digit columns).
+ */
+import * as React from "react";
+export interface AmountSliderProps {
+    /** Label above the amount. Default `"How much do you need?"`. */
+    label?: string;
+    /** Lowest amount. Default `5000`. */
+    min?: number;
+    /** Highest amount. Default `500000`. */
+    max?: number;
+    /** Amounts snap to this step. Default `1000`. */
+    step?: number;
+    /** Starting amount. Default `75000`. */
+    defaultValue?: number;
+    /** ISO currency code. Default `"USD"`. */
+    currency?: string;
+    /** Yearly interest rate in percent, for the monthly estimate. Default `7.5`. */
+    rate?: number;
+    /** Term in months, for the monthly estimate. Default `60`. */
+    months?: number;
+    /** Button label. Default `"Continue"`. */
+    cta?: string;
+    /** Called as the amount changes. */
+    onChange?: (value: number) => void;
+    /** Called when the button is pressed. */
+    onSubmit?: (value: number) => void;
+    className?: string;
+}
+export declare const AmountSlider: React.ForwardRefExoticComponent<AmountSliderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/amount-slider/index.d.ts

@@ -0,0 +1 @@
+export { AmountSlider, type AmountSliderProps } from "./amount-slider";

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

@@ -0,0 +1,27 @@
+/**
+ * AnnotationText
+ *
+ * Trigger: in view. Hand-drawn pen marks draw themselves around words when they
+ * scroll into view: an underline, a circle, a box or a strike-through, each with
+ * a slightly wobbly stroke so it reads as drawn, not ruled. Chain several with
+ * `delay`. Reduced motion shows the marks already drawn.
+ *
+ * Engine: motion/react (pathLength on SVG paths sized to the measured word).
+ */
+import * as React from "react";
+export type AnnotationType = "underline" | "circle" | "box" | "strike";
+export interface AnnotationTextProps {
+    children: React.ReactNode;
+    /** Mark to draw. Default `"underline"`. */
+    type?: AnnotationType;
+    /** Pen color. Default a warm red. */
+    color?: string;
+    /** Stroke width, px. Default `2.5`. */
+    strokeWidth?: number;
+    /** Seconds to wait before drawing, for chaining marks. Default `0`. */
+    delay?: number;
+    /** Seconds the stroke takes. Default `0.7`. */
+    duration?: number;
+    className?: string;
+}
+export declare function AnnotationText({ children, type, color, strokeWidth, delay, duration, className, }: AnnotationTextProps): React.JSX.Element;

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

@@ -0,0 +1 @@
+export { AnnotationText, type AnnotationTextProps, type AnnotationType } from "./annotation-text";

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

@@ -0,0 +1,63 @@
+/**
+ * AuraCard
+ *
+ * Trigger: in view and timeline, plus hover and press. A feature card on a
+ * live two colour gradient: a main pool flows in the lower left and a second
+ * colour drifts in from the lower right, blending into it under a moving
+ * film grain that sits on the colour only while the top stays clear for the title and copy. The pool leans
+ * toward the pointer, soft rings ripple out from it, and a press anywhere on
+ * the card sends a wave through the colour. Four controls shape it: grain,
+ * noise (how much the flow warps), speed and ripple. In front, two glass
+ * keycaps press ⌘ and K, and a frosted command palette plays a loop: a
+ * command types itself, matching results blur in with the typed letters in
+ * bold, a highlight glides down the rows as the arrow key flashes, and Enter
+ * runs the chosen row: its icon plays, the return key turns into a check and
+ * the gradient ripples out from the row. Pointing at the palette pauses the
+ * loop so you can move the highlight yourself and click a row to run it.
+ * Everything pauses off screen and in a hidden tab. Reduced motion keeps a
+ * still frame of the gradient and the first command.
+ *
+ * Engine: motion/react (entrances, keycaps, the palette loop, a layoutId
+ * highlight) and a WebGL fragment shader (domain warped noise, ripples and
+ * grain), drawn on requestAnimationFrame only while the card is visible.
+ */
+import * as React from "react";
+export type AuraCommandIcon = "card" | "history" | "download" | "deploy" | "undo" | "file" | "invite" | "team" | "mail";
+export interface AuraCommand {
+    label: string;
+    icon: AuraCommandIcon;
+    /** Shortcut shown on the right while the row is not highlighted, like "G B". */
+    hint?: string;
+}
+export interface AuraScene {
+    /** What gets typed into the palette. */
+    query: string;
+    /** Results shown under it, up to four. */
+    results: AuraCommand[];
+    /** Which result the loop runs. Default the first. */
+    pick?: number;
+}
+export interface AuraCardProps {
+    /** Card title. Default `"Everything, one keystroke away"`. */
+    title?: React.ReactNode;
+    /** Line under the title. */
+    description?: React.ReactNode;
+    /** The palette plays these one after another. */
+    scenes?: AuraScene[];
+    /** Keys on the two keycaps. Default `["⌘", "K"]`. */
+    keys?: [string, string];
+    /** Four colors for the main pool in the lower left, deepest first. Default a blue to periwinkle ramp. */
+    colors?: [string, string, string, string];
+    /** The second pool's color, drifting in the lower right and blending into the first. Default `"#ff86c8"`. */
+    accent?: string;
+    /** Film grain over the gradient, 0 to 3. Default `1`. */
+    grain?: number;
+    /** How much the flow warps, 0 to 1. Default `0.5`. */
+    noise?: number;
+    /** Flow speed, 0 (still) to 2. Default `0.6`. */
+    speed?: number;
+    /** Strength of the rings and press waves, 0 to 1. Default `0.5`. */
+    ripple?: number;
+    className?: string;
+}
+export declare const AuraCard: React.ForwardRefExoticComponent<AuraCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { AuraCard, type AuraCardProps } from "./aura-card";

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

@@ -0,0 +1,51 @@
+/**
+ * AuthCard
+ *
+ * Trigger: press and type (plus focus, hover and in view). One white card
+ * for signing in and signing up. Sign in asks for email and password, with
+ * a forgot password link, a Get started button, and Google, Apple and
+ * GitHub below. The line at the bottom switches modes, and the card changes
+ * in place instead of swapping pages: a name field grows in above the email,
+ * the forgot link folds away, a password strength meter fills in under the
+ * password, and the title, the button and the bottom line roll to their new
+ * words while the logo turns once. Email and password keep what was
+ * typed. Fields are full pills that wake on focus: the surface turns white,
+ * a soft ring grows and the field's icon plays, and once filled they stay
+ * white with a thin stroke to show they are done; a valid email earns a green check, the eye
+ * shows or hides the password, and fields that need fixing shake and explain
+ * why. Get started presses in; while it works a light sweeps across it, an
+ * arc spins and dots wave; when done it turns green with a ripple and the
+ * lock opens (sign in) or a check lands (sign up). Social buttons lift, wiggle their logo and show a spinner
+ * when pressed. Reduced motion keeps every state without movement.
+ *
+ * Engine: motion/react (height reveals with AnimatePresence, rolling text,
+ * keyframe shakes, springs) with animated icons from lucide-animated (MIT),
+ * vendored in src/icons.
+ */
+import * as React from "react";
+export type AuthMode = "signin" | "signup";
+export type AuthProvider = "google" | "apple" | "github";
+export interface AuthDetails {
+    mode: AuthMode;
+    email: string;
+    password: string;
+    /** Only when signing up. */
+    name?: string;
+}
+export interface AuthCardProps {
+    /** Mode shown first. Default `"signin"`. */
+    defaultMode?: AuthMode;
+    /** Mode (controlled). */
+    mode?: AuthMode;
+    onModeChange?: (mode: AuthMode) => void;
+    /** Called with the details once they pass the checks. Return a promise to keep the button spinning until it settles; throw to show an error. */
+    onSubmit?: (details: AuthDetails) => void | Promise<void>;
+    /** Called by the Google, Apple and GitHub buttons. */
+    onSocial?: (provider: AuthProvider) => void | Promise<void>;
+    /** Called by the forgot password link. */
+    onForgotPassword?: (email: string) => void;
+    /** Your logo for the top of the card. Default a placeholder gradient mark. */
+    logo?: React.ReactNode;
+    className?: string;
+}
+export declare const AuthCard: React.ForwardRefExoticComponent<AuthCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { AuthCard, type AuthCardProps, type AuthMode, type AuthProvider, type AuthDetails } from "./auth-card";