@bug-on/m3-expressive 1.2.7 → 1.3.1

package/dist/{text-field-DWC7qOvp.d.ts → text-field-Ear3hCSq.d.mts}

@@ -1,6 +1,7 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import { c as MD3Size } from './md3-D0_Z7IXj.mjs';
 
 /**
  * @file checkbox.tsx
@@ -48,7 +49,7 @@ interface CheckboxProps {
     /** Extra class names on the outermost wrapper. */
     className?: string;
     /** Ref pointing to the hidden `<input type="checkbox">`. */
-    ref?: React.Ref<HTMLInputElement>;
+    ref?: React$1.Ref<HTMLInputElement>;
 }
 /**
  * `TriStateCheckbox` props — requires `state` + `onStateChange`.
@@ -71,7 +72,7 @@ interface TriStateCheckboxProps extends Omit<CheckboxProps, "checked" | "default
  * ```
  * @see https://m3.material.io/components/checkbox/overview
  */
-declare const Checkbox: React.NamedExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: React$1.NamedExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 /**
  * MD3 Expressive Tri-State Checkbox.
  *
@@ -83,12 +84,12 @@ declare const Checkbox: React.NamedExoticComponent<Omit<CheckboxProps, "ref"> &
  * <TriStateCheckbox state={parentState} onStateChange={setParentState} label="Select all" />
  * ```
  */
-declare const TriStateCheckbox: React.NamedExoticComponent<Omit<TriStateCheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const TriStateCheckbox: React$1.NamedExoticComponent<Omit<TriStateCheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 declare const chipVariants: (props?: ({
     variant?: "input" | "filter" | "assist" | "suggestion" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /**
      * Chip variant.
      * - `assist`     → Smart/automated actions. Flat by default, can be elevated.
@@ -122,36 +123,36 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     /**
      * Visible label. Required. Can be a string or ReactNode.
      */
-    label: React.ReactNode;
+    label: React$1.ReactNode;
     /**
      * Optional leading icon element (18×18px recommended).
      * For `filter` chips with `selected=true`, this is replaced by an animated checkmark.
      * For `assist`/`suggestion`: icon color → `primary`
      * For `input` (unselected): icon color → `on-surface-variant`
      */
-    leadingIcon?: React.ReactNode;
+    leadingIcon?: React$1.ReactNode;
     /**
      * Optional trailing icon element (18×18px recommended).
      * Color: `on-surface-variant` (unselected) / `on-secondary-container` (selected).
      */
-    trailingIcon?: React.ReactNode;
+    trailingIcon?: React$1.ReactNode;
     /**
      * Avatar element for `input` chips. Takes priority over `leadingIcon`.
      * Rendered as a 24×24px circle (InputChipTokens: AvatarSize = 24.dp, AvatarShape = CornerFull).
      */
-    avatar?: React.ReactNode;
+    avatar?: React$1.ReactNode;
     /**
      * Callback when the trailing remove (×) button is activated on `input` chips.
      * When provided, a dedicated tabbable close button with `aria-label="Remove {label}"` is rendered.
      */
-    onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onRemove?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Change the component to the underlying child element and merge props/behavior.
      * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
      * @default false
      */
     asChild?: boolean;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
 /**
  * MD3 Expressive Chip — 4-variant interactive tag component.
@@ -176,7 +177,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
  *
  * @see https://m3.material.io/components/chips/overview
  */
-declare const Chip: React.NamedExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Chip: React$1.NamedExoticComponent<ChipProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 /**
  * @file radio-button.tsx
@@ -221,7 +222,7 @@ interface RadioButtonProps {
     /** Whether the radio is required for form submission. */
     required?: boolean;
     /** Ref to the hidden `<input type="radio">`. */
-    ref?: React.Ref<HTMLInputElement>;
+    ref?: React$1.Ref<HTMLInputElement>;
 }
 /** Props for `RadioGroup`. */
 interface RadioGroupProps {
@@ -245,7 +246,7 @@ interface RadioGroupProps {
     orientation?: "horizontal" | "vertical";
     /** Whether at least one radio in the group must be selected. */
     required?: boolean;
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     className?: string;
 }
 /**
@@ -266,7 +267,7 @@ interface RadioGroupProps {
  * ```
  * @see https://m3.material.io/components/radio-button/overview
  */
-declare const RadioButton: React.NamedExoticComponent<Omit<RadioButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const RadioButton: React$1.NamedExoticComponent<Omit<RadioButtonProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 /**
  * MD3 Expressive RadioGroup component.
  *
@@ -283,7 +284,7 @@ declare const RadioButton: React.NamedExoticComponent<Omit<RadioButtonProps, "re
  * ```
  * @see https://m3.material.io/components/radio-button/overview
  */
-declare const RadioGroup: React.NamedExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroup: React$1.NamedExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * @file text-field.types.ts
@@ -328,7 +329,7 @@ interface TextFieldProps {
     /** Initial value for uncontrolled mode. */
     defaultValue?: string;
     /** Fires when value changes. Receives new value string and native event. */
-    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChange?: (value: string, event: React$1.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Input type. Use 'textarea' for multi-line input. @default 'text' */
     type?: TextFieldInputType;
     /** Placeholder text — shown only when no label OR label is floated. */
@@ -336,7 +337,7 @@ interface TextFieldProps {
     name?: string;
     id?: string;
     autoComplete?: string;
-    inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+    inputMode?: React$1.HTMLAttributes<HTMLInputElement>["inputMode"];
     /** Number of rows for textarea type. @default 2 */
     rows?: number;
     /** Number of columns for textarea type. @default 20 */
@@ -371,9 +372,9 @@ interface TextFieldProps {
     /** Text displayed after the input value (e.g., ".00"). */
     suffixText?: string;
     /** Icon node for the leading slot. Should be 24×24px. */
-    leadingIcon?: React.ReactNode;
+    leadingIcon?: React$1.ReactNode;
     /** Custom trailing icon node. Used when trailingIconMode='custom'. */
-    trailingIcon?: React.ReactNode;
+    trailingIcon?: React$1.ReactNode;
     /**
      * Built-in trailing icon behavior.
      * - 'none' — no trailing icon
@@ -397,11 +398,11 @@ interface TextFieldProps {
     fullWidth?: boolean;
     /** Dense variant — reduced height (48px instead of 56px). */
     dense?: boolean;
-    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    ref?: React.Ref<TextFieldHandle>;
+    onFocus?: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur?: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyDown?: React$1.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyUp?: React$1.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    ref?: React$1.Ref<TextFieldHandle>;
     /**
      * Controls when the scrollbars are visible when type="textarea".
      * - `hover`: Show on hover (default)
@@ -419,8 +420,8 @@ interface TextFieldProps {
  * Reference: docs/m3/sliders/Slider.kt
  */
 
-/** Track size variants mapping to physical px values. */
-type SliderTrackSize = "xs" | "s" | "m" | "l" | "xl";
+/** @deprecated Use MD3Size instead */
+type SliderTrackSize = MD3Size;
 type SliderVariant = "primary" | "secondary" | "tertiary" | "error";
 type SliderTrackShape = "md3" | "full" | number;
 /** Slider layout direction. */
@@ -471,11 +472,11 @@ interface SliderProps {
     /** Layout orientation. @default "horizontal" */
     orientation?: SliderOrientation;
     /**
-     * Physical track size.
+     * Physical track size per MD3 specification.
      * Horizontal: height. Vertical: width.
-     * @default "m"
+     * @default "md"
      */
-    trackSize?: SliderTrackSize;
+    size?: MD3Size;
     /**
      * Color variant.
      * @default "primary"
@@ -588,7 +589,7 @@ interface SliderThumbProps {
     showValueIndicator: boolean;
     /** For the drag constraint ref. */
     trackRef: React.RefObject<HTMLDivElement | null>;
-    trackSize: SliderTrackSize;
+    size: MD3Size;
     variant: SliderVariant;
     /** Called during pointer drag with new value. */
     onValueChange: (value: number) => void;
@@ -650,7 +651,7 @@ interface SliderThumbProps {
  *
  * @see https://m3.material.io/components/sliders/overview
  */
-declare const RangeSlider: React.NamedExoticComponent<RangeSliderProps & React.RefAttributes<HTMLDivElement>>;
+declare const RangeSlider: React$1.NamedExoticComponent<RangeSliderProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * @file slider.tsx
@@ -710,7 +711,7 @@ declare const RangeSlider: React.NamedExoticComponent<RangeSliderProps & React.R
  *
  * @see https://m3.material.io/components/sliders/overview
  */
-declare const Slider: React.NamedExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
+declare const Slider: React$1.NamedExoticComponent<SliderProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * @file slider.tokens.ts
@@ -729,24 +730,24 @@ declare const Slider: React.NamedExoticComponent<SliderProps & React.RefAttribut
 declare const SliderTokens: {
     readonly trackSizes: {
         xs: number;
-        s: number;
-        m: number;
-        l: number;
+        sm: number;
+        md: number;
+        lg: number;
         xl: number;
     };
     readonly trackShapes: {
         xs: number;
-        s: number;
-        m: number;
-        l: number;
+        sm: number;
+        md: number;
+        lg: number;
         xl: number;
     };
     /** Thumb height grows with track size */
     readonly thumbHeights: {
         xs: number;
-        s: number;
-        m: number;
-        l: number;
+        sm: number;
+        md: number;
+        lg: number;
         xl: number;
     };
     /**
@@ -785,9 +786,9 @@ declare const SliderTokens: {
     /** Standard icon size map for inset icons inside the track. */
     readonly insetIconSizes: {
         xs: number;
-        s: number;
-        m: number;
-        l: number;
+        sm: number;
+        md: number;
+        lg: number;
         xl: number;
     };
     /**
@@ -824,14 +825,14 @@ declare const SliderColors: {
     readonly valueIndicatorText: "var(--md-sys-color-inverse-on-surface)";
     /**
      * Tick on the INACTIVE portion of the track.
-     * Maps to TickMarkActiveContainerColor (in spec: primary color stands out).
+     * Maps to TickMarkInactiveContainerColor (in spec: primary color stands out).
      */
     readonly tickOnInactive: "var(--md-sys-color-primary)";
     /**
      * Tick on the ACTIVE portion of the track.
-     * Maps to TickMarkInactiveContainerColor (secondary-container blends in).
+     * Maps to TickMarkActiveContainerColor (in spec: on-primary contrasts with filled track).
      */
-    readonly tickOnActive: "var(--md-sys-color-secondary-container)";
+    readonly tickOnActive: "var(--md-sys-color-on-primary)";
     readonly disabledTick: "var(--md-sys-color-on-surface)";
 };
 
@@ -860,7 +861,7 @@ interface SwitchProps {
      * Optional icon content rendered inside the thumb.
      * Expected to measure 16dp (SwitchTokens.iconSize).
      */
-    thumbContent?: React.ReactNode;
+    thumbContent?: React$1.ReactNode;
     /**
      * When true, shows thumb icons in both selected and unselected states.
      * Requires `thumbContent` to be provided.
@@ -923,7 +924,7 @@ interface SwitchProps {
  *
  * @see https://m3.material.io/components/switch/overview
  */
-declare const Switch: React.NamedExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Switch: React$1.NamedExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 /**
  * @file switch.tokens.ts
@@ -1040,6 +1041,6 @@ declare const SwitchColors: {
  *
  * @see https://m3.material.io/components/text-fields/overview
  */
-declare const TextField: React.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextFieldHandle>>;
+declare const TextField: React$1.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React$1.RefAttributes<TextFieldHandle>>;
 
 export { TriStateCheckbox as A, type TriStateCheckboxProps as B, Checkbox as C, RadioButton as R, type SliderThumbProps as S, TextField as T, type CheckboxProps as a, type CheckboxState as b, Chip as c, type ChipProps as d, type RadioButtonColors as e, type RadioButtonProps as f, RadioGroup as g, type RadioGroupProps as h, RangeSlider as i, type RangeSliderProps as j, Slider as k, SliderColors as l, type SliderOrientation as m, type SliderProps as n, SliderTokens as o, type SliderTrackSize as p, type SliderVariant as q, Switch as r, SwitchColors as s, type SwitchProps as t, SwitchTokens as u, type TextFieldHandle as v, type TextFieldInputType as w, type TextFieldProps as x, type TextFieldTrailingIconMode as y, type TextFieldVariant as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/m3-expressive",
-  "version": "1.2.7",
+  "version": "1.3.1",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug On",
   "license": "MIT",
@@ -179,8 +179,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1",
-    "@bug-on/m3-tailwind": "1.2.1",
-    "@bug-on/m3-tokens": "1.2.1"
+    "@bug-on/m3-tokens": "1.2.1",
+    "@bug-on/m3-tailwind": "1.2.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",