@usefragments/ui 1.0.0

package/dist/components/Theme/index.js

@@ -0,0 +1,336 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ComponentDefaultsProvider, useResolvedControlSize } from "../ComponentDefaults/index.js";
+import styles from "./ThemeToggle.module.scss.js";
+const ThemeContext = React.createContext(null);
+function useSystemPreference() {
+  const [preference, setPreference] = React.useState("light");
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setPreference(mq.matches ? "dark" : "light");
+    const handler = (e) => {
+      setPreference(e.matches ? "dark" : "light");
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return preference;
+}
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    return {
+      mode: "system",
+      setMode: () => {
+      },
+      resolvedMode: "light",
+      systemPreference: "light",
+      toggleMode: () => {
+      }
+    };
+  }
+  return context;
+}
+function SunIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z" })
+    }
+  );
+}
+function MoonIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z" })
+    }
+  );
+}
+function MonitorIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Zm-48,48a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,224Z" })
+    }
+  );
+}
+function ThemeProvider({
+  children,
+  componentDefaults,
+  defaultMode,
+  defaultTheme,
+  mode: controlledMode,
+  onModeChange,
+  storageKey = "fui-theme",
+  attribute = "data-theme"
+}) {
+  const systemPreference = useSystemPreference();
+  if (process.env.NODE_ENV !== "production" && defaultTheme !== void 0) {
+    console.warn(
+      "[Fragments] ThemeProvider: `defaultTheme` is deprecated. Use `defaultMode` instead. `defaultTheme` will be removed in v1.0."
+    );
+  }
+  const resolvedDefault = defaultMode ?? defaultTheme ?? "system";
+  const [internalMode, setInternalMode] = React.useState(resolvedDefault);
+  const [mounted, setMounted] = React.useState(false);
+  const isControlled = controlledMode !== void 0;
+  const mode = isControlled ? controlledMode : internalMode;
+  const resolvedMode = mode === "system" ? systemPreference : mode;
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!isControlled && storageKey) {
+      const stored = localStorage.getItem(storageKey);
+      if (stored && ["light", "dark", "system"].includes(stored)) {
+        setInternalMode(stored);
+      }
+    }
+    setMounted(true);
+  }, [isControlled, storageKey]);
+  React.useEffect(() => {
+    if (typeof document === "undefined" || !mounted) return;
+    const root = document.documentElement;
+    if (attribute === "data-theme") {
+      root.setAttribute("data-theme", resolvedMode);
+    } else if (attribute === "class") {
+      root.classList.remove("light", "dark");
+      root.classList.add(resolvedMode);
+    }
+  }, [resolvedMode, attribute, mounted]);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !storageKey || !mounted) return;
+    localStorage.setItem(storageKey, mode);
+  }, [mode, storageKey, mounted]);
+  const setMode = React.useCallback(
+    (newMode) => {
+      if (!isControlled) {
+        setInternalMode(newMode);
+      }
+      onModeChange == null ? void 0 : onModeChange(newMode);
+    },
+    [isControlled, onModeChange]
+  );
+  const toggleMode = React.useCallback(() => {
+    const next = resolvedMode === "light" ? "dark" : "light";
+    setMode(next);
+  }, [resolvedMode, setMode]);
+  const contextValue = {
+    mode,
+    setMode,
+    resolvedMode,
+    systemPreference,
+    toggleMode
+  };
+  const themedChildren = /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
+  if (!componentDefaults) {
+    return themedChildren;
+  }
+  return /* @__PURE__ */ jsx(ComponentDefaultsProvider, { value: componentDefaults, children: themedChildren });
+}
+function ThemeToggle({
+  size: sizeProp,
+  showSystem = false,
+  value: controlledValue,
+  onValueChange,
+  "aria-label": ariaLabel,
+  className,
+  ...htmlProps
+}) {
+  const size = useResolvedControlSize(sizeProp);
+  const { mode: contextMode, setMode: setContextMode } = useTheme();
+  const isControlled = controlledValue !== void 0;
+  const currentMode = isControlled ? controlledValue : contextMode;
+  const handleModeChange = (newMode) => {
+    if (isControlled) {
+      onValueChange == null ? void 0 : onValueChange(newMode);
+    } else {
+      setContextMode(newMode);
+    }
+  };
+  const groupClasses = [
+    styles.toggleGroup,
+    styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
+    className
+  ].filter(Boolean).join(" ");
+  const getButtonClasses = (buttonMode) => {
+    return [styles.toggleButton, currentMode === buttonMode && styles.toggleButtonActive].filter(Boolean).join(" ");
+  };
+  const label = ariaLabel || "Theme toggle";
+  return /* @__PURE__ */ jsxs("div", { ...htmlProps, className: groupClasses, role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getButtonClasses("light"),
+        onClick: () => handleModeChange("light"),
+        "aria-pressed": currentMode === "light",
+        "aria-label": "Light mode",
+        children: /* @__PURE__ */ jsx(SunIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getButtonClasses("dark"),
+        onClick: () => handleModeChange("dark"),
+        "aria-pressed": currentMode === "dark",
+        "aria-label": "Dark mode",
+        children: /* @__PURE__ */ jsx(MoonIcon, {})
+      }
+    ),
+    showSystem && !isControlled && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getButtonClasses("system"),
+        onClick: () => setContextMode("system"),
+        "aria-pressed": contextMode === "system",
+        "aria-label": "System preference",
+        children: /* @__PURE__ */ jsx(MonitorIcon, {})
+      }
+    )
+  ] });
+}
+const Theme = Object.assign(ThemeProvider, {
+  Root: ThemeProvider,
+  Provider: ThemeProvider,
+  Toggle: ThemeToggle,
+  useTheme
+});
+const RADIUS_PRESETS = {
+  sharp: { sm: "0", md: "0", lg: "0", xl: "0" },
+  subtle: { sm: "0.125rem", md: "0.25rem", lg: "0.375rem", xl: "0.5rem" },
+  default: { sm: "0.25rem", md: "0.429rem", lg: "0.571rem", xl: "0.857rem" },
+  rounded: { sm: "0.375rem", md: "0.5rem", lg: "0.75rem", xl: "1rem" },
+  pill: { sm: "0.5rem", md: "0.75rem", lg: "1rem", xl: "1.5rem" }
+};
+const DENSITY_CONFIGS = {
+  compact: {
+    baseUnit: 6,
+    baseFontSize: 14,
+    buttonHeightXs: 32,
+    buttonHeights: [32, 32, 36],
+    inputHeights: [32, 32, 36],
+    touchTargets: [32, 32, 40],
+    sidebarItemHeight: 32
+  },
+  default: {
+    baseUnit: 7,
+    baseFontSize: 14,
+    buttonHeightXs: 32,
+    buttonHeights: [32, 40, 44],
+    inputHeights: [32, 40, 44],
+    touchTargets: [32, 32, 44],
+    sidebarItemHeight: 32
+  },
+  relaxed: {
+    baseUnit: 8,
+    baseFontSize: 14,
+    buttonHeightXs: 32,
+    buttonHeights: [32, 44, 48],
+    inputHeights: [32, 44, 48],
+    touchTargets: [32, 40, 48],
+    sidebarItemHeight: 36
+  }
+};
+function pxToRem(px, baseFontSize) {
+  return `${px / baseFontSize}rem`;
+}
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return null;
+  return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
+}
+function adjustLightness(hex, amount) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const [r, g, b] = rgb;
+  const adjust = (v) => Math.max(0, Math.min(255, Math.round(v + amount)));
+  return `#${adjust(r).toString(16).padStart(2, "0")}${adjust(g).toString(16).padStart(2, "0")}${adjust(b).toString(16).padStart(2, "0")}`;
+}
+function setVar(el, name, value) {
+  el.style.setProperty(name, value);
+}
+function configureTheme(options) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (options.brand) {
+    setVar(root, "--fui-color-accent", options.brand);
+    setVar(root, "--fui-color-accent-hover", adjustLightness(options.brand, -20));
+    setVar(root, "--fui-color-accent-active", adjustLightness(options.brand, -40));
+    setVar(root, "--fui-focus-ring-color", `${options.brand}66`);
+  }
+  if (options.danger) {
+    setVar(root, "--fui-color-danger", options.danger);
+    setVar(root, "--fui-color-danger-hover", adjustLightness(options.danger, -20));
+  }
+  if (options.success) setVar(root, "--fui-color-success", options.success);
+  if (options.warning) setVar(root, "--fui-color-warning", options.warning);
+  if (options.info) setVar(root, "--fui-color-info", options.info);
+  if (options.radiusStyle) {
+    const r = RADIUS_PRESETS[options.radiusStyle];
+    if (r) {
+      setVar(root, "--fui-radius-sm", r.sm);
+      setVar(root, "--fui-radius-md", r.md);
+      setVar(root, "--fui-radius-lg", r.lg);
+      setVar(root, "--fui-radius-xl", r.xl);
+    }
+  }
+  if (options.density) {
+    const d = DENSITY_CONFIGS[options.density];
+    if (d) {
+      const unitRem = d.baseUnit / d.baseFontSize;
+      setVar(root, "--fui-space-0-5", `${unitRem * 0.3}rem`);
+      setVar(root, "--fui-space-0-75", `${unitRem * 0.43}rem`);
+      setVar(root, "--fui-space-1", `${unitRem}rem`);
+      setVar(root, "--fui-space-2", `${unitRem * 2}rem`);
+      setVar(root, "--fui-space-3", `${unitRem * 3}rem`);
+      setVar(root, "--fui-space-4", `${unitRem * 4}rem`);
+      setVar(root, "--fui-space-5", `${unitRem * 5}rem`);
+      setVar(root, "--fui-space-6", `${unitRem * 6}rem`);
+      setVar(root, "--fui-space-8", `${unitRem * 8}rem`);
+      setVar(root, "--fui-space-10", `${unitRem * 10}rem`);
+      setVar(root, "--fui-space-12", `${unitRem * 12}rem`);
+      setVar(root, "--fui-button-height-xs", pxToRem(d.buttonHeightXs, d.baseFontSize));
+      setVar(root, "--fui-button-height-sm", pxToRem(d.buttonHeights[0], d.baseFontSize));
+      setVar(root, "--fui-button-height-md", pxToRem(d.buttonHeights[1], d.baseFontSize));
+      setVar(root, "--fui-button-height-lg", pxToRem(d.buttonHeights[2], d.baseFontSize));
+      setVar(root, "--fui-input-height-sm", pxToRem(d.inputHeights[0], d.baseFontSize));
+      setVar(root, "--fui-input-height", pxToRem(d.inputHeights[1], d.baseFontSize));
+      setVar(root, "--fui-input-height-lg", pxToRem(d.inputHeights[2], d.baseFontSize));
+      setVar(root, "--fui-touch-sm", pxToRem(d.touchTargets[0], d.baseFontSize));
+      setVar(root, "--fui-touch-md", pxToRem(d.touchTargets[1], d.baseFontSize));
+      setVar(root, "--fui-touch-lg", pxToRem(d.touchTargets[2], d.baseFontSize));
+      setVar(root, "--fui-target-size-min", pxToRem(32, d.baseFontSize));
+      setVar(root, "--fui-sidebar-item-height", pxToRem(d.sidebarItemHeight, d.baseFontSize));
+      setVar(root, "--fui-base-unit", `${d.baseUnit}px`);
+    }
+  }
+}
+export {
+  Theme,
+  ThemeProvider,
+  ThemeToggle,
+  configureTheme,
+  useTheme
+};

