@nordmanai/nif 0.2.2 → 0.2.3

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

@@ -0,0 +1,149 @@
+/* From Animate UI's registry (icons-lucide-arrow-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 ArrowUpProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: '-25%',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    group: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, '-25%', 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+  pointing: {
+    group: {},
+    path1: {
+      initial: {
+        d: 'M12 19V5',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        d: 'M12 19V10',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    path2: {
+      initial: {
+        d: 'm5 12 7-7 7 7',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        d: 'm5 16 7-7 7 7',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'pointing-loop': {
+    group: {},
+    path1: {
+      initial: {
+        d: 'M12 19V5',
+      },
+      animate: {
+        d: ['M12 19V5', 'M12 19V10', 'M12 19V5'],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    path2: {
+      initial: {
+        d: 'm5 12 7-7 7 7',
+      },
+      animate: {
+        d: ['m5 12 7-7 7 7', 'm5 16 7-7 7 7', 'm5 12 7-7 7 7'],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  out: {
+    group: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, '-150%', '150%', 0],
+        transition: {
+          default: { ease: 'easeInOut', duration: 0.6 },
+          y: {
+            ease: 'easeInOut',
+            duration: 0.6,
+            times: [0, 0.5, 0.5, 1],
+          },
+        },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ArrowUpProps) {
+  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 19V5"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="m5 12 7-7 7 7"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function ArrowUp(props: ArrowUpProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ArrowUp as ArrowUpAnimated };

package/registry/ui/components/nm-icon/animated/audio-lines.tsx

@@ -0,0 +1,190 @@
+/* From Animate UI's registry (icons-lucide-audio-lines), 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 AudioLinesProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    line1: {
+      initial: {
+        y1: 10,
+        y2: 13,
+      },
+      animate: {
+        y1: [10, 5, 8, 6, 10],
+        y2: [13, 18, 15, 17, 13],
+        transition: {
+          duration: 1.5,
+          ease: 'linear',
+          repeat: Infinity,
+        },
+      },
+    },
+    line2: {
+      initial: {
+        y1: 6,
+        y2: 17,
+      },
+      animate: {
+        y1: [6, 2, 10, 6],
+        y2: [17, 22, 13, 17],
+        transition: {
+          duration: 1.5,
+          ease: 'linear',
+          repeat: Infinity,
+        },
+      },
+    },
+    line3: {
+      initial: {
+        y1: 3,
+        y2: 21,
+      },
+      animate: {
+        y1: [3, 6, 3, 8, 3],
+        y2: [21, 17, 21, 15, 21],
+        transition: {
+          duration: 1.5,
+          ease: 'linear',
+          repeat: Infinity,
+        },
+      },
+    },
+    line4: {
+      initial: {
+        y1: 8,
+        y2: 15,
+      },
+      animate: {
+        y1: [8, 4, 7, 2, 8],
+        y2: [15, 19, 16, 22, 15],
+        transition: {
+          duration: 1.5,
+          ease: 'linear',
+          repeat: Infinity,
+        },
+      },
+    },
+    line5: {
+      initial: {
+        y1: 5,
+        y2: 18,
+      },
+      animate: {
+        y1: [5, 10, 4, 8, 5],
+        y2: [18, 13, 19, 15, 18],
+        transition: {
+          duration: 1.5,
+          ease: 'linear',
+          repeat: Infinity,
+        },
+      },
+    },
+    line6: {
+      initial: {
+        y1: 10,
+        y2: 13,
+      },
+      animate: {
+        y1: [10, 8, 5, 10],
+        y2: [13, 15, 18, 13],
+        transition: {
+          duration: 1.5,
+          ease: 'linear',
+          repeat: Infinity,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: AudioLinesProps) {
+  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.line
+        x1={2}
+        y1={10}
+        x2={2}
+        y2={13}
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={6}
+        y1={6}
+        x2={6}
+        y2={17}
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={10}
+        y1={3}
+        x2={10}
+        y2={21}
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={14}
+        y1={8}
+        x2={14}
+        y2={15}
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={18}
+        y1={5}
+        x2={18}
+        y2={18}
+        variants={variants.line5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={22}
+        y1={10}
+        x2={22}
+        y2={13}
+        variants={variants.line6}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function AudioLines(props: AudioLinesProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, AudioLines as AudioLinesAnimated };

package/registry/ui/components/nm-icon/animated/bookmark-plus.tsx

@@ -0,0 +1,65 @@
+/* From Animate UI's registry (icons-lucide-bookmark-plus), 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 BookmarkPlusProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { scaleY: 1, transformOrigin: '50% 0%' },
+      animate: {
+        scaleY: [1, 0.82, 1.03, 1],
+        transformOrigin: '50% 0%',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    plus: {
+      initial: { rotate: 0 },
+      animate: { rotate: 90, transition: { duration: 0.5, ease: 'easeInOut' } },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: BookmarkPlusProps) {
+  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="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" />
+        <motion.g variants={variants.plus} initial="initial" animate={controls}>
+          <path d="M12 7v6" />
+          <path d="M15 10H9" />
+        </motion.g>
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function BookmarkPlus(props: BookmarkPlusProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, BookmarkPlus as BookmarkPlusAnimated };

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

@@ -0,0 +1,77 @@
+/* From Animate UI's registry (icons-lucide-bookmark), 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 BookmarkProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { scaleY: 1, transformOrigin: '50% 0%' },
+      animate: {
+        scaleY: [1, 0.82, 1.03, 1],
+        transformOrigin: '50% 0%',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    path: {},
+  } satisfies Record<string, Variants>,
+  fill: {
+    group: {
+      initial: { scaleY: 1, transformOrigin: '50% 0%' },
+      animate: {
+        scaleY: [1, 0.82, 1.03, 1],
+        transformOrigin: '50% 0%',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    path: {
+      initial: { fill: 'currentColor', fillOpacity: 0 },
+      animate: { fillOpacity: 1, transition: { delay: 0.2 } },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: BookmarkProps) {
+  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="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Bookmark(props: BookmarkProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Bookmark as BookmarkAnimated };

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

@@ -0,0 +1,167 @@
+/* From Animate UI's registry (icons-lucide-bot), 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 BotProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {},
+    rect: {},
+    path2: {},
+    path3: {},
+    path4: {
+      initial: {
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        x: [0, -1.5, 1.5, 0],
+        y: [0, 1.5, 1.5, 0],
+        transition: {
+          ease: 'easeInOut',
+          duration: 1.3,
+        },
+      },
+    },
+    path5: {
+      initial: {
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        x: [0, -1.5, 1.5, 0],
+        y: [0, 1.5, 1.5, 0],
+        transition: {
+          ease: 'easeInOut',
+          duration: 1.3,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  blink: {
+    path1: {},
+    rect: {},
+    path2: {},
+    path3: {},
+    path4: {
+      initial: {
+        scaleY: 1,
+      },
+      animate: {
+        scaleY: [1, 0.5, 1],
+        transition: {
+          ease: 'easeInOut',
+          duration: 0.6,
+        },
+      },
+    },
+    path5: {
+      initial: {
+        scaleY: 1,
+      },
+      animate: {
+        scaleY: [1, 0.5, 1],
+        transition: {
+          ease: 'easeInOut',
+          duration: 0.6,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  wink: {
+    path1: {},
+    rect: {},
+    path2: {},
+    path3: {},
+    path4: {
+      initial: {
+        scaleY: 1,
+      },
+      animate: {
+        scaleY: [1, 0.5, 1],
+        transition: {
+          ease: 'easeInOut',
+          duration: 0.6,
+        },
+      },
+    },
+    path5: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: BotProps) {
+  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 8V4H8"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.rect
+        width={16}
+        height={12}
+        x={4}
+        y={8}
+        rx={2}
+        variants={variants.rect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M2 14h2"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M20 14h2"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M15 13v2"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M9 13v2"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Bot(props: BotProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Bot as BotAnimated };