@bug-on/m3-expressive 1.3.5 → 1.3.6

package/dist/shapes.d.mts

@@ -1,7 +1,50 @@
-import { R as RoundedPolygon, a as CornerRounding, b as Cubic, e as MutableCubic, M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.mjs';
-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.mjs';
+import { M as MD3ShapeName, R as RoundedPolygon, a as CornerRounding, b as Cubic, e as MutableCubic } from './md3-expressive-shapes-wk_98LJh.mjs';
+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 formatCoordinate, s as getDirection, t as getDistance, u as getDistanceSquared, v as interpolate, w as lerpPoint, x as point, y as positiveModulo, z as radialToCartesian, B as rotate90, G as scalePoint, H as square, I as subtractPoints, J as transformFeature, K as transformPoint } from './md3-expressive-shapes-wk_98LJh.mjs';
 import { ReactNode, CSSProperties } from 'react';
 
+/**
+ * Material Design 3 Expressive — Shape Pairings & Families.
+ *
+ * Defines natural, expressive bidirectional morph pairings for all 35 MD3 shapes.
+ * Organized by design families:
+ * - Organic & Floral
+ * - Starburst & Explosive
+ * - Clover, Gem & Diamond
+ * - Cookies & Geometric Multi-sided
+ * - Rounded & Architectural
+ * - Polygonal & Directional
+ */
+
+/**
+ * Curated bidirectional morph pairings for MD3 Expressive shapes.
+ * Each shape is paired with a harmonious companion shape within its design family.
+ */
+declare const MD3_SHAPE_PAIRINGS: Readonly<Record<MD3ShapeName, MD3ShapeName>>;
+/**
+ * Shape families grouping shapes by structural and expressive traits.
+ */
+declare const MD3_SHAPE_FAMILIES: {
+    readonly organic: readonly ["circle", "flower", "sunny", "verySunny", "bun", "clamshell", "puffy"];
+    readonly starburst: readonly ["burst", "softBurst", "boom", "softBoom", "cookie12Sided"];
+    readonly cloverAndGems: readonly ["diamond", "puffyDiamond", "clover4Leaf", "clover8Leaf", "gem", "heart"];
+    readonly cookiesAndPolygons: readonly ["cookie4Sided", "cookie6Sided", "cookie7Sided", "cookie9Sided", "square"];
+    readonly roundedContainers: readonly ["pill", "oval", "arch", "semiCircle", "slanted"];
+    readonly directionalAndPixel: readonly ["triangle", "arrow", "pentagon", "fan", "ghostish", "pixelTriangle", "pixelCircle"];
+};
+type MD3ShapeFamily = keyof typeof MD3_SHAPE_FAMILIES;
+/**
+ * Returns the recommended morph target shape for a given shape.
+ * If a custom RoundedPolygon is passed without a name match, defaults to "circle".
+ *
+ * @param shape - Shape name or RoundedPolygon instance
+ * @returns The recommended companion MD3 shape name
+ *
+ * @example
+ * getRecommendedMorphShape("flower"); // "sunny"
+ * getRecommendedMorphShape("burst"); // "softBurst"
+ */
+declare function getRecommendedMorphShape(shape: MD3ShapeName | RoundedPolygon): MD3ShapeName;
+
 /**
  * MD3 Corner Radius Token Scale.
  * Ported from MD3 spec: https://m3.material.io/styles/shape/corner-radius-scale
@@ -171,6 +214,8 @@ interface MeasuredFeature {
     readonly progress: number;
     /** Whether this corner is convex */
     readonly convex: boolean;
