@021.is/brand-studio 0.3.0

package/dist/chunk-ZE5UZAY6.js

@@ -0,0 +1,113 @@
+"use client";
+import { LoadingVariant, SpinnerLoadingMark } from './chunk-55AYEWNQ.js';
+import { motion } from 'framer-motion';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PulseLoadingMark({
+  size = 200,
+  background = "transparent",
+  defs,
+  foreground = "currentColor",
+  cycleMs = 1200,
+  className,
+  style,
+  ariaLabel = "Loading"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      width: size,
+      height: size,
+      role: "img",
+      "aria-label": ariaLabel,
+      className,
+      style,
+      children: [
+        defs ? /* @__PURE__ */ jsx("defs", { children: defs }) : null,
+        background !== "transparent" ? /* @__PURE__ */ jsx("rect", { width: "256", height: "256", rx: "56", fill: background }) : null,
+        /* @__PURE__ */ jsx(
+          motion.circle,
+          {
+            cx: 128,
+            cy: 128,
+            r: 56,
+            fill: foreground,
+            style: { transformOrigin: "128px 128px", transformBox: "view-box" },
+            animate: { scale: [0.65, 1, 0.65], opacity: [0.35, 1, 0.35] },
+            transition: {
+              duration: cycleMs / 1e3,
+              ease: "easeInOut",
+              repeat: Number.POSITIVE_INFINITY
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var R = 74;
+var CIRC = 2 * Math.PI * R;
+function RingLoadingMark({
+  size = 200,
+  background = "transparent",
+  defs,
+  foreground = "currentColor",
+  weight = 18,
+  cycleMs = 1400,
+  className,
+  style,
+  ariaLabel = "Loading"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      width: size,
+      height: size,
+      role: "img",
+      "aria-label": ariaLabel,
+      className,
+      style,
+      children: [
+        defs ? /* @__PURE__ */ jsx("defs", { children: defs }) : null,
+        background !== "transparent" ? /* @__PURE__ */ jsx("rect", { width: "256", height: "256", rx: "56", fill: background }) : null,
+        /* @__PURE__ */ jsx(
+          motion.circle,
+          {
+            cx: 128,
+            cy: 128,
+            r: R,
+            fill: "none",
+            stroke: foreground,
+            strokeWidth: weight,
+            strokeLinecap: "round",
+            strokeDasharray: CIRC,
+            style: { transformOrigin: "128px 128px", transformBox: "view-box", rotate: -90 },
+            animate: { strokeDashoffset: [CIRC, 0, 0, -CIRC], opacity: [1, 1, 1, 0] },
+            transition: {
+              duration: cycleMs / 1e3,
+              ease: "easeInOut",
+              times: [0, 0.55, 0.7, 1],
+              repeat: Number.POSITIVE_INFINITY
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function LoadingMark({ variant = LoadingVariant.Spinner, ...rest }) {
+  switch (variant) {
+    case LoadingVariant.Ring:
+      return /* @__PURE__ */ jsx(RingLoadingMark, { ...rest });
+    case LoadingVariant.Pulse:
+      return /* @__PURE__ */ jsx(PulseLoadingMark, { ...rest });
+    default:
+      return /* @__PURE__ */ jsx(SpinnerLoadingMark, { ...rest });
+  }
+}
+
+export { LoadingMark, PulseLoadingMark, RingLoadingMark };

package/dist/color/index.d.ts

@@ -0,0 +1,19 @@
+import { d as Role, B as BrandScheme, C as ColorScheme } from '../generateScheme-BDDcIzA3.js';
+export { a as ColorSpec, H as Hex, R as ROLE, b as ROLE_GROUPS, c as ROLE_ORDER, S as SchemeVariant, g as generateScheme } from '../generateScheme-BDDcIzA3.js';
+export { C as ContrastTier, c as contrastBadge, a as contrastRatio, r as relativeLuminance } from '../contrast-TVW3pzdd.js';
+
+/** `onPrimaryContainer` → `--md-on-primary-container`. */
+declare function cssVarName(role: Role): string;
+/** A single mode's role map as `{ "--md-...": "#hex" }`. */
+declare function schemeVars(colors: ColorScheme): Record<string, string>;
+/**
+ * Emit a CSS string that sets the MD3 role custom properties: light values on
+ * `lightSelector`, dark values on `darkSelector`. Drop it into a `<style>` so
+ * any descendant can theme from `var(--md-<role>)` and switch with `.dark`.
+ */
+declare function schemeToCssText(scheme: BrandScheme, opts?: {
+    lightSelector?: string;
+    darkSelector?: string;
+}): string;
+
+export { BrandScheme, ColorScheme, Role, cssVarName, schemeToCssText, schemeVars };

package/dist/color/index.js

@@ -0,0 +1 @@
+export { ContrastTier, ROLE, ROLE_GROUPS, ROLE_ORDER, SchemeVariant, contrastBadge, contrastRatio, cssVarName, generateScheme, relativeLuminance, schemeToCssText, schemeVars } from '../chunk-JQV3ASME.js';

package/dist/contrast-TVW3pzdd.d.ts

@@ -0,0 +1,19 @@
+/**
+ * WCAG-relative-luminance + contrast-ratio helpers. Pure math, no deps.
+ * Used by the Colors panel to label each role pair against WCAG 2.1.
+ */
+declare function relativeLuminance(hex: string): number;
+declare function contrastRatio(a: string, b: string): number;
+declare const ContrastTier: {
+    readonly AAA: "AAA";
+    readonly AA: "AA";
+    readonly AALarge: "AA-LG";
+    readonly Fail: "fail";
+};
+type ContrastTier = (typeof ContrastTier)[keyof typeof ContrastTier];
+declare function contrastBadge(ratio: number): {
+    label: string;
+    tier: ContrastTier;
+};
+
+export { ContrastTier as C, contrastRatio as a, contrastBadge as c, relativeLuminance as r };

package/dist/define/index.d.ts

@@ -0,0 +1,25 @@
+import { B as BrandConfig, R as ResolvedBrandConfig } from '../types-PWNYyaBF.js';
+export { b as BrandType } from '../types-PWNYyaBF.js';
+export { B as BrandScheme, C as ColorScheme, a as ColorSpec, H as Hex, d as Role, S as SchemeVariant, g as generateScheme } from '../generateScheme-BDDcIzA3.js';
+
+/**
+ * Typed identity helper for declaring a brand. Resolves the MD3 light + dark
+ * role sets from `config.color` at declaration time so every surface reads a
+ * complete, contrast-correct scheme.
+ *
+ * @example
+ * ```ts
+ * // brand.config.ts
+ * import { defineBrand } from "@021.is/brand-studio/define";
+ *
+ * export default defineBrand({
+ *   name: "Acme",
+ *   tagline: "We make things.",
+ *   color: { seed: "#3B82F6", tertiary: "#22D3EE" },
+ *   type: { sans: "Inter", mono: "JetBrains Mono" },
+ * });
+ * ```
+ */
+declare function defineBrand(config: BrandConfig): ResolvedBrandConfig;
+
+export { BrandConfig, ResolvedBrandConfig, defineBrand };

package/dist/define/index.js

@@ -0,0 +1,2 @@
+export { defineBrand } from '../chunk-QT5N4K7D.js';
+export { SchemeVariant, generateScheme } from '../chunk-JQV3ASME.js';

package/dist/generateScheme-BDDcIzA3.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Material Design 3 color roles. The complete role set a scheme exposes for a
+ * single mode (light or dark). const-as-object enum — no string-literal unions.
+ *
+ * Role names match the camelCase getters on `MaterialDynamicColors` so the
+ * generator can read each one generically.
+ */
+declare const ROLE: {
+    readonly primary: "primary";
+    readonly onPrimary: "onPrimary";
+    readonly primaryContainer: "primaryContainer";
+    readonly onPrimaryContainer: "onPrimaryContainer";
+    readonly inversePrimary: "inversePrimary";
+    readonly secondary: "secondary";
+    readonly onSecondary: "onSecondary";
+    readonly secondaryContainer: "secondaryContainer";
+    readonly onSecondaryContainer: "onSecondaryContainer";
+    readonly tertiary: "tertiary";
+    readonly onTertiary: "onTertiary";
+    readonly tertiaryContainer: "tertiaryContainer";
+    readonly onTertiaryContainer: "onTertiaryContainer";
+    readonly error: "error";
+    readonly onError: "onError";
+    readonly errorContainer: "errorContainer";
+    readonly onErrorContainer: "onErrorContainer";
+    readonly background: "background";
+    readonly onBackground: "onBackground";
+    readonly surface: "surface";
+    readonly onSurface: "onSurface";
+    readonly surfaceVariant: "surfaceVariant";
+    readonly onSurfaceVariant: "onSurfaceVariant";
+    readonly surfaceContainerLowest: "surfaceContainerLowest";
+    readonly surfaceContainerLow: "surfaceContainerLow";
+    readonly surfaceContainer: "surfaceContainer";
+    readonly surfaceContainerHigh: "surfaceContainerHigh";
+    readonly surfaceContainerHighest: "surfaceContainerHighest";
+    readonly surfaceDim: "surfaceDim";
+    readonly surfaceBright: "surfaceBright";
+    readonly surfaceTint: "surfaceTint";
+    readonly inverseSurface: "inverseSurface";
+    readonly inverseOnSurface: "inverseOnSurface";
+    readonly outline: "outline";
+    readonly outlineVariant: "outlineVariant";
+    readonly shadow: "shadow";
+    readonly scrim: "scrim";
+};
+type Role = (typeof ROLE)[keyof typeof ROLE];
+/** Stable order for iterating + rendering the role set. */
+declare const ROLE_ORDER: readonly Role[];
+/** Pairs of (container role, on-role) used by the Colors panel to show legible swatches. */
+declare const ROLE_GROUPS: readonly {
+    title: string;
+    pairs: readonly [Role, Role][];
+}[];
+
+type Hex = `#${string}`;
+/** MD3 scheme variants (const-as-object enum, no string-literal unions). */
+declare const SchemeVariant: {
+    readonly TonalSpot: "tonalSpot";
+    readonly Vibrant: "vibrant";
+    readonly Expressive: "expressive";
+    readonly Fidelity: "fidelity";
+    readonly Content: "content";
+    readonly Neutral: "neutral";
+    readonly Monochrome: "monochrome";
+};
+type SchemeVariant = (typeof SchemeVariant)[keyof typeof SchemeVariant];
+type ColorSpec = {
+    /** Required key/source color the whole scheme is derived from. */
+    seed: Hex;
+    /** Optional key colors. When set, that palette is grafted onto the scheme. */
+    secondary?: Hex;
+    tertiary?: Hex;
+    neutral?: Hex;
+    /** MD3 contrast level, -1 (low) .. 1 (high). Default 0. */
+    contrastLevel?: number;
+    /** Scheme variant. Default `tonalSpot` (MD3 default). */
+    variant?: SchemeVariant;
+    /** Per-role escape hatches applied last, per mode. */
+    overrides?: {
+        light?: Partial<Record<Role, Hex>>;
+        dark?: Partial<Record<Role, Hex>>;
+    };
+};
+type ColorScheme = Record<Role, Hex>;
+type BrandScheme = {
+    light: ColorScheme;
+    dark: ColorScheme;
+};
+/**
+ * Generate a complete MD3 light + dark role set from a brand's color spec.
+ * Faithful to Material Design 3 (HCT tonal palettes + MaterialDynamicColors),
+ * so every on-color is contrast-correct against its surface by construction.
+ */
+declare function generateScheme(spec: ColorSpec): BrandScheme;
+
+export { type BrandScheme as B, type ColorScheme as C, type Hex as H, ROLE as R, SchemeVariant as S, type ColorSpec as a, ROLE_GROUPS as b, ROLE_ORDER as c, type Role as d, generateScheme as g };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { Disc, DiscProps, Ring, RingProps, Squircle, SquircleProps } from './shapes/index.js';
+export { AppearGrow, AppearGrowProps, Drift, DriftProps, PulseLoop, PulseLoopProps, RingDraw, RingDrawProps, Sequence, SequenceProps, SequenceStep, SequenceStepProps, Strikethrough, StrikethroughProps, Sweep, SweepDirection, SweepProps, Wobble, WobbleProps } from './motion/index.js';
+export { LoadingMark, LoadingMarkProps, PulseLoadingMark, PulseLoadingMarkProps, RingLoadingMark, RingLoadingMarkProps, SpinnerLoadingMark, SpinnerLoadingMarkProps } from './loading/index.js';
+export { B as BrandConfig, a as BrandStudioSection, b as BrandType, L as LoadingVariant, M as MotionState, R as ResolvedBrandConfig } from './types-PWNYyaBF.js';
+export { B as BrandScheme, C as ColorScheme, a as ColorSpec, H as Hex, R as ROLE, b as ROLE_GROUPS, c as ROLE_ORDER, d as Role, S as SchemeVariant, g as generateScheme } from './generateScheme-BDDcIzA3.js';
+export { cssVarName, schemeToCssText, schemeVars } from './color/index.js';
+export { C as ContrastTier, c as contrastBadge, a as contrastRatio, r as relativeLuminance } from './contrast-TVW3pzdd.js';
+export { a as BrandStudio, b as BrandStudioProps } from './BrandStudio-D2DcT8Fu.js';
+export { defineBrand } from './define/index.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/index.js

@@ -0,0 +1,8 @@
+"use client";
+export { Disc, Ring, Squircle } from './chunk-LJ4HZCAP.js';
+export { AppearGrow, Drift, PulseLoop, RingDraw, Sequence, SequenceStep, Strikethrough, Sweep, Wobble } from './chunk-7325RQRP.js';
+export { LoadingMark, PulseLoadingMark, RingLoadingMark } from './chunk-ZE5UZAY6.js';
+export { BrandStudio } from './chunk-Z2DJJJDC.js';
+export { BrandStudioSection, LoadingVariant, MotionState, SpinnerLoadingMark } from './chunk-55AYEWNQ.js';
+export { defineBrand } from './chunk-QT5N4K7D.js';
+export { ContrastTier, ROLE, ROLE_GROUPS, ROLE_ORDER, SchemeVariant, contrastBadge, contrastRatio, cssVarName, generateScheme, relativeLuminance, schemeToCssText, schemeVars } from './chunk-JQV3ASME.js';

package/dist/loading/index.d.ts

@@ -0,0 +1,86 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+import { L as LoadingVariant } from '../types-PWNYyaBF.js';
+import '../generateScheme-BDDcIzA3.js';
+
+type LoadingMarkProps = {
+    variant?: LoadingVariant;
+    size?: number | string;
+    background?: string;
+    defs?: ReactNode;
+    foreground?: string;
+    cycleMs?: number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+};
+/**
+ * LoadingMark — a generic, brand-neutral loading indicator.
+ *
+ *  - `Spinner` → 3/4-arc spinner (default)
+ *  - `Ring`    → ring strokes itself in, resets, loops
+ *  - `Pulse`   → disc pulses (scale + fade)
+ *
+ * For a brand-coded loading mark, render your own animated logo instead and
+ * pass it to `<BrandStudio animatedLogo={...} />`.
+ */
+declare function LoadingMark({ variant, ...rest }: LoadingMarkProps): react_jsx_runtime.JSX.Element;
+
+type SpinnerLoadingMarkProps = {
+    size?: number | string;
+    /** Tile background. Default transparent (no tile). Pass a color or `url(#id)`. */
+    background?: string;
+    /** Optional `<defs>` (e.g. a gradient referenced by `background`/`foreground`). */
+    defs?: ReactNode;
+    /** Arc + track color. Default `currentColor` so it inherits theme text color. */
+    foreground?: string;
+    /** Stroke thickness of the arc. */
+    weight?: number;
+    /** Full rotation cycle, ms. */
+    cycleMs?: number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+};
+/**
+ * SpinnerLoadingMark — a clean 3/4-arc spinner. Generic and brand-neutral:
+ * transparent tile, `currentColor` stroke by default, no hardcoded palette.
+ */
+declare function SpinnerLoadingMark({ size, background, defs, foreground, weight, cycleMs, className, style, ariaLabel, }: SpinnerLoadingMarkProps): react_jsx_runtime.JSX.Element;
+
+type RingLoadingMarkProps = {
+    size?: number | string;
+    background?: string;
+    defs?: ReactNode;
+    foreground?: string;
+    weight?: number;
+    /** Draw-in + fade cycle, ms. */
+    cycleMs?: number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+};
+/**
+ * RingLoadingMark — a ring that strokes itself in, then resets and loops.
+ * Generic and brand-neutral (transparent tile, `currentColor` by default).
+ */
+declare function RingLoadingMark({ size, background, defs, foreground, weight, cycleMs, className, style, ariaLabel, }: RingLoadingMarkProps): react_jsx_runtime.JSX.Element;
+
+type PulseLoadingMarkProps = {
+    size?: number | string;
+    background?: string;
+    defs?: ReactNode;
+    foreground?: string;
+    /** Pulse cycle, ms. */
+    cycleMs?: number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+};
+/**
+ * PulseLoadingMark — a solid disc that pulses (scale + fade) and loops.
+ * Generic and brand-neutral (transparent tile, `currentColor` by default).
+ */
+declare function PulseLoadingMark({ size, background, defs, foreground, cycleMs, className, style, ariaLabel, }: PulseLoadingMarkProps): react_jsx_runtime.JSX.Element;
+
+export { LoadingMark, type LoadingMarkProps, LoadingVariant, PulseLoadingMark, type PulseLoadingMarkProps, RingLoadingMark, type RingLoadingMarkProps, SpinnerLoadingMark, type SpinnerLoadingMarkProps };

package/dist/loading/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { LoadingMark, PulseLoadingMark, RingLoadingMark } from '../chunk-ZE5UZAY6.js';
+export { LoadingVariant, SpinnerLoadingMark } from '../chunk-55AYEWNQ.js';

package/dist/motion/index.d.ts

@@ -0,0 +1,197 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+
+type AppearGrowProps = {
+    children: ReactNode;
+    /** Delay before the animation starts, ms. */
+    delay?: number;
+    /** Animation duration, ms. */
+    duration?: number;
+    /** Initial scale (0 = invisible). */
+    from?: number;
+    /** Target scale. */
+    to?: number;
+    /** Pivot point for the scale, expressed as `"50% 50%"` (CSS transform-origin syntax). */
+    origin?: string;
+    /** Pass `true` to loop the animation. */
+    loop?: boolean;
+};
+/**
+ * AppearGrow — opacity-fade-in + scale-up. Use for "element pops into view".
+ * Wraps children in a `<g>` (so it composes inside SVG). The element you wrap must
+ * be SVG content; for HTML content swap the wrapping element.
+ */
+declare function AppearGrow({ children, delay, duration, from, to, origin, loop, }: AppearGrowProps): react_jsx_runtime.JSX.Element;
+
+type RingDrawProps = {
+    cx?: number;
+    cy?: number;
+    r?: number;
+    strokeWidth?: number;
+    color?: string;
+    /** Total time to trace the full ring, ms. */
+    duration?: number;
+    /** Delay before drawing starts, ms. */
+    delay?: number;
+    /** When true, the ring redraws on every loop iteration. */
+    loop?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * RingDraw — animates a circle being drawn stroke-by-stroke (pathLength from 0 to 1).
+ * Use for the "O appears" beat of a logo reveal.
+ */
+declare function RingDraw({ cx, cy, r, strokeWidth, color, duration, delay, loop, className, style, }: RingDrawProps): react_jsx_runtime.JSX.Element;
+
+type PulseLoopProps = {
+    children: ReactNode;
+    /** Min scale during pulse. */
+    from?: number;
+    /** Max scale during pulse. */
+    to?: number;
+    /** Full pulse cycle, ms. */
+    duration?: number;
+    origin?: string;
+    /** Pulse opacity along with scale. */
+    fadeWithScale?: boolean;
+};
+/**
+ * PulseLoop — gentle infinite breathing scale, useful as a loading indicator
+ * on a static mark or as an attention pulse on a CTA-adjacent glyph.
+ */
+declare function PulseLoop({ children, from, to, duration, origin, fadeWithScale, }: PulseLoopProps): react_jsx_runtime.JSX.Element;
+
+type SequenceStepProps = {
+    /** Visible duration of this step, ms. Animation completes within this window. */
+    duration?: number;
+    /** Delay BEFORE the step starts, after the previous step ends. ms. */
+    gap?: number;
+    /**
+     * Easing curve for the step's opacity transition. Defaults to plain.com-cadence
+     * cubic-bezier `[0.16, 1, 0.3, 1]`.
+     */
+    ease?: [number, number, number, number] | string;
+    /**
+     * When `true`, the step stays visible after its window. When `false` (default),
+     * the step fades out at the end. Useful for "things stack up" reveals.
+     */
+    persist?: boolean;
+    children: ReactNode;
+};
+/**
+ * `<Sequence.Step>` — one beat in a `<Sequence>`. Use only as a child of `<Sequence>`.
+ * The Sequence parent computes timing offsets; this component is just metadata.
+ */
+declare function SequenceStep(_: SequenceStepProps): ReactNode;
+type SequenceProps = {
+    children: ReactNode;
+    /** Loop the whole sequence. */
+    loop?: boolean;
+    /** Delay before the first step, ms. */
+    delay?: number;
+    /** Gap between the end of the last step and the loop restart, ms. */
+    loopGap?: number;
+    /** Optional callback per cycle end. Client-only. */
+    onCycle?: () => void;
+};
+/**
+ * `<Sequence>` — declarative animation choreography. Compose multiple beats with
+ * explicit durations and gaps; the sequence calculates absolute timings, fades each
+ * step in/out, and loops cleanly.
+ *
+ * @example
+ * ```tsx
+ * <Sequence loop>
+ *   <Sequence.Step duration={700}>
+ *     <RingDraw />
+ *   </Sequence.Step>
+ *   <Sequence.Step duration={500} gap={100}>
+ *     <AppearGrow><YourGlyph /></AppearGrow>
+ *   </Sequence.Step>
+ *   <Sequence.Step duration={800} persist>
+ *     <PulseLoop><YourGlyph /></PulseLoop>
+ *   </Sequence.Step>
+ * </Sequence>
+ * ```
+ */
+declare function Sequence({ children, loop, delay, loopGap }: SequenceProps): react_jsx_runtime.JSX.Element;
+declare namespace Sequence {
+    var Step: typeof SequenceStep;
+}
+
+type StrikethroughProps = {
+    /** Starting x in viewBox coords. */
+    x1: number;
+    /** Starting y. */
+    y1: number;
+    /** Ending x. */
+    x2: number;
+    /** Ending y. */
+    y2: number;
+    color?: string;
+    strokeWidth?: number;
+    duration?: number;
+    delay?: number;
+    loop?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Strikethrough — animates a single line being drawn between two points.
+ * Use it to "cross out" something visible (a clipboard field, a paper-mail icon)
+ * to convey "no more X".
+ */
+declare function Strikethrough({ x1, y1, x2, y2, color, strokeWidth, duration, delay, loop, className, style, }: StrikethroughProps): react_jsx_runtime.JSX.Element;
+
+type SweepDirection = "left-to-right" | "right-to-left" | "top-to-bottom" | "bottom-to-top";
+type SweepProps = {
+    children: ReactNode;
+    /** Total viewBox width the sweep should cover (default 256). */
+    width?: number;
+    /** Total viewBox height. */
+    height?: number;
+    direction?: SweepDirection;
+    delay?: number;
+    duration?: number;
+    loop?: boolean;
+};
+/**
+ * Sweep — wipes content into view by animating a `<clipPath>` rectangle.
+ * Use for reveal-on-scan effects (think OCR-line scanning across a letter).
+ */
+declare function Sweep({ children, width, height, direction, delay, duration, loop, }: SweepProps): react_jsx_runtime.JSX.Element;
+
+type WobbleProps = {
+    children: ReactNode;
+    /** Maximum rotation in degrees. */
+    amplitude?: number;
+    /** Full wobble cycle, ms. */
+    duration?: number;
+    /** Pivot point (CSS transform-origin syntax). */
+    origin?: string;
+    /** Delay before the wobble starts. */
+    delay?: number;
+};
+/**
+ * Wobble — small left-right rotation, ease-in-out, infinite. Use for "attention"
+ * on a CTA-adjacent glyph (e.g., a small bell on a notification badge).
+ */
+declare function Wobble({ children, amplitude, duration, origin, delay, }: WobbleProps): react_jsx_runtime.JSX.Element;
+
+type DriftProps = {
+    children: ReactNode;
+    /** Horizontal drift distance, viewBox units. */
+    dx?: number;
+    /** Vertical drift distance. */
+    dy?: number;
+    /** Full cycle (out-and-back), ms. */
+    duration?: number;
+};
+/**
+ * Drift — gentle floating motion. Use for ambient "alive" feeling on a static
+ * mark (subtle x/y oscillation). Not as urgent as Wobble.
+ */
+declare function Drift({ children, dx, dy, duration }: DriftProps): react_jsx_runtime.JSX.Element;
+
+export { AppearGrow, type AppearGrowProps, Drift, type DriftProps, PulseLoop, type PulseLoopProps, RingDraw, type RingDrawProps, Sequence, type SequenceProps, SequenceStep, type SequenceStepProps, Strikethrough, type StrikethroughProps, Sweep, type SweepDirection, type SweepProps, Wobble, type WobbleProps };

package/dist/motion/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { AppearGrow, Drift, PulseLoop, RingDraw, Sequence, SequenceStep, Strikethrough, Sweep, Wobble } from '../chunk-7325RQRP.js';

package/dist/shapes/index.d.ts

@@ -0,0 +1,62 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+
+type SquircleProps = {
+    /** Square edge in viewBox units. Default 256. */
+    size?: number;
+    /** Corner radius in viewBox units. Default 22% of size (iOS-squircle compatible). */
+    radius?: number;
+    /** Solid fill OR a gradient ID reference like `url(#bg)`. */
+    fill?: string;
+    /** Optional `<defs>` content (e.g., a `<linearGradient id="bg" />`). */
+    defs?: ReactNode;
+    /** Foreground content rendered inside the squircle in the same coord space. */
+    children?: ReactNode;
+    /** Width/height as DOM dimensions. Pass a number for px. */
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+};
+/**
+ * Squircle — rounded-square SVG container with iOS-compatible corner radius.
+ * The base shape for app icons across all 021 brands.
+ */
+declare function Squircle({ size, radius, fill, defs, children, width, height, className, style, ariaLabel, }: SquircleProps): react_jsx_runtime.JSX.Element;
+
+type RingProps = {
+    /** Center x in viewBox units. */
+    cx?: number;
+    /** Center y in viewBox units. */
+    cy?: number;
+    /**
+     * Mid-line radius (the centerline of the stroke). Outer = r + stroke/2, inner = r - stroke/2.
+     */
+    r?: number;
+    /** Stroke width (the ring's thickness). */
+    strokeWidth?: number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Ring — the "0" letterform as a thick stroked circle. Sized in SVG viewBox units;
+ * place inside a Squircle or other SVG root.
+ */
+declare function Ring({ cx, cy, r, strokeWidth, color, className, style, }: RingProps): react_jsx_runtime.JSX.Element;
+
+type DiscProps = {
+    cx?: number;
+    cy?: number;
+    r?: number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Disc — solid filled circle. Counterpart to Ring; useful as a postmark dot, pivot screw, etc.
+ */
+declare function Disc({ cx, cy, r, color, className, style, }: DiscProps): react_jsx_runtime.JSX.Element;
+
+export { Disc, type DiscProps, Ring, type RingProps, Squircle, type SquircleProps };

package/dist/shapes/index.js

@@ -0,0 +1 @@
+export { Disc, Ring, Squircle } from '../chunk-LJ4HZCAP.js';