@nordmanai/nif 0.2.2 → 0.2.3

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

@@ -0,0 +1,102 @@
+/* From Animate UI's registry (icons-lucide-pin-off), 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 PinOffProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: [0, '-7%', '7%', '-7%', '7%', 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {},
+  } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {},
+    path3: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path4: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PinOffProps) {
+  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="M12 17v5"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m2 2 20 20"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function PinOff(props: PinOffProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, PinOff as PinOffAnimated };

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

@@ -0,0 +1,124 @@
+/* From Animate UI's registry (icons-lucide-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 PinProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { rotate: 0, transformOrigin: 'bottom center' },
+      animate: {
+        rotate: [0, -10, 6, -3, 0],
+        transformOrigin: 'bottom center',
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      },
+    },
+    line: {},
+    path: {},
+  } satisfies Record<string, Variants>,
+  bounce: {
+    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 },
+      },
+    },
+    line: {},
+    path: {},
+  } satisfies Record<string, Variants>,
+  wiggle: {
+    group: {
+      initial: {
+        rotate: 0,
+        transformOrigin: 'bottom center',
+      },
+      animate: {
+        rotate: [0, 15, -10, 0],
+        transformOrigin: 'bottom center',
+        transition: { ease: 'easeInOut', duration: 1 },
+      },
+    },
+    line: {},
+    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 },
+      },
+    },
+    line: {},
+    path: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PinProps) {
+  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.line
+          x1={12}
+          y1={17.1}
+          x2={12}
+          y2={22}
+          variants={variants.line}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M9,10.8c0,.8-.4,1.5-1.1,1.8l-1.8.9c-.7.3-1.1,1-1.1,1.8v.8c0,.6.4,1,1,1h12c.6,0,1-.4,1-1v-.8c0-.8-.4-1.5-1.1-1.8l-1.8-.9c-.7-.3-1.1-1-1.1-1.8v-3.8c0-.6.4-1,1-1,1.1,0,2-.9,2-2s-.9-2-2-2h-8c-1.1,0-2,.9-2,2s.9,2,2,2,1,.4,1,1v3.8Z"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Pin(props: PinProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Pin as PinAnimated };

package/registry/ui/components/nm-icon/animated/plane-takeoff.tsx

@@ -0,0 +1,62 @@
+/* From Animate UI's registry (icons-lucide-plane-takeoff), 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 PlaneTakeoffProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    plane: {
+      initial: { y: 0, rotate: 0, transformOrigin: '0% 100%' },
+      animate: {
+        y: [0, -1, 0],
+        rotate: [0, -5, 0],
+        transformOrigin: '0% 100%',
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PlaneTakeoffProps) {
+  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="M2 22h20" />
+      <motion.path
+        d="M6.36 17.4 4 17l-2-4 1.1-.55a2 2 0 0 1 1.8 0l.17.1a2 2 0 0 0 1.8 0L8 12 5 6l.9-.45a2 2 0 0 1 2.09.2l4.02 3a2 2 0 0 0 2.1.2l4.19-2.06a2.41 2.41 0 0 1 1.73-.17L21 7a1.4 1.4 0 0 1 .87 1.99l-.38.76c-.23.46-.6.84-1.07 1.08L7.58 17.2a2 2 0 0 1-1.22.18Z"
+        variants={variants.plane}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function PlaneTakeoff(props: PlaneTakeoffProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, PlaneTakeoff as PlaneTakeoffAnimated };

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

@@ -0,0 +1,74 @@
+/* From Animate UI's registry (icons-lucide-play), 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 PlayProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    polygon: {
+      initial: {
+        x: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: 3,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    polygon: {
+      initial: {
+        x: 0,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+      animate: {
+        x: [0, 3, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PlayProps) {
+  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.polygon
+        points="6 3 20 12 6 21 6 3"
+        variants={variants.polygon}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Play(props: PlayProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Play as PlayAnimated };

package/registry/ui/components/nm-icon/animated/plug-zap.tsx

@@ -0,0 +1,117 @@
+/* From Animate UI's registry (icons-lucide-plug-zap), 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 PlugZapProps = IconProps<keyof typeof animations>;
+
+const PLUG: Variants = {
+  initial: { x: 0, y: 0 },
+  animate: {
+    x: [0, 1.2, 1.2, 0],
+    y: [0, -1.2, -1.2, 0],
+    transition: { duration: 0.8, ease: 'easeInOut', times: [0, 0.3, 0.55, 1] },
+  },
+};
+
+const animations = {
+  default: {
+    path1: PLUG,
+    path2: PLUG,
+    path3: PLUG,
+    path4: PLUG,
+    path5: {
+      initial: { opacity: 1, scale: 1 },
+      animate: {
+        opacity: [1, 0.5, 1, 0.7, 1],
+        scale: [1, 1.2, 0.95, 1.08, 1],
+        transition: { duration: 0.5, ease: 'easeInOut', delay: 0.2 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  flicker: {
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {},
+    path5: {
+      initial: {
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        opacity: [1, 0.5, 1, 0.5, 1],
+        scale: [1, 0.9, 1, 0.9, 1],
+        transition: {
+          duration: 1.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PlugZapProps) {
+  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.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m2 22 3-3"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M7.5 13.5 10 11"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M10.5 16.5 13 14"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m18 3-4 4h6l-4 4"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function PlugZap(props: PlugZapProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, PlugZap as PlugZapAnimated };

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

@@ -0,0 +1,122 @@
+/* From Animate UI's registry (icons-lucide-plus), 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 PlusProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    line1: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },
+      },
+      animate: {
+        rotate: 90,
+        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },
+      },
+    },
+    line2: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+      animate: {
+        rotate: 90,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  x: {
+    line1: {
+      initial: {
+        rotate: 0,
+        x1: 12,
+        y1: 19,
+        x2: 12,
+        y2: 5,
+        transition: { ease: 'easeInOut', duration: 0.3, delay: 0.1 },
+      },
+      animate: {
+        rotate: 45,
+        x1: 12,
+        y1: 20.5,
+        x2: 12,
+        y2: 3.5,
+        transition: { ease: 'easeInOut', duration: 0.3, delay: 0.1 },
+      },
+    },
+    line2: {
+      initial: {
+        rotate: 0,
+        x1: 5,
+        y1: 12,
+        x2: 19,
+        y2: 12,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        rotate: 45,
+        x1: 3.5,
+        y1: 12,
+        x2: 20.5,
+        y2: 12,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PlusProps) {
+  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={12}
+        y1={19}
+        x2={12}
+        y2={5}
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={5}
+        y1={12}
+        x2={19}
+        y2={12}
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Plus(props: PlusProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Plus as PlusAnimated };