+    /** Polar angle in radians [-PI, PI] from polygon center to feature midpoint */
+    readonly angle: number;
 }
 /**
  * A list of MeasuredCubics covering the full outline of a polygon.
@@ -209,12 +254,10 @@ declare class MeasuredPolygon {
 
 /**
  * Creates a DoubleMapper that maps progress values between two polygons
- * based on matching their convex corners by proximity.
+ * based on matching their features by optimal cyclic alignment.
  *
- * 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
+ * Finds the cyclic phase shift that minimizes both perimeter distance
+ * and spatial angular difference between features of polygon 1 and polygon 2.
  *
  * @param features1 - Measured features from polygon 1
  * @param features2 - Measured features from polygon 2
@@ -264,13 +307,30 @@ declare class Morph {
      * 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.
+     * use {@link toSvgPath} or {@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[];
+    /**
+     * Returns an SVG path data string for the morphed shape at the given progress.
+     * Directly evaluates coordinates without allocating intermediate Cubic objects.
+     *
+     * @param progress - Value in [0, 1]
+     * @param width - Target pixel width (default: 1)
+     * @param height - Target pixel height (default: 1)
+     */
+    toSvgPath(progress: number, width?: number, height?: number): string;
+    /**
+     * Returns a CSS clip-path value for the morphed shape at the given progress.
+     *
+     * @param progress - Value in [0, 1]
+     * @param width - Element width in pixels
+     * @param height - Element height in pixels
+     */
+    toClipPath(progress: number, width: number, height: number): string;
     /**
      * Iterates over the morphed cubics without allocating new Cubic instances.
      * Reuses a single MutableCubic for each callback invocation.
@@ -408,9 +468,10 @@ interface ShapeMediaProps {
     shape: ShapeRef;
     /**
      * The target shape to morph to (optional).
+     * If "auto", picks the recommended MD3 shape pairing.
      * When not provided, no morphing animation occurs.
      */
-    morphTo?: ShapeRef;
+    morphTo?: ShapeRef | "auto";
     /** Which interaction triggers the morph (default: "hover"). */
     morphOn?: MorphTrigger;
     /** Animation options. */
