@nous-research/ui 0.13.2 → 0.14.1

package/dist/ui/components/select.js

@@ -1,127 +1,214 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { cn } from '../../utils';
-const TRIGGER_CN = 'flex h-9 w-full items-center justify-between gap-2 ' +
-    'border border-midground/15 bg-background/40 px-3 py-1 ' +
-    'font-courier text-sm text-left text-midground transition-colors ' +
-    'hover:border-midground/25 ' +
-    'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30 focus-visible:border-midground/30 ' +
-    'disabled:cursor-not-allowed disabled:opacity-50 ' +
-    'cursor-pointer';
-const LISTBOX_CN = 'absolute z-50 mt-1 w-full max-h-60 overflow-auto ' +
-    'border border-midground/15 bg-background-base text-midground shadow-lg';
-export function Select({ children, className, disabled, id, onValueChange, placeholder, style, value }) {
-    const [open, setOpen] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const containerRef = useRef(null);
-    const listRef = useRef(null);
-    const options = useMemo(() => collectOptions(children), [children]);
-    const selected = options.find(o => o.value === value);
-    const displayLabel = selected?.label ?? placeholder ?? value ?? '';
-    const close = useCallback(() => {
-        setOpen(false);
-        setHighlightedIndex(-1);
-    }, []);
-    useEffect(() => {
-        if (!open)
-            return;
-        const ac = new AbortController();
-        document.addEventListener('mousedown', e => {
-            if (!containerRef.current?.contains(e.target))
-                close();
-        }, { signal: ac.signal });
-        return () => ac.abort();
-    }, [open, close]);
-    useEffect(() => {
-        if (!open || highlightedIndex < 0)
-            return;
-        const el = listRef.current?.children[highlightedIndex];
-        el?.scrollIntoView({ block: 'nearest' });
-    }, [open, highlightedIndex]);
-    const handleKeyDown = (e) => {
-        if (disabled)
-            return;
-        switch (e.key) {
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                if (!open) {
-                    setOpen(true);
-                    setHighlightedIndex(options.findIndex(o => o.value === value));
-                }
-                else if (highlightedIndex >= 0 && options[highlightedIndex]) {
-                    onValueChange?.(options[highlightedIndex].value);
-                    close();
-                }
-                break;
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!open) {
-                    setOpen(true);
-                    setHighlightedIndex(options.findIndex(o => o.value === value));
-                }
-                else {
-                    setHighlightedIndex(i => Math.min(i + 1, options.length - 1));
-                }
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                if (open)
-                    setHighlightedIndex(i => Math.max(i - 1, 0));
-                break;
-            case 'Home':
-                if (open) {
-                    e.preventDefault();
-                    setHighlightedIndex(0);
-                }
-                break;
-            case 'End':
-                if (open) {
-                    e.preventDefault();
-                    setHighlightedIndex(options.length - 1);
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../utils/index.js";
+const TRIGGER_CN = "flex h-9 w-full items-center justify-between gap-2 border border-midground/15 bg-background/40 px-3 py-1 font-courier text-sm text-left text-midground transition-colors hover:border-midground/25 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30 focus-visible:border-midground/30 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer";
+const LISTBOX_CN = "absolute z-50 mt-1 w-full max-h-60 overflow-auto border border-midground/15 bg-background-base text-midground shadow-lg";
+export function Select({
+  children,
+  className,
+  disabled,
+  id,
+  onValueChange,
+  placeholder,
+  style,
+  value
+}) {
+  const [open, setOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const containerRef = useRef(null);
+  const listRef = useRef(null);
+  const options = useMemo(() => collectOptions(children), [children]);
+  const selected = options.find((o) => o.value === value);
+  const displayLabel = selected?.label ?? placeholder ?? value ?? "";
+  const close = useCallback(() => {
+    setOpen(false);
+    setHighlightedIndex(-1);
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const ac = new AbortController();
+    document.addEventListener(
+      "mousedown",
+      (e) => {
+        if (!containerRef.current?.contains(e.target)) close();
+      },
+      { signal: ac.signal }
+    );
+    return () => ac.abort();
+  }, [open, close]);
+  useEffect(() => {
+    if (!open || highlightedIndex < 0) return;
+    const el = listRef.current?.children[highlightedIndex];
+    el?.scrollIntoView({ block: "nearest" });
+  }, [open, highlightedIndex]);
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setHighlightedIndex(options.findIndex((o) => o.value === value));
+        } else if (highlightedIndex >= 0 && options[highlightedIndex]) {
+          onValueChange?.(options[highlightedIndex].value);
+          close();
+        }
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setHighlightedIndex(options.findIndex((o) => o.value === value));
+        } else {
+          setHighlightedIndex((i) => Math.min(i + 1, options.length - 1));
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (open) setHighlightedIndex((i) => Math.max(i - 1, 0));
+        break;
+      case "Home":
+        if (open) {
+          e.preventDefault();
+          setHighlightedIndex(0);
+        }
+        break;
+      case "End":
+        if (open) {
+          e.preventDefault();
+          setHighlightedIndex(options.length - 1);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        close();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative", className),
+      id,
+      ref: containerRef,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            "aria-expanded": open,
+            "aria-haspopup": "listbox",
+            className: TRIGGER_CN,
+            disabled,
+            onClick: () => !disabled && setOpen((o) => !o),
+            onKeyDown: handleKeyDown,
+            role: "combobox",
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("truncate", !selected && "text-midground/50"), children: displayLabel }),
+              /* @__PURE__ */ jsx(
+                ChevronDownGlyph,
+                {
+                  className: cn(
+                    "size-3 shrink-0 text-midground/60 transition-transform",
+                    open && "rotate-180"
+                  )
                 }
-                break;
-            case 'Escape':
-                e.preventDefault();
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx("div", { className: LISTBOX_CN, ref: listRef, role: "listbox", children: options.map((opt, i) => {
+          const isSelected = opt.value === value;
+          const isHighlighted = i === highlightedIndex;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-selected": isSelected,
+              className: cn(
+                "flex cursor-pointer items-center gap-2 px-3 py-2",
+                "font-courier text-sm transition-colors",
+                isHighlighted && "bg-midground/10",
+                isSelected ? "text-midground" : "text-midground/70"
+              ),
+              onClick: () => {
+                onValueChange?.(opt.value);
                 close();
-                break;
-        }
-    };
-    return (_jsxs("div", { className: cn('relative', className), id: id, ref: containerRef, style: style, children: [_jsxs("button", { "aria-expanded": open, "aria-haspopup": "listbox", className: TRIGGER_CN, disabled: disabled, onClick: () => !disabled && setOpen(o => !o), onKeyDown: handleKeyDown, role: "combobox", type: "button", children: [_jsx("span", { className: cn('truncate', !selected && 'text-midground/50'), children: displayLabel }), _jsx(ChevronDownGlyph, { className: cn('size-3 shrink-0 text-midground/60 transition-transform', open && 'rotate-180') })] }), open && (_jsx("div", { className: LISTBOX_CN, ref: listRef, role: "listbox", children: options.map((opt, i) => {
-                    const isSelected = opt.value === value;
-                    const isHighlighted = i === highlightedIndex;
-                    return (_jsxs("div", { "aria-selected": isSelected, className: cn('flex cursor-pointer items-center gap-2 px-3 py-2', 'font-courier text-sm transition-colors', isHighlighted && 'bg-midground/10', isSelected ? 'text-midground' : 'text-midground/70'), onClick: () => {
-                            onValueChange?.(opt.value);
-                            close();
-                        }, onMouseEnter: () => setHighlightedIndex(i), role: "option", children: [_jsx(CheckGlyph, { className: cn('size-3 shrink-0', isSelected ? 'opacity-100' : 'opacity-0') }), _jsx("span", { className: "truncate", children: opt.label })] }, opt.value));
-                }) }))] }));
+              },
+              onMouseEnter: () => setHighlightedIndex(i),
+              role: "option",
+              children: [
+                /* @__PURE__ */ jsx(
+                  CheckGlyph,
+                  {
+                    className: cn(
+                      "size-3 shrink-0",
+                      isSelected ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label })
+              ]
+            },
+            opt.value
+          );
+        }) })
+      ]
+    }
+  );
 }
