@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-54nf2x99.js

@@ -0,0 +1,293 @@
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  GooIndicator
+} from "./components-kf2ehztc.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/radio-group/index.tsx
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+  const ctx = useContext(RadioGroupContext);
+  if (!ctx)
+    throw new Error("useRadioGroup must be used within a RadioGroup");
+  return ctx;
+}
+var RadioGroup = forwardRef(({
+  children,
+  selectedIndex: selectedIndexProp,
+  defaultSelectedIndex,
+  onSelectedIndexChange,
+  value: valueProp,
+  defaultValue,
+  onValueChange: onValueChangeProp,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const [selectedIndex, selectIndex] = useControllableState(selectedIndexProp, defaultSelectedIndex, onSelectedIndexChange);
+  const [value, onValueChange] = useControllableState(valueProp, defaultValue, onValueChangeProp);
+  const containerRef = useRef(null);
+  const childValues = Children.toArray(children).filter(isValidElement).map((child) => child.props.value);
+  const hover = useFluidHover(containerRef);
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const resolvedSelectedIndex = value !== undefined ? childValues.findIndex((childValue) => childValue === value) : selectedIndex ?? -1;
+  const hasSelection = resolvedSelectedIndex >= 0 || Children.toArray(children).filter(isValidElement).some((child) => child.props.selected === true);
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const selectedRect = resolvedSelectedIndex >= 0 ? itemRects[resolvedSelectedIndex] : null;
+  const shape = useShape();
+  const content = /* @__PURE__ */ jsxs("div", {
+    ref: (node) => {
+      containerRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    onMouseEnter: handlers.onMouseEnter,
+    onMouseMove: handlers.onMouseMove,
+    onMouseLeave: handlers.onMouseLeave,
+    onClick: handlers.onClick,
+    onFocus: (e) => {
+      const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+      if (indexAttr != null) {
+        const idx = Number(indexAttr);
+        setActiveIndex(idx);
+        setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+      }
+    },
+    onBlur: (e) => {
+      if (containerRef.current?.contains(e.relatedTarget))
+        return;
+      setFocusedIndex(null);
+      setActiveIndex(null);
+    },
+    onKeyDown: (e) => {
+      const items = Array.from(containerRef.current?.querySelectorAll("[data-fluid-hover-index]") ?? []);
+      const currentIdx = items.indexOf(e.target);
+      if (currentIdx === -1)
+        return;
+      const preventBaseUI = e.preventBaseUIHandler;
+      if (["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(e.key)) {
+        e.preventDefault();
+        preventBaseUI?.();
+        const next = ["ArrowDown", "ArrowRight"].includes(e.key) ? (currentIdx + 1) % items.length : (currentIdx - 1 + items.length) % items.length;
+        items[next]?.focus();
+        items[next]?.click();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        preventBaseUI?.();
+        items[0]?.focus();
+        items[0]?.click();
+      } else if (e.key === "End") {
+        e.preventDefault();
+        preventBaseUI?.();
+        items[items.length - 1]?.focus();
+        items[items.length - 1]?.click();
+      }
+    },
+    role: "radiogroup",
+    className: cn("relative flex flex-col w-72 max-w-full select-none", className),
+    ...props,
+    children: [
+      selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+        rect: selectedRect,
+        className: cn("bg-active", shape.bg)
+      }),
+      /* @__PURE__ */ jsx(FluidHoverHighlight, {
+        hover,
+        className: shape.bg
+      }),
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        children: focusRect && /* @__PURE__ */ jsx(motion.div, {
+          className: `absolute ${shape.focusRing} pointer-events-none z-20 border border-focus-ring`,
+          initial: false,
+          animate: {
+            left: focusRect.left - 2,
+            top: focusRect.top - 2,
+            width: focusRect.width + 4,
+            height: focusRect.height + 4
+          },
+          exit: { opacity: 0, transition: spring.fast.exit },
+          transition: {
+            ...spring.fast,
+            opacity: { duration: spring.fast.duration }
+          }
+        })
+      }),
+      children
+    ]
+  });
+  const withSize = (node) => size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: node
+  }) : node;
+  if (value !== undefined) {
+    return withSize(/* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+      value: {
+        registerItem,
+        activeIndex,
+        selectedIndex: resolvedSelectedIndex >= 0 ? resolvedSelectedIndex : null,
+        selectedValue: value,
+        onValueChange,
+        hasSelection,
+        selectIndex
+      },
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive, {
+        value,
+        onValueChange: (v) => onValueChange(v),
+        render: content
+      })
+    }));
+  }
+  return withSize(/* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+    value: {
+      registerItem,
+      activeIndex,
+      selectedIndex: selectedIndex ?? null,
+      hasSelection,
+      selectIndex
+    },
+    children: content
+  }));
+});
+RadioGroup.displayName = "RadioGroup";
+var RadioItem = forwardRef(({ label, index, selected, onSelect, value, className, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const hasMounted = useRef(false);
+  const { registerItem, activeIndex, selectedIndex, selectedValue, onValueChange, hasSelection, selectIndex } = useRadioGroupContext();
+  useRegisterFluidHoverItem(registerItem, index, internalRef);
+  useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+  const isActive = activeIndex === index;
+  const skipAnimation = !hasMounted.current;
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  const isSelected = value !== undefined && selectedValue !== undefined ? selectedValue === value : selected ?? selectedIndex === index;
+  const handleSelect = () => {
+    if (value !== undefined) {
+      onValueChange?.(value);
+    }
+    onSelect?.();
+    selectIndex(index);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    "data-fluid-hover-index": index,
+    tabIndex: isSelected ? 0 : !hasSelection && index === 0 ? 0 : -1,
+    role: "radio",
+    "aria-checked": isSelected,
+    "aria-label": label,
+    onClick: handleSelect,
+    onMouseDown: (e) => {
+      const interactive = e.target.closest('button:not([tabindex="-1"]), a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (interactive && interactive !== e.currentTarget)
+        return;
+      e.preventDefault();
+      e.currentTarget.focus();
+    },
+    onKeyDown: (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        handleSelect();
+      }
+    },
+    className: cn(`relative z-10 flex ${sizeClasses.control} items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} cursor-pointer outline-none`, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: cn("relative shrink-0", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: cn("absolute inset-0 rounded-full border-solid transition-all duration-fast", isSelected ? "border-[1.5px] border-transparent" : isActive ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
+          }),
+          /* @__PURE__ */ jsx(AnimatePresence, {
+            children: isSelected && /* @__PURE__ */ jsx(motion.div, {
+              className: "absolute inset-0 flex items-center justify-center",
+              initial: {
+                opacity: skipAnimation ? 1 : 0,
+                scale: skipAnimation ? 1 : 0.3
+              },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.3, transition: { duration: 0.04 } },
+              transition: spring.fast,
+              children: /* @__PURE__ */ jsx("div", {
+                className: cn("rounded-full bg-foreground", compact ? "w-[7px] h-[7px]" : "w-[8px] h-[8px]")
+              })
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: cn("inline-grid", sizeClasses.text),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold",
+            "aria-hidden": "true",
+            children: label
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: cn("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", isSelected || isActive ? "text-foreground" : "text-muted-foreground", isSelected ? "weight-semibold" : "weight-normal"),
+            children: label
+          })
+        ]
+      }),
+      value !== undefined && /* @__PURE__ */ jsx(RadioPrimitive.Root, {
+        value,
+        className: "sr-only",
+        tabIndex: -1,
+        "aria-hidden": true
+      })
+    ]
+  });
+});
+RadioItem.displayName = "RadioItem";
+Object.assign(RadioGroup, { Item: RadioItem });
+var radio_group_default = RadioGroup;
+
+export { RadioGroup, RadioItem, radio_group_default };

