@vegastack/design 0.3.1 → 0.4.0

package/bin/verify-registry-item.mjs

@@ -408,6 +408,7 @@ const JAVASCRIPT_LIKE_RE = /\.[cm]?[jt]sx?$/i;
 const SHADCN_TRANSFORMED_FILE_TYPES = new Set([
   "registry:ui",
   "registry:hook",
+  "registry:lib",
   "registry:page",
   "registry:component",
 ]);

package/dist/chunk-LRQSVCP6.js

@@ -0,0 +1,182 @@
+// src/index.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+// src/prose.ts
+var prose = {
+  /** The root's own ink and size — every rule below is relative to this. */
+  root: "text-base text-foreground",
+  // Headings. `scroll-m-20` keeps an anchored heading clear of a sticky header; the weight ladder
+  // caps at 500, which the `text-h*` roles already carry.
+  h1: "[&_h1]:mt-6 [&_h1]:mb-3 [&_h1]:scroll-m-20 [&_h1]:text-h1 [&_h1]:text-foreground [&_h1]:first:mt-0",
+  h2: "[&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:scroll-m-20 [&_h2]:text-h2 [&_h2]:text-foreground [&_h2]:first:mt-0",
+  h3: "[&_h3]:mt-5 [&_h3]:mb-2 [&_h3]:scroll-m-20 [&_h3]:text-h3 [&_h3]:text-foreground [&_h3]:first:mt-0",
+  h4: "[&_h4]:mt-4 [&_h4]:mb-2 [&_h4]:scroll-m-20 [&_h4]:text-h4 [&_h4]:text-foreground [&_h4]:first:mt-0",
+  // h5/h6 leave the display tier and become labels — the type scale has no sixth heading size.
+  h5: "[&_h5]:mt-4 [&_h5]:mb-2 [&_h5]:text-label [&_h5]:text-foreground [&_h5]:first:mt-0",
+  h6: "[&_h6]:mt-4 [&_h6]:mb-2 [&_h6]:text-label [&_h6]:text-muted-foreground [&_h6]:first:mt-0",
+  p: "[&_p]:my-3 [&_p]:leading-relaxed [&_p]:text-foreground [&_p]:first:mt-0 [&_p]:last:mb-0",
+  // Marks. Links are `info` ink per design.md §Colours; `s` is Tiptap's strike element and `del`
+  // is GFM's — the same mark from two producers.
+  a: "[&_a]:font-medium [&_a]:text-info-text [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-info-text/(--alpha-link-hover)",
+  strong: "[&_strong]:font-medium [&_strong]:text-foreground",
+  em: "[&_em]:italic",
+  del: "[&_del]:text-muted-foreground [&_del]:line-through [&_s]:text-muted-foreground [&_s]:line-through",
+  // Lists. A GFM task list carries `contains-task-list` and its checkbox IS the marker, so the
+  // disc goes — expressed as a second, more specific descendant rule rather than a class on the
+  // element, which would lose the cascade (see the header).
+  ul: "[&_ul]:my-3 [&_ul]:ms-6 [&_ul]:list-disc [&_ul]:text-foreground [&_ul]:marker:text-muted-foreground [&_ul.contains-task-list]:list-none",
+  ol: "[&_ol]:my-3 [&_ol]:ms-6 [&_ol]:list-decimal [&_ol]:text-foreground [&_ol]:marker:text-muted-foreground",
+  li: "[&_li]:mt-1.5 [&_li]:leading-relaxed",
+  blockquote: "[&_blockquote]:my-3 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic",
+  // Inline code is a chip. Code inside a `pre` is not: it inherits the panel's ground, so the chip
+  // is undone at higher specificity (`[&_pre_code]` is (0,1,2) against the chip's (0,1,1)).
+  code: "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-base [&_code]:text-foreground",
+  // A bare `<pre>` wears `CodeBlock`'s surface — the same sunken panel, one vocabulary (B4-09).
+  // `CodeBlock`'s own `pre` is excluded: it already sits inside a `figure` carrying the border,
+  // radius and ground, and re-applying them here would draw a second panel inside the first.
+  pre: "[&_pre:not([data-slot='code-block-pre'])]:my-3 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground",
+  preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-code [&_pre_code]:text-foreground",
+  hr: "[&_hr]:my-6 [&_hr]:border-border",
+  // GFM tables. The scroll container is structural and belongs to the consumer (MarkdownView wraps
+  // the table in an `overflow-x-auto` div); these are the cell and rule tokens.
+  table: "[&_table]:w-full [&_table]:border-collapse [&_table]:text-base [&_table]:text-foreground [&_thead]:border-b [&_thead]:border-border [&_tr]:border-b [&_tr]:border-border [&_tr]:last:border-0 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-medium [&_th]:text-foreground [&_td]:px-3 [&_td]:py-2 [&_td]:text-muted-foreground",
+  img: "[&_img]:my-3 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border"
+};
+var proseClassName = Object.values(prose).join(" ");
+
+// src/index.ts
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "label",
+            "label-sm",
+            "code",
+            "code-sm",
+            "mono-label",
+            "display-sm",
+            "display-md",
+            "display-lg",
+            "display-xl"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var surfaceInteractive = "hover:bg-surface-2 active:bg-surface-3";
+var surfaceInteractiveGroup = "group-hover/wash:bg-surface-2 group-active/wash:bg-surface-3";
+var fillInteractive = {
+  foreground: "hover:bg-foreground/(--alpha-hover) active:bg-foreground/(--alpha-pressed)",
+  primary: "hover:bg-primary/(--alpha-hover) active:bg-primary/(--alpha-pressed)",
+  destructive: "hover:bg-destructive/(--alpha-hover) active:bg-destructive/(--alpha-pressed)",
+  success: "hover:bg-success/(--alpha-hover) active:bg-success/(--alpha-pressed)",
+  warning: "hover:bg-warning/(--alpha-hover) active:bg-warning/(--alpha-pressed)",
+  info: "hover:bg-info/(--alpha-hover) active:bg-info/(--alpha-pressed)",
+  brand: "hover:bg-brand/(--alpha-hover) active:bg-brand/(--alpha-pressed)"
+};
+var fieldControl = [
+  "rounded-md border border-input bg-transparent dark:bg-input/(--alpha-input)",
+  "placeholder:text-muted-foreground-faint",
+  "not-disabled:not-data-disabled:hover:border-foreground/(--alpha-border-subtle)",
+  "focus:border-ring/(--alpha-tint-border)",
+  "not-focus:aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus:data-invalid:border-destructive-border/(--alpha-tint-border)",
+  "disabled:cursor-not-allowed disabled:bg-surface-1 disabled:opacity-(--opacity-dim)",
+  "data-disabled:cursor-not-allowed data-disabled:bg-surface-1 data-disabled:opacity-(--opacity-dim)"
+].join(" ");
+var fieldControlGroup = [
+  "rounded-md border border-input bg-transparent dark:bg-input/(--alpha-input)",
+  "not-has-disabled:not-data-disabled:hover:border-foreground/(--alpha-border-subtle)",
+  "focus-within:border-ring/(--alpha-tint-border)",
+  "data-focused:border-ring/(--alpha-tint-border)",
+  // Both the SELF and the DESCENDANT form of the invalid tint (2026-09-09). `has-aria-invalid:` is
+  // a `:has()` over descendants, so a group that carries `aria-invalid` on ITSELF — which is where
+  // `<NumberField aria-invalid />` lands the attribute, on the `[data-field-group]` element —
+  // matched nothing and measured the neutral `--input` border. Inside a `Field` the state arrives
+  // as `data-invalid` on the group and was always correct; this is the standalone path.
+  "not-focus-within:aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus-within:has-aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus-within:data-invalid:border-destructive-border/(--alpha-tint-border)",
+  "has-disabled:cursor-not-allowed has-disabled:bg-surface-1 has-disabled:opacity-(--opacity-dim)",
+  "data-disabled:cursor-not-allowed data-disabled:bg-surface-1 data-disabled:opacity-(--opacity-dim)"
+].join(" ");
+var selectedChipVariants = {
+  /** The muted track the chips sit in — the ladder's well rung. */
+  track: "bg-surface-1",
+  /**
+   * Chrome shared by every chip: a transparent hairline reserved at rest (so selecting adds no
+   * layout shift) and the muted→ink text step.
+   */
+  item: "border border-transparent hover:text-foreground",
+  /** Selected keyed on Base UI's `data-pressed` — Toggle, ToggleGroup, Segmented. */
+  pressed: "not-data-pressed:hover:bg-foreground/(--alpha-hover) not-data-pressed:active:bg-foreground/(--alpha-pressed) data-pressed:border-border data-pressed:bg-foreground/(--alpha-ink-tint) data-pressed:text-foreground data-pressed:hover:bg-foreground/(--alpha-ink-tint-strong) data-pressed:active:bg-foreground/(--alpha-ink-tint)",
+  /** Selected keyed on Base UI's `data-active` — Tabs. */
+  active: "not-data-[active]:hover:bg-foreground/(--alpha-hover) not-data-[active]:active:bg-foreground/(--alpha-pressed) data-[active]:border-border data-[active]:bg-foreground/(--alpha-ink-tint) data-[active]:text-foreground data-[active]:hover:bg-foreground/(--alpha-ink-tint-strong) data-[active]:active:bg-foreground/(--alpha-ink-tint)"
+};
+var TIMINGS = {
+  /** How long transient success feedback holds before reverting (CopyButton "Copied ✓"). */
+  feedbackRevertMs: 1500,
+  /** Debounce before auto-persisting a text field (AutoSaveInput). */
+  autoSaveDebounceMs: 800,
+  /** Hover delay before a rich preview (HoverCard) opens — guards accidental opens. */
+  hoverOpenDelayMs: 700,
+  /** Hover delay before a rich preview closes — lets the pointer travel into the card. */
+  hoverCloseDelayMs: 300,
+  /**
+   * Hover delay before a tooltip opens. A tooltip is a cheap label, not a preview, so it is
+   * deliberately much faster than {@link TIMINGS.hoverOpenDelayMs} — long enough that sweeping
+   * across a toolbar does not flash five tips, short enough that a deliberate hover feels
+   * instant. Base UI's `Tooltip.Provider` grouping then opens adjacent tips with no delay at
+   * all. Set once, in the app-root provider.
+   */
+  tooltipOpenDelayMs: 300,
+  /**
+   * Delay before a tooltip closes. Zero: a tooltip has nothing to travel into (it is not
+   * hoverable content, unlike a HoverCard), so holding it after the pointer leaves only
+   * obscures what the user moved on to.
+   */
+  tooltipCloseDelayMs: 0
+};
+var FLOATING = {
+  sideOffsetAttached: 4,
+  sideOffsetDetached: 8,
+  collisionPadding: 8
+};
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (ref == null) continue;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
+
+export {
+  prose,
+  proseClassName,
+  cn,
+  surfaceInteractive,
+  surfaceInteractiveGroup,
+  fillInteractive,
+  fieldControl,
+  fieldControlGroup,
+  selectedChipVariants,
+  TIMINGS,
+  FLOATING,
+  mergeRefs
+};