package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const thinkingIndicator = "_thinkingIndicator_1fx6u_1";
+const main = "_main_1fx6u_8";
+const label = "_label_1fx6u_14";
+const elapsed = "_elapsed_1fx6u_25";
+const steps = "_steps_1fx6u_34";
+const step = "_step_1fx6u_34";
+const stepIndicator = "_stepIndicator_1fx6u_51";
+const stepDot = "_stepDot_1fx6u_60";
+const stepLabel = "_stepLabel_1fx6u_68";
+const stepPending = "_stepPending_1fx6u_72";
+const stepActive = "_stepActive_1fx6u_76";
+const stepComplete = "_stepComplete_1fx6u_83";
+const stepError = "_stepError_1fx6u_90";
+const styles = {
+  thinkingIndicator,
+  main,
+  label,
+  elapsed,
+  steps,
+  step,
+  stepIndicator,
+  stepDot,
+  stepLabel,
+  stepPending,
+  stepActive,
+  stepComplete,
+  stepError
+};
+exports.default = styles;
+exports.elapsed = elapsed;
+exports.label = label;
+exports.main = main;
+exports.step = step;
+exports.stepActive = stepActive;
+exports.stepComplete = stepComplete;
+exports.stepDot = stepDot;
+exports.stepError = stepError;
+exports.stepIndicator = stepIndicator;
+exports.stepLabel = stepLabel;
+exports.stepPending = stepPending;
+exports.steps = steps;
+exports.thinkingIndicator = thinkingIndicator;