-// Marker component — `Select` reads `value`/`children` from its tree.
-// Renders nothing on its own.
 export function SelectOption(_props) {
-    return null;
+  return null;
 }
-const ChevronDownGlyph = ({ className }) => (_jsx("svg", { "aria-hidden": true, className: className, fill: "none", stroke: "currentColor", strokeLinecap: "square", strokeWidth: 1.5, viewBox: "0 0 12 12", children: _jsx("path", { d: "M2.5 4.5 6 8l3.5-3.5" }) }));
-const CheckGlyph = ({ className }) => (_jsx("svg", { "aria-hidden": true, className: className, fill: "none", stroke: "currentColor", strokeLinecap: "square", strokeWidth: 1.5, viewBox: "0 0 12 12", children: _jsx("path", { d: "m2.5 6.5 2.5 2.5L9.5 3.5" }) }));
+const ChevronDownGlyph = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": true,
+    className,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "square",
+    strokeWidth: 1.5,
+    viewBox: "0 0 12 12",
+    children: /* @__PURE__ */ jsx("path", { d: "M2.5 4.5 6 8l3.5-3.5" })
+  }
+);
+const CheckGlyph = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": true,
+    className,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "square",
+    strokeWidth: 1.5,
+    viewBox: "0 0 12 12",
+    children: /* @__PURE__ */ jsx("path", { d: "m2.5 6.5 2.5 2.5L9.5 3.5" })
+  }
+);
 function collectOptions(children) {
-    const out = [];
-    Children.forEach(children, child => {
-        if (!isValidElement(child))
-            return;
-        const el = child;
-        if (el.props.value !== undefined) {
-            out.push({
-                label: typeof el.props.children === 'string'
-                    ? el.props.children
-                    : String(el.props.value),
-                value: String(el.props.value)
-            });
-        }
-        else if (el.props.children) {
-            out.push(...collectOptions(el.props.children));
-        }
-    });
-    return out;
+  const out = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const el = child;
+    if (el.props.value !== void 0) {
+      out.push({
+        label: typeof el.props.children === "string" ? el.props.children : String(el.props.value),
+        value: String(el.props.value)
+      });
+    } else if (el.props.children) {
+      out.push(...collectOptions(el.props.children));
+    }
+  });
+  return out;
 }
