@instruments/materia-ui 0.1.0

package/dist/components/thinking-loader/thinking-loader-root.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from "@instruments/materia-ui/components/flex";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+import { useCallback, useEffect, useState } from "react";
+import { ThinkingLoaderCounter } from "../thinking-loader/thinking-loader-counter.js";
+import { ThinkingLoaderIcon } from "../thinking-loader/thinking-loader-icon.js";
+import { STEP_TIMING, ThinkingLoaderStep, } from "../thinking-loader/thinking-loader-step.js";
+import { THINKING_ORB_STATES, ThinkingOrb, } from "../thinking-orb/thinking-orb-root.js";
+const INLINE_LOADER_SLOT_CLASS = "flex size-5 shrink-0 items-center justify-center";
+const isOrbState = (orb) => THINKING_ORB_STATES.some((state) => state === orb);
+const normalizeThinkingLoaderOrb = (orb) => {
+    if (isOrbState(orb)) {
+        return { size: 20, state: orb };
+    }
+    return { size: 20, state: "working", ...orb };
+};
+/** A custom `loader` or an `orb` fills the static slot left of the label. */
+const hasLoaderSlot = (customLoader, orb) => customLoader || orb !== undefined;
+/** The static visual left of the label: a custom `loader` wins over `orb`. */
+const LoaderSlot = ({ customLoader, loader, orb, }) => {
+    if (customLoader) {
+        return (_jsx(Flex, { align: "center", className: "shrink-0", children: loader }));
+    }
+    if (orb === undefined) {
+        return null;
+    }
+    return (_jsx("div", { className: INLINE_LOADER_SLOT_CLASS, children: _jsx(ThinkingOrb, { ...normalizeThinkingLoaderOrb(orb) }) }));
+};
+/**
+ * LLM-style "labor illusion" loader with blur conveyor animations and shimmer text effect.
+ *
+ * Supports both controlled mode (parent drives `currentStep`) and uncontrolled mode
+ * (auto-cycles through steps based on `interval`).
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled - auto-cycles
+ * <ThinkingLoader steps={IMPORT_STEPS} showCounter />
+ *
+ * // Controlled - parent drives progression
+ * <ThinkingLoader steps={MATCH_STEPS} currentStep={step} />
+ *
+ * // Inline orb summary (tray headers, agent chrome)
+ * <ThinkingLoader orb="working" shimmer={false} steps={[{ id: "summary", label: "2 things in progress" }]} />
+ * ```
+ *
+ * @bestPractice Drive `ThinkingLoader` with `currentStep` (controlled) to reflect real progress, or omit it to auto-cycle `steps` on `interval` for a labor-illusion loader.
+ * @bestPractice It already renders an `aria-live="polite"` region announcing each step - don't wrap it in another status role. Mount `ReducedMotionProvider` since it animates via `m.*`.
+ * @category feedback
+ */
+export const ThinkingLoader = ({ steps, currentStep, interval = STEP_TIMING.total, showCounter = false, shimmer = true, shimmerVariant = "dark", morphIcons = false, loader, orb, className, onStepChange, }) => {
+    const isControlled = currentStep !== undefined;
+    const [internalStep, setInternalStep] = useState(0);
+    const activeStep = isControlled ? currentStep : internalStep;
+    const goToNextStep = useCallback(() => {
+        setInternalStep((prev) => {
+            const next = (prev + 1) % steps.length;
+            const nextStepData = steps[next];
+            if (onStepChange && nextStepData) {
+                onStepChange(next, nextStepData);
+            }
+            return next;
+        });
+    }, [steps, onStepChange]);
+    // Auto-cycle in uncontrolled mode
+    useEffect(() => {
+        if (isControlled || steps.length === 0) {
+            return () => {
+                // controlled or no steps; nothing to auto-cycle
+            };
+        }
+        const timerId = setInterval(goToNextStep, interval);
+        return () => {
+            clearInterval(timerId);
+        };
+    }, [isControlled, steps.length, interval, goToNextStep]);
+    // Bail if no steps
+    if (steps.length === 0) {
+        return null;
+    }
+    const currentStepData = steps[activeStep];
+    if (!currentStepData) {
+        return null;
+    }
+    // Check if any step has an icon (for morphIcons mode)
+    const hasIcons = steps.some((s) => s.icon);
+    // A custom `loader` or `orb` wins over per-step icon morphing - it stays put
+    // and is the same visual for the whole operation.
+    const customLoader = Boolean(loader);
+    const hasLoader = hasLoaderSlot(customLoader, orb);
+    const shouldMorphIcons = !hasLoader && morphIcons && hasIcons;
+    const shouldHideStepIcon = hasLoader || shouldMorphIcons;
+    // Colour class based on shimmerVariant - children inherit via currentColor
+    const colorClass = shimmerVariant === "inverted" ? "text-white/90" : "text-muted-foreground";
+    return (_jsxs(m.output, { "aria-atomic": "true", "aria-live": "polite", className: cn(
+        // Default body size; callers override via className (e.g. text-caption).
+        // min-w-0 so flex parents can shrink the label instead of wrapping.
+        "text-paragraph-sm flex min-w-0 items-center gap-3", colorClass, className), "data-slot": "thinking-loader", children: [_jsxs(Flex, { align: "center", className: "min-h-6 min-w-0 flex-1", gap: "xs", children: [_jsx(LoaderSlot, { customLoader: customLoader, loader: loader, orb: orb }), shouldMorphIcons && (_jsx("div", { children: _jsx(ThinkingLoaderIcon, { icon: currentStepData.icon, stepId: currentStepData.id }) })), _jsx(AnimatePresence, { mode: "wait", children: _jsx(ThinkingLoaderStep, { hideIcon: shouldHideStepIcon, inheritSize: true, shimmer: shimmer, shimmerVariant: shimmerVariant, step: currentStepData }, currentStepData.id) })] }), showCounter && (_jsx(ThinkingLoaderCounter, { current: activeStep + 1, total: steps.length }))] }));
+};