@@ -441,8 +502,8 @@ interface ShapeMediaProps {
 interface ShapeIconProps {
     /** The base shape. */
     shape: ShapeRef;
-    /** Shape to morph to on hover. */
-    morphTo?: ShapeRef;
+    /** Shape to morph to on hover (or "auto" for recommended pairing). */
+    morphTo?: ShapeRef | "auto";
     /** Size in pixels (width = height). Default: 48. */
     size?: number;
     /** Icon content. */
@@ -478,8 +539,52 @@ interface ShapeSvgProps {
     "aria-label"?: string;
     /** Morph progress [0, 1] — set to animate between shape and morphTo. */
     progress?: number;
-    /** Target shape for morphed SVG rendering. */
-    morphTo?: ShapeRef;
+    /** Target shape for morphed SVG rendering (or "auto" for recommended pairing). */
+    morphTo?: ShapeRef | "auto";
+}
+/** Options for useShapeSequenceMorph hook. */
+interface UseShapeSequenceMorphOptions {
+    /** Array of shapes to morph through in sequence. */
+    shapes: ShapeRef[];
+    /** Duration per morph in seconds (default: 0.6). */
+    duration?: number;
+    /** Interval between morph steps in seconds when autoplay is enabled (default: 2.0). */
+    interval?: number;
+    /** Whether to automatically cycle through shapes (default: false). */
+    autoplay?: boolean;
+    /** Whether to loop back to the first shape after reaching the end (default: true). */
+    loop?: boolean;
+    /** Custom animation options. */
+    morphOptions?: ShapeMorphOptions;
+    /** Output clip-path width in pixels. */
+    width: number;
+    /** Output clip-path height in pixels. */
+    height: number;
+    /** Whether the sequence animation is disabled. */
+    disabled?: boolean;
+}
+/** Return value of useShapeSequenceMorph hook. */
+interface UseShapeSequenceMorphResult {
+    /** CSS clip-path string for the current interpolated frame. */
+    clipPath: string;
+    /** Index of current base shape in the shapes array. */
+    currentIndex: number;
+    /** Index of next target shape. */
+    nextIndex: number;
+    /** Current morph progress between currentIndex and nextIndex [0, 1]. */
+    progress: number;
+    /** Whether autoplay is currently active. */
+    isPlaying: boolean;
+    /** Advance to the next shape in the sequence. */
+    next: () => void;
+    /** Go back to the previous shape in the sequence. */
+    prev: () => void;
+    /** Jump directly to a specific shape index. */
+    goTo: (index: number) => void;
+    /** Start autoplay cycling. */
+    play: () => void;
+    /** Pause autoplay cycling. */
+    pause: () => void;
 }
 
 /**
@@ -608,7 +713,7 @@ declare function ShapeSvg({ shape, morphTo, progress, width, height, fill, strok
 
 interface UseShapeMorphOptions {
     shape: ShapeRef;
-    morphTo?: ShapeRef;
+    morphTo?: ShapeRef | "auto";
     morphOn?: MorphTrigger;
     morphOptions?: ShapeMorphOptions;
     scrollProgress?: number;
@@ -621,4 +726,25 @@ interface UseShapeMorphOptions {
  */
 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 };
+/**
+ * useShapeSequenceMorph — React hook for animating through a sequence of shapes.
+ *
+ * Smoothly morphs through an array of MD3 Expressive shapes, supporting
+ * autoplay, manual step-by-step navigation, and looping.
+ *
+ * @example
+ * const { clipPath, next, prev, isPlaying } = useShapeSequenceMorph({
+ *   shapes: ["circle", "flower", "sunny", "burst"],
+ *   autoplay: true,
+ *   interval: 2.5,
+ *   duration: 0.6,
+ *   width: 200,
+ *   height: 200,
+ * });
+ *
+ * return <div style={{ clipPath }}>...</div>;
+ */
+
+declare function useShapeSequenceMorph({ shapes, duration, interval, autoplay, loop, morphOptions, width, height, disabled, }: UseShapeSequenceMorphOptions): UseShapeSequenceMorphResult;
+
+export { CornerRounding, Cubic, type CubicPair, type DoubleMapper, MD3CornerRadius, type MD3CornerRadiusToken, type MD3ShapeFamily, MD3ShapeName, MD3_SHAPE_FAMILIES, MD3_SHAPE_PAIRINGS, 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, type UseShapeSequenceMorphOptions, type UseShapeSequenceMorphResult, circle, createDoubleMapper, featureMapper, getRecommendedMorphShape, interpolatePath, pill, pillStar, rectangle, star, toClipPath, toSvgPath, useShapeMorph, useShapeSequenceMorph };

package/dist/shapes.d.ts

@@ -1,7 +1,50 @@
-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 { M as MD3ShapeName, R as RoundedPolygon, a as CornerRounding, b as Cubic, e as MutableCubic } from './md3-expressive-shapes-wk_98LJh.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 formatCoordinate, s as getDirection, t as getDistance, u as getDistanceSquared, v as interpolate, w as lerpPoint, x as point, y as positiveModulo, z as radialToCartesian, B as rotate90, G as scalePoint, H as square, I as subtractPoints, J as transformFeature, K as transformPoint } from './md3-expressive-shapes-wk_98LJh.js';
 import { ReactNode, CSSProperties } from 'react';
 
+/**
+ * Material Design 3 Expressive — Shape Pairings & Families.
+ *
+ * Defines natural, expressive bidirectional morph pairings for all 35 MD3 shapes.
+ * Organized by design families:
+ * - Organic & Floral
+ * - Starburst & Explosive
+ * - Clover, Gem & Diamond
+ * - Cookies & Geometric Multi-sided
+ * - Rounded & Architectural
+ * - Polygonal & Directional
+ */
+
+/**
+ * Curated bidirectional morph pairings for MD3 Expressive shapes.
+ * Each shape is paired with a harmonious companion shape within its design family.
+ */
+declare const MD3_SHAPE_PAIRINGS: Readonly<Record<MD3ShapeName, MD3ShapeName>>;
+/**
+ * Shape families grouping shapes by structural and expressive traits.
+ */
+declare const MD3_SHAPE_FAMILIES: {
+    readonly organic: readonly ["circle", "flower", "sunny", "verySunny", "bun", "clamshell", "puffy"];
+    readonly starburst: readonly ["burst", "softBurst", "boom", "softBoom", "cookie12Sided"];
+    readonly cloverAndGems: readonly ["diamond", "puffyDiamond", "clover4Leaf", "clover8Leaf", "gem", "heart"];
+    readonly cookiesAndPolygons: readonly ["cookie4Sided", "cookie6Sided", "cookie7Sided", "cookie9Sided", "square"];
+    readonly roundedContainers: readonly ["pill", "oval", "arch", "semiCircle", "slanted"];
+    readonly directionalAndPixel: readonly ["triangle", "arrow", "pentagon", "fan", "ghostish", "pixelTriangle", "pixelCircle"];
+};
+type MD3ShapeFamily = keyof typeof MD3_SHAPE_FAMILIES;
+/**
+ * Returns the recommended morph target shape for a given shape.
+ * If a custom RoundedPolygon is passed without a name match, defaults to "circle".
+ *
+ * @param shape - Shape name or RoundedPolygon instance
+ * @returns The recommended companion MD3 shape name
+ *
+ * @example
+ * getRecommendedMorphShape("flower"); // "sunny"
+ * getRecommendedMorphShape("burst"); // "softBurst"
+ */
+declare function getRecommendedMorphShape(shape: MD3ShapeName | RoundedPolygon): MD3ShapeName;
+
 /**
  * MD3 Corner Radius Token Scale.
  * Ported from MD3 spec: https://m3.material.io/styles/shape/corner-radius-scale
@@ -171,6 +214,8 @@ interface MeasuredFeature {
     readonly progress: number;
     /** Whether this corner is convex */
     readonly convex: boolean;
+    /** Polar angle in radians [-PI, PI] from polygon center to feature midpoint */
+    readonly angle: number;
 }
 /**
  * A list of MeasuredCubics covering the full outline of a polygon.
@@ -209,12 +254,10 @@ declare class MeasuredPolygon {
 
 /**
  * Creates a DoubleMapper that maps progress values between two polygons
- * based on matching their convex corners by proximity.
+ * based on matching their features by optimal cyclic alignment.
  *
- * 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
+ * Finds the cyclic phase shift that minimizes both perimeter distance
+ * and spatial angular difference between features of polygon 1 and polygon 2.
  *
  * @param features1 - Measured features from polygon 1
  * @param features2 - Measured features from polygon 2
@@ -264,13 +307,30 @@ declare class Morph {
      * 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.
+     * use {@link toSvgPath} or {@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[];
+    /**
+     * Returns an SVG path data string for the morphed shape at the given progress.
+     * Directly evaluates coordinates without allocating intermediate Cubic objects.
+     *
+     * @param progress - Value in [0, 1]
+     * @param width - Target pixel width (default: 1)
+     * @param height - Target pixel height (default: 1)
+     */
+    toSvgPath(progress: number, width?: number, height?: number): string;
+    /**
+     * Returns a CSS clip-path value for the morphed shape at the given progress.
+     *
+     * @param progress - Value in [0, 1]
+     * @param width - Element width in pixels
+     * @param height - Element height in pixels
+     */
+    toClipPath(progress: number, width: number, height: number): string;
     /**
      * Iterates over the morphed cubics without allocating new Cubic instances.
      * Reuses a single MutableCubic for each callback invocation.
@@ -408,9 +468,10 @@ interface ShapeMediaProps {
     shape: ShapeRef;
     /**
      * The target shape to morph to (optional).
+     * If "auto", picks the recommended MD3 shape pairing.
      * When not provided, no morphing animation occurs.
      */
