@nordmanai/nif 0.2.1 → 0.2.3

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

@@ -0,0 +1,98 @@
+/* From Animate UI's registry (icons-lucide-moon), 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 MoonProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: { rotate: 0, transition: { duration: 0.5, ease: 'easeInOut' } },
+      animate: {
+        rotate: [0, -15, 8, -3, 0],
+        transition: { duration: 0.9, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  spin: {
+    path: {
+      initial: {
+        rotate: 0,
+        transition: {
+          duration: 0.5,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        rotate: [0, -30, 400, 360],
+        transition: {
+          duration: 1.2,
+          times: [0, 0.25, 0.75, 1],
+          ease: ['easeInOut', 'easeInOut', 'easeInOut'],
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  balancing: {
+    path: {
+      initial: {
+        rotate: 0,
+        transition: {
+          duration: 0.5,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        rotate: [0, -30, 25, -15, 10, -5, 0],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MoonProps) {
+  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="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Moon(props: MoonProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Moon as MoonAnimated };

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

@@ -0,0 +1,62 @@
+/* From Animate UI's registry (icons-lucide-music), 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 MusicProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, -1.5, 0, -0.6, 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 }: MusicProps) {
+  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="M9 18V5l12-2v13" />
+        <circle cx={6} cy={18} r={3} />
+        <circle cx={18} cy={16} r={3} />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Music(props: MusicProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Music as MusicAnimated };

package/registry/ui/components/nm-icon/animated/notebook-pen.tsx

@@ -0,0 +1,114 @@
+/* From Animate UI's registry (icons-lucide-notebook-pen), 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 NotebookPenProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    book: {},
+    rings: {},
+    pen: {
+      initial: { x: 0, y: 0 },
+      animate: {
+        x: [0, -2.2, -2.2, 0],
+        y: [0, 0.4, 0.4, 0],
+        transition: {
+          duration: 0.6,
+          times: [0, 0.35, 0.6, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+    line: {
+      initial: { pathLength: 0, opacity: 0 },
+      animate: {
+        pathLength: [0, 1, 1, 1],
+        opacity: [0, 1, 1, 0],
+        transition: {
+          duration: 0.6,
+          times: [0, 0.35, 0.7, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: NotebookPenProps) {
+  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="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"
+        variants={variants.book}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M2 6h4"
+        variants={variants.rings}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M2 10h4"
+        variants={variants.rings}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M2 14h4"
+        variants={variants.rings}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M2 18h4"
+        variants={variants.rings}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M9 16h4"
+        variants={variants.line}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"
+        variants={variants.pen}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function NotebookPen(props: NotebookPenProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, NotebookPen as NotebookPenAnimated };

package/registry/ui/components/nm-icon/animated/panel-left.tsx

@@ -0,0 +1,77 @@
+/* From Animate UI's registry (icons-lucide-panel-left), 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 PanelLeftProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect: {},
+    line: {
+      initial: { x1: 9, y1: 3, x2: 9, y2: 21 },
+      animate: {
+        x1: 7,
+        y1: 3,
+        x2: 7,
+        y2: 21,
+        transition: { type: 'spring', damping: 18, stiffness: 200 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PanelLeftProps) {
+  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={18}
+        height={18}
+        x={3}
+        y={3}
+        rx={2}
+        ry={2}
+        variants={variants.rect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={9}
+        y1={3}
+        x2={9}
+        y2={21}
+        variants={variants.line}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function PanelLeft(props: PanelLeftProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, PanelLeft as PanelLeftAnimated };

package/registry/ui/components/nm-icon/animated/panel-right.tsx

@@ -0,0 +1,77 @@
+/* From Animate UI's registry (icons-lucide-panel-right), 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 PanelRightProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect: {},
+    line: {
+      initial: { x1: 15, y1: 3, x2: 15, y2: 21 },
+      animate: {
+        x1: 17,
+        y1: 3,
+        x2: 17,
+        y2: 21,
+        transition: { type: 'spring', damping: 18, stiffness: 200 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PanelRightProps) {
+  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={18}
+        height={18}
+        x={3}
+        y={3}
+        rx={2}
+        ry={2}
+        variants={variants.rect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={15}
+        y1={3}
+        x2={15}
+        y2={21}
+        variants={variants.line}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function PanelRight(props: PanelRightProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, PanelRight as PanelRightAnimated };

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

@@ -0,0 +1,83 @@
+/* From Animate UI's registry (icons-lucide-paperclip), 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 PaperclipProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: { rotate: 0 },
+      animate: {
+        rotate: [0, -12, 8, -4, 0],
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  draw: {
+    path: {
+      initial: { pathLength: 1 },
+      animate: {
+        pathLength: [0.02, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'draw-loop': {
+    path: {
+      initial: { pathLength: 1 },
+      animate: {
+        pathLength: [1, 0.02, 1],
+        transition: {
+          duration: 2.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PaperclipProps) {
+  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 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Paperclip(props: PaperclipProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Paperclip as PaperclipAnimated };

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

@@ -0,0 +1,116 @@
+/* From Animate UI's registry (icons-lucide-pause), 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 PauseProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect1: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: 1.5,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect2: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: -1.5,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    rect1: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: [0, 1.5, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect2: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: [0, -1.5, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PauseProps) {
+  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
+        x={14}
+        y={4}
+        width={4}
+        height={16}
+        rx={1}
+        variants={variants.rect1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.rect
+        x={6}
+        y={4}
+        width={4}
+        height={16}
+        rx={1}
+        variants={variants.rect2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Pause(props: PauseProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Pause as PauseAnimated };

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

@@ -0,0 +1,70 @@
+/* From Animate UI's registry (icons-lucide-pencil), 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 PencilProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    pencil: {
+      initial: { x: 0, y: 0 },
+      animate: {
+        x: [0, -1, 0.5, -1, 0.5, 0],
+        y: [0, 1, -0.5, 1, -0.5, 0],
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PencilProps) {
+  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.pencil} initial="initial" animate={controls}>
+        <motion.path
+          d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="m15 5 4 4"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Pencil(props: PencilProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Pencil as PencilAnimated };