package/dist/shared/components-5pkcfprd.js

@@ -0,0 +1,232 @@
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSizeVariant
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/button/index.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useLayoutEffect,
+  useRef
+} from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var buttonVariants = cva([
+  "group relative isolate inline-flex items-center justify-center outline-none cursor-pointer",
+  "transition-[color,opacity] duration-fast",
+  "disabled:opacity-50 disabled:pointer-events-none",
+  "focus-visible:ring-1 focus-visible:ring-focus-ring"
+], {
+  variants: {
+    variant: {
+      primary: "text-background",
+      secondary: "text-foreground",
+      tertiary: "text-foreground",
+      ghost: "text-muted-foreground hover:text-foreground"
+    },
+    size: {
+      default: "h-9 px-4 text-body gap-1.5",
+      compact: "h-7 px-3 text-body-compact gap-1",
+      icon: "h-9 w-9 p-0 [&_svg]:h-4 [&_svg]:w-4",
+      "icon-compact": "h-7 w-7 p-0 [&_svg]:h-3.5 [&_svg]:w-3.5"
+    },
+    iconLeft: { true: "" },
+    iconRight: { true: "" }
+  },
+  compoundVariants: [
+    { size: "compact", iconLeft: true, className: "pl-2" },
+    { size: "default", iconLeft: true, className: "pl-3" },
+    { size: "compact", iconRight: true, className: "pr-2" },
+    { size: "default", iconRight: true, className: "pr-3" }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    size: "default"
+  }
+});
+var legacySizeAliases = {
+  sm: "compact",
+  md: "default",
+  lg: "default",
+  "icon-sm": "icon-compact",
+  "icon-lg": "icon"
+};
+var bgVariants = {
+  primary: "[--btn-bg:var(--foreground)] group-hover:[--btn-bg:color-mix(in_oklab,var(--foreground)_90%,var(--background))] group-active:[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
+  secondary: "[--btn-bg:var(--accent)] group-hover:[--btn-bg:color-mix(in_oklab,var(--accent)_80%,var(--background))] group-active:[--btn-bg:var(--accent)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
+  tertiary: "bg-transparent shadow-[0_0_0_1px_var(--border),inset_0_0_0_0px_var(--border)] group-hover:bg-hover group-active:bg-active group-active:shadow-[0_0_0_0px_var(--border),inset_0_0_0_1px_var(--border)]",
+  ghost: "bg-transparent shadow-[0_0_0_1px_transparent] group-hover:bg-hover group-hover:shadow-[0_0_0_1px_var(--hover)] group-active:bg-active group-active:shadow-[0_0_0_0px_var(--active)]"
+};
+var activeBgVariants = {
+  primary: "[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
+  secondary: "[--btn-bg:var(--accent)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]",
+  tertiary: "bg-active shadow-[0_0_0_1px_var(--border),inset_0_0_0_0px_var(--border)] group-active:shadow-[0_0_0_0px_var(--border),inset_0_0_0_1px_var(--border)]",
+  ghost: "bg-active shadow-[0_0_0_1px_var(--active)] group-active:shadow-[0_0_0_0px_var(--active)]"
+};
+var { exit: _exit, ...enter } = spring.moderate;
+function useLoadingMorph(loading) {
+  const surface = useRef(null);
+  const progress = useMotionValue(loading ? 1 : 0);
+  const reduced = useReduceMotion();
+  useLayoutEffect(() => {
+    const el = surface.current;
+    const root = el?.parentElement;
+    if (!el || !root || !loading && progress.get() === 0)
+      return;
+    const height = root.offsetHeight;
+    const circle = height / 2 - 1;
+    const rest = Math.min(Number.parseFloat(getComputedStyle(root).borderTopLeftRadius) || 0, circle);
+    const render = (p) => {
+      const side = `calc(${50 * p}% + ${1 - height / 2 * p}px)`;
+      el.style.left = side;
+      el.style.right = side;
+      el.style.borderRadius = `${rest + (circle - rest) * p}px`;
+    };
+    const settle = () => el.removeAttribute("style");
+    const target = loading ? 1 : 0;
+    if (reduced || progress.get() === target) {
+      progress.jump(target);
+      return loading ? render(1) : settle();
+    }
+    const controls = animate(progress, target, {
+      ...enter,
+      onUpdate: render,
+      onComplete: loading ? undefined : settle
+    });
+    return () => controls.stop();
+  }, [loading, reduced]);
+  return surface;
+}
+var Button = forwardRef(({
+  className,
+  variant,
+  size,
+  asChild = false,
+  loading = false,
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  active = false,
+  disabled,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const asChildElement = asChild && isValidElement(children) ? children : null;
+  const label = asChildElement ? asChildElement.props.children : children;
+  const contextSize = useSizeVariant();
+  const resolvedSize = size ? legacySizeAliases[size] ?? size : contextSize === "compact" ? "compact" : "default";
+  const isIconOnly = resolvedSize === "icon" || resolvedSize === "icon-compact";
+  const isCompact = resolvedSize === "compact" || resolvedSize === "icon-compact";
+  const iconSize = isCompact ? 14 : 16;
+  const spinnerSizeClass = isCompact ? "h-7 w-7" : "h-9 w-9";
+  const shape = useShape();
+  const bgClass = active ? activeBgVariants[variant ?? "primary"] : bgVariants[variant ?? "primary"];
+  const surface = useLoadingMorph(loading);
+  const internals = /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        ref: surface,
+        "aria-hidden": true,
+        className: cn("absolute inset-px rounded-[inherit] transition-[box-shadow,background-color] [transition-duration:180ms,80ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1),ease] group-active:[transition-duration:80ms,80ms]", bgClass)
+      }),
+      /* @__PURE__ */ jsx(motion.span, {
+        className: "relative inline-flex items-center justify-center gap-[inherit]",
+        initial: false,
+        animate: { opacity: loading ? 0 : 1 },
+        transition: loading ? spring.fast.exit : enter,
+        children: isIconOnly ? /* @__PURE__ */ jsx("span", {
+          className: "[&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast group-hover:[&_svg]:stroke-[2]",
+          children: label
+        }) : /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            LeadingIcon && /* @__PURE__ */ jsx(LeadingIcon, {
+              size: iconSize,
+              strokeWidth: 1.5,
+              className: "transition-[stroke-width] duration-fast group-hover:stroke-[2]"
+            }),
+            /* @__PURE__ */ jsx("span", {
+              className: "[text-box:trim-both_cap_alphabetic]",
+              children: label
+            }),
+            TrailingIcon && /* @__PURE__ */ jsx(TrailingIcon, {
+              size: iconSize,
+              strokeWidth: 1.5,
+              className: "transition-[stroke-width] duration-fast group-hover:stroke-[2]"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        initial: false,
+        children: loading && /* @__PURE__ */ jsx(motion.span, {
+          "aria-hidden": true,
+          className: "absolute inset-0 flex items-center justify-center",
+          initial: { opacity: 0, scale: 0.6 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.6, transition: spring.fast.exit },
+          transition: enter,
+          children: /* @__PURE__ */ jsx("svg", {
+            className: spinnerSizeClass,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsx("path", {
+              d: "M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z",
+              stroke: "currentColor",
+              strokeWidth: "1.125",
+              strokeLinecap: "round",
+              pathLength: "100",
+              style: {
+                strokeDasharray: "15 85",
+                animation: "spinner-move 2s linear infinite, spinner-dash 4s ease-in-out infinite"
+              }
+            })
+          })
+        }, "spinner")
+      })
+    ]
+  });
+  const rootClassName = cn(buttonVariants({
+    variant,
+    size: resolvedSize,
+    iconLeft: !isIconOnly && !!LeadingIcon,
+    iconRight: !isIconOnly && !!TrailingIcon
+  }), shape.button, className);
+  if (asChildElement) {
+    const childProps = asChildElement.props;
+    return cloneElement(asChildElement, {
+      ...props,
+      ref,
+      "aria-busy": loading || undefined,
+      className: cn(rootClassName, childProps.className),
+      style: { ...style, ...childProps.style }
+    }, internals);
+  }
+  return /* @__PURE__ */ jsx(ButtonPrimitive, {
+    ref,
+    className: rootClassName,
+    disabled: disabled || loading,
+    "aria-busy": loading || undefined,
+    style,
+    ...props,
+    children: internals
+  });
+});
+Button.displayName = "Button";
+var button_default = Button;
+
+export { buttonVariants, Button, button_default };

