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

package/dist/components/forms/Mention/Mention.js

@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'motion/react';
 import { mentionTheme } from './Mention.theme.js';
 import { cn } from '../../../utils/cn.js';
+import { composeEventHandlers } from '../../../utils/composeEventHandlers.js';
 import { Avatar } from '../../core/Avatar/Avatar.js';
 import { Tag } from '../../core/Tag/Tag.js';
 import { MenuItem } from '../../core/MenuItem/MenuItem.js';
@@ -77,12 +78,15 @@ const dropdownVariants = {
 // ---------------------------------------------------------------------------
 // Mention component
 // ---------------------------------------------------------------------------
-const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions: suggestionsProp, onSearch: onSearchProp, value: controlledValue, defaultValue = "", onChange, onMentionSelect, onMentionsChange, placeholder, size = "md", maxSuggestions = 8, className, wrapperClassName, dropdownClassName, theme: themeOverrides, state = "default", disabled = false, helperText, required, label, renderSuggestion, emptyMessage = "No results found", loading = false, mentionTagSize = "sm", mentionTagClassName, mentionTagRemovable = true, rows = 3, style: styleProp, elevation, lift, ...props }, ref) => {
+const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions: suggestionsProp, onSearch: onSearchProp, value: controlledValue, defaultValue = "", onChange, onMentionSelect, onMentionsChange, placeholder, size = "md", maxSuggestions = 8, className, wrapperClassName, dropdownClassName, theme: themeOverrides, state = "default", disabled = false, helperText, required, label, renderSuggestion, emptyMessage = "No results found", loading = false, mentionTagSize = "sm", mentionTagClassName, mentionTagRemovable = true, rows = 3, style: styleProp, id: idProp, onInput: onInputProp, onKeyDown: onKeyDownProp, onClick: onClickProp, onFocus: onFocusProp, onBlur: onBlurProp, onPaste: onPasteProp, onSelect: onSelectProp, onCompositionStart: onCompositionStartProp, onCompositionEnd: onCompositionEndProp, elevation, lift, ...props }, ref) => {
     // Relative elevation: the suggestion dropdown lifts above its host surface
     // (overlay base = 5) so a Mention inside a Popover/Modal still reads higher.
     const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     const theme = useMemo(() => ({ ...mentionTheme, ...(themeOverrides || {}) }), [themeOverrides]);
-    const generatedId = useId();
+    const autoId = useId();
+    // `id` is destructured rather than left to `...props`: the spread lands
+    // BEFORE this element's own `id`, so a consumer value would be overwritten.
+    const generatedId = idProp !== null && idProp !== void 0 ? idProp : autoId;
     const listboxId = `${generatedId}-listbox`;
     const isDisabled = state === "disabled" || disabled;
     const isInvalid = state === "invalid";
@@ -583,17 +587,13 @@ const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions
         const text = e.clipboardData.getData("text/plain");
         document.execCommand("insertText", false, text);
     }, []);
