morphico 0.2.0 → 0.3.0

package/dist/types/clip.d.ts

@@ -0,0 +1,55 @@
+import type { MorphOptions, MorphResult } from './morph.js';
+import type { IconSet } from './types.js';
+/** A length: a number = % (of the element's width for x and size, of its height for y), or `'40%'` / `'120px'`. */
+export type Length = number | string;
+/** Only a band along the shape's edge shows. */
+export interface ClipOutline {
+    /** Width of the band in px. */
+    width: number;
+    /** Where the band sits: inside the edge (default), on it (`'centre'`) or outside it. */
+    band?: 'inside' | 'centre' | 'outside';
+}
+/** What can change, in `clip()` and in every `to()` / `set()`. */
+export interface ClipChanges {
+    /** Centre of the shape, from the element's left edge (default 50 = the middle). */
+    x?: Length;
+    /** Centre of the shape, from the element's top edge (default 50 = the middle). */
+    y?: Length;
+    /** Side of the shape's square (default: the largest square that fits the element). */
+    size?: Length;
+    /** Turn in degrees, clockwise; absolute (`rotation: 360` ends one full turn from 0). */
+    rotation?: number;
+    /** Corners: 1 = the shape's own (default, the roundest) … 0 = sharp. */
+    roundness?: number;
+    /** `false` (default) = the whole shape shows; an outline = only a band along its edge (not animated). */
+    outline?: false | ClipOutline;
+}
+export interface ClipOptions extends ClipChanges, MorphOptions {
+    /** The shape set (default: the built-in shapes, based on Lucide). */
+    set?: IconSet;
+    /** The shape shown first (default `'circle'`). */
+    state?: string;
+}
+export interface ClipChangeOptions extends ClipChanges, MorphOptions {
+    /** Called when the change ends, with the same result the promise resolves to. */
+    onEnd?: (result: MorphResult) => void;
+}
+export interface Clip {
+    /** The shape shown, or being morphed to. */
+    readonly state: string;
+    /**
+     * Morphs to the shape `state` and animates the given changes along (move, resize, turn, roundness), or — called with
+     * only an object — animates those changes and keeps the shape. The promise resolves when it ends; an interrupted
+     * change resolves with `interrupted: true`. Without animation when the user prefers reduced motion.
+     */
+    to(state: string, options?: ClipChangeOptions): Promise<MorphResult>;
+    to(changes: ClipChangeOptions): Promise<MorphResult>;
+    /** Jumps (no animation), e.g. while a slider is dragged. Stops a running change (it resolves as interrupted). */
+    set(changes: ClipChanges & {
+        state?: string;
+    }): void;
+    /** Stops, removes the hidden <svg> and gives the element back its own clip-path / mask. */
+    destroy(): void;
+}
+/** Cuts `element` out by a morphing shape. */
+export declare const clip: (element: HTMLElement | SVGElement, options?: ClipOptions) => Clip;

package/dist/types/index.d.ts

@@ -1,7 +1,9 @@
+export { clip } from './clip.js';
 export { easings } from './engine.js';
 export { icon } from './icon.js';
 export { iconSets } from './iconSets.js';
 export { text } from './text.js';
+export type { Clip, ClipChangeOptions, ClipChanges, ClipOptions, ClipOutline, Length } from './clip.js';
 export type { Easing } from './engine.js';
 export type { ChangeOptions, Icon, IconOptions } from './icon.js';
 export type { IconSetName } from './iconSets.js';

package/dist/types/morph.d.ts

@@ -1,6 +1,6 @@
 import { easings } from './engine.js';
 import type { Easing } from './engine.js';
-import type { IconSet } from './types.js';
+import type { IconSet, PathNumbers } from './types.js';
 export type EasingName = keyof typeof easings;
 export interface MorphOptions {
     /** Length of a morph in milliseconds (default 400). */
@@ -16,7 +16,11 @@ export interface MorphResult {
 }
 /** The empty state: nothing is drawn. Shapes grow out of it and shrink into it while fading. */
 export declare const EMPTY_STATE = " ";
+export declare const DEFAULT_DURATION = 400;
+export declare const shapesOf: (iconSet: IconSet) => Record<string, PathNumbers>;
 export declare const hasState: (iconSet: IconSet, state: string) => boolean;
+export declare const prefersReducedMotion: () => boolean;
+export declare const clampToUnit: (value: number) => number;
 export interface MorphingPath {
     /** The state shown, or being morphed to. */
     readonly state: string;

package/dist/types/sets/shapes.d.ts

@@ -0,0 +1,5 @@
+import type { IconSet, Stroke } from '../types.js';
+/** The shapes as Lucide draws them (Lucide coordinates); the set's states are made from these. */
+export declare const lucideShapeOutlines: Record<string, Stroke[]>;
+/** The shape set of clip(): states `circle`, `ellipse`, `heart` … `puzzle` (see `lucideShapeOutlines`). */
+export declare const clipShapes: IconSet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphico",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Morphing line-art icons: smooth SVG path transitions between digits and other states. No dependencies.",
   "license": "MIT AND ISC",
   "author": "Raycho Ivanov",