package/dist/components/thinking-loader/thinking-loader-step.d.ts

@@ -0,0 +1,37 @@
+import type { ShimmerVariant, ThinkingStep } from "../thinking-loader/types.js";
+/** Animation timing constants using shared tokens */
+export declare const ANIMATION_TIMING: {
+    /** Duration for enter animations (blur in) - uses "moderate" token */
+    readonly enter: 0.4;
+    /** Duration for exit animations (blur out) - uses "quick" token */
+    readonly exit: 0.12;
+    /** Delay before opacity starts on enter */
+    readonly opacityDelay: 0.06;
+    /** Shimmer sweep duration - uses "slow" token */
+    readonly shimmer: 1;
+    /** Delay between shimmer repeats */
+    readonly shimmerDelay: 0.1;
+};
+interface ThinkingLoaderStepProps {
+    className?: string;
+    /** Hide icon (when rendered separately for morphing) */
+    hideIcon?: boolean;
+    /** Inherit font size from a containing `ThinkingLoader`. */
+    inheritSize?: boolean;
+    shimmer?: boolean;
+    /** Shimmer highlight direction. Defaults to `"dark"`. */
+    shimmerVariant?: ShimmerVariant;
+    step: ThinkingStep;
+}
+/**
+ * Individual step with blur conveyor animation and optional shimmer text effect.
+ * Uses the shared Shimmer component for the gradient sweep animation.
+ */
+export declare const ThinkingLoaderStep: ({ step, shimmer, shimmerVariant, hideIcon, inheritSize, className, }: ThinkingLoaderStepProps) => import("react").JSX.Element;
+export declare const STEP_TIMING: {
+    enter: number;
+    exit: number;
+    /** Default interval for demo mode - in async usage, steps are event-driven */
+    total: number;
+};
+export {};

