@nordmanai/nif 0.2.1 → 0.2.3

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

@@ -0,0 +1,210 @@
+/* From Animate UI's registry (icons-lucide-link), 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 LinkProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: { x: 0, y: 0 },
+      animate: {
+        x: [0, 1, 0],
+        y: [0, -1, 0],
+        transition: {
+          duration: 0.6,
+          times: [0, 0.4, 1],
+          ease: ['easeOut', 'backOut'],
+        },
+      },
+    },
+    path2: {
+      initial: { x: 0, y: 0 },
+      animate: {
+        x: [0, -1, 0],
+        y: [0, 1, 0],
+        transition: {
+          duration: 0.6,
+          times: [0, 0.4, 1],
+          ease: ['easeOut', 'backOut'],
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path1: {
+      initial: { x: 0, y: 0 },
+      animate: {
+        x: [0, 1, 0],
+        y: [0, -1, 0],
+        transition: {
+          duration: 0.8,
+          times: [0, 0.4, 1],
+          ease: ['easeOut', 'backOut'],
+        },
+      },
+    },
+    path2: {
+      initial: { x: 0, y: 0 },
+      animate: {
+        x: [0, -1, 0],
+        y: [0, 1, 0],
+        transition: {
+          duration: 0.8,
+          times: [0, 0.4, 1],
+          ease: ['easeOut', 'backOut'],
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  unlink: {
+    path1: {
+      initial: { x: 0, y: 0, transition: { duration: 0.3, ease: 'easeInOut' } },
+      animate: {
+        x: 1,
+        y: -1,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path2: {
+      initial: { x: 0, y: 0, transition: { duration: 0.3, ease: 'easeInOut' } },
+      animate: {
+        x: -1,
+        y: 1,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  join: {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: -1.5,
+        y: 1.5,
+        pathLength: 0.85,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: 1.5,
+        y: -1.5,
+        pathLength: 0.85,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'join-loop': {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: [0, -1.5, 0],
+        y: [0, 1.5, 0],
+        pathLength: [1, 0.85, 1],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: [0, 1.5, 0],
+        y: [0, -1.5, 0],
+        pathLength: [1, 0.85, 1],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LinkProps) {
+  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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Link(props: LinkProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Link as LinkAnimated };

package/registry/ui/components/nm-icon/animated/list-filter.tsx

@@ -0,0 +1,78 @@
+/* From Animate UI's registry (icons-lucide-list-filter), 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 ListFilterProps = IconProps<keyof typeof animations>;
+
+function bar(delay: number): Variants {
+  return {
+    initial: { y: 0, opacity: 1, transition: { duration: 0.15 } },
+    animate: {
+      y: [-3, 0],
+      opacity: [0, 1],
+      transition: { duration: 0.3, delay, ease: 'easeOut' },
+    },
+  };
+}
+
+const animations = {
+  default: {
+    top: bar(0),
+    middle: bar(0.09),
+    bottom: bar(0.18),
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ListFilterProps) {
+  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="M2 5h20"
+        variants={variants.top}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M6 12h12"
+        variants={variants.middle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M9 19h6"
+        variants={variants.bottom}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ListFilter(props: ListFilterProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ListFilter as ListFilterAnimated };

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

@@ -0,0 +1,184 @@
+/* From Animate UI's registry (icons-lucide-list), 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 ListProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect: {},
+    path1: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.2,
+        },
+      },
+    },
+    path3: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.4,
+        },
+      },
+    },
+    path4: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.6,
+        },
+      },
+    },
+    path5: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.8,
+        },
+      },
+    },
+    path6: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 1,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ListProps) {
+  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="M3 5h.01"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 5h13"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 12h.01"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 12h13"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 19h.01"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 19h13"
+        variants={variants.path6}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function List(props: ListProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, List as ListAnimated };

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

@@ -0,0 +1,68 @@
+/* From Animate UI's registry (icons-lucide-loader-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 LoaderCircleProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { rotate: 0 },
+      animate: {
+        rotate: 360,
+        transition: {
+          duration: 1,
+          ease: 'linear',
+          repeat: Infinity,
+          repeatType: 'loop',
+        },
+      },
+    },
+    path: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LoaderCircleProps) {
+  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"
+      variants={variants.group}
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M21 12a9 9 0 1 1-6.219-8.56"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function LoaderCircle(props: LoaderCircleProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, LoaderCircle as LoaderCircleAnimated };

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

@@ -0,0 +1,152 @@
+/* From Animate UI's registry (icons-lucide-lock), 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 LockProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, -5, 7, 0],
+        scale: [1, 0.9, 1, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 1,
+      },
+      animate: {
+        pathLength: [1, 0.8, 1, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+  } satisfies Record<string, Variants>,
+  unlock: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, -5, 0],
+        scale: [1, 0.9, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 1,
+      },
+      animate: {
+        pathLength: 0.8,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+  } satisfies Record<string, Variants>,
+  lock: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, 7, 0],
+        scale: [1, 0.9, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 0.8,
+      },
+      animate: {
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LockProps) {
+  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.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.rect
+          width="18"
+          height="11"
+          x="3"
+          y="11"
+          rx="2"
+          ry="2"
+          variants={variants.rect}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M7 11V7a5 5 0 0 1 10 0v4"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Lock(props: LockProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Lock as LockAnimated };