@nordmanai/nif 0.2.2 → 0.2.4

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

@@ -0,0 +1,85 @@
+/* From Animate UI's registry (icons-lucide-archive), 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 ArchiveProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    lid: {
+      initial: {
+        y: 0,
+        rotate: 0,
+        transformOrigin: '2px 5.5px',
+        transition: { duration: 0.15 },
+      },
+      animate: {
+        y: [0, -1, 0],
+        rotate: [0, -2, 0],
+        transformOrigin: '2px 5.5px',
+        transition: { duration: 0.5, times: [0, 0.4, 1], ease: 'easeInOut' },
+      },
+    },
+    body: {},
+    handle: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ArchiveProps) {
+  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.rect
+        width="20"
+        height="5"
+        x="2"
+        y="3"
+        rx="1"
+        variants={variants.lid}
+        initial="initial"
+        animate={controls}
+        style={{ transformBox: 'view-box' }}
+      />
+      <motion.path
+        d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
+        variants={variants.body}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M10 12h4"
+        variants={variants.handle}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Archive(props: ArchiveProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Archive as ArchiveAnimated };

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

@@ -0,0 +1,149 @@
+/* From Animate UI's registry (icons-lucide-arrow-down), 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 ArrowDownProps = 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 5v14',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        d: 'M12 5v10',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    path2: {
+      initial: {
+        d: 'm19 12-7 7-7-7',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        d: 'm19 8.5-7 7-7-7',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'pointing-loop': {
+    group: {},
+    path1: {
+      initial: {
+        d: 'M12 5v14',
+      },
+      animate: {
+        d: ['M12 5v14', 'M12 5v10', 'M12 5v14'],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    path2: {
+      initial: {
+        d: 'm19 12-7 7-7-7',
+      },
+      animate: {
+        d: ['m19 12-7 7-7-7', 'm19 8.5-7 7-7-7', 'm19 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 }: ArrowDownProps) {
+  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 5v14"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="m19 12-7 7-7-7"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function ArrowDown(props: ArrowDownProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ArrowDown as ArrowDownAnimated };

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

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

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

@@ -0,0 +1,149 @@
+/* From Animate UI's registry (icons-lucide-arrow-right), 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 ArrowRightProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        x: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        x: '25%',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    group: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: [0, '25%', 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+  pointing: {
+    group: {},
+    path1: {
+      initial: {
+        d: 'M5 12h14',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        d: 'M5 12h10',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    path2: {
+      initial: {
+        d: 'm12 5 7 7-7 7',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        d: 'm8 5 7 7-7 7',
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'pointing-loop': {
+    group: {},
+    path1: {
+      initial: {
+        d: 'M5 12h14',
+      },
+      animate: {
+        d: ['M5 12h14', 'M5 12h10', 'M5 12h14'],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    path2: {
+      initial: {
+        d: 'm12 5 7 7-7 7',
+      },
+      animate: {
+        d: ['m12 5 7 7-7 7', 'm8 5 7 7-7 7', 'm12 5 7 7-7 7'],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  out: {
+    group: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: [0, '150%', '-150%', 0],
+        transition: {
+          default: { ease: 'easeInOut', duration: 0.6 },
+          x: {
+            ease: 'easeInOut',
+            duration: 0.6,
+            times: [0, 0.5, 0.5, 1],
+          },
+        },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ArrowRightProps) {
+  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="M5 12h14"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="m12 5 7 7-7 7"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function ArrowRight(props: ArrowRightProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ArrowRight as ArrowRightAnimated };

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

@@ -0,0 +1,168 @@
+/* From Animate UI's registry (icons-lucide-arrow-up-down), 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 ArrowUpDownProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    upArrowGroup: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: -3,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    downArrowGroup: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: 3,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    upArrowLine: {},
+    upArrowHead: {},
+    downArrowLine: {},
+    downArrowHead: {},
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    upArrowGroup: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, -3, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    downArrowGroup: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 3, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    upArrowLine: {},
+    upArrowHead: {},
+    downArrowLine: {},
+    downArrowHead: {},
+  } satisfies Record<string, Variants>,
+  out: {
+    upArrowGroup: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, -24, 24, 0],
+        transition: {
+          default: { ease: 'easeInOut', duration: 0.6 },
+          y: {
+            ease: 'easeInOut',
+            duration: 0.6,
+            times: [0, 0.5, 0.5, 1],
+          },
+        },
+      },
+    },
+    downArrowGroup: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 24, -24, 0],
+        transition: {
+          default: { ease: 'easeInOut', duration: 0.6 },
+          y: {
+            ease: 'easeInOut',
+            duration: 0.6,
+            times: [0, 0.5, 0.5, 1],
+          },
+        },
+      },
+    },
+    upArrowLine: {},
+    upArrowHead: {},
+    downArrowLine: {},
+    downArrowHead: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ArrowUpDownProps) {
+  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.downArrowGroup}
+        initial="initial"
+        animate={controls}
+      >
+        <motion.path
+          d="m21 16-4 4-4-4"
+          variants={variants.downArrowHead}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M17 20V4"
+          variants={variants.downArrowLine}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.g
+        variants={variants.upArrowGroup}
+        initial="initial"
+        animate={controls}
+      >
+        <motion.path
+          d="m3 8 4-4 4 4"
+          variants={variants.upArrowHead}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M7 4v16"
+          variants={variants.upArrowLine}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function ArrowUpDown(props: ArrowUpDownProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ArrowUpDown as ArrowUpDownAnimated };