@usefragments/ui 1.6.0 → 1.7.0

package/dist/components/Text/index.js

@@ -1,48 +1,56 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./Text.module.scss.js";
-const TextRoot = React.forwardRef(
-  function Text2({
-    children,
-    as: Component = "span",
-    role,
-    variant,
-    size,
-    weight,
-    color,
-    font,
-    truncate,
-    lineClamp,
-    letterSpacing,
-    tabularNums,
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    const ignoredLegacyProps = role ? [size, variant, weight, font, letterSpacing].some((value) => value !== void 0) : false;
-    if (process.env.NODE_ENV !== "production" && ignoredLegacyProps) {
-      console.warn(
-        "[Text] Semantic role takes precedence over size, variant, weight, font, and letterSpacing."
-      );
-    }
-    const classes = [
-      styles.text,
-      role && styles[`role-${role}`],
-      !role && variant && styles[`variant-${variant}`],
-      !role && size && styles[`size-${size}`],
-      !role && weight && styles[`weight-${weight}`],
-      color && styles[`color-${color}`],
-      !role && font === "mono" && styles.mono,
-      truncate && styles.truncate,
-      lineClamp && styles.lineClamp,
-      !role && letterSpacing && styles[`tracking-${letterSpacing}`],
-      tabularNums && styles.tabularNums,
-      className
-    ].filter(Boolean).join(" ");
-    const lineClampStyle = lineClamp ? { "--fui-line-clamp": lineClamp, ...style } : style;
-    return /* @__PURE__ */ jsx(Component, { ref, className: classes, style: lineClampStyle, ...htmlProps, children });
+import { isProductionBuild } from "../../utils/env.js";
+const TextRoot = React.forwardRef(function Text2({
+  children,
+  as: Component = "span",
+  role,
+  variant,
+  size,
+  weight,
+  color,
+  font,
+  truncate,
+  lineClamp,
+  letterSpacing,
+  tabularNums,
+  className,
+  style,
+  ...htmlProps
+}, ref) {
+  const ignoredLegacyProps = role ? [size, variant, weight, font, letterSpacing].some((value) => value !== void 0) : false;
+  if (!isProductionBuild() && ignoredLegacyProps) {
+    console.warn(
+      "[Text] Semantic role takes precedence over size, variant, weight, font, and letterSpacing."
+    );
   }
-);
+  const classes = [
+    styles.text,
+    role && styles[`role-${role}`],
+    !role && variant && styles[`variant-${variant}`],
+    !role && size && styles[`size-${size}`],
+    !role && weight && styles[`weight-${weight}`],
+    color && styles[`color-${color}`],
+    !role && font === "mono" && styles.mono,
+    truncate && styles.truncate,
+    lineClamp && styles.lineClamp,
+    !role && letterSpacing && styles[`tracking-${letterSpacing}`],
+    tabularNums && styles.tabularNums,
+    className
+  ].filter(Boolean).join(" ");
+  const lineClampStyle = lineClamp ? { "--fui-line-clamp": lineClamp, ...style } : style;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: lineClampStyle,
+      ...htmlProps,
+      children
+    }
+  );
+});
 const Text = Object.assign(TextRoot, {
   Root: TextRoot
 });

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