package/dist/components/thinking-loader/thinking-loader-step.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "@instruments/materia-ui/components/icon";
+import { durations, easings, springs, } from "@instruments/materia-ui/tokens/motion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import * as m from "motion/react-m";
+import { Shimmer } from "../shimmer/shimmer-root.js";
+/** Animation timing constants using shared tokens */
+export const ANIMATION_TIMING = {
+    /** Duration for enter animations (blur in) - uses "moderate" token */
+    enter: durations.moderate,
+    /** Duration for exit animations (blur out) - uses "quick" token */
+    exit: durations.quick,
+    /** Delay before opacity starts on enter */
+    opacityDelay: 0.06,
+    /** Shimmer sweep duration - uses "slow" token */
+    shimmer: durations.slow,
+    /** Delay between shimmer repeats */
+    shimmerDelay: 0.1,
+};
+/**
+ * Individual step with blur conveyor animation and optional shimmer text effect.
+ * Uses the shared Shimmer component for the gradient sweep animation.
+ */
+export const ThinkingLoaderStep = ({ step, shimmer = true, shimmerVariant = "dark", hideIcon = false, inheritSize = false, className, }) => {
+    const showIcon = step.icon && !hideIcon;
+    return (_jsxs(m.div, { animate: {
+            filter: "blur(0px)",
+            opacity: 1,
+            y: 0,
+        }, className: cn("flex min-w-0 flex-1 items-center gap-2", !inheritSize && "text-paragraph-sm", className), exit: {
+            filter: "blur(6px)",
+            opacity: 0,
+            transition: {
+                duration: ANIMATION_TIMING.exit,
+                ease: easings.out,
+            },
+            y: -12,
+        }, initial: {
+            filter: "blur(8px)",
+            opacity: 0,
+            y: 20,
+        }, transition: {
+            // Soft spring tuned for smooth reveal
+            ...springs.standard,
+            // Blur clears with same easing
+            filter: {
+                duration: ANIMATION_TIMING.enter,
+                ease: easings.out,
+            },
+            // Opacity with subtle slow-down at end
+            opacity: {
+                delay: ANIMATION_TIMING.opacityDelay,
+                duration: ANIMATION_TIMING.enter * 0.875,
+                ease: easings.out,
+            },
+        }, children: [showIcon === true && step.icon && _jsx(Icon, { icon: step.icon, size: "xs" }), shimmer ? (_jsx(Shimmer, { className: "min-w-0 truncate", duration: ANIMATION_TIMING.shimmer, repeatDelay: ANIMATION_TIMING.shimmerDelay, variant: shimmerVariant, children: step.label })) : (_jsx("span", { className: "min-w-0 truncate", children: step.label }))] }));
+};
+/** Default interval for uncontrolled/demo mode (~2.5s feels natural) */
+const DEFAULT_STEP_INTERVAL = 2500;
+export const STEP_TIMING = {
+    enter: ANIMATION_TIMING.enter * 1000,
+    exit: ANIMATION_TIMING.exit * 1000,
+    /** Default interval for demo mode - in async usage, steps are event-driven */
+    total: DEFAULT_STEP_INTERVAL,
+};

package/dist/components/thinking-loader/types.d.ts

@@ -0,0 +1,45 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import type { ShimmerVariant } from "../shimmer/shimmer-root.js";
+import type { OrbState, ThinkingOrbProps } from "../thinking-orb/thinking-orb-root.js";
+export type { ShimmerVariant } from "../shimmer/shimmer-root.js";
+export interface ThinkingStep {
+    icon?: LucideIcon;
+    /** Stable identifier - used as the animation key and for `goToId` lookups. */
+    id: string;
+    label: string;
+}
+/** Inline {@link ThinkingOrb} config for the loader slot - pass a state string or partial orb props. */
+export type ThinkingLoaderOrb = OrbState | Pick<ThinkingOrbProps, "state" | "size" | "theme" | "speed" | "paused" | "aria-label">;
+export interface ThinkingLoaderProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Controlled mode: parent drives step progression */
+    currentStep?: number;
+    /** Total cycle time per step in ms, used for uncontrolled auto-cycling (default: 2500) */
+    interval?: number;
+    /**
+     * Custom static loader visual rendered on the left of the shimmer text.
+     * When provided, replaces the per-step morphing icon (and overrides
+     * `morphIcons`). Use this to plug in feature-specific glyphs - e.g. an
+     * SVG loader - while keeping the shared shimmer-text behaviour.
+     */
+    loader?: ReactNode;
+    /**
+     * Inline {@link ThinkingOrb} in the loader slot. Ignored when `loader` is
+     * provided. Defaults to size `20` for text-adjacent rows.
+     */
+    orb?: ThinkingLoaderOrb;
+    /** Icons morph in place instead of animating with text (default: false) */
+    morphIcons?: boolean;
+    /** Callback when step changes (uncontrolled mode) */
+    onStepChange?: (index: number, step: ThinkingStep) => void;
+    /** Enable shimmer effect (default: true) */
+    shimmer?: boolean;
+    /** Shimmer highlight direction. Defaults to the legible foreground `"dark"` sweep. */
+    shimmerVariant?: ShimmerVariant;
+    /** Show "1/4" counter */
+    showCounter?: boolean;
+    /** Array of steps to display */
+    steps: ThinkingStep[];
+}

