@nice2dev/icons 1.3.15 → 1.3.17

package/dist/esm/NtdIconMorph.js

@@ -1,402 +1,472 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useNiceTranslation } from '@nice2dev/ui-core';
-import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
-import { NtdCheck, NtdMinus, NtdPlus } from './icons/actions.js';
-import { NtdPause, NtdPlay } from './icons/media.js';
-import { NtdClose, NtdChevronDown, NtdChevronUp, NtdMenu } from './icons/navigation.js';
-import { NtdMoon, NtdSun } from './icons/ui.js';
-import { SIZE_MAP } from './types.js';
-
-/* ────────────────────────────────────────────────────────────────────────────
-   EASING FUNCTIONS
-───────────────────────────────────────────────────────────────────────────── */
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useNiceTranslation } from "@nice2dev/ui-core";
+import { forwardRef, useState, useRef, useEffect, useCallback } from "react";
+import { NtdCheck, NtdMinus, NtdPlus } from "./icons/actions.js";
+import { NtdPause, NtdPlay } from "./icons/media.js";
+import { NtdClose, NtdChevronDown, NtdChevronUp, NtdMenu } from "./icons/navigation.js";
+import { NtdMoon, NtdSun } from "./icons/ui.js";
+import { SIZE_MAP } from "./types.js";
 const EASING_MAP = {
-    linear: 'linear',
-    ease: 'ease',
-    'ease-in': 'ease-in',
-    'ease-out': 'ease-out',
-    'ease-in-out': 'ease-in-out',
-    spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
-    bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+  linear: "linear",
+  ease: "ease",
+  "ease-in": "ease-in",
+  "ease-out": "ease-out",
+  "ease-in-out": "ease-in-out",
+  spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
 };
 const MORPH_PATHS = {
-    'menu-close': {
-        from: 'M3 6h18M3 12h18M3 18h18', // hamburger
-        to: 'M6 6l12 12M6 18L18 6', // X
-        viewBox: '0 0 24 24',
-    },
-    'play-pause': {
-        from: 'M5 3l14 9-14 9V3z', // play triangle
-        to: 'M6 4h4v16H6zM14 4h4v16h-4z', // pause bars
-        viewBox: '0 0 24 24',
-    },
-    'plus-minus': {
-        from: 'M12 5v14M5 12h14', // plus
-        to: 'M5 12h14', // minus
-        viewBox: '0 0 24 24',
-    },
-    'check-cross': {
-        from: 'M5 12l5 5L20 7', // check
-        to: 'M6 6l12 12M6 18L18 6', // cross
-        viewBox: '0 0 24 24',
-    },
-    'chevron-up-down': {
-        from: 'M6 15l6-6 6 6', // chevron up
-        to: 'M6 9l6 6 6-6', // chevron down
-        viewBox: '0 0 24 24',
-    },
-    'expand-collapse': {
-        from: 'M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7', // expand
-        to: 'M4 4h6v6M20 20h-6v-6M10 10L3 3M14 14l7 7', // collapse
-        viewBox: '0 0 24 24',
-    },
-    'sun-moon': {
-        from: 'M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41M12 6a6 6 0 100 12 6 6 0 000-12z', // sun
-        to: 'M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z', // moon
-        viewBox: '0 0 24 24',
-    },
-    'volume-mute': {
-        from: 'M11 5L6 9H2v6h4l5 4V5zM19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07', // volume high
-        to: 'M11 5L6 9H2v6h4l5 4V5zM23 9l-6 6M17 9l6 6', // muted
-        viewBox: '0 0 24 24',
-    },
-    'lock-unlock': {
-        from: 'M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2zM7 11V7a5 5 0 0110 0v4', // locked
-        to: 'M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2zM7 11V7a5 5 0 019.9-1', // unlocked
-        viewBox: '0 0 24 24',
-    },
-    'eye-hidden': {
-        from: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 9a3 3 0 100 6 3 3 0 000-6z', // eye open
-        to: 'M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22', // eye hidden
-        viewBox: '0 0 24 24',
-    },
-    'heart-broken': {
-        from: 'M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z', // heart full
-        to: 'M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78zM12 5.67l-2 6 4-2-2 6', // heart broken
-        viewBox: '0 0 24 24',
-    },
-    'star-empty': {
-        from: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z', // star filled
-        to: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z', // same path, different fill
-        viewBox: '0 0 24 24',
-    },
+  "menu-close": {
+    from: "M3 6h18M3 12h18M3 18h18",
+    // hamburger
+    to: "M6 6l12 12M6 18L18 6",
+    // X
+    viewBox: "0 0 24 24"
+  },
+  "play-pause": {
+    from: "M5 3l14 9-14 9V3z",
+    // play triangle
+    to: "M6 4h4v16H6zM14 4h4v16h-4z",
+    // pause bars
+    viewBox: "0 0 24 24"
+  },
+  "plus-minus": {
+    from: "M12 5v14M5 12h14",
+    // plus
+    to: "M5 12h14",
+    // minus
+    viewBox: "0 0 24 24"
+  },
+  "check-cross": {
+    from: "M5 12l5 5L20 7",
+    // check
+    to: "M6 6l12 12M6 18L18 6",
+    // cross
+    viewBox: "0 0 24 24"
+  },
+  "chevron-up-down": {
+    from: "M6 15l6-6 6 6",
+    // chevron up
+    to: "M6 9l6 6 6-6",
+    // chevron down
+    viewBox: "0 0 24 24"
+  },
+  "expand-collapse": {
+    from: "M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7",
+    // expand
+    to: "M4 4h6v6M20 20h-6v-6M10 10L3 3M14 14l7 7",
+    // collapse
+    viewBox: "0 0 24 24"
+  },
+  "sun-moon": {
+    from: "M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41M12 6a6 6 0 100 12 6 6 0 000-12z",
+    // sun
+    to: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z",
+    // moon
+    viewBox: "0 0 24 24"
+  },
+  "volume-mute": {
+    from: "M11 5L6 9H2v6h4l5 4V5zM19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07",
+    // volume high
+    to: "M11 5L6 9H2v6h4l5 4V5zM23 9l-6 6M17 9l6 6",
+    // muted
+    viewBox: "0 0 24 24"
+  },
+  "lock-unlock": {
+    from: "M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2zM7 11V7a5 5 0 0110 0v4",
+    // locked
+    to: "M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2zM7 11V7a5 5 0 019.9-1",
+    // unlocked
+    viewBox: "0 0 24 24"
+  },
+  "eye-hidden": {
+    from: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 9a3 3 0 100 6 3 3 0 000-6z",
+    // eye open
+    to: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22",
+    // eye hidden
+    viewBox: "0 0 24 24"
+  },
+  "heart-broken": {
+    from: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z",
+    // heart full
+    to: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78zM12 5.67l-2 6 4-2-2 6",
+    // heart broken
+    viewBox: "0 0 24 24"
+  },
+  "star-empty": {
+    from: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+    // star filled
+    to: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+    // same path, different fill
+    viewBox: "0 0 24 24"
+  }
 };