package/dist/create-animated-icon.cjs

@@ -0,0 +1,437 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/icons/create-animated-icon.tsx
+var create_animated_icon_exports = {};
+__export(create_animated_icon_exports, {
+  ANIMATED_ICON_RESERVED_KEYS: () => ANIMATED_ICON_RESERVED_KEYS,
+  createAnimatedIcon: () => createAnimatedIcon
+});
+module.exports = __toCommonJS(create_animated_icon_exports);
+var React = __toESM(require("react"), 1);
+var import_react = require("motion/react");
+
+// src/index.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "label",
+            "label-sm",
+            "code",
+            "code-sm",
+            "mono-label",
+            "display-sm",
+            "display-md",
+            "display-lg",
+            "display-xl"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+var fieldControl = [
+  "rounded-md border border-input bg-transparent dark:bg-input/(--alpha-input)",
+  "placeholder:text-muted-foreground-faint",
+  "not-disabled:not-data-disabled:hover:border-foreground/(--alpha-border-subtle)",
+  "focus:border-ring/(--alpha-tint-border)",
+  "not-focus:aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus:data-invalid:border-destructive-border/(--alpha-tint-border)",
+  "disabled:cursor-not-allowed disabled:bg-surface-1 disabled:opacity-(--opacity-dim)",
+  "data-disabled:cursor-not-allowed data-disabled:bg-surface-1 data-disabled:opacity-(--opacity-dim)"
+].join(" ");
+var fieldControlGroup = [
+  "rounded-md border border-input bg-transparent dark:bg-input/(--alpha-input)",
+  "not-has-disabled:not-data-disabled:hover:border-foreground/(--alpha-border-subtle)",
+  "focus-within:border-ring/(--alpha-tint-border)",
+  "data-focused:border-ring/(--alpha-tint-border)",
+  // Both the SELF and the DESCENDANT form of the invalid tint (2026-09-09). `has-aria-invalid:` is
+  // a `:has()` over descendants, so a group that carries `aria-invalid` on ITSELF — which is where
+  // `<NumberField aria-invalid />` lands the attribute, on the `[data-field-group]` element —
+  // matched nothing and measured the neutral `--input` border. Inside a `Field` the state arrives
+  // as `data-invalid` on the group and was always correct; this is the standalone path.
+  "not-focus-within:aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus-within:has-aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus-within:data-invalid:border-destructive-border/(--alpha-tint-border)",
+  "has-disabled:cursor-not-allowed has-disabled:bg-surface-1 has-disabled:opacity-(--opacity-dim)",
+  "data-disabled:cursor-not-allowed data-disabled:bg-surface-1 data-disabled:opacity-(--opacity-dim)"
+].join(" ");
+
+// src/icons/create-animated-icon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function subscribeToReducedMotion(onStoreChange) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+    return () => {
+    };
+  const query = window.matchMedia(REDUCED_MOTION_QUERY);
+  query.addEventListener("change", onStoreChange);
+  return () => query.removeEventListener("change", onStoreChange);
+}
+function readReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+    return false;
+  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+function readReducedMotionOnServer() {
+  return false;
+}
+function useLiveReducedMotion() {
+  const preference = React.useSyncExternalStore(
+    subscribeToReducedMotion,
+    readReducedMotion,
+    readReducedMotionOnServer
+  );
+  const { reducedMotion } = React.useContext(import_react.MotionConfigContext);
+  if (reducedMotion === "always") return true;
+  return preference;
+}
+var TAGS = {
+  circle: "circle",
+  defs: "defs",
+  ellipse: "ellipse",
+  g: "g",
+  line: "line",
+  path: "path",
+  pattern: "pattern",
+  polygon: "polygon",
+  polyline: "polyline",
+  rect: "rect",
+  text: "text",
+  "motion.circle": import_react.motion.circle,
+  "motion.ellipse": import_react.motion.ellipse,
+  "motion.g": import_react.motion.g,
+  "motion.line": import_react.motion.line,
+  "motion.path": import_react.motion.path,
+  "motion.pattern": import_react.motion.pattern,
+  "motion.polygon": import_react.motion.polygon,
+  "motion.polyline": import_react.motion.polyline,
+  "motion.rect": import_react.motion.rect,
+  "motion.text": import_react.motion.text
+};
+var ANIMATED_ICON_RESERVED_KEYS = /* @__PURE__ */ new Set([
+  "animate",
+  "children",
+  "className",
+  "custom",
+  "exit",
+  "group",
+  "inherit",
+  "initial",
+  "style",
+  "tag",
+  "text",
+  "transition",
+  "variants"
+]);
+var ROOT_DEFAULTS = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function isPresence(node) {
+  return typeof node === "object" && node.tag === "presence";
+}
+function isMotionTag(tag) {
+  return tag.startsWith("motion.");
+}
+function asNode(child) {
+  return typeof child === "string" ? { tag: "path", d: child } : child;
+}
+function specUsesControls(spec) {
+  if (spec.start || spec.stop) return true;
+  if (spec.svg?.tag === "motion.svg" && !spec.svg.inherit) return true;
+  const walk = (nodes) => nodes.some((child) => {
+    if (isPresence(child)) return false;
+    const node = asNode(child);
+    if (isMotionTag(node.tag) && !node.inherit && !node.animate) return true;
+    return node.children ? walk(node.children) : false;
+  });
+  return walk(spec.elements);
+}
+function hasPresenceNode(spec) {
+  return spec.elements.some(isPresence);
+}
+function svgAttributes(node) {
+  const attributes = {};
+  for (const [key, value] of Object.entries(node)) {
+    if (ANIMATED_ICON_RESERVED_KEYS.has(key)) continue;
+    if (value !== void 0) attributes[key] = value;
+  }
+  return attributes;
+}
+function renderNode(child, key, controls) {
+  const node = asNode(child);
+  const Tag = TAGS[node.tag];
+  const motionProps = isMotionTag(node.tag) ? {
+    animate: node.animate ?? (node.inherit ? void 0 : controls[node.group ?? "default"]),
+    initial: node.initial,
+    exit: node.exit,
+    variants: node.variants,
+    transition: node.transition,
+    custom: node.custom
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Tag,
+    {
+      ...svgAttributes(node),
+      className: node.className,
+      style: node.style,
+      ...motionProps,
+      children: [
+        node.text,
+        node.children?.map(
+          (grandchild, index) => renderNode(grandchild, index, controls)
+        )
+      ]
+    },
+    key
+  );
+}
+function createAnimatedIcon(spec) {
+  const groupNames = spec.groups ?? ["default"];
+  const usesControls = specUsesControls(spec);
+  const usesPresence = hasPresenceNode(spec);
+  const root = spec.svg ?? {};
+  const rootTag = root.tag ?? "svg";
+  const RootTag = rootTag === "motion.svg" ? import_react.motion.svg : "svg";
+  function AnimatedIconComponent({
+    className,
+    size = "var(--icon-default)",
+    ref,
+    onPointerEnter,
+    onPointerLeave,
+    onPointerDown,
+    onFocus,
+    onBlur,
+    ...props
+  }) {
+    const controlList = groupNames.map(() => (0, import_react.useAnimation)());
+    const shouldReduceMotion = useLiveReducedMotion();
+    const [isActive, setIsActive] = React.useState(false);
+    const reduceRef = React.useRef(shouldReduceMotion);
+    reduceRef.current = shouldReduceMotion;
+    const isControlledRef = React.useRef(false);
+    const timersRef = React.useRef([]);
+    const controls = React.useMemo(
+      () => Object.fromEntries(
+        groupNames.map((name, index) => [name, controlList[index]])
+      ),
+      // Each entry is referentially stable for the life of the component.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      controlList
+    );
+    const clearTimers = React.useCallback(() => {
+      for (const timer of timersRef.current) clearTimeout(timer);
+      timersRef.current = [];
+    }, []);
+    React.useEffect(() => clearTimers, [clearTimers]);
+    const run = React.useCallback(
+      (control2, definition, transition) => {
+        if (reduceRef.current) {
+          control2.stop();
+          return Promise.resolve();
+        }
+        return Promise.resolve(control2.start(definition, transition)).then(
+          () => void 0,
+          () => void 0
+        );
+      },
+      []
+    );
+    const reset = React.useCallback(
+      (control2, definition, transition) => {
+        if (reduceRef.current) {
+          control2.stop();
+          control2.set(definition);
+          return Promise.resolve();
+        }
+        return Promise.resolve(control2.start(definition, transition)).then(
+          () => void 0,
+          () => void 0
+        );
+      },
+      []
+    );
+    const set = React.useCallback(
+      (control2, definition) => {
+        control2.stop();
+        control2.set(definition);
+      },
+      []
+    );
+    const after = React.useCallback(
+      (delayMs, task) => {
+        timersRef.current.push(setTimeout(task, delayMs));
+      },
+      []
+    );
+    const flagsRef = React.useRef({});
+    const control = React.useCallback(
+      (group) => {
+        const index = group ? groupNames.indexOf(group) : 0;
+        return controlList[index === -1 ? 0 : index];
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- stable entries
+      controlList
+    );
+    const choreography = React.useMemo(
+      () => ({
+        control,
+        shouldReduceMotion,
+        run,
+        reset,
+        set,
+        after,
+        flags: flagsRef.current
+      }),
+      [control, shouldReduceMotion, run, reset, set, after]
+    );
+    const primaryControl = control();
+    const startAnimation = React.useCallback(() => {
+      clearTimers();
+      if (usesPresence) setIsActive(!reduceRef.current);
+      if (spec.start) {
+        void spec.start(choreography);
+        return;
+      }
+      if (usesControls) void run(primaryControl, "animate");
+    }, [choreography, clearTimers, run, primaryControl]);
+    const stopAnimation = React.useCallback(() => {
+      clearTimers();
+      if (usesPresence) setIsActive(false);
+      if (spec.stop) {
+        void spec.stop(choreography);
+        return;
+      }
+      if (usesControls) void reset(primaryControl, "normal");
+    }, [choreography, clearTimers, reset, primaryControl]);
+    React.useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return { startAnimation, stopAnimation };
+    });
+    React.useEffect(() => {
+      if (shouldReduceMotion) stopAnimation();
+    }, [shouldReduceMotion, stopAnimation]);
+    const handlePointerEnter = (event) => {
+      onPointerEnter?.(event);
+      if (!isControlledRef.current && event.pointerType !== "touch")
+        startAnimation();
+    };
+    const handlePointerLeave = (event) => {
+      onPointerLeave?.(event);
+      if (!isControlledRef.current && event.pointerType !== "touch")
+        stopAnimation();
+    };
+    const handlePointerDown = (event) => {
+      onPointerDown?.(event);
+      if (!isControlledRef.current && event.pointerType === "touch")
+        startAnimation();
+    };
+    const handleFocus = (event) => {
+      onFocus?.(event);
+      if (!isControlledRef.current) startAnimation();
+    };
+    const handleBlur = (event) => {
+      onBlur?.(event);
+      if (!isControlledRef.current) stopAnimation();
+    };
+    const rootMotionProps = rootTag === "motion.svg" ? {
+      animate: root.animate ?? (root.inherit ? void 0 : controls[root.group ?? "default"]),
+      initial: root.initial,
+      variants: root.variants,
+      transition: root.transition,
+      custom: root.custom
+    } : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: cn(
+          "inline-flex shrink-0 items-center justify-center",
+          className
+        ),
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerDown: handlePointerDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          RootTag,
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: size,
+            height: size,
+            viewBox: root.viewBox ?? ROOT_DEFAULTS.viewBox,
+            fill: root.fill ?? ROOT_DEFAULTS.fill,
+            stroke: root.stroke ?? ROOT_DEFAULTS.stroke,
+            strokeWidth: root.strokeWidth ?? ROOT_DEFAULTS.strokeWidth,
+            strokeLinecap: root.strokeLinecap ?? ROOT_DEFAULTS.strokeLinecap,
+            strokeLinejoin: root.strokeLinejoin ?? ROOT_DEFAULTS.strokeLinejoin,
+            overflow: root.overflow,
+            className: root.className,
+            style: root.style,
+            ...rootMotionProps,
+            children: spec.elements.map((node, index) => {
+              if (!isPresence(node)) return renderNode(node, index, controls);
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.AnimatePresence, { initial: false, mode: "wait", children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Fragment, { children: node.active.map(
+                (child, childIndex) => renderNode(child, childIndex, controls)
+              ) }, `${spec.name}-active`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Fragment, { children: node.rest.map(
+                (child, childIndex) => renderNode(child, childIndex, controls)
+              ) }, `${spec.name}-rest`) }, index);
+            })
+          }
+        )
+      }
+    );
+  }
+  AnimatedIconComponent.displayName = spec.name;
+  return AnimatedIconComponent;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ANIMATED_ICON_RESERVED_KEYS,
+  createAnimatedIcon
+});