@nordmanai/nif 0.2.2 → 0.2.3

package/registry/ui/components/nm-icon/animated/user-round.tsx

@@ -0,0 +1,84 @@
+/* From Animate UI's registry (icons-lucide-user-round), 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 UserRoundProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 4, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    circle: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 1, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: UserRoundProps) {
+  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="M20 21a8 8 0 0 0-16 0"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx={12}
+        cy={8}
+        r={5}
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function UserRound(props: UserRoundProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, UserRound as UserRoundAnimated };

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

@@ -0,0 +1,84 @@
+/* From Animate UI's registry (icons-lucide-user), 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 UserProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 2, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    circle: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 4, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: UserProps) {
+  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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx={12}
+        cy={7}
+        r={4}
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function User(props: UserProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, User as UserAnimated };

package/registry/ui/components/nm-icon/animated/users-round.tsx

@@ -0,0 +1,156 @@
+/* From Animate UI's registry (icons-lucide-users-round), 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 UsersRoundProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 4, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          delay: 0.1,
+        },
+      },
+    },
+    path2: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 1, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path3: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 4, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    circle: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 1, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          delay: 0.1,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  appear: {
+    path1: {},
+    path2: {
+      initial: {
+        x: -5,
+        opacity: 0,
+      },
+      animate: {
+        x: 0,
+        opacity: 1,
+        transition: {
+          type: 'spring',
+          stiffness: 100,
+          damping: 10,
+        },
+      },
+    },
+    path3: {
+      initial: {
+        x: -5,
+        opacity: 0,
+      },
+      animate: {
+        x: 0,
+        opacity: 1,
+        transition: {
+          type: 'spring',
+          stiffness: 100,
+          damping: 10,
+        },
+      },
+    },
+    circle: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: UsersRoundProps) {
+  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="M18,21c0-4.4-3.6-8-8-8s-8,3.6-8,8"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M18,12c2.2-1.7,2.7-4.8,1-7-.4-.5-.9-1-1.4-1.3"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M22,20c0-3.4-2-6.5-4-8"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx={10}
+        cy={8}
+        r={5}
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function UsersRound(props: UsersRoundProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, UsersRound as UsersRoundAnimated };

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

@@ -0,0 +1,156 @@
+/* From Animate UI's registry (icons-lucide-users), 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 UsersProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 2, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          delay: 0.1,
+        },
+      },
+    },
+    path2: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 4, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path3: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 2, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    circle: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 4, -2, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          delay: 0.1,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  appear: {
+    path1: {},
+    path2: {
+      initial: {
+        x: -6,
+        opacity: 0,
+      },
+      animate: {
+        x: 0,
+        opacity: 1,
+        transition: {
+          type: 'spring',
+          stiffness: 100,
+          damping: 10,
+        },
+      },
+    },
+    path3: {
+      initial: {
+        x: -6,
+        opacity: 0,
+      },
+      animate: {
+        x: 0,
+        opacity: 1,
+        transition: {
+          type: 'spring',
+          stiffness: 100,
+          damping: 10,
+        },
+      },
+    },
+    circle: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: UsersProps) {
+  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 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 3.128a4 4 0 0 1 0 7.744"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M22 21v-2a4 4 0 0 0-3-3.87"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx={9}
+        cy={7}
+        r={4}
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Users(props: UsersProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Users as UsersAnimated };

package/registry/ui/components/nm-icon/animated/volume-2.tsx

@@ -0,0 +1,119 @@
+/* From Animate UI's registry (icons-lucide-volume-2), 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 Volume2Props = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      path3: {},
+    };
+
+    for (let i = 1; i <= 2; i++) {
+      animation[`path${i}`] = {
+        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 * (i - 1),
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+  blink: (() => {
+    const animation: Record<string, Variants> = {
+      path3: {},
+    };
+
+    for (let i = 1; i <= 2; i++) {
+      animation[`path${i}`] = {
+        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 * (i - 1),
+            },
+            scale: {
+              duration: 0.2,
+              ease: 'easeInOut',
+              repeat: 1,
+              repeatType: 'reverse',
+              repeatDelay: 0.2,
+              delay: 0.2 * (i - 1),
+            },
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: Volume2Props) {
+  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 9a5 5 0 0 1 0 6"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M19.364 18.364a9 9 0 0 0 0-12.728"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Volume2(props: Volume2Props) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Volume2 as Volume2Animated };

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

@@ -0,0 +1,111 @@
+/* From Animate UI's registry (icons-lucide-wand-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 WandSparklesProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    wand: {
+      initial: { rotate: 0, scale: 1, transformOrigin: '0% 100%' },
+      animate: {
+        rotate: [0, -10, 4, 0],
+        scale: [1, 0.9, 0.97, 1],
+        transformOrigin: '0% 100%',
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          times: [0, 0.4, 0.75, 1],
+        },
+      },
+    },
+    sparkle1: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: [1, 0.2, 1.15, 1],
+        opacity: [1, 0.4, 1, 1],
+        transition: { duration: 0.5, ease: 'easeInOut', delay: 0.15 },
+      },
+    },
+    sparkle2: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: [1, 0.2, 1.15, 1],
+        opacity: [1, 0.4, 1, 1],
+        transition: { duration: 0.5, ease: 'easeInOut', delay: 0.27 },
+      },
+    },
+    sparkle3: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: [1, 0.2, 1.15, 1],
+        opacity: [1, 0.4, 1, 1],
+        transition: { duration: 0.5, ease: 'easeInOut', delay: 0.39 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: WandSparklesProps) {
+  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.wand} initial="initial" animate={controls}>
+        <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" />
+        <path d="m14 7 3 3" />
+      </motion.g>
+      <motion.g
+        variants={variants.sparkle1}
+        initial="initial"
+        animate={controls}
+      >
+        <path d="M10 2v2" />
+        <path d="M11 3H9" />
+      </motion.g>
+      <motion.g
+        variants={variants.sparkle2}
+        initial="initial"
+        animate={controls}
+      >
+        <path d="M5 6v4" />
+        <path d="M7 8H3" />
+      </motion.g>
+      <motion.g
+        variants={variants.sparkle3}
+        initial="initial"
+        animate={controls}
+      >
+        <path d="M19 14v4" />
+        <path d="M21 16h-4" />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function WandSparkles(props: WandSparklesProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, WandSparkles as WandSparklesAnimated };