-/* ────────────────────────────────────────────────────────────────────────────
-   STYLES
-───────────────────────────────────────────────────────────────────────────── */
-const morphStyles = `
-.ntd-morph-container {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.ntd-morph-icon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transition-property: opacity, transform;
-}
-
-.ntd-morph-icon--active {
-  opacity: 1;
-  transform: scale(1) rotate(0deg);
-}
-
-.ntd-morph-icon--inactive {
-  opacity: 0;
-  transform: scale(0.8) rotate(-15deg);
-}
-
-.ntd-morph-path {
-  transition-property: d, fill, stroke;
-}
-
-@keyframes ntd-morph-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(180deg); }
-}
-
-.ntd-morph-spinning .ntd-morph-icon {
-  animation: ntd-morph-spin 0.3s ease-in-out;
-}
+const morphStyles = `
+.ntd-morph-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.ntd-morph-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition-property: opacity, transform;
+}
+
+.ntd-morph-icon--active {
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+}
+
+.ntd-morph-icon--inactive {
+  opacity: 0;
+  transform: scale(0.8) rotate(-15deg);
+}
+
+.ntd-morph-path {
+  transition-property: d, fill, stroke;
+}
+
+@keyframes ntd-morph-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(180deg); }
+}
+
+.ntd-morph-spinning .ntd-morph-icon {
+  animation: ntd-morph-spin 0.3s ease-in-out;
+}
 `;
-/* ────────────────────────────────────────────────────────────────────────────
-   MAIN COMPONENT
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Icon morphing component for smooth transitions between two icons.
- *
- * @example
- * ```tsx
- * // Controlled state
- * <NtdIconMorph
- *   from={NtdMenu}
- *   to={NtdClose}
- *   morphed={isOpen}
- *   duration={300}
- * />
- *
- * // Self-managed with trigger
- * <NtdIconMorph
- *   from={NtdPlay}
- *   to={NtdPause}
- *   trigger="click"
- * />
- * ```
- */
 const NtdIconMorph = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ forwardRef(({ from: FromIcon, to: ToIcon, morphed: controlledMorphed, trigger = 'none', duration = 300, easing = 'ease-in-out', size = 'md', variant = 'solid', primaryColor = 'currentColor', secondaryColor, onMorphStart, onMorphEnd, className, style, 'aria-label': ariaLabel, }, ref) => {
-    var _a, _b;
-    // Internal state for self-managed triggers
-    const [internalMorphed, setInternalMorphed] = useState(false);
-    const morphed = controlledMorphed !== null && controlledMorphed !== void 0 ? controlledMorphed : internalMorphed;
-    const [isAnimating, setIsAnimating] = useState(false);
-    const timeoutRef = useRef(undefined);
-    const stylesInjectedRef = useRef(false);
-    // Resolve size
-    const resolvedSize = typeof size === 'number' ? size : ((_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
-    // Resolve easing
-    const resolvedEasing = (_b = EASING_MAP[easing]) !== null && _b !== void 0 ? _b : easing;
-    // Inject styles once
-    useEffect(() => {
+  /* @__PURE__ */ forwardRef(
+    ({
+      from: FromIcon,
+      to: ToIcon,
+      morphed: controlledMorphed,
+      trigger = "none",
+      duration = 300,
+      easing = "ease-in-out",
+      size = "md",
+      variant = "solid",
+      primaryColor = "currentColor",
+      secondaryColor,
+      onMorphStart,
+      onMorphEnd,
+      className,
+      style,
+      "aria-label": ariaLabel
+    }, ref) => {
+      const [internalMorphed, setInternalMorphed] = useState(false);
+      const morphed = controlledMorphed ?? internalMorphed;
+      const [isAnimating, setIsAnimating] = useState(false);
+      const timeoutRef = useRef(void 0);
+      const stylesInjectedRef = useRef(false);
+      const resolvedSize = typeof size === "number" ? size : SIZE_MAP[size] ?? 24;
+      const resolvedEasing = EASING_MAP[easing] ?? easing;
+      useEffect(() => {
         if (stylesInjectedRef.current) {
-            return;
+          return;
         }
-        if (typeof document === 'undefined') {
-            return;
+        if (typeof document === "undefined") {
+          return;
         }
-        const styleId = 'ntd-morph-styles';
+        const styleId = "ntd-morph-styles";
         if (!document.getElementById(styleId)) {
-            const styleEl = document.createElement('style');
-            styleEl.id = styleId;
-            styleEl.textContent = morphStyles;
-            document.head.appendChild(styleEl);
+          const styleEl = document.createElement("style");
+          styleEl.id = styleId;
+          styleEl.textContent = morphStyles;
+          document.head.appendChild(styleEl);
         }
         stylesInjectedRef.current = true;
-    }, []);
-    // Handle animation timing
-    useEffect(() => {
+      }, []);
+      useEffect(() => {
         return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
         };
-    }, []);
-    const startMorph = useCallback((toMorphed) => {
-        if (isAnimating) {
+      }, []);
+      const startMorph = useCallback(
+        (toMorphed) => {
+          if (isAnimating) {
             return;
-        }
-        setIsAnimating(true);
-        onMorphStart === null || onMorphStart === void 0 ? void 0 : onMorphStart(toMorphed);
-        if (controlledMorphed === undefined) {
+          }
+          setIsAnimating(true);
+          onMorphStart?.(toMorphed);
+          if (controlledMorphed === void 0) {
             setInternalMorphed(toMorphed);
-        }
-        timeoutRef.current = setTimeout(() => {
+          }
+          timeoutRef.current = setTimeout(() => {
             setIsAnimating(false);
-            onMorphEnd === null || onMorphEnd === void 0 ? void 0 : onMorphEnd(toMorphed);
-        }, duration);
-    }, [isAnimating, duration, onMorphStart, onMorphEnd, controlledMorphed]);
-    // Event handlers for triggers
-    const handleClick = useCallback(() => {
-        if (trigger === 'click') {
-            startMorph(!morphed);
+            onMorphEnd?.(toMorphed);
+          }, duration);
+        },
+        [isAnimating, duration, onMorphStart, onMorphEnd, controlledMorphed]
+      );
+      const handleClick = useCallback(() => {
+        if (trigger === "click") {
+          startMorph(!morphed);
         }
-    }, [trigger, morphed, startMorph]);
-    const handleMouseEnter = useCallback(() => {
-        if (trigger === 'hover') {
-            startMorph(true);
+      }, [trigger, morphed, startMorph]);
+      const handleMouseEnter = useCallback(() => {
+        if (trigger === "hover") {
+          startMorph(true);
         }
-    }, [trigger, startMorph]);
-    const handleMouseLeave = useCallback(() => {
-        if (trigger === 'hover') {
-            startMorph(false);
+      }, [trigger, startMorph]);
+      const handleMouseLeave = useCallback(() => {
+        if (trigger === "hover") {
+          startMorph(false);
         }
-    }, [trigger, startMorph]);
-    const handleFocus = useCallback(() => {
-        if (trigger === 'focus') {
-            startMorph(true);
+      }, [trigger, startMorph]);
+      const handleFocus = useCallback(() => {
+        if (trigger === "focus") {
+          startMorph(true);
         }
-    }, [trigger, startMorph]);
-    const handleBlur = useCallback(() => {
-        if (trigger === 'focus') {
-            startMorph(false);
+      }, [trigger, startMorph]);
+      const handleBlur = useCallback(() => {
+        if (trigger === "focus") {
+          startMorph(false);
         }
-    }, [trigger, startMorph]);
-    const transitionStyle = {
+      }, [trigger, startMorph]);
+      const transitionStyle = {
         transitionDuration: `${duration}ms`,
-        transitionTimingFunction: resolvedEasing,
-    };
-    const iconProps = {
+        transitionTimingFunction: resolvedEasing
+      };
+      const iconProps = {
         size: resolvedSize,
         variant,
         primaryColor,
-        secondaryColor,
-    };
-    return (jsxs("div", { ref: ref, className: `ntd-morph-container ${className !== null && className !== void 0 ? className : ''}`, style: {
+        secondaryColor
+      };
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: `ntd-morph-container ${className ?? ""}`,
+          style: {
             width: resolvedSize,
             height: resolvedSize,
-            cursor: trigger !== 'none' ? 'pointer' : undefined,
-            ...style,
-        }, onClick: handleClick, onKeyDown: (e) => {
-            if (trigger === 'click' && (e.key === 'Enter' || e.key === ' ')) {
-                e.preventDefault();
-                handleClick();
+            cursor: trigger !== "none" ? "pointer" : void 0,
+            ...style
+          },
+          onClick: handleClick,
+          onKeyDown: (e) => {
+            if (trigger === "click" && (e.key === "Enter" || e.key === " ")) {
+              e.preventDefault();
+              handleClick();
             }
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, tabIndex: trigger === 'focus' || trigger === 'click' ? 0 : undefined, role: trigger !== 'none' ? 'button' : undefined, "aria-label": ariaLabel, "aria-pressed": trigger !== 'none' ? morphed : undefined, children: [jsx("div", { className: `ntd-morph-icon ${morphed ? 'ntd-morph-icon--inactive' : 'ntd-morph-icon--active'}`, style: transitionStyle, "aria-hidden": morphed, children: jsx(FromIcon, { ...iconProps }) }), jsx("div", { className: `ntd-morph-icon ${morphed ? 'ntd-morph-icon--active' : 'ntd-morph-icon--inactive'}`, style: transitionStyle, "aria-hidden": !morphed, children: jsx(ToIcon, { ...iconProps }) })] }));
-}), { displayName: 'NtdIconMorph' });
-/**
- * Path-based morphing using CSS transitions on SVG path data.
- * Requires browser support for CSS `d` property transitions (modern browsers).
- *
- * @example
- * ```tsx
- * <NtdPathMorph
- *   pair="menu-close"
- *   morphed={isOpen}
- *   duration={250}
- *   color="#333"
- * />
- * ```
- */
+          },
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          tabIndex: trigger === "focus" || trigger === "click" ? 0 : void 0,
+          role: trigger !== "none" ? "button" : void 0,
+          "aria-label": ariaLabel,
+          "aria-pressed": trigger !== "none" ? morphed : void 0,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `ntd-morph-icon ${morphed ? "ntd-morph-icon--inactive" : "ntd-morph-icon--active"}`,
+                style: transitionStyle,
+                "aria-hidden": morphed,
+                children: /* @__PURE__ */ jsx(FromIcon, { ...iconProps })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `ntd-morph-icon ${morphed ? "ntd-morph-icon--active" : "ntd-morph-icon--inactive"}`,
+                style: transitionStyle,
+                "aria-hidden": !morphed,
+                children: /* @__PURE__ */ jsx(ToIcon, { ...iconProps })
+              }
+            )
+          ]
+        }
+      );
+    }
+  ),
+  { displayName: "NtdIconMorph" }
+);
 const NtdPathMorph = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ forwardRef(({ pair, morphed: controlledMorphed, trigger = 'none', duration = 300, easing = 'ease-in-out', size = 'md', color = 'currentColor', strokeWidth = 2, filled = false, onMorphStart, onMorphEnd, className, style, 'aria-label': ariaLabel, }, ref) => {
-    var _a, _b;
-    const { t } = useNiceTranslation();
-    const [internalMorphed, setInternalMorphed] = useState(false);
-    const morphed = controlledMorphed !== null && controlledMorphed !== void 0 ? controlledMorphed : internalMorphed;
-    const [isAnimating, setIsAnimating] = useState(false);
-    const timeoutRef = useRef(undefined);
-    const pathData = MORPH_PATHS[pair];
-    const resolvedSize = typeof size === 'number' ? size : ((_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
-    const resolvedEasing = (_b = EASING_MAP[easing]) !== null && _b !== void 0 ? _b : easing;
-    useEffect(() => {
+  /* @__PURE__ */ forwardRef(
+    ({
+      pair,
+      morphed: controlledMorphed,
+      trigger = "none",
+      duration = 300,
+      easing = "ease-in-out",
+      size = "md",
+      color = "currentColor",
+      strokeWidth = 2,
+      filled = false,
+      onMorphStart,
+      onMorphEnd,
+      className,
+      style,
+      "aria-label": ariaLabel
+    }, ref) => {
+      const { t } = useNiceTranslation();
+      const [internalMorphed, setInternalMorphed] = useState(false);
+      const morphed = controlledMorphed ?? internalMorphed;
+      const [isAnimating, setIsAnimating] = useState(false);
+      const timeoutRef = useRef(void 0);
+      const pathData = MORPH_PATHS[pair];
+      const resolvedSize = typeof size === "number" ? size : SIZE_MAP[size] ?? 24;
+      const resolvedEasing = EASING_MAP[easing] ?? easing;
+      useEffect(() => {
         return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
         };
-    }, []);
-    const startMorph = useCallback((toMorphed) => {
-        if (isAnimating) {
+      }, []);
+      const startMorph = useCallback(
+        (toMorphed) => {
+          if (isAnimating) {
             return;
-        }
-        setIsAnimating(true);
-        onMorphStart === null || onMorphStart === void 0 ? void 0 : onMorphStart(toMorphed);
-        if (controlledMorphed === undefined) {
+          }
+          setIsAnimating(true);
+          onMorphStart?.(toMorphed);
+          if (controlledMorphed === void 0) {
             setInternalMorphed(toMorphed);
-        }
-        timeoutRef.current = setTimeout(() => {
+          }
+          timeoutRef.current = setTimeout(() => {
             setIsAnimating(false);
-            onMorphEnd === null || onMorphEnd === void 0 ? void 0 : onMorphEnd(toMorphed);
-        }, duration);
-    }, [isAnimating, duration, onMorphStart, onMorphEnd, controlledMorphed]);
-    const handleClick = useCallback(() => {
-        if (trigger === 'click') {
-            startMorph(!morphed);
+            onMorphEnd?.(toMorphed);
+          }, duration);
+        },
+        [isAnimating, duration, onMorphStart, onMorphEnd, controlledMorphed]
+      );
+      const handleClick = useCallback(() => {
+        if (trigger === "click") {
+          startMorph(!morphed);
         }
-    }, [trigger, morphed, startMorph]);
-    const handleMouseEnter = useCallback(() => {
-        if (trigger === 'hover') {
-            startMorph(true);
+      }, [trigger, morphed, startMorph]);
+      const handleMouseEnter = useCallback(() => {
+        if (trigger === "hover") {
+          startMorph(true);
         }
-    }, [trigger, startMorph]);
-    const handleMouseLeave = useCallback(() => {
-        if (trigger === 'hover') {
-            startMorph(false);
+      }, [trigger, startMorph]);
+      const handleMouseLeave = useCallback(() => {
+        if (trigger === "hover") {
+          startMorph(false);
         }
-    }, [trigger, startMorph]);
-    if (!pathData) {
+      }, [trigger, startMorph]);
+      if (!pathData) {
         console.warn(`NtdPathMorph: Unknown pair "${pair}"`);
         return null;
+      }
+      const currentPath = morphed ? pathData.to : pathData.from;
+      return /* @__PURE__ */ jsx(
+        "svg",
+        {
+          ref,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: pathData.viewBox,
+          width: resolvedSize,
+          height: resolvedSize,
+          className: `ntd-path-morph ${className ?? ""}`,
+          style: {
+            cursor: trigger !== "none" ? "pointer" : void 0,
+            ...style
+          },
+          onClick: handleClick,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          role: trigger !== "none" ? "button" : "img",
+          "aria-label": ariaLabel ?? t("ntdIconMorph.icon", "{pair} icon").replace("{pair}", String(pair)),
+          "aria-pressed": trigger !== "none" ? morphed : void 0,
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: currentPath,
+              fill: filled ? color : "none",
+              stroke: filled ? "none" : color,
+              strokeWidth: filled ? 0 : strokeWidth,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              style: {
+                transition: `d ${duration}ms ${resolvedEasing}, fill ${duration}ms ${resolvedEasing}, stroke ${duration}ms ${resolvedEasing}`
+              }
+            }
+          )
+        }
+      );
     }
-    const currentPath = morphed ? pathData.to : pathData.from;
-    return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: pathData.viewBox, width: resolvedSize, height: resolvedSize, className: `ntd-path-morph ${className !== null && className !== void 0 ? className : ''}`, style: {
-            cursor: trigger !== 'none' ? 'pointer' : undefined,
-            ...style,
-        }, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: trigger !== 'none' ? 'button' : 'img', "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t('ntdIconMorph.icon', '{pair} icon').replace('{pair}', String(pair)), "aria-pressed": trigger !== 'none' ? morphed : undefined, children: jsx("path", { d: currentPath, fill: filled ? color : 'none', stroke: filled ? 'none' : color, strokeWidth: filled ? 0 : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", style: {
-                transition: `d ${duration}ms ${resolvedEasing}, fill ${duration}ms ${resolvedEasing}, stroke ${duration}ms ${resolvedEasing}`,
-            } }) }));
-}), { displayName: 'NtdPathMorph' });
-/* ────────────────────────────────────────────────────────────────────────────
-   PREDEFINED MORPH PAIR COMPONENT
-   Convenience wrapper for common morphing patterns
-───────────────────────────────────────────────────────────────────────────── */
-// Import icons lazily for predefined pairs
+  ),
+  { displayName: "NtdPathMorph" }
+);
 const ICON_PAIRS = {
-    'menu-close': { from: NtdMenu, to: NtdClose },
-    'play-pause': { from: NtdPlay, to: NtdPause },
-    'plus-minus': { from: NtdPlus, to: NtdMinus },
-    'check-cross': { from: NtdCheck, to: NtdClose }, // Using Close as X
-    'chevron-up-down': { from: NtdChevronUp, to: NtdChevronDown },
-    'expand-collapse': { from: NtdPlus, to: NtdMinus }, // simplified
-    'sun-moon': { from: NtdSun, to: NtdMoon },
-    'volume-mute': { from: NtdPlay, to: NtdPause }, // placeholder
-    'lock-unlock': { from: NtdCheck, to: NtdClose }, // placeholder
-    'eye-hidden': { from: NtdCheck, to: NtdClose }, // placeholder
-    'heart-broken': { from: NtdCheck, to: NtdClose }, // placeholder
-    'star-empty': { from: NtdCheck, to: NtdClose }, // placeholder
+  "menu-close": { from: NtdMenu, to: NtdClose },
+  "play-pause": { from: NtdPlay, to: NtdPause },
+  "plus-minus": { from: NtdPlus, to: NtdMinus },
+  "check-cross": { from: NtdCheck, to: NtdClose },
+  // Using Close as X
+  "chevron-up-down": { from: NtdChevronUp, to: NtdChevronDown },
+  "expand-collapse": { from: NtdPlus, to: NtdMinus },
+  // simplified
+  "sun-moon": { from: NtdSun, to: NtdMoon },
+  "volume-mute": { from: NtdPlay, to: NtdPause },
+  // placeholder
+  "lock-unlock": { from: NtdCheck, to: NtdClose },
+  // placeholder
+  "eye-hidden": { from: NtdCheck, to: NtdClose },
+  // placeholder
+  "heart-broken": { from: NtdCheck, to: NtdClose },
+  // placeholder
+  "star-empty": { from: NtdCheck, to: NtdClose }
+  // placeholder
 };
-/**
- * Convenience component for predefined icon morph pairs.
- *
- * @example
- * ```tsx
- * <NtdMorphPair pair="menu-close" morphed={isMenuOpen} />
- * <NtdMorphPair pair="sun-moon" trigger="click" />
- * ```
- */
 const NtdMorphPair = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ forwardRef(({ pair, ...props }, ref) => {
+  /* @__PURE__ */ forwardRef(({ pair, ...props }, ref) => {
     const iconPair = ICON_PAIRS[pair];
     if (!iconPair) {
-        console.warn(`NtdMorphPair: Unknown pair "${pair}"`);
-        return null;
+      console.warn(`NtdMorphPair: Unknown pair "${pair}"`);
+      return null;
     }
-    return jsx(NtdIconMorph, { ref: ref, from: iconPair.from, to: iconPair.to, ...props });
-}), { displayName: 'NtdMorphPair' });
-/**
- * Hook for managing morph state with animation awareness.
- *
- * @example
- * ```tsx
- * const { morphed, toggle, isAnimating } = useMorphState({ duration: 300 });
- *
- * return (
- *   <button onClick={toggle} disabled={isAnimating}>
- *     <NtdIconMorph from={NtdMenu} to={NtdClose} morphed={morphed} />
- *   </button>
- * );
- * ```
- */
+    return /* @__PURE__ */ jsx(NtdIconMorph, { ref, from: iconPair.from, to: iconPair.to, ...props });
+  }),
+  { displayName: "NtdMorphPair" }
+);
 function useMorphState(options = {}) {
-    const { initial = false, duration = 300, onChange } = options;
-    const [morphed, setMorphedState] = useState(initial);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const timeoutRef = useRef(undefined);
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    const setMorphed = useCallback((value) => {
-        if (morphed === value || isAnimating) {
-            return;
-        }
-        setIsAnimating(true);
-        setMorphedState(value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(value);
-        timeoutRef.current = setTimeout(() => {
-            setIsAnimating(false);
-        }, duration);
-    }, [morphed, isAnimating, duration, onChange]);
-    const toggle = useCallback(() => setMorphed(!morphed), [morphed, setMorphed]);
-    const morph = useCallback(() => setMorphed(true), [setMorphed]);
-    const unmorph = useCallback(() => setMorphed(false), [setMorphed]);
-    return { morphed, toggle, morph, unmorph, setMorphed, isAnimating };
+  const { initial = false, duration = 300, onChange } = options;
+  const [morphed, setMorphedState] = useState(initial);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const timeoutRef = useRef(void 0);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const setMorphed = useCallback(
+    (value) => {
+      if (morphed === value || isAnimating) {
+        return;
+      }
+      setIsAnimating(true);
+      setMorphedState(value);
+      onChange?.(value);
+      timeoutRef.current = setTimeout(() => {
+        setIsAnimating(false);
+      }, duration);
+    },
+    [morphed, isAnimating, duration, onChange]
+  );
+  const toggle = useCallback(() => setMorphed(!morphed), [morphed, setMorphed]);
+  const morph = useCallback(() => setMorphed(true), [setMorphed]);
+  const unmorph = useCallback(() => setMorphed(false), [setMorphed]);
+  return { morphed, toggle, morph, unmorph, setMorphed, isAnimating };
 }
-
-export { NtdIconMorph, NtdMorphPair, NtdPathMorph, useMorphState };
+export {
+  NtdIconMorph,
+  NtdMorphPair,
+  NtdPathMorph,
+  useMorphState
+};