@nordmanai/nif 0.2.2 → 0.2.3

package/registry/ui/components/nm-icon/animated/circle-plus.tsx

@@ -0,0 +1,93 @@
+/* From Animate UI's registry (icons-lucide-circle-plus), 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 CirclePlusProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    circle: {},
+    line1: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },
+      },
+      animate: {
+        rotate: 90,
+        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },
+      },
+    },
+    line2: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+      animate: {
+        rotate: 90,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CirclePlusProps) {
+  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.circle
+        cx={12}
+        cy={12}
+        r={10}
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={8}
+        y1={12}
+        x2={16}
+        y2={12}
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={12}
+        y1={16}
+        x2={12}
+        y2={8}
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CirclePlus(props: CirclePlusProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, CirclePlus as CirclePlusAnimated };

package/registry/ui/components/nm-icon/animated/circle-question-mark.tsx

@@ -0,0 +1,62 @@
+/* From Animate UI's registry (icons-lucide-circle-question-mark), 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 CircleQuestionMarkProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    mark: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, -2, 0, -0.8, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          times: [0, 0.3, 0.55, 0.75, 1],
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CircleQuestionMarkProps) {
+  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}
+    >
+      <circle cx={12} cy={12} r={10} />
+      <motion.g variants={variants.mark} initial="initial" animate={controls}>
+        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+        <path d="M12 17h.01" />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function CircleQuestionMark(props: CircleQuestionMarkProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, CircleQuestionMark as CircleQuestionMarkAnimated };

package/registry/ui/components/nm-icon/animated/circle-x.tsx

@@ -0,0 +1,93 @@
+/* From Animate UI's registry (icons-lucide-circle-x), 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 CircleXProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    circle: {},
+    line1: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+      animate: {
+        rotate: 90,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line2: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },
+      },
+      animate: {
+        rotate: 90,
+        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CircleXProps) {
+  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.circle
+        cx={12}
+        cy={12}
+        r={10}
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={9}
+        y1={15}
+        x2={15}
+        y2={9}
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={9}
+        y1={9}
+        x2={15}
+        y2={15}
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CircleX(props: CircleXProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, CircleX as CircleXAnimated };

package/registry/ui/components/nm-icon/animated/clock-3.tsx

@@ -0,0 +1,95 @@
+/* From Animate UI's registry (icons-lucide-clock-3), 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 Clock3Props = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    circle: {},
+    line1: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+      animate: {
+        transformOrigin: 'bottom left',
+        rotate: [0, 20, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    line2: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+      animate: {
+        transformOrigin: 'bottom left',
+        rotate: 360,
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: Clock3Props) {
+  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.circle
+        cx={12}
+        cy={12}
+        r={10}
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={16.5}
+        y1={12}
+        x2={12}
+        y2={12}
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={12}
+        y1={6}
+        x2={12}
+        y2={12}
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Clock3(props: Clock3Props) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Clock3 as Clock3Animated };

package/registry/ui/components/nm-icon/animated/clock-4.tsx

@@ -0,0 +1,95 @@
+/* From Animate UI's registry (icons-lucide-clock-4), 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 Clock4Props = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    circle: {},
+    line1: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+      animate: {
+        transformOrigin: 'top left',
+        rotate: [0, 20, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    line2: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+      animate: {
+        transformOrigin: 'bottom left',
+        rotate: 360,
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: Clock4Props) {
+  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.circle
+        cx={12}
+        cy={12}
+        r={10}
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={12}
+        y1={12}
+        x2={16}
+        y2={14}
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={12}
+        y1={6}
+        x2={12}
+        y2={12}
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Clock4(props: Clock4Props) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Clock4 as Clock4Animated };

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

@@ -0,0 +1,95 @@
+/* From Animate UI's registry (icons-lucide-clock), 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 ClockProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    circle: {},
+    line1: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+      animate: {
+        transformOrigin: 'top left',
+        rotate: [0, 20, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    line2: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+      animate: {
+        transformOrigin: 'bottom left',
+        rotate: 360,
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ClockProps) {
+  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.circle
+        cx={12}
+        cy={12}
+        r={10}
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={12}
+        y1={12}
+        x2={16}
+        y2={14}
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={12}
+        y1={6}
+        x2={12}
+        y2={12}
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Clock(props: ClockProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Clock as ClockAnimated };

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

@@ -0,0 +1,130 @@
+/* From Animate UI's registry (icons-lucide-cloud-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 CloudSunProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      path1: {
+        initial: {
+          x: 0,
+          y: 0,
+        },
+        animate: {
+          x: [0, -1, 1, 0],
+          y: [0, -1, 1, 0],
+          transition: {
+            duration: 1.4,
+            ease: 'easeInOut',
+          },
+        },
+      },
+      path2: {},
+    };
+
+    for (let i = 1; i <= 4; 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 }: CloudSunProps) {
+  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.path
+        d="M13,22h-6c-2.8,0-5-2.2-5-5,0-2.8,2.2-5,5-5,2.4,0,4.4,1.7,4.9,4h1.1c1.7,0,3,1.3,3,3s-1.3,3-3,3Z"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M15.9,12.6c.4-2.2-1.1-4.2-3.3-4.6-.9-.1-1.8,0-2.6.5"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="6.3"
+        y1="6.3"
+        x2="4.9"
+        y2="4.9"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="4"
+        x2="12"
+        y2="2"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17.7"
+        y1="6.3"
+        x2="19.1"
+        y2="4.9"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="20"
+        y1="12"
+        x2="22"
+        y2="12"
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CloudSun(props: CloudSunProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, CloudSun as CloudSunAnimated };