@nordmanai/nif 0.2.2 → 0.2.4

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

@@ -1,34 +1,22 @@
-import {
-  useCallback,
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type MouseEvent as ReactMouseEvent,
-  type ReactNode,
-  type Ref,
-} from 'react';
-import { createPortal } from 'react-dom';
+import { useCallback, useRef, useState, type ReactElement, type ReactNode, type Ref } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import {
   NM_DROPDOWN_ALIGN,
   NM_DROPDOWN_CLASSES,
   NM_DROPDOWN_REVEAL,
-  NM_DROPDOWN_SCROLL_IDLE_MS,
   NM_DROPDOWN_TONE,
   NM_DROPDOWN_TRIGGER,
 } from '../../config/nm-dropdown.ts';
-import {
-  dropdownPortalHost,
-  placeNmDropdownPanel,
-  placeNmDropdownRowPanel,
-} from './nm-dropdown-placement';
 import { NordmanIconButton } from '../nordman-icon-button/nordman-icon-button.tsx';
-import { openDropdownBranch, type NmDropdownItem } from './nm-dropdown-item';
-import { findDropdownItem, NmDropdownOptions } from './nm-dropdown-options';
+import type { NmDropdownItem } from './nm-dropdown-item';
+import { findDropdownItem } from './nm-dropdown-options';
+import {
+  NmDropdownMenu,
+  NmDropdownMenuContent,
+  NmDropdownMenuItems,
+  NmDropdownMenuTrigger,
+} from '../nm-dropdown-menu/nm-dropdown-menu.tsx';
 import { NM_ICON_BUTTON_TONES } from '../../config/nm-icon-button.ts';
-import { NmDropdownPanel } from './nm-dropdown-panel';
 import { createLogger } from '../../kit-logger.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 