package/dist/components/thinking-loader/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/thinking-loader/use-thinking-loader.d.ts

@@ -0,0 +1,64 @@
+import type { ThinkingStep } from "../thinking-loader/types.js";
+interface UseThinkingLoaderOptions {
+    /** Initial step index (default: 0) */
+    initialStep?: number;
+    /** Callback when all steps complete */
+    onComplete?: () => void;
+    /** Callback when step changes */
+    onStepChange?: (index: number, step: ThinkingStep) => void;
+    /** Initial steps to display */
+    steps: ThinkingStep[];
+}
+interface UseThinkingLoaderReturn {
+    /** Current step index */
+    currentStep: number;
+    /** Current step data */
+    currentStepData: ThinkingStep | undefined;
+    /** Go to specific step by index */
+    goTo: (index: number) => void;
+    /** Go to specific step by id */
+    goToId: (id: string) => void;
+    /** Whether on the first step */
+    isFirstStep: boolean;
+    /** Whether on the last step */
+    isLastStep: boolean;
+    /** Props to spread onto ThinkingLoader */
+    loaderProps: {
+        steps: ThinkingStep[];
+        currentStep: number;
+    };
+    /** Go to next step (loops or triggers onComplete) */
+    next: () => void;
+    /** Go to previous step */
+    previous: () => void;
+    /** Reset to first step */
+    reset: () => void;
+    /** Update steps dynamically */
+    setSteps: (steps: ThinkingStep[]) => void;
+    /** All steps */
+    steps: ThinkingStep[];
+}
+/**
+ * Hook to control ThinkingLoader programmatically.
+ *
+ * Useful for connecting to backend events, manual step progression,
+ * or dynamic step management.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with manual control
+ * const { loaderProps, next } = useThinkingLoader({ steps: STEPS });
+ *
+ * // Advance on backend event
+ * useEffect(() => {
+ *   api.onProgress((status) => {
+ *     if (status === "analyzing") goToId("analyze");
+ *     if (status === "complete") next();
+ *   });
+ * }, []);
+ *
+ * return <ThinkingLoader {...loaderProps} showCounter />;
+ * ```
+ */
+export declare const useThinkingLoader: ({ steps: initialSteps, initialStep, onStepChange, onComplete, }: UseThinkingLoaderOptions) => UseThinkingLoaderReturn;
+export {};

package/dist/components/thinking-loader/use-thinking-loader.js

@@ -0,0 +1,81 @@
+"use client";
+import { useCallback, useMemo, useState } from "react";
+/**
+ * Hook to control ThinkingLoader programmatically.
+ *
+ * Useful for connecting to backend events, manual step progression,
+ * or dynamic step management.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with manual control
+ * const { loaderProps, next } = useThinkingLoader({ steps: STEPS });
+ *
+ * // Advance on backend event
+ * useEffect(() => {
+ *   api.onProgress((status) => {
+ *     if (status === "analyzing") goToId("analyze");
+ *     if (status === "complete") next();
+ *   });
+ * }, []);
+ *
+ * return <ThinkingLoader {...loaderProps} showCounter />;
+ * ```
+ */
+export const useThinkingLoader = ({ steps: initialSteps, initialStep = 0, onStepChange, onComplete, }) => {
+    const [steps, setSteps] = useState(initialSteps);
+    const [currentStep, setCurrentStep] = useState(initialStep);
+    const currentStepData = steps[currentStep];
+    const isLastStep = currentStep === steps.length - 1;
+    const isFirstStep = currentStep === 0;
+    const goTo = useCallback((index) => {
+        const clampedIndex = Math.max(0, Math.min(index, steps.length - 1));
+        setCurrentStep(clampedIndex);
+        const stepData = steps[clampedIndex];
+        if (stepData && onStepChange) {
+            onStepChange(clampedIndex, stepData);
+        }
+    }, [steps, onStepChange]);
+    const goToId = useCallback((id) => {
+        const index = steps.findIndex((s) => s.id === id);
+        if (index !== -1) {
+            goTo(index);
+        }
+    }, [steps, goTo]);
+    const next = useCallback(() => {
+        if (isLastStep) {
+            onComplete?.();
+            // Loop back to start
+            goTo(0);
+        }
+        else {
+            goTo(currentStep + 1);
+        }
+    }, [currentStep, isLastStep, goTo, onComplete]);
+    const previous = useCallback(() => {
+        if (!isFirstStep) {
+            goTo(currentStep - 1);
+        }
+    }, [currentStep, isFirstStep, goTo]);
+    const reset = useCallback(() => {
+        goTo(0);
+    }, [goTo]);
+    const loaderProps = useMemo(() => ({
+        currentStep,
+        steps,
+    }), [steps, currentStep]);
+    return {
+        currentStep,
+        currentStepData,
+        goTo,
+        goToId,
+        isFirstStep,
+        isLastStep,
+        loaderProps,
+        next,
+        previous,
+        reset,
+        setSteps,
+        steps,
+    };
+};