package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.js

@@ -0,0 +1,44 @@
+const thinkingIndicator = "_thinkingIndicator_1fx6u_1";
+const main = "_main_1fx6u_8";
+const label = "_label_1fx6u_14";
+const elapsed = "_elapsed_1fx6u_25";
+const steps = "_steps_1fx6u_34";
+const step = "_step_1fx6u_34";
+const stepIndicator = "_stepIndicator_1fx6u_51";
+const stepDot = "_stepDot_1fx6u_60";
+const stepLabel = "_stepLabel_1fx6u_68";
+const stepPending = "_stepPending_1fx6u_72";
+const stepActive = "_stepActive_1fx6u_76";
+const stepComplete = "_stepComplete_1fx6u_83";
+const stepError = "_stepError_1fx6u_90";
+const styles = {
+  thinkingIndicator,
+  main,
+  label,
+  elapsed,
+  steps,
+  step,
+  stepIndicator,
+  stepDot,
+  stepLabel,
+  stepPending,
+  stepActive,
+  stepComplete,
+  stepError
+};
+export {
+  styles as default,
+  elapsed,
+  label,
+  main,
+  step,
+  stepActive,
+  stepComplete,
+  stepDot,
+  stepError,
+  stepIndicator,
+  stepLabel,
+  stepPending,
+  steps,
+  thinkingIndicator
+};

