@dashforge/tw 0.2.0-beta → 0.3.0-beta

package/src/components/LeftNav/leftNav.variants.ts

@@ -24,7 +24,10 @@ export const leftNavVariants = tv({
     root: [
       'flex flex-col h-full',
       'bg-neutral-50 border-r border-neutral-200',
-      'transition-[width] duration-200',
+      // Width transition (rail-mode toggle) — gated on
+      // prefers-reduced-motion (WCAG 2.3.3). The new width still
+      // applies, just without the animated tween.
+      'transition-[width] duration-200 motion-reduce:transition-none motion-reduce:duration-0',
     ],
     brand: [
       'flex items-center gap-2 px-3 h-14 shrink-0',
@@ -39,6 +42,14 @@ export const leftNavVariants = tv({
       'transition-colors w-full',
       'aria-disabled:opacity-50 aria-disabled:cursor-not-allowed',
       'aria-disabled:hover:bg-transparent',
+      // Defensive `no-underline` — Tailwind's preflight removes the
+      // default browser anchor underline globally, but environments
+      // that DISABLE preflight (e.g. our docs-lab, where the tw
+      // section coexists with MUI's chrome) get raw browser defaults
+      // back. Without this, `<a>` items in the nav render underlined
+      // in those contexts. Explicit `no-underline` + `hover:no-underline`
+      // keeps the appearance consistent regardless of preflight state.
+      'no-underline hover:no-underline',
     ],
     itemActive: 'bg-primary-100 text-primary-900 font-medium',
     itemIcon: 'shrink-0 w-5 h-5 flex items-center justify-center',

package/src/components/NumberField/NumberField.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useId, useRef } from 'react';
+import { useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
 import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
 import type { DashFormBridge, FieldRegistration } from '@dashforge/ui-core';
 import { useDashFieldMeta } from '@dashforge/forms';
@@ -98,6 +98,22 @@ export function NumberField(props: NumberFieldProps) {
   const accessState = useAccessState(access);
 
   const inputId = useId();
+
+  /*
+   * Local state for the STANDALONE UNCONTROLLED case (no bridge, no
+   * `value` prop, only `defaultValue`). Mirrors OTPField. Without this,
+   * `resolvedDisplayValue` would be a snapshot computed ONCE from
+   * `defaultValue` and the controlled `<input value={...}>` would
+   * snap user input back on every keystroke / stepper click — same
+   * trap that hit Checkbox + RadioGroup in this package.
+   *
+   * In form mode the bridge owns state. In standalone CONTROLLED mode
+   * (consumer passes `value`) the consumer owns state. Only this
+   * branch needs the local hook.
+   */
+  const [uncontrolledValue, setUncontrolledValue] = useState<string>(() =>
+    formatForDisplay(defaultValue)
+  );
   const helperId = `${inputId}-help`;
 
   // StrictMode-safe unregister-on-unmount
@@ -140,7 +156,7 @@ export function NumberField(props: NumberFieldProps) {
     resolvedDisplayValue =
       userValue !== undefined
         ? formatForDisplay(userValue)
-        : formatForDisplay(defaultValue);
+        : uncontrolledValue;
   }
 
   const writeToBridge = (parsed: number | null | undefined) => {
@@ -157,6 +173,13 @@ export function NumberField(props: NumberFieldProps) {
       // internal logic still sees the raw string change.
       void registration.onChange(e);
     }
+    // Standalone uncontrolled mode: mirror the raw input string so the
+    // controlled `<input value={...}>` reflects what the user typed.
+    // Partial states (e.g. "-", "1.") are kept verbatim — `parseFromInput`
+    // returns `undefined` for them so `writeToBridge` is a no-op above.
+    if (!isFormMode && userValue === undefined) {
+      setUncontrolledValue(e.target.value);
+    }
     userOnChange?.(e);
   };
 
@@ -176,6 +199,11 @@ export function NumberField(props: NumberFieldProps) {
     if (typeof min === 'number') next = Math.max(min, next);
     if (typeof max === 'number') next = Math.min(max, next);
     writeToBridge(next);
+    // Standalone uncontrolled: also persist the new value to local
+    // state so the visible display tracks the stepper click.
+    if (!isFormMode && userValue === undefined) {
+      setUncontrolledValue(formatForDisplay(next));
+    }
   };
 
   const canIncrement =

package/src/components/RadioGroup/RadioGroup.tsx

@@ -200,9 +200,31 @@ export function RadioGroup(props: RadioGroupProps) {
         </div>
       )}
 
+      {/*
+       * Radix RadioGroup mode discrimination — mirrors the same fix
+       * applied to <Checkbox>:
+       *
+       *   - Form mode (bridge.register present): controlled — `value`
+       *     comes from the reactive bridge snapshot, `handleValueChange`
+       *     writes back through bridge.setValue.
+       *   - Standalone controlled (consumer passes `value`): controlled —
+       *     consumer owns state, `handleValueChange` forwards via
+       *     `onValueChange`.
+       *   - Standalone uncontrolled (only `defaultValue`): UNCONTROLLED —
+       *     Radix owns the state. Previously this code passed
+       *     `value={resolvedValue}` in this branch too, putting Radix
+       *     in controlled mode with a stale snapshot that never updated,
+       *     so user clicks fired Radix's onValueChange but the controlled
+       *     prop never changed and the selection snapped right back.
+       *
+       * Picking exactly one of `{ value, ... }` or `{ defaultValue, ... }`
+       * lets Radix track its own state correctly when nobody else can.
+       */}
       <RadixRadioGroup.Root
         name={name}
-        value={resolvedValue}
+        {...(isFormMode || explicitValue !== undefined
+          ? { value: resolvedValue }
+          : { defaultValue: defaultValue ?? undefined })}
         onValueChange={handleValueChange}
         onBlur={handleBlur}
         disabled={groupEffectiveDisabled}

package/src/components/Snackbar/snackbar.variants.ts

@@ -23,8 +23,10 @@ export const snackbarVariants = tv({
       'rounded-lg border shadow-lg',
       'text-sm bg-neutral-50 text-neutral-900',
       // Subtle enter transition — opacity + translate, kept short so a
-      // burst of snackbars feels snappy.
-      'transition-all duration-200',
+      // burst of snackbars feels snappy. Gated on motion-reduce
+      // (WCAG 2.3.3) — users who request reduced motion see snackbars
+      // pop in instantly without the slide animation.
+      'transition-all duration-200 motion-reduce:transition-none motion-reduce:duration-0',
       'data-[state=entered]:opacity-100 data-[state=exited]:opacity-0',
     ],
     icon: 'shrink-0 mt-0.5 w-5 h-5 inline-flex items-center justify-center',

package/src/components/Switch/switch.variants.ts

@@ -25,7 +25,12 @@ export const switchVariants = tv({
     ],
     thumb: [
       'pointer-events-none inline-block rounded-full bg-white shadow ring-0',
-      'transition-transform',
+      // Slide animation gated on `prefers-reduced-motion: no-preference`
+      // (WCAG 2.3.3). The thumb still moves between positions instantly
+      // for users who request reduced motion — the data-state change
+      // applies the translate-x rule unconditionally, only the smooth
+      // transition between the two is suppressed.
+      'transition-transform motion-reduce:transition-none',
       'data-[state=unchecked]:translate-x-0',
     ],
     label: 'select-none cursor-pointer text-neutral-900',

package/src/components/TextField/TextField.tsx

@@ -178,6 +178,22 @@ export function TextField(props: TextFieldProps) {
       )}
 
       <div className={cn(v.inputWrapper(), slotProps?.inputWrapper?.className)}>
+        {/*
+         * Prefix slot (Sprint 2 P4.1) — inline adornment rendered
+         * BEFORE the input. Mounts only when `slotProps.prefix.children`
+         * is provided so empty configs don't add layout cost. Common
+         * use: currency symbols (`$`, `€`), units (`@`, `#`), status
+         * icons. The slot wrapper carries `pointer-events-none` to
+         * avoid stealing focus from the input on click.
+         */}
+        {slotProps?.prefix?.children !== undefined && (
+          <span
+            aria-hidden="true"
+            className={cn(v.prefix(), slotProps.prefix.className)}
+          >
+            {slotProps.prefix.children}
+          </span>
+        )}
         <input
           {...rest}
           id={inputId}
@@ -196,6 +212,19 @@ export function TextField(props: TextFieldProps) {
           ref={inputRef}
           className={cn(v.input(), slotProps?.input?.className)}
         />
+        {/*
+         * Suffix slot (Sprint 2 P4.1) — same pattern as prefix,
+         * rendered AFTER the input. Typical use: unit labels (`USD`,
+         * `kg`, `%`), trailing icons, length counters.
+         */}
+        {slotProps?.suffix?.children !== undefined && (
+          <span
+            aria-hidden="true"
+            className={cn(v.suffix(), slotProps.suffix.className)}
+          >
+            {slotProps.suffix.children}
+          </span>
+        )}
       </div>
 
       {resolvedHelperText && (

package/src/components/TextField/textField.types.ts

@@ -6,9 +6,27 @@ import type { TextFieldVariants } from './textField.variants.js';
 /**
  * Per-slot overrides for `<TextField>`.
  *
- * Each slot accepts `{ className: string }` so the override path is
- * extensible (style / aria-* / data-* can be added without a breaking
- * change). Mirrors the MUI-side `slotProps` shape.
+ * Each slot accepts `{ className: string }` (and, for `prefix` /
+ * `suffix`, a `children` node) so the override path is extensible —
+ * extra fields like `style`, `aria-*`, `data-*` can be added without
+ * a breaking change. Mirrors the MUI-side `slotProps` shape.
+ *
+ * **`prefix` / `suffix`** are inline adornments rendered INSIDE the
+ * `inputWrapper`, before / after the `<input>` element. Typical use:
+ * currency symbols, units, status icons. Passing only `className`
+ * (no `children`) is allowed but renders an empty slot — usually
+ * you'll always pair the two.
+ *
+ *   ```tsx
+ *   <TextField
+ *     name="price"
+ *     type="number"
+ *     slotProps={{
+ *       prefix: { children: '$' },
+ *       suffix: { children: 'USD' },
+ *     }}
+ *   />
+ *   ```
  */
 export interface TextFieldSlotProps {
   root?: { className?: string };
@@ -18,6 +36,8 @@ export interface TextFieldSlotProps {
   input?: { className?: string };
   helperText?: { className?: string };
   errorText?: { className?: string };
+  prefix?: { children?: ReactNode; className?: string };
+  suffix?: { children?: ReactNode; className?: string };
 }
 
 /**

package/src/components/TextField/textField.variants.ts

@@ -34,6 +34,24 @@ export const textFieldVariants = tv({
     ],
     helperText: 'mt-1 text-sm text-neutral-600',
     errorText: 'mt-1 text-sm text-danger-600',
+    /*
+     * `prefix` / `suffix` slot — inline adornment rendered before /
+     * after the input INSIDE the inputWrapper. `shrink-0` keeps the
+     * adornment width fixed so it doesn't compete for space with the
+     * input; `select-none` + `pointer-events-none` avoids
+     * accidentally stealing focus from the input on click (the
+     * inputWrapper handles focus via `focus-within`).
+     */
+    prefix: [
+      'shrink-0 inline-flex items-center select-none pointer-events-none',
+      'text-neutral-500',
+      'mr-2',
+    ],
+    suffix: [
+      'shrink-0 inline-flex items-center select-none pointer-events-none',
+      'text-neutral-500',
+      'ml-2',
+    ],
   },
   variants: {
     size: {

package/src/index.ts

@@ -237,4 +237,4 @@ export type { VariantProps } from 'tailwind-variants';
 /**
  * Package version (synced with `package.json` at publish time).
  */
-export const VERSION = '0.1.0-beta';
+export const VERSION = '0.3.0-beta';

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Dashforge
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.