package/dist/components/thinking-loader.d.ts

@@ -0,0 +1,6 @@
+export { ThinkingLoaderCounter } from "./thinking-loader/thinking-loader-counter.js";
+export { ThinkingLoaderIcon } from "./thinking-loader/thinking-loader-icon.js";
+export { ThinkingLoader } from "./thinking-loader/thinking-loader-root.js";
+export { STEP_TIMING, ThinkingLoaderStep, } from "./thinking-loader/thinking-loader-step.js";
+export type { ShimmerVariant, ThinkingLoaderOrb, ThinkingLoaderProps, ThinkingStep, } from "./thinking-loader/types.js";
+export { useThinkingLoader } from "./thinking-loader/use-thinking-loader.js";

package/dist/components/thinking-loader.js

@@ -0,0 +1,5 @@
+export { ThinkingLoaderCounter } from "./thinking-loader/thinking-loader-counter.js";
+export { ThinkingLoaderIcon } from "./thinking-loader/thinking-loader-icon.js";
+export { ThinkingLoader } from "./thinking-loader/thinking-loader-root.js";
+export { STEP_TIMING, ThinkingLoaderStep, } from "./thinking-loader/thinking-loader-step.js";
+export { useThinkingLoader } from "./thinking-loader/use-thinking-loader.js";

package/dist/components/thinking-orb/thinking-orb-root.d.ts

@@ -0,0 +1,90 @@
+/**
+ * ThinkingOrb - dotted thought-orb status indicator for agent UIs.
+ *
+ * Six hand-tuned states at two purpose-tuned sizes (64 avatar / 20 inline),
+ * rendered on a plain 2D canvas. Wraps the `thinking-orbs` engine and re-exposes
+ * its full prop surface.
+ *
+ * @module
+ */
+import type { CSSProperties } from "react";
+/**
+ * The six shipped states - each a hand-tuned animation:
+ * - `working` - particles on tilted orbits
+ * - `searching` - a scan meridian sweeps a dotted globe
+ * - `solving` - bands scramble in quarter turns, then click back
+ * - `listening` - a waveform rolls through latitude rings
+ * - `composing` - an undulating multi-band sash
+ * - `shaping` - a dotted outline morphs circle → triangle → square
+ */
+export type OrbState = "working" | "searching" | "solving" | "listening" | "composing" | "shaping";
+/**
+ * Rendered size in CSS pixels. Exactly two tuned presets ship:
+ * 64 (chat-avatar scale) and 20 (inline-text scale). Each size carries its
+ * own dot count, dot size and speed tuning - they are separate designs, not
+ * a scale factor.
+ */
+export type OrbSize = 64 | 20;
+/**
+ * Theme mode.
+ *
+ * - `auto` (default) resolves from `data-theme` / `dark` class on an ancestor,
+ *   otherwise `prefers-color-scheme`.
+ * - `dark` / `light` pin the palette regardless of context.
+ */
+export type OrbTheme = "auto" | "dark" | "light";
+/** The six shipped agent states, in playground / catalogue order. */
+export declare const THINKING_ORB_STATES: readonly OrbState[];
+/** Tuned size presets - separate designs, not a scale factor. */
+export declare const THINKING_ORB_SIZES: readonly OrbSize[];
+/** Props for {@link ThinkingOrb}. */
+export interface ThinkingOrbProps {
+    /**
+     * Which animation to show.
+     * @default "working"
+     */
+    state?: OrbState;
+    /**
+     * Tuned size preset - 64 (avatar) or 20 (inline). Separate designs, not a scale.
+     * @default 64
+     */
+    size?: OrbSize;
+    /**
+     * Theme mode; `auto` detects from the host project.
+     * @default "auto"
+     */
+    theme?: OrbTheme;
+    /**
+     * Animation speed multiplier on top of the preset's baked speed.
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * Freeze the animation on the current frame.
+     * @default false
+     */
+    paused?: boolean;
+    /** Inline styles for the canvas element. */
+    style?: CSSProperties;
+    /** Additional CSS class names for the canvas element. */
+    className?: string;
+    /**
+     * Accessible name. Overrides the per-state default when provided.
+     */
+    "aria-label"?: string;
+}
+/**
+ * Dotted thought-orb for AI & agent status.
+ *
+ * @example
+ * ```tsx
+ * <ThinkingOrb state="searching" size={64} />
+ * <ThinkingOrb state="working" size={20} speed={1.5} />
+ * ```
+ *
+ * @bestPractice Use size `64` for chat-avatar / panel status; use `20` for inline text-adjacent cues. They are separate designs, not a scale factor.
+ * @bestPractice Prefer `theme="auto"` so the orb follows `data-theme` / system preference; pin `dark` or `light` only when the surrounding surface is fixed.
+ * @bestPractice Pass a specific `aria-label` when the state text is not otherwise announced (e.g. next to a ThinkingLoader that already speaks).
+ * @category feedback
+ */
+export declare const ThinkingOrb: ({ state, size, theme, speed, paused, className, style, "aria-label": ariaLabel, }: ThinkingOrbProps) => import("react").JSX.Element;

