shape-morph 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,219 @@
+declare const distanceEpsilon = 0.0001;
+declare const angleEpsilon = 0.000001;
+declare const relaxedDistanceEpsilon = 0.005;
+declare const floatPi: number;
+declare const twoPi: number;
+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;
+};
+
+interface CornerRounding {
+    radius: number;
+    smoothing: number;
+}
+declare const unrounded: CornerRounding;
+declare function cornerRounding(radius: number, smoothing?: number): CornerRounding;
+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 createPolygonFromVertices(vertices: number[], rounding?: CornerRounding, perVertexRounding?: CornerRounding[] | null, centerX?: number, centerY?: number): RoundedPolygon;
+declare function createPolygon(numVertices: number, radius?: number, centerX?: number, centerY?: number, rounding?: CornerRounding, perVertexRounding?: CornerRounding[] | null): RoundedPolygon;
+declare function createCircle(numVertices?: number, radius?: number, centerX?: number, centerY?: number): RoundedPolygon;
+declare function createRectangle(width?: number, height?: number, rounding?: CornerRounding, perVertexRounding?: CornerRounding[] | null, centerX?: number, centerY?: number): RoundedPolygon;
+declare function createStar(numVerticesPerRadius: number, radius?: number, innerRadius?: number, rounding?: CornerRounding, innerRounding?: CornerRounding | null, perVertexRounding?: CornerRounding[] | null, centerX?: number, centerY?: number): RoundedPolygon;
+
+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;
+declare const shapeNames: ShapeName[];
+declare function getShape(name: ShapeName): RoundedPolygon;
+
+declare class Morph {
+    private readonly morphMatch;
+    constructor(start: RoundedPolygon, end: RoundedPolygon);
+    asCubics(progress: number): Cubic[];
+}
+
+/**
+ * Convert cubics to a CSS `clip-path: path("...")` value.
+ *
+ * Uses SVG path syntax inside clip-path. Note that CSS cannot
+ * transition between different `path()` values — use `toClipPathPolygon`
+ * for animatable shapes.
+ */
+declare function toClipPathPath(cubics: Cubic[], size?: number): string;
+/**
+ * Sample points along cubic bezier curves to produce a
+ * CSS `clip-path: polygon(...)` value using percentage coordinates.
+ *
+ * This is the key function for CSS transitions with Tailwind.
+ * CSS can transition between `polygon()` values that have the same
+ * number of vertices. By using a fixed `samplesPerCubic`, all shapes
+ * from the same `Morph` produce polygons with identical vertex counts,
+ * enabling pure-CSS morphing:
+ *
+ * ```
+ * const morph = new Morph(getShape('Circle'), getShape('Heart'));
+ * const start = toClipPathPolygon(morph.asCubics(0));
+ * const end   = toClipPathPolygon(morph.asCubics(1));
+ * // Both have the same vertex count → CSS can transition between them
+ * ```
+ *
+ * @param cubics - Array of Cubic bezier curves (normalized 0–1)
+ * @param samplesPerCubic - Points to sample per cubic segment (default 4)
+ * @returns CSS `polygon(...)` string with percentage coordinates
+ */
+declare function toClipPathPolygon(cubics: Cubic[], samplesPerCubic?: number): string;
+/**
+ * Pre-compute a pair of `polygon()` strings from two shapes that are
+ * guaranteed to have the same vertex count. This enables pure-CSS
+ * transitions between the two shapes.
+ *
+ * The `Morph` class internally aligns both shapes so they have the same
+ * number of cubic segments. Evaluating at progress 0 and 1 gives two
+ * cubic arrays with identical segment counts, which produce polygon
+ * strings with identical vertex counts when sampled.
+ *
+ * ```tsx
+ * const [from, to] = toMorphPair(getShape('Circle'), getShape('Heart'));
+ * // Use as: style={{ clipPath: from }}
+ * // Hover:  style={{ clipPath: to }}
+ * // With:   transition: clip-path 500ms ease
+ * ```
+ *
+ * @param start - The starting shape
+ * @param end - The ending shape
+ * @param samplesPerCubic - Points to sample per cubic segment (default 4)
+ * @returns A tuple of [startPolygon, endPolygon] CSS `polygon()` strings
+ */
+declare function toMorphPair(start: RoundedPolygon, end: RoundedPolygon, samplesPerCubic?: number): [string, string];
+
+/**
+ * Convert an array of Cubics to an SVG path `d` attribute string.
+ *
+ * Each Cubic stores four points: anchor0 (start), control0, control1,
+ * anchor1 (end). These map to the SVG cubic bezier command:
+ *   C control0X,control0Y control1X,control1Y anchor1X,anchor1Y
+ *
+ * Shapes from `getShape()` are normalized to 0–1 coordinates.
+ * The `size` parameter scales them to pixel/viewBox space.
+ */
+declare function toPathD(cubics: Cubic[], size?: number): string;
+/**
+ * Convert a RoundedPolygon to an SVG path `d` attribute string.
+ */
+declare function toSvgPath(polygon: RoundedPolygon, size?: number): string;
+
+export { type CornerRounding, Cubic, type Feature, Morph, type Point, RoundedPolygon, type ShapeName, angleEpsilon, cornerRounding, createCircle, createPolygon, createPolygonFromVertices, createRectangle, createStar, distanceEpsilon, floatPi, getShape, relaxedDistanceEpsilon, shapeNames, toClipPathPath, toClipPathPolygon, toMorphPair, toPathD, toSvgPath, twoPi, unrounded };