@nordmanai/nif 0.2.2 → 0.2.3

package/registry/ui/components/nm-icon/animated/sliders-horizontal.tsx

@@ -0,0 +1,243 @@
+/* From Animate UI's registry (icons-lucide-sliders-horizontal), with its import pointed at NIF's motion adapter. */
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@animate-ui/react/icons';
+
+type SlidersHorizontalProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    line1: {
+      initial: { x2: 10 },
+      animate: { x2: 4, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line2: {
+      initial: { x1: 14, x2: 14 },
+      animate: {
+        x1: 8,
+        x2: 8,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line3: {
+      initial: { x1: 14 },
+      animate: { x1: 8, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line4: {
+      initial: { x2: 8 },
+      animate: { x2: 16, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line5: {
+      initial: { x1: 8, x2: 8 },
+      animate: {
+        x1: 16,
+        x2: 16,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line6: {
+      initial: { x1: 12 },
+      animate: { x1: 20, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line7: {
+      initial: { x2: 12 },
+      animate: { x2: 7, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line8: {
+      initial: { x1: 16, x2: 16 },
+      animate: {
+        x1: 11,
+        x2: 11,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line9: {
+      initial: { x1: 16 },
+      animate: { x1: 11, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    line1: {
+      initial: { x2: 10 },
+      animate: {
+        x2: [10, 4, 10],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line2: {
+      initial: { x1: 14, x2: 14 },
+      animate: {
+        x1: [14, 8, 14],
+        x2: [14, 8, 14],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line3: {
+      initial: { x1: 14 },
+      animate: {
+        x1: [14, 8, 14],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line4: {
+      initial: { x2: 8 },
+      animate: {
+        x2: [8, 16, 8],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line5: {
+      initial: { x1: 8, x2: 8 },
+      animate: {
+        x1: [8, 16, 8],
+        x2: [8, 16, 8],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line6: {
+      initial: { x1: 12 },
+      animate: {
+        x1: [12, 20, 12],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line7: {
+      initial: { x2: 12 },
+      animate: {
+        x2: [12, 7, 12],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line8: {
+      initial: { x1: 16, x2: 16 },
+      animate: {
+        x1: [16, 11, 16],
+        x2: [16, 11, 16],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line9: {
+      initial: { x1: 16 },
+      animate: {
+        x1: [16, 11, 16],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SlidersHorizontalProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.line
+        x1="3"
+        y1="5"
+        x2="10"
+        y2="5"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="14"
+        y1="3"
+        x2="14"
+        y2="7"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="14"
+        y1="5"
+        x2="21"
+        y2="5"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="3"
+        y1="12"
+        x2="8"
+        y2="12"
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="8"
+        y1="10"
+        x2="8"
+        y2="14"
+        variants={variants.line5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="12"
+        x2="21"
+        y2="12"
+        variants={variants.line6}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="3"
+        y1="19"
+        x2="12"
+        y2="19"
+        variants={variants.line7}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="16"
+        y1="17"
+        x2="16"
+        y2="21"
+        variants={variants.line8}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="16"
+        y1="19"
+        x2="21"
+        y2="19"
+        variants={variants.line9}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function SlidersHorizontal(props: SlidersHorizontalProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, SlidersHorizontal as SlidersHorizontalAnimated };

package/registry/ui/components/nm-icon/animated/sparkles.tsx

@@ -0,0 +1,227 @@
+/* From Animate UI's registry (icons-lucide-sparkles), with its import pointed at NIF's motion adapter. */
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@animate-ui/react/icons';
+
+type SparklesProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 0.9, 1.1, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path: {},
+    plus: {
+      initial: { scale: 1, rotate: 0 },
+      animate: {
+        scale: [1, 0.7, 1.2, 1],
+        rotate: [0, 90],
+        transition: { duration: 0.6, ease: 'easeInOut', delay: 0.15 },
+      },
+    },
+    circle: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 0.7, 1.2, 1],
+        transition: { duration: 0.6, ease: 'easeInOut', delay: 0.15 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  blink: {
+    group: {
+      initial: {
+        scale: 1,
+      },
+      animate: {
+        scale: [1, 0.9, 1.1, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path: {},
+    plus: {
+      initial: { opacity: 1, scale: 1 },
+      animate: {
+        opacity: 0,
+        scale: 0,
+        transition: {
+          opacity: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            repeat: 1,
+            repeatType: 'reverse',
+            repeatDelay: 0.2,
+            delay: 0.15,
+          },
+          scale: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            repeat: 1,
+            repeatType: 'reverse',
+            repeatDelay: 0.2,
+            delay: 0.15,
+          },
+        },
+      },
+    },
+    circle: {
+      initial: { opacity: 1, scale: 1 },
+      animate: {
+        opacity: 0,
+        scale: 0,
+        transition: {
+          opacity: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            repeat: 1,
+            repeatType: 'reverse',
+            repeatDelay: 0.2,
+          },
+          scale: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            repeat: 1,
+            repeatType: 'reverse',
+            repeatDelay: 0.2,
+          },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  fill: {
+    group: {
+      initial: {
+        scale: 1,
+      },
+      animate: {
+        scale: [1, 0.9, 1.1, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path: {
+      initial: {
+        fill: 'currentColor',
+        fillOpacity: 0,
+      },
+      animate: {
+        fillOpacity: 1,
+        transition: { delay: 0.2 },
+      },
+    },
+    plus: {
+      initial: { opacity: 1, scale: 1 },
+      animate: {
+        opacity: 0,
+        scale: 0,
+        transition: {
+          opacity: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            repeat: 1,
+            repeatType: 'reverse',
+            repeatDelay: 0.2,
+            delay: 0.15,
+          },
+          scale: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            repeat: 1,
+            repeatType: 'reverse',
+            repeatDelay: 0.2,
+            delay: 0.15,
+          },
+        },
+      },
+    },
+    circle: {
+      initial: {
+        fill: 'currentColor',
+        fillOpacity: 0,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        fillOpacity: 1,
+        opacity: 0,
+        scale: 0,
+        transition: {
+          fillOpacity: { delay: 0.2 },
+          opacity: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            repeat: 1,
+            repeatType: 'reverse',
+            repeatDelay: 0.2,
+          },
+          scale: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            repeat: 1,
+            repeatType: 'reverse',
+            repeatDelay: 0.2,
+          },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SparklesProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path
+          d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.path
+        d="M20 2v4 M22 4h-4"
+        variants={variants.plus}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="4"
+        cy="20"
+        r="2"
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Sparkles(props: SparklesProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Sparkles as SparklesAnimated };

package/registry/ui/components/nm-icon/animated/star.tsx

@@ -0,0 +1,86 @@
+/* From Animate UI's registry (icons-lucide-star), with its import pointed at NIF's motion adapter. */
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@animate-ui/react/icons';
+
+type StarProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        scale: 1,
+      },
+      animate: {
+        scale: [1, 0.9, 1.2, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path: {},
+  } satisfies Record<string, Variants>,
+  fill: {
+    group: {
+      initial: {
+        scale: 1,
+      },
+      animate: {
+        scale: [1, 0.9, 1.2, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path: {
+      initial: {
+        fill: 'currentColor',
+        fillOpacity: 0,
+      },
+      animate: {
+        fillOpacity: 1,
+        transition: { delay: 0.2 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: StarProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      variants={variants.group}
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Star(props: StarProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Star as StarAnimated };

package/registry/ui/components/nm-icon/animated/sun.tsx

@@ -0,0 +1,148 @@
+/* From Animate UI's registry (icons-lucide-sun), with its import pointed at NIF's motion adapter. */
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@animate-ui/react/icons';
+
+type SunProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      circle: {},
+    };
+
+    for (let i = 1; i <= 8; i++) {
+      animation[`line${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: [0, 1],
+          pathLength: [0, 1],
+          transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            delay: (i - 1) * 0.15,
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SunProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.circle
+        cx="12"
+        cy="12"
+        r="4"
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="4"
+        x2="12"
+        y2="2"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17.7"
+        y1="6.3"
+        x2="19.1"
+        y2="4.9"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="20"
+        y1="12"
+        x2="22"
+        y2="12"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17.7"
+        y1="17.7"
+        x2="19.1"
+        y2="19.1"
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="20"
+        x2="12"
+        y2="22"
+        variants={variants.line5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="6.3"
+        y1="17.7"
+        x2="4.9"
+        y2="19.1"
+        variants={variants.line6}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="4"
+        y1="12"
+        x2="2"
+        y2="12"
+        variants={variants.line7}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="6.3"
+        y1="6.3"
+        x2="4.9"
+        y2="4.9"
+        variants={variants.line8}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Sun(props: SunProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Sun as SunAnimated };