@usefragments/ui 1.5.4 → 1.7.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;AAG9F,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,11 @@
 "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";
+import { isProductionBuild } from "../../utils/env.js";
 function useSystemPreference() {
   const [preference, setPreference] = React.useState("light");
   React.useEffect(() => {
@@ -18,63 +20,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,
@@ -86,7 +31,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."
     );
@@ -147,116 +92,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 +129,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,20 +1,23 @@
 "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_xnru1_1";
+const toggleButton = "_toggleButton_xnru1_10";
+const toggleButtonActive = "_toggleButtonActive_xnru1_53";
+const iconButton = "_iconButton_xnru1_66";
+const sizeSm = "_sizeSm_xnru1_75";
+const sizeMd = "_sizeMd_xnru1_96";
+const sizeLg = "_sizeLg_xnru1_117";
 const styles = {
   toggleGroup,
   toggleButton,
   toggleButtonActive,
+  iconButton,
   sizeSm,
   sizeMd,
   sizeLg
 };
 exports.default = styles;
+exports.iconButton = iconButton;
 exports.sizeLg = sizeLg;
 exports.sizeMd = sizeMd;
 exports.sizeSm = sizeSm;

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

@@ -0,0 +1,26 @@
+const toggleGroup = "_toggleGroup_xnru1_1";
+const toggleButton = "_toggleButton_xnru1_10";
+const toggleButtonActive = "_toggleButtonActive_xnru1_53";
+const iconButton = "_iconButton_xnru1_66";
+const sizeSm = "_sizeSm_xnru1_75";
+const sizeMd = "_sizeMd_xnru1_96";
+const sizeLg = "_sizeLg_xnru1_117";
+const styles = {
+  toggleGroup,
+  toggleButton,
+  toggleButtonActive,
+  iconButton,
+  sizeSm,
+  sizeMd,
+  sizeLg
+};
+export {
+  styles as default,
+  iconButton,
+  sizeLg,
+  sizeMd,
+  sizeSm,
+  toggleButton,
+  toggleButtonActive,
+  toggleGroup
+};

package/dist/components/ThemeToggle/index.cjs

@@ -0,0 +1,140 @@
+"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,
+  appearance = "group",
+  showSystem = false,
+  value: controlledValue,
+  onValueChange,
+  "aria-label": ariaLabel,
+  className,
+  ...htmlProps
+}) {
+  const size = index.useResolvedControlSize(sizeProp);
+  const {
+    mode: contextMode,
+    setMode: setContextMode,
+    resolvedMode,
+    toggleMode
+  } = 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);
+    } else {
+      setContextMode(newMode);
+    }
+  };
+  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(" ");
+  };
+  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,26 @@
+import * as React from "react";
+export interface ThemeToggleProps extends React.HTMLAttributes<HTMLElement> {
+    /** Size of the toggle button */
+    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) */
+    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, appearance, 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,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"}