@nordmanai/nif 0.2.1 → 0.2.3

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

@@ -0,0 +1,106 @@
+/* From Animate UI's registry (icons-lucide-message-square-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 MessageSquarePlusProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        transformOrigin: 'bottom left',
+        rotate: [0, 8, -8, 2, 0],
+        transition: {
+          ease: 'easeInOut',
+          duration: 0.8,
+          times: [0, 0.4, 0.6, 0.8, 1],
+        },
+      },
+    },
+    path1: {},
+    path2: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        rotate: [0, 45, 0],
+        transition: {
+          ease: 'easeInOut',
+          duration: 0.6,
+        },
+      },
+    },
+    path3: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        rotate: [0, 45, 0],
+        transition: {
+          ease: 'easeInOut',
+          duration: 0.6,
+          delay: 0.05,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MessageSquarePlusProps) {
+  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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M12 7v6"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M9 10h6"
+          variants={variants.path3}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function MessageSquarePlus(props: MessageSquarePlusProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, MessageSquarePlus as MessageSquarePlusAnimated };

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

@@ -0,0 +1,153 @@
+/* From Animate UI's registry (icons-lucide-message-square-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 MessageSquareTextProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        transformOrigin: 'bottom left',
+        rotate: [0, 8, -8, 2, 0],
+        transition: {
+          ease: 'easeInOut',
+          duration: 0.8,
+          times: [0, 0.4, 0.6, 0.8, 1],
+        },
+      },
+    },
+    path1: {},
+    path2: {
+      initial: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+      },
+      animate: {
+        opacity: [1, 0, 1],
+        pathLength: [1, 0, 1],
+        pathOffset: [0, 1, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          opacity: { duration: 0.01 },
+        },
+      },
+    },
+    path3: {
+      initial: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+      },
+      animate: {
+        opacity: [1, 0, 1],
+        pathLength: [1, 0, 1],
+        pathOffset: [0, 1, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          opacity: { duration: 0.01 },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  write: {
+    group: {},
+    path1: {},
+    path2: {
+      initial: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+      },
+      animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+          opacity: { duration: 0.01 },
+        },
+      },
+    },
+    path3: {
+      initial: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+      },
+      animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          opacity: { duration: 0.01 },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MessageSquareTextProps) {
+  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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M13 8H7"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M17 12H7"
+          variants={variants.path3}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function MessageSquareText(props: MessageSquareTextProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, MessageSquareText as MessageSquareTextAnimated };

package/registry/ui/components/nm-icon/animated/message-square.tsx

@@ -0,0 +1,66 @@
+/* From Animate UI's registry (icons-lucide-message-square), 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 MessageSquareProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        transformOrigin: 'bottom left',
+        rotate: [0, 8, -8, 2, 0],
+        transition: {
+          ease: 'easeInOut',
+          duration: 0.8,
+          times: [0, 0.4, 0.6, 0.8, 1],
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MessageSquareProps) {
+  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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function MessageSquare(props: MessageSquareProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, MessageSquare as MessageSquareAnimated };

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

@@ -0,0 +1,65 @@
+/* From Animate UI's registry (icons-lucide-mic-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 MicOffProps = 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 }: MicOffProps) {
+  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="M12 19v3" />
+      <path d="M15 9.34V5a3 3 0 0 0-5.68-1.33" />
+      <path d="M16.95 16.95A7 7 0 0 1 5 12v-2" />
+      <path d="M18.89 13.23A7 7 0 0 0 19 12v-2" />
+      <path d="M9 9v3a3 3 0 0 0 5.12 2.12" />
+      <motion.path
+        d="m2 2 20 20"
+        variants={variants.slash}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function MicOff(props: MicOffProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, MicOff as MicOffAnimated };

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

@@ -0,0 +1,77 @@
+/* From Animate UI's registry (icons-lucide-mic), 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 MicProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    capsule: {
+      initial: { x: 0 },
+      animate: {
+        x: [0, -0.4, 0.4, -0.4, 0.4, -0.2, 0.2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  wiggle: {
+    group: {
+      initial: { rotate: 0, transformOrigin: '50% 100%' },
+      animate: {
+        rotate: [0, -10, 10, -5, 0],
+        transformOrigin: '50% 100%',
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MicProps) {
+  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.rect
+          x={9}
+          y={2}
+          width={6}
+          height={13}
+          rx={3}
+          variants={variants.capsule}
+          initial="initial"
+          animate={controls}
+        />
+        <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+        <path d="M12 19v3" />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Mic(props: MicProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Mic as MicAnimated };

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

@@ -0,0 +1,164 @@
+/* From Animate UI's registry (icons-lucide-minimize), 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 MinimizeProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: 2,
+        y: 2,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path2: {
+      initial: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        y: 2,
+        x: -2,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path3: {
+      initial: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        y: -2,
+        x: 2,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path4: {
+      initial: {
+        y: 0,
+        x: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        y: -2,
+        x: -2,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        x: [0, 2, 0],
+        y: [0, 2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path2: {
+      initial: {
+        y: 0,
+        x: 0,
+      },
+      animate: {
+        y: [0, 2, 0],
+        x: [0, -2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path3: {
+      initial: {
+        y: 0,
+        x: 0,
+      },
+      animate: {
+        y: [0, -2, 0],
+        x: [0, 2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path4: {
+      initial: {
+        y: 0,
+        x: 0,
+      },
+      animate: {
+        y: [0, -2, 0],
+        x: [0, -2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MinimizeProps) {
+  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="M8 3v3a2 2 0 0 1-2 2H3"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M21 8h-3a2 2 0 0 1-2-2V3"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 16h3a2 2 0 0 1 2 2v3"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 21v-3a2 2 0 0 1 2-2h3"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Minimize(props: MinimizeProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Minimize as MinimizeAnimated };

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

@@ -0,0 +1,84 @@
+/* From Animate UI's registry (icons-lucide-minus), 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 MinusProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: { rotate: 0, transition: { duration: 0.4, ease: 'easeInOut' } },
+      animate: {
+        rotate: 180,
+        transition: { duration: 0.4, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  shrink: {
+    path1: {},
+    left: {
+      initial: { pathLength: 1 },
+      animate: {
+        pathLength: [1, 0, 1],
+        transition: { duration: 0.9, times: [0, 0.4, 1], ease: 'easeInOut' },
+      },
+    },
+    right: {
+      initial: { pathLength: 1 },
+      animate: {
+        pathLength: [1, 0, 1],
+        transition: { duration: 0.9, times: [0, 0.4, 1], ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MinusProps) {
+  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.path1} initial="initial" animate={controls}>
+        <motion.path
+          d="M12 12H5"
+          variants={variants.left}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M12 12h7"
+          variants={variants.right}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Minus(props: MinusProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Minus as MinusAnimated };