package/dist/components/thinking-orb/thinking-orb-root.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThinkingOrb as ThinkingOrbsEngine } from "thinking-orbs";
+/** The six shipped agent states, in playground / catalogue order. */
+export const THINKING_ORB_STATES = [
+    "working",
+    "searching",
+    "solving",
+    "listening",
+    "composing",
+    "shaping",
+];
+/** Tuned size presets - separate designs, not a scale factor. */
+export const THINKING_ORB_SIZES = [64, 20];
+/**
+ * Dotted thought-orb for AI & agent status.
+ *
+ * @example
+ * ```tsx
+ * <ThinkingOrb state="searching" size={64} />
+ * <ThinkingOrb state="working" size={20} speed={1.5} />
+ * ```
+ *
+ * @bestPractice Use size `64` for chat-avatar / panel status; use `20` for inline text-adjacent cues. They are separate designs, not a scale factor.
+ * @bestPractice Prefer `theme="auto"` so the orb follows `data-theme` / system preference; pin `dark` or `light` only when the surrounding surface is fixed.
+ * @bestPractice Pass a specific `aria-label` when the state text is not otherwise announced (e.g. next to a ThinkingLoader that already speaks).
+ * @category feedback
+ */
+export const ThinkingOrb = ({ state = "working", size = 64, theme = "auto", speed = 1, paused = false, className, style, "aria-label": ariaLabel, }) => (_jsx(ThinkingOrbsEngine, { "data-component": "thinking-orb", paused: paused, size: size, speed: speed, state: state, theme: theme, ...(ariaLabel === undefined ? {} : { "aria-label": ariaLabel }), ...(className === undefined ? {} : { className }), ...(style === undefined ? {} : { style }) }));

package/dist/components/thinking-orb.d.ts

@@ -0,0 +1,2 @@
+export { THINKING_ORB_SIZES, THINKING_ORB_STATES, ThinkingOrb, } from "./thinking-orb/thinking-orb-root.js";
+export type { OrbSize, OrbState, OrbTheme, ThinkingOrbProps, } from "./thinking-orb/thinking-orb-root.js";

package/dist/components/thinking-orb.js

@@ -0,0 +1 @@
+export { THINKING_ORB_SIZES, THINKING_ORB_STATES, ThinkingOrb, } from "./thinking-orb/thinking-orb-root.js";

package/dist/components/time-slot-picker/time-slot-picker-root.d.ts