@@ -1,25 +1,25 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_1tjgn_1";
-const label = "_label_1tjgn_8";
-const required = "_required_1tjgn_17";
-const helper = "_helper_1tjgn_22";
-const helperError = "_helperError_1tjgn_32";
-const errorMessage = "_errorMessage_1tjgn_33";
-const textarea = "_textarea_1tjgn_43";
-const sm = "_sm_1tjgn_83";
-const md = "_md_1tjgn_95";
-const lg = "_lg_1tjgn_107";
-const resizeNone = "_resize-none_1tjgn_119";
-const resizeVertical = "_resize-vertical_1tjgn_123";
-const resizeHorizontal = "_resize-horizontal_1tjgn_127";
-const resizeBoth = "_resize-both_1tjgn_131";
-const error = "_error_1tjgn_33";
-const success = "_success_1tjgn_146";
-const helperSuccess = "_helperSuccess_1tjgn_160";
-const footer = "_footer_1tjgn_164";
-const charCount = "_charCount_1tjgn_175";
-const charCountOver = "_charCountOver_1tjgn_187";
+const wrapper = "_wrapper_jm85p_1";
+const label = "_label_jm85p_8";
+const required = "_required_jm85p_17";
+const helper = "_helper_jm85p_22";
+const helperError = "_helperError_jm85p_32";
+const errorMessage = "_errorMessage_jm85p_33";
+const textarea = "_textarea_jm85p_43";
+const sm = "_sm_jm85p_83";
+const md = "_md_jm85p_95";
+const lg = "_lg_jm85p_107";
+const resizeNone = "_resize-none_jm85p_119";
+const resizeVertical = "_resize-vertical_jm85p_123";
+const resizeHorizontal = "_resize-horizontal_jm85p_127";
+const resizeBoth = "_resize-both_jm85p_131";
+const error = "_error_jm85p_33";
+const success = "_success_jm85p_146";
+const helperSuccess = "_helperSuccess_jm85p_160";
+const footer = "_footer_jm85p_164";
+const charCount = "_charCount_jm85p_175";
+const charCountOver = "_charCountOver_jm85p_187";
 const styles = {
   wrapper,
   label,
@@ -31,13 +31,13 @@ const styles = {
   sm,
   md,
   lg,
-  "resize-none": "_resize-none_1tjgn_119",
+  "resize-none": "_resize-none_jm85p_119",
   resizeNone,
-  "resize-vertical": "_resize-vertical_1tjgn_123",
+  "resize-vertical": "_resize-vertical_jm85p_123",
   resizeVertical,
-  "resize-horizontal": "_resize-horizontal_1tjgn_127",
+  "resize-horizontal": "_resize-horizontal_jm85p_127",
   resizeHorizontal,
-  "resize-both": "_resize-both_1tjgn_131",
+  "resize-both": "_resize-both_jm85p_131",
   resizeBoth,
   error,
   success,

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

@@ -1,23 +1,23 @@
-const wrapper = "_wrapper_1tjgn_1";
-const label = "_label_1tjgn_8";
-const required = "_required_1tjgn_17";
-const helper = "_helper_1tjgn_22";
-const helperError = "_helperError_1tjgn_32";
-const errorMessage = "_errorMessage_1tjgn_33";
-const textarea = "_textarea_1tjgn_43";
-const sm = "_sm_1tjgn_83";
-const md = "_md_1tjgn_95";
-const lg = "_lg_1tjgn_107";
-const resizeNone = "_resize-none_1tjgn_119";
-const resizeVertical = "_resize-vertical_1tjgn_123";
-const resizeHorizontal = "_resize-horizontal_1tjgn_127";
-const resizeBoth = "_resize-both_1tjgn_131";
-const error = "_error_1tjgn_33";
-const success = "_success_1tjgn_146";
-const helperSuccess = "_helperSuccess_1tjgn_160";
-const footer = "_footer_1tjgn_164";
-const charCount = "_charCount_1tjgn_175";
-const charCountOver = "_charCountOver_1tjgn_187";
+const wrapper = "_wrapper_jm85p_1";
+const label = "_label_jm85p_8";
+const required = "_required_jm85p_17";
+const helper = "_helper_jm85p_22";
+const helperError = "_helperError_jm85p_32";
+const errorMessage = "_errorMessage_jm85p_33";
+const textarea = "_textarea_jm85p_43";
+const sm = "_sm_jm85p_83";
+const md = "_md_jm85p_95";
+const lg = "_lg_jm85p_107";
+const resizeNone = "_resize-none_jm85p_119";
+const resizeVertical = "_resize-vertical_jm85p_123";
+const resizeHorizontal = "_resize-horizontal_jm85p_127";
+const resizeBoth = "_resize-both_jm85p_131";
+const error = "_error_jm85p_33";
+const success = "_success_jm85p_146";
+const helperSuccess = "_helperSuccess_jm85p_160";
+const footer = "_footer_jm85p_164";
+const charCount = "_charCount_jm85p_175";
+const charCountOver = "_charCountOver_jm85p_187";
 const styles = {
   wrapper,
   label,
@@ -29,13 +29,13 @@ const styles = {
   sm,
   md,
   lg,
-  "resize-none": "_resize-none_1tjgn_119",
+  "resize-none": "_resize-none_jm85p_119",
   resizeNone,
-  "resize-vertical": "_resize-vertical_1tjgn_123",
+  "resize-vertical": "_resize-vertical_jm85p_123",
   resizeVertical,
-  "resize-horizontal": "_resize-horizontal_1tjgn_127",
+  "resize-horizontal": "_resize-horizontal_jm85p_127",
   resizeHorizontal,
-  "resize-both": "_resize-both_1tjgn_131",
+  "resize-both": "_resize-both_jm85p_131",
   resizeBoth,
   error,
   success,

package/dist/components/Theme/index.cjs

@@ -7,6 +7,7 @@ const index$1 = require("../ComponentDefaults/index.cjs");
 const index = require("../ThemeToggle/index.cjs");
 const context = require("./context.cjs");
 const generated = require("../../measurements/generated.cjs");
+const env = require("../../utils/env.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -49,7 +50,7 @@ function ThemeProvider({
   attribute = "data-theme"
 }) {
   const systemPreference = useSystemPreference();
-  if (process.env.NODE_ENV !== "production" && defaultTheme !== void 0) {
+  if (!env.isProductionBuild() && defaultTheme !== void 0) {
     console.warn(
       "[Fragments] ThemeProvider: `defaultTheme` is deprecated. Use `defaultMode` instead. `defaultTheme` will be removed in v1.0."
     );

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":"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"}
+{"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

@@ -5,6 +5,7 @@ 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(() => {
@@ -30,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."
     );

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

@@ -1,20 +1,23 @@
 "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_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

@@ -1,19 +1,22 @@
-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_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,

package/dist/components/ThemeToggle/index.cjs

@@ -49,6 +49,7 @@ function MonitorIcon({ size = 20 }) {
 }
 function ThemeToggle({
   size: sizeProp,
+  appearance = "group",
   showSystem = false,
   value: controlledValue,
   onValueChange,
@@ -57,9 +58,37 @@ function ThemeToggle({
   ...htmlProps
 }) {
   const size = index.useResolvedControlSize(sizeProp);
-  const { mode: contextMode, setMode: setContextMode } = context.useTheme();
+  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);
@@ -67,11 +96,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(" ");
   };

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

@@ -1,7 +1,12 @@
 import * as React from "react";
-export interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
+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) */
@@ -17,5 +22,5 @@ export interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
  * 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;
+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

@@ -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;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"}

package/dist/components/ThemeToggle/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useResolvedControlSize } from "../ComponentDefaults/index.js";
 import { useTheme } from "../Theme/context.js";
 import styles from "./ThemeToggle.module.scss.js";
@@ -47,6 +47,7 @@ function MonitorIcon({ size = 20 }) {
 }
 function ThemeToggle({
   size: sizeProp,
+  appearance = "group",
   showSystem = false,
   value: controlledValue,
   onValueChange,
@@ -55,9 +56,37 @@ function ThemeToggle({
   ...htmlProps
 }) {
   const size = useResolvedControlSize(sizeProp);
-  const { mode: contextMode, setMode: setContextMode } = useTheme();
+  const {
+    mode: contextMode,
+    setMode: setContextMode,
+    resolvedMode,
+    toggleMode
+  } = 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);
@@ -65,11 +94,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,18 @@
 "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_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 styles = {
   thinkingIndicator,
   main,

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

@@ -1,16 +1,16 @@
-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_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 styles = {
   thinkingIndicator,
   main,

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

@@ -1,24 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const container = "_container_1qytp_1";
-const topleft = "_topleft_1qytp_14";
-const topcenter = "_topcenter_1qytp_19";
-const topright = "_topright_1qytp_25";
-const bottomleft = "_bottomleft_1qytp_30";
-const bottomcenter = "_bottomcenter_1qytp_36";
-const bottomright = "_bottomright_1qytp_43";
-const toast = "_toast_1qytp_49";
-const toastEnter = "_toastEnter_1qytp_1";
-const description = "_description_1qytp_66";
-const icon = "_icon_1qytp_80";
-const success = "_success_1qytp_84";
-const title = "_title_1qytp_88";
-const error = "_error_1qytp_94";
-const warning = "_warning_1qytp_104";
-const info = "_info_1qytp_114";
-const content = "_content_1qytp_145";
-const action = "_action_1qytp_170";
-const close = "_close_1qytp_234";
+const container = "_container_11925_1";
+const topleft = "_topleft_11925_14";
+const topcenter = "_topcenter_11925_19";
+const topright = "_topright_11925_25";
+const bottomleft = "_bottomleft_11925_30";
+const bottomcenter = "_bottomcenter_11925_36";
+const bottomright = "_bottomright_11925_43";
+const toast = "_toast_11925_49";
+const toastEnter = "_toastEnter_11925_1";
+const description = "_description_11925_66";
+const icon = "_icon_11925_80";
+const success = "_success_11925_84";
+const title = "_title_11925_88";
+const error = "_error_11925_94";
+const warning = "_warning_11925_104";
+const info = "_info_11925_114";
+const content = "_content_11925_145";
+const action = "_action_11925_170";
+const close = "_close_11925_236";
 const styles = {
   container,
   topleft,
@@ -30,7 +30,7 @@ const styles = {
   toast,
   toastEnter,
   description,
-  "default": "_default_1qytp_80",
+  "default": "_default_11925_80",
   icon,
   success,
   title,