@nordmanai/nif 0.2.2 → 0.2.3

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

@@ -0,0 +1,93 @@
+/* From Animate UI's registry (icons-lucide-cloud-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 CloudUploadProps = 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,
+      },
+      animate: {
+        y: [0, -2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudUploadProps) {
+  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 13v8"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="m8 17 4-4 4 4"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.path
+        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CloudUpload(props: CloudUploadProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, CloudUpload as CloudUploadAnimated };

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

@@ -0,0 +1,153 @@
+/* From Animate UI's registry (icons-lucide-copy), 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 CopyProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect: {
+      initial: { x: 0, y: 0, transition: { duration: 0.3, ease: 'easeInOut' } },
+      animate: { x: 1, y: 1, transition: { duration: 0.3, ease: 'easeInOut' } },
+    },
+    path: {
+      initial: { x: 0, y: 0, transition: { duration: 0.3, ease: 'easeInOut' } },
+      animate: {
+        x: -1,
+        y: -1,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    rect: {
+      initial: { x: 0, y: 0 },
+      animate: {
+        x: [0, 1, 0],
+        y: [0, 1, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path: {
+      initial: { x: 0, y: 0 },
+      animate: {
+        x: [0, -1, 0],
+        y: [0, -1, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  merge: {
+    rect: {
+      initial: {
+        y: 0,
+        x: 0,
+      },
+      animate: {
+        y: -3,
+        x: -3,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        y: 0,
+        x: 0,
+      },
+      animate: {
+        y: 3,
+        x: 3,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'merge-loop': {
+    rect: {
+      initial: {
+        y: 0,
+        x: 0,
+      },
+      animate: {
+        y: [0, -3, 0],
+        x: [0, -3, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        y: 0,
+        x: 0,
+      },
+      animate: {
+        y: [0, 3, 0],
+        x: [0, 3, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CopyProps) {
+  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.rect
+        width={14}
+        height={14}
+        x={8}
+        y={8}
+        rx={2}
+        ry={2}
+        variants={variants.rect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Copy(props: CopyProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Copy as CopyAnimated };

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

@@ -0,0 +1,93 @@
+/* From Animate UI's registry (icons-lucide-download), 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 DownloadProps = 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,
+      },
+      animate: {
+        y: [0, 2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: DownloadProps) {
+  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 15V3"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="m7 10 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 Download(props: DownloadProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Download as DownloadAnimated };

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

@@ -0,0 +1,189 @@
+/* From Animate UI's registry (icons-lucide-ellipsis), 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 EllipsisProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+        transition: { type: 'spring', stiffness: 60, damping: 10 },
+      },
+      animate: {
+        rotate: 180,
+        transition: { type: 'spring', stiffness: 60, damping: 10 },
+      },
+    },
+    circle1: {},
+    circle2: {},
+    circle3: {},
+  } satisfies Record<string, Variants>,
+  vertical: {
+    group: {
+      initial: {
+        rotate: 0,
+        transition: { type: 'spring', stiffness: 100, damping: 12 },
+      },
+      animate: {
+        rotate: 90,
+        transition: { type: 'spring', stiffness: 100, damping: 12 },
+      },
+    },
+    circle1: {},
+    circle2: {},
+    circle3: {},
+  } satisfies Record<string, Variants>,
+  jump: {
+    group: {},
+    circle1: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, -2, 2],
+        transition: {
+          duration: 1.2,
+          delay: 0.4,
+          repeat: Infinity,
+          repeatType: 'mirror',
+          ease: 'easeInOut',
+        },
+      },
+    },
+    circle2: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, -2, 2],
+        transition: {
+          duration: 1.2,
+          delay: 0.2,
+          repeat: Infinity,
+          repeatType: 'mirror',
+          ease: 'easeInOut',
+        },
+      },
+    },
+    circle3: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, -2, 2],
+        transition: {
+          duration: 1.2,
+          repeat: Infinity,
+          repeatType: 'mirror',
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  pulse: {
+    group: {},
+    circle1: {
+      initial: {
+        scale: 1,
+      },
+      animate: {
+        scale: [1, 1.5, 1],
+        transition: {
+          duration: 1,
+          delay: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    circle2: {
+      initial: {
+        scale: 1,
+      },
+      animate: {
+        scale: [1, 1.5, 1],
+        transition: {
+          duration: 1,
+          delay: 0.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    circle3: {
+      initial: {
+        scale: 1,
+      },
+      animate: {
+        scale: [1, 1.5, 1],
+        transition: {
+          duration: 1,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: EllipsisProps) {
+  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.circle
+        cx={19}
+        cy={12}
+        r={1}
+        variants={variants.circle1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx={12}
+        cy={12}
+        r={1}
+        variants={variants.circle2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx={5}
+        cy={12}
+        r={1}
+        variants={variants.circle3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Ellipsis(props: EllipsisProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Ellipsis as EllipsisAnimated };

package/registry/ui/components/nm-icon/animated/external-link.tsx

@@ -0,0 +1,97 @@
+/* From Animate UI's registry (icons-lucide-external-link), 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 ExternalLinkProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        x: 0,
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: 2,
+        y: -2,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    group: {
+      initial: {
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        x: [0, 2, 0],
+        y: [0, -2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ExternalLinkProps) {
+  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="M15 3h6v6"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M10 14 21 3"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.path
+        d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ExternalLink(props: ExternalLinkProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ExternalLink as ExternalLinkAnimated };

package/registry/ui/components/nm-icon/animated/eye-off.tsx

@@ -0,0 +1,63 @@
+/* From Animate UI's registry (icons-lucide-eye-off), 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 EyeOffProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    slash: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.4, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: EyeOffProps) {
+  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="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
+      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+      <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+      <motion.path
+        d="m2 2 20 20"
+        variants={variants.slash}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function EyeOff(props: EyeOffProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, EyeOff as EyeOffAnimated };