@nordmanai/nif 0.2.2 → 0.2.3

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

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

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

@@ -0,0 +1,86 @@
+/* From Animate UI's registry (icons-lucide-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 ZapProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 0.9, 1.15, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path: {},
+  } satisfies Record<string, Variants>,
+  fill: {
+    group: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 0.9, 1.15, 1],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path: {
+      initial: { fill: 'currentColor', fillOpacity: 0 },
+      animate: { fillOpacity: 1, transition: { delay: 0.2 } },
+    },
+  } satisfies Record<string, Variants>,
+  shake: {
+    group: {
+      initial: { scale: 1, rotate: 0 },
+      animate: {
+        scale: [1, 0.9, 1.08, 0.98, 1],
+        rotate: [0, -8, 8, -4, 0],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    path: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ZapProps) {
+  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="M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Zap(props: ZapProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Zap as ZapAnimated };

package/registry/ui/components/nm-icon/animated/zoom-in.tsx

@@ -0,0 +1,66 @@
+/* From Animate UI's registry (icons-lucide-zoom-in), 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 ZoomInProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    lens: {
+      initial: { scale: 1, transformOrigin: '44.44% 44.44%' },
+      animate: {
+        scale: [1, 1.1, 1],
+        transformOrigin: '44.44% 44.44%',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    sign: {
+      initial: { rotate: 0 },
+      animate: { rotate: 90, transition: { duration: 0.5, ease: 'easeInOut' } },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ZoomInProps) {
+  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.lens} initial="initial" animate={controls}>
+        <line x1={21} x2={16.65} y1={21} y2={16.65} />
+        <circle cx={11} cy={11} r={8} />
+        <motion.g variants={variants.sign} initial="initial" animate={controls}>
+          <line x1={11} x2={11} y1={8} y2={14} />
+          <line x1={8} x2={14} y1={11} y2={11} />
+        </motion.g>
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function ZoomIn(props: ZoomInProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ZoomIn as ZoomInAnimated };

package/registry/ui/components/nm-icon/animated/zoom-out.tsx

@@ -0,0 +1,85 @@
+/* From Animate UI's registry (icons-lucide-zoom-out), 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 ZoomOutProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    lens: {
+      initial: { scale: 1, transformOrigin: '44.44% 44.44%' },
+      animate: {
+        scale: [1, 1.1, 1],
+        transformOrigin: '44.44% 44.44%',
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+    sign: {
+      initial: { scaleX: 1 },
+      animate: {
+        scaleX: [1, 0.4, 1],
+        transition: { duration: 0.5, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  shrink: {
+    lens: {
+      initial: { scale: 1, transformOrigin: '44.44% 44.44%' },
+      animate: {
+        scale: [1, 0.86, 1],
+        transformOrigin: '44.44% 44.44%',
+        transition: { duration: 0.9, times: [0, 0.45, 1], ease: 'easeInOut' },
+      },
+    },
+    sign: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ZoomOutProps) {
+  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.lens} initial="initial" animate={controls}>
+        <line x1={21} x2={16.65} y1={21} y2={16.65} />
+        <circle cx={11} cy={11} r={8} />
+        <motion.line
+          x1={8}
+          x2={14}
+          y1={11}
+          y2={11}
+          variants={variants.sign}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function ZoomOut(props: ZoomOutProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, ZoomOut as ZoomOutAnimated };

package/registry/ui/components/nm-icon/nm-icon.css

@@ -3,4 +3,3 @@
     width: var(--nm-icon);
     height: var(--nm-icon);
   }
-

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

@@ -1,13 +1,16 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode, SVGAttributes } from 'react';
 import { NM_ICONS, type NmIconId, type NmIconSpec } from '../../config/nm-icons.ts';
 import { hasNmLucide, NmLucide } from './nm-lucide.tsx';
 import { createLogger } from '../../kit-logger.ts';
 
 const logger = createLogger('interface-nm-icon');
 
-export type NmIconProps = {
+export type NmIconProps = Omit<SVGAttributes<SVGElement>, 'id' | 'className' | 'style' | 'viewBox' | 'fill' | 'stroke'> & {
   id: NmIconId;
   className?: string;
+  /** A size in px or any CSS length, for the rare icon that is not the themed icon size. */
+  size?: number | string;
+  style?: CSSProperties;
 };
 
 function iconStrokes(path: string | readonly string[] | undefined): string[] {
@@ -20,10 +23,20 @@ function iconStrokes(path: string | readonly string[] | undefined): string[] {
   return [...path];
 }
 
-export function NmIcon(props: NmIconProps): ReactNode {
+function sizedStyle(size: number | string | undefined, style: CSSProperties | undefined): CSSProperties | undefined {
+  if (size == null) {
+    return style;
+  }
+  const length = typeof size === 'number' ? `${size}px` : size;
+  return { width: length, height: length, ...style };
+}
+
+export function NmIcon(allProps: NmIconProps): ReactNode {
+  const { id, className, size, style, ...rest } = allProps;
+  const props = { id, className, size, style };
   if (hasNmLucide(props.id)) {
     logger.debug('render', props.id);
-    return <NmLucide id={props.id} className={props.className} />;
+    return <NmLucide id={props.id} className={props.className} size={props.size} style={props.style} {...rest} />;
   }
   const spec: NmIconSpec | undefined = NM_ICONS[props.id as keyof typeof NM_ICONS];
   if (!spec) {
@@ -38,8 +51,10 @@ export function NmIcon(props: NmIconProps): ReactNode {
       data-icon={props.id}
       viewBox={spec.viewBox}
       fill="none"
-      aria-hidden="true"
+      aria-hidden={rest['aria-label'] == null ? 'true' : undefined}
       focusable="false"
+      {...rest}
+      style={sizedStyle(props.size, props.style)}
     >
       {spec.fill ? <path d={spec.fill} fill="currentColor" /> : null}
       {strokes.map((d) => (

package/registry/ui/components/nm-icon/nm-lucide-extended.tsx

@@ -0,0 +1,284 @@
+/* Generated by scripts/extend-icons.mjs. */
+import {
+  Activity,
+  AppWindow,
+  ArchiveRestore,
+  ArrowDown,
+  ArrowLeftRight,
+  ArrowRightLeft,
+  ArrowUpDown,
+  ArrowUpLeft,
+  Ban,
+  Beaker,
+  Bitcoin,
+  Bone,
+  BookCopy,
+  Bookmark,
+  BookmarkPlus,
+  CalendarDays,
+  ChartColumn,
+  ChartColumnIncreasing,
+  ChartLine,
+  CheckCheck,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronsUpDown,
+  Circle,
+  CircleAlert,
+  CircleCheckBig,
+  CircleDashed,
+  CircleDot,
+  CirclePlus,
+  CircleQuestionMark,
+  CircleX,
+  Clock3,
+  Clock4,
+  CloudSun,
+  CodeXml,
+  CopyCheck,
+  CornerDownRight,
+  Database,
+  Dices,
+  Earth,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  FastForward,
+  Feather,
+  FileClock,
+  FileCode,
+  FileImage,
+  FileJson,
+  FilePenLine,
+  FilePlus2,
+  FileQuestionMark,
+  FileSearch,
+  FileSpreadsheet,
+  FileType2,
+  FileUp,
+  FileX2,
+  Files,
+  Film,
+  FolderKanban,
+  FunnelX,
+  GitBranchPlus,
+  GitCommitHorizontal,
+  GitFork,
+  GraduationCap,
+  GripVertical,
+  History,
+  ImageOff,
+  ImageUp,
+  Info,
+  KeyRound,
+  Keyboard,
+  Laptop,
+  Layers,
+  LayoutDashboard,
+  Library,
+  LifeBuoy,
+  Lightbulb,
+  Link,
+  Link2Off,
+  List,
+  ListTree,
+  MapPin,
+  MessageCircleQuestionMark,
+  MessageSquare,
+  MessageSquarePlus,
+  MessageSquareText,
+  MessagesSquare,
+  Minimize2,
+  MousePointerClick,
+  Newspaper,
+  NotebookPen,
+  OctagonPause,
+  Paperclip,
+  PenLine,
+  PenTool,
+  PinOff,
+  PlaneTakeoff,
+  PlugZap,
+  QrCode,
+  Radio,
+  RefreshCw,
+  Rocket,
+  RotateCw,
+  Scale,
+  ScanSearch,
+  ScrollText,
+  Send,
+  Share2,
+  Shield,
+  ShieldCheck,
+  ShieldEllipsis,
+  ShoppingBag,
+  SlidersHorizontal,
+  Sparkles,
+  SquarePen,
+  SquareSlash,
+  SquareTerminal,
+  Star,
+  Table2,
+  TextQuote,
+  Trash,
+  TrendingUp,
+  TriangleAlert,
+  Trophy,
+  Type,
+  User,
+  UserCheck,
+  Users,
+  UtensilsCrossed,
+  Variable,
+  Video,
+  WandSparkles,
+  Zap,
+  ZapOff,
+  ZoomIn,
+  ZoomOut,
+  type LucideIcon,
+} from 'lucide-react';
+import type { NM_EXTENDED_ICON_IDS } from '../../config/nm-icons-extended.ts';
+
+export const NM_LUCIDE_EXTENDED: Record<(typeof NM_EXTENDED_ICON_IDS)[number], LucideIcon> = {
+  'activity': Activity,
+  'app-window': AppWindow,
+  'archive-restore': ArchiveRestore,
+  'arrow-down': ArrowDown,
+  'arrow-left-right': ArrowLeftRight,
+  'arrow-right-left': ArrowRightLeft,
+  'arrow-up-down': ArrowUpDown,
+  'arrow-up-left': ArrowUpLeft,
+  'ban': Ban,
+  'beaker': Beaker,
+  'bitcoin': Bitcoin,
+  'bone': Bone,
+  'book-copy': BookCopy,
+  'bookmark': Bookmark,
+  'bookmark-plus': BookmarkPlus,
+  'calendar-days': CalendarDays,
+  'chart-column': ChartColumn,
+  'chart-column-increasing': ChartColumnIncreasing,
+  'chart-line': ChartLine,
+  'check-check': CheckCheck,
+  'chevron-left': ChevronLeft,
+  'chevron-right': ChevronRight,
+  'chevron-up': ChevronUp,
+  'chevrons-up-down': ChevronsUpDown,
+  'circle': Circle,
+  'circle-alert': CircleAlert,
+  'circle-check-big': CircleCheckBig,
+  'circle-dashed': CircleDashed,
+  'circle-dot': CircleDot,
+  'circle-plus': CirclePlus,
+  'circle-question-mark': CircleQuestionMark,
+  'circle-x': CircleX,
+  'clock-3': Clock3,
+  'clock-4': Clock4,
+  'cloud-sun': CloudSun,
+  'code-xml': CodeXml,
+  'copy-check': CopyCheck,
+  'corner-down-right': CornerDownRight,
+  'database': Database,
+  'dices': Dices,
+  'earth': Earth,
+  'external-link': ExternalLink,
+  'eye': Eye,
+  'eye-off': EyeOff,
+  'fast-forward': FastForward,
+  'feather': Feather,
+  'file-clock': FileClock,
+  'file-code': FileCode,
+  'file-image': FileImage,
+  'file-json': FileJson,
+  'file-pen-line': FilePenLine,
+  'file-plus-2': FilePlus2,
+  'file-question-mark': FileQuestionMark,
+  'file-search': FileSearch,
+  'file-spreadsheet': FileSpreadsheet,
+  'file-type-2': FileType2,
+  'file-up': FileUp,
+  'file-x-2': FileX2,
+  'files': Files,
+  'film': Film,
+  'folder-kanban': FolderKanban,
+  'funnel-x': FunnelX,
+  'git-branch-plus': GitBranchPlus,
+  'git-commit-horizontal': GitCommitHorizontal,
+  'git-fork': GitFork,
+  'graduation-cap': GraduationCap,
+  'grip-vertical': GripVertical,
+  'history': History,
+  'image-off': ImageOff,
+  'image-up': ImageUp,
+  'info': Info,
+  'key-round': KeyRound,
+  'keyboard': Keyboard,
+  'laptop': Laptop,
+  'layers': Layers,
+  'layout-dashboard': LayoutDashboard,
+  'library': Library,
+  'life-buoy': LifeBuoy,
+  'lightbulb': Lightbulb,
+  'link': Link,
+  'link-2-off': Link2Off,
+  'list': List,
+  'list-tree': ListTree,
+  'map-pin': MapPin,
+  'message-circle-question-mark': MessageCircleQuestionMark,
+  'message-square': MessageSquare,
+  'message-square-plus': MessageSquarePlus,
+  'message-square-text': MessageSquareText,
+  'messages-square': MessagesSquare,
+  'minimize-2': Minimize2,
+  'mouse-pointer-click': MousePointerClick,
+  'newspaper': Newspaper,
+  'notebook-pen': NotebookPen,
+  'octagon-pause': OctagonPause,
+  'paperclip': Paperclip,
+  'pen-line': PenLine,
+  'pen-tool': PenTool,
+  'pin-off': PinOff,
+  'plane-takeoff': PlaneTakeoff,
+  'plug-zap': PlugZap,
+  'qr-code': QrCode,
+  'radio': Radio,
+  'refresh-cw': RefreshCw,
+  'rocket': Rocket,
+  'rotate-cw': RotateCw,
+  'scale': Scale,
+  'scan-search': ScanSearch,
+  'scroll-text': ScrollText,
+  'send': Send,
+  'share-2': Share2,
+  'shield': Shield,
+  'shield-check': ShieldCheck,
+  'shield-ellipsis': ShieldEllipsis,
+  'shopping-bag': ShoppingBag,
+  'sliders-horizontal': SlidersHorizontal,
+  'sparkles': Sparkles,
+  'square-pen': SquarePen,
+  'square-slash': SquareSlash,
+  'square-terminal': SquareTerminal,
+  'star': Star,
+  'table-2': Table2,
+  'text-quote': TextQuote,
+  'trash': Trash,
+  'trending-up': TrendingUp,
+  'triangle-alert': TriangleAlert,
+  'trophy': Trophy,
+  'type': Type,
+  'user': User,
+  'user-check': UserCheck,
+  'users': Users,
+  'utensils-crossed': UtensilsCrossed,
+  'variable': Variable,
+  'video': Video,
+  'wand-sparkles': WandSparkles,
+  'zap': Zap,
+  'zap-off': ZapOff,
+  'zoom-in': ZoomIn,
+  'zoom-out': ZoomOut,
+};