-    const handleFocus = useCallback((e) => {
-        var _a;
+    const handleFocus = useCallback((_e) => {
         setIsFocused(true);
-        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, [props.onFocus]);
-    const handleBlur = useCallback((e) => {
-        var _a;
+    }, []);
+    const handleBlur = useCallback((_e) => {
         setSelectedMentionIndex(null);
         setIsFocused(false);
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, [props.onBlur]);
+    }, []);
     const handleCompositionStart = useCallback(() => {
         composingRef.current = true;
     }, []);
@@ -702,7 +702,9 @@ const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions
     const helperId = `${generatedId}-helper`;
     const labelId = `${generatedId}-label`;
     return (jsxs("div", { className: cn(theme.wrapperStyle, wrapperClassName), children: [label && (jsx(FormLabel, { id: labelId, htmlFor: generatedId, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", required: required, className: "mb-1.5", children: label })), jsx("div", { ref: wrapperRef, className: cn(theme.inputGroupStyle, isInvalid && theme.invalidStyle, isFocused &&
-                    (isInvalid ? theme.invalidFocusStyle : theme.inputGroupFocusStyle)), children: createElement("div", { ...props, key: editorKey, ref: setEditableRef, id: generatedId, contentEditable: !isDisabled, suppressContentEditableWarning: true, onInput: handleInput, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste, onSelect: handleSelect, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd, role: "combobox", "aria-autocomplete": "list", "aria-expanded": isDropdownOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-placeholder": placeholder, "aria-required": required || undefined, "data-placeholder": placeholder, "aria-disabled": isDisabled || undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": helperText ? helperId : undefined, "aria-labelledby": label ? labelId : undefined, className: cn(theme.editableStyle, theme.sizes[size], isContentEmpty &&
+                    (isInvalid ? theme.invalidFocusStyle : theme.inputGroupFocusStyle)), children: createElement("div", { ...props, key: editorKey, ref: setEditableRef, id: generatedId, contentEditable: !isDisabled, suppressContentEditableWarning: true, 
+                    // 🔴 §9: composed, not clobbered — ours first, then the consumer's.
+                    onInput: composeEventHandlers(handleInput, onInputProp), onKeyDown: composeEventHandlers(handleKeyDown, onKeyDownProp), onClick: composeEventHandlers(handleClick, onClickProp), onFocus: composeEventHandlers(handleFocus, onFocusProp), onBlur: composeEventHandlers(handleBlur, onBlurProp), onPaste: composeEventHandlers(handlePaste, onPasteProp), onSelect: composeEventHandlers(handleSelect, onSelectProp), onCompositionStart: composeEventHandlers(handleCompositionStart, onCompositionStartProp), onCompositionEnd: composeEventHandlers(handleCompositionEnd, onCompositionEndProp), role: "combobox", "aria-autocomplete": "list", "aria-expanded": isDropdownOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-placeholder": placeholder, "aria-required": required || undefined, "data-placeholder": placeholder, "aria-disabled": isDisabled || undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": helperText ? helperId : undefined, "aria-labelledby": label ? labelId : undefined, className: cn(theme.editableStyle, theme.sizes[size], isContentEmpty &&
                         "before:content-[attr(data-placeholder)] before:text-[var(--color-text-placeholder)] before:pointer-events-none before:absolute", isDisabled && "cursor-not-allowed opacity-60", className), style: {
                         minHeight: rows ? `${rows * 1.5}em` : undefined,
                         ...styleProp,

package/dist/components/forms/RichTextEditor/RichTextEditor.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useId, useState, useCallback, useEffect } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { cn } from '../../../utils/cn.js';
+import { composeEventHandlers } from '../../../utils/composeEventHandlers.js';
 import { richTextEditorTheme } from './RichTextEditor.theme.js';
 import { DEFAULT_TOOLBAR_TOOLS, RichTextToolbar } from './RichTextToolbar.js';
 import { RichTextLinkField } from './RichTextLinkField.js';
@@ -24,11 +25,15 @@ import { redo, undo, clearFormatting, toggleCodeBlock, toggleBlockquote, toggleO
  *
  * 🔴 Per §9, `className`, `ref` and `...rest` target the contentEditable surface.
  */
-const RichTextEditor = React__default.forwardRef(({ size = "md", state = "default", label, helperText, errorMessage, value, onChange, placeholder, className, wrapperClassName, containerClassName, toolbarClassName, labelClassName, helperTextClassName, required = false, minHeight = 160, maxHeight, toolbar, theme: themeOverrides, sanitize, ...rest }, ref) => {
+const RichTextEditor = React__default.forwardRef(({ size = "md", state = "default", label, helperText, errorMessage, value, onChange, placeholder, className, wrapperClassName, containerClassName, toolbarClassName, labelClassName, helperTextClassName, required = false, minHeight = 160, maxHeight, toolbar, theme: themeOverrides, sanitize, id: idProp, style: styleProp, onInput: onInputProp, onPaste: onPasteProp, onDrop: onDropProp, onKeyUp: onKeyUpProp, onMouseUp: onMouseUpProp, onBlur: onBlurProp, ...rest }, ref) => {
     var _a;
     const theme = { ...richTextEditorTheme, ...themeOverrides };
     const editorRef = useRef(null);
-    const generatedId = useId();
+    const autoId = useId();
+    // 🔴 `id` and `style` are destructured rather than left to `...rest`: the
+    // spread lands BEFORE this element's own attributes, so anything the
+    // component also sets would silently overwrite the consumer's value.
+    const generatedId = idProp !== null && idProp !== void 0 ? idProp : autoId;
     const describedById = `${generatedId}-description`;
     const isDisabled = state === "disabled";
     const isInvalid = state === "invalid";
@@ -193,7 +198,11 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
     const message = isInvalid && errorMessage ? errorMessage : helperText;
     const hasMessage = Boolean(message);
     const restAriaLabel = rest["aria-label"];
-    return (jsxs("div", { className: cn(theme.wrapperStyle, wrapperClassName), children: [label && (jsx(FormLabel, { htmlFor: generatedId, state: state, required: required, className: labelClassName, children: label })), jsxs("div", { className: cn(theme.containerStyle, theme.containerStates[state], containerClassName), children: [showToolbar && (jsx(RichTextToolbar, { tools: tools, formatting: formatting, disabled: isDisabled, size: size, className: cn(toolbar === null || toolbar === void 0 ? void 0 : toolbar.className, toolbarClassName), onCommand: handleToolCommand, onBlockChange: handleBlockChange })), isLinkFieldOpen && !isDisabled && (jsx(RichTextLinkField, { initialHref: formatting.link, onApply: applyLink, onRemove: removeLink$1, onCancel: cancelLink })), jsx("div", { ...rest, id: generatedId, ref: setRefs, role: "textbox", "aria-multiline": "true", "aria-label": typeof label === "string" ? label : restAriaLabel !== null && restAriaLabel !== void 0 ? restAriaLabel : "Rich text editor", "aria-required": required || undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": hasMessage ? describedById : undefined, "aria-disabled": isDisabled || undefined, contentEditable: !isDisabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, "data-empty": isEmpty || undefined, tabIndex: isDisabled ? -1 : 0, style: { minHeight, maxHeight }, className: cn(theme.editorStyle, theme.editorSizes[size], isEmpty && placeholder && theme.placeholderStyle, className), onInput: emitChange, onPaste: handlePaste, onDrop: handleDrop, onKeyUp: syncFormatting, onMouseUp: syncFormatting, onBlur: saveSelection })] }), hasMessage && (jsx("div", { id: describedById, className: cn(isInvalid && errorMessage ? theme.errorTextStyle : theme.helperTextStyle, helperTextClassName), children: message }))] }));
+    return (jsxs("div", { className: cn(theme.wrapperStyle, wrapperClassName), children: [label && (jsx(FormLabel, { htmlFor: generatedId, state: state, required: required, className: labelClassName, children: label })), jsxs("div", { className: cn(theme.containerStyle, theme.containerStates[state], containerClassName), children: [showToolbar && (jsx(RichTextToolbar, { tools: tools, formatting: formatting, disabled: isDisabled, size: size, className: cn(toolbar === null || toolbar === void 0 ? void 0 : toolbar.className, toolbarClassName), onCommand: handleToolCommand, onBlockChange: handleBlockChange })), isLinkFieldOpen && !isDisabled && (jsx(RichTextLinkField, { initialHref: formatting.link, onApply: applyLink, onRemove: removeLink$1, onCancel: cancelLink })), jsx("div", { ...rest, id: generatedId, ref: setRefs, role: "textbox", "aria-multiline": "true", "aria-label": typeof label === "string" ? label : restAriaLabel !== null && restAriaLabel !== void 0 ? restAriaLabel : "Rich text editor", "aria-required": required || undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": hasMessage ? describedById : undefined, "aria-disabled": isDisabled || undefined, contentEditable: !isDisabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, "data-empty": isEmpty || undefined, tabIndex: isDisabled ? -1 : 0, style: { minHeight, maxHeight, ...styleProp }, className: cn(theme.editorStyle, theme.editorSizes[size], isEmpty && placeholder && theme.placeholderStyle, className), 
+                        // 🔴 §9: composed, not clobbered. These handlers are load-bearing
+                        // (selection tracking, sanitize-on-paste), so a consumer's must run
+                        // ALONGSIDE ours — ours first — never instead of them.
+                        onInput: composeEventHandlers(emitChange, onInputProp), onPaste: composeEventHandlers(handlePaste, onPasteProp), onDrop: composeEventHandlers(handleDrop, onDropProp), onKeyUp: composeEventHandlers(syncFormatting, onKeyUpProp), onMouseUp: composeEventHandlers(syncFormatting, onMouseUpProp), onBlur: composeEventHandlers(saveSelection, onBlurProp) })] }), hasMessage && (jsx("div", { id: describedById, className: cn(isInvalid && errorMessage ? theme.errorTextStyle : theme.helperTextStyle, helperTextClassName), children: message }))] }));
 });
 RichTextEditor.displayName = "RichTextEditor";
 

package/dist/components/forms/Select/Select.js

@@ -77,7 +77,7 @@ function SelectProvider({ children, selectState, size = "md", componentState = "
  * Select Button Component
  */
 const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", iconStart, iconEnd, contentStart, contentEnd, className = "", onClick, onFocus, onBlur, onKeyDown, children, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { theme, buttonRef } = useSelectContext();
     const baseStyle = theme.baseStyle || "";
     const sizeStyle = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
@@ -86,10 +86,16 @@ const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", ic
     const focusStateStyle = ((_d = theme.focusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
     const buttonWrapperStyle = theme.buttonWrapperStyle || "";
     const buttonStyle = theme.buttonStyle || "";
-    const iconStartStyle = theme.iconStartStyle || "";
-    const iconEndStyle = theme.iconEndStyle || "";
-    const iconStartPadding = iconStart ? ((_e = theme.iconPadding) === null || _e === void 0 ? void 0 : _e.left) || "" : "";
-    const iconEndPadding = iconEnd ? ((_f = theme.iconPadding) === null || _f === void 0 ? void 0 : _f.right) || "" : "";
+    const iconStartStyle = ((_e = theme.iconStartStyles) === null || _e === void 0 ? void 0 : _e[size]) || theme.iconStartStyle || "";
+    // Size-aware slot/runway, falling back to the flat keys for a consumer theme
+    // that only overrode those.
+    const iconEndStyle = ((_f = theme.iconEndStyles) === null || _f === void 0 ? void 0 : _f[size]) || theme.iconEndStyle || "";
+    const iconStartPadding = iconStart
+        ? ((_g = theme.iconStartPaddings) === null || _g === void 0 ? void 0 : _g[size]) || ((_h = theme.iconPadding) === null || _h === void 0 ? void 0 : _h.left) || ""
+        : "";
+    const iconEndPadding = iconEnd
+        ? ((_j = theme.iconEndPaddings) === null || _j === void 0 ? void 0 : _j[size]) || ((_k = theme.iconPadding) === null || _k === void 0 ? void 0 : _k.right) || ""
+        : "";
     // Size-aware content slot style (mirrors Input.theme contentStyle)
     const contentSlotStyle = `flex items-center px-3 ${size === "sm"
         ? "text-sm"
@@ -368,7 +374,7 @@ const SelectOption = ({ value, isSelected, disabled, className = "", onSelect, c
  * ```
  */
 const SelectInner = ({ id, name, size = "md", state = "default", value, displayValue, placeholder = "Select an option", disabled = false, required = false, options = [], label, helperText, onChange, onFocus, onBlur, iconStart, iconEnd, contentStart, contentEnd, theme: themeOverrides, className = "", wrapperClassName = "", searchable = false, searchPlaceholder = "Search...", portal = true, placement = "bottom-start", offset = 8, enableTypeahead = true, creatable = false, onCreateOption, createLabel, multiple = false, maxDisplayedChips = 3, elevation, lift, "aria-label": ariaLabel, children, }, ref) => {
-    var _a;
+    var _a, _b;
     // Merge theme with overrides
     const theme = useMemo(() => ({ ...selectTheme, ...(themeOverrides || {}) }), [themeOverrides]);
     // Use the extracted state hook
@@ -426,8 +432,9 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
     const helperTextStyle = theme.helperTextStyle || "";
     // Container style
     const containerStyle = theme.containerStyle || "";
-    // Default chevron icon if no iconEnd provided
-    const defaultChevronIcon = jsx(CaretUpDown, { className: "size-4" });
+    // Default chevron icon if no iconEnd provided. Its size ramps with the
+    // control — a flat size-4 out-weighed the 14px text at `sm`.
+    const defaultChevronIcon = (jsx(CaretUpDown, { className: ((_b = theme.iconEndSizes) === null || _b === void 0 ? void 0 : _b[size]) || "size-4" }));
     // Generate a unique ID if not provided
     const generatedId = React__default.useId();
     const selectId = id || generatedId;

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

@@ -51,8 +51,16 @@ const selectTheme = {
     helperTextStates: formsBaseTheme.helperTextStates,
     // Left icon style - inherited from common form theme
     iconStartStyle: formsBaseTheme.iconStyles.left,
-    // Right icon style - inherited from common form theme
+    iconStartStyles: formsBaseTheme.iconStyles.leftSizes,
+    iconStartPaddings: formsBaseTheme.iconStyles.paddingLeftSizes,
+    // Right icon (the chevron) — size-aware: the slot insets from the control's
+    // own --form-px-*, the glyph ramps 12/14/16, and the text runway is reserved
+    // to match. Flat `pr-3` + `size-4` at every size left the sm chevron both
+    // oversized against 14px text and further from the edge than it looked.
     iconEndStyle: formsBaseTheme.iconStyles.right,
+    iconEndStyles: formsBaseTheme.iconStyles.rightSizes,
+    iconEndSizes: formsBaseTheme.iconStyles.sizes,
+    iconEndPaddings: formsBaseTheme.iconStyles.paddingRightSizes,
     // Check icon style for selected options
     checkIconStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-primary)] " +
         "dark:text-[var(--color-primary-400)]",

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

@@ -303,8 +303,23 @@ export interface SelectThemeOverrides {
     helperTextStates?: Partial<Record<SelectState, string>>;
     /** Left icon style */
     iconStartStyle?: string;
-    /** Right icon style */
+    /** Per-size left icon slot style (position + inset) */
+    iconStartStyles?: Partial<Record<SelectSize, string>>;
+    /** Per-size text runway reserved for the left icon */
+    iconStartPaddings?: Partial<Record<SelectSize, string>>;
+    /**
+     * Right icon slot style.
+     * @deprecated superseded by `iconEndStyles`, which insets the slot from the
+     * control's own `--form-px-*` instead of a flat `pr-3` at every size. Still
+     * honoured as a fallback when `iconEndStyles` has no entry for the size.
+     */
     iconEndStyle?: string;
+    /** Per-size right icon slot style (position + inset) */
+    iconEndStyles?: Partial<Record<SelectSize, string>>;
+    /** Per-size sizing for the built-in chevron */
+    iconEndSizes?: Partial<Record<SelectSize, string>>;
+    /** Per-size text runway reserved for the right icon */
+    iconEndPaddings?: Partial<Record<SelectSize, string>>;
     /** Style for the check icon in selected options */
     checkIconStyle?: string;
     /** Icon padding styles */

package/dist/components/forms/Textarea/Textarea.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useState } from 'react';
+import React__default from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { textareaTheme } from './Textarea.theme.js';
 import { cn } from '../../../utils/cn.js';
 
 const Textarea = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, errorMessage, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", id, theme = {}, required, rows = 3, cols, unstyled = false, onValueChange, ...props }, ref) => {
     var _a, _b, _c, _d;
-    const [isFocused, setIsFocused] = useState(false);
     const generatedId = React__default.useId();
     const inputId = id || generatedId;
     // Derived state flags for internal use
@@ -16,17 +15,20 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
     // errorMessage takes precedence over helperText while invalid; helperText
     // behavior is unchanged otherwise.
     const displayedMessage = isInvalid && errorMessage ? errorMessage : helperText;
+    // Pull onChange out of props so the explicit handler below isn't overwritten
+    // by the spread, and wire it ONCE — 🔴 both render paths must use it. The
+    // `unstyled` early return below used to drop `onValueChange` entirely, so
+    // `value` + `onValueChange` + `unstyled` produced a permanently read-only
+    // textarea: React saw a controlled value with no onChange, warned, and
+    // nothing the user typed ever reached the consumer.
+    const { onChange: propsOnChange, ...restProps } = props;
+    const handleChange = (event) => {
+        propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(event);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event.target.value);
+    };
     // If unstyled, render only the textarea element
     if (unstyled) {
-        return (jsx("textarea", { ref: ref, id: inputId, className: className, disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
-                var _a;
-                setIsFocused(true);
-                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-            }, onBlur: (e) => {
-                var _a;
-                setIsFocused(false);
-                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-            }, ...props }));
+        return (jsx("textarea", { ref: ref, id: inputId, className: className, disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onChange: handleChange, ...restProps }));
     }
     // State class for CSS selectors
     const stateClass = isInvalid
@@ -34,8 +36,6 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
         : isDisabled
             ? "state-disabled"
             : "state-default";
-    // Pull onChange out of props so the explicit handler below isn't overwritten by the spread
-    const { onChange: propsOnChange, ...restProps } = props;
     // Get theme classes
     const wrapperClasses = theme.wrapperStyle || textareaTheme.wrapperStyle || "";
     const inputGroupClasses = theme.inputGroupStyle || textareaTheme.inputGroupStyle || "";
@@ -43,18 +43,7 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
     const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || ((_b = textareaTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
     const stateClasses = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || ((_d = textareaTheme.states) === null || _d === void 0 ? void 0 : _d[state]) || "";
     const helperTextClasses = theme.helperText || textareaTheme.helperText || "";
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, "aria-describedby": displayedMessage ? `${inputId}-helper` : undefined, required: required, rows: rows, cols: cols, onFocus: (e) => {
-                                var _a;
-                                setIsFocused(true);
-                                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                            }, onBlur: (e) => {
-                                var _a;
-                                setIsFocused(false);
-                                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                            }, onChange: (e) => {
-                                propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(e);
-                                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
-                            }, ...restProps }) }) }) }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("div", { id: `${inputId}-helper`, role: isInvalid ? "alert" : undefined, className: cn(helperTextClasses, helperTextClassName), children: displayedMessage })) : (displayedMessage))] }));
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, "aria-describedby": displayedMessage ? `${inputId}-helper` : undefined, required: required, rows: rows, cols: cols, onChange: handleChange, ...restProps }) }) }) }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("div", { id: `${inputId}-helper`, role: isInvalid ? "alert" : undefined, className: cn(helperTextClasses, helperTextClassName), children: displayedMessage })) : (displayedMessage))] }));
 });
 Textarea.displayName = "Textarea";
 

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