package/dist/shared/components-5vxtcp88.js

@@ -0,0 +1,9 @@
+// lib/slot.ts
+import { isValidElement } from "react";
+function slotRender(render, asChild, children) {
+  if (render)
+    return render;
+  return asChild && isValidElement(children) ? children : undefined;
+}
+
+export { slotRender };

package/dist/shared/components-5zry9te1.js

@@ -0,0 +1,152 @@
+import {
+  GooFilter
+} from "./components-jxgznftn.js";
+import {
+  GOO_BLUR_RATIO
+} from "./components-7nww01w4.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/thinking-indicator/index.tsx
+import { AnimatePresence, motion } from "motion/react";
+import { forwardRef, useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var circleA = "M 12 8 C 14.21 8 16 9.79 16 12 C 16 14.21 14.21 16 12 16 C 9.79 16 8 14.21 8 12 C 8 9.79 9.79 8 12 8 Z";
+var infinity = "M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z";
+var circleB = "M 12 16 C 14.21 16 16 14.21 16 12 C 16 9.79 14.21 8 12 8 C 9.79 8 8 9.79 8 12 C 8 14.21 9.79 16 12 16 Z";
+var words = ["Thinking", "Moonwalking", "Planning", "Refining"];
+var DOTS = {
+  default: { box: "h-5 w-[26px]", dot: "size-1.5", radius: 3, gap: 10 },
+  compact: { box: "h-[18px] w-[23px]", dot: "size-[5px]", radius: 2.5, gap: 9 }
+};
+var MERGED = Math.sqrt(3);
+function GooDots({ step, still }) {
+  const gooId = `thinking-goo-${useId().replace(/:/g, "")}`;
+  const { box, dot, radius, gap } = DOTS[step];
+  const loop = { duration: spring.slow.duration * 8, ease: "easeInOut", repeat: Infinity };
+  return /* @__PURE__ */ jsxs("span", {
+    "aria-hidden": true,
+    className: cn("relative shrink-0", box),
+    children: [
+      /* @__PURE__ */ jsx(GooFilter, {
+        id: gooId,
+        blur: radius * GOO_BLUR_RATIO
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "absolute inset-0 flex items-center justify-center",
+        style: { filter: `url(#${gooId})` },
+        children: [-1, 0, 1].map((side) => /* @__PURE__ */ jsx(motion.span, {
+          className: cn("absolute rounded-full bg-muted-foreground", dot),
+          animate: still ? { x: side * gap } : side ? { x: [side * gap, 0, side * gap] } : { scale: [1, MERGED, 1] },
+          transition: still ? { duration: 0 } : loop
+        }, side))
+      })
+    ]
+  });
+}
+var ThinkingIndicator = forwardRef(({ className, variant = "shimmer", showIcon = true, size, ...props }, ref) => {
+  const step = useSize(size).variant;
+  const compactStep = step === "compact";
+  const [index, setIndex] = useState(0);
+  const reduceMotion = useReduceMotion();
+  const label = variant === "goo" ? "text-muted-foreground" : "shimmer-text";
+  useEffect(() => {
+    if (reduceMotion)
+      return;
+    const interval = setInterval(() => {
+      setIndex((i) => (i + 1) % words.length);
+    }, 4000);
+    return () => clearInterval(interval);
+  }, [reduceMotion]);
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    role: "status",
+    className: cn("flex items-center gap-2 px-3 py-2", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "sr-only",
+        children: "Thinking…"
+      }),
+      showIcon && variant === "goo" && /* @__PURE__ */ jsx(GooDots, {
+        step,
+        still: reduceMotion
+      }),
+      showIcon && variant === "shimmer" && /* @__PURE__ */ jsx(motion.svg, {
+        "aria-hidden": true,
+        width: compactStep ? 18 : 20,
+        height: compactStep ? 18 : 20,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "text-muted-foreground shrink-0",
+        children: reduceMotion ? /* @__PURE__ */ jsx("path", {
+          d: infinity
+        }) : /* @__PURE__ */ jsx(motion.path, {
+          d: circleA,
+          initial: { d: circleA },
+          animate: {
+            d: [circleA, infinity, circleB, infinity, circleA]
+          },
+          transition: {
+            d: {
+              duration: 6,
+              ease: "easeInOut",
+              repeat: Infinity,
+              times: [0, 0.25, 0.5, 0.75, 1]
+            }
+          }
+        })
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        "aria-hidden": "true",
+        className: cn("inline-grid overflow-hidden", compactStep ? "text-body-compact" : "text-body", "weight-medium"),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: cn("col-start-1 row-start-1 invisible", label),
+            children: words.reduce((a, b) => a.length >= b.length ? a : b)
+          }),
+          reduceMotion ? /* @__PURE__ */ jsx("span", {
+            className: cn("col-start-1 row-start-1", label),
+            children: words[0]
+          }) : /* @__PURE__ */ jsx(AnimatePresence, {
+            mode: "popLayout",
+            initial: false,
+            children: /* @__PURE__ */ jsx(motion.span, {
+              className: cn("col-start-1 row-start-1", label),
+              initial: { y: "80%", opacity: 0 },
+              animate: {
+                y: 0,
+                opacity: 1,
+                transition: { duration: spring.slow.duration, ease: [0.4, 0, 0.2, 1] }
+              },
+              exit: {
+                y: "-80%",
+                opacity: 0,
+                transition: { duration: spring.slow.exit.duration, ease: [0.4, 0, 0.2, 1] }
+              },
+              children: words[index]
+            }, words[index])
+          })
+        ]
+      })
+    ]
+  });
+});
+ThinkingIndicator.displayName = "ThinkingIndicator";
+var thinking_indicator_default = ThinkingIndicator;
+
+export { ThinkingIndicator, thinking_indicator_default };