@@ -0,0 +1,39 @@
+import type React from "react";
+export interface TimeSlot {
+    /** Value reported to `onValueChange` and submitted with a form. */
+    value: string;
+    /** Text shown on the slot. @default value */
+    label?: React.ReactNode;
+    /** Shows the slot but stops it being chosen. */
+    disabled?: boolean;
+}
+export interface TimeSlotPickerProps extends Omit<React.ComponentProps<"div">, "defaultValue" | "onChange" | "dir"> {
+    /** The times on offer, in display order. */
+    slots: readonly TimeSlot[];
+    /** Controlled selection; `null` means nothing is chosen. */
+    value?: string | null;
+    /** Uncontrolled initial selection. */
+    defaultValue?: string | null;
+    /** Called with the chosen slot's `value`. */
+    onValueChange?: (value: string) => void;
+    /** Disables every slot. */
+    disabled?: boolean;
+    /** Form field name for the chosen value. */
+    name?: string;
+    /** Accessible name for the group; required unless aria-labelledby is passed. */
+    "aria-label"?: string;
+}
+/**
+ * A grid of time slots where exactly one can be chosen, such as appointment
+ * times beside a `Calendar` (Base UI RadioGroup).
+ *
+ * Each slot is a radio, so arrow keys move the selection and `name` submits
+ * the chosen value with a form. Slots reflow into as many equal columns as
+ * fit; the picker sets no outer padding.
+ *
+ * @bestPractice Pass slot values already formatted for display, or give each slot a `label` - the picker does no time parsing or 12/24-hour formatting.
+ * @bestPractice Name the group with `aria-label` or `aria-labelledby`; screen readers announce it before the first slot.
+ * @bestPractice Use `TimeSlotPicker` for a fixed set of offered times; for any time the user types, use `Input type="time"`.
+ * @category forms
+ */
+export declare const TimeSlotPicker: ({ className, defaultValue, disabled, name, onValueChange, slots, value, ...props }: TimeSlotPickerProps) => React.JSX.Element;

package/dist/components/time-slot-picker/time-slot-picker-root.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { cn } from "@instruments/materia-ui/utils/cn";
+const timeSlotClasses = cn(
+// focusRing() leads cn() so the superset transition list below survives the
+// tailwind-merge conflict (the transition-trap idiom InputCard uses).
+focusRing(), "inline-flex h-9 cursor-pointer items-center justify-center px-4 select-none", "border-border bg-card text-card-foreground rounded-md border", "text-paragraph-sm font-medium tabular-nums", "transition-color-bg-shadow-border", "hover:bg-accent", "data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50");
+/**
+ * A grid of time slots where exactly one can be chosen, such as appointment
+ * times beside a `Calendar` (Base UI RadioGroup).
+ *
+ * Each slot is a radio, so arrow keys move the selection and `name` submits
+ * the chosen value with a form. Slots reflow into as many equal columns as
+ * fit; the picker sets no outer padding.
+ *
+ * @bestPractice Pass slot values already formatted for display, or give each slot a `label` - the picker does no time parsing or 12/24-hour formatting.
+ * @bestPractice Name the group with `aria-label` or `aria-labelledby`; screen readers announce it before the first slot.
+ * @bestPractice Use `TimeSlotPicker` for a fixed set of offered times; for any time the user types, use `Input type="time"`.
+ * @category forms
+ */
+export const TimeSlotPicker = ({ className, defaultValue, disabled, name, onValueChange, slots, value, ...props }) => {
+    // Every radio carries a string value, so Base UI never reports `null` here;
+    // the group is typed `string | null` only so `value={null}` stays controlled.
+    const handleValueChange = (next) => {
+        if (next !== null) {
+            onValueChange?.(next);
+        }
+    };
+    return (_jsx(RadioGroupPrimitive, { className: cn("grid grid-cols-[repeat(auto-fill,minmax(6rem,1fr))] gap-2", className), "data-component": "time-slot-picker", "data-slot": "time-slot-picker", defaultValue: defaultValue, disabled: disabled, name: name, onValueChange: handleValueChange, value: value, ...props, children: slots.map((slot) => (_jsx(RadioPrimitive.Root, { className: timeSlotClasses, "data-component": "time-slot", "data-slot": "time-slot", disabled: slot.disabled, nativeButton: true, render: (buttonProps) => _jsx("button", { type: "button", ...buttonProps }), value: slot.value, children: slot.label ?? slot.value }, slot.value))) }));
+};

package/dist/components/time-slot-picker.d.ts

@@ -0,0 +1 @@
+export { type TimeSlot, TimeSlotPicker, type TimeSlotPickerProps, } from "./time-slot-picker/time-slot-picker-root.js";

package/dist/components/time-slot-picker.js

@@ -0,0 +1 @@
+export { TimeSlotPicker, } from "./time-slot-picker/time-slot-picker-root.js";