@@ -30,6 +30,15 @@ const timePickerTheme = {
     // Icon padding styles - inherited from common form theme
     iconStartPadding: formsBaseTheme.iconStyles.padding.left,
     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.
+    iconStartStyles: formsBaseTheme.iconStyles.leftSizes,
+    iconEndStyles: formsBaseTheme.iconStyles.rightSizes,
+    iconSizes: formsBaseTheme.iconStyles.sizes,
+    iconPaddings: {
+        left: formsBaseTheme.iconStyles.paddingLeftSizes,
+        right: formsBaseTheme.iconStyles.paddingRightSizes,
+    },
     // Placeholder text style - matches Select/Combobox placeholder styling
     placeholderTextStyle: formsBaseTheme.placeholderStyle,
     // Selected value text style

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

@@ -141,6 +141,17 @@ export interface TimePickerThemeOverrides {
     iconStartPadding?: string;
     /** End icon padding */
     iconEndPadding?: string;
+    /** Per-size leading icon slot (position + inset) */
+    iconStartStyles?: Partial<Record<TimePickerSize, string>>;
+    /** Per-size trailing icon slot (position + inset) */
+    iconEndStyles?: Partial<Record<TimePickerSize, string>>;
+    /** Per-size sizing for the built-in clock/caret/clear icons */
+    iconSizes?: Record<TimePickerSize, string>;
+    /** Per-size text runway reserved for each icon slot */
+    iconPaddings?: {
+        left?: Partial<Record<TimePickerSize, string>>;
+        right?: Partial<Record<TimePickerSize, string>>;
+    };
     /** Placeholder text style */
     placeholderTextStyle?: string;
     /** Selected value text style */

package/dist/components/forms/TimePicker/TimePickerTrigger.js

@@ -11,7 +11,7 @@ import { TimePickerContext } from './TimePickerContext.js';
  * Follows the same visual pattern as DatePickerTrigger and SelectButton
  */
 const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md', clearable, onClear, iconStart, iconEnd, className, inputValue, onInputChange, onInputFocus, onInputKeyDown, format, period, onPeriodToggle, placeholder, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const context = useContext(TimePickerContext);
     if (!context) {
         throw new Error('TimePickerTrigger must be used within a TimePicker');
@@ -21,12 +21,14 @@ const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md
     const sizeStyle = ((_a = theme.triggerSizes) === null || _a === void 0 ? void 0 : _a[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 iconStartStyle = theme.iconStartStyle || "";
+    const iconStartStyle = ((_d = theme.iconStartStyles) === null || _d === void 0 ? void 0 : _d[size]) || theme.iconStartStyle || "";
+    // Glyph ramps with the control (--form-icon-size-*), not a flat h-4 w-4.
+    const iconSizeStyle = ((_e = theme.iconSizes) === null || _e === void 0 ? void 0 : _e[size]) || "size-4";
     const inputStyle = theme.inputStyle || "";
     const periodToggleStyle = theme.periodToggleStyle || "";
     // Apply focused styles when open — same pattern as SelectButton and DatePickerTrigger
     const activeFocusState = isOpen
-        ? ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 dark:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20"
+        ? ((_f = theme.triggerFocusStates) === null || _f === void 0 ? void 0 : _f[state]) || "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 dark:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20"
         : "";
     // Determine whether start icon is present (for input padding)
     const hasStartIcon = iconStart !== undefined ? Boolean(iconStart) : true;
@@ -45,10 +47,10 @@ const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 setIsOpen(true);
             }, className: cn(baseStyle, stateStyle, hoverStateStyle, activeFocusState, 'w-full items-center', className // User overrides take highest precedence
-            ), children: [jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: id, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, placeholder: placeholder, maxLength: 5, disabled: disabled, className: cn(inputStyle, sizeStyle, hasStartIcon && iconStartPadding), role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dialogId, "aria-label": "Enter time", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, autoComplete: "off" }), iconStart !== undefined ? (iconStart && jsx("div", { className: iconStartStyle, children: iconStart })) : (jsx("div", { className: iconStartStyle, children: jsx(Clock, { className: "h-4 w-4" }) }))] }), format === '12h' && (jsx("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1, children: period || 'AM' })), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: (e) => {
+            ), children: [jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: id, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, placeholder: placeholder, maxLength: 5, disabled: disabled, className: cn(inputStyle, sizeStyle, hasStartIcon && iconStartPadding), role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dialogId, "aria-label": "Enter time", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, autoComplete: "off" }), iconStart !== undefined ? (iconStart && jsx("div", { className: iconStartStyle, children: iconStart })) : (jsx("div", { className: iconStartStyle, children: jsx(Clock, { className: iconSizeStyle }) }))] }), format === '12h' && (jsx("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1, children: period || 'AM' })), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: (e) => {
                         e.stopPropagation();
                         onClear === null || onClear === void 0 ? void 0 : onClear();
-                    }, className: "shrink-0 p-0.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface)] transition-colors", "aria-label": "Clear time", tabIndex: -1, children: jsx(X, { className: "w-4 h-4" }) })), iconEnd !== undefined ? (iconEnd && (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]", children: iconEnd }))) : (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]", children: jsx(CaretUpDown, { className: "h-4 w-4" }) }))] }) }));
+                    }, className: "shrink-0 p-0.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface)] transition-colors", "aria-label": "Clear time", tabIndex: -1, children: jsx(X, { className: iconSizeStyle }) })), iconEnd !== undefined ? (iconEnd && (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]", children: iconEnd }))) : (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]", children: jsx(CaretUpDown, { className: iconSizeStyle }) }))] }) }));
 };
 
 export { TimePickerTrigger };