package/dist/components/ThinkingIndicator/index.cjs

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ThinkingIndicator_module = require("./ThinkingIndicator.module.scss.cjs");
+const index = require("../Loading/index.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ThinkingIndicatorContext = React__namespace.createContext(null);
+function useThinkingIndicatorContext() {
+  const context = React__namespace.useContext(ThinkingIndicatorContext);
+  if (!context) {
+    throw new Error("ThinkingIndicator compound components must be used within a ThinkingIndicator");
+  }
+  return context;
+}
+function useElapsedTime(active) {
+  const [elapsed, setElapsed] = React__namespace.useState(0);
+  const startTimeRef = React__namespace.useRef(Date.now());
+  React__namespace.useEffect(() => {
+    if (!active) {
+      setElapsed(0);
+      return;
+    }
+    startTimeRef.current = Date.now();
+    const interval = setInterval(() => {
+      setElapsed(Date.now() - startTimeRef.current);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [active]);
+  if (elapsed < 1e3) return "";
+  const seconds = Math.floor(elapsed / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function ErrorIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function ThinkingSteps({ children, className, ...htmlProps }) {
+  const classes = [ThinkingIndicator_module.default.steps, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
+}
+function ThinkingStep({
+  label,
+  status = "pending",
+  className,
+  ...htmlProps
+}) {
+  const classes = [
+    ThinkingIndicator_module.default.step,
+    ThinkingIndicator_module.default[`step${status.charAt(0).toUpperCase() + status.slice(1)}`],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: classes, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: ThinkingIndicator_module.default.stepIndicator, children: [
+      status === "complete" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}),
+      status === "error" && /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {}),
+      status === "active" && /* @__PURE__ */ jsxRuntime.jsx(index.Loading, { size: "sm", variant: "spinner", color: "current", label: "" }),
+      status === "pending" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.stepDot })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.stepLabel, children: label })
+  ] });
+}
+function ThinkingIndicatorRoot({
+  active = true,
+  label = "Thinking...",
+  variant = "dots",
+  showElapsed = false,
+  steps,
+  className,
+  ...htmlProps
+}) {
+  const elapsedTime = useElapsedTime(active && showElapsed);
+  const contextValue = {
+    active,
+    variant
+  };
+  if (!active) return null;
+  const classes = [
+    ThinkingIndicator_module.default.thinkingIndicator,
+    className
+  ].filter(Boolean).join(" ");
+  const loadingVariant = variant === "dots" ? "dots" : variant === "pulse" ? "pulse" : "spinner";
+  return /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicatorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...htmlProps,
+      className: classes,
+      role: "status",
+      "aria-label": label,
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ThinkingIndicator_module.default.main, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(index.Loading, { size: "sm", variant: loadingVariant, color: "muted", label: "" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.label, children: label }),
+          showElapsed && elapsedTime && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.elapsed, children: elapsedTime })
+        ] }),
+        steps && steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ThinkingSteps, { children: steps.map((step) => /* @__PURE__ */ jsxRuntime.jsx(
+          ThinkingStep,
+          {
+            label: step.label,
+            status: step.status
+          },
+          step.id
+        )) })
+      ]
+    }
+  ) });
+}
+const ThinkingIndicator = Object.assign(ThinkingIndicatorRoot, {
+  Steps: ThinkingSteps,
+  Step: ThinkingStep
+});
+exports.ThinkingIndicator = ThinkingIndicator;
+exports.ThinkingIndicatorRoot = ThinkingIndicatorRoot;
+exports.ThinkingStep = ThinkingStep;
+exports.ThinkingSteps = ThinkingSteps;
+exports.useThinkingIndicatorContext = useThinkingIndicatorContext;

