@usefragments/ui 1.7.0 → 2.0.0

package/src/components/Textarea/Textarea.contract.json

@@ -18,7 +18,6 @@
     "size: sm|md|lg (default: md)",
     "disabled: boolean (default: false)",
     "error: boolean (default: false)",
-    "success: boolean (default: false)",
     "showCharCount: boolean (default: false)",
     "label: string",
     "helperText: string",
@@ -94,12 +93,6 @@
       "default": "false",
       "required": false
     },
-    "success": {
-      "type": "boolean",
-      "description": "Whether to show success/validated styling",
-      "default": "false",
-      "required": false
-    },
     "showCharCount": {
       "type": "boolean",
       "description": "Show character counter when maxLength is set",
@@ -242,11 +235,6 @@
       "description": "resize=\"none\" removes the drag handle so the box stays put.",
       "code": "<Textarea\n  label=\"Notes\"\n  placeholder=\"Add notes...\"\n  resize=\"none\"\n/>"
     },
-    {
-      "name": "Success State",
-      "description": "Green border confirms the value passed validation.",
-      "code": "<Textarea\n  label=\"Bio\"\n  value=\"A short bio about myself.\"\n  success\n  helperText=\"Looks great!\"\n/>"
-    },
     {
       "name": "With Character Counter",
       "description": "Live count against maxLength sits below the box.",
@@ -267,7 +255,6 @@
       "label: string - label text",
       "size: sm|md|lg (default: md)",
       "error: boolean - error state",
-      "success: boolean - shows success/validated styling",
       "showCharCount: boolean - show character counter (requires maxLength)",
       "disabled: boolean - disabled state",
       "resize: none|vertical|horizontal|both",

package/src/components/Textarea/Textarea.module.scss

@@ -5,6 +5,11 @@
 @use "../../recipes/layout";
 @use "../../recipes/typography";
 
+// Fallbacks for the field recipe's size hooks when no size class has set them.
+$_track: field.track("md");
+$_stroke: field.stroke();
+$_block-inset: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+
 .wrapper {
   @include field.wrapper;
 }
@@ -34,17 +39,18 @@
   display: block;
   width: 100%;
   min-block-size: max(
-    var(--_fui-field-track),
+    var(--_fui-field-track, #{$_track}),
     calc(
-      var(--_fui-textarea-min-rows) * 1lh + 2 * var(--_fui-textarea-block-inset) + 2 *
-        var(--_fui-field-stroke)
+      var(--fui-textarea-min-rows, 1) * 1lh + 2 *
+        var(--_fui-textarea-block-inset, #{$_block-inset}) + 2 *
+        var(--_fui-field-stroke, #{$_stroke})
     )
   );
   max-block-size: calc(
-    var(--_fui-textarea-max-rows) * 1lh + 2 * var(--_fui-textarea-block-inset) + 2 *
-      var(--_fui-field-stroke)
+    var(--fui-textarea-max-rows, 9999) * 1lh + 2 *
+      var(--_fui-textarea-block-inset, #{$_block-inset}) + 2 * var(--_fui-field-stroke, #{$_stroke})
   );
-  padding-block: var(--_fui-textarea-block-inset);
+  padding-block: var(--_fui-textarea-block-inset, #{$_block-inset});
 
   &::placeholder {
     color: var(--fui-text-tertiary, $fui-text-tertiary);
@@ -54,11 +60,15 @@
     @include field.focus-state;
   }
 
+  @include high-contrast-outline;
+
   // Single-line: same track as Input — height lock, horizontal pad only.
   &[rows="1"] {
-    block-size: var(--_fui-field-track);
-    min-block-size: var(--_fui-field-track);
-    padding-block: calc((var(--_fui-field-track) - 1lh - 2 * var(--_fui-field-stroke)) / 2);
+    block-size: var(--_fui-field-track, #{$_track});
+    min-block-size: var(--_fui-field-track, #{$_track});
+    padding-block: calc(
+      (var(--_fui-field-track, #{$_track}) - 1lh - 2 * var(--_fui-field-stroke, #{$_stroke})) / 2
+    );
     overflow-y: hidden;
   }
 }
@@ -105,18 +115,7 @@
   @include field.invalid-state;
 
   &:focus-visible {
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-    @include focus-ring-error;
-  }
-}
-
-// Success state — green border for validated fields
-.success {
-  border-color: var(--fui-color-success-text, $fui-color-success-text);
-
-  &:focus-visible {
-    border-color: var(--fui-color-success-text, $fui-color-success-text);
-    @include focus-ring-success;
+    @include field.invalid-focus-state;
   }
 }
 
@@ -125,12 +124,6 @@
   color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
-// Auto-detect success state
-.wrapper[data-success] .helper,
-.helperSuccess {
-  color: var(--fui-color-success-text, $fui-color-success-text);
-}
-
 // Footer row — helper + character counter side by side
 .footer {
   display: flex;
@@ -148,7 +141,10 @@
 .charCount {
   @include typography.role("caption");
 
-  margin-block-start: var(--fui-field-message-gap);
+  margin-block-start: var(
+    --fui-field-message-gap,
+    var(--fui-raw-space-4, #{measurements.raw-space(4)})
+  );
   margin-inline-start: auto;
   font-family: var(--fui-font-mono, $fui-font-mono);
   white-space: nowrap;
@@ -158,30 +154,6 @@
   color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .textarea {
-    border-width: var(--fui-stroke-default, 2px);
-    border-color: var(--fui-text-primary, $fui-text-primary);
-
-    &:focus-visible {
-      border-color: var(--fui-color-accent, $fui-color-accent);
-    }
-  }
-
-  .error,
-  .textarea[aria-invalid] {
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-  }
-
-  .success {
-    border-color: var(--fui-color-success-text, $fui-color-success-text);
-  }
-}
-
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Textarea/index.tsx

@@ -28,8 +28,6 @@ export interface TextareaProps extends Omit<
   disabled?: boolean;
   /** Error state */
   error?: boolean;
-  /** Success state */
-  success?: boolean;
   /** Show character count when maxLength is set */
   showCharCount?: boolean;
   /** Label text above the textarea */
@@ -76,7 +74,6 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(functi
     size: sizeProp,
     disabled = false,
     error = false,
-    success = false,
     showCharCount = false,
     label,
     helperText,
@@ -113,29 +110,21 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(functi
     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,
   } as React.CSSProperties;
 
   return (
     <div
       {...rootProps}
-      data-success={success || undefined}
       className={[styles.wrapper, rootProps?.className, className].filter(Boolean).join(" ")}
       style={{ ...(rootProps?.style ?? {}), ...(wrapperStyle ?? {}) }}
     >

package/src/components/Theme/Theme.contract.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Theme",
-  "description": "Gives every component below it a light, dark, or system color mode, and remembers the choice.",
+  "description": "Utility provider that gives everything below it a light, dark, or system color mode.",
   "category": "utilities",
   "tags": ["theme", "dark-mode", "light-mode", "provider", "toggle"],
   "status": "stable",
@@ -15,7 +15,8 @@
     "onModeChange: function",
     "storageKey: string (default: fui-theme)",
     "attribute: data-theme|class (default: data-theme)",
-    "ThemeToggle appearance: group|icon (default: group)"
+    "Theme.Toggle size: sm|md|lg",
+    "Theme.Button size: sm|md|lg"
   ],
   "props": {
     "children": {
@@ -76,7 +77,7 @@
       "useTheme reads and sets the mode anywhere below it",
       "storageKey renames the localStorage entry",
       "attribute=\"class\" if your CSS keys off .dark instead of data-theme",
-      "appearance=\"icon\" for tight toolbars; the default group shows both modes"
+      "ThemeProvider renders no chrome of its own; Theme.Toggle is the segmented light/dark/system control and Theme.Button the single icon button for tight toolbars"
     ],
     "accessibility": [
       "The toggle's label names the mode it is in",
@@ -100,9 +101,9 @@
       "code": "<ThemeProvider defaultMode=\"light\">\n  <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\n    <ThemeToggle size=\"sm\" />\n    <ThemeToggle size=\"md\" />\n    <ThemeToggle size=\"lg\" />\n  </div>\n</ThemeProvider>"
     },
     {
-      "name": "Icon Toggle",
+      "name": "Theme Button",
       "description": "A single icon button for toolbars with no room to spare.",
-      "code": "<ThemeProvider defaultMode=\"system\">\n  <ThemeToggle appearance=\"icon\" aria-label=\"Switch color mode\" />\n</ThemeProvider>"
+      "code": "<ThemeProvider defaultMode=\"system\">\n  <ThemeButton aria-label=\"Switch color mode\" />\n</ThemeProvider>"
     }
   ],
   "relations": [
@@ -118,9 +119,9 @@
       "mode: light|dark|system - controlled mode",
       "onModeChange: (mode) => void - change handler",
       "attribute: data-theme|class - DOM theme attribute",
-      "ThemeToggle size: sm|md|lg - toggle button size",
-      "ThemeToggle appearance: group|icon - segmented or compact icon control (default: group)",
-      "ThemeToggle forwards div DOM props to the button group root"
+      "Theme.Toggle size: sm|md|lg - segmented light/dark/system control",
+      "Theme.Toggle forwards div DOM props to the button group root",
+      "Theme.Button size: sm|md|lg - single ghost icon button that flips light and dark, built on IconButton"
     ],
     "a11yRules": ["A11Y_TARGET_SIZE_MIN"]
   },

package/src/components/Theme/index.tsx

@@ -2,10 +2,10 @@
 
 import * as React from "react";
 import { ComponentDefaultsProvider, type ComponentDefaults } from "../ComponentDefaults";
-import { ThemeToggle } from "../ThemeToggle";
+import { ThemeButton, ThemeToggle } from "../ThemeToggle";
 import { ThemeContext, useTheme, type ThemeContextValue, type ThemeMode } from "./context";
 
-export type { ThemeToggleProps } from "../ThemeToggle";
+export type { ThemeButtonProps, ThemeToggleProps } from "../ThemeToggle";
 export type { ThemeMode, UseThemeReturn } from "./context";
 
 // ============================================
@@ -68,6 +68,22 @@ function useSystemPreference(): "light" | "dark" {
  * ThemeProvider - Provides theme context to children
  * SSR-safe: initializes from localStorage in useEffect
  */
+function suppressTransitions(): () => void {
+  const style = document.createElement("style");
+  style.textContent = "*,*::before,*::after{transition:none!important}";
+  document.head.append(style);
+  return () => {
+    // Read layout for its side effect: a synchronous style flush commits the
+    // new colors while the override still applies, so nothing starts moving.
+    void document.body.offsetHeight;
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(() => requestAnimationFrame(() => style.remove()));
+    } else {
+      style.remove();
+    }
+  };
+}
+
 function ThemeProvider({
   children,
   componentDefaults,
@@ -121,6 +137,20 @@ function ThemeProvider({
     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;
+
+    // A flip changes color, background, border and shadow on nearly every
+    // element at once; every transition on those properties would fire
+    // together and the switch smears instead of snapping. Turn transitions
+    // off for the swap, flush, then restore on the next frame.
+    const restore = current !== resolvedMode ? suppressTransitions() : null;
 
     if (attribute === "data-theme") {
       root.setAttribute("data-theme", resolvedMode);
@@ -128,6 +158,8 @@ function ThemeProvider({
       root.classList.remove("light", "dark");
       root.classList.add(resolvedMode);
     }
+
+    restore?.();
   }, [resolvedMode, attribute, mounted]);
 
   // Persist to localStorage when mode changes
@@ -182,28 +214,27 @@ export const Theme = Object.assign(ThemeProvider, {
   Root: ThemeProvider,
   Provider: ThemeProvider,
   Toggle: ThemeToggle,
+  Button: ThemeButton,
   useTheme,
 });
 
-export { ThemeProvider, ThemeToggle, useTheme };
+export { ThemeProvider, ThemeToggle, ThemeButton, useTheme };
 
 // ============================================
 // configureTheme — JS-only seed configuration
 // ============================================
 
 // Import + re-export seed derivation types — canonical definitions in utils/seed-derivation.ts
-import type { NeutralPalette, DensityPreset, RadiusStyle } from "../../utils/seed-derivation";
+import type { NeutralPalette, RadiusStyle } from "../../utils/seed-derivation";
 import { applyMeasurementSelection } from "../../measurements";
 import { isProductionBuild } from "../../utils/env";
-export type { NeutralPalette, DensityPreset, RadiusStyle };
+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 */
@@ -248,7 +279,6 @@ function setVar(el: HTMLElement, name: string, value: string) {
  * configureTheme({
  *   brand: '#6366f1',
  *   neutral: 'ice',
- *   density: 'compact',
  *   radiusStyle: 'rounded',
  * });
  * ```
@@ -278,8 +308,5 @@ export function configureTheme(options: ConfigureThemeOptions): void {
   // Named geometry is selected through the generated Measurement Module.
   // Partial calls leave the omitted selector untouched and never write numeric
   // CSS maps inline.
-  applyMeasurementSelection(root, {
-    density: options.density,
-    radiusStyle: options.radiusStyle,
-  });
+  applyMeasurementSelection(root, { radiusStyle: options.radiusStyle });
 }

package/src/components/ThemeToggle/ThemeButton.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import { IconButton, type IconButtonProps } from "../IconButton";
+import { useTheme } from "../Theme/context";
+import { MoonIcon, SunIcon } from "./icons";
+
+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 const ThemeButton = React.forwardRef<HTMLButtonElement, ThemeButtonProps>(
+  function ThemeButton({ value: controlledValue, onValueChange, "aria-label": ariaLabel, ...rest }, ref) {
+    const { resolvedMode, toggleMode } = useTheme();
+    const isControlled = controlledValue !== undefined;
+    const resolved = isControlled ? controlledValue : resolvedMode;
+    const nextMode = resolved === "dark" ? "light" : "dark";
+
+    return (
+      <IconButton
+        ref={ref}
+        variant="ghost"
+        aria-label={
+          ariaLabel ?? (resolved === "dark" ? "Switch to light mode" : "Switch to dark mode")
+        }
+        onClick={() => {
+          if (isControlled) {
+            onValueChange?.(nextMode);
+          } else {
+            toggleMode();
+          }
+        }}
+        {...rest}
+      >
+        {resolved === "dark" ? <MoonIcon /> : <SunIcon />}
+      </IconButton>
+    );
+  }
+);

package/src/components/ThemeToggle/ThemeToggle.module.scss

@@ -1,18 +1,19 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action";
 
 // ============================================
-// Theme Toggle - Fragmented Button Group
+// Theme Toggle - segmented light / dark / system control
 // ============================================
 
 .toggleGroup {
   display: inline-flex;
   align-items: stretch;
-  gap: 0;
-  padding: 0;
-  background-color: var(--fui-theme-toggle-bg, var(--fui-bg-tertiary, #{$fui-bg-tertiary}));
-  border-radius: var(--fui-radius-md, $fui-radius-md);
+  gap: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+  border-radius: var(--fui-radius-l2, $fui-radius-l2);
 }
 
 .toggleButton {
@@ -20,7 +21,7 @@
   @include interactive-base;
   @include action.base;
 
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  border-radius: var(--fui-radius-l3, $fui-radius-l3);
   color: var(--fui-text-secondary, $fui-text-secondary);
   background-color: transparent;
 
@@ -36,54 +37,30 @@
 }
 
 .toggleButtonActive {
-  background-color: var(
-    --fui-theme-toggle-active-bg,
-    var(--fui-control-selected-bg, #{$fui-bg-active})
-  );
-  color: var(--fui-text-primary, $fui-text-primary);
-  box-shadow: var(--fui-theme-toggle-active-shadow, none);
+  @include segmented-selection;
 }
 
-.iconButton {
-  background-color: transparent;
-  color: var(--fui-text-secondary, $fui-text-secondary);
-
-  &:hover {
-    color: var(--fui-text-primary, $fui-text-primary);
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-  }
-}
-
-// Size variants — nested for the group, same-element for appearance="icon"
-.sizeSm {
-  .toggleButton,
-  &.toggleButton {
-    @include action.icon-only("sm");
+// Size variants (the buttons inherit the size from the group)
+.sizeSm .toggleButton {
+  @include action.icon-only("sm");
 
-    svg {
-      @include action.glyph("sm");
-    }
+  svg {
+    @include action.glyph("sm");
   }
 }
 
-.sizeMd {
-  .toggleButton,
-  &.toggleButton {
-    @include action.icon-only("md");
+.sizeMd .toggleButton {
+  @include action.icon-only("md");
 
-    svg {
-      @include action.glyph("md");
-    }
+  svg {
+    @include action.glyph("md");
   }
 }
 
-.sizeLg {
-  .toggleButton,
-  &.toggleButton {
-    @include action.icon-only("lg");
+.sizeLg .toggleButton {
+  @include action.icon-only("lg");
 
-    svg {
-      @include action.glyph("lg");
-    }
+  svg {
+    @include action.glyph("lg");
   }
 }

package/src/components/ThemeToggle/icons.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+export function SunIcon({ size = 20 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <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" />
+    </svg>
+  );
+}
+
+export function MoonIcon({ size = 20 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <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" />
+    </svg>
+  );
+}
+
+export function MonitorIcon({ size = 20 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <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" />
+    </svg>
+  );
+}