package/dist/components/forms/forms.theme.d.ts

@@ -5,6 +5,8 @@
  */
 export declare const formsBaseTheme: {
     wrapperStyle: string;
+    /** The field edge alone — for controls that must supply their own transition/fill. */
+    inputGroupBorderStyle: string;
     inputGroupBaseStyle: string;
     controlBaseStyle: string;
     sizes: {
@@ -51,6 +53,61 @@ export declare const formsBaseTheme: {
             left: string;
             right: string;
         };
+        /**
+         * The leading-icon slot, inset by the control's own horizontal padding —
+         * EXACTLY, not the trailing slot's `− 4px`. A leading icon stands where the
+         * text would have started, so matching `--form-px-*` keeps one constant left
+         * edge for a field's contents whether or not it has an icon. The trailing
+         * slot is chrome rather than content, which is why it insets tighter.
+         */
+        leftSizes: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        /** Text runway for the leading slot: inset + icon + an 8px gap (32/36/40). */
+        paddingLeftSizes: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        /**
+         * The trailing-icon slot, inset from the right edge by the control's own
+         * horizontal padding MINUS 4px (8 / 10 / 12 at the default theme). Tighter
+         * than the text inset on purpose: a chevron is mostly whitespace, so at the
+         * same metric distance it reads as further from the edge than a glyph does.
+         * Derived from `--form-px-*` rather than a literal, so retuning a theme's
+         * control padding moves the icon with it.
+         */
+        rightSizes: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        /**
+         * Text runway reserved for that slot: inset + icon + an 8px gap, i.e.
+         * `--form-px-*` + 16/18/20 (28 / 32 / 36). It replaces a flat `pr-10` that
+         * over-reserved at every size.
+         */
+        paddingRightSizes: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        /**
+         * The glyph itself, ramping with the control (12 / 14 / 16px) instead of a
+         * flat 16 — at `sm` a 16px icon out-weighed the 14px text beside it.
+         *
+         * 🔴 Reads --form-icon-size-*, not a Tailwind literal: icon size was the one
+         * axis of a field's geometry a theme could not retune, so a preset that
+         * scaled height/padding/type left every decorator at its hardcoded size.
+         * Not to be confused with --button-icon-square-*, which is a BUTTON's box.
+         */
+        sizes: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
     };
     dropdownStyles: {
         container: string;

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

@@ -3,19 +3,34 @@
  * This file defines shared styling patterns used across all form components
  * Individual component themes should extend these base styles
  */
+/**
+ * The inset-shadow field edge on its own — radius, resting border, hover edge and
+ * focus border+ring — with NO layout/paint extras (no `flex`, no fill, no
+ * `transition-all`).
+ *
+ * Split out of `inputGroupBaseStyle` (which is just this plus those extras) for the
+ * one control that cannot take `transition-all`: `InputCounter`'s root is a
+ * motion element carrying `layout`, and a CSS transition covering `transform`
+ * re-interpolates motion's per-frame writes (§12). It needs the same edge as every
+ * other control, but has to name its own transitioned properties — so the edge is
+ * defined once here and both consumers compose it.
+ */
+const inputGroupBorderStyle = "rounded-[var(--form-radius)] outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
+    "focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
+    "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 " +
+    // Hover edge: strengthen the border to --color-border-secondary on hover. Scoped with
+    // not-focus-within so focus (primary border) always wins; the token flips for dark mode.
+    "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)] " +
+    // Dark focus mirror (fill comes from --color-surface, which flips automatically)
+    "dark:focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20";
 // Common form theme configuration
 const formsBaseTheme = {
     // Common wrapper style
     wrapperStyle: "relative w-full",
+    /** The field edge alone — for controls that must supply their own transition/fill. */
+    inputGroupBorderStyle,
     // Common input group style with focus, hover, and state variations
-    inputGroupBaseStyle: "relative flex rounded-[var(--form-radius)] outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
-        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-[var(--field-fill)] transition-all " +
-        // Hover edge: strengthen the border to --color-border-secondary on hover. Scoped with
-        // not-focus-within so focus (primary border) always wins; the token flips for dark mode.
-        "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)] " +
-        // Dark focus mirror (fill comes from --color-surface, which flips automatically)
-        "dark:focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
+    inputGroupBaseStyle: `relative flex bg-[var(--field-fill)] transition-all ${inputGroupBorderStyle}`,
     // Common base input/control style
     controlBaseStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] " +
         "placeholder:text-[var(--color-text-placeholder)] focus:outline-none",
@@ -103,6 +118,11 @@ const formsBaseTheme = {
     helperText: "text-xs text-[var(--color-text-muted)] mt-1.5 [.state-disabled_&]:text-[var(--color-text-disabled)] [.state-invalid_&]:text-[var(--color-danger-500)] " +
         "dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
     // Common icon styles
+    //
+    // `left`/`right`/`padding` are the size-BLIND originals (flat pr-3 / pr-10 at
+    // every size); the `*Sizes` maps below are the size-aware replacements. Adopt
+    // the maps in new work — Select already has — and treat the flat keys as the
+    // not-yet-migrated path for Input/Combobox/DatePicker/DateRangePicker/TimePicker.
     iconStyles: {
         left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-[var(--color-text-muted)]",
         right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]",
@@ -110,6 +130,61 @@ const formsBaseTheme = {
             left: "pl-10",
             right: "pr-10",
         },
+        /**
+         * The leading-icon slot, inset by the control's own horizontal padding —
+         * EXACTLY, not the trailing slot's `− 4px`. A leading icon stands where the
+         * text would have started, so matching `--form-px-*` keeps one constant left
+         * edge for a field's contents whether or not it has an icon. The trailing
+         * slot is chrome rather than content, which is why it insets tighter.
+         */
+        leftSizes: {
+            sm: "absolute inset-y-0 left-0 flex items-center pl-[var(--form-px-sm)] pointer-events-none text-[var(--color-text-muted)]",
+            md: "absolute inset-y-0 left-0 flex items-center pl-[var(--form-px-md)] pointer-events-none text-[var(--color-text-muted)]",
+            lg: "absolute inset-y-0 left-0 flex items-center pl-[var(--form-px-lg)] pointer-events-none text-[var(--color-text-muted)]",
+        },
+        /** Text runway for the leading slot: inset + icon + an 8px gap (32/36/40). */
+        paddingLeftSizes: {
+            sm: "pl-[calc(var(--form-px-sm)_+_20px)]",
+            md: "pl-[calc(var(--form-px-md)_+_22px)]",
+            lg: "pl-[calc(var(--form-px-lg)_+_24px)]",
+        },
+        /**
+         * The trailing-icon slot, inset from the right edge by the control's own
+         * horizontal padding MINUS 4px (8 / 10 / 12 at the default theme). Tighter
+         * than the text inset on purpose: a chevron is mostly whitespace, so at the
+         * same metric distance it reads as further from the edge than a glyph does.
+         * Derived from `--form-px-*` rather than a literal, so retuning a theme's
+         * control padding moves the icon with it.
+         */
+        rightSizes: {
+            sm: "absolute inset-y-0 right-0 flex items-center pr-[calc(var(--form-px-sm)_-_4px)] pointer-events-none text-[var(--color-text-muted)]",
+            md: "absolute inset-y-0 right-0 flex items-center pr-[calc(var(--form-px-md)_-_4px)] pointer-events-none text-[var(--color-text-muted)]",
+            lg: "absolute inset-y-0 right-0 flex items-center pr-[calc(var(--form-px-lg)_-_4px)] pointer-events-none text-[var(--color-text-muted)]",
+        },
+        /**
+         * Text runway reserved for that slot: inset + icon + an 8px gap, i.e.
+         * `--form-px-*` + 16/18/20 (28 / 32 / 36). It replaces a flat `pr-10` that
+         * over-reserved at every size.
+         */
+        paddingRightSizes: {
+            sm: "pr-[calc(var(--form-px-sm)_+_16px)]",
+            md: "pr-[calc(var(--form-px-md)_+_18px)]",
+            lg: "pr-[calc(var(--form-px-lg)_+_20px)]",
+        },
+        /**
+         * The glyph itself, ramping with the control (12 / 14 / 16px) instead of a
+         * flat 16 — at `sm` a 16px icon out-weighed the 14px text beside it.
+         *
+         * 🔴 Reads --form-icon-size-*, not a Tailwind literal: icon size was the one
+         * axis of a field's geometry a theme could not retune, so a preset that
+         * scaled height/padding/type left every decorator at its hardcoded size.
+         * Not to be confused with --button-icon-square-*, which is a BUTTON's box.
+         */
+        sizes: {
+            sm: "size-[var(--form-icon-size-sm)]",
+            md: "size-[var(--form-icon-size-md)]",
+            lg: "size-[var(--form-icon-size-lg)]",
+        },
     },
     // Dropdown/listbox styles for Select, Combobox, and similar components
     dropdownStyles: {

package/dist/components/generative/registry.js

@@ -92,6 +92,7 @@ import '../forms/InputAddress/InputAddress.js';
 import '../forms/InputAddress/InputAddress.theme.js';
 import { InputDate } from '../forms/InputDate/InputDate.js';
 import { InputCounter } from '../forms/InputCounter/InputCounter.js';
+import '../forms/InputCounter/InputCounter.theme.js';
 import { InputTag } from '../forms/InputTag/InputTag.js';
 import '../forms/InputTag/InputTag.theme.js';
 import { Combobox } from '../forms/Combobox/Combobox.js';

package/dist/components/generative/schema.generated.js

@@ -1762,6 +1762,21 @@ const GENERATIVE_SCHEMA = {
                     "required": true,
                     "description": "Current counter value (controlled)"
                 },
+                "size": {
+                    "kind": "enum",
+                    "options": [
+                        "sm",
+                        "md",
+                        "lg"
+                    ],
+                    "default": "md",
+                    "description": "Control size, drawn from the shared `--form-*` scale so a counter lines up"
+                },
+                "editable": {
+                    "kind": "boolean",
+                    "default": true,
+                    "description": "Whether clicking the number swaps it for a text field so the value can be"
+                },
                 "state": {
                     "kind": "enum",
                     "options": [
@@ -2548,7 +2563,12 @@ const GENERATIVE_SCHEMA = {
                 },
                 "selected": {
                     "kind": "boolean",
-                    "description": "Whether the pill is selected (controlled state)"
+                    "description": "Whether the pill is selected — CONTROLLED. Passing it makes the prop"
+                },
+                "defaultSelected": {
+                    "kind": "boolean",
+                    "default": false,
+                    "description": "Initial selection for an UNCONTROLLED pill, which then owns its own state."
                 },
                 "readOnly": {
                     "kind": "boolean",