package/dist/components/ThinkingIndicator/index.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+export type ThinkingVariant = 'dots' | 'pulse' | 'spinner';
+export type StepStatus = 'pending' | 'active' | 'complete' | 'error';
+export interface ThinkingStep {
+    id: string;
+    label: string;
+    status?: StepStatus;
+}
+export interface ThinkingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Whether thinking is active */
+    active?: boolean;
+    /** Status text */
+    label?: string;
+    /** Animation style */
+    variant?: ThinkingVariant;
+    /** Show elapsed time */
+    showElapsed?: boolean;
+    /** Multi-step progress */
+    steps?: ThinkingStep[];
+}
+export interface ThinkingStepsProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export interface ThinkingStepProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Step label */
+    label: string;
+    /** Step status */
+    status?: StepStatus;
+}
+interface ThinkingIndicatorContextValue {
+    active: boolean;
+    variant: ThinkingVariant;
+}
+declare function useThinkingIndicatorContext(): ThinkingIndicatorContextValue;
+declare function ThinkingSteps({ children, className, ...htmlProps }: ThinkingStepsProps): import("react/jsx-runtime").JSX.Element;
+declare function ThinkingStep({ label, status, className, ...htmlProps }: ThinkingStepProps): import("react/jsx-runtime").JSX.Element;
+declare function ThinkingIndicatorRoot({ active, label, variant, showElapsed, steps, className, ...htmlProps }: ThinkingIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const ThinkingIndicator: typeof ThinkingIndicatorRoot & {
+    Steps: typeof ThinkingSteps;
+    Step: typeof ThinkingStep;
+};
+export { ThinkingIndicatorRoot, ThinkingSteps, ThinkingStep, };
+export { useThinkingIndicatorContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ThinkingIndicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThinkingIndicator/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAC3D,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAMD,UAAU,6BAA6B;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;CAC1B;AAID,iBAAS,2BAA2B,kCAMnC;AAiFD,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,kBAAkB,2CAQ/E;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,MAAkB,EAClB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,iBAAiB,2CAkBnB;AAMD,iBAAS,qBAAqB,CAAC,EAC7B,MAAa,EACb,KAAqB,EACrB,OAAgB,EAChB,WAAmB,EACnB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,sBAAsB,kDAmDxB;AAMD,eAAO,MAAM,iBAAiB;;;CAG5B,CAAC;AAEH,OAAO,EACL,qBAAqB,EACrB,aAAa,EACb,YAAY,GACb,CAAC;AAEF,OAAO,EAAE,2BAA2B,EAAE,CAAC"}