@nordmanai/nif 0.2.1 → 0.2.3

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

@@ -0,0 +1,82 @@
+/* From Animate UI's registry (icons-lucide-eye), 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 EyeProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { scaleY: 1 },
+      animate: {
+        scaleY: [1, 0.1, 1],
+        transition: { duration: 0.4, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+  look: {
+    group: {},
+    path1: {},
+    path2: {
+      initial: { x: 0 },
+      animate: {
+        x: [0, -2.5, 2.5, 0],
+        transition: { duration: 1, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: EyeProps) {
+  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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.circle
+          cx={12}
+          cy={12}
+          r={3}
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Eye(props: EyeProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Eye as EyeAnimated };

package/registry/ui/components/nm-icon/animated/fast-forward.tsx

@@ -0,0 +1,72 @@
+/* From Animate UI's registry (icons-lucide-fast-forward), 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 FastForwardProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    back: {
+      initial: { x: 0 },
+      animate: {
+        x: [0, 1.5, 0],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    front: {
+      initial: { x: 0 },
+      animate: {
+        x: [0, 0.6, 0],
+        transition: { duration: 0.5, ease: 'easeInOut', delay: 0.05 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: FastForwardProps) {
+  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 6a2 2 0 0 1 3.414-1.414l6 6a2 2 0 0 1 0 2.828l-6 6A2 2 0 0 1 2 18z"
+        variants={variants.back}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12 6a2 2 0 0 1 3.414-1.414l6 6a2 2 0 0 1 0 2.828l-6 6A2 2 0 0 1 12 18z"
+        variants={variants.front}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function FastForward(props: FastForwardProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, FastForward as FastForwardAnimated };

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

@@ -0,0 +1,105 @@
+/* From Animate UI's registry (icons-lucide-file-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 FileClockProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    face1: {},
+    face2: {},
+    face3: {},
+    minute: {
+      initial: {
+        rotate: 0,
+        transformOrigin: '50% 100%',
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+      animate: {
+        rotate: 360,
+        transformOrigin: '50% 100%',
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    hour: {
+      initial: {
+        rotate: 0,
+        transformOrigin: '0% 0%',
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+      animate: {
+        rotate: [0, 20, 0],
+        transformOrigin: '0% 0%',
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: FileClockProps) {
+  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 22h2a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v2.85"
+        variants={variants.face1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M14 2v5a1 1 0 0 0 1 1h5"
+        variants={variants.face2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx={8}
+        cy={16}
+        r={6}
+        variants={variants.face3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 14V16.2"
+        variants={variants.minute}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 16.2L9.6 17.2"
+        variants={variants.hour}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function FileClock(props: FileClockProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, FileClock as FileClockAnimated };

package/registry/ui/components/nm-icon/animated/file-text.tsx

@@ -0,0 +1,102 @@
+/* From Animate UI's registry (icons-lucide-file-text), 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 FileTextProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    sheet: {},
+    fold: {},
+    line1: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.35, delay: 0.05, ease: 'easeOut' },
+      },
+    },
+    line2: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.35, delay: 0.25, ease: 'easeOut' },
+      },
+    },
+    line3: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.35, delay: 0.45, ease: 'easeOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: FileTextProps) {
+  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="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        variants={variants.sheet}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M14 2v5a1 1 0 0 0 1 1h5"
+        variants={variants.fold}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 9h2"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 13h8"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 17h8"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function FileText(props: FileTextProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, FileText as FileTextAnimated };

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

@@ -0,0 +1,124 @@
+/* From Animate UI's registry (icons-lucide-file), 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 FileProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    sheet: {
+      initial: {
+        d: 'M6 22a2 2 0 0 1 -2 -2V4a2 2 0 0 1 2 -2h8a2.4 2.4 0 0 1 1.704 .706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1 -2 2z',
+      },
+      animate: {
+        d: [
+          'M6 22a2 2 0 0 1 -2 -2V4a2 2 0 0 1 2 -2h8a2.4 2.4 0 0 1 1.704 .706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1 -2 2z',
+          'M6 22a2 2 0 0 1 -2 -2V4a2 2 0 0 1 2 -2h8a240 240 0 0 1 2.4 0l1.6 0A2.4 2.4 0 0 1 20 4v16a2 2 0 0 1 -2 2z',
+          'M6 22a2 2 0 0 1 -2 -2V4a2 2 0 0 1 2 -2h8a240 240 0 0 1 2.4 0l1.6 0A2.4 2.4 0 0 1 20 4v16a2 2 0 0 1 -2 2z',
+          'M6 22a2 2 0 0 1 -2 -2V4a2 2 0 0 1 2 -2h8a2.4 2.4 0 0 1 1.704 .706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1 -2 2z',
+        ],
+        transition: {
+          duration: 1.8,
+          times: [0, 0.25, 0.75, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+    fold: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [1, 0, 0, 1],
+        opacity: [1, 0, 0, 1],
+        transition: {
+          duration: 1.8,
+          times: [0, 0.25, 0.75, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+    line1: {
+      initial: { pathLength: 0, opacity: 0 },
+      animate: {
+        pathLength: [0, 0, 1, 1, 0],
+        opacity: [0, 0, 1, 1, 0],
+        transition: {
+          duration: 1.8,
+          times: [0, 0.3, 0.45, 0.7, 0.78],
+          ease: 'easeOut',
+        },
+      },
+    },
+    line2: {
+      initial: { pathLength: 0, opacity: 0 },
+      animate: {
+        pathLength: [0, 0, 1, 1, 0],
+        opacity: [0, 0, 1, 1, 0],
+        transition: {
+          duration: 1.8,
+          times: [0, 0.45, 0.6, 0.7, 0.78],
+          ease: 'easeOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: FileProps) {
+  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="M6 22a2 2 0 0 1 -2 -2V4a2 2 0 0 1 2 -2h8a2.4 2.4 0 0 1 1.704 .706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1 -2 2z"
+        variants={variants.sheet}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M14 2v5a1 1 0 0 0 1 1h5"
+        variants={variants.fold}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 11h8"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 15h8"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function File(props: FileProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, File as FileAnimated };

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

@@ -0,0 +1,132 @@
+/* From Animate UI's registry (icons-lucide-folder), 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 FolderProps = IconProps<keyof typeof animations>;
+
+const CLOSED_FRONT =
+  'M20 20 a2 2 0 0 0 2 -2 V8 a2 2 0 0 0 -2 -2 h-7.9 a2 2 0 0 1 -1.69 -0.9 L9.6 3.9 A2 2 0 0 0 7.93 3 H4 a2 2 0 0 0 -2 2 v13 a2 2 0 0 0 2 2 Z';
+const OPEN_FRONT =
+  'M20 20 a2 2 0 0 0 2 -2 V11 a2 2 0 0 0 -2 -2 h-7.9 a20 20 0 0 1 -1.69 0 L9.6 9 A20 20 0 0 0 7.93 9 H4 a2 2 0 0 0 -2 2 v7 a2 2 0 0 0 2 2 Z';
+
+const animations = {
+  default: {
+    group: {},
+    back: {},
+    path: {
+      initial: { d: CLOSED_FRONT },
+      animate: {
+        d: [CLOSED_FRONT, OPEN_FRONT, CLOSED_FRONT],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  wiggle: {
+    group: {
+      initial: {
+        scale: 1,
+        rotate: 0,
+        y: 0,
+      },
+      animate: {
+        scale: [1, 0.92, 1.05, 0.98, 1],
+        rotate: [0, -3, 3, -1.5, 0],
+        y: [0, -1, 0.5, 0],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    back: {},
+    path: {},
+  } satisfies Record<string, Variants>,
+  bounce: {
+    group: {
+      initial: {
+        scale: 1,
+        y: 0,
+      },
+      animate: {
+        scale: [1, 0.9, 1.06, 0.97, 1],
+        y: [0, -1.5, 0.5, 0],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    back: {},
+    path: {},
+  } satisfies Record<string, Variants>,
+  fill: {
+    group: {
+      initial: {
+        scale: 1,
+        rotate: 0,
+        y: 0,
+      },
+      animate: {
+        scale: [1, 0.92, 1.05, 0.98, 1],
+        rotate: [0, -3, 3, -1.5, 0],
+        y: [0, -1, 0.5, 0],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    back: {},
+    path: {
+      initial: {
+        fill: 'currentColor',
+        fillOpacity: 0,
+      },
+      animate: {
+        fillOpacity: 1,
+        transition: { delay: 0.15 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: FolderProps) {
+  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={CLOSED_FRONT}
+          variants={variants.back}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d={CLOSED_FRONT}
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Folder(props: FolderProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Folder as FolderAnimated };

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

@@ -0,0 +1,84 @@
+/* From Animate UI's registry (icons-lucide-gauge), 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 GaugeProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        transformOrigin: 'bottom left',
+        rotate: 70,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    path2: {},
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path1: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+      animate: {
+        transformOrigin: 'bottom left',
+        rotate: [0, 70, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: GaugeProps) {
+  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 14 4-4"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3.34 19a10 10 0 1 1 17.32 0"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Gauge(props: GaugeProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Gauge as GaugeAnimated };