import { R as RoundedPolygon, a as CornerRounding, b as Cubic, e as MutableCubic, M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.js';
export { A as ANGLE_EPSILON, C as CornerFeature, D as DISTANCE_EPSILON, E as EdgeFeature, F as FLOAT_PI, c as Feature, d as MD3Shapes, P as Point, f as PointTransformer, U as UNROUNDED, g as addPoints, h as clockwise, i as convex, j as cornerFeature, k as cornerRounding, l as directionVector, m as distance, n as distanceSquared, o as dividePoint, p as dotProduct, q as edgeFeature, r as getDirection, s as getDistance, t as getDistanceSquared, u as interpolate, v as lerpPoint, w as point, x as positiveModulo, y as radialToCartesian, z as rotate90, B as scalePoint, G as square, H as subtractPoints, I as transformFeature, J as transformPoint } from './md3-expressive-shapes-CPcfl_Hf.js';
import { ReactNode, CSSProperties } from 'react';
/**
* MD3 Corner Radius Token Scale.
* Ported from MD3 spec: https://m3.material.io/styles/shape/corner-radius-scale
*
* The Material 3 shape system uses a 10-step size-based scale.
* All values are in density-independent pixels (dp).
*
* @example
* import { MD3CornerRadius } from "@bug-on/m3-expressive";
*
* // Use a token name
* const rounding = { radius: MD3CornerRadius.large, smoothing: 0 };
*
* // Use with ShapeMedia
*
*/
declare const MD3CornerRadius: {
/** 0dp — Sharp corners */
readonly none: 0;
/** 4dp */
readonly extraSmall: 4;
/** 8dp */
readonly small: 8;
/** 12dp */
readonly medium: 12;
/** 16dp */
readonly large: 16;
/** 20dp (new in M3 Expressive) */
readonly largeIncreased: 20;
/** 28dp */
readonly extraLarge: 28;
/** 32dp (new in M3 Expressive) */
readonly extraLargeIncreased: 32;
/** 48dp (new in M3 Expressive) */
readonly extraExtraLarge: 48;
/** 9999dp — Fully rounded (pill/circle) */
readonly full: 9999;
};
/** Token name for MD3 corner radius scale. */
type MD3CornerRadiusToken = keyof typeof MD3CornerRadius;
/**
* Shape factory functions for the MD3 Expressive Shape Engine.
* Ported from androidx.graphics.shapes.Shapes.kt
*
* These functions create basic geometric shapes as RoundedPolygon instances.
* All shapes default to being centered at (0,0) with radius 1.
*/
/**
* Creates a circular shape approximated by a rounded polygon.
*
* @param numVertices - Number of polygon vertices (≥ 3, default: 8)
* @param radius - Circle radius (default: 1)
* @param centerX - Center X (default: 0)
* @param centerY - Center Y (default: 0)
* @returns A RoundedPolygon approximating a circle
*
* @example
* const myCircle = circle(8, 100, 0, 0);
*/
declare function circle(numVertices?: number, radius?: number, centerX?: number, centerY?: number): RoundedPolygon;
/**
* Creates a rectangular shape with optional rounding.
*
* @param width - Rectangle width (default: 2)
* @param height - Rectangle height (default: 2)
* @param rounding - Corner rounding for all corners (default: none)
* @param perVertexRounding - Per-corner rounding overrides (length must be 4)
* @param centerX - Center X (default: 0)
* @param centerY - Center Y (default: 0)
*
* @example
* // Rounded rectangle
* const roundedRect = rectangle(2, 1, { radius: 0.25, smoothing: 0 });
*/
declare function rectangle(width?: number, height?: number, rounding?: CornerRounding, perVertexRounding?: CornerRounding[], centerX?: number, centerY?: number): RoundedPolygon;
/**
* Creates a star-shaped polygon with inner and outer radii.
*
* If innerRadius equals radius, the result is a regular polygon with
* 2 × numVerticesPerRadius vertices.
*
* @param numVerticesPerRadius - Vertices per radius (outer + inner)
* @param radius - Outer radius (default: 1)
* @param innerRadius - Inner radius (default: 0.5)
* @param rounding - Corner rounding for outer vertices (default: none)
* @param innerRounding - Corner rounding for inner vertices (default: uses rounding)
* @param perVertexRounding - Full per-vertex rounding list
* @param centerX - Center X (default: 0)
* @param centerY - Center Y (default: 0)
*
* @example
* // 8-pointed star
* const star8 = star(8, 1, 0.4);
*
* @example
* // Rounded sunny shape
* const sunny = star(8, 1, 0.75, { radius: 0.15, smoothing: 0 }, { radius: 0.05, smoothing: 0 });
*/
declare function star(numVerticesPerRadius: number, radius?: number, innerRadius?: number, rounding?: CornerRounding, innerRounding?: CornerRounding, perVertexRounding?: CornerRounding[], centerX?: number, centerY?: number): RoundedPolygon;
/**
* Creates a pill shape: rectangle with fully-rounded short ends.
*
* @param width - Width of the pill (default: 2)
* @param height - Height of the pill (default: 1)
* @param smoothing - Corner smoothing factor [0,1] (default: 0)
* @param centerX - Center X (default: 0)
* @param centerY - Center Y (default: 0)
*
* @example
* const pillShape = pill(3, 1);
*/
declare function pill(width?: number, height?: number, smoothing?: number, centerX?: number, centerY?: number): RoundedPolygon;
/**
* Creates a pill-star shape: like a pill but with star-like inner/outer vertices.
*
* @param width - Width (default: 2)
* @param height - Height (default: 1)
* @param numVerticesPerRadius - Number of point pairs per radius
* @param innerRadiusRatio - Inner radius as fraction of outer (default: 0.5)
* @param rounding - Outer vertex rounding (default: none)
* @param innerRounding - Inner vertex rounding (default: uses rounding)
* @param perVertexRounding - Full per-vertex rounding list
* @param vertexSpacing - Spacing factor [0,1] (default: 0.5)
* @param centerX - Center X (default: 0)
* @param centerY - Center Y (default: 0)
*/
declare function pillStar(width?: number, height?: number, numVerticesPerRadius?: number, innerRadiusRatio?: number, rounding?: CornerRounding, innerRounding?: CornerRounding, perVertexRounding?: CornerRounding[], vertexSpacing?: number, centerX?: number, centerY?: number): RoundedPolygon;
/**
* DoubleMapper: bidirectional mapper used in the Morph matching algorithm.
* Maps progress values from polygon1 space → polygon2 space and vice versa.
*/
interface DoubleMapper {
/** Maps a progress value from the start polygon to the end polygon. */
map(progress: number): number;
/** Maps a progress value from the end polygon back to the start polygon. */
mapBack(progress: number): number;
}
/**
* Creates a DoubleMapper from two parallel arrays of mapped progress values.
* Used internally by featureMapper.
*
* @param fromValues - Progress values in polygon1 space [0..1]
* @param toValues - Corresponding progress values in polygon2 space [0..1]
*/
declare function createDoubleMapper(fromValues: number[], toValues: number[]): DoubleMapper;
/**
* Polygon measurement utilities for the Morph engine.
* Ported from androidx.graphics.shapes.PolygonMeasure.kt
*
* Measures the outline of a RoundedPolygon by arc length, normalizing
* progress values to [0, 1]. Used by Morph to match curves between polygons.
*/
/** A Cubic with its start/end outline progress values normalized to [0, 1]. */
interface MeasuredCubic {
readonly cubic: Cubic;
readonly startOutlineProgress: number;
readonly endOutlineProgress: number;
}
/** Feature info extracted from a measured polygon (for featureMapper). */
interface MeasuredFeature {
/** Progress at the midpoint of this feature's central arc */
readonly progress: number;
/** Whether this corner is convex */
readonly convex: boolean;
}
/**
* A list of MeasuredCubics covering the full outline of a polygon.
* Provides methods to cut and shift the polygon at a given progress point.
*/
declare class MeasuredPolygon {
readonly measuredCubics: MeasuredCubic[];
readonly features: MeasuredFeature[];
private constructor();
get size(): number;
getOrNull(index: number): MeasuredCubic | null;
/**
* Cuts the polygon at cutPoint and rotates so that cutPoint becomes progress=0.
* Returns a new MeasuredPolygon with adjusted progress values.
* @param cutPoint - Progress value [0, 1] at which to cut
*/
cutAndShift(cutPoint: number): MeasuredPolygon;
/**
* Cuts a MeasuredCubic at a given outline progress, returning [segment, rest].
*/
cutAtProgress(measuredCubic: MeasuredCubic, progress: number): [MeasuredCubic, MeasuredCubic];
/**
* Measures a RoundedPolygon's outline by arc length.
* Returns a MeasuredPolygon with normalized progress in [0, 1].
*/
static measurePolygon(polygon: RoundedPolygon): MeasuredPolygon;
}
/**
* Feature mapping for the Morph engine.
* Ported from androidx.graphics.shapes.FeatureMapping.kt
*
* Maps corners between two polygons by proximity, enabling the Morph engine
* to create smooth transitions between shapes with different vertex counts.
*/
/**
* Creates a DoubleMapper that maps progress values between two polygons
* based on matching their convex corners by proximity.
*
* The algorithm:
* 1. Extract convex corner progress values from both polygons
* 2. Match each corner in polygon1 to the closest corner of the same type in polygon2
* 3. Build a piecewise-linear bidirectional mapper
*
* @param features1 - Measured features from polygon 1
* @param features2 - Measured features from polygon 2
* @returns A DoubleMapper for bidirectional progress mapping
*/
declare function featureMapper(features1: MeasuredFeature[], features2: MeasuredFeature[]): DoubleMapper;
/**
* Morph — animates between two RoundedPolygon shapes.
* Ported from androidx.graphics.shapes.Morph.kt
*
* The Morph class pre-computes a list of matched cubic pairs at construction time.
* Animating between shapes is then a simple per-pair linear interpolation.
*
* @example
* const morph = new Morph(MD3Shapes.circle, MD3Shapes.flower);
* const cubics = morph.asCubics(0.5); // halfway between circle and flower
*
* @example
* // Zero-allocation iteration (for animation loops)
* morph.forEachCubic(progress, (c) => {
* ctx.bezierCurveTo(c.control0X, c.control0Y, c.control1X, c.control1Y, c.anchor1X, c.anchor1Y);
* });
*/
/** A matched pair of cubics (start shape, end shape). */
type CubicPair = readonly [Cubic, Cubic];
/**
* Animates between two RoundedPolygon shapes.
*
* At construction time, Morph matches the cubic curves of both shapes using
* the featureMapper algorithm. This produces a list of CubicPairs, which can
* then be interpolated at any progress value.
*/
declare class Morph {
private readonly start;
private readonly end;
/** Pre-computed list of matched cubic pairs. @internal */
private readonly morphMatch;
/**
* Creates a Morph between two shapes.
* @param start - Starting shape
* @param end - Ending shape
*/
constructor(start: RoundedPolygon, end: RoundedPolygon);
/**
* Returns the interpolated shape at the given progress as a list of Cubics.
*
* Note: This allocates a new list. For performance-critical animation loops,
* use {@link forEachCubic} instead.
*
* @param progress - Value in [0, 1]. 0 = start shape, 1 = end shape.
* Values outside [0, 1] produce exaggerated shapes (useful for bounce/overshoot).
* @returns List of interpolated Cubic curves forming the morphed shape
*/
asCubics(progress: number): Cubic[];
/**
* Iterates over the morphed cubics without allocating new Cubic instances.
* Reuses a single MutableCubic for each callback invocation.
*
* @param progress - Value in [0, 1]
* @param callback - Called for each interpolated cubic
*
* @example
* const mutable = new MutableCubic();
* morph.forEachCubic(progress, mutable, (c) => {
* path.bezierCurveTo(c.control0X, c.control0Y, c.control1X, c.control1Y, c.anchor1X, c.anchor1Y);
* });
*/
forEachCubic(progress: number, mutableOrCallback: MutableCubic | ((c: MutableCubic) => void), callback?: (c: MutableCubic) => void): void;
/**
* Calculates the axis-aligned bounding box of the morph (union of start + end bounds).
* @param approximate - Use faster approximate bounds (default: true)
*/
calculateBounds(approximate?: boolean): [number, number, number, number];
/**
* Calculates the max bounding square (union of start + end max bounds).
*/
calculateMaxBounds(): [number, number, number, number];
/**
* Matches cubic curves between two polygons.
*
* Algorithm:
* 1. Measure both polygons (arc-length normalized progress)
* 2. Use featureMapper to determine correspondence between features
* 3. Cut and shift polygon2 so both start at the same logical point
* 4. Walk both lists together, splitting curves when one extends past the other
*
* @internal
*/
private static match;
}
/**
* Rendering utilities: convert RoundedPolygon / Cubic[] to SVG paths and CSS clip-paths.
*
* All output paths use absolute coordinates relative to the shape's natural
* normalized space ([0,1]×[0,1]) or scaled to pixel dimensions.
*/
/**
* Converts a list of Cubic Bézier curves to an SVG path string.
*
* @param cubics - Array of Cubic curves (must be contiguous, closed)
* @param width - Width in pixels to scale x coordinates (default: 1 = normalized)
* @param height - Height in pixels to scale y coordinates (default: 1 = normalized)
* @returns SVG path data string, e.g. "M 0.5 0 C 1 0 1 1 0.5 1 Z"
*
* @example
* const path = toSvgPath(MD3Shapes.circle.cubics, 200, 200);
* // Use in
*/
declare function toSvgPath(cubics: Cubic[], width?: number, height?: number): string;
/**
* Converts a RoundedPolygon to a CSS `clip-path: path(...)` value.
*
* @param polygon - Normalized RoundedPolygon (values in [0,1])
* @param width - Element width in pixels
* @param height - Element height in pixels
* @returns CSS clip-path value, e.g. "path('M ...')"
*
* @example
* const clipPath = toClipPath(MD3Shapes.sunny, 200, 200);
* element.style.clipPath = clipPath;
*/
declare function toClipPath(polygon: RoundedPolygon, width: number, height: number): string;
/**
* Returns a CSS clip-path for a morphed shape at the given progress.
*
* @param morph - A pre-constructed Morph instance
* @param progress - Interpolation factor in [0, 1]
* @param width - Element width in pixels
* @param height - Element height in pixels
* @returns CSS clip-path value
*
* @example
* const morph = new Morph(MD3Shapes.circle, MD3Shapes.flower);
* element.style.clipPath = interpolatePath(morph, 0.5, 200, 200);
*/
declare function interpolatePath(morph: Morph, progress: number, width: number, height: number): string;
/**
* Types for ShapeMedia React components.
*/
/** A shape reference: either a named MD3 shape or a custom RoundedPolygon. */
type ShapeRef = MD3ShapeName | RoundedPolygon;
/**
* Trigger for morphing animation.
* - "hover" — morph on mouse enter/leave
* - "click" — morph on click (toggle)
* - "focus" — morph on focus/blur
* - "scroll" — morph driven by scroll progress (requires scrollProgress prop)
* - "none" — no automatic morphing (use controlled mode)
*/
type MorphTrigger = "hover" | "click" | "focus" | "scroll" | "none";
/** Options for the morph animation. */
interface ShapeMorphOptions {
/** Duration in seconds (default: 0.3) */
duration?: number;
/** Easing: any CSS easing string or Framer Motion easing (default: "ease-in-out") */
easing?: string | number[];
}
/** Return value of the useShapeMorph hook. */
interface UseShapeMorphResult {
/**
* CSS clip-path value for the current morphed shape.
* Apply to an element's style.clipPath.
*/
clipPath: string;
/** Whether the morph is currently at the end shape (progress=1). */
isActive: boolean;
/** Programmatically trigger morph to end shape. */
activate: () => void;
/** Programmatically reverse morph to start shape. */
deactivate: () => void;
/** Set an exact progress value (0=start, 1=end). */
setProgress: (progress: number) => void;
/** Event handlers for auto-wiring to DOM elements. */
handlers: {
onMouseEnter?: () => void;
onMouseLeave?: () => void;
onClick?: () => void;
onFocus?: () => void;
onBlur?: () => void;
};
}
/** Props for the ShapeMedia component. */
interface ShapeMediaProps {
/** The base shape (at rest). */
shape: ShapeRef;
/**
* The target shape to morph to (optional).
* When not provided, no morphing animation occurs.
*/
morphTo?: ShapeRef;
/** Which interaction triggers the morph (default: "hover"). */
morphOn?: MorphTrigger;
/** Animation options. */
morphOptions?: ShapeMorphOptions;
/**
* External scroll progress in [0, 1], used when morphOn="scroll".
* Connect to useScroll / scrollYProgress from Framer Motion.
*/
scrollProgress?: number;
/** Width in pixels. If not provided, uses element's natural width. */
width?: number;
/** Height in pixels. If not provided, uses element's natural height. */
height?: number;
/** Children to render inside the clipped shape. */
children?: ReactNode;
/** Additional CSS class names. */
className?: string;
/** Inline styles (merged with shape clip-path). */
style?: CSSProperties;
/** ARIA label for accessibility. */
"aria-label"?: string;
/** ARIA role (default: "presentation" if no aria-label, else "img"). */
role?: string;
/** Whether the component is disabled (disables morphing). */
disabled?: boolean;
}
/** Props for ShapeIcon — simplified fixed-size shape wrapper. */
interface ShapeIconProps {
/** The base shape. */
shape: ShapeRef;
/** Shape to morph to on hover. */
morphTo?: ShapeRef;
/** Size in pixels (width = height). Default: 48. */
size?: number;
/** Icon content. */
children?: ReactNode;
/** CSS class names. */
className?: string;
/** Inline styles. */
style?: CSSProperties;
/** Background color. Default: "currentColor". */
color?: string;
/** ARIA label. */
"aria-label"?: string;
}
/** Props for ShapeSvg — renders the shape as an SVG path. */
interface ShapeSvgProps {
/** The shape to render. */
shape: ShapeRef;
/** SVG viewport width (default: 100). */
width?: number;
/** SVG viewport height (default: 100). */
height?: number;
/** Path fill color (default: "currentColor"). */
fill?: string;
/** Path stroke color (default: "none"). */
stroke?: string;
/** Path stroke width (default: 0). */
strokeWidth?: number;
/** CSS class names. */
className?: string;
/** Inline styles. */
style?: CSSProperties;
/** ARIA label. */
"aria-label"?: string;
/** Morph progress [0, 1] — set to animate between shape and morphTo. */
progress?: number;
/** Target shape for morphed SVG rendering. */
morphTo?: ShapeRef;
}
/**
* ShapeIcon — simplified fixed-size shape wrapper for icons and small elements.
* Morphs to a circle on hover by default.
*
* @example
*
*
*
*/
/**
* ShapeIcon renders a fixed-size shape with icon content inside.
*/
declare function ShapeIcon({ shape, morphTo, size, children, className, style, color, "aria-label": ariaLabel, }: ShapeIconProps): React.JSX.Element;
/**
* ShapeMedia — wraps any UI element (image, video, button, div) with an MD3
* Expressive shape clip-path, with optional shape morphing animation.
*
* @example
* // Static shape
*
* 
*
*
* @example
* // Shape morph on hover
*
* 
*
*/
/**
* ShapeMedia wraps children in a shape clip-path with optional morphing animation.
*
* @remarks
* - Requires "use client" (uses ResizeObserver, animation APIs).
* - Use ShapeMediaServer for SSR-only static rendering.
* - Automatically handles `prefers-reduced-motion`.
*
* @param props - {@link ShapeMediaProps}
*/
declare function ShapeMedia({ shape, morphTo, morphOn, morphOptions, scrollProgress, width: widthProp, height: heightProp, children, className, style, "aria-label": ariaLabel, role, disabled, }: ShapeMediaProps): React.JSX.Element;
/**
* ShapeMediaServer — SSR-safe static variant of ShapeMedia.
*
* Renders a static clip-path without any client-side JavaScript or hydration.
* Use this in Next.js Server Components or any SSR context where you don't
* need morphing animation.
*
* @example
* // In a Next.js Server Component
* import { ShapeMediaServer } from "@bug-on/m3-expressive";
*
* export default function ProfileCard() {
* return (
*
*
*
* );
* }
*/
interface ShapeMediaServerProps {
/** The shape to render. */
shape: ShapeRef;
/** Width in pixels. */
width: number;
/** Height in pixels. */
height: number;
/** Children to render inside the clipped area. */
children?: ReactNode;
/** Additional CSS class names. */
className?: string;
/** Inline styles. */
style?: CSSProperties;
/** ARIA label. */
"aria-label"?: string;
/** ARIA role. */
role?: string;
}
/**
* SSR-safe shape clip-path wrapper. No animations, no JS required.
*/
declare function ShapeMediaServer({ shape, width, height, children, className, style, "aria-label": ariaLabel, role, }: ShapeMediaServerProps): React.JSX.Element;
/**
* ShapeSvg — renders a shape as an inline SVG path element.
* Useful for decorative shapes, loading skeletons, and outlines.
* Supports morphed rendering via a `progress` prop.
*
* @example
* // Static shape
*
*
* @example
* // Morphed shape (controlled externally)
*
*/
/**
* ShapeSvg renders a shape or morphed shape as a plain SVG path.
*/
declare function ShapeSvg({ shape, morphTo, progress, width, height, fill, stroke, strokeWidth, className, style, "aria-label": ariaLabel, }: ShapeSvgProps): React.JSX.Element;
/**
* useShapeMorph — React hook for shape morphing animations.
*
* Manages the Morph instance and animated progress value, returning a
* CSS clip-path string that updates with every animation frame.
*
* @example
* const { clipPath, handlers } = useShapeMorph({
* shape: "circle",
* morphTo: "flower",
* morphOn: "hover",
* width: 200,
* height: 200,
* });
*
* return {children}
;
*/
interface UseShapeMorphOptions {
shape: ShapeRef;
morphTo?: ShapeRef;
morphOn?: MorphTrigger;
morphOptions?: ShapeMorphOptions;
scrollProgress?: number;
width: number;
height: number;
disabled?: boolean;
}
/**
* Hook for shape morphing with animated clip-path output.
*/
declare function useShapeMorph({ shape, morphTo, morphOn, morphOptions, scrollProgress, width, height, disabled, }: UseShapeMorphOptions): UseShapeMorphResult;
export { CornerRounding, Cubic, type CubicPair, type DoubleMapper, MD3CornerRadius, type MD3CornerRadiusToken, MD3ShapeName, type MeasuredCubic, type MeasuredFeature, MeasuredPolygon, Morph, type MorphTrigger, MutableCubic, RoundedPolygon, ShapeIcon, type ShapeIconProps, ShapeMedia, type ShapeMediaProps, ShapeMediaServer, type ShapeMorphOptions, type ShapeRef, ShapeSvg, type ShapeSvgProps, type UseShapeMorphResult, circle, createDoubleMapper, featureMapper, interpolatePath, pill, pillStar, rectangle, star, toClipPath, toSvgPath, useShapeMorph };