@nordmanai/nif 0.2.2 → 0.2.4

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

@@ -0,0 +1,87 @@
+/* From Animate UI's registry (icons-lucide-send), 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 SendProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        scale: 1,
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        scale: [1, 0.8, 1, 1, 1],
+        x: [0, '-10%', '100%', '-125%', 0],
+        y: [0, '10%', '-100%', '125%', 0],
+        transition: {
+          default: { ease: 'easeInOut', duration: 1.2 },
+          x: {
+            ease: 'easeInOut',
+            duration: 1.2,
+            times: [0, 0.25, 0.5, 0.5, 1],
+          },
+          y: {
+            ease: 'easeInOut',
+            duration: 1.2,
+            times: [0, 0.25, 0.5, 0.5, 1],
+          },
+        },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SendProps) {
+  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="M14.5,21.7c.1.3.4.4.7.3.1,0,.2-.2.3-.3L22,2.7c0-.3,0-.5-.3-.6-.1,0-.2,0-.3,0L2.3,8.5c-.3,0-.4.4-.3.6,0,.1.2.2.3.3l7.9,3.2c.5.2.9.6,1.1,1.1l3.2,7.9Z"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M21.9,2.1l-10.9,10.9"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Send(props: SendProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Send as SendAnimated };

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

@@ -0,0 +1,92 @@
+/* From Animate UI's registry (icons-lucide-settings), 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 SettingsProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        rotate: [0, 90, 180],
+        transition: {
+          duration: 1.25,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {},
+    circle: {},
+  } satisfies Record<string, Variants>,
+  rotate: {
+    group: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        rotate: 360,
+        transition: {
+          duration: 2,
+          ease: 'linear',
+        },
+      },
+    },
+    path: {},
+    circle: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SettingsProps) {
+  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.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.circle
+          cx={12}
+          cy={12}
+          r={3}
+          variants={variants.circle}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Settings(props: SettingsProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Settings as SettingsAnimated };

package/registry/ui/components/nm-icon/animated/share-2.tsx

@@ -0,0 +1,148 @@
+/* From Animate UI's registry (icons-lucide-share-2), 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 Share2Props = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    lines: {},
+    path1: {},
+    path2: {},
+    node1: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 1.25, 1],
+        transition: { duration: 0.4, ease: 'easeInOut' },
+      },
+    },
+    node2: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 1.25, 1],
+        transition: { duration: 0.4, ease: 'easeInOut', delay: 0.15 },
+      },
+    },
+    node3: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 1.25, 1],
+        transition: { duration: 0.4, ease: 'easeInOut', delay: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  spread: {
+    lines: {},
+    path1: {
+      initial: { pathLength: 1, transition: { duration: 0.15 } },
+      animate: {
+        pathLength: [0, 1],
+        transition: { duration: 0.35, delay: 0.08, ease: 'easeOut' },
+      },
+    },
+    path2: {
+      initial: { pathLength: 1, transition: { duration: 0.15 } },
+      animate: {
+        pathLength: [0, 1],
+        transition: { duration: 0.35, delay: 0.08, ease: 'easeOut' },
+      },
+    },
+    node1: {
+      initial: { x: 0, y: 0, transition: { duration: 0.15 } },
+      animate: {
+        x: [0, 1, 0],
+        y: [0, -1, 0],
+        transition: { duration: 0.45, times: [0, 0.4, 1], ease: 'easeOut' },
+      },
+    },
+    node2: {},
+    node3: {
+      initial: { x: 0, y: 0, transition: { duration: 0.15 } },
+      animate: {
+        x: [0, 1, 0],
+        y: [0, 1, 0],
+        transition: { duration: 0.45, times: [0, 0.4, 1], ease: 'easeOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: Share2Props) {
+  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.lines} initial="initial" animate={controls}>
+        <motion.line
+          x1={8.59}
+          x2={15.42}
+          y1={13.51}
+          y2={17.49}
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.line
+          x1={15.41}
+          x2={8.59}
+          y1={6.51}
+          y2={10.49}
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.circle
+        cx={18}
+        cy={5}
+        r={3}
+        variants={variants.node1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx={6}
+        cy={12}
+        r={3}
+        variants={variants.node2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx={18}
+        cy={19}
+        r={3}
+        variants={variants.node3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Share2(props: Share2Props) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Share2 as Share2Animated };

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

@@ -0,0 +1,76 @@
+/* From Animate UI's registry (icons-lucide-share), 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 ShareProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    shaft: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.4, ease: 'easeInOut' },
+      },
+    },
+    head: {
+      initial: { opacity: 1, scale: 1, transformOrigin: '50% 0%' },
+      animate: {
+        opacity: [0, 1],
+        scale: [0.3, 1],
+        transformOrigin: '50% 0%',
+        transition: { duration: 0.3, ease: 'easeOut', delay: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ShareProps) {
+  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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+      <motion.path
+        d="M12 15V2"
+        variants={variants.shaft}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m16 6-4-4-4 4"
+        variants={variants.head}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Share(props: ShareProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Share as ShareAnimated };

package/registry/ui/components/nm-icon/animated/shield-check.tsx

@@ -0,0 +1,70 @@
+/* From Animate UI's registry (icons-lucide-shield-check), 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 ShieldCheckProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 0.92, 1.04, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    check: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.4, ease: 'easeInOut', delay: 0.2 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ShieldCheckProps) {
+  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="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+        <motion.path
+          d="m9 12 2 2 4-4"
+          variants={variants.check}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function ShieldCheck(props: ShieldCheckProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ShieldCheck as ShieldCheckAnimated };

package/registry/ui/components/nm-icon/animated/shopping-bag.tsx

@@ -0,0 +1,71 @@
+/* From Animate UI's registry (icons-lucide-shopping-bag), 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 ShoppingBagProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    bag: {
+      initial: { scaleY: 1, transformOrigin: '50% 100%' },
+      animate: {
+        scaleY: [1, 1.03, 0.97, 1],
+        transformOrigin: '50% 100%',
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    handle: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, -1.2, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ShoppingBagProps) {
+  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.bag} initial="initial" animate={controls}>
+        <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z" />
+        <path d="M3.103 6.034h17.794" />
+        <motion.path
+          d="M16 10a4 4 0 0 1-8 0"
+          variants={variants.handle}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function ShoppingBag(props: ShoppingBagProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ShoppingBag as ShoppingBagAnimated };