-//# sourceMappingURL=select.js.map

package/dist/ui/components/selection-switcher.d.ts

@@ -1,2 +1 @@
 export declare function SelectionSwitcher(): null;
-//# sourceMappingURL=selection-switcher.d.ts.map

package/dist/ui/components/selection-switcher.js

@@ -1,29 +1,33 @@
-'use client';
-import { useEffect } from 'react';
+"use client";
+import { useEffect } from "react";
 const colors = [
-    'oklch(85% 0.12 330)',
-    'oklch(85% 0.12 300)',
-    'oklch(85% 0.12 270)',
-    'oklch(85% 0.12 230)',
-    'oklch(85% 0.12 180)',
-    'oklch(85% 0.12 150)',
-    'oklch(85% 0.12 120)',
-    'oklch(85% 0.12 90)',
-    'oklch(85% 0.12 60)',
-    'oklch(85% 0.12 30)',
-    'oklch(88% 0.10 80)'
+  "oklch(85% 0.12 330)",
+  "oklch(85% 0.12 300)",
+  "oklch(85% 0.12 270)",
+  "oklch(85% 0.12 230)",
+  "oklch(85% 0.12 180)",
+  "oklch(85% 0.12 150)",
+  "oklch(85% 0.12 120)",
+  "oklch(85% 0.12 90)",
+  "oklch(85% 0.12 60)",
+  "oklch(85% 0.12 30)",
+  "oklch(88% 0.10 80)"
 ];
 export function SelectionSwitcher() {
-    useEffect(() => {
-        const ac = new AbortController();
-        const { signal } = ac;
-        let idx = 0;
-        const cycle = () => requestAnimationFrame(() => document.documentElement.style.setProperty('--selection-bg', colors[(idx = (idx + 1) % colors.length)]));
-        const onKey = (e) => e.key.toLowerCase() === 'a' && (e.metaKey || e.ctrlKey) && cycle();
-        document.addEventListener('selectstart', cycle, { signal });
-        document.addEventListener('keydown', onKey, { signal });
-        return () => ac.abort();
-    }, []);
-    return null;
+  useEffect(() => {
+    const ac = new AbortController();
+    const { signal } = ac;
+    let idx = 0;
+    const cycle = () => requestAnimationFrame(
+      () => document.documentElement.style.setProperty(
+        "--selection-bg",
+        colors[idx = (idx + 1) % colors.length]
+      )
+    );
+    const onKey = (e) => e.key.toLowerCase() === "a" && (e.metaKey || e.ctrlKey) && cycle();
+    document.addEventListener("selectstart", cycle, { signal });
+    document.addEventListener("keydown", onKey, { signal });
+    return () => ac.abort();
+  }, []);
+  return null;
 }
-//# sourceMappingURL=selection-switcher.js.map

package/dist/ui/components/shader.d.ts

@@ -1,8 +1,7 @@
 import { type ThreeElements } from '@react-three/fiber';
 import type { ReactNode } from 'react';
