@usefragments/ui 1.6.0 → 2.0.0

package/dist/components/Theme/index.js

@@ -5,6 +5,8 @@ import { ComponentDefaultsProvider } from "../ComponentDefaults/index.js";
 import { ThemeToggle } from "../ThemeToggle/index.js";
 import { useTheme, ThemeContext } from "./context.js";
 import { applyMeasurementSelection } from "../../measurements/generated.js";
+import { isProductionBuild } from "../../utils/env.js";
+import { ThemeButton } from "../ThemeToggle/ThemeButton.js";
 function useSystemPreference() {
   const [preference, setPreference] = React.useState("light");
   React.useEffect(() => {
@@ -19,6 +21,19 @@ function useSystemPreference() {
   }, []);
   return preference;
 }
+function suppressTransitions() {
+  const style = document.createElement("style");
+  style.textContent = "*,*::before,*::after{transition:none!important}";
+  document.head.append(style);
+  return () => {
+    void document.body.offsetHeight;
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(() => requestAnimationFrame(() => style.remove()));
+    } else {
+      style.remove();
+    }
+  };
+}
 function ThemeProvider({
   children,
   componentDefaults,
@@ -30,7 +45,7 @@ function ThemeProvider({
   attribute = "data-theme"
 }) {
   const systemPreference = useSystemPreference();
-  if (process.env.NODE_ENV !== "production" && defaultTheme !== void 0) {
+  if (!isProductionBuild() && defaultTheme !== void 0) {
     console.warn(
       "[Fragments] ThemeProvider: `defaultTheme` is deprecated. Use `defaultMode` instead. `defaultTheme` will be removed in v1.0."
     );
@@ -54,12 +69,15 @@ function ThemeProvider({
   React.useEffect(() => {
     if (typeof document === "undefined" || !mounted) return;
     const root = document.documentElement;
+    const current = attribute === "data-theme" ? root.getAttribute("data-theme") : root.classList.contains("dark") ? "dark" : root.classList.contains("light") ? "light" : null;
+    const restore = current !== resolvedMode ? suppressTransitions() : null;
     if (attribute === "data-theme") {
       root.setAttribute("data-theme", resolvedMode);
     } else if (attribute === "class") {
       root.classList.remove("light", "dark");
       root.classList.add(resolvedMode);
     }
+    restore == null ? void 0 : restore();
   }, [resolvedMode, attribute, mounted]);
   React.useEffect(() => {
     if (typeof window === "undefined" || !storageKey || !mounted) return;
@@ -95,6 +113,7 @@ const Theme = Object.assign(ThemeProvider, {
   Root: ThemeProvider,
   Provider: ThemeProvider,
   Toggle: ThemeToggle,
+  Button: ThemeButton,
   useTheme
 });
 function hexToRgb(hex) {
@@ -128,13 +147,11 @@ function configureTheme(options) {
   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);
-  applyMeasurementSelection(root, {
-    density: options.density,
-    radiusStyle: options.radiusStyle
-  });
+  applyMeasurementSelection(root, { radiusStyle: options.radiusStyle });
 }
 export {
   Theme,
+  ThemeButton,
   ThemeProvider,
   ThemeToggle,
   configureTheme,

package/dist/components/ThemeToggle/ThemeButton.cjs

@@ -0,0 +1,51 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const index = require("../IconButton/index.cjs");
+const context = require("../Theme/context.cjs");
+const icons = require("./icons.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 ThemeButton = React__namespace.forwardRef(
+  function ThemeButton2({ value: controlledValue, onValueChange, "aria-label": ariaLabel, ...rest }, ref) {
+    const { resolvedMode, toggleMode } = context.useTheme();
+    const isControlled = controlledValue !== void 0;
+    const resolved = isControlled ? controlledValue : resolvedMode;
+    const nextMode = resolved === "dark" ? "light" : "dark";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.IconButton,
+      {
+        ref,
+        variant: "ghost",
+        "aria-label": ariaLabel ?? (resolved === "dark" ? "Switch to light mode" : "Switch to dark mode"),
+        onClick: () => {
+          if (isControlled) {
+            onValueChange == null ? void 0 : onValueChange(nextMode);
+          } else {
+            toggleMode();
+          }
+        },
+        ...rest,
+        children: resolved === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(icons.MoonIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.SunIcon, {})
+      }
+    );
+  }
+);
+exports.ThemeButton = ThemeButton;

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type IconButtonProps } from "../IconButton";
+export interface ThemeButtonProps extends Omit<IconButtonProps, "children" | "variant" | "pressed" | "onClick"> {
+    /** Controlled value for custom usage (bypasses theme context) */
+    value?: "light" | "dark";
+    /** Callback when value changes (for controlled usage) */
+    onValueChange?: (value: "light" | "dark") => void;
+}
+/**
+ * A single ghost icon button that shows the resolved color mode and flips
+ * light and dark on click. Built on `IconButton`, so it takes the same
+ * `size` and forwards button DOM props. For the segmented light/dark/system
+ * control, use `ThemeToggle`.
+ */
+export declare const ThemeButton: React.ForwardRefExoticComponent<ThemeButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ThemeButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeButton.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeToggle/ThemeButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAIjE,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IAC7E,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,yDAAyD;IACzD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;CACnD;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,4FA2BvB,CAAC"}

package/dist/components/ThemeToggle/ThemeButton.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { IconButton } from "../IconButton/index.js";
+import { useTheme } from "../Theme/context.js";
+import { MoonIcon, SunIcon } from "./icons.js";
+const ThemeButton = React.forwardRef(
+  function ThemeButton2({ value: controlledValue, onValueChange, "aria-label": ariaLabel, ...rest }, ref) {
+    const { resolvedMode, toggleMode } = useTheme();
+    const isControlled = controlledValue !== void 0;
+    const resolved = isControlled ? controlledValue : resolvedMode;
+    const nextMode = resolved === "dark" ? "light" : "dark";
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref,
+        variant: "ghost",
+        "aria-label": ariaLabel ?? (resolved === "dark" ? "Switch to light mode" : "Switch to dark mode"),
+        onClick: () => {
+          if (isControlled) {
+            onValueChange == null ? void 0 : onValueChange(nextMode);
+          } else {
+            toggleMode();
+          }
+        },
+        ...rest,
+        children: resolved === "dark" ? /* @__PURE__ */ jsx(MoonIcon, {}) : /* @__PURE__ */ jsx(SunIcon, {})
+      }
+    );
+  }
+);
+export {
+  ThemeButton
+};

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const toggleGroup = "_toggleGroup_yrvzx_1";
-const toggleButton = "_toggleButton_yrvzx_10";
-const toggleButtonActive = "_toggleButtonActive_yrvzx_51";
-const sizeSm = "_sizeSm_yrvzx_64";
-const sizeMd = "_sizeMd_yrvzx_85";
-const sizeLg = "_sizeLg_yrvzx_106";
+const toggleGroup = "_toggleGroup_244y0_1";
+const toggleButton = "_toggleButton_244y0_10";
+const toggleButtonActive = "_toggleButtonActive_244y0_54";
+const sizeSm = "_sizeSm_244y0_67";
+const sizeMd = "_sizeMd_244y0_88";
+const sizeLg = "_sizeLg_244y0_109";
 const styles = {
   toggleGroup,
   toggleButton,

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

@@ -1,9 +1,9 @@
-const toggleGroup = "_toggleGroup_yrvzx_1";
-const toggleButton = "_toggleButton_yrvzx_10";
-const toggleButtonActive = "_toggleButtonActive_yrvzx_51";
-const sizeSm = "_sizeSm_yrvzx_64";
-const sizeMd = "_sizeMd_yrvzx_85";
-const sizeLg = "_sizeLg_yrvzx_106";
+const toggleGroup = "_toggleGroup_244y0_1";
+const toggleButton = "_toggleButton_244y0_10";
+const toggleButtonActive = "_toggleButtonActive_244y0_54";
+const sizeSm = "_sizeSm_244y0_67";
+const sizeMd = "_sizeMd_244y0_88";
+const sizeLg = "_sizeLg_244y0_109";
 const styles = {
   toggleGroup,
   toggleButton,

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,49 +4,8 @@ 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,
   showSystem = false,
@@ -60,6 +19,7 @@ function ThemeToggle({
   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)}`];
   const handleModeChange = (newMode) => {
     if (isControlled) {
       onValueChange == null ? void 0 : onValueChange(newMode);
@@ -67,11 +27,7 @@ function ThemeToggle({
       setContextMode(newMode);
     }
   };
-  const groupClasses = [
-    ThemeToggle_module.default.toggleGroup,
-    ThemeToggle_module.default[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
-    className
-  ].filter(Boolean).join(" ");
+  const groupClasses = [ThemeToggle_module.default.toggleGroup, sizeClass, className].filter(Boolean).join(" ");
   const getButtonClasses = (buttonMode) => {
     return [ThemeToggle_module.default.toggleButton, currentMode === buttonMode && ThemeToggle_module.default.toggleButtonActive].filter(Boolean).join(" ");
   };
@@ -85,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(
@@ -96,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(
@@ -107,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,6 +1,7 @@
 import * as React from "react";
-export interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Size of the toggle button */
+export { ThemeButton, type ThemeButtonProps } from "./ThemeButton";
+export interface ThemeToggleProps extends React.HTMLAttributes<HTMLElement> {
+    /** Size of the toggle buttons */
     size?: "sm" | "md" | "lg";
     /** Whether to include system mode option (default: false) */
     showSystem?: boolean;
@@ -12,7 +13,8 @@ export interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
     "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`.

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,cAAc,CAAC;IAC5E,gCAAgC;IAChC,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;AA+CD;;;;;GAKG;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,2CAgElB"}
+{"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

@@ -2,49 +2,8 @@
 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,
   showSystem = false,
@@ -58,6 +17,7 @@ function ThemeToggle({
   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)}`];
   const handleModeChange = (newMode) => {
     if (isControlled) {
       onValueChange == null ? void 0 : onValueChange(newMode);
@@ -65,11 +25,7 @@ function ThemeToggle({
       setContextMode(newMode);
     }
   };
-  const groupClasses = [
-    styles.toggleGroup,
-    styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
-    className
-  ].filter(Boolean).join(" ");
+  const groupClasses = [styles.toggleGroup, sizeClass, className].filter(Boolean).join(" ");
   const getButtonClasses = (buttonMode) => {
     return [styles.toggleButton, currentMode === buttonMode && styles.toggleButtonActive].filter(Boolean).join(" ");
   };

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_4ldts_1";
-const main = "_main_4ldts_8";
-const label = "_label_4ldts_14";
-const elapsed = "_elapsed_4ldts_23";
-const steps = "_steps_4ldts_33";
-const step = "_step_4ldts_33";
-const stepIndicator = "_stepIndicator_4ldts_54";
-const stepDot = "_stepDot_4ldts_68";
-const stepLabel = "_stepLabel_4ldts_76";
-const stepPending = "_stepPending_4ldts_80";
-const stepActive = "_stepActive_4ldts_84";
-const stepComplete = "_stepComplete_4ldts_91";
-const stepError = "_stepError_4ldts_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_4ldts_1";
-const main = "_main_4ldts_8";
-const label = "_label_4ldts_14";
-const elapsed = "_elapsed_4ldts_23";
-const steps = "_steps_4ldts_33";
-const step = "_step_4ldts_33";
-const stepIndicator = "_stepIndicator_4ldts_54";
-const stepDot = "_stepDot_4ldts_68";
-const stepLabel = "_stepLabel_4ldts_76";
-const stepPending = "_stepPending_4ldts_80";
-const stepActive = "_stepActive_4ldts_84";
-const stepComplete = "_stepComplete_4ldts_91";
-const stepError = "_stepError_4ldts_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
 };