@nice2dev/icons 1.3.15 → 1.3.16

package/dist/esm/lottieIntegration.js

@@ -1,288 +1,287 @@
-import { jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useRef, useMemo } from 'react';
-import { SIZE_MAP } from './types.js';
-
-/* ────────────────────────────────────────────────────────────────────────────
-   LOTTIE → SVG RENDERER (Lightweight)
-───────────────────────────────────────────────────────────────────────────── */
+import { jsx } from "react/jsx-runtime";
+import React, { forwardRef, useRef, useMemo } from "react";
+import { SIZE_MAP } from "./types.js";
 function lottiePathToSvg(pathData) {
-    var _a;
-    if (!((_a = pathData === null || pathData === void 0 ? void 0 : pathData.v) === null || _a === void 0 ? void 0 : _a.length)) {
-        return '';
+  if (!pathData?.v?.length) {
+    return "";
+  }
+  const vertices = pathData.v;
+  const inTangents = pathData.i;
+  const outTangents = pathData.o;
+  const parts = [];
+  parts.push(`M${vertices[0][0]} ${vertices[0][1]}`);
+  for (let i = 1; i < vertices.length; i++) {
+    const prev = vertices[i - 1];
+    const curr = vertices[i];
+    const oT = outTangents[i - 1];
+    const iT = inTangents[i];
+    const cp1x = prev[0] + oT[0];
+    const cp1y = prev[1] + oT[1];
+    const cp2x = curr[0] + iT[0];
+    const cp2y = curr[1] + iT[1];
+    if (Math.abs(oT[0]) + Math.abs(oT[1]) + Math.abs(iT[0]) + Math.abs(iT[1]) > 0.01) {
+      parts.push(`C${cp1x} ${cp1y} ${cp2x} ${cp2y} ${curr[0]} ${curr[1]}`);
+    } else {
+      parts.push(`L${curr[0]} ${curr[1]}`);
     }
-    const vertices = pathData.v;
-    const inTangents = pathData.i;
-    const outTangents = pathData.o;
-    const parts = [];
-    // Move to first vertex
-    parts.push(`M${vertices[0][0]} ${vertices[0][1]}`);
-    for (let i = 1; i < vertices.length; i++) {
-        const prev = vertices[i - 1];
-        const curr = vertices[i];
-        const oT = outTangents[i - 1]; // out tangent of previous
-        const iT = inTangents[i]; // in tangent of current
-        // Control points are relative to their vertices
-        const cp1x = prev[0] + oT[0];
-        const cp1y = prev[1] + oT[1];
-        const cp2x = curr[0] + iT[0];
-        const cp2y = curr[1] + iT[1];
-        // Use cubic bezier if tangents are non-zero, otherwise line
-        if (Math.abs(oT[0]) + Math.abs(oT[1]) + Math.abs(iT[0]) + Math.abs(iT[1]) > 0.01) {
-            parts.push(`C${cp1x} ${cp1y} ${cp2x} ${cp2y} ${curr[0]} ${curr[1]}`);
-        }
-        else {
-            parts.push(`L${curr[0]} ${curr[1]}`);
-        }
-    }
-    // Close path if needed
-    if (pathData.c && vertices.length > 1) {
-        const last = vertices[vertices.length - 1];
-        const first = vertices[0];
-        const oT = outTangents[vertices.length - 1];
-        const iT = inTangents[0];
-        const cp1x = last[0] + oT[0];
-        const cp1y = last[1] + oT[1];
-        const cp2x = first[0] + iT[0];
-        const cp2y = first[1] + iT[1];
-        if (Math.abs(oT[0]) + Math.abs(oT[1]) + Math.abs(iT[0]) + Math.abs(iT[1]) > 0.01) {
-            parts.push(`C${cp1x} ${cp1y} ${cp2x} ${cp2y} ${first[0]} ${first[1]}`);
-        }
-        parts.push('Z');
+  }
+  if (pathData.c && vertices.length > 1) {
+    const last = vertices[vertices.length - 1];
+    const first = vertices[0];
+    const oT = outTangents[vertices.length - 1];
+    const iT = inTangents[0];
+    const cp1x = last[0] + oT[0];
+    const cp1y = last[1] + oT[1];
+    const cp2x = first[0] + iT[0];
+    const cp2y = first[1] + iT[1];
+    if (Math.abs(oT[0]) + Math.abs(oT[1]) + Math.abs(iT[0]) + Math.abs(iT[1]) > 0.01) {
+      parts.push(`C${cp1x} ${cp1y} ${cp2x} ${cp2y} ${first[0]} ${first[1]}`);
     }
-    return parts.join(' ');
+    parts.push("Z");
+  }
+  return parts.join(" ");
 }
 function extractPaths(shapes, result) {
-    for (const shape of shapes) {
-        if (shape.ty === 'gr' && shape.it) {
-            extractPaths(shape.it, result);
-        }
-        else if (shape.ty === 'sh' && shape.ks) {
-            const pathData = shape.ks.k;
-            if (pathData === null || pathData === void 0 ? void 0 : pathData.v) {
-                result.push({ d: lottiePathToSvg(pathData) });
-            }
-        }
-        // Attach fill/stroke to previous path
-        if (shape.ty === 'fl' && shape.c && result.length > 0) {
-            const c = shape.c.k;
-            if (Array.isArray(c) && c.length >= 3) {
-                result[result.length - 1].fill =
-                    `rgb(${Math.round(c[0] * 255)},${Math.round(c[1] * 255)},${Math.round(c[2] * 255)})`;
-            }
-        }
-        if (shape.ty === 'st' && shape.c && result.length > 0) {
-            const c = shape.c.k;
-            if (Array.isArray(c) && c.length >= 3) {
-                result[result.length - 1].stroke =
-                    `rgb(${Math.round(c[0] * 255)},${Math.round(c[1] * 255)},${Math.round(c[2] * 255)})`;
-            }
-            if (shape.w) {
-                const w = shape.w.k;
-                result[result.length - 1].strokeWidth = typeof w === 'number' ? w : 2;
-            }
-        }
+  for (const shape of shapes) {
+    if (shape.ty === "gr" && shape.it) {
+      extractPaths(shape.it, result);
+    } else if (shape.ty === "sh" && shape.ks) {
+      const pathData = shape.ks.k;
+      if (pathData?.v) {
+        result.push({ d: lottiePathToSvg(pathData) });
+      }
+    }
+    if (shape.ty === "fl" && shape.c && result.length > 0) {
+      const c = shape.c.k;
+      if (Array.isArray(c) && c.length >= 3) {
+        result[result.length - 1].fill = `rgb(${Math.round(c[0] * 255)},${Math.round(c[1] * 255)},${Math.round(c[2] * 255)})`;
+      }
     }
+    if (shape.ty === "st" && shape.c && result.length > 0) {
+      const c = shape.c.k;
+      if (Array.isArray(c) && c.length >= 3) {
+        result[result.length - 1].stroke = `rgb(${Math.round(c[0] * 255)},${Math.round(c[1] * 255)},${Math.round(c[2] * 255)})`;
+      }
+      if (shape.w) {
+        const w = shape.w.k;
+        result[result.length - 1].strokeWidth = typeof w === "number" ? w : 2;
+      }
+    }
+  }
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   COMPONENT
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Renders a Lottie animation as an SVG icon.
- * Uses a lightweight built-in renderer for static frames.
- * For animated playback, renders the first frame as a static fallback.
- */
 const NtdLottieIcon = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ forwardRef(({ data, size = 'md', autoplay: _autoplay = true, loop: _loop = true, speed: _speed = 1, frame: _frame, className, style, 'aria-label': ariaLabel, }, ref) => {
-    var _a;
-    const resolvedSize = typeof size === 'number' ? size : ((_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
-    const svgRef = useRef(null);
-    // Extract static SVG paths from Lottie data
-    const paths = useMemo(() => {
+  /* @__PURE__ */ forwardRef(
+    ({
+      data,
+      size = "md",
+      autoplay: _autoplay = true,
+      loop: _loop = true,
+      speed: _speed = 1,
+      frame: _frame,
+      className,
+      style,
+      "aria-label": ariaLabel
+    }, ref) => {
+      const resolvedSize = typeof size === "number" ? size : SIZE_MAP[size] ?? 24;
+      const svgRef = useRef(null);
+      const paths = useMemo(() => {
         const result = [];
         for (const layer of data.layers) {
-            if (layer.shapes) {
-                extractPaths(layer.shapes, result);
-            }
+          if (layer.shapes) {
+            extractPaths(layer.shapes, result);
+          }
         }
         return result;
-    }, [data]);
-    // Forward ref
-    React.useImperativeHandle(ref, () => svgRef.current);
-    return (jsx("svg", { ref: svgRef, xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${data.w} ${data.h}`, width: resolvedSize, height: resolvedSize, className: className, style: style, "aria-label": ariaLabel, role: ariaLabel ? 'img' : undefined, children: paths.map((p, i) => {
-            var _a, _b;
-            return (jsx("path", { d: p.d, fill: (_a = p.fill) !== null && _a !== void 0 ? _a : 'currentColor', stroke: (_b = p.stroke) !== null && _b !== void 0 ? _b : 'none', strokeWidth: p.strokeWidth }, i));
-        }) }));
-}), { displayName: 'NtdLottieIcon' });
-/* ────────────────────────────────────────────────────────────────────────────
-   LOTTIE → ICON CONVERTER
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Converts a Lottie animation to a static React icon component.
- * Extracts SVG paths from the first frame.
- *
- * @param data - Lottie animation JSON
- * @param _options - Optional: which frame to freeze at
- * @returns React component compatible with NtdIconProps
- */
-function lottieToIcon(data, _options) {
-    var _a;
-    const paths = [];
-    for (const layer of data.layers) {
-        if (layer.shapes) {
-            extractPaths(layer.shapes, paths);
+      }, [data]);
+      React.useImperativeHandle(ref, () => svgRef.current);
+      return /* @__PURE__ */ jsx(
+        "svg",
+        {
+          ref: svgRef,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: `0 0 ${data.w} ${data.h}`,
+          width: resolvedSize,
+          height: resolvedSize,
+          className,
+          style,
+          "aria-label": ariaLabel,
+          role: ariaLabel ? "img" : void 0,
+          children: paths.map((p, i) => /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: p.d,
+              fill: p.fill ?? "currentColor",
+              stroke: p.stroke ?? "none",
+              strokeWidth: p.strokeWidth
+            },
+            i
+          ))
         }
+      );
+    }
+  ),
+  { displayName: "NtdLottieIcon" }
+);
+function lottieToIcon(data, _options) {
+  const paths = [];
+  for (const layer of data.layers) {
+    if (layer.shapes) {
+      extractPaths(layer.shapes, paths);
     }
-    const LottieIcon = ({ size = 'md', className, style }) => {
-        var _a;
-        const s = typeof size === 'number' ? size : ((_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
-        return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${data.w} ${data.h}`, width: s, height: s, className: className, style: style, children: paths.map((p, i) => {
-                var _a, _b;
-                return (jsx("path", { d: p.d, fill: (_a = p.fill) !== null && _a !== void 0 ? _a : 'currentColor', stroke: (_b = p.stroke) !== null && _b !== void 0 ? _b : 'none', strokeWidth: p.strokeWidth }, i));
-            }) }));
-    };
-    LottieIcon.displayName = `LottieIcon(${(_a = data.nm) !== null && _a !== void 0 ? _a : 'unnamed'})`;
-    return LottieIcon;
+  }
+  const LottieIcon = ({ size = "md", className, style }) => {
+    const s = typeof size === "number" ? size : SIZE_MAP[size] ?? 24;
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: `0 0 ${data.w} ${data.h}`,
+        width: s,
+        height: s,
+        className,
+        style,
+        children: paths.map((p, i) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: p.d,
+            fill: p.fill ?? "currentColor",
+            stroke: p.stroke ?? "none",
+            strokeWidth: p.strokeWidth
+          },
+          i
+        ))
+      }
+    );
+  };
+  LottieIcon.displayName = `LottieIcon(${data.nm ?? "unnamed"})`;
+  return LottieIcon;
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   ICON → LOTTIE EXPORTER
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Exports an NtdIcon to Lottie JSON format.
- *
- * Creates a valid bodymovin/Lottie animation with the icon rendered as shape layers.
- * This produces a static (single-frame) Lottie unless `animation` is specified.
- *
- * @param svgContent - Rendered SVG `d` attribute strings (one per path)
- * @param options - Export configuration
- * @returns LottieAnimationData JSON
- */
 function exportToLottie(svgPaths, options) {
-    const { fps = 30, duration = 60, size = 24, fillColor = '#000000', strokeWidth: _strokeWidth = 2, } = options !== null && options !== void 0 ? options : {};
-    // Parse hex color to [0-1] RGB
-    const parseColor = (hex) => {
-        const h = hex.replace('#', '');
-        return [
-            parseInt(h.substring(0, 2), 16) / 255,
-            parseInt(h.substring(2, 4), 16) / 255,
-            parseInt(h.substring(4, 6), 16) / 255,
-        ];
-    };
-    const fillRgb = parseColor(fillColor);
-    const shapes = svgPaths.map((d, i) => ({
-        ty: 'gr',
-        nm: `Path ${i + 1}`,
-        it: [
-            {
-                ty: 'sh',
-                nm: `Path`,
-                ks: {
-                    k: svgPathToLottiePath(d),
-                },
-            },
-            {
-                ty: 'fl',
-                nm: 'Fill',
-                c: { k: fillRgb, a: 0 },
-                o: { k: 100, a: 0 },
-            },
-        ],
-    }));
-    return {
-        v: '5.7.1',
-        fr: fps,
+  const {
+    fps = 30,
+    duration = 60,
+    size = 24,
+    fillColor = "#000000",
+    strokeWidth: _strokeWidth = 2
+  } = options ?? {};
+  const parseColor = (hex) => {
+    const h = hex.replace("#", "");
+    return [
+      parseInt(h.substring(0, 2), 16) / 255,
+      parseInt(h.substring(2, 4), 16) / 255,
+      parseInt(h.substring(4, 6), 16) / 255
+    ];
+  };
+  const fillRgb = parseColor(fillColor);
+  const shapes = svgPaths.map((d, i) => ({
+    ty: "gr",
+    nm: `Path ${i + 1}`,
+    it: [
+      {
+        ty: "sh",
+        nm: `Path`,
+        ks: {
+          k: svgPathToLottiePath(d)
+        }
+      },
+      {
+        ty: "fl",
+        nm: "Fill",
+        c: { k: fillRgb, a: 0 },
+        o: { k: 100, a: 0 }
+      }
+    ]
+  }));
+  return {
+    v: "5.7.1",
+    fr: fps,
+    ip: 0,
+    op: duration,
+    w: size,
+    h: size,
+    nm: "NtdIcon Export",
+    layers: [
+      {
+        ty: 4,
+        nm: "Icon Layer",
         ip: 0,
         op: duration,
-        w: size,
-        h: size,
-        nm: 'NtdIcon Export',
-        layers: [
-            {
-                ty: 4,
-                nm: 'Icon Layer',
-                ip: 0,
-                op: duration,
-                ks: {
-                    o: { k: 100, a: 0 },
-                    r: { k: 0, a: 0 },
-                    p: { k: [size / 2, size / 2], a: 0 },
-                    s: { k: [100, 100], a: 0 },
-                    a: { k: [size / 2, size / 2], a: 0 },
-                },
-                shapes,
-            },
-        ],
-    };
+        ks: {
+          o: { k: 100, a: 0 },
+          r: { k: 0, a: 0 },
+          p: { k: [size / 2, size / 2], a: 0 },
+          s: { k: [100, 100], a: 0 },
+          a: { k: [size / 2, size / 2], a: 0 }
+        },
+        shapes
+      }
+    ]
+  };
 }
-/**
- * Simplified SVG path → Lottie path converter.
- * Handles M, L, C, Z commands.
- */
 function svgPathToLottiePath(d) {
-    const vertices = [];
-    const inTangents = [];
-    const outTangents = [];
-    let closed = false;
-    const re = /([MLCZmlcz])([^MLCZmlcz]*)/g;
-    let match;
-    let currentX = 0;
-    let currentY = 0;
-    while ((match = re.exec(d)) !== null) {
-        const cmd = match[1];
-        const vals = match[2]
-            .trim()
-            .split(/[\s,]+/)
-            .filter(Boolean)
-            .map(Number);
-        switch (cmd) {
-            case 'M':
-            case 'm': {
-                currentX = cmd === 'M' ? vals[0] : currentX + vals[0];
-                currentY = cmd === 'M' ? vals[1] : currentY + vals[1];
-                vertices.push([currentX, currentY]);
-                inTangents.push([0, 0]);
-                outTangents.push([0, 0]);
-                break;
-            }
-            case 'L':
-            case 'l': {
-                currentX = cmd === 'L' ? vals[0] : currentX + vals[0];
-                currentY = cmd === 'L' ? vals[1] : currentY + vals[1];
-                vertices.push([currentX, currentY]);
-                inTangents.push([0, 0]);
-                outTangents.push([0, 0]);
-                break;
-            }
-            case 'C':
-            case 'c': {
-                for (let i = 0; i < vals.length; i += 6) {
-                    const abs = cmd === 'C';
-                    const cp1x = abs ? vals[i] : currentX + vals[i];
-                    const cp1y = abs ? vals[i + 1] : currentY + vals[i + 1];
-                    const cp2x = abs ? vals[i + 2] : currentX + vals[i + 2];
-                    const cp2y = abs ? vals[i + 3] : currentY + vals[i + 3];
-                    const x = abs ? vals[i + 4] : currentX + vals[i + 4];
-                    const y = abs ? vals[i + 5] : currentY + vals[i + 5];
-                    // Out tangent of previous vertex
-                    if (outTangents.length > 0) {
-                        const prevIdx = outTangents.length - 1;
-                        const prev = vertices[prevIdx];
-                        outTangents[prevIdx] = [cp1x - prev[0], cp1y - prev[1]];
-                    }
-                    vertices.push([x, y]);
-                    inTangents.push([cp2x - x, cp2y - y]);
-                    outTangents.push([0, 0]);
-                    currentX = x;
-                    currentY = y;
-                }
-                break;
-            }
-            case 'Z':
-            case 'z':
-                closed = true;
-                break;
+  const vertices = [];
+  const inTangents = [];
+  const outTangents = [];
+  let closed = false;
+  const re = /([MLCZmlcz])([^MLCZmlcz]*)/g;
+  let match;
+  let currentX = 0;
+  let currentY = 0;
+  while ((match = re.exec(d)) !== null) {
+    const cmd = match[1];
+    const vals = match[2].trim().split(/[\s,]+/).filter(Boolean).map(Number);
+    switch (cmd) {
+      case "M":
+      case "m": {
+        currentX = cmd === "M" ? vals[0] : currentX + vals[0];
+        currentY = cmd === "M" ? vals[1] : currentY + vals[1];
+        vertices.push([currentX, currentY]);
+        inTangents.push([0, 0]);
+        outTangents.push([0, 0]);
+        break;
+      }
+      case "L":
+      case "l": {
+        currentX = cmd === "L" ? vals[0] : currentX + vals[0];
+        currentY = cmd === "L" ? vals[1] : currentY + vals[1];
+        vertices.push([currentX, currentY]);
+        inTangents.push([0, 0]);
+        outTangents.push([0, 0]);
+        break;
+      }
+      case "C":
+      case "c": {
+        for (let i = 0; i < vals.length; i += 6) {
+          const abs = cmd === "C";
+          const cp1x = abs ? vals[i] : currentX + vals[i];
+          const cp1y = abs ? vals[i + 1] : currentY + vals[i + 1];
+          const cp2x = abs ? vals[i + 2] : currentX + vals[i + 2];
+          const cp2y = abs ? vals[i + 3] : currentY + vals[i + 3];
+          const x = abs ? vals[i + 4] : currentX + vals[i + 4];
+          const y = abs ? vals[i + 5] : currentY + vals[i + 5];
+          if (outTangents.length > 0) {
+            const prevIdx = outTangents.length - 1;
+            const prev = vertices[prevIdx];
+            outTangents[prevIdx] = [cp1x - prev[0], cp1y - prev[1]];
+          }
+          vertices.push([x, y]);
+          inTangents.push([cp2x - x, cp2y - y]);
+          outTangents.push([0, 0]);
+          currentX = x;
+          currentY = y;
         }
+        break;
+      }
+      case "Z":
+      case "z":
+        closed = true;
+        break;
     }
-    return { c: closed, v: vertices, i: inTangents, o: outTangents };
+  }
+  return { c: closed, v: vertices, i: inTangents, o: outTangents };
 }
-
-export { NtdLottieIcon, exportToLottie, lottieToIcon };
+export {
+  NtdLottieIcon,
+  exportToLottie,
+  lottieToIcon
+};