@yahoo/uds 3.156.2 → 3.157.1

package/dist/components/client/Input/Input.cjs

@@ -15,6 +15,10 @@ let lodash_isFunction_js = require("lodash/isFunction.js");
 lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
 let motion_react = require("motion/react");
 //#region src/components/client/Input/Input.tsx
+function setNativeInputValue(input, next) {
+	(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
 const HelpTextContent = (0, react.memo)(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
 	if (!helpText) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
@@ -82,7 +86,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
 **/
-const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, style, className, ...otherProps }, forwardedRef) {
+const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const helpTextId = `uds-input-${uid}-help-text`;
@@ -98,7 +102,36 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 	const handleChange = (0, react.useCallback)((e) => {
 		if (!isControlled) setValue(e.target.value);
 		onChange?.(e);
-	}, [isControlled, onChange]);
+		slotProps?.input?.onChange?.(e);
+	}, [
+		isControlled,
+		onChange,
+		slotProps
+	]);
+	const handleBlur = (0, react.useCallback)((e) => {
+		if (formatOnBlur && ref.current) {
+			const next = formatOnBlur(e.target.value);
+			if (next !== e.target.value) setNativeInputValue(ref.current, next);
+		}
+		onBlur?.(e);
+		slotProps?.input?.onBlur?.(e);
+	}, [
+		formatOnBlur,
+		onBlur,
+		slotProps
+	]);
+	const handleFocus = (0, react.useCallback)((e) => {
+		if (parseOnFocus && ref.current) {
+			const next = parseOnFocus(e.target.value);
+			if (next !== e.target.value) setNativeInputValue(ref.current, next);
+		}
+		onFocus?.(e);
+		slotProps?.input?.onFocus?.(e);
+	}, [
+		parseOnFocus,
+		onFocus,
+		slotProps
+	]);
 	const layoutVariant = (0, motion_react.useReducedMotion)() ? "smooth" : "bouncy";
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const isInteractive = !readOnly && !disabled;
@@ -110,7 +143,8 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 			className: require_styles_styler.cx([className, disabled ? "opacity-50" : ""])
 		}),
 		inputWrapper: require_styles_styler.cx(require_styles_styler.getStyles({
-			inputSizeInputWrapper: size,
+			inputSizeInputWrapperStatic: size,
+			inputSizeInputWrapperDynamic: size,
 			inputVariantInputWrapper: "default",
 			inputVariantValueInputWrapper: !value ? "empty" : "filled"
 		}), "min-w-[200px]", inputWrapperClassName),
@@ -120,7 +154,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 			inputVariantValueInput: !value ? "empty" : "filled",
 			inputVariantInputPlaceholder: "default",
 			inputVariantValueInputPlaceholder: !value ? "empty" : "filled",