-export declare function Shader({ children, defines, depthTest, fragmentShader, uniforms, vertexShader, ...props }: ShaderProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+export declare function Shader({ children, defines, depthTest, fragmentShader, uniforms, vertexShader, ...props }: ShaderProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
 interface ShaderProps extends Omit<ThreeElements['mesh'], 'children'>, Pick<ThreeElements['shaderMaterial'], 'defines' | 'depthTest' | 'fragmentShader' | 'uniforms' | 'vertexShader'> {
     children?: ((material: ReactNode) => ReactNode) | ReactNode;
 }
 export {};
-//# sourceMappingURL=shader.d.ts.map

package/dist/ui/components/shader.js

@@ -1,41 +1,59 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useThree } from '@react-three/fiber';
-import { useEffect, useRef } from 'react';
-import * as THREE from 'three';
-import { useCappedFrame } from '../../hooks/use-capped-frame';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useThree } from "@react-three/fiber";
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { useCappedFrame } from "../../hooks/use-capped-frame.js";
 const defaultUniforms = {
-    uResolution: new THREE.Uniform(new THREE.Vector4()),
-    uTime: new THREE.Uniform(0)
+  uResolution: new THREE.Uniform(new THREE.Vector4()),
+  uTime: new THREE.Uniform(0)
 };
-export function Shader({ children, defines, depthTest, fragmentShader, uniforms, vertexShader, ...props }) {
-    const invalidate = useThree(st => st.invalidate);
-    const { size, viewport } = useThree();
-    const isMobile = size.width < 1024;
-    const uniformsRef = useRef({
-        ...defaultUniforms,
-        ...(uniforms ?? {})
-    });
-    useCappedFrame(({ clock }) => {
-        const w = size.width * viewport.dpr;
-        const h = size.height * viewport.dpr;
-        uniformsRef.current.uTime.value = clock.getElapsedTime();
-        uniformsRef.current.uResolution.value.copy(new THREE.Vector4(w, h, w / h, viewport.dpr));
-    }, isMobile ? 0 : 80);
-    useEffect(() => void (uniforms && Object.assign(uniformsRef.current, uniforms)), [uniforms]);
-    useEffect(() => void (isMobile && invalidate(80)), [invalidate, isMobile]);
-    const materialProps = {
-        defines: defines ?? {},
-        depthTest,
-        fragmentShader,
-        side: THREE.DoubleSide,
-        transparent: true,
-        uniforms: uniformsRef.current,
-        vertexShader
-    };
-    if (typeof children === 'function') {
-        return children(_jsx("shaderMaterial", { ...materialProps }));
-    }
-    return (_jsxs("mesh", { ...props, children: [children ?? _jsx("planeGeometry", {}), _jsx("shaderMaterial", { ...materialProps })] }));
+export function Shader({
+  children,
+  defines,
+  depthTest,
+  fragmentShader,
+  uniforms,
+  vertexShader,
+  ...props
+}) {
+  const invalidate = useThree((st) => st.invalidate);
+  const { size, viewport } = useThree();
+  const isMobile = size.width < 1024;
+  const uniformsRef = useRef({
+    ...defaultUniforms,
+    ...uniforms ?? {}
+  });
+  useCappedFrame(
+    ({ clock }) => {
+      const w = size.width * viewport.dpr;
+      const h = size.height * viewport.dpr;
+      uniformsRef.current.uTime.value = clock.getElapsedTime();
+      uniformsRef.current.uResolution.value.copy(
+        new THREE.Vector4(w, h, w / h, viewport.dpr)
+      );
+    },
+    isMobile ? 0 : 80
+  );
+  useEffect(
+    () => void (uniforms && Object.assign(uniformsRef.current, uniforms)),
+    [uniforms]
+  );
+  useEffect(() => void (isMobile && invalidate(80)), [invalidate, isMobile]);
+  const materialProps = {
+    defines: defines ?? {},
+    depthTest,
+    fragmentShader,
+    side: THREE.DoubleSide,
+    transparent: true,
+    uniforms: uniformsRef.current,
+    vertexShader
+  };
+  if (typeof children === "function") {
+    return children(/* @__PURE__ */ jsx("shaderMaterial", { ...materialProps }));
+  }
+  return /* @__PURE__ */ jsxs("mesh", { ...props, children: [
+    children ?? /* @__PURE__ */ jsx("planeGeometry", {}),
+    /* @__PURE__ */ jsx("shaderMaterial", { ...materialProps })
+  ] });
 }
-//# sourceMappingURL=shader.js.map

package/dist/ui/components/socials.d.ts

@@ -1,4 +1,4 @@
-export declare function Socials({ className, items, onNavigate, ...rest }: SocialsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Socials({ className, items, onNavigate, ...rest }: SocialsProps): import("react").JSX.Element;
 export interface SocialLink {
     external?: boolean;
     href: string;
@@ -18,4 +18,3 @@ interface SocialsProps extends React.HTMLAttributes<HTMLDivElement> {
     onNavigate?: () => void;
 }
 export {};
-//# sourceMappingURL=socials.d.ts.map

package/dist/ui/components/socials.js

@@ -1,9 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../utils';
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/index.js";
 export function Socials({ className, items, onNavigate, ...rest }) {
-    return (_jsx("div", { className: cn('flex items-center gap-3', className), ...rest, children: items.map(({ external = true, href, icon: Icon, label, onClick }) => (_jsx("a", { className: "opacity-60 transition-opacity hover:opacity-100", href: href, onClick: e => {
-                onClick?.(e);
-                onNavigate?.();
-            }, rel: external ? 'noopener noreferrer' : undefined, target: external ? '_blank' : undefined, title: label, children: _jsx(Icon, {}) }, label))) }));
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-3", className), ...rest, children: items.map(({ external = true, href, icon: Icon, label, onClick }) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: "opacity-60 transition-opacity hover:opacity-100",
+      href,
+      onClick: (e) => {
+        onClick?.(e);
+        onNavigate?.();
+      },
+      rel: external ? "noopener noreferrer" : void 0,
+      target: external ? "_blank" : void 0,
+      title: label,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    },
+    label
+  )) });
 }
