shape-morph 0.1.0

package/dist/react/index.d.ts

@@ -0,0 +1,216 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Point {
+    x: number;
+    y: number;
+}
+
+declare class Cubic {
+    readonly points: Float64Array;
+    constructor(points: Float64Array);
+    constructor(ax0: number, ay0: number, cx0: number, cy0: number, cx1: number, cy1: number, ax1: number, ay1: number);
+    get anchor0X(): number;
+    get anchor0Y(): number;
+    get control0X(): number;
+    get control0Y(): number;
+    get control1X(): number;
+    get control1Y(): number;
+    get anchor1X(): number;
+    get anchor1Y(): number;
+    pointOnCurve(t: number): Point;
+    zeroLength(): boolean;
+    convexTo(next: Cubic): boolean;
+    split(t: number): [Cubic, Cubic];
+    reverse(): Cubic;
+    transformed(f: (x: number, y: number) => Point): Cubic;
+    calculateBounds(approximate?: boolean): [number, number, number, number];
+    static straightLine(x0: number, y0: number, x1: number, y1: number): Cubic;
+    static circularArc(centerX: number, centerY: number, x0: number, y0: number, x1: number, y1: number): Cubic;
+    static empty(x0: number, y0: number): Cubic;
+}
+type Feature = {
+    type: "edge";
+    cubics: Cubic[];
+} | {
+    type: "corner";
+    cubics: Cubic[];
+    convex: boolean;
+};
+
+declare class RoundedPolygon {
+    readonly features: Feature[];
+    readonly center: Point;
+    readonly cubics: Cubic[];
+    constructor(features: Feature[], center: Point);
+    get centerX(): number;
+    get centerY(): number;
+    transformed(f: (x: number, y: number) => Point): RoundedPolygon;
+    normalized(): RoundedPolygon;
+    calculateBounds(approximate?: boolean): [number, number, number, number];
+    calculateMaxBounds(): [number, number, number, number];
+}
+
+declare function circle(): RoundedPolygon;
+declare function square(): RoundedPolygon;
+declare function slanted(): RoundedPolygon;
+declare function arch(): RoundedPolygon;
+declare function fan(): RoundedPolygon;
+declare function arrow(): RoundedPolygon;
+declare function semiCircle(): RoundedPolygon;
+declare function oval(): RoundedPolygon;
+declare function pill(): RoundedPolygon;
+declare function triangle(): RoundedPolygon;
+declare function diamond(): RoundedPolygon;
+declare function clamShell(): RoundedPolygon;
+declare function pentagon(): RoundedPolygon;
+declare function gem(): RoundedPolygon;
+declare function sunny(): RoundedPolygon;
+declare function verySunny(): RoundedPolygon;
+declare function cookie4(): RoundedPolygon;
+declare function cookie6(): RoundedPolygon;
+declare function cookie7(): RoundedPolygon;
+declare function cookie9(): RoundedPolygon;
+declare function cookie12(): RoundedPolygon;
+declare function ghostish(): RoundedPolygon;
+declare function clover4(): RoundedPolygon;
+declare function clover8(): RoundedPolygon;
+declare function burst(): RoundedPolygon;
+declare function softBurst(): RoundedPolygon;
+declare function boom(): RoundedPolygon;
+declare function softBoom(): RoundedPolygon;
+declare function flower(): RoundedPolygon;
+declare function puffy(): RoundedPolygon;
+declare function puffyDiamond(): RoundedPolygon;
+declare function pixelCircle(): RoundedPolygon;
+declare function pixelTriangle(): RoundedPolygon;
+declare function bun(): RoundedPolygon;
+declare function heart(): RoundedPolygon;
+declare const shapeFactories: {
+    Circle: typeof circle;
+    Square: typeof square;
+    Slanted: typeof slanted;
+    Arch: typeof arch;
+    Fan: typeof fan;
+    Arrow: typeof arrow;
+    SemiCircle: typeof semiCircle;
+    Oval: typeof oval;
+    Pill: typeof pill;
+    Triangle: typeof triangle;
+    Diamond: typeof diamond;
+    ClamShell: typeof clamShell;
+    Pentagon: typeof pentagon;
+    Gem: typeof gem;
+    Sunny: typeof sunny;
+    VerySunny: typeof verySunny;
+    Cookie4Sided: typeof cookie4;
+    Cookie6Sided: typeof cookie6;
+    Cookie7Sided: typeof cookie7;
+    Cookie9Sided: typeof cookie9;
+    Cookie12Sided: typeof cookie12;
+    Ghostish: typeof ghostish;
+    Clover4Leaf: typeof clover4;
+    Clover8Leaf: typeof clover8;
+    Burst: typeof burst;
+    SoftBurst: typeof softBurst;
+    Boom: typeof boom;
+    SoftBoom: typeof softBoom;
+    Flower: typeof flower;
+    Puffy: typeof puffy;
+    PuffyDiamond: typeof puffyDiamond;
+    PixelCircle: typeof pixelCircle;
+    PixelTriangle: typeof pixelTriangle;
+    Bun: typeof bun;
+    Heart: typeof heart;
+};
+type ShapeName = keyof typeof shapeFactories;
+
+interface ShapeProps {
+    /** Material shape name, e.g. "Heart", "Circle" */
+    name: ShapeName;
+    /** Size in px (width & height). Default 48 */
+    size?: number;
+    /** Fill color. Default "currentColor" */
+    fill?: string;
+    /** Stroke color */
+    stroke?: string;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Additional className for the SVG element */
+    className?: string;
+    /** Additional inline styles for the SVG element */
+    style?: React.CSSProperties;
+}
+/**
+ * Renders a Material shape as an inline SVG element.
+ *
+ * The SVG inherits `currentColor` by default, so it responds to
+ * the parent's `color` CSS property — including Tailwind utilities.
+ *
+ * ```tsx
+ * <Shape name="Heart" size={32} className="text-red-500" />
+ * ```
+ */
+declare function Shape({ name, size, fill, stroke, strokeWidth, className, style, }: ShapeProps): react_jsx_runtime.JSX.Element;
+
+interface MorphOptions {
+    /** Target progress (0–1). Changes trigger animation. */
+    progress: number;
+    /** Animation duration in ms (default 300) */
+    duration?: number;
+    /** Samples per cubic for polygon output (default 4) */
+    samples?: number;
+    /** SVG path size (default 100) */
+    size?: number;
+}
+interface MorphOutput {
+    /** SVG path `d` attribute string */
+    pathD: string;
+    /** CSS `clip-path: polygon(...)` value */
+    clipPath: string;
+    /** Current animated progress (0–1) */
+    progress: number;
+}
+/**
+ * React hook for JS-driven shape morphing with animation.
+ *
+ * Changes to `options.progress` animate smoothly from the current
+ * position to the target. Useful for hover effects, scroll-driven
+ * morphs, or any interactive shape transitions.
+ *
+ * ```tsx
+ * const [hovered, setHovered] = useState(false);
+ * const { clipPath } = useMorph('Circle', 'Heart', {
+ *   progress: hovered ? 1 : 0,
+ *   duration: 500,
+ * });
+ *
+ * <img
+ *   style={{ clipPath }}
+ *   onMouseEnter={() => setHovered(true)}
+ *   onMouseLeave={() => setHovered(false)}
+ * />
+ * ```
+ */
+declare function useMorph(startShape: ShapeName, endShape: ShapeName, options: MorphOptions): MorphOutput;
+
+interface ShapeOutput {
+    /** SVG path `d` attribute string, scaled to `size` */
+    pathD: string;
+    /** CSS `clip-path: polygon(...)` value using percentages */
+    clipPath: string;
+    /** The underlying RoundedPolygon for advanced use */
+    polygon: RoundedPolygon;
+}
+/**
+ * React hook that returns a Material shape as both an SVG path
+ * and a CSS clip-path polygon.
+ *
+ * ```tsx
+ * const { clipPath, pathD } = useShape('Heart');
+ * // Use clipPath on any element: style={{ clipPath }}
+ * // Use pathD in an SVG: <path d={pathD} />
+ * ```
+ */
+declare function useShape(name: ShapeName, size?: number): ShapeOutput;
+
+export { Shape, type ShapeName, useMorph, useShape };