@nice2dev/icons 1.3.15 → 1.3.16

package/dist/esm/NtdStateMorph.js

@@ -1,174 +1,180 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo, useCallback } from 'react';
-import { SIZE_MAP } from './types.js';
-
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo, useCallback } from "react";
+import { SIZE_MAP } from "./types.js";
 function parsePath(d) {
-    const segments = [];
-    const re = /([MmLlHhVvCcSsQqTtAaZz])([^MmLlHhVvCcSsQqTtAaZz]*)/g;
-    let match;
-    while ((match = re.exec(d)) !== null) {
-        const command = match[1];
-        const values = match[2]
-            .trim()
-            .split(/[\s,]+/)
-            .filter(Boolean)
-            .map(Number)
-            .filter((n) => !isNaN(n));
-        segments.push({ command, values });
-    }
-    return segments;
+  const segments = [];
+  const re = /([MmLlHhVvCcSsQqTtAaZz])([^MmLlHhVvCcSsQqTtAaZz]*)/g;
+  let match;
+  while ((match = re.exec(d)) !== null) {
+    const command = match[1];
+    const values = match[2].trim().split(/[\s,]+/).filter(Boolean).map(Number).filter((n) => !isNaN(n));
+    segments.push({ command, values });
+  }
+  return segments;
 }
 function interpolateSegments(from, to, t) {
-    var _a, _b;
-    const maxLen = Math.max(from.length, to.length);
-    const result = [];
-    for (let i = 0; i < maxLen; i++) {
-        const f = from[i] || { values: [] };
-        const tt = to[i] || { command: 'L', values: [] };
-        // Use target command, interpolate values
-        const command = tt.command;
-        const maxVals = Math.max(f.values.length, tt.values.length);
-        const values = [];
-        for (let j = 0; j < maxVals; j++) {
-            const fv = (_a = f.values[j]) !== null && _a !== void 0 ? _a : 0;
-            const tv = (_b = tt.values[j]) !== null && _b !== void 0 ? _b : 0;
-            values.push(fv + (tv - fv) * t);
-        }
-        result.push(command + values.map((v) => Math.round(v * 100) / 100).join(' '));
+  const maxLen = Math.max(from.length, to.length);
+  const result = [];
+  for (let i = 0; i < maxLen; i++) {
+    const f = from[i] || { values: [] };
+    const tt = to[i] || { command: "L", values: [] };
+    const command = tt.command;
+    const maxVals = Math.max(f.values.length, tt.values.length);
+    const values = [];
+    for (let j = 0; j < maxVals; j++) {
+      const fv = f.values[j] ?? 0;
+      const tv = tt.values[j] ?? 0;
+      values.push(fv + (tv - fv) * t);
     }
-    return result.join('');
+    result.push(command + values.map((v) => Math.round(v * 100) / 100).join(" "));
+  }
+  return result.join("");
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   COMPONENT
-───────────────────────────────────────────────────────────────────────────── */
 const NtdStateMorph = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ forwardRef(({ states, currentState, fills, strokes, strokeWidth = 2, duration = 300, easing: _easing = 'ease-in-out', size = 'md', viewBox = '0 0 24 24', className, style, 'aria-label': ariaLabel, onTransitionEnd, }, ref) => {
-    var _a;
-    const svgRef = useRef(null);
-    const animRef = useRef(0);
-    const [currentPath, setCurrentPath] = useState(() => { var _a; return (_a = states[currentState]) !== null && _a !== void 0 ? _a : ''; });
-    const [currentFill, setCurrentFill] = useState(() => { var _a; return (_a = fills === null || fills === void 0 ? void 0 : fills[currentState]) !== null && _a !== void 0 ? _a : 'currentColor'; });
-    const [currentStroke, setCurrentStroke] = useState(() => { var _a; return (_a = strokes === null || strokes === void 0 ? void 0 : strokes[currentState]) !== null && _a !== void 0 ? _a : 'none'; });
-    const prevState = useRef(currentState);
-    const resolvedSize = typeof size === 'number' ? size : ((_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
-    // Animate on state change
-    useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
+  /* @__PURE__ */ forwardRef(
+    ({
+      states,
+      currentState,
+      fills,
+      strokes,
+      strokeWidth = 2,
+      duration = 300,
+      easing: _easing = "ease-in-out",
+      size = "md",
+      viewBox = "0 0 24 24",
+      className,
+      style,
+      "aria-label": ariaLabel,
+      onTransitionEnd
+    }, ref) => {
+      const svgRef = useRef(null);
+      const animRef = useRef(0);
+      const [currentPath, setCurrentPath] = useState(() => states[currentState] ?? "");
+      const [currentFill, setCurrentFill] = useState(() => fills?.[currentState] ?? "currentColor");
+      const [currentStroke, setCurrentStroke] = useState(() => strokes?.[currentState] ?? "none");
+      const prevState = useRef(currentState);
+      const resolvedSize = typeof size === "number" ? size : SIZE_MAP[size] ?? 24;
+      useEffect(() => {
         if (prevState.current === currentState) {
-            return;
+          return;
         }
-        const fromPath = (_a = states[prevState.current]) !== null && _a !== void 0 ? _a : '';
-        const toPath = (_b = states[currentState]) !== null && _b !== void 0 ? _b : '';
-        const fromFill = (_c = fills === null || fills === void 0 ? void 0 : fills[prevState.current]) !== null && _c !== void 0 ? _c : 'currentColor';
-        const toFill = (_d = fills === null || fills === void 0 ? void 0 : fills[currentState]) !== null && _d !== void 0 ? _d : 'currentColor';
-        const fromStroke = (_e = strokes === null || strokes === void 0 ? void 0 : strokes[prevState.current]) !== null && _e !== void 0 ? _e : 'none';
-        const toStroke = (_f = strokes === null || strokes === void 0 ? void 0 : strokes[currentState]) !== null && _f !== void 0 ? _f : 'none';
+        const fromPath = states[prevState.current] ?? "";
+        const toPath = states[currentState] ?? "";
+        const fromFill = fills?.[prevState.current] ?? "currentColor";
+        const toFill = fills?.[currentState] ?? "currentColor";
+        const fromStroke = strokes?.[prevState.current] ?? "none";
+        const toStroke = strokes?.[currentState] ?? "none";
         const fromSegs = parsePath(fromPath);
         const toSegs = parsePath(toPath);
         const startTime = performance.now();
         prevState.current = currentState;
-        // Cancel previous animation
         if (animRef.current) {
-            cancelAnimationFrame(animRef.current);
+          cancelAnimationFrame(animRef.current);
         }
         function animate(now) {
-            const elapsed = now - startTime;
-            const rawT = Math.min(elapsed / duration, 1);
-            // Apply easing (simple cubic ease-in-out)
-            const t = rawT < 0.5 ? 4 * rawT * rawT * rawT : 1 - Math.pow(-2 * rawT + 2, 3) / 2;
-            setCurrentPath(interpolateSegments(fromSegs, toSegs, t));
-            // Interpolate fill if both are hex colors
-            if (fromFill.startsWith('#') && toFill.startsWith('#')) {
-                setCurrentFill(interpolateColor(fromFill, toFill, t));
-            }
-            else {
-                setCurrentFill(t > 0.5 ? toFill : fromFill);
-            }
-            if (fromStroke.startsWith('#') && toStroke.startsWith('#')) {
-                setCurrentStroke(interpolateColor(fromStroke, toStroke, t));
-            }
-            else {
-                setCurrentStroke(t > 0.5 ? toStroke : fromStroke);
-            }
-            if (rawT < 1) {
-                animRef.current = requestAnimationFrame(animate);
-            }
-            else {
-                onTransitionEnd === null || onTransitionEnd === void 0 ? void 0 : onTransitionEnd(currentState);
-            }
+          const elapsed = now - startTime;
+          const rawT = Math.min(elapsed / duration, 1);
+          const t = rawT < 0.5 ? 4 * rawT * rawT * rawT : 1 - Math.pow(-2 * rawT + 2, 3) / 2;
+          setCurrentPath(interpolateSegments(fromSegs, toSegs, t));
+          if (fromFill.startsWith("#") && toFill.startsWith("#")) {
+            setCurrentFill(interpolateColor(fromFill, toFill, t));
+          } else {
+            setCurrentFill(t > 0.5 ? toFill : fromFill);
+          }
+          if (fromStroke.startsWith("#") && toStroke.startsWith("#")) {
+            setCurrentStroke(interpolateColor(fromStroke, toStroke, t));
+          } else {
+            setCurrentStroke(t > 0.5 ? toStroke : fromStroke);
+          }
+          if (rawT < 1) {
+            animRef.current = requestAnimationFrame(animate);
+          } else {
+            onTransitionEnd?.(currentState);
+          }
         }
         animRef.current = requestAnimationFrame(animate);
         return () => {
-            if (animRef.current) {
-                cancelAnimationFrame(animRef.current);
-            }
+          if (animRef.current) {
+            cancelAnimationFrame(animRef.current);
+          }
         };
-    }, [currentState, states, fills, strokes, duration, onTransitionEnd]);
-    useImperativeHandle(ref, () => ({
+      }, [currentState, states, fills, strokes, duration, onTransitionEnd]);
+      useImperativeHandle(ref, () => ({
         getState: () => currentState,
-        setState: () => { },
-        getSvgElement: () => svgRef.current,
-    }));
-    return (jsx("svg", { ref: svgRef, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, width: resolvedSize, height: resolvedSize, fill: "none", className: className, style: style, "aria-label": ariaLabel, role: ariaLabel ? 'img' : undefined, children: jsx("path", { d: currentPath, fill: currentFill, stroke: currentStroke, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}), { displayName: 'NtdStateMorph' });
-/* ────────────────────────────────────────────────────────────────────────────
-   COLOR INTERPOLATION
-───────────────────────────────────────────────────────────────────────────── */
+        setState: () => {
+        },
+        getSvgElement: () => svgRef.current
+      }));
+      return /* @__PURE__ */ jsx(
+        "svg",
+        {
+          ref: svgRef,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox,
+          width: resolvedSize,
+          height: resolvedSize,
+          fill: "none",
+          className,
+          style,
+          "aria-label": ariaLabel,
+          role: ariaLabel ? "img" : void 0,
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: currentPath,
+              fill: currentFill,
+              stroke: currentStroke,
+              strokeWidth,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      );
+    }
+  ),
+  { displayName: "NtdStateMorph" }
+);
 function hexToRgb(hex) {
-    const h = hex.replace('#', '');
-    const full = h.length === 3 ? h[0] + h[0] + h[1] + h[1] + h[2] + h[2] : h;
-    return [
-        parseInt(full.substring(0, 2), 16),
-        parseInt(full.substring(2, 4), 16),
-        parseInt(full.substring(4, 6), 16),
-    ];
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h[0] + h[0] + h[1] + h[1] + h[2] + h[2] : h;
+  return [
+    parseInt(full.substring(0, 2), 16),
+    parseInt(full.substring(2, 4), 16),
+    parseInt(full.substring(4, 6), 16)
+  ];
 }
 function rgbToHex(r, g, b) {
-    const toHex = (n) => Math.round(Math.max(0, Math.min(255, n)))
-        .toString(16)
-        .padStart(2, '0');
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  const toHex = (n) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 function interpolateColor(from, to, t) {
-    const [fr, fg, fb] = hexToRgb(from);
-    const [tr, tg, tb] = hexToRgb(to);
-    return rgbToHex(fr + (tr - fr) * t, fg + (tg - fg) * t, fb + (tb - fb) * t);
+  const [fr, fg, fb] = hexToRgb(from);
+  const [tr, tg, tb] = hexToRgb(to);
+  return rgbToHex(fr + (tr - fr) * t, fg + (tg - fg) * t, fb + (tb - fb) * t);
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   HOOK — useStateMorph
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Hook for managing morph state transitions.
- *
- * @example
- * ```tsx
- * const { state, setState, toggle, props } = useStateMorph(
- *   { empty: emptyPath, filled: filledPath },
- *   'empty',
- *   { fills: { empty: 'none', filled: '#e74c3c' } },
- * );
- *
- * <NtdStateMorph {...props} />
- * <button onClick={toggle}>Toggle</button>
- * ```
- */
 function useStateMorph(states, initialState, options) {
-    const stateNames = useMemo(() => Object.keys(states), [states]);
-    const [state, setState] = useState(initialState);
-    const toggle = useCallback(() => {
-        setState((prev) => {
-            const idx = stateNames.indexOf(prev);
-            return stateNames[(idx + 1) % stateNames.length];
-        });
-    }, [stateNames]);
-    const props = useMemo(() => ({
-        states,
-        currentState: state,
-        fills: options === null || options === void 0 ? void 0 : options.fills,
-        strokes: options === null || options === void 0 ? void 0 : options.strokes,
-        duration: options === null || options === void 0 ? void 0 : options.duration,
-    }), [states, state, options]);
-    return { state, setState, toggle, props, stateNames };
+  const stateNames = useMemo(() => Object.keys(states), [states]);
+  const [state, setState] = useState(initialState);
+  const toggle = useCallback(() => {
+    setState((prev) => {
+      const idx = stateNames.indexOf(prev);
+      return stateNames[(idx + 1) % stateNames.length];
+    });
+  }, [stateNames]);
+  const props = useMemo(
+    () => ({
+      states,
+      currentState: state,
+      fills: options?.fills,
+      strokes: options?.strokes,
+      duration: options?.duration
+    }),
+    [states, state, options]
+  );
+  return { state, setState, toggle, props, stateNames };
 }
-
-export { NtdStateMorph, useStateMorph };
+export {
+  NtdStateMorph,
+  useStateMorph
+};