@nordmanai/nif 0.2.2 → 0.2.4

package/registry/ui/components/nm-icon/animated/log-out.tsx

@@ -0,0 +1,93 @@
+/* From Animate UI's registry (icons-lucide-log-out), 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 LogOutProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        x: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: 2,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    group: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: [0, 2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LogOutProps) {
+  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="m16 17 5-5-5-5"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M21 12H9"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.path
+        d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function LogOut(props: LogOutProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, LogOut as LogOutAnimated };

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

@@ -0,0 +1,131 @@
+/* From Animate UI's registry (icons-lucide-mail), 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 MailProps = IconProps<keyof typeof animations>;
+
+const CLOSED_BODY =
+  'M20 4c1.105 0 2 0.895 2 2v12a2 2 0 0 1 -2 2H4a2 2 0 0 1 -2 -2V6a2 2 0 0 1 2 -2l8 0a0 0 0 0 1 0 0l8 0Z';
+const OPEN_BODY =
+  'M21.2 8.4c0.5 0.38 0.8 0.97 0.8 1.6v10a2 2 0 0 1 -2 2H4a2 2 0 0 1 -2 -2V10a2 2 0 0 1 0.8 -1.6l8 -6a2 2 0 0 1 2.4 0l8 6Z';
+const CLOSED_FLAP = 'm22 7 -8.991 5.727a2 2 0 0 1 -2.009 0L2 7';
+const OPEN_FLAP = 'm22 10 -8.97 5.7a1.94 1.94 0 0 1 -2.06 0L2 10';
+
+const animations = {
+  default: {
+    group: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, -1.5, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path1: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path2: {},
+  } satisfies Record<string, Variants>,
+  open: {
+    group: {},
+    path1: {
+      initial: {
+        d: CLOSED_FLAP,
+        transition: { duration: 0.35, ease: 'easeInOut' },
+      },
+      animate: {
+        d: OPEN_FLAP,
+        transition: { duration: 0.45, ease: 'easeInOut' },
+      },
+    },
+    path2: {
+      initial: {
+        d: CLOSED_BODY,
+        transition: { duration: 0.35, ease: 'easeInOut' },
+      },
+      animate: {
+        d: OPEN_BODY,
+        transition: { duration: 0.45, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  peek: {
+    group: {},
+    path1: {
+      initial: { d: CLOSED_FLAP },
+      animate: {
+        d: [CLOSED_FLAP, OPEN_FLAP, OPEN_FLAP, CLOSED_FLAP],
+        transition: {
+          duration: 1.4,
+          times: [0, 0.3, 0.7, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: { d: CLOSED_BODY },
+      animate: {
+        d: [CLOSED_BODY, OPEN_BODY, OPEN_BODY, CLOSED_BODY],
+        transition: {
+          duration: 1.4,
+          times: [0, 0.3, 0.7, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MailProps) {
+  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_FLAP}
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d={CLOSED_BODY}
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Mail(props: MailProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Mail as MailAnimated };

package/registry/ui/components/nm-icon/animated/map-pin.tsx

@@ -0,0 +1,111 @@
+/* From Animate UI's registry (icons-lucide-map-pin), with its import pointed at NIF's motion adapter. */
+'use client';
+
+import * as React from 'react';
+import { motion, Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@animate-ui/react/icons';
+
+type MapPinProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        scale: 1,
+        rotate: 0,
+        x: 0,
+        y: 0,
+        transformOrigin: 'bottom center',
+      },
+      animate: {
+        scale: [1, 0.75, 1, 1],
+        rotate: [0, 30, -15, 0],
+        x: [0, 0, 0, 0],
+        y: [0, -6, 0, 0],
+        transformOrigin: 'bottom center',
+        transition: { ease: 'easeInOut', duration: 1 },
+      },
+    },
+    circle: {},
+    path: {},
+  } satisfies Record<string, Variants>,
+  wiggle: {
+    group: {
+      initial: {
+        rotate: 0,
+        transformOrigin: 'bottom center',
+      },
+      animate: {
+        rotate: [0, 12, -10, 0],
+        transformOrigin: 'bottom center',
+        transition: { ease: 'easeInOut', duration: 1 },
+      },
+    },
+    circle: {},
+    path: {},
+  } satisfies Record<string, Variants>,
+  rotate: {
+    group: {
+      initial: {
+        transform: 'rotate3d(0, 1, 0, 0deg)',
+        perspective: 600,
+      },
+      animate: {
+        transform: 'rotate3d(0, 1, 0, 360deg)',
+        perspective: 600,
+        transition: { ease: 'easeInOut', duration: 0.7 },
+      },
+    },
+    circle: {},
+    path: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MapPinProps) {
+  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.circle
+          cx={12}
+          cy={10}
+          r={3}
+          variants={variants.circle}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function MapPin(props: MapPinProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, MapPin as MapPinAnimated };

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

@@ -0,0 +1,121 @@
+/* From Animate UI's registry (icons-lucide-menu), 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 MenuProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    line1: {
+      initial: {
+        rotate: 0,
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        rotate: -45,
+        x: -2.35,
+        y: 0.35,
+        transformOrigin: 'top right',
+        transition: {
+          type: 'spring',
+          stiffness: 200,
+          damping: 20,
+        },
+      },
+    },
+    line2: {
+      initial: {
+        opacity: 1,
+      },
+      animate: {
+        opacity: 0,
+        transition: {
+          ease: 'easeInOut',
+          duration: 0.2,
+        },
+      },
+    },
+    line3: {
+      initial: {
+        rotate: 0,
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        rotate: 45,
+        x: -2.35,
+        y: -0.35,
+        transformOrigin: 'bottom right',
+        transition: {
+          type: 'spring',
+          stiffness: 200,
+          damping: 20,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MenuProps) {
+  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={4}
+        y1={6}
+        x2={20}
+        y2={6}
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={4}
+        y1={12}
+        x2={20}
+        y2={12}
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={4}
+        y1={18}
+        x2={20}
+        y2={18}
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Menu(props: MenuProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Menu as MenuAnimated };

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

@@ -0,0 +1,140 @@
+/* From Animate UI's registry (icons-lucide-message-circle-dashed), 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 MessageCircleDashedProps = 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: {},
+    path3: {},
+    path4: {},
+    path5: {},
+    path6: {},
+    path7: {},
+    path8: {},
+  } satisfies Record<string, Variants>,
+  draw: {
+    group: {},
+    ...(() => {
+      const paths: Record<string, Variants> = {};
+
+      for (let i = 1; i <= 8; i++) {
+        paths[`path${i}`] = {
+          initial: { opacity: 0, scale: 0 },
+          animate: {
+            opacity: [0, 1],
+            scale: [0, 1],
+            transition: {
+              delay: i * 0.2,
+              duration: 0.4,
+            },
+          },
+        };
+      }
+
+      return paths;
+    })(),
+  },
+} as const;
+
+function IconComponent({ size, ...props }: MessageCircleDashedProps) {
+  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="M13.5 3.1c-.5 0-1-.1-1.5-.1s-1 .1-1.5.1"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M19.3 6.8a10.45 10.45 0 0 0-2.1-2.1"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M20.9 13.5c.1-.5.1-1 .1-1.5s-.1-1-.1-1.5"
+          variants={variants.path3}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M17.2 19.3a10.45 10.45 0 0 0 2.1-2.1"
+          variants={variants.path4}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M10.5 20.9c.5.1 1 .1 1.5.1s1-.1 1.5-.1"
+          variants={variants.path5}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M3.5 17.5 2 22l4.5-1.5"
+          variants={variants.path6}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M3.1 10.5c0 .5-.1 1-.1 1.5s.1 1 .1 1.5"
+          variants={variants.path7}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M6.8 4.7a10.45 10.45 0 0 0-2.1 2.1"
+          variants={variants.path8}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function MessageCircleDashed(props: MessageCircleDashedProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, MessageCircleDashed as MessageCircleDashedAnimated };

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

@@ -0,0 +1,66 @@
+/* From Animate UI's registry (icons-lucide-message-circle), 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 MessageCircleProps = 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 }: MessageCircleProps) {
+  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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function MessageCircle(props: MessageCircleProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, MessageCircle as MessageCircleAnimated };