@usefragments/ui 1.5.3 → 1.6.0

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

@@ -1,6 +1,9 @@
 import * as React from "react";
 import { type ComponentDefaults } from "../ComponentDefaults";
-export type ThemeMode = "light" | "dark" | "system";
+import { ThemeToggle } from "../ThemeToggle";
+import { useTheme, type ThemeMode } from "./context";
+export type { ThemeToggleProps } from "../ThemeToggle";
+export type { ThemeMode, UseThemeReturn } from "./context";
 export interface ThemeProviderProps {
     children: React.ReactNode;
     /** Default primitive component behavior for the subtree. */
@@ -20,47 +23,11 @@ export interface ThemeProviderProps {
     /** How to apply theme to DOM */
     attribute?: "data-theme" | "class";
 }
-export interface UseThemeReturn {
-    /** Current theme mode setting */
-    mode: ThemeMode;
-    /** Set the theme mode */
-    setMode: (mode: ThemeMode) => void;
-    /** Resolved mode (never 'system', always 'light' or 'dark') */
-    resolvedMode: "light" | "dark";
-    /** System preference detected from prefers-color-scheme */
-    systemPreference: "light" | "dark";
-    /** Toggle between light and dark (skips system) */
-    toggleMode: () => void;
-}
-export interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Size of the toggle button */
-    size?: "sm" | "md" | "lg";
-    /** Whether to include system mode option (default: false) */
-    showSystem?: boolean;
-    /** Controlled value for custom usage (bypasses theme context) */
-    value?: "light" | "dark";
-    /** Callback when value changes (for controlled usage) */
-    onValueChange?: (value: "light" | "dark") => void;
-    /** Accessible label for the group */
-    "aria-label"?: string;
-}
-/**
- * Hook to access theme context
- */
-declare function useTheme(): UseThemeReturn;
 /**
  * ThemeProvider - Provides theme context to children
  * SSR-safe: initializes from localStorage in useEffect
  */
 declare function ThemeProvider({ children, componentDefaults, defaultMode, defaultTheme, mode: controlledMode, onModeChange, storageKey, attribute, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
-/**
- * ThemeToggle - Fragmented button group to toggle between light and dark themes
- *
- * Can be used in two modes:
- * 1. Uncontrolled (default): Uses ThemeProvider context to get/set theme
- * 2. Controlled: Pass `value` and `onValueChange` props for custom behavior
- */
-declare function ThemeToggle({ size: sizeProp, showSystem, value: controlledValue, onValueChange, "aria-label": ariaLabel, className, ...htmlProps }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
 export declare const Theme: typeof ThemeProvider & {
     Root: typeof ThemeProvider;
     Provider: typeof ThemeProvider;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Theme/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Theme/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAgB,QAAQ,EAA0B,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3F,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAM3D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,gDAAgD;IAChD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,SAAS,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;CACpC;AAkCD;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,UAAwB,EACxB,SAAwB,GACzB,EAAE,kBAAkB,2CA+FpB;AAMD,eAAO,MAAM,KAAK;;;;;CAKhB,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;AAOhD,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE9F,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC;AAE3D,MAAM,WAAW,qBAAqB;IACpC,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAoBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,CA6BnE"}

package/dist/components/Theme/index.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } 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);
+import { ComponentDefaultsProvider } from "../ComponentDefaults/index.js";
+import { ThemeToggle } from "../ThemeToggle/index.js";
+import { useTheme, ThemeContext } from "./context.js";
+import { applyMeasurementSelection } from "../../measurements/generated.js";
 function useSystemPreference() {
   const [preference, setPreference] = React.useState("light");
   React.useEffect(() => {
@@ -18,63 +19,6 @@ function useSystemPreference() {
   }, []);
   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,
@@ -147,116 +91,12 @@ function ThemeProvider({
   }
   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;
@@ -288,45 +128,10 @@ 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);
-  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`);
-    }
-  }
+  applyMeasurementSelection(root, {
+    density: options.density,
+    radiusStyle: options.radiusStyle
+  });
 }
 export {
   Theme,

package/dist/components/{Theme → ThemeToggle}/ThemeToggle.module.scss.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const toggleGroup = "_toggleGroup_1jmqh_1";
-const toggleButton = "_toggleButton_1jmqh_10";
-const toggleButtonActive = "_toggleButtonActive_1jmqh_42";
-const sizeSm = "_sizeSm_1jmqh_55";
-const sizeMd = "_sizeMd_1jmqh_64";
-const sizeLg = "_sizeLg_1jmqh_73";
+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 styles = {
   toggleGroup,
   toggleButton,

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

@@ -0,0 +1,23 @@
+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 styles = {
+  toggleGroup,
+  toggleButton,
+  toggleButtonActive,
+  sizeSm,
+  sizeMd,
+  sizeLg
+};
+export {
+  styles as default,
+  sizeLg,
+  sizeMd,
+  sizeSm,
+  toggleButton,
+  toggleButtonActive,
+  toggleGroup
+};

package/dist/components/ThemeToggle/index.cjs

@@ -0,0 +1,115 @@
+"use client";
+"use strict";
+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 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,
+  value: controlledValue,
+  onValueChange,
+  "aria-label": ariaLabel,
+  className,
+  ...htmlProps
+}) {
+  const size = index.useResolvedControlSize(sizeProp);
+  const { mode: contextMode, setMode: setContextMode } = context.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 = [
+    ThemeToggle_module.default.toggleGroup,
+    ThemeToggle_module.default[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
+    className
+  ].filter(Boolean).join(" ");
+  const getButtonClasses = (buttonMode) => {
+    return [ThemeToggle_module.default.toggleButton, currentMode === buttonMode && ThemeToggle_module.default.toggleButtonActive].filter(Boolean).join(" ");
+  };
+  const label = ariaLabel || "Theme toggle";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: groupClasses, role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: getButtonClasses("light"),
+        onClick: () => handleModeChange("light"),
+        "aria-pressed": currentMode === "light",
+        "aria-label": "Light mode",
+        children: /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: getButtonClasses("dark"),
+        onClick: () => handleModeChange("dark"),
+        "aria-pressed": currentMode === "dark",
+        "aria-label": "Dark mode",
+        children: /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {})
+      }
+    ),
+    showSystem && !isControlled && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: getButtonClasses("system"),
+        onClick: () => setContextMode("system"),
+        "aria-pressed": contextMode === "system",
+        "aria-label": "System preference",
+        children: /* @__PURE__ */ jsxRuntime.jsx(MonitorIcon, {})
+      }
+    )
+  ] });
+}
+exports.ThemeToggle = ThemeToggle;

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Size of the toggle button */
+    size?: "sm" | "md" | "lg";
+    /** Whether to include system mode option (default: false) */
+    showSystem?: boolean;
+    /** Controlled value for custom usage (bypasses theme context) */
+    value?: "light" | "dark";
+    /** Callback when value changes (for controlled usage) */
+    onValueChange?: (value: "light" | "dark") => void;
+    /** Accessible label for the group */
+    "aria-label"?: string;
+}
+/**
+ * Fragmented button group for choosing light, dark, or system theme modes.
+ *
+ * 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, 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

@@ -0,0 +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"}

package/dist/components/ThemeToggle/index.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useResolvedControlSize } from "../ComponentDefaults/index.js";
+import { useTheme } from "../Theme/context.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,
+  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, {})
+      }
+    )
+  ] });
+}
+export {
+  ThemeToggle
+};

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

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const thinkingIndicator = "_thinkingIndicator_1ikr9_1";
-const main = "_main_1ikr9_8";
-const label = "_label_1ikr9_14";
-const elapsed = "_elapsed_1ikr9_25";
-const steps = "_steps_1ikr9_34";
-const step = "_step_1ikr9_34";
-const stepIndicator = "_stepIndicator_1ikr9_51";
-const stepDot = "_stepDot_1ikr9_60";
-const stepLabel = "_stepLabel_1ikr9_68";
-const stepPending = "_stepPending_1ikr9_72";
-const stepActive = "_stepActive_1ikr9_76";
-const stepComplete = "_stepComplete_1ikr9_83";
-const stepError = "_stepError_1ikr9_90";
+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 styles = {
   thinkingIndicator,
   main,