@nordmanai/nif 0.2.2 → 0.2.4

package/registry/ui/components/nm-icon/animated/calendar-days.tsx

@@ -0,0 +1,128 @@
+/* From Animate UI's registry (icons-lucide-calendar-days), 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 CalendarDaysProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    day1: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [0, 0, 1],
+        transition: { duration: 1, times: [0, 0.1, 0.18], ease: 'easeOut' },
+      },
+    },
+    day2: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [0, 0, 1],
+        transition: { duration: 1, times: [0, 0.22, 0.3], ease: 'easeOut' },
+      },
+    },
+    day3: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [0, 0, 1],
+        transition: { duration: 1, times: [0, 0.34, 0.42], ease: 'easeOut' },
+      },
+    },
+    day4: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [0, 0, 1],
+        transition: { duration: 1, times: [0, 0.46, 0.54], ease: 'easeOut' },
+      },
+    },
+    day5: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [0, 0, 1],
+        transition: { duration: 1, times: [0, 0.58, 0.66], ease: 'easeOut' },
+      },
+    },
+    day6: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [0, 0, 1],
+        transition: { duration: 1, times: [0, 0.7, 0.78], ease: 'easeOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CalendarDaysProps) {
+  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}
+    >
+      <path d="M8 2v3" />
+      <path d="M16 2v3" />
+      <rect x={3} y={3} width={18} height={18} rx={2} />
+      <path d="M3 9h18" />
+      <motion.path
+        d="M8 13h.01"
+        variants={variants.day1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12 13h.01"
+        variants={variants.day2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 13h.01"
+        variants={variants.day3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 17h.01"
+        variants={variants.day4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12 17h.01"
+        variants={variants.day5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 17h.01"
+        variants={variants.day6}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CalendarDays(props: CalendarDaysProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, CalendarDays as CalendarDaysAnimated };

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

@@ -0,0 +1,83 @@
+/* From Animate UI's registry (icons-lucide-calendar), 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 CalendarProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    ring1: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, -1, 0, -0.3, 0],
+        transition: {
+          duration: 0.5,
+          ease: 'easeInOut',
+          times: [0, 0.3, 0.55, 0.75, 1],
+        },
+      },
+    },
+    ring2: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, -1, 0, -0.3, 0],
+        transition: {
+          duration: 0.5,
+          ease: 'easeInOut',
+          times: [0, 0.3, 0.55, 0.75, 1],
+          delay: 0.08,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CalendarProps) {
+  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="M8 2v3"
+        variants={variants.ring1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 2v3"
+        variants={variants.ring2}
+        initial="initial"
+        animate={controls}
+      />
+      <rect x={3} y={3} width={18} height={18} rx={2} />
+      <path d="M3 9h18" />
+    </motion.svg>
+  );
+}
+
+function Calendar(props: CalendarProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Calendar as CalendarAnimated };

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

@@ -0,0 +1,85 @@
+/* From Animate UI's registry (icons-lucide-camera), 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 CameraProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    body: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 0.94, 1],
+        transition: { duration: 0.4, ease: 'easeInOut' },
+      },
+    },
+    lens: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 0.7, 1.1, 1],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  flash: {
+    body: {},
+    lens: {
+      initial: { fill: 'currentColor', fillOpacity: 0 },
+      animate: {
+        fillOpacity: [0, 1, 0, 1, 0, 1, 0],
+        transition: {
+          duration: 0.6,
+          times: [0, 0.17, 0.33, 0.5, 0.67, 0.83, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CameraProps) {
+  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.body} initial="initial" animate={controls}>
+        <path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" />
+        <motion.circle
+          cx={12}
+          cy={13}
+          r={3}
+          variants={variants.lens}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Camera(props: CameraProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Camera as CameraAnimated };

package/registry/ui/components/nm-icon/animated/chart-column-increasing.tsx

@@ -0,0 +1,150 @@
+/* From Animate UI's registry (icons-lucide-chart-column-increasing), 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 ChartColumnIncreasingProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      path4: {},
+    };
+
+    for (let i = 1; i <= 3; i++) {
+      animation[`path${i}`] = {
+        initial: { opacity: 1, pathLength: 1 },
+        animate: {
+          opacity: [0, 1],
+          pathLength: [0, 1],
+          transition: {
+            ease: 'easeInOut',
+            duration: 0.4,
+            delay: (i - 1) * 0.3,
+          },
+        },
+      };
+    }
+
+    return animation as Record<string, Variants>;
+  })() satisfies Record<string, Variants>,
+  'default-loop': (() => {
+    const n = 3;
+    const delayStep = 0.3;
+    const segDuration = 0.4;
+
+    const startOut = (i: number) => (n - i) * delayStep;
+    const endOut = (i: number) => startOut(i) + segDuration;
+
+    const outTotal = Math.max(
+      ...Array.from({ length: n }, (_, k) => endOut(k + 1)),
+    );
+
+    const startIn = (i: number) => outTotal + (i - 1) * delayStep;
+    const endIn = (i: number) => startIn(i) + segDuration;
+
+    const totalDuration = Math.max(
+      ...Array.from({ length: n }, (_, k) => endIn(k + 1)),
+    );
+
+    const animation: Record<string, Variants> = {};
+
+    for (let i = 1; i <= n; i++) {
+      const tSO = startOut(i) / totalDuration;
+      const tEO = endOut(i) / totalDuration;
+      const tSI = startIn(i) / totalDuration;
+      const tEI = endIn(i) / totalDuration;
+
+      animation[`path${i}`] = {
+        initial: { opacity: 1, pathLength: 1 },
+        animate: {
+          pathLength: [1, 1, 0, 0, 1],
+          opacity: [1, 1, 0, 0, 1],
+          transition: {
+            ease: 'easeInOut',
+            duration: totalDuration,
+            times: [0, tSO, tEO, tSI, tEI],
+          },
+        },
+      };
+    }
+
+    return animation as Record<string, Variants>;
+  })() satisfies Record<string, Variants>,
+  decreasing: {
+    path1: {
+      initial: { d: 'M8 17V13' },
+      animate: {
+        d: 'M8 17V5',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    path2: {},
+    path3: {
+      initial: { d: 'M18 17V5' },
+      animate: {
+        d: 'M18 17V13',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ChartColumnIncreasingProps) {
+  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="M8 17V13"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M13 17V9"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M18 17V5"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 3v16a2 2 0 0 0 2 2h16"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ChartColumnIncreasing(props: ChartColumnIncreasingProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ChartColumnIncreasing as ChartColumnIncreasingAnimated };

package/registry/ui/components/nm-icon/animated/chart-column.tsx

@@ -0,0 +1,179 @@
+/* From Animate UI's registry (icons-lucide-chart-column), 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 ChartColumnProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      path4: {},
+    };
+
+    for (let i = 1; i <= 3; i++) {
+      animation[`path${i}`] = {
+        initial: { opacity: 1, pathLength: 1 },
+        animate: {
+          opacity: [0, 1],
+          pathLength: [0, 1],
+          transition: {
+            ease: 'easeInOut',
+            duration: 0.4,
+            delay: (i - 1) * 0.3,
+          },
+        },
+      };
+    }
+
+    return animation as Record<string, Variants>;
+  })() satisfies Record<string, Variants>,
+  'default-loop': (() => {
+    const n = 3;
+    const delayStep = 0.3;
+    const segDuration = 0.4;
+
+    const startOut = (i: number) => (n - i) * delayStep;
+    const endOut = (i: number) => startOut(i) + segDuration;
+
+    const outTotal = Math.max(
+      ...Array.from({ length: n }, (_, k) => endOut(k + 1)),
+    );
+
+    const startIn = (i: number) => outTotal + (i - 1) * delayStep;
+    const endIn = (i: number) => startIn(i) + segDuration;
+
+    const totalDuration = Math.max(
+      ...Array.from({ length: n }, (_, k) => endIn(k + 1)),
+    );
+
+    const animation: Record<string, Variants> = {};
+
+    for (let i = 1; i <= n; i++) {
+      const tSO = startOut(i) / totalDuration;
+      const tEO = endOut(i) / totalDuration;
+      const tSI = startIn(i) / totalDuration;
+      const tEI = endIn(i) / totalDuration;
+
+      animation[`path${i}`] = {
+        initial: { opacity: 1, pathLength: 1 },
+        animate: {
+          pathLength: [1, 1, 0, 0, 1],
+          opacity: [1, 1, 0, 0, 1],
+          transition: {
+            ease: 'easeInOut',
+            duration: totalDuration,
+            times: [0, tSO, tEO, tSI, tEI],
+          },
+        },
+      };
+    }
+
+    return animation as Record<string, Variants>;
+  })() satisfies Record<string, Variants>,
+  increasing: {
+    path1: {
+      initial: { d: 'M8 17V13' },
+      animate: {
+        d: 'M8 17V13',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    path2: {
+      initial: { d: 'M13 17V5' },
+      animate: {
+        d: 'M13 17V9',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    path3: {
+      initial: { d: 'M18 17V9' },
+      animate: {
+        d: 'M18 17V5',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  decreasing: {
+    path1: {
+      initial: { d: 'M8 17V13' },
+      animate: {
+        d: 'M8 17V5',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    path2: {
+      initial: { d: 'M13 17V5' },
+      animate: {
+        d: 'M13 17V9',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    path3: {
+      initial: { d: 'M18 17V9' },
+      animate: {
+        d: 'M18 17V13',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ChartColumnProps) {
+  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="M8 17V13"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M13 17V5"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M18 17V9"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 3v16a2 2 0 0 0 2 2h16"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ChartColumn(props: ChartColumnProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ChartColumn as ChartColumnAnimated };

package/registry/ui/components/nm-icon/animated/chart-line.tsx

@@ -0,0 +1,88 @@
+/* From Animate UI's registry (icons-lucide-chart-line), 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 ChartLineProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {},
+    path2: {
+      initial: { opacity: 1, pathLength: 1, pathOffset: 0 },
+      animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+          opacity: { duration: 0.01 },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path1: {},
+    path2: {
+      initial: { opacity: 1, pathLength: 1, pathOffset: 0 },
+      animate: {
+        opacity: [1, 0, 1],
+        pathLength: [1, 0, 1],
+        pathOffset: [0, 1, 0],
+        transition: {
+          duration: 1.6,
+          ease: 'easeInOut',
+          opacity: { duration: 0.01 },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ChartLineProps) {
+  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="M3 3v16a2 2 0 0 0 2 2h16"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m19 9-5 5-4-4-3 3"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ChartLine(props: ChartLineProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ChartLine as ChartLineAnimated };