@usefragments/ui 1.7.0 → 2.0.1

package/dist/components/ThemeToggle/icons.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+function SunIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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" })
+    }
+  );
+}
+exports.MonitorIcon = MonitorIcon;
+exports.MoonIcon = MoonIcon;
+exports.SunIcon = SunIcon;

package/dist/components/ThemeToggle/icons.d.ts

@@ -0,0 +1,10 @@
+export declare function SunIcon({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MoonIcon({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MonitorIcon({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/ThemeToggle/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeToggle/icons.tsx"],"names":[],"mappings":"AAEA,wBAAgB,OAAO,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAavD;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAaxD;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAa3D"}

package/dist/components/ThemeToggle/icons.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+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" })
+    }
+  );
+}
+export {
+  MonitorIcon,
+  MoonIcon,
+  SunIcon
+};

package/dist/components/ThemeToggle/index.cjs

@@ -4,52 +4,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const index = require("../ComponentDefaults/index.cjs");
 const context = require("../Theme/context.cjs");
+const icons = require("./icons.cjs");
 const ThemeToggle_module = require("./ThemeToggle.module.scss.cjs");
-function SunIcon({ size = 20 }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 ThemeToggle({
   size: sizeProp,
-  appearance = "group",
   showSystem = false,
   value: controlledValue,
   onValueChange,
@@ -58,37 +16,10 @@ function ThemeToggle({
   ...htmlProps
 }) {
   const size = index.useResolvedControlSize(sizeProp);
-  const {
-    mode: contextMode,
-    setMode: setContextMode,
-    resolvedMode,
-    toggleMode
-  } = context.useTheme();
+  const { mode: contextMode, setMode: setContextMode } = context.useTheme();
   const isControlled = controlledValue !== void 0;
   const currentMode = isControlled ? controlledValue : contextMode;
   const sizeClass = ThemeToggle_module.default[`size${size.charAt(0).toUpperCase() + size.slice(1)}`];
-  if (appearance === "icon") {
-    const resolved = isControlled ? controlledValue : resolvedMode;
-    const nextMode = resolved === "dark" ? "light" : "dark";
-    const iconClasses = [ThemeToggle_module.default.toggleButton, ThemeToggle_module.default.iconButton, sizeClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        ...htmlProps,
-        type: "button",
-        className: iconClasses,
-        onClick: () => {
-          if (isControlled) {
-            onValueChange == null ? void 0 : onValueChange(nextMode);
-          } else {
-            toggleMode();
-          }
-        },
-        "aria-label": ariaLabel ?? (resolved === "dark" ? "Switch to light mode" : "Switch to dark mode"),
-        children: resolved === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {})
-      }
-    );
-  }
   const handleModeChange = (newMode) => {
     if (isControlled) {
       onValueChange == null ? void 0 : onValueChange(newMode);
@@ -110,7 +41,7 @@ function ThemeToggle({
         onClick: () => handleModeChange("light"),
         "aria-pressed": currentMode === "light",
         "aria-label": "Light mode",
-        children: /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.SunIcon, {})
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -121,7 +52,7 @@ function ThemeToggle({
         onClick: () => handleModeChange("dark"),
         "aria-pressed": currentMode === "dark",
         "aria-label": "Dark mode",
-        children: /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.MoonIcon, {})
       }
     ),
     showSystem && !isControlled && /* @__PURE__ */ jsxRuntime.jsx(
@@ -132,7 +63,7 @@ function ThemeToggle({
         onClick: () => setContextMode("system"),
         "aria-pressed": contextMode === "system",
         "aria-label": "System preference",
-        children: /* @__PURE__ */ jsxRuntime.jsx(MonitorIcon, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.MonitorIcon, {})
       }
     )
   ] });

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

@@ -1,12 +1,8 @@
 import * as React from "react";
+export { ThemeButton, type ThemeButtonProps } from "./ThemeButton";
 export interface ThemeToggleProps extends React.HTMLAttributes<HTMLElement> {
-    /** Size of the toggle button */
+    /** Size of the toggle buttons */
     size?: "sm" | "md" | "lg";
-    /**
-     * `group` is the segmented light/dark control. `icon` is a single button
-     * that shows the current resolved theme and toggles light ↔ dark.
-     */
-    appearance?: "group" | "icon";
     /** Whether to include system mode option (default: false) */
     showSystem?: boolean;
     /** Controlled value for custom usage (bypasses theme context) */
@@ -17,10 +13,11 @@ export interface ThemeToggleProps extends React.HTMLAttributes<HTMLElement> {
     "aria-label"?: string;
 }
 /**
- * Fragmented button group for choosing light, dark, or system theme modes.
+ * Segmented control for choosing light, dark, or system theme modes.
+ * For a single icon button that flips light and dark, use `ThemeButton`.
  *
  * It can read and update ThemeProvider context, or operate as a controlled
  * light/dark selector through `value` and `onValueChange`.
  */
-export declare function ThemeToggle({ size: sizeProp, appearance, showSystem, value: controlledValue, onValueChange, "aria-label": ariaLabel, className, ...htmlProps }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeToggle({ size: sizeProp, showSystem, value: controlledValue, onValueChange, "aria-label": ariaLabel, className, ...htmlProps }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeToggle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,gCAAgC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,yDAAyD;IACzD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAClD,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA+CD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EAAE,QAAQ,EACd,UAAoB,EACpB,UAAkB,EAClB,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CA8FlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeToggle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,yDAAyD;IACzD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAClD,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EAAE,QAAQ,EACd,UAAkB,EAClB,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CA2DlB"}

package/dist/components/ThemeToggle/index.js

@@ -1,53 +1,11 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useResolvedControlSize } from "../ComponentDefaults/index.js";
 import { useTheme } from "../Theme/context.js";
+import { SunIcon, MoonIcon, MonitorIcon } from "./icons.js";
 import styles from "./ThemeToggle.module.scss.js";
-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 ThemeToggle({
   size: sizeProp,
-  appearance = "group",
   showSystem = false,
   value: controlledValue,
   onValueChange,
@@ -56,37 +14,10 @@ function ThemeToggle({
   ...htmlProps
 }) {
   const size = useResolvedControlSize(sizeProp);
-  const {
-    mode: contextMode,
-    setMode: setContextMode,
-    resolvedMode,
-    toggleMode
-  } = useTheme();
+  const { mode: contextMode, setMode: setContextMode } = useTheme();
   const isControlled = controlledValue !== void 0;
   const currentMode = isControlled ? controlledValue : contextMode;
   const sizeClass = styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`];
-  if (appearance === "icon") {
-    const resolved = isControlled ? controlledValue : resolvedMode;
-    const nextMode = resolved === "dark" ? "light" : "dark";
-    const iconClasses = [styles.toggleButton, styles.iconButton, sizeClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ...htmlProps,
-        type: "button",
-        className: iconClasses,
-        onClick: () => {
-          if (isControlled) {
-            onValueChange == null ? void 0 : onValueChange(nextMode);
-          } else {
-            toggleMode();
-          }
-        },
-        "aria-label": ariaLabel ?? (resolved === "dark" ? "Switch to light mode" : "Switch to dark mode"),
-        children: resolved === "dark" ? /* @__PURE__ */ jsx(MoonIcon, {}) : /* @__PURE__ */ jsx(SunIcon, {})
-      }
-    );
-  }
   const handleModeChange = (newMode) => {
     if (isControlled) {
       onValueChange == null ? void 0 : onValueChange(newMode);

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

@@ -1,18 +1,19 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const thinkingIndicator = "_thinkingIndicator_1cy0p_1";
-const main = "_main_1cy0p_8";
-const label = "_label_1cy0p_14";
-const elapsed = "_elapsed_1cy0p_23";
-const steps = "_steps_1cy0p_33";
-const step = "_step_1cy0p_33";
-const stepIndicator = "_stepIndicator_1cy0p_54";
-const stepDot = "_stepDot_1cy0p_68";
-const stepLabel = "_stepLabel_1cy0p_76";
-const stepPending = "_stepPending_1cy0p_80";
-const stepActive = "_stepActive_1cy0p_84";
-const stepComplete = "_stepComplete_1cy0p_91";
-const stepError = "_stepError_1cy0p_98";
+const thinkingIndicator = "_thinkingIndicator_11lvy_1";
+const main = "_main_11lvy_8";
+const label = "_label_11lvy_14";
+const elapsed = "_elapsed_11lvy_24";
+const steps = "_steps_11lvy_34";
+const step = "_step_11lvy_34";
+const stepIndicator = "_stepIndicator_11lvy_55";
+const stepDot = "_stepDot_11lvy_69";
+const stepLabel = "_stepLabel_11lvy_77";
+const stepIdle = "_stepIdle_11lvy_81";
+const stepPending = "_stepPending_11lvy_85";
+const stepStreaming = "_stepStreaming_11lvy_86";
+const stepComplete = "_stepComplete_11lvy_94";
+const stepError = "_stepError_11lvy_101";
 const styles = {
   thinkingIndicator,
   main,
@@ -23,8 +24,9 @@ const styles = {
   stepIndicator,
   stepDot,
   stepLabel,
+  stepIdle,
   stepPending,
-  stepActive,
+  stepStreaming,
   stepComplete,
   stepError
 };
@@ -33,12 +35,13 @@ 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.stepIdle = stepIdle;
 exports.stepIndicator = stepIndicator;
 exports.stepLabel = stepLabel;
 exports.stepPending = stepPending;
+exports.stepStreaming = stepStreaming;
 exports.steps = steps;
 exports.thinkingIndicator = thinkingIndicator;

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

@@ -1,16 +1,17 @@
-const thinkingIndicator = "_thinkingIndicator_1cy0p_1";
-const main = "_main_1cy0p_8";
-const label = "_label_1cy0p_14";
-const elapsed = "_elapsed_1cy0p_23";
-const steps = "_steps_1cy0p_33";
-const step = "_step_1cy0p_33";
-const stepIndicator = "_stepIndicator_1cy0p_54";
-const stepDot = "_stepDot_1cy0p_68";
-const stepLabel = "_stepLabel_1cy0p_76";
-const stepPending = "_stepPending_1cy0p_80";
-const stepActive = "_stepActive_1cy0p_84";
-const stepComplete = "_stepComplete_1cy0p_91";
-const stepError = "_stepError_1cy0p_98";
+const thinkingIndicator = "_thinkingIndicator_11lvy_1";
+const main = "_main_11lvy_8";
+const label = "_label_11lvy_14";
+const elapsed = "_elapsed_11lvy_24";
+const steps = "_steps_11lvy_34";
+const step = "_step_11lvy_34";
+const stepIndicator = "_stepIndicator_11lvy_55";
+const stepDot = "_stepDot_11lvy_69";
+const stepLabel = "_stepLabel_11lvy_77";
+const stepIdle = "_stepIdle_11lvy_81";
+const stepPending = "_stepPending_11lvy_85";
+const stepStreaming = "_stepStreaming_11lvy_86";
+const stepComplete = "_stepComplete_11lvy_94";
+const stepError = "_stepError_11lvy_101";
 const styles = {
   thinkingIndicator,
   main,
@@ -21,8 +22,9 @@ const styles = {
   stepIndicator,
   stepDot,
   stepLabel,
+  stepIdle,
   stepPending,
-  stepActive,
+  stepStreaming,
   stepComplete,
   stepError
 };
@@ -32,13 +34,14 @@ export {
   label,
   main,
   step,
-  stepActive,
   stepComplete,
   stepDot,
   stepError,
+  stepIdle,
   stepIndicator,
   stepLabel,
   stepPending,
+  stepStreaming,
   steps,
   thinkingIndicator
 };

package/dist/components/ThinkingIndicator/index.cjs

@@ -92,7 +92,7 @@ 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 }) {
+function ThinkingStep({ label, status = "idle", className, ...htmlProps }) {
   const classes = [
     ThinkingIndicator_module.default.step,
     ThinkingIndicator_module.default[`step${status.charAt(0).toUpperCase() + status.slice(1)}`],
@@ -102,18 +102,18 @@ function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
     /* @__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(
+      (status === "pending" || status === "streaming") && /* @__PURE__ */ jsxRuntime.jsx(
         index.Loading,
         {
           size: "sm",
-          variant: "spinner",
+          kind: "spinner",
           color: "current",
           label: "",
           role: "presentation",
           "aria-hidden": "true"
         }
       ),
-      status === "pending" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.stepDot })
+      status === "idle" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.stepDot })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: ThinkingIndicator_module.default.stepLabel, children: label })
   ] });
@@ -121,7 +121,7 @@ function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
 function ThinkingIndicatorRoot({
   active = true,
   label = "Thinking...",
-  variant = "dots",
+  kind = "dots",
   showElapsed = false,
   steps,
   className,
@@ -130,18 +130,17 @@ function ThinkingIndicatorRoot({
   const elapsedTime = useElapsedTime(active && showElapsed);
   const contextValue = {
     active,
-    variant
+    kind
   };
   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,
+          kind,
           color: "muted",
           label: "",
           role: "presentation",

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

@@ -1,6 +1,7 @@
 import * as React from "react";
-export type ThinkingVariant = "dots" | "pulse" | "spinner";
-export type StepStatus = "pending" | "active" | "complete" | "error";
+export type ThinkingKind = "dots" | "pulse" | "spinner";
+/** Shared lifecycle axis: `idle` waits, `pending`/`streaming` are in flight. */
+export type StepStatus = "idle" | "pending" | "streaming" | "complete" | "error";
 export interface ThinkingStep {
     id: string;
     label: string;
@@ -12,7 +13,7 @@ export interface ThinkingIndicatorProps extends React.HTMLAttributes<HTMLDivElem
     /** Status text */
     label?: string;
     /** Animation style */
-    variant?: ThinkingVariant;
+    kind?: ThinkingKind;
     /** Show elapsed time */
     showElapsed?: boolean;
     /** Multi-step progress */
@@ -29,12 +30,12 @@ export interface ThinkingStepProps extends React.HTMLAttributes<HTMLDivElement>
 }
 interface ThinkingIndicatorContextValue {
     active: boolean;
-    variant: ThinkingVariant;
+    kind: ThinkingKind;
 }
 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;
+declare function ThinkingIndicatorRoot({ active, label, kind, showElapsed, steps, className, ...htmlProps }: ThinkingIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const ThinkingIndicator: typeof ThinkingIndicatorRoot & {
     Steps: typeof ThinkingSteps;
     Step: typeof ThinkingStep;

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

@@ -1 +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,kCAQnC;AA6ED,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,kBAAkB,2CAQ/E;AAED,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,MAAkB,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,iBAAiB,2CA6B9F;AAMD,iBAAS,qBAAqB,CAAC,EAC7B,MAAa,EACb,KAAqB,EACrB,OAAgB,EAChB,WAAmB,EACnB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,sBAAsB,kDAyCxB;AAMD,eAAO,MAAM,iBAAiB;;;CAG5B,CAAC;AAEH,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;AAE9D,OAAO,EAAE,2BAA2B,EAAE,CAAC"}
+{"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,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AACxD,gFAAgF;AAChF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjF,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,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,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,IAAI,EAAE,YAAY,CAAC;CACpB;AAID,iBAAS,2BAA2B,kCAQnC;AA6ED,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,kBAAkB,2CAQ/E;AAED,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,MAAe,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,iBAAiB,2CA6B3F;AAMD,iBAAS,qBAAqB,CAAC,EAC7B,MAAa,EACb,KAAqB,EACrB,IAAa,EACb,WAAmB,EACnB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,sBAAsB,kDAsCxB;AAMD,eAAO,MAAM,iBAAiB;;;CAG5B,CAAC;AAEH,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;AAE9D,OAAO,EAAE,2BAA2B,EAAE,CAAC"}

package/dist/components/ThinkingIndicator/index.js

@@ -73,7 +73,7 @@ function ThinkingSteps({ children, className, ...htmlProps }) {
   const classes = [styles.steps, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
 }
-function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
+function ThinkingStep({ label, status = "idle", className, ...htmlProps }) {
   const classes = [
     styles.step,
     styles[`step${status.charAt(0).toUpperCase() + status.slice(1)}`],
@@ -83,18 +83,18 @@ function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
     /* @__PURE__ */ jsxs("span", { className: styles.stepIndicator, children: [
       status === "complete" && /* @__PURE__ */ jsx(CheckIcon, {}),
       status === "error" && /* @__PURE__ */ jsx(ErrorIcon, {}),
-      status === "active" && /* @__PURE__ */ jsx(
+      (status === "pending" || status === "streaming") && /* @__PURE__ */ jsx(
         Loading,
         {
           size: "sm",
-          variant: "spinner",
+          kind: "spinner",
           color: "current",
           label: "",
           role: "presentation",
           "aria-hidden": "true"
         }
       ),
-      status === "pending" && /* @__PURE__ */ jsx("span", { className: styles.stepDot })
+      status === "idle" && /* @__PURE__ */ jsx("span", { className: styles.stepDot })
     ] }),
     /* @__PURE__ */ jsx("span", { className: styles.stepLabel, children: label })
   ] });
@@ -102,7 +102,7 @@ function ThinkingStep({ label, status = "pending", className, ...htmlProps }) {
 function ThinkingIndicatorRoot({
   active = true,
   label = "Thinking...",
-  variant = "dots",
+  kind = "dots",
   showElapsed = false,
   steps,
   className,
@@ -111,18 +111,17 @@ function ThinkingIndicatorRoot({
   const elapsedTime = useElapsedTime(active && showElapsed);
   const contextValue = {
     active,
-    variant
+    kind
   };
   if (!active) return null;
   const classes = [styles.thinkingIndicator, className].filter(Boolean).join(" ");
-  const loadingVariant = variant === "dots" ? "dots" : variant === "pulse" ? "pulse" : "spinner";
   return /* @__PURE__ */ jsx(ThinkingIndicatorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ...htmlProps, className: classes, role: "status", "aria-label": label, "aria-live": "polite", children: [
     /* @__PURE__ */ jsxs("div", { className: styles.main, children: [
       /* @__PURE__ */ jsx(
         Loading,
         {
           size: "sm",
-          variant: loadingVariant,
+          kind,
           color: "muted",
           label: "",
           role: "presentation",