@@ -92,14 +80,8 @@ function assignTriggerRef(ref: Ref<HTMLButtonElement> | undefined, node: HTMLBut
 }
 
 export function NmDropdown(props: NmDropdownProps): ReactNode {
-  const panelId = useId();
-  const rootRef = useRef<HTMLDivElement>(null);
-  const panelRef = useRef<HTMLUListElement>(null);
   const triggerNodeRef = useRef<HTMLButtonElement | null>(null);
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-  const [expandedIds, setExpandedIds] = useState<readonly string[]>([]);
-  const alignName = props.align === NM_DROPDOWN_ALIGN.end ? 'end' : 'start';
-  const [motionPlacement, setMotionPlacement] = useState(`bottom-${alignName}`);
   const { open: openProp, onOpenChange } = props;
   const open = openProp ?? uncontrolledOpen;
   const setOpen = useCallback(
@@ -119,7 +101,6 @@ export function NmDropdown(props: NmDropdownProps): ReactNode {
   const iconOnlyTrigger = props.iconOnly === true;
   const iconTrigger = isIconTrigger(props.trigger);
   const iconButton = props.trigger === NM_DROPDOWN_TRIGGER.iconButton;
-  const portal = props.portal ?? iconTrigger;
   const triggerClass = [
     NM_DROPDOWN_CLASSES.trigger,
     props.trigger === NM_DROPDOWN_TRIGGER.icon ? NM_DROPDOWN_CLASSES.triggerIcon : '',
@@ -132,201 +113,12 @@ export function NmDropdown(props: NmDropdownProps): ReactNode {
     .filter((value) => value !== '')
     .join(' ');
 
-  useEffect(() => {
-    const panel = panelRef.current;
-    if (!open || panel == null) {
-      return;
-    }
-    let idle = 0;
-    const onScroll = (event: Event) => {
-      const target = event.target;
-      if (!(target instanceof HTMLElement)) {
-        return;
-      }
-      const inSubmenu = target.closest(`.${NM_DROPDOWN_CLASSES.subpanel}`) != null;
-      const inPanel = panel.contains(target);
-      if (!inSubmenu && !inPanel) {
-        return;
-      }
-      if (inPanel && !inSubmenu) {
-        setExpandedIds((current) => (current.length === 0 ? current : []));
-      }
-      target.dataset.scrolling = 'true';
-      window.clearTimeout(idle);
-      idle = window.setTimeout(() => {
-        delete target.dataset.scrolling;
-      }, NM_DROPDOWN_SCROLL_IDLE_MS);
-    };
-    document.addEventListener('scroll', onScroll, true);
-    return () => {
-      document.removeEventListener('scroll', onScroll, true);
-      window.clearTimeout(idle);
-      delete panel.dataset.scrolling;
-    };
-  }, [open]);
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    function onPointer(event: MouseEvent): void {
-      const target = event.target;
-      if (!(target instanceof Node)) {
-        return;
-      }
-      const inSubmenu =
-        target instanceof Element && target.closest(`.${NM_DROPDOWN_CLASSES.subpanel}`) != null;
-      if (rootRef.current?.contains(target) || panelRef.current?.contains(target) || inSubmenu) {
-        return;
-      }
-      setOpen(false);
-      setExpandedIds([]);
-    }
-    function onKey(event: KeyboardEvent): void {
-      if (event.key === 'Escape') {
-        setOpen(false);
-        setExpandedIds([]);
-      }
-    }
-    document.addEventListener('mousedown', onPointer);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onPointer);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [open, setOpen]);
-
-  useLayoutEffect(() => {
-    if (!open || !portal) {
-      return;
-    }
-    function applyPlacement(): void {
-      const trigger = triggerNodeRef.current;
-      const panel = panelRef.current;
-      if (trigger == null || panel == null) {
-        return;
-      }
-      const rect = trigger.getBoundingClientRect();
-      const viewport = { width: window.innerWidth, height: window.innerHeight };
-      const rowEl = props.align === NM_DROPDOWN_ALIGN.row ? trigger.closest('.nm-rail__row') : null;
-      if (rowEl instanceof HTMLElement) {
-        const rowRect = rowEl.getBoundingClientRect();
-        const placement = placeNmDropdownRowPanel({
-          row: {
-            top: rowRect.top,
-            left: rowRect.left,
-            right: rowRect.right,
-            bottom: rowRect.bottom,
-            width: rowRect.width,
-            height: rowRect.height,
-          },
-          panel: { height: panel.offsetHeight },
-          viewport,
-        });
-        panel.style.setProperty('--nm-dropdown-top', `${placement.top}px`);
-        panel.style.setProperty('--nm-dropdown-left', `${placement.left}px`);
-        panel.style.setProperty('--nm-dropdown-right', 'auto');
-        panel.style.setProperty('--nm-dropdown-width', `${placement.width}px`);
-        panel.style.width = `${placement.width}px`;
-        logger.debug('place-row', triggerLabel, placement);
-        return;
-      }
-
-      const placement = placeNmDropdownPanel({
-        trigger: {
-          top: rect.top,
-          left: rect.left,
-          right: rect.right,
-          bottom: rect.bottom,
-          width: rect.width,
-          height: rect.height,
-        },
-        panel: { width: panel.offsetWidth, height: panel.offsetHeight },
-        viewport,
-        align: props.align ?? NM_DROPDOWN_ALIGN.start,
-      });
-      panel.style.removeProperty('--nm-dropdown-width');
-      panel.style.removeProperty('width');
-      panel.style.setProperty('--nm-dropdown-top', `${placement.top}px`);
-      panel.style.setProperty('--nm-dropdown-left', `${placement.left}px`);
-      panel.style.setProperty('--nm-dropdown-right', 'auto');
-      logger.debug('place', triggerLabel, placement);
-    }
-    applyPlacement();
-    window.addEventListener('resize', applyPlacement);
-    window.addEventListener('scroll', applyPlacement, true);
-    return () => {
-      window.removeEventListener('resize', applyPlacement);
-      window.removeEventListener('scroll', applyPlacement, true);
-    };
-  }, [open, portal, props.align, alignName, items.length, expandedIds, triggerLabel]);
-
   logger.debug('render', triggerLabel, { open, items: items.length });
 
-  const panelClass = [
-    NM_DROPDOWN_CLASSES.panel,
-    props.align === NM_DROPDOWN_ALIGN.end ? NM_DROPDOWN_CLASSES.panelEnd : '',
-    props.align === NM_DROPDOWN_ALIGN.row ? NM_DROPDOWN_CLASSES.panelRow : '',
-    portal ? NM_DROPDOWN_CLASSES.panelPortal : '',
-  ]
-    .filter((value) => value !== '')
-    .join(' ');
-
-  const panel = (
-    <NmDropdownPanel
-      open={open}
-      placement={motionPlacement}
-      className={panelClass}
-      id={panelId}
-      label={props.label}
-      panelRef={panelRef}
-    >
-      <NmDropdownOptions
-        items={items}
-        selected={props.selected}
-        expandedIds={expandedIds}
-        onOpenBranch={(id) => {
-          setExpandedIds((current) => {
-            const next = openDropdownBranch(items, id);
-            const same =
-              next.length === current.length &&
-              next.every((value, index) => value === current[index]);
-            if (same) {
-              return current;
-            }
-            logger.debug('hover', id);
-            props.onBranchExpand?.(id);
-            return next;
-          });
-        }}
-        onCloseBranches={() => {
-          setExpandedIds((current) => (current.length === 0 ? current : []));
-        }}
-        onSelect={(id) => {
-          logger.debug('select', id);
-          props.onSelect?.(id);
-          setOpen(false);
-          setExpandedIds([]);
-        }}
-      />
-    </NmDropdownPanel>
-  );
-
   const bindTrigger = (node: HTMLButtonElement | null) => {
     triggerNodeRef.current = node;
     assignTriggerRef(props.triggerRef, node);
   };
-  const toggle = (event: ReactMouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-    if (!open) {
-      const rect = triggerNodeRef.current?.getBoundingClientRect();
-      if (rect != null) {
-        const side = rect.bottom + 120 > window.innerHeight ? 'top' : 'bottom';
-        setMotionPlacement(`${side}-${alignName}`);
-      }
-    }
-    setOpen(!open);
-  };
 
   const rootClass = [
     NM_DROPDOWN_CLASSES.root,
@@ -335,7 +127,7 @@ export function NmDropdown(props: NmDropdownProps): ReactNode {
     .filter((value) => value !== '')
     .join(' ');
 
-  let triggerElement: JSX.Element;
+  let triggerElement: ReactElement;
   if (props.trigger === NM_DROPDOWN_TRIGGER.icon) {
     triggerElement = (
       <NordmanIconButton
@@ -344,11 +136,7 @@ export function NmDropdown(props: NmDropdownProps): ReactNode {
         imageSrc={props.imageSrc}
         tone={NM_ICON_BUTTON_TONES.quiet}
         disabled={props.disabled}
-        expanded={open}
-        popup="listbox"
-        controls={panelId}
         ref={bindTrigger}
-        onClick={toggle}
       />
     );
   } else if (iconButton) {
@@ -357,40 +145,22 @@ export function NmDropdown(props: NmDropdownProps): ReactNode {
         glyph={props.icon ?? 'ellipsis'}
         label={props.label}
         className={props.triggerClassName}
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        aria-controls={panelId}
+        disabled={props.disabled}
         ref={bindTrigger}
-        onClick={toggle}
       />
     );
   } else {
     triggerElement = (
-      <button
-        className={triggerClass}
-        type="button"
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        aria-controls={panelId}
-        aria-label={props.label}
-        ref={bindTrigger}
-        onClick={toggle}
-      >
+      <button className={triggerClass} type="button" aria-label={props.label} disabled={props.disabled} ref={bindTrigger}>
         {iconOnlyTrigger ? (
-          dropdownGlyph(
-            props.imageSrc,
-            iconOnlyTrigger ? (leadIcon ?? props.icon ?? 'ellipsis') : (props.icon ?? 'ellipsis'),
-            iconOnlyTrigger ? NM_DROPDOWN_CLASSES.lead : undefined,
-          )
+          dropdownGlyph(props.imageSrc, leadIcon ?? props.icon ?? 'ellipsis', NM_DROPDOWN_CLASSES.lead)
         ) : (
           <>
             {dropdownGlyph(props.imageSrc, leadIcon, NM_DROPDOWN_CLASSES.lead)}
             <span className={NM_DROPDOWN_CLASSES.label}>{triggerLabel}</span>
           </>
         )}
-        {chip || iconTrigger ? null : (
-          <NmIcon id="chevron" className={NM_DROPDOWN_CLASSES.chevron} />
-        )}
+        {chip || iconTrigger ? null : <NmIcon id="chevron" className={NM_DROPDOWN_CLASSES.chevron} />}
       </button>
     );
   }
@@ -398,15 +168,24 @@ export function NmDropdown(props: NmDropdownProps): ReactNode {
   return (
     <div
       className={rootClass}
-      ref={rootRef}
       data-testid={props.testId}
       data-open={open ? 'true' : undefined}
       data-reveal={props.reveal}
     >
-      {triggerElement}
-      {portal && typeof document !== 'undefined'
-        ? createPortal(panel, dropdownPortalHost(props.portalRoot, triggerNodeRef.current))
-        : panel}
+      <NmDropdownMenu open={open} onOpenChange={setOpen}>
+        <NmDropdownMenuTrigger render={triggerElement} />
+        <NmDropdownMenuContent align={props.align === NM_DROPDOWN_ALIGN.end ? 'end' : 'start'}>
+          <NmDropdownMenuItems
+            items={items}
+            selected={props.selected}
+            onBranchExpand={props.onBranchExpand}
+            onSelect={(id) => {
+              logger.debug('select', id);
+              props.onSelect?.(id);
+            }}
+          />
+        </NmDropdownMenuContent>
+      </NmDropdownMenu>
     </div>
   );
 }

package/registry/ui/components/nm-dropdown-menu/nm-dropdown-menu.css

@@ -10,6 +10,7 @@
     flex-direction: column;
     gap: var(--nm-space-2);
     min-width: var(--nm-width-menu);
+    max-width: min(var(--nm-width-menu-max), calc(100vw - var(--nm-space-16) * 2));
     max-height: var(--available-height);
     padding: var(--nm-list-pad);
     overflow-x: hidden;
@@ -29,6 +30,13 @@
     opacity: 0;
   }
 
+  .nm-menu__item-text {
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .nm-menu__label {
     padding: var(--nm-space-6) var(--nm-icon-pad);
     color: var(--nm-fg-subtle);

package/registry/ui/components/nm-dropdown-menu/nm-dropdown-menu.tsx

@@ -1,7 +1,11 @@
-import type { ComponentProps } from 'react';
-import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { createContext, useContext, type ComponentProps } from 'react';
+import { AnimateIcon, Menu as MenuPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import type { NmDropdownItem } from '../nm-dropdown/nm-dropdown-item.ts';
+
+/** Set inside a group, where Base UI lets a label name that group. */
+const InGroup = createContext(false);
 
 /** Base UI Menu, in the shadcn dropdown-menu composition, styled by NIF tokens. */
 export function NmDropdownMenu(props: MenuPrimitive.Root.Props) {
@@ -32,11 +36,21 @@ export function NmDropdownMenuContent({
 }
 
 export function NmDropdownMenuGroup(props: MenuPrimitive.Group.Props) {
-  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+  return (
+    <InGroup.Provider value>
+      <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+    </InGroup.Provider>
+  );
 }
 
+/** A heading in the menu. Inside a group it names the group. On its own it is a plain heading, and never breaks the menu. */
 export function NmDropdownMenuLabel({ className, ...props }: MenuPrimitive.GroupLabel.Props) {
-  return <MenuPrimitive.GroupLabel data-slot="dropdown-menu-label" className={nmClass('nm-menu__label', className as string)} {...props} />;
+  const classes = nmClass('nm-menu__label', className as string);
+  return useContext(InGroup) ? (
+    <MenuPrimitive.GroupLabel data-slot="dropdown-menu-label" className={classes} {...props} />
+  ) : (
+    <div role="presentation" data-slot="dropdown-menu-label" className={classes} {...(props as ComponentProps<'div'>)} />
+  );
 }
 
 export function NmDropdownMenuItem({
@@ -44,7 +58,11 @@ export function NmDropdownMenuItem({
   variant = 'default',
   ...props
 }: MenuPrimitive.Item.Props & { variant?: 'default' | 'destructive' }) {
-  return <MenuPrimitive.Item data-slot="dropdown-menu-item" data-variant={variant} className={nmClass('nm-menu__item', className as string)} {...props} />;
+  return (
+    <AnimateIcon animateOnHover asChild>
+      <MenuPrimitive.Item data-slot="dropdown-menu-item" data-variant={variant} className={nmClass('nm-menu__item', className as string)} {...props} />
+    </AnimateIcon>
+  );
 }
 
 export function NmDropdownMenuSub(props: MenuPrimitive.SubmenuRoot.Props) {
@@ -78,7 +96,11 @@ export function NmDropdownMenuCheckboxItem({ className, children, ...props }: Me
 }
 
 export function NmDropdownMenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {
-  return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+  return (
+    <InGroup.Provider value>
+      <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
+    </InGroup.Provider>
+  );
 }
 
 export function NmDropdownMenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props) {
@@ -116,3 +138,60 @@ export function NmDropdownMenuText({ title, description }: { title: string; desc
 export function NmDropdownMenuDot({ status }: { status?: 'ok' | 'error' }) {
   return <span className="nm-menu__dot" data-status={status} aria-hidden="true" />;
 }
+
+function itemBody(item: NmDropdownItem) {
+  return (
+    <>
+      {item.icon ? <NmIcon id={item.icon} /> : null}
+      <span className="nm-menu__item-text">{item.label}</span>
+      {item.detail ? <span className="nm-menu__description">{item.detail}</span> : null}
+      {item.shortcut ? <NmDropdownMenuShortcut>{item.shortcut}</NmDropdownMenuShortcut> : null}
+    </>
+  );
+}
+
+/** A list of NmDropdownItem as animated menu rows: branches become submenus, `checked` rows keep a mark. */
+export function NmDropdownMenuItems({
+  items,
+  selected,
+  onSelect,
+  onBranchExpand,
+}: {
+  items: readonly NmDropdownItem[];
+  selected?: string | null;
+  onSelect?: (id: string) => void;
+  onBranchExpand?: (id: string) => void;
+}) {
+  return (
+    <>
+      {items.map((item, index) => {
+        if (item.separator === true) {
+          return <NmDropdownMenuSeparator key={`${item.id}-${index}`} />;
+        }
+        if (item.children != null && item.children.length > 0) {
+          return (
+            <NmDropdownMenuSub key={item.id}>
+              <NmDropdownMenuSubTrigger disabled={item.disabled} onMouseEnter={() => onBranchExpand?.(item.id)} onFocus={() => onBranchExpand?.(item.id)}>{itemBody(item)}</NmDropdownMenuSubTrigger>
+              <NmDropdownMenuSubContent>
+                <NmDropdownMenuItems items={item.children} selected={selected} onSelect={onSelect} onBranchExpand={onBranchExpand} />
+              </NmDropdownMenuSubContent>
+            </NmDropdownMenuSub>
+          );
+        }
+        const checked = item.checked ?? (selected != null ? item.id === selected : undefined);
+        if (checked !== undefined) {
+          return (
+            <NmDropdownMenuCheckboxItem key={item.id} checked={checked} disabled={item.disabled} onClick={() => onSelect?.(item.id)}>
+              {itemBody(item)}
+            </NmDropdownMenuCheckboxItem>
+          );
+        }
+        return (
+          <NmDropdownMenuItem key={item.id} variant={item.danger ? 'destructive' : 'default'} disabled={item.disabled} onClick={() => onSelect?.(item.id)}>
+            {itemBody(item)}
+          </NmDropdownMenuItem>
+        );
+      })}
+    </>
+  );
+}

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

@@ -28,6 +28,7 @@ import { NmCombobox, NmComboboxContent, NmComboboxEmpty, NmComboboxInput, NmComb
 import { NmSelect, NmSelectContent, NmSelectItem, NmSelectTrigger, NmSelectValue } from '../nm-select/nm-select.tsx';
 import { NmColorSwatch } from '../nm-color-picker/nm-color-picker.tsx';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import { NmTextarea } from '../nm-textarea/nm-textarea.tsx';
 
 const logger = createLogger('interface-nm-field');
 
@@ -76,6 +77,8 @@ export type NmFieldProps = {
   onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
   onFocus?: () => void;
   onBlur?: () => void;
+  openInPanel?: boolean;
+  panelTitle?: string;
 };
 
 function OptionSwatches(props: { colors?: readonly string[] }): ReactNode {
@@ -290,7 +293,9 @@ function StackControl(
     );
   } else if (props.kind === NM_FIELD_KINDS.area) {
     editor = (
-      <textarea
+      <NmTextarea
+        variant={props.openInPanel ? 'panel' : 'default'}
+        panelTitle={props.panelTitle ?? props.caption ?? props.label}
         className={NM_FIELD_CLASSES.control}
         id={props.controlId}
         name={props.name}

package/registry/ui/components/nm-hover-card/nm-hover-card.tsx

@@ -1,4 +1,4 @@
-import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+import { PreviewCard as PreviewCardPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 /** Base UI Preview Card, in the shadcn hover-card composition, styled by NIF tokens. */

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

@@ -0,0 +1,109 @@
+/* From Animate UI's registry (icons-lucide-activity), 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 ActivityProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+      },
+      animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+          opacity: { duration: 0.01 },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-return': {
+    path: {
+      initial: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+      },
+      animate: {
+        opacity: [0, 1, 1, 1],
+        pathLength: [0, 1, 0, 1],
+        pathOffset: [1, 0, 0.01, 0],
+        transition: {
+          duration: 2.5,
+          ease: 'easeInOut',
+          opacity: { duration: 0.01 },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path: {
+      initial: {
+        opacity: 1,
+        pathLength: 1,
+        pathOffset: 0,
+      },
+      animate: {
+        opacity: [0, 1, 1, 1, 1],
+        pathLength: [0, 1, 0, 1, 0],
+        pathOffset: [1, 0, 0.01, 0, 0.999],
+        transition: {
+          duration: 3,
+          ease: 'easeInOut',
+          repeat: Infinity,
+          repeatType: 'loop',
+          opacity: { duration: 0.01 },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ActivityProps) {
+  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="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Activity(props: ActivityProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Activity as ActivityAnimated };