@nordmanai/nif 0.2.2 → 0.2.4

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

@@ -0,0 +1,71 @@
+/* From Animate UI's registry (icons-lucide-terminal), 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 TerminalProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        opacity: 1,
+      },
+      animate: {
+        opacity: [1, 0, 1, 0, 1],
+        transition: {
+          duration: 1.5,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: TerminalProps) {
+  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="M12 19h8"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m4 17 6-6-6-6"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Terminal(props: TerminalProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Terminal as TerminalAnimated };

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

@@ -0,0 +1,136 @@
+/* From Animate UI's registry (icons-lucide-trash-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 Trash2Props = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: -1,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {
+      initial: {
+        y: 0,
+        d: 'M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6',
+      },
+      animate: {
+        y: 1,
+        d: 'M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8',
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    line1: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: 1,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    line2: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: 1,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: Trash2Props) {
+  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="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M3 6h18"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.path
+        d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={10}
+        x2={10}
+        y1={11}
+        y2={17}
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={14}
+        x2={14}
+        y1={11}
+        y2={17}
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Trash2(props: Trash2Props) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Trash2 as Trash2Animated };

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

@@ -0,0 +1,94 @@
+/* From Animate UI's registry (icons-lucide-trash), 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 TrashProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: -1,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {
+      initial: {
+        y: 0,
+        d: 'M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6',
+      },
+      animate: {
+        y: 1,
+        d: 'M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8',
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: TrashProps) {
+  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="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M3 6h18"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.path
+        d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Trash(props: TrashProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Trash as TrashAnimated };

package/registry/ui/components/nm-icon/animated/trending-up.tsx

@@ -0,0 +1,75 @@
+/* From Animate UI's registry (icons-lucide-trending-up), 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 TrendingUpProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    line: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    tip: {
+      initial: { opacity: 1, scale: 1, transformOrigin: '100% 0%' },
+      animate: {
+        opacity: [0, 0, 1],
+        scale: [0.3, 0.3, 1],
+        transformOrigin: '100% 0%',
+        transition: { duration: 0.6, ease: 'easeOut', times: [0, 0.6, 1] },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: TrendingUpProps) {
+  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="M2 17l6.5-6.5 5 5L22 7"
+        variants={variants.line}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 7h6v6"
+        variants={variants.tip}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function TrendingUp(props: TrendingUpProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, TrendingUp as TrendingUpAnimated };

package/registry/ui/components/nm-icon/animated/triangle-alert.tsx

@@ -0,0 +1,75 @@
+/* From Animate UI's registry (icons-lucide-triangle-alert), 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 TriangleAlertProps = 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>,
+  blink: {
+    mark: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [1, 0.15, 1, 0.15, 1],
+        transition: {
+          duration: 1.1,
+          times: [0, 0.2, 0.45, 0.7, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: TriangleAlertProps) {
+  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="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+      <motion.g variants={variants.mark} initial="initial" animate={controls}>
+        <path d="M12 9v4" />
+        <path d="M12 17h.01" />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function TriangleAlert(props: TriangleAlertProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, TriangleAlert as TriangleAlertAnimated };

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

@@ -0,0 +1,62 @@
+/* From Animate UI's registry (icons-lucide-trophy), 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 TrophyProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { rotate: 0, y: 0 },
+      animate: {
+        rotate: [0, -5, 5, -2, 0],
+        y: [0, -0.8, 0, -0.3, 0],
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: TrophyProps) {
+  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="M10 14.66V17a1 1 0 0 1-1 1 2 2 0 0 0-2 2v2" />
+        <path d="M14 14.66V17a1 1 0 0 0 1 1 2 2 0 0 1 2 2v2" />
+        <path d="M17.916 10H19.5A2.5 2.5 0 0 0 22 7.5V5a1 1 0 0 0-1-1h-3" />
+        <path d="M4 22h16" />
+        <path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z" />
+        <path d="M6.084 10H4.5A2.5 2.5 0 0 1 2 7.5V5a1 1 0 0 1 1-1h3" />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Trophy(props: TrophyProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Trophy as TrophyAnimated };

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

@@ -0,0 +1,106 @@
+/* From Animate UI's registry (icons-lucide-type), 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 TypeProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    letter: {
+      initial: { scaleX: 1, scaleY: 1, transformOrigin: '50% 100%' },
+      animate: {
+        scaleX: [1, 1.08, 0.95, 1.02, 1],
+        scaleY: [1, 0.8, 1.06, 0.98, 1],
+        transformOrigin: '50% 100%',
+        transition: {
+          duration: 0.55,
+          times: [0, 0.3, 0.6, 0.8, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+    mark: {},
+    cursor: {},
+  } satisfies Record<string, Variants>,
+  cursor: {
+    letter: {},
+    mark: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [1, 0, 0, 0, 1],
+        transition: {
+          duration: 1.4,
+          times: [0, 0.06, 0.6, 0.72, 1],
+          ease: 'easeOut',
+        },
+      },
+    },
+    cursor: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [1, 1, 0, 1, 0, 1, 1],
+        transition: {
+          duration: 1.4,
+          times: [0, 0.1, 0.25, 0.4, 0.55, 0.7, 1],
+          ease: 'linear',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: TypeProps) {
+  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.letter} initial="initial" animate={controls}>
+        <motion.path
+          d="M12 4v16"
+          variants={variants.mark}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"
+          variants={variants.mark}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M9 20h6"
+          variants={variants.cursor}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Type(props: TypeProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Type as TypeAnimated };

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

@@ -0,0 +1,94 @@
+/* From Animate UI's registry (icons-lucide-upload), 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 UploadProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        y: -2,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    group: {
+      initial: {
+        y: 0,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+      animate: {
+        y: [0, -2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: UploadProps) {
+  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 3v12"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="m17 8-5-5-5 5"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.path
+        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Upload(props: UploadProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Upload as UploadAnimated };