@nordmanai/nif 0.2.2 → 0.2.3

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

@@ -0,0 +1,137 @@
+/* From Animate UI's registry (icons-lucide-radio), 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 RadioProps = IconProps<keyof typeof animations>;
+
+const waves = (
+  wave: (ring: number, side: number) => Variants,
+): Record<string, Variants> =>
+  Object.fromEntries(
+    [1, 2, 3, 4].map((i) => [`path${i}`, wave((i - 1) % 2, i <= 2 ? 1 : -1)]),
+  );
+
+const animations = {
+  default: {
+    ...waves((ring, side) => ({
+      initial: { opacity: 1, x: 0 },
+      animate: {
+        opacity: [1, 0.4, 1],
+        x: [0, side * 0.8, 0],
+        transition: {
+          duration: 0.5,
+          ease: 'easeInOut',
+          delay: 0.1 + 0.15 * ring,
+        },
+      },
+    })),
+    circle: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 1.15, 0.96, 1.06, 1],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  pulse: waves((ring) => ({
+    initial: { opacity: 1, scale: 1 },
+    animate: {
+      opacity: [1, 0.25, 1],
+      scale: [1, 0.85, 1],
+      transition: { duration: 0.5, ease: 'easeInOut', delay: 0.15 * ring },
+    },
+  })) satisfies Record<string, Variants>,
+  blink: waves((ring) => ({
+    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.2 * ring,
+        },
+        scale: {
+          duration: 0.2,
+          ease: 'easeInOut',
+          repeat: 1,
+          repeatType: 'reverse',
+          repeatDelay: 0.2,
+          delay: 0.2 * ring,
+        },
+      },
+    },
+  })) satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: RadioProps) {
+  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.path
+        d="M16.247 7.761a6 6 0 0 1 0 8.478"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M19.075 4.933a10 10 0 0 1 0 14.134"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M7.753 16.239a6 6 0 0 1 0-8.478"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M4.925 19.067a10 10 0 0 1 0-14.134"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="12"
+        cy="12"
+        r="2"
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Radio(props: RadioProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Radio as RadioAnimated };

package/registry/ui/components/nm-icon/animated/refresh-cw.tsx

@@ -0,0 +1,103 @@
+/* From Animate UI's registry (icons-lucide-refresh-cw), 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 RefreshCwProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+        transition: { type: 'spring', stiffness: 150, damping: 25 },
+      },
+      animate: {
+        rotate: 45,
+        transition: { type: 'spring', stiffness: 150, damping: 25 },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {},
+  } satisfies Record<string, Variants>,
+  rotate: {
+    group: {
+      initial: {
+        rotate: 0,
+        transition: { type: 'spring', stiffness: 100, damping: 25 },
+      },
+      animate: {
+        rotate: 360,
+        transition: { type: 'spring', stiffness: 100, damping: 25 },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: RefreshCwProps) {
+  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="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M21 3v5h-5"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 16H3v5"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function RefreshCw(props: RefreshCwProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, RefreshCw as RefreshCwAnimated };

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

@@ -0,0 +1,93 @@
+/* From Animate UI's registry (icons-lucide-rocket), 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 RocketProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { x: 0, y: 0, transition: { duration: 0.3, ease: 'easeInOut' } },
+      animate: {
+        x: [0, -0.3, 0.3, -0.3, 0.3, 0.8],
+        y: [0, 0.3, -0.3, 0.3, -0.3, -0.8],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+    trails: {
+      initial: { scale: 1, x: 0, y: 0, transformOrigin: '100% 0%' },
+      animate: {
+        scale: [1, 0.6, 1.1, 1],
+        x: [0, 0, 0, 0.8],
+        y: [0, 0, 0, -0.8],
+        transformOrigin: '100% 0%',
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: RocketProps) {
+  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="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"
+          variants={variants.path3}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.path
+        d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"
+        variants={variants.trails}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Rocket(props: RocketProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Rocket as RocketAnimated };

package/registry/ui/components/nm-icon/animated/rotate-ccw.tsx

@@ -0,0 +1,87 @@
+/* From Animate UI's registry (icons-lucide-rotate-ccw), 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 RotateCcwProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+        transition: { type: 'spring', stiffness: 150, damping: 25 },
+      },
+      animate: {
+        rotate: -45,
+        transition: { type: 'spring', stiffness: 150, damping: 25 },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+  rotate: {
+    group: {
+      initial: {
+        rotate: 0,
+        transition: { type: 'spring', stiffness: 150, damping: 25 },
+      },
+      animate: {
+        rotate: -360,
+        transition: { type: 'spring', stiffness: 150, damping: 25 },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: RotateCcwProps) {
+  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="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 3v5h5"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function RotateCcw(props: RotateCcwProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, RotateCcw as RotateCcwAnimated };

package/registry/ui/components/nm-icon/animated/rotate-cw.tsx

@@ -0,0 +1,98 @@
+/* From Animate UI's registry (icons-lucide-rotate-cw), 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 RotateCwProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { rotate: 0, transition: { duration: 0.8, ease: 'easeInOut' } },
+      animate: {
+        rotate: 360,
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+  tilt: {
+    group: {
+      initial: {
+        rotate: 0,
+        transition: { type: 'spring', stiffness: 150, damping: 25 },
+      },
+      animate: {
+        rotate: 45,
+        transition: { type: 'spring', stiffness: 150, damping: 25 },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+  rotate: {
+    group: {
+      initial: {
+        rotate: 0,
+        transition: { type: 'spring', stiffness: 100, damping: 25 },
+      },
+      animate: {
+        rotate: 360,
+        transition: { type: 'spring', stiffness: 100, damping: 25 },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: RotateCwProps) {
+  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="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M21 3v5h-5"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function RotateCw(props: RotateCwProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, RotateCw as RotateCwAnimated };

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

@@ -0,0 +1,58 @@
+/* From Animate UI's registry (icons-lucide-save), 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 SaveProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 0.9, 1.04, 1],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SaveProps) {
+  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}>
+        <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
+        <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" />
+        <path d="M7 3v4a1 1 0 0 0 1 1h7" />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Save(props: SaveProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Save as SaveAnimated };

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

@@ -0,0 +1,90 @@
+/* From Animate UI's registry (icons-lucide-search), 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 SearchProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        transformOrigin: 'bottom right',
+        rotate: [0, 17, -10, 5, -1, 0],
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      },
+    },
+    path: {},
+    circle: {},
+  } satisfies Record<string, Variants>,
+  find: {
+    group: {
+      initial: {
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        x: [0, '-15%', 0, 0],
+        y: [0, 0, '-15%', 0],
+        transition: { duration: 1, ease: 'easeInOut' },
+      },
+    },
+    path: {},
+    circle: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SearchProps) {
+  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="m21 21-4.34-4.34"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx={11}
+        cy={11}
+        r={8}
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Search(props: SearchProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Search as SearchAnimated };