@usefragments/ui 1.7.0 → 2.0.0

package/dist/components/Text/index.js

@@ -6,8 +6,7 @@ const TextRoot = React.forwardRef(function Text2({
   children,
   as: Component = "span",
   role,
-  variant,
-  size,
+  scale,
   weight,
   color,
   font,
@@ -19,17 +18,14 @@ const TextRoot = React.forwardRef(function Text2({
   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 ignoredScaleProps = role ? [scale, weight, font, letterSpacing].some((value) => value !== void 0) : false;
+  if (!isProductionBuild() && ignoredScaleProps) {
+    console.warn("[Text] A role takes precedence over scale, weight, font, and letterSpacing.");
   }
   const classes = [
     styles.text,
     role && styles[`role-${role}`],
-    !role && variant && styles[`variant-${variant}`],
-    !role && size && styles[`size-${size}`],
+    !role && scale && styles[`scale-${scale}`],
     !role && weight && styles[`weight-${weight}`],
     color && styles[`color-${color}`],
     !role && font === "mono" && styles.mono,

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

@@ -1,25 +1,23 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-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 wrapper = "_wrapper_jpwvn_1";
+const label = "_label_jpwvn_8";
+const required = "_required_jpwvn_17";
+const helper = "_helper_jpwvn_22";
+const helperError = "_helperError_jpwvn_32";
+const errorMessage = "_errorMessage_jpwvn_33";
+const textarea = "_textarea_jpwvn_43";
+const sm = "_sm_jpwvn_90";
+const md = "_md_jpwvn_102";
+const lg = "_lg_jpwvn_115";
+const resizeNone = "_resize-none_jpwvn_128";
+const resizeVertical = "_resize-vertical_jpwvn_132";
+const resizeHorizontal = "_resize-horizontal_jpwvn_136";
+const resizeBoth = "_resize-both_jpwvn_140";
+const error = "_error_jpwvn_33";
+const footer = "_footer_jpwvn_159";
+const charCount = "_charCount_jpwvn_170";
+const charCountOver = "_charCountOver_jpwvn_182";
 const styles = {
   wrapper,
   label,
@@ -31,17 +29,15 @@ const styles = {
   sm,
   md,
   lg,
-  "resize-none": "_resize-none_jm85p_119",
+  "resize-none": "_resize-none_jpwvn_128",
   resizeNone,
-  "resize-vertical": "_resize-vertical_jm85p_123",
+  "resize-vertical": "_resize-vertical_jpwvn_132",
   resizeVertical,
-  "resize-horizontal": "_resize-horizontal_jm85p_127",
+  "resize-horizontal": "_resize-horizontal_jpwvn_136",
   resizeHorizontal,
-  "resize-both": "_resize-both_jm85p_131",
+  "resize-both": "_resize-both_jpwvn_140",
   resizeBoth,
   error,
-  success,
-  helperSuccess,
   footer,
   charCount,
   charCountOver
@@ -54,7 +50,6 @@ exports.errorMessage = errorMessage;
 exports.footer = footer;
 exports.helper = helper;
 exports.helperError = helperError;
-exports.helperSuccess = helperSuccess;
 exports.label = label;
 exports.lg = lg;
 exports.md = md;
@@ -64,6 +59,5 @@ exports.resizeHorizontal = resizeHorizontal;
 exports.resizeNone = resizeNone;
 exports.resizeVertical = resizeVertical;
 exports.sm = sm;
-exports.success = success;
 exports.textarea = textarea;
 exports.wrapper = wrapper;

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

@@ -1,23 +1,21 @@
-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 wrapper = "_wrapper_jpwvn_1";
+const label = "_label_jpwvn_8";
+const required = "_required_jpwvn_17";
+const helper = "_helper_jpwvn_22";
+const helperError = "_helperError_jpwvn_32";
+const errorMessage = "_errorMessage_jpwvn_33";
+const textarea = "_textarea_jpwvn_43";
+const sm = "_sm_jpwvn_90";
+const md = "_md_jpwvn_102";
+const lg = "_lg_jpwvn_115";
+const resizeNone = "_resize-none_jpwvn_128";
+const resizeVertical = "_resize-vertical_jpwvn_132";
+const resizeHorizontal = "_resize-horizontal_jpwvn_136";
+const resizeBoth = "_resize-both_jpwvn_140";
+const error = "_error_jpwvn_33";
+const footer = "_footer_jpwvn_159";
+const charCount = "_charCount_jpwvn_170";
+const charCountOver = "_charCountOver_jpwvn_182";
 const styles = {
   wrapper,
   label,
@@ -29,17 +27,15 @@ const styles = {
   sm,
   md,
   lg,
-  "resize-none": "_resize-none_jm85p_119",
+  "resize-none": "_resize-none_jpwvn_128",
   resizeNone,
-  "resize-vertical": "_resize-vertical_jm85p_123",
+  "resize-vertical": "_resize-vertical_jpwvn_132",
   resizeVertical,
-  "resize-horizontal": "_resize-horizontal_jm85p_127",
+  "resize-horizontal": "_resize-horizontal_jpwvn_136",
   resizeHorizontal,
-  "resize-both": "_resize-both_jm85p_131",
+  "resize-both": "_resize-both_jpwvn_140",
   resizeBoth,
   error,
-  success,
-  helperSuccess,
   footer,
   charCount,
   charCountOver
@@ -53,7 +49,6 @@ export {
   footer,
   helper,
   helperError,
-  helperSuccess,
   label,
   lg,
   md,
@@ -63,7 +58,6 @@ export {
   resizeNone,
   resizeVertical,
   sm,
-  success,
   textarea,
   wrapper
 };

package/dist/components/Textarea/index.cjs

@@ -33,7 +33,6 @@ const TextareaRoot = React__namespace.forwardRef(function Textarea2({
   size: sizeProp,
   disabled = false,
   error = false,
-  success = false,
   showCharCount = false,
   label,
   helperText,
@@ -66,23 +65,17 @@ const TextareaRoot = React__namespace.forwardRef(function Textarea2({
     Textarea_module.default.textarea,
     Textarea_module.default[size],
     error && Textarea_module.default.error,
-    success && Textarea_module.default.success,
     Textarea_module.default[`resize-${resize}`]
   ].filter(Boolean).join(" ");
-  const helperClasses = [
-    Textarea_module.default.helper,
-    error && Textarea_module.default.helperError,
-    success && Textarea_module.default.helperSuccess
-  ].filter(Boolean).join(" ");
+  const helperClasses = [Textarea_module.default.helper, error && Textarea_module.default.helperError].filter(Boolean).join(" ");
   const textareaInlineStyle = {
-    "--_fui-textarea-min-rows": minRows ?? 1,
-    "--_fui-textarea-max-rows": maxRows ?? 9999
+    "--fui-textarea-min-rows": minRows ?? 1,
+    "--fui-textarea-max-rows": maxRows ?? 9999
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ...rootProps,
-      "data-success": success || void 0,
       className: [Textarea_module.default.wrapper, rootProps == null ? void 0 : rootProps.className, className].filter(Boolean).join(" "),
       style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...wrapperStyle ?? {} },
       children: [

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

@@ -21,8 +21,6 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     disabled?: boolean;
     /** Error state */
     error?: boolean;
-    /** Success state */
-    success?: boolean;
     /** Show character count when maxLength is set */
     showCharCount?: boolean;
     /** Label text above the textarea */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CACnE;IACC,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uCAAuC;IACvC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACtD,0CAA0C;IAC1C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACvD,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACjD,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAmID,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CACnE;IACC,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uCAAuC;IACvC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACtD,0CAA0C;IAC1C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACvD,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACjD,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA0HD,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}

package/dist/components/Textarea/index.js

@@ -14,7 +14,6 @@ const TextareaRoot = React.forwardRef(function Textarea2({
   size: sizeProp,
   disabled = false,
   error = false,
-  success = false,
   showCharCount = false,
   label,
   helperText,
@@ -47,23 +46,17 @@ const TextareaRoot = React.forwardRef(function Textarea2({
     styles.textarea,
     styles[size],
     error && styles.error,
-    success && styles.success,
     styles[`resize-${resize}`]
   ].filter(Boolean).join(" ");
-  const helperClasses = [
-    styles.helper,
-    error && styles.helperError,
-    success && styles.helperSuccess
-  ].filter(Boolean).join(" ");
+  const helperClasses = [styles.helper, error && styles.helperError].filter(Boolean).join(" ");
   const textareaInlineStyle = {
-    "--_fui-textarea-min-rows": minRows ?? 1,
-    "--_fui-textarea-max-rows": maxRows ?? 9999
+    "--fui-textarea-min-rows": minRows ?? 1,
+    "--fui-textarea-max-rows": maxRows ?? 9999
   };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ...rootProps,
-      "data-success": success || void 0,
       className: [styles.wrapper, rootProps == null ? void 0 : rootProps.className, className].filter(Boolean).join(" "),
       style: { ...(rootProps == null ? void 0 : rootProps.style) ?? {}, ...wrapperStyle ?? {} },
       children: [

package/dist/components/Theme/index.cjs

@@ -8,6 +8,7 @@ const index = require("../ThemeToggle/index.cjs");
 const context = require("./context.cjs");
 const generated = require("../../measurements/generated.cjs");
 const env = require("../../utils/env.cjs");
+const ThemeButton = require("../ThemeToggle/ThemeButton.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -39,6 +40,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,
@@ -74,12 +88,15 @@ function ThemeProvider({
   React__namespace.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__namespace.useEffect(() => {
     if (typeof window === "undefined" || !storageKey || !mounted) return;
@@ -115,6 +132,7 @@ const Theme = Object.assign(ThemeProvider, {
   Root: ThemeProvider,
   Provider: ThemeProvider,
   Toggle: index.ThemeToggle,
+  Button: ThemeButton.ThemeButton,
   useTheme: context.useTheme
 });
 function hexToRgb(hex) {
@@ -148,13 +166,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);
-  generated.applyMeasurementSelection(root, {
-    density: options.density,
-    radiusStyle: options.radiusStyle
-  });
+  generated.applyMeasurementSelection(root, { radiusStyle: options.radiusStyle });
 }
 exports.ThemeToggle = index.ThemeToggle;
 exports.useTheme = context.useTheme;
+exports.ThemeButton = ThemeButton.ThemeButton;
 exports.Theme = Theme;
 exports.ThemeProvider = ThemeProvider;
 exports.configureTheme = configureTheme;

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { type ComponentDefaults } from "../ComponentDefaults";
-import { ThemeToggle } from "../ThemeToggle";
+import { ThemeButton, ThemeToggle } from "../ThemeToggle";
 import { useTheme, type ThemeMode } from "./context";
-export type { ThemeToggleProps } from "../ThemeToggle";
+export type { ThemeButtonProps, ThemeToggleProps } from "../ThemeToggle";
 export type { ThemeMode, UseThemeReturn } from "./context";
 export interface ThemeProviderProps {
     children: React.ReactNode;
@@ -23,27 +23,22 @@ export interface ThemeProviderProps {
     /** How to apply theme to DOM */
     attribute?: "data-theme" | "class";
 }
-/**
- * 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;
 export declare const Theme: typeof ThemeProvider & {
     Root: typeof ThemeProvider;
     Provider: typeof ThemeProvider;
     Toggle: typeof ThemeToggle;
+    Button: React.ForwardRefExoticComponent<import(".").ThemeButtonProps & React.RefAttributes<HTMLButtonElement>>;
     useTheme: typeof useTheme;
 };
-export { ThemeProvider, ThemeToggle, useTheme };
-import type { NeutralPalette, DensityPreset, RadiusStyle } from "../../utils/seed-derivation";
-export type { NeutralPalette, DensityPreset, RadiusStyle };
+export { ThemeProvider, ThemeToggle, ThemeButton, useTheme };
+import type { NeutralPalette, RadiusStyle } from "../../utils/seed-derivation";
+export type { NeutralPalette, RadiusStyle };
 export interface ConfigureThemeOptions {
     /** Brand/accent color as hex */
     brand?: string;
     /** Neutral palette name */
     neutral?: NeutralPalette;
-    /** Spacing density preset */
-    density?: DensityPreset;
     /** Border radius style */
     radiusStyle?: RadiusStyle;
     /** Danger/error color as hex */
@@ -69,7 +64,6 @@ export interface ConfigureThemeOptions {
  * configureTheme({
  *   brand: '#6366f1',
  *   neutral: 'ice',
- *   density: 'compact',
  *   radiusStyle: 'rounded',
  * });
  * ```

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;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"}
+{"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,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAgB,QAAQ,EAA0B,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3F,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACzE,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;AAsDD,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+GpB;AAMD,eAAO,MAAM,KAAK;;;;;;CAMhB,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;AAO7D,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG/E,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC;AAE5C,MAAM,WAAW,qBAAqB;IACpC,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,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;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,CA0BnE"}

package/dist/components/Theme/index.js

@@ -6,6 +6,7 @@ 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(() => {
@@ -20,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,
@@ -55,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;
@@ -96,6 +113,7 @@ const Theme = Object.assign(ThemeProvider, {
   Root: ThemeProvider,
   Provider: ThemeProvider,
   Toggle: ThemeToggle,
+  Button: ThemeButton,
   useTheme
 });
 function hexToRgb(hex) {
@@ -129,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,23 +1,20 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-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 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,
   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,22 +1,19 @@
-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 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,
   toggleButtonActive,
-  iconButton,
   sizeSm,
   sizeMd,
   sizeLg
 };
 export {
   styles as default,
-  iconButton,
   sizeLg,
   sizeMd,
   sizeSm,