-    morphTo?: ShapeRef;
+    morphTo?: ShapeRef | "auto";
     /** Which interaction triggers the morph (default: "hover"). */
     morphOn?: MorphTrigger;
     /** Animation options. */
@@ -441,8 +502,8 @@ interface ShapeMediaProps {
 interface ShapeIconProps {
     /** The base shape. */
     shape: ShapeRef;
-    /** Shape to morph to on hover. */
-    morphTo?: ShapeRef;
+    /** Shape to morph to on hover (or "auto" for recommended pairing). */
+    morphTo?: ShapeRef | "auto";
     /** Size in pixels (width = height). Default: 48. */
     size?: number;
     /** Icon content. */
@@ -478,8 +539,52 @@ interface ShapeSvgProps {
     "aria-label"?: string;
     /** Morph progress [0, 1] — set to animate between shape and morphTo. */
     progress?: number;
-    /** Target shape for morphed SVG rendering. */
-    morphTo?: ShapeRef;
+    /** Target shape for morphed SVG rendering (or "auto" for recommended pairing). */
+    morphTo?: ShapeRef | "auto";
+}
+/** Options for useShapeSequenceMorph hook. */
+interface UseShapeSequenceMorphOptions {
+    /** Array of shapes to morph through in sequence. */
+    shapes: ShapeRef[];
+    /** Duration per morph in seconds (default: 0.6). */
+    duration?: number;
+    /** Interval between morph steps in seconds when autoplay is enabled (default: 2.0). */
+    interval?: number;
+    /** Whether to automatically cycle through shapes (default: false). */
+    autoplay?: boolean;
+    /** Whether to loop back to the first shape after reaching the end (default: true). */
+    loop?: boolean;
+    /** Custom animation options. */
+    morphOptions?: ShapeMorphOptions;
+    /** Output clip-path width in pixels. */
+    width: number;
+    /** Output clip-path height in pixels. */
+    height: number;
+    /** Whether the sequence animation is disabled. */
+    disabled?: boolean;
+}
+/** Return value of useShapeSequenceMorph hook. */
+interface UseShapeSequenceMorphResult {
+    /** CSS clip-path string for the current interpolated frame. */
+    clipPath: string;
+    /** Index of current base shape in the shapes array. */
+    currentIndex: number;
+    /** Index of next target shape. */
+    nextIndex: number;
+    /** Current morph progress between currentIndex and nextIndex [0, 1]. */
+    progress: number;
+    /** Whether autoplay is currently active. */
+    isPlaying: boolean;
+    /** Advance to the next shape in the sequence. */
+    next: () => void;
+    /** Go back to the previous shape in the sequence. */
+    prev: () => void;
+    /** Jump directly to a specific shape index. */
+    goTo: (index: number) => void;
+    /** Start autoplay cycling. */
+    play: () => void;
+    /** Pause autoplay cycling. */
+    pause: () => void;
 }
 
 /**
@@ -608,7 +713,7 @@ declare function ShapeSvg({ shape, morphTo, progress, width, height, fill, strok
 
 interface UseShapeMorphOptions {
     shape: ShapeRef;
-    morphTo?: ShapeRef;
+    morphTo?: ShapeRef | "auto";
     morphOn?: MorphTrigger;
     morphOptions?: ShapeMorphOptions;
     scrollProgress?: number;
@@ -621,4 +726,25 @@ interface UseShapeMorphOptions {
  */
 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 };
+/**
+ * useShapeSequenceMorph — React hook for animating through a sequence of shapes.
+ *
+ * Smoothly morphs through an array of MD3 Expressive shapes, supporting
+ * autoplay, manual step-by-step navigation, and looping.
+ *
+ * @example
+ * const { clipPath, next, prev, isPlaying } = useShapeSequenceMorph({
+ *   shapes: ["circle", "flower", "sunny", "burst"],
+ *   autoplay: true,
+ *   interval: 2.5,
+ *   duration: 0.6,
+ *   width: 200,
+ *   height: 200,
+ * });
+ *
+ * return <div style={{ clipPath }}>...</div>;
+ */
+
+declare function useShapeSequenceMorph({ shapes, duration, interval, autoplay, loop, morphOptions, width, height, disabled, }: UseShapeSequenceMorphOptions): UseShapeSequenceMorphResult;
+
+export { CornerRounding, Cubic, type CubicPair, type DoubleMapper, MD3CornerRadius, type MD3CornerRadiusToken, type MD3ShapeFamily, MD3ShapeName, MD3_SHAPE_FAMILIES, MD3_SHAPE_PAIRINGS, 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, type UseShapeSequenceMorphOptions, type UseShapeSequenceMorphResult, circle, createDoubleMapper, featureMapper, getRecommendedMorphShape, interpolatePath, pill, pillStar, rectangle, star, toClipPath, toSvgPath, useShapeMorph, useShapeSequenceMorph };