@nordmanai/nif 0.2.2 → 0.2.3

package/registry/ui/components/nm-icon/animated/key-round.tsx

@@ -0,0 +1,67 @@
+/* From Animate UI's registry (icons-lucide-key-round), 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 KeyRoundProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { rotate: 0, scale: 1 },
+      animate: {
+        rotate: [0, -12, 0],
+        scale: [1, 0.95, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  wiggle: {
+    group: {
+      initial: { rotate: 0 },
+      animate: {
+        rotate: [0, -6, 6, -6, 0],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: KeyRoundProps) {
+  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="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" />
+        <circle cx={16.5} cy={7.5} r={0.5} />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function KeyRound(props: KeyRoundProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, KeyRound as KeyRoundAnimated };

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

@@ -0,0 +1,116 @@
+/* From Animate UI's registry (icons-lucide-layers), 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 LayersProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: 5,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {},
+    path3: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: -5,
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path1: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 5, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {},
+    path3: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, -5, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LayersProps) {
+  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="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Layers(props: LayersProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Layers as LayersAnimated };

package/registry/ui/components/nm-icon/animated/layout-dashboard.tsx

@@ -0,0 +1,176 @@
+/* From Animate UI's registry (icons-lucide-layout-dashboard), 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 LayoutDashboardProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect1: {
+      initial: {
+        height: 9,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        height: 5,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    rect2: {
+      initial: {
+        height: 5,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        height: 9,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    rect3: {
+      initial: {
+        height: 9,
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        height: 5,
+        y: 4,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    rect4: {
+      initial: {
+        height: 5,
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        height: 9,
+        y: -4,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    rect1: {
+      initial: {
+        height: 9,
+      },
+      animate: {
+        height: [9, 5, 9],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    rect2: {
+      initial: {
+        height: 5,
+      },
+      animate: {
+        height: [5, 9, 5],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    rect3: {
+      initial: {
+        height: 9,
+        y: 0,
+      },
+      animate: {
+        height: [9, 5, 9],
+        y: [0, 4, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    rect4: {
+      initial: {
+        height: 5,
+        y: 0,
+      },
+      animate: {
+        height: [5, 9, 5],
+        y: [0, -4, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LayoutDashboardProps) {
+  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={7}
+        height={9}
+        x={3}
+        y={3}
+        rx={1}
+        ry={1}
+        variants={variants.rect1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.rect
+        width={7}
+        height={5}
+        x={14}
+        y={3}
+        rx={1}
+        ry={1}
+        variants={variants.rect2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.rect
+        width={7}
+        height={9}
+        x={14}
+        y={12}
+        rx={1}
+        ry={1}
+        variants={variants.rect3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.rect
+        width={7}
+        height={5}
+        x={3}
+        y={16}
+        rx={1}
+        ry={1}
+        variants={variants.rect4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function LayoutDashboard(props: LayoutDashboardProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, LayoutDashboard as LayoutDashboardAnimated };

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

@@ -0,0 +1,89 @@
+/* From Animate UI's registry (icons-lucide-library-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 LibraryBigProps = IconProps<keyof typeof animations>;
+
+const PIVOT = '17.6px 20.96px';
+
+const animations = {
+  default: {
+    standing: {},
+    spine: {},
+    leaning: {
+      initial: {
+        rotate: 0,
+        transformOrigin: PIVOT,
+        transition: { duration: 0.15 },
+      },
+      animate: {
+        rotate: [0, 20, 20, 0, 2, 0],
+        transformOrigin: PIVOT,
+        transition: {
+          duration: 1,
+          times: [0, 0.3, 0.5, 0.78, 0.88, 1],
+          ease: ['easeOut', 'linear', 'easeIn', 'easeOut', 'easeInOut'],
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LibraryBigProps) {
+  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="8"
+        height="18"
+        x="3"
+        y="3"
+        rx="1"
+        variants={variants.standing}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M7 3v18"
+        variants={variants.spine}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z"
+        variants={variants.leaning}
+        initial="initial"
+        animate={controls}
+        style={{ transformBox: 'view-box' }}
+      />
+    </motion.svg>
+  );
+}
+
+function LibraryBig(props: LibraryBigProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, LibraryBig as LibraryBigAnimated };

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

@@ -0,0 +1,106 @@
+/* From Animate UI's registry (icons-lucide-lightbulb), 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 LightbulbProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        rotate: 0,
+        fill: 'transparent',
+      },
+      animate: {
+        transformOrigin: 'bottom center',
+        fill: 'currentColor',
+        rotate: [0, -20, 15, -7, 0],
+        fillOpacity: [0, 1, 0, 1, 0],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+          rotate: {
+            duration: 0.8,
+            ease: 'easeInOut',
+            times: [0, 0.4, 0.6, 0.8, 1],
+          },
+          fillOpacity: {
+            duration: 0.3,
+            ease: 'easeInOut',
+            times: [0, 0.4, 0.6, 0.8, 1],
+            delay: 0.4,
+          },
+        },
+      },
+    },
+    path2: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        transformOrigin: 'bottom center',
+        rotate: [0, 0, 10, -5, 0],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+          times: [0, 0.4, 0.6, 0.8, 1],
+        },
+      },
+    },
+    path3: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LightbulbProps) {
+  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 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M9 18h6"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M10 22h4"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Lightbulb(props: LightbulbProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Lightbulb as LightbulbAnimated };