@nordmanai/nif 0.2.2 → 0.2.4

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

@@ -0,0 +1,105 @@
+/* From Animate UI's registry (icons-lucide-check-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 CheckCheckProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        scale: 1,
+      },
+      animate: {
+        scale: [1, 1.1, 1],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path1: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          delay: 0.2,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CheckCheckProps) {
+  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.path
+          d="m2 12 5 5L18 6"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="m13 16 1.5 1.5L22 10"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function CheckCheck(props: CheckCheckProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, CheckCheck as CheckCheckAnimated };

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

@@ -0,0 +1,70 @@
+/* From Animate UI's registry (icons-lucide-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 CheckProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1, 1.1, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CheckProps) {
+  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.path
+        d="m4 12 5 5L20 6"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Check(props: CheckProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Check as CheckAnimated };

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

@@ -0,0 +1,73 @@
+/* From Animate UI's registry (icons-lucide-chevron-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 ChevronDownProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        y: 4,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 4, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ChevronDownProps) {
+  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="m6 9 6 6 6-6"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ChevronDown(props: ChevronDownProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ChevronDown as ChevronDownAnimated };

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

@@ -0,0 +1,73 @@
+/* From Animate UI's registry (icons-lucide-chevron-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 ChevronLeftProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        x: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: -4,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: [0, -4, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ChevronLeftProps) {
+  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="m15 18-6-6 6-6"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ChevronLeft(props: ChevronLeftProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ChevronLeft as ChevronLeftAnimated };

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

@@ -0,0 +1,73 @@
+/* From Animate UI's registry (icons-lucide-chevron-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 ChevronRightProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        x: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: 4,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: [0, 4, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ChevronRightProps) {
+  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="m9 18 6-6-6-6"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ChevronRight(props: ChevronRightProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ChevronRight as ChevronRightAnimated };

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

@@ -0,0 +1,73 @@
+/* From Animate UI's registry (icons-lucide-chevron-up), 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 ChevronUpProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        y: -4,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, -4, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ChevronUpProps) {
+  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="m18 15-6-6-6 6"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ChevronUp(props: ChevronUpProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ChevronUp as ChevronUpAnimated };

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

@@ -0,0 +1,84 @@
+/* From Animate UI's registry (icons-lucide-circle-alert), 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 CircleAlertProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    outline: {},
+    mark: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [1, 0.15, 1, 0.15, 1],
+        transition: {
+          duration: 1.1,
+          times: [0, 0.2, 0.45, 0.7, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CircleAlertProps) {
+  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.circle
+        cx="12"
+        cy="12"
+        r="10"
+        variants={variants.outline}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        x2="12"
+        y1="8"
+        y2="12"
+        variants={variants.mark}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        x2="12.01"
+        y1="16"
+        y2="16"
+        variants={variants.mark}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CircleAlert(props: CircleAlertProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, CircleAlert as CircleAlertAnimated };

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

@@ -0,0 +1,75 @@
+/* From Animate UI's registry (icons-lucide-circle-check-big), 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 CircleCheckBigProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {},
+    path2: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1, 1.1, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CircleCheckBigProps) {
+  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.801 10A10 10 0 1 1 17 3.335"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m9 11 3 3L22 4"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CircleCheckBig(props: CircleCheckBigProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, CircleCheckBig as CircleCheckBigAnimated };

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

@@ -0,0 +1,77 @@
+/* From Animate UI's registry (icons-lucide-circle-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 CircleCheckProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    circle: {},
+    path: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1, 1.1, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CircleCheckProps) {
+  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.circle
+        cx="12"
+        cy="12"
+        r="10"
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m9 12 2 2 4-4"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CircleCheck(props: CircleCheckProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, CircleCheck as CircleCheckAnimated };