-			className: require_styles_styler.cx("grow", "uds-hit-target", "bg-clip-text", "focus:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
+			className: require_styles_styler.cx("grow", "uds-hit-target", "bg-transparent", "bg-clip-text", "focus-visible:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
 		}),
 		label: require_styles_styler.cx(require_styles_styler.getStyles({
 			inputSizeLabel: size,
@@ -182,10 +216,12 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 						disabled,
 						"aria-describedby": helpTextId,
 						"aria-invalid": hasError,
-						onChange: handleChange,
 						className: classNames.input,
 						...otherProps,
-						...inputProps
+						...inputProps,
+						onChange: handleChange,
+						onBlur: handleBlur,
+						onFocus: handleFocus
 					}),
 					endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
 						alignItems: "center",

package/dist/components/client/Input/Input.d.cts

@@ -27,6 +27,19 @@ interface InputProps extends NativeInputProps, UniversalInputProps {
     helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
     helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
   };
+  /** Called on user-initiated blur. Return the formatted display value.
+   * The result flows through `onChange`. Programmatic value changes (autofill,
+   * password managers, parent state updates) do NOT trigger this.
+   *
+   * In controlled mode (`value` prop supplied) the formatted value is surfaced
+   * only through `onChange` — the parent MUST fold it back into `value`, or it
+   * reverts on the next render. Uncontrolled usage handles this internally. */
+  formatOnBlur?: (value: string) => string;
+  /** Called on focus. Return the value to display while editing (typically the
+   * raw, unformatted form). Omit to leave the value as-is on focus.
+   * The result flows through `onChange` (same controlled-mode caveat as
+   * `formatOnBlur`: the parent must propagate the value when `value` is set). */
+  parseOnFocus?: (value: string) => string;
 }
 /**
  * **📦 An input that allows users to enter text and collect data.**

package/dist/components/client/Input/Input.d.ts

@@ -28,6 +28,19 @@ interface InputProps extends NativeInputProps, UniversalInputProps {
     helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
     helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
   };
+  /** Called on user-initiated blur. Return the formatted display value.
+   * The result flows through `onChange`. Programmatic value changes (autofill,
+   * password managers, parent state updates) do NOT trigger this.
+   *
+   * In controlled mode (`value` prop supplied) the formatted value is surfaced
+   * only through `onChange` — the parent MUST fold it back into `value`, or it
+   * reverts on the next render. Uncontrolled usage handles this internally. */
+  formatOnBlur?: (value: string) => string;
+  /** Called on focus. Return the value to display while editing (typically the
+   * raw, unformatted form). Omit to leave the value as-is on focus.
+   * The result flows through `onChange` (same controlled-mode caveat as
+   * `formatOnBlur`: the parent must propagate the value when `value` is set). */
+  parseOnFocus?: (value: string) => string;
 }
 /**
  * **📦 An input that allows users to enter text and collect data.**

package/dist/components/client/Input/Input.js

@@ -12,6 +12,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { isFunction } from "lodash-es";
 import { useReducedMotion } from "motion/react";
 //#region src/components/client/Input/Input.tsx
+function setNativeInputValue(input, next) {
+	(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
 const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
 	if (!helpText) return null;
 	return /* @__PURE__ */ jsx(Box, {
@@ -79,7 +83,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
 **/
-const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, style, className, ...otherProps }, forwardedRef) {
+const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
 	const generatedId = useId();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const helpTextId = `uds-input-${uid}-help-text`;
@@ -95,7 +99,36 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 	const handleChange = useCallback((e) => {
 		if (!isControlled) setValue(e.target.value);
 		onChange?.(e);
-	}, [isControlled, onChange]);
+		slotProps?.input?.onChange?.(e);
+	}, [
+		isControlled,
+		onChange,
+		slotProps
+	]);
+	const handleBlur = useCallback((e) => {
+		if (formatOnBlur && ref.current) {
+			const next = formatOnBlur(e.target.value);
+			if (next !== e.target.value) setNativeInputValue(ref.current, next);
+		}
+		onBlur?.(e);
+		slotProps?.input?.onBlur?.(e);
+	}, [
+		formatOnBlur,
+		onBlur,
+		slotProps
+	]);
+	const handleFocus = useCallback((e) => {
+		if (parseOnFocus && ref.current) {
+			const next = parseOnFocus(e.target.value);
+			if (next !== e.target.value) setNativeInputValue(ref.current, next);
+		}
+		onFocus?.(e);
+		slotProps?.input?.onFocus?.(e);
+	}, [
+		parseOnFocus,
+		onFocus,
+		slotProps
+	]);
 	const layoutVariant = useReducedMotion() ? "smooth" : "bouncy";
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const isInteractive = !readOnly && !disabled;
@@ -107,7 +140,8 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 			className: cx([className, disabled ? "opacity-50" : ""])
 		}),
 		inputWrapper: cx(getStyles({
-			inputSizeInputWrapper: size,
+			inputSizeInputWrapperStatic: size,
+			inputSizeInputWrapperDynamic: size,
 			inputVariantInputWrapper: "default",
 			inputVariantValueInputWrapper: !value ? "empty" : "filled"
 		}), "min-w-[200px]", inputWrapperClassName),
@@ -117,7 +151,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 			inputVariantValueInput: !value ? "empty" : "filled",
 			inputVariantInputPlaceholder: "default",
 			inputVariantValueInputPlaceholder: !value ? "empty" : "filled",
-			className: cx("grow", "uds-hit-target", "bg-clip-text", "focus:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
+			className: cx("grow", "uds-hit-target", "bg-transparent", "bg-clip-text", "focus-visible:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
 		}),
 		label: cx(getStyles({
 			inputSizeLabel: size,
@@ -179,10 +213,12 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 						disabled,
 						"aria-describedby": helpTextId,
 						"aria-invalid": hasError,
-						onChange: handleChange,
 						className: classNames.input,
 						...otherProps,
-						...inputProps
+						...inputProps,
+						onChange: handleChange,
+						onBlur: handleBlur,
+						onFocus: handleFocus
 					}),
 					endIcon && /* @__PURE__ */ jsx(HStack, {
 						alignItems: "center",

package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts

@@ -87,6 +87,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts

@@ -88,6 +88,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };