@flikk/ui 1.0.0-beta.32 → 1.0.0-beta.33

package/dist/components/forms/DatePicker/DatePicker.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React__default, { useState, useRef, useCallback, useMemo } from 'react';
 import { datePickerTheme } from './DatePicker.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { DatePickerTrigger } from './DatePickerTrigger.js';
@@ -50,30 +50,38 @@ const DatePickerComponent = React__default.forwardRef(({ id, name, mode = "singl
     const theme = { ...datePickerTheme };
     // State
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState(value || defaultValue);
+    // 🔴 §9: mode is DERIVED per render, never stored. `value` used to be mirrored
+    // into state and re-synced from an unconditional `useEffect(…, [value])` —
+    // which on mount fired with `value === undefined` and wiped the `defaultValue`
+    // seed, and in controlled mode let an ignored change stick because an
+    // unchanged prop never re-ran the effect.
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const selectedValue = isControlled ? value : uncontrolledValue;
     // Refs
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
-    // Update internal state when prop value changes
-    useEffect(() => {
-        setSelectedValue(value);
-    }, [value]);
     // Date selection handler (single mode)
     const handleDateSelect = useCallback((newDate) => {
         if (mode === "single") {
-            if (newDate !== selectedValue) {
-                setSelectedValue(newDate);
+            // Compared by time, not identity: every calendar click builds a NEW Date,
+            // so an identity check was always true and the guard never fired.
+            const isSameSelection = selectedValue instanceof Date && selectedValue.getTime() === newDate.getTime();
+            if (!isSameSelection) {
+                if (!isControlled)
+                    setUncontrolledValue(newDate);
                 onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
             }
             setIsOpen(false);
         }
-    }, [mode, selectedValue, onChange]);
+    }, [mode, selectedValue, isControlled, onChange]);
     // Range selection handler (range mode)
     const handleRangeSelect = useCallback((newRange) => {
-        setSelectedValue(newRange);
+        if (!isControlled)
+            setUncontrolledValue(newRange);
         onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
         // Don't auto-close anymore - footer Apply button handles this
-    }, [onChange]);
+    }, [isControlled, onChange]);
     // Button click handler
     const handleButtonClick = useCallback(() => {
         if (!disabled) {
@@ -105,7 +113,6 @@ const DatePickerComponent = React__default.forwardRef(({ id, name, mode = "singl
             isOpen,
             setIsOpen,
             selectedValue,
-            setSelectedValue,
             minDate,
             maxDate,
             isDateDisabled,

package/dist/components/forms/DatePicker/DatePicker.theme.js

@@ -26,6 +26,11 @@ const datePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
+    // Size-aware icon geometry: slot inset from --form-px-*, glyph from
+    // --form-icon-size-*. Flat keys above stay as the fallback.
+    iconEndStyles: formsBaseTheme.iconStyles.rightSizes,
+    iconEndPaddings: formsBaseTheme.iconStyles.paddingRightSizes,
+    iconSizes: formsBaseTheme.iconStyles.sizes,
     // Dropdown body - surface painted by the relative-elevation engine (surfaceClasses)
     bodyStyle: "min-w-fit max-w-none backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] p-0 overflow-hidden z-[1000] fixed",
     bodyWithPresetsStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",

package/dist/components/forms/DatePicker/DatePicker.types.d.ts

@@ -155,8 +155,16 @@ export interface DatePickerTheme {
     triggerStates: Record<DatePickerState, string>;
     triggerHoverStates: Record<DatePickerState, string>;
     triggerFocusStates: Record<DatePickerState, string>;
+    /** @deprecated size-blind; superseded by `iconEndStyles` */
     iconEndStyle: string;
+    /** @deprecated size-blind; superseded by `iconEndPaddings` */
     iconEndPadding: string;
+    /** Per-size trailing icon slot (position + inset) */
+    iconEndStyles?: Partial<Record<DatePickerSize, string>>;
+    /** Per-size text runway reserved for the trailing icon */
+    iconEndPaddings?: Partial<Record<DatePickerSize, string>>;
+    /** Per-size sizing for the built-in calendar icon */
+    iconSizes?: Record<DatePickerSize, string>;
     bodyStyle: string;
     bodyWithPresetsStyle: string;
     presetsContainerStyle: string;

package/dist/components/forms/DatePicker/DatePickerContext.d.ts

@@ -5,7 +5,6 @@ export interface DatePickerContextType {
     isOpen: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
     selectedValue: Date | DateRange | undefined;
-    setSelectedValue: React.Dispatch<React.SetStateAction<Date | DateRange | undefined>>;
     minDate?: Date;
     maxDate?: Date;
     isDateDisabled?: (date: Date) => boolean;

package/dist/components/forms/DatePicker/DatePickerTrigger.js

@@ -10,7 +10,7 @@ import { DatePickerContext } from './DatePickerContext.js';
  * Displays selected date or placeholder text
  */
 const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const context = useContext(DatePickerContext);
     if (!context) {
         throw new Error("DatePickerTrigger must be used within a DatePicker");
@@ -21,7 +21,9 @@ const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md
     const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
     const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
     const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
-    const iconEndStyle = theme.iconEndStyle || "";
+    const iconEndStyle = ((_e = theme.iconEndStyles) === null || _e === void 0 ? void 0 : _e[size]) || theme.iconEndStyle || "";
+    // Glyph ramps with the control (--form-icon-size-*), not a flat h-4 w-4.
+    const iconSizeStyle = ((_f = theme.iconSizes) === null || _f === void 0 ? void 0 : _f[size]) || "size-4";
     const iconEndPadding = theme.iconEndPadding || ""; // Always apply right padding for built-in calendar icon
     const triggerButtonStyle = theme.triggerButtonStyle || "";
     // Apply focused styles when open - same pattern as SelectButton
@@ -29,7 +31,7 @@ const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md
         ? focusStateStyle ||
             "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
         : "";
-    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(Calendar, { className: "h-4 w-4" }) })] }) }));
+    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(Calendar, { className: iconSizeStyle }) })] }) }));
 };
 
 export { DatePickerTrigger };

package/dist/components/forms/DateRangePicker/DateRangePicker.theme.js

@@ -19,6 +19,11 @@ const dateRangePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
+    // Size-aware icon geometry: slot inset from --form-px-*, glyph from
+    // --form-icon-size-*. Flat keys above stay as the fallback.
+    iconEndStyles: formsBaseTheme.iconStyles.rightSizes,
+    iconEndPaddings: formsBaseTheme.iconStyles.paddingRightSizes,
+    iconSizes: formsBaseTheme.iconStyles.sizes,
     bodyStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",
     presetsContainerStyle: "hidden sm:flex flex-col gap-1 p-3 sm:border-r border-[var(--color-border)] bg-[var(--color-surface-sunken)] sm:min-w-[180px]",
     presetButtonStyle: "w-full text-left px-3 py-2 text-sm font-medium rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +

package/dist/components/forms/DateRangePicker/DateRangePicker.types.d.ts

@@ -163,8 +163,16 @@ export interface DateRangePickerTheme {
     triggerStates: Record<DateRangePickerState, string>;
     triggerHoverStates: Record<DateRangePickerState, string>;
     triggerFocusStates: Record<DateRangePickerState, string>;
+    /** @deprecated size-blind; superseded by `iconEndStyles` */
     iconEndStyle: string;
+    /** @deprecated size-blind; superseded by `iconEndPaddings` */
     iconEndPadding: string;
+    /** Per-size trailing icon slot (position + inset) */
+    iconEndStyles?: Partial<Record<DateRangePickerSize, string>>;
+    /** Per-size text runway reserved for the trailing icon */
+    iconEndPaddings?: Partial<Record<DateRangePickerSize, string>>;
+    /** Per-size sizing for the built-in calendar icon */
+    iconSizes?: Record<DateRangePickerSize, string>;
     bodyStyle: string;
     presetsContainerStyle: string;
     presetButtonStyle: string;

package/dist/components/forms/DateRangePicker/DateRangePickerTrigger.js

@@ -9,7 +9,7 @@ import { DateRangePickerContext } from './DateRangePickerContext.js';
  * DateRangePicker Trigger Component — styled like form input
  */
 const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const context = useContext(DateRangePickerContext);
     if (!context) {
         throw new Error("DateRangePickerTrigger must be used within a DateRangePicker");
@@ -20,14 +20,16 @@ const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size
     const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
     const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
     const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
-    const iconEndStyle = theme.iconEndStyle || "";
+    const iconEndStyle = ((_e = theme.iconEndStyles) === null || _e === void 0 ? void 0 : _e[size]) || theme.iconEndStyle || "";
+    // Glyph ramps with the control (--form-icon-size-*), not a flat h-4 w-4.
+    const iconSizeStyle = ((_f = theme.iconSizes) === null || _f === void 0 ? void 0 : _f[size]) || "size-4";
     const iconEndPadding = theme.iconEndPadding || "";
     const triggerButtonStyle = theme.triggerButtonStyle || "";
     const activeFocusState = isOpen
         ? focusStateStyle ||
             "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
         : "";
-    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open date range picker", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(Calendar, { className: "h-4 w-4" }) })] }) }));
+    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open date range picker", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(Calendar, { className: iconSizeStyle }) })] }) }));
 };
 
 export { DateRangePickerTrigger };

package/dist/components/forms/Input/Input.js

@@ -20,16 +20,16 @@ const PasswordToggleButton = ({ showPassword, onToggle, passwordToggleClasses, }
             }
         }, children: showPassword ? (jsx(EyeSlash, { className: toggleIconActive, "aria-hidden": "true" })) : (jsx(Eye, { className: toggleIconInactive, "aria-hidden": "true" })) }));
 };
-const NumberButtons = ({ isDisabled, isAtMax, isAtMin, onIncrement, onDecrement, numberButtonsContainerClasses, numberButtonClasses, }) => {
+const NumberButtons = ({ isDisabled, isAtMax, isAtMin, onIncrement, onDecrement, numberButtonsContainerClasses, numberButtonClasses, iconSizeClass, }) => {
     const incrementIconStyle = inputTheme.typeStyles.number.incrementIconStyle;
     const decrementIconStyle = inputTheme.typeStyles.number.decrementIconStyle;
     return (jsxs("div", { className: numberButtonsContainerClasses, children: [jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
                     e.stopPropagation();
                     onDecrement();
-                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(Minus, { className: cn("size-4", decrementIconStyle), "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
+                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(Minus, { className: cn(iconSizeClass, decrementIconStyle), "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
                     e.stopPropagation();
                     onIncrement();
-                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(Plus, { className: cn("size-4", incrementIconStyle), "aria-hidden": "true" }) })] }));
+                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(Plus, { className: cn(iconSizeClass, incrementIconStyle), "aria-hidden": "true" }) })] }));
 };
 const getActiveDots = (strength) => {
     switch (strength) {
@@ -68,6 +68,7 @@ const PasswordStrengthIndicator = ({ inline = false, passwordStrengthIndicator,
 // Main Input Component
 // ============================================================================
 const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, errorMessage, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onValueChange, onFocus, onBlur, value, currencyDecimalPlaces, darkMode = false, showTypeIcon = true, ...props }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const [isFocused, setIsFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const generatedId = React__default.useId();
@@ -81,9 +82,12 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
         : undefined);
     const inputRef = useRef(null);
     const cursorPositionRef = useRef(null);
-    // Default icons based on input type
-    const defaultPasswordIcon = showTypeIcon && type === "password" && !iconStart ? (jsx(Lock, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
-    const defaultSearchIcon = showTypeIcon && type === "search" && !iconStart ? (jsx(MagnifyingGlass, { className: cn("size-5", inputTheme.typeStyles.search.iconStyle) })) : null;
+    // Default icons based on input type. Sized from the shared control-icon
+    // ramp (--form-icon-size-*) rather than a flat size-5, so they scale with
+    // the field and with a theme that retunes it.
+    const iconSizeClass = ((_a = inputTheme.iconSizes) === null || _a === void 0 ? void 0 : _a[size]) || "size-4";
+    const defaultPasswordIcon = showTypeIcon && type === "password" && !iconStart ? (jsx(Lock, { className: cn(iconSizeClass, "text-[var(--color-text-muted)]") })) : null;
+    const defaultSearchIcon = showTypeIcon && type === "search" && !iconStart ? (jsx(MagnifyingGlass, { className: cn(iconSizeClass, inputTheme.typeStyles.search.iconStyle) })) : null;
     // Use the provided iconStart or the default icon based on input type
     const finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
     // Derived state flags for internal use
@@ -253,11 +257,12 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
     const sizeClasses = inputTheme.sizes[size];
     const stateClasses = inputTheme.states[state];
     const helperTextClasses = inputTheme.helperText;
-    // Icon classes using design tokens
-    const iconStartClasses = inputTheme.iconStartStyle;
-    const iconEndClasses = inputTheme.iconEndStyle;
-    const iconStartPadding = inputTheme.iconPadding.left;
-    const iconEndPadding = inputTheme.iconPadding.right;
+    // Icon classes using design tokens — size-aware slot inset and text runway,
+    // falling back to the flat originals if a theme only overrode those.
+    const iconStartClasses = ((_b = inputTheme.iconStartStyles) === null || _b === void 0 ? void 0 : _b[size]) || inputTheme.iconStartStyle;
+    const iconEndClasses = ((_c = inputTheme.iconEndStyles) === null || _c === void 0 ? void 0 : _c[size]) || inputTheme.iconEndStyle;
+    const iconStartPadding = ((_e = (_d = inputTheme.iconPaddings) === null || _d === void 0 ? void 0 : _d.left) === null || _e === void 0 ? void 0 : _e[size]) || inputTheme.iconPadding.left;
+    const iconEndPadding = ((_g = (_f = inputTheme.iconPaddings) === null || _f === void 0 ? void 0 : _f.right) === null || _g === void 0 ? void 0 : _g[size]) || inputTheme.iconPadding.right;
     // Content classes - size-aware
     const contentStyleClasses = inputTheme.contentStyle[size];
     const contentStartStyle = inputTheme.contentStartStyle;
@@ -282,7 +287,7 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
                                     }, onBlur: (e) => {
                                         setIsFocused(false);
                                         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), role: isInvalid ? "alert" : undefined, children: displayedMessage })) : (displayedMessage))] }));
+                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses, iconSizeClass: iconSizeClass })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), role: isInvalid ? "alert" : undefined, children: displayedMessage })) : (displayedMessage))] }));
 });
 Input.displayName = "Input";
 

package/dist/components/forms/Input/Input.theme.js

@@ -45,6 +45,16 @@ const inputTheme = {
     // Icon positioning styles
     iconStartStyle: formsBaseTheme.iconStyles.left,
     iconEndStyle: formsBaseTheme.iconStyles.right,
+    // Size-aware icon geometry: slot inset from --form-px-*, glyph from
+    // --form-icon-size-*. The flat keys above stay as the fallback for a theme
+    // that only overrode those.
+    iconStartStyles: formsBaseTheme.iconStyles.leftSizes,
+    iconEndStyles: formsBaseTheme.iconStyles.rightSizes,
+    iconSizes: formsBaseTheme.iconStyles.sizes,
+    iconPaddings: {
+        left: formsBaseTheme.iconStyles.paddingLeftSizes,
+        right: formsBaseTheme.iconStyles.paddingRightSizes,
+    },
     // Icon padding configuration
     iconPadding: formsBaseTheme.iconStyles.padding,
     // Content styles - prefix/suffix content with size-aware font sizes

package/dist/components/forms/Input/Input.types.d.ts

@@ -115,12 +115,26 @@ export interface InputTheme {
     sizes: Record<InputSize, string>;
     states: Record<InputState, string>;
     helperText: string;
+    /** @deprecated size-blind; superseded by `iconStartStyles` */
     iconStartStyle: string;
+    /** @deprecated size-blind; superseded by `iconEndStyles` */
     iconEndStyle: string;
+    /** @deprecated size-blind; superseded by `iconPaddings` */
     iconPadding: {
         left: string;
         right: string;
     };
+    /** Per-size leading icon slot (position + inset) */
+    iconStartStyles?: Partial<Record<InputSize, string>>;
+    /** Per-size trailing icon slot (position + inset) */
+    iconEndStyles?: Partial<Record<InputSize, string>>;
+    /** Per-size text runway reserved for each icon slot */
+    iconPaddings?: {
+        left?: Partial<Record<InputSize, string>>;
+        right?: Partial<Record<InputSize, string>>;
+    };
+    /** Per-size sizing for the built-in type icons (lock, search) */
+    iconSizes?: Record<InputSize, string>;
     contentStyle: Record<InputSize, string>;
     contentStartStyle: string;
     contentEndStyle: string;

package/dist/components/forms/InputAddress/InputAddress.js

@@ -75,7 +75,7 @@ const DEFAULT_COUNTRIES = [
  * />
  * ```
  */
-const InputAddress = React__default.forwardRef(({ state = 'default', errorMessage, showCountrySelector = true, showPostalCode = true, availableCountries = [], defaultCountry = "United States", onCountryChange, onPostalCodeChange, countryLabel = "Country", postalCodeLabel = "ZIP / Postal code", legendText = "Billing address", streetInputProps = {}, stateInputProps = {}, countryInputProps = {}, postalCodeInputProps = {}, className = "", theme = {}, }, ref) => {
+const InputAddress = React__default.forwardRef(({ state = 'default', size = 'md', errorMessage, showCountrySelector = true, showPostalCode = true, availableCountries = [], defaultCountry = "United States", onCountryChange, onPostalCodeChange, countryLabel = "Country", postalCodeLabel = "ZIP / Postal code", legendText = "Billing address", streetInputProps = {}, stateInputProps = {}, countryInputProps = {}, postalCodeInputProps = {}, className = "", theme = {}, }, ref) => {
     var _a;
     const isDisabled = state === 'disabled';
     // Clear the error visually as soon as the user starts re-entering after an error.
@@ -140,10 +140,10 @@ const InputAddress = React__default.forwardRef(({ state = 'default', errorMessag
     const isBottomRowSplit = showCountrySelector && showPostalCode;
     // Merge group state into each field's props; strip per-field helperText so only the
     // consolidated message shows at the bottom.
-    const { helperText: _st, onChange: _stOnChange, ...streetProps } = { state: fieldState, ...streetInputProps };
-    const { helperText: _sa, onChange: _saOnChange, ...stateProps } = { state: fieldState, ...stateInputProps };
-    const { helperText: _co, className: _coClass, ...countryProps } = { state: fieldState, ...countryInputProps };
-    const { helperText: _pc, ...postalProps } = { state: fieldState, ...postalCodeInputProps };
+    const { helperText: _st, onChange: _stOnChange, ...streetProps } = { state: fieldState, size, ...streetInputProps };
+    const { helperText: _sa, onChange: _saOnChange, ...stateProps } = { state: fieldState, size, ...stateInputProps };
+    const { helperText: _co, className: _coClass, ...countryProps } = { state: fieldState, size, ...countryInputProps };
+    const { helperText: _pc, ...postalProps } = { state: fieldState, size, ...postalCodeInputProps };
     return (jsxs("fieldset", { ref: ref, className: `w-full border-0 m-0 p-0 ${isInvalid ? 'state-invalid' : ''} ${className}`, "data-testid": "input-address-fieldset", "aria-invalid": isInvalid || undefined, "aria-errormessage": isInvalid && errorMessage ? errorId : undefined, children: [jsx("legend", { className: `block text-sm/6 font-medium mb-2 text-[var(--color-text-primary)] ${(_a = mergedTheme.legendStyles) !== null && _a !== void 0 ? _a : ""}`, children: legendText }), jsxs("div", { className: `relative grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-address-content", children: [jsx("div", { className: "w-full relative focus-within:z-10 hover:z-10", "data-testid": "input-address-street", children: jsx(Input, { id: streetId, type: "text", placeholder: "Street address", "aria-label": "street address", inputGroupClassName: "rounded-b-none", ...streetProps, onChange: markDirty(_stOnChange) }) }), jsx("div", { className: "w-full -mt-[0.5px] relative focus-within:z-10 hover:z-10", "data-testid": "input-address-state", children: jsx(Input, { id: stateId, type: "text", placeholder: "State", "aria-label": "state", inputGroupClassName: showBottomRow ? "rounded-none" : "rounded-t-none", ...stateProps, onChange: markDirty(_saOnChange) }) }), showBottomRow && (jsxs("div", { className: cn("grid grid-cols-1 w-full -mt-px relative focus-within:z-10 hover:z-10", isBottomRowSplit && "sm:grid-cols-2"), children: [showCountrySelector && (jsx("div", { className: `${mergedTheme.countryWrapperStyles} w-full sm:pr-0 relative focus-within:z-10 hover:z-10`, "data-testid": "input-address-country", children: jsx(Select, { id: countryId, options: countryOptions, value: country, onChange: handleCountryChange, placeholder: countryLabel, searchable: true, searchPlaceholder: `Search ${countryLabel.toLowerCase()}`, disabled: isDisabled, 
                                     // className lands on the Select trigger button (which carries the same
                                     // inputGroup border/radius as Input's inputGroupClassName target), so the

package/dist/components/forms/InputAddress/InputAddress.types.d.ts

@@ -17,6 +17,13 @@ import { SelectSingleProps } from '../Select/Select.types';
 export interface InputAddressProps {
     /** Visual/validation state of the entire address group */
     state?: 'default' | 'disabled' | 'invalid';
+    /**
+     * Size of every field in the group, from the shared `--form-*` scale, so the
+     * address block lines up with the Inputs and Selects around it. A per-field
+     * `*InputProps.size` still wins.
+     * @default 'md'
+     */
+    size?: InputProps['size'];
     /** Consolidated error message shown below all fields when `state="invalid"` */
     errorMessage?: React.ReactNode;
     /** Whether to show the country selector */