-//# sourceMappingURL=socials.js.map

package/dist/ui/components/spinner.d.ts

@@ -11,11 +11,10 @@ import { type BrailleSpinnerName } from 'unicode-animations';
  * the spinner has no surrounding loading text and screen readers need to know
  * something is loading.
  */
-export declare function Spinner({ className, name, style, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Spinner({ className, name, style, ...props }: SpinnerProps): import("react").JSX.Element;
 interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
     className?: string;
     name?: BrailleSpinnerName;
     style?: CSSProperties;
 }
 export {};
-//# sourceMappingURL=spinner.d.ts.map

package/dist/ui/components/spinner.js

@@ -1,26 +1,37 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import spinners from 'unicode-animations';
-import { cn } from '../../utils';
-/**
- * Braille unicode spinner. Renders the active frame of a `unicode-animations`
- * sequence inside an inline `<span>`, advancing on the spinner's own interval.
- *
- * Inherits font color and font size from its parent — apply Tailwind utilities
- * (e.g. `text-warning`, `text-base`) via `className` to style.
- *
- * Decorative by default. Pass `aria-label` (and optionally `role="status"`) when
- * the spinner has no surrounding loading text and screen readers need to know
- * something is loading.
- */
-export function Spinner({ className, name = 'braille', style, ...props }) {
-    const [frame, setFrame] = useState(0);
-    const animation = spinners[name];
-    useEffect(() => {
-        const id = setInterval(() => setFrame(f => (f + 1) % animation.frames.length), animation.interval);
-        return () => clearInterval(id);
-    }, [animation.frames.length, animation.interval]);
-    return (_jsx("span", { "aria-hidden": props['aria-label'] ? undefined : true, className: cn('font-mono inline-block leading-none tabular-nums', className), style: style, ...props, children: animation.frames[frame] }));
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  useEffect,
+  useState
+} from "react";
+import spinners from "unicode-animations";
+import { cn } from "../../utils/index.js";
+export function Spinner({
+  className,
+  name = "braille",
+  style,
+  ...props
+}) {
+  const [frame, setFrame] = useState(0);
+  const animation = spinners[name];
+  useEffect(() => {
+    const id = setInterval(
+      () => setFrame((f) => (f + 1) % animation.frames.length),
+      animation.interval
+    );
+    return () => clearInterval(id);
+  }, [animation.frames.length, animation.interval]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": props["aria-label"] ? void 0 : true,
+      className: cn(
+        "font-mono inline-block leading-none tabular-nums",
+        className
+      ),
+      style,
+      ...props,
+      children: animation.frames[frame]
+    }
+  );
 }
-//# sourceMappingURL=spinner.js.map

package/dist/ui/components/stats.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export declare function Stats({ className, items, flip, ...props }: StatsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stats({ className, items, flip, ...props }: StatsProps): React.JSX.Element;
 interface StatsProps extends React.ComponentProps<'div'> {
     items: {
         label: string | {
@@ -14,4 +14,3 @@ interface StatsProps extends React.ComponentProps<'div'> {
     flip?: boolean;
 }
 export {};
-//# sourceMappingURL=stats.d.ts.map