@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/Input/Input.mjs

@@ -1,24 +1,70 @@
 "use client";
-import { variants } from "./style.mjs";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { cx, useThemeMode } from "antd-style";
-import { Input } from "antd";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { useMergeRefs } from "../utils/mergeRefs.mjs";
+import { useThemeMode } from "../styles/theme/scope.mjs";
+import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { inputRootStyles, styles } from "./style.mjs";
+import ClearButton from "./ClearButton.mjs";
+import { clearNativeValue } from "./clearNativeValue.mjs";
+import { isPressEnter } from "./pressEnter.mjs";
+import { memo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
 //#region src/Input/Input.tsx
-const Input$1 = memo(({ ref, variant, shadow, className, ...rest }) => {
+const hasText = (value) => value !== void 0 && value !== null && String(value).length > 0;
+const Input$1 = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", prefix, suffix, disabled, readOnly, allowClear, onClear, onPressEnter, onKeyDown, onChange, value, defaultValue, ...rest }) => {
 	const { isDarkMode } = useThemeMode();
-	return /* @__PURE__ */ jsx(Input, {
-		ref,
-		variant: variant || (isDarkMode ? "filled" : "outlined"),
-		className: cx(variants({
+	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	const inputRef = useRef(null);
+	const mergedRef = useMergeRefs([ref, inputRef]);
+	const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));
+	const isFilled = value === void 0 ? filled : hasText(value);
+	const showClear = allowClear && isFilled && !disabled && !readOnly;
+	const handleClear = useEventCallback(() => {
+		clearNativeValue(inputRef.current);
+		onClear?.();
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-disabled": disabled ? "" : void 0,
+		"data-variant": mergedVariant,
+		...styleProps(inputRootStyles({
 			shadow,
-			variant: variant || (isDarkMode ? "filled" : "outlined")
-		}), className),
-		...rest
+			size,
+			variant: mergedVariant
+		}), className, style),
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				...styleProps(styles.slot, classNames?.prefix, customStyles?.prefix),
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				defaultValue,
+				disabled,
+				readOnly,
+				ref: mergedRef,
+				value,
+				...styleProps(styles.input, classNames?.input, customStyles?.input),
+				onChange: (event) => {
+					setFilled(event.currentTarget.value.length > 0);
+					onChange?.(event);
+				},
+				onKeyDown: (event) => {
+					if (isPressEnter(event)) onPressEnter?.(event);
+					onKeyDown?.(event);
+				},
+				...rest
+			}),
+			showClear && /* @__PURE__ */ jsx(ClearButton, { onClear: handleClear }),
+			suffix && /* @__PURE__ */ jsx("span", {
+				...styleProps(styles.slot, classNames?.suffix, customStyles?.suffix),
+				children: suffix
+			})
+		]
 	});
 });
 Input$1.displayName = "Input";
+var Input_default = Object.assign(Input$1, { formBinding: { emptyValue: "" } });
 //#endregion
-export { Input$1 as default };
+export { Input_default as default };
 
 //# sourceMappingURL=Input.mjs.map

package/es/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["Input","AntInput"],"sources":["../../src/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputProps } from './type';\n\nconst Input = memo<InputProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;AASA,MAAMA,UAAQ,MAAkB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC/E,MAAM,EAAE,eAAe,aAAa;CAEpC,OACE,oBAACC,OAAD;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GAC7E,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,QAAM,cAAc"}
+{"version":3,"file":"Input.mjs","names":["Input","BaseInput"],"sources":["../../src/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { memo, useRef, useState } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport { useMergeRefs } from '@/utils/mergeRefs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { inputRootStyles, styles } from './style';\nimport type { InputProps } from './type';\n\nconst hasText = (value: unknown) =>\n  value !== undefined && value !== null && String(value).length > 0;\n\nconst Input = memo<InputProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    prefix,\n    suffix,\n    disabled,\n    readOnly,\n    allowClear,\n    onClear,\n    onPressEnter,\n    onKeyDown,\n    onChange,\n    value,\n    defaultValue,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRefs([ref, inputRef]);\n    const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));\n    const isFilled = value === undefined ? filled : hasText(value);\n    const showClear = allowClear && isFilled && !disabled && !readOnly;\n\n    const handleClear = useEventCallback(() => {\n      clearNativeValue(inputRef.current);\n      onClear?.();\n    });\n\n    return (\n      <div\n        data-disabled={disabled ? '' : undefined}\n        data-variant={mergedVariant}\n        {...styleProps(inputRootStyles({ shadow, size, variant: mergedVariant }), className, style)}\n      >\n        {prefix && (\n          <span {...styleProps(styles.slot, classNames?.prefix, customStyles?.prefix)}>\n            {prefix}\n          </span>\n        )}\n        <BaseInput\n          defaultValue={defaultValue}\n          disabled={disabled}\n          readOnly={readOnly}\n          ref={mergedRef}\n          value={value}\n          {...styleProps(styles.input, classNames?.input, customStyles?.input)}\n          onChange={(event) => {\n            setFilled(event.currentTarget.value.length > 0);\n            onChange?.(event);\n          }}\n          onKeyDown={(event) => {\n            if (isPressEnter(event)) onPressEnter?.(event);\n            onKeyDown?.(event);\n          }}\n          {...rest}\n        />\n        {showClear && <ClearButton onClear={handleClear} />}\n        {suffix && (\n          <span {...styleProps(styles.slot, classNames?.suffix, customStyles?.suffix)}>\n            {suffix}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n\nexport default Object.assign(Input, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,WAAW,UACf,UAAU,KAAA,KAAa,UAAU,QAAQ,OAAO,KAAK,CAAC,CAAC,SAAS;AAElE,MAAMA,UAAQ,MACX,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,QACA,QACA,UACA,UACA,YACA,SACA,cACA,WACA,UACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,aAAa,CAAC,KAAK,QAAQ,CAAC;CAC9C,MAAM,CAAC,QAAQ,aAAa,eAAe,QAAQ,SAAS,YAAY,CAAC;CACzE,MAAM,WAAW,UAAU,KAAA,IAAY,SAAS,QAAQ,KAAK;CAC7D,MAAM,YAAY,cAAc,YAAY,CAAC,YAAY,CAAC;CAE1D,MAAM,cAAc,uBAAuB;EACzC,iBAAiB,SAAS,OAAO;EACjC,UAAU;CACZ,CAAC;CAED,OACE,qBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,gBAAc;EACd,GAAI,WAAW,gBAAgB;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,WAAW,KAAK;EAH5F,UAAA;GAKG,UACC,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,MAAM,YAAY,QAAQ,cAAc,MAAM;IACvE,UAAA;GACG,CAAA;GAER,oBAACC,OAAD;IACgB;IACJ;IACA;IACV,KAAK;IACE;IACP,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO,cAAc,KAAK;IACnE,WAAW,UAAU;KACnB,UAAU,MAAM,cAAc,MAAM,SAAS,CAAC;KAC9C,WAAW,KAAK;IAClB;IACA,YAAY,UAAU;KACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;KAC7C,YAAY,KAAK;IACnB;IACA,GAAI;GACL,CAAA;GACA,aAAa,oBAAC,aAAD,EAAa,SAAS,YAAc,CAAA;GACjD,UACC,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,MAAM,YAAY,QAAQ,cAAc,MAAM;IACvE,UAAA;GACG,CAAA;EAEL;;AAET,CACF;AAEA,QAAM,cAAc;AAEpB,IAAA,gBAAe,OAAO,OAAOD,SAAO,EAAE,aAAa,EAAE,YAAY,GAAG,EAAW,CAAC"}

package/es/Input/InputNumber.d.mts

@@ -1,6 +1,10 @@
 import { InputNumberProps } from "./type.mjs";
 //#region src/Input/InputNumber.d.ts
-declare const InputNumber: import("react").NamedExoticComponent<InputNumberProps>;
+declare const _default: import("react").NamedExoticComponent<InputNumberProps> & {
+  formBinding: {
+    readonly emptyValue: null;
+  };
+};
 //#endregion
-export { InputNumber as default };
+export { _default as default };
 //# sourceMappingURL=InputNumber.d.mts.map

package/es/Input/InputNumber.mjs

@@ -1,24 +1,79 @@
 "use client";
-import { variants } from "./style.mjs";
+import { styleProps } from "../styles/stylex/props.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { useThemeMode } from "../styles/theme/scope.mjs";
+import { inputRootStyles, styles } from "./style.mjs";
+import { isPressEnter } from "./pressEnter.mjs";
 import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { cx, useThemeMode } from "antd-style";
-import { InputNumber } from "antd";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { NumberField } from "@base-ui/react/number-field";
 //#region src/Input/InputNumber.tsx
-const InputNumber$1 = memo(({ ref, variant, shadow, className, ...rest }) => {
+const controlIconSize = {
+	large: 13,
+	middle: 12,
+	small: 10
+};
+const InputNumber = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", controls = true, changeOnWheel, onChange, placeholder, format, precision, prefix, suffix, onPressEnter, ...rest }) => {
 	const { isDarkMode } = useThemeMode();
-	return /* @__PURE__ */ jsx(InputNumber, {
-		ref,
-		variant: variant || (isDarkMode ? "filled" : "outlined"),
-		className: cx(variants({
+	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	const controlProps = stylex.props(styles.numberControl, size === "small" && styles.numberControlSmall, size === "large" && styles.numberControlLarge);
+	const mergedFormat = precision === void 0 ? format : {
+		...format,
+		maximumFractionDigits: precision,
+		minimumFractionDigits: precision
+	};
+	return /* @__PURE__ */ jsxs(NumberField.Root, {
+		allowWheelScrub: changeOnWheel,
+		"data-variant": mergedVariant,
+		format: mergedFormat,
+		onValueChange: onChange,
+		...rest,
+		...styleProps(inputRootStyles({
 			shadow,
-			variant: variant || (isDarkMode ? "filled" : "outlined")
-		}), className),
-		...rest
+			size,
+			variant: mergedVariant
+		}), className, style),
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				...stylex.props(styles.slot),
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx(NumberField.Input, {
+				placeholder,
+				ref,
+				onKeyDown: (event) => {
+					if (isPressEnter(event)) onPressEnter?.(event);
+				},
+				...styleProps([styles.input, styles.numberInput], classNames?.input, customStyles?.input)
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				...stylex.props(styles.slot),
+				children: suffix
+			}),
+			controls && /* @__PURE__ */ jsxs("div", {
+				...stylex.props(styles.numberControls, size === "small" && styles.numberControlsSmall),
+				children: [/* @__PURE__ */ jsx(NumberField.Increment, {
+					...controlProps,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: ChevronUp,
+						size: controlIconSize[size]
+					})
+				}), /* @__PURE__ */ jsx(NumberField.Decrement, {
+					...controlProps,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: ChevronDown,
+						size: controlIconSize[size]
+					})
+				})]
+			})
+		]
 	});
 });
-InputNumber$1.displayName = "InputNumber";
+InputNumber.displayName = "InputNumber";
+var InputNumber_default = Object.assign(InputNumber, { formBinding: { emptyValue: null } });
 //#endregion
-export { InputNumber$1 as default };
+export { InputNumber_default as default };
 
 //# sourceMappingURL=InputNumber.mjs.map

package/es/Input/InputNumber.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.mjs","names":["InputNumber","AntInputNumber"],"sources":["../../src/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { InputNumber as AntInputNumber } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputNumberProps } from './type';\n\nconst InputNumber = memo<InputNumberProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInputNumber\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":";;;;;;;AASA,MAAMA,gBAAc,MAAwB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC3F,MAAM,EAAE,eAAe,aAAa;CAEpC,OACE,oBAACC,aAAD;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GAC7E,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,cAAY,cAAc"}
+{"version":3,"file":"InputNumber.mjs","names":[],"sources":["../../src/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField } from '@base-ui/react/number-field';\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { isPressEnter } from './pressEnter';\nimport { inputRootStyles, styles } from './style';\nimport type { InputNumberProps } from './type';\n\nconst controlIconSize = { large: 13, middle: 12, small: 10 } as const;\n\nconst InputNumber = memo<InputNumberProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    controls = true,\n    changeOnWheel,\n    onChange,\n    placeholder,\n    format,\n    precision,\n    prefix,\n    suffix,\n    onPressEnter,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const controlProps = stylex.props(\n      styles.numberControl,\n      size === 'small' && styles.numberControlSmall,\n      size === 'large' && styles.numberControlLarge,\n    );\n    const mergedFormat =\n      precision === undefined\n        ? format\n        : { ...format, maximumFractionDigits: precision, minimumFractionDigits: precision };\n\n    return (\n      <NumberField.Root\n        allowWheelScrub={changeOnWheel}\n        data-variant={mergedVariant}\n        format={mergedFormat}\n        onValueChange={onChange}\n        {...rest}\n        {...styleProps(inputRootStyles({ shadow, size, variant: mergedVariant }), className, style)}\n      >\n        {prefix && <span {...stylex.props(styles.slot)}>{prefix}</span>}\n        <NumberField.Input\n          placeholder={placeholder}\n          ref={ref}\n          onKeyDown={(event) => {\n            if (isPressEnter(event)) onPressEnter?.(event);\n          }}\n          {...styleProps(\n            [styles.input, styles.numberInput],\n            classNames?.input,\n            customStyles?.input,\n          )}\n        />\n        {suffix && <span {...stylex.props(styles.slot)}>{suffix}</span>}\n        {controls && (\n          <div\n            {...stylex.props(styles.numberControls, size === 'small' && styles.numberControlsSmall)}\n          >\n            <NumberField.Increment {...controlProps}>\n              <Icon icon={ChevronUp} size={controlIconSize[size]} />\n            </NumberField.Increment>\n            <NumberField.Decrement {...controlProps}>\n              <Icon icon={ChevronDown} size={controlIconSize[size]} />\n            </NumberField.Decrement>\n          </div>\n        )}\n      </NumberField.Root>\n    );\n  },\n);\n\nInputNumber.displayName = 'InputNumber';\n\nexport default Object.assign(InputNumber, { formBinding: { emptyValue: null } as const });\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,kBAAkB;CACtB,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AACA,MAAM,cAAc,MAAwB,EAC1C,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,WAAW,MACX,eACA,UACA,aACA,QACA,WACA,QACA,QACA,cACA,GAAG,WACC;CACJ,MAAM,EACJ,eACE,aAAa;CACjB,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,eAAe,OAAO,MAAM,OAAO,eAAe,SAAS,WAAW,OAAO,oBAAoB,SAAS,WAAW,OAAO,kBAAkB;CACpJ,MAAM,eAAe,cAAc,KAAA,IAAY,SAAS;EACtD,GAAG;EACH,uBAAuB;EACvB,uBAAuB;CACzB;CACA,OAAO,qBAAC,YAAY,MAAb;EAAkB,iBAAiB;EAAe,gBAAc;EAAe,QAAQ;EAAc,eAAe;EAAU,GAAI;EAAM,GAAI,WAAW,gBAAgB;GAC5K;GACA;GACA,SAAS;EACX,CAAC,GAAG,WAAW,KAAK;EAJb,UAAA;GAKA,UAAU,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,IAAI;IAAI,UAAA;GAAa,CAAA;GAC9D,oBAAC,YAAY,OAAb;IAAgC;IAAkB;IAAK,YAAW,UAAS;KAC7E,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;IAC/C;IAAG,GAAI,WAAW,CAAC,OAAO,OAAO,OAAO,WAAW,GAAG,YAAY,OAAO,cAAc,KAAK;GAAI,CAAA;GAC3F,UAAU,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,IAAI;IAAI,UAAA;GAAa,CAAA;GAC7D,YAAY,qBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,gBAAgB,SAAS,WAAW,OAAO,mBAAmB;IAA3F,UAAA,CACT,oBAAC,YAAY,WAAb;KAAuB,GAAI;KACzB,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAW,MAAM,gBAAgB;KAAQ,CAAA;IAChC,CAAA,GACvB,oBAAC,YAAY,WAAb;KAAuB,GAAI;KACzB,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAa,MAAM,gBAAgB;KAAQ,CAAA;IAClC,CAAA,CACpB;;EACS;;AACxB,CAAC;AACD,YAAY,cAAc;AAC1B,IAAA,sBAAe,OAAO,OAAO,aAAa,EACxC,aAAa,EACX,YAAY,KACd,EACF,CAAC"}

package/es/Input/InputOTP.d.mts

@@ -0,0 +1,6 @@
+import { InputOTPProps } from "./type.mjs";
+//#region src/Input/InputOTP.d.ts
+declare const InputOTP: import("react").NamedExoticComponent<InputOTPProps>;
+//#endregion
+export { InputOTP as default };
+//# sourceMappingURL=InputOTP.d.mts.map

package/es/Input/InputOTP.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { useThemeMode } from "../styles/theme/scope.mjs";
+import { inputRootStyles, styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/Input/InputOTP.tsx
+const InputOTP = memo(({ className, classNames, styles: customStyles, style, variant, shadow, size = "middle", length = 6, onChange, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	return /* @__PURE__ */ jsx(OTPField.Root, {
+		length,
+		onValueChange: onChange,
+		...rest,
+		...styleProps(styles.otpRoot, className, style),
+		children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(OTPField.Input, { ...styleProps([...inputRootStyles({
+			shadow,
+			size,
+			variant: mergedVariant
+		}), styles.otpCell], classNames?.input, customStyles?.input) }, index))
+	});
+});
+InputOTP.displayName = "InputOTP";
+//#endregion
+export { InputOTP as default };
+
+//# sourceMappingURL=InputOTP.mjs.map

package/es/Input/InputOTP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.mjs","names":[],"sources":["../../src/Input/InputOTP.tsx"],"sourcesContent":["'use client';\n\nimport { OTPField } from '@base-ui/react/otp-field';\nimport { memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { inputRootStyles, styles } from './style';\nimport type { InputOTPProps } from './type';\n\nconst InputOTP = memo<InputOTPProps>(\n  ({\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    length = 6,\n    onChange,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    return (\n      <OTPField.Root\n        length={length}\n        onValueChange={onChange}\n        {...rest}\n        {...styleProps(styles.otpRoot, className, style)}\n      >\n        {Array.from({ length }, (_, index) => (\n          <OTPField.Input\n            key={index}\n            {...styleProps(\n              [...inputRootStyles({ shadow, size, variant: mergedVariant }), styles.otpCell],\n              classNames?.input,\n              customStyles?.input,\n            )}\n          />\n        ))}\n      </OTPField.Root>\n    );\n  },\n);\n\nInputOTP.displayName = 'InputOTP';\n\nexport default InputOTP;\n"],"mappings":";;;;;;;;AAWA,MAAM,WAAW,MACd,EACC,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,SAAS,GACT,UACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,OACE,oBAAC,SAAS,MAAV;EACU;EACR,eAAe;EACf,GAAI;EACJ,GAAI,WAAW,OAAO,SAAS,WAAW,KAAK;EAE9C,UAAA,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,UAC1B,oBAAC,SAAS,OAAV,EAEE,GAAI,WACF,CAAC,GAAG,gBAAgB;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,OAAO,OAAO,GAC7E,YAAY,OACZ,cAAc,KAChB,EACD,GANM,KAMN,CACF;CACY,CAAA;AAEnB,CACF;AAEA,SAAS,cAAc"}

package/es/Input/InputPassword.d.mts

@@ -1,6 +1,10 @@
 import { InputPasswordProps } from "./type.mjs";
 //#region src/Input/InputPassword.d.ts
-declare const InputPassword: import("react").NamedExoticComponent<InputPasswordProps>;
+declare const _default: import("react").NamedExoticComponent<InputPasswordProps> & {
+  formBinding: {
+    readonly emptyValue: "";
+  };
+};
 //#endregion
-export { InputPassword as default };
+export { _default as default };
 //# sourceMappingURL=InputPassword.d.mts.map

package/es/Input/InputPassword.mjs

@@ -1,24 +1,33 @@
 "use client";
-import { variants } from "./style.mjs";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { cx, useThemeMode } from "antd-style";
-import { Input } from "antd";
+import Icon from "../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
+import Input_default from "./Input.mjs";
+import { memo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Eye, EyeOff } from "lucide-react";
 //#region src/Input/InputPassword.tsx
-const InputPassword = memo(({ ref, variant, shadow, className, ...rest }) => {
-	const { isDarkMode } = useThemeMode();
-	return /* @__PURE__ */ jsx(Input.Password, {
-		ref,
-		variant: variant || (isDarkMode ? "filled" : "outlined"),
-		className: cx(variants({
-			shadow,
-			variant: variant || (isDarkMode ? "filled" : "outlined")
-		}), className),
+const InputPassword = memo(({ visibilityToggle = true, suffix, ...rest }) => {
+	const [visible, setVisible] = useState(false);
+	return /* @__PURE__ */ jsx(Input_default, {
+		type: visible ? "text" : "password",
+		suffix: /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, visibilityToggle && /* @__PURE__ */ jsx("button", {
+			"aria-label": visible ? "Hide password" : "Show password",
+			tabIndex: -1,
+			type: "button",
+			onClick: () => setVisible((v) => !v),
+			...stylex.props(styles.passwordToggle),
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: visible ? Eye : EyeOff,
+				size: 16
+			})
+		})] }),
 		...rest
 	});
 });
 InputPassword.displayName = "InputPassword";
+var InputPassword_default = Object.assign(InputPassword, { formBinding: { emptyValue: "" } });
 //#endregion
-export { InputPassword as default };
+export { InputPassword_default as default };
 
 //# sourceMappingURL=InputPassword.mjs.map

package/es/Input/InputPassword.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.mjs","names":["AntInput"],"sources":["../../src/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputPasswordProps } from './type';\n\nconst InputPassword = memo<InputPasswordProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput.Password\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInputPassword.displayName = 'InputPassword';\n\nexport default InputPassword;\n"],"mappings":";;;;;;;AASA,MAAM,gBAAgB,MAA0B,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC/F,MAAM,EAAE,eAAe,aAAa;CAEpC,OACE,oBAACA,MAAS,UAAV;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GAC7E,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,cAAc,cAAc"}
+{"version":3,"file":"InputPassword.mjs","names":["Input"],"sources":["../../src/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport Input from './Input';\nimport { styles } from './style';\nimport type { InputPasswordProps } from './type';\n\nconst InputPassword = memo<InputPasswordProps>(({ visibilityToggle = true, suffix, ...rest }) => {\n  const [visible, setVisible] = useState(false);\n\n  return (\n    <Input\n      type={visible ? 'text' : 'password'}\n      suffix={\n        <>\n          {suffix}\n          {visibilityToggle && (\n            <button\n              aria-label={visible ? 'Hide password' : 'Show password'}\n              tabIndex={-1}\n              type={'button'}\n              onClick={() => setVisible((v) => !v)}\n              {...stylex.props(styles.passwordToggle)}\n            >\n              <Icon icon={visible ? Eye : EyeOff} size={16} />\n            </button>\n          )}\n        </>\n      }\n      {...rest}\n    />\n  );\n});\n\nInputPassword.displayName = 'InputPassword';\n\nexport default Object.assign(InputPassword, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;AASA,MAAM,gBAAgB,MAA0B,EAC9C,mBAAmB,MACnB,QACA,GAAG,WACC;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,OAAO,oBAACA,eAAD;EAAO,MAAM,UAAU,SAAS;EAAY,QAAQ,qBAAA,YAAA,EAAA,UAAA,CAClD,QACA,oBAAoB,oBAAC,UAAD;GAAQ,cAAY,UAAU,kBAAkB;GAAiB,UAAU;GAAI,MAAM;GAAU,eAAe,YAAW,MAAK,CAAC,CAAC;GAAG,GAAI,OAAO,MAAM,OAAO,cAAc;GAC1L,UAAA,oBAAC,MAAD;IAAM,MAAM,UAAU,MAAM;IAAQ,MAAM;GAAK,CAAA;EACzC,CAAA,CACV,EAAA,CAAA;EAAG,GAAI;CAAO,CAAA;AACxB,CAAC;AACD,cAAc,cAAc;AAC5B,IAAA,wBAAe,OAAO,OAAO,eAAe,EAC1C,aAAa,EACX,YAAY,GACd,EACF,CAAC"}

package/es/Input/TextArea.d.mts

@@ -1,6 +1,10 @@
 import { TextAreaProps } from "./type.mjs";
 //#region src/Input/TextArea.d.ts
-declare const TextArea: import("react").NamedExoticComponent<TextAreaProps>;
+declare const _default: import("react").NamedExoticComponent<TextAreaProps> & {
+  formBinding: {
+    readonly emptyValue: "";
+  };
+};
 //#endregion
-export { TextArea as default };
+export { _default as default };
 //# sourceMappingURL=TextArea.d.mts.map

package/es/Input/TextArea.mjs

@@ -1,28 +1,91 @@
 "use client";
-import { variants } from "./style.mjs";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { cx, useThemeMode } from "antd-style";
-import { Input } from "antd";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { useMergeRefs } from "../utils/mergeRefs.mjs";
+import { useThemeMode } from "../styles/theme/scope.mjs";
+import { inputRootStyles, styles } from "./style.mjs";
+import ClearButton from "./ClearButton.mjs";
+import { clearNativeValue } from "./clearNativeValue.mjs";
+import { isPressEnter } from "./pressEnter.mjs";
+import { memo, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Field } from "@base-ui/react/field";
 //#region src/Input/TextArea.tsx
-const TextArea = memo(({ ref, variant, shadow, className, resize = false, style, ...rest }) => {
+const textLength = (value) => value === void 0 || value === null ? 0 : Array.from(String(value)).length;
+const TextArea = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, autoSize, resize = false, disabled, readOnly, allowClear, onClear, onPressEnter, onKeyDown, onChange, showCount, maxLength, value, defaultValue, ...rest }) => {
 	const { isDarkMode } = useThemeMode();
-	return /* @__PURE__ */ jsx(Input.TextArea, {
-		ref,
-		variant: variant || (isDarkMode ? "filled" : "outlined"),
-		className: cx(variants({
-			shadow,
-			variant: variant || (isDarkMode ? "filled" : "outlined")
-		}), className),
-		style: {
-			resize: resize ? void 0 : "none",
+	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	const textareaRef = useRef(null);
+	const mergedRef = useMergeRefs([ref, textareaRef]);
+	const [innerLength, setInnerLength] = useState(() => textLength(value ?? defaultValue));
+	const length = value === void 0 ? innerLength : textLength(value);
+	const showClear = allowClear && length > 0 && !disabled && !readOnly;
+	const over = maxLength !== void 0 && length > maxLength;
+	const cssVariables = useMemo(() => {
+		if (typeof autoSize !== "object") return {};
+		return {
+			"--textarea-max-height": autoSize.maxRows ? `calc(1.5em * ${autoSize.maxRows})` : void 0,
+			"--textarea-min-rows": autoSize.minRows
+		};
+	}, [autoSize]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-disabled": disabled ? "" : void 0,
+		"data-variant": mergedVariant,
+		...styleProps([
+			...inputRootStyles({
+				shadow,
+				variant: mergedVariant
+			}),
+			styles.textarea,
+			showCount && styles.textareaWithCount
+		], className, {
+			...cssVariables,
 			...style
-		},
-		...rest
+		}),
+		children: [
+			/* @__PURE__ */ jsx(Field.Control, {
+				disabled,
+				...styleProps([
+					styles.input,
+					styles.textareaControl,
+					autoSize && styles.textareaAutoSize,
+					resize && styles.textareaResize
+				], classNames?.input, customStyles?.input),
+				render: /* @__PURE__ */ jsx("textarea", {
+					defaultValue,
+					maxLength,
+					readOnly,
+					ref: mergedRef,
+					value,
+					onChange: (event) => {
+						setInnerLength(textLength(event.currentTarget.value));
+						onChange?.(event);
+					},
+					onKeyDown: (event) => {
+						if (isPressEnter(event)) onPressEnter?.(event);
+						onKeyDown?.(event);
+					},
+					...rest
+				})
+			}),
+			showClear && /* @__PURE__ */ jsx(ClearButton, {
+				xstyle: styles.textareaClear,
+				onClear: () => {
+					clearNativeValue(textareaRef.current);
+					onClear?.();
+				}
+			}),
+			showCount && /* @__PURE__ */ jsx("span", {
+				"data-over": over ? "" : void 0,
+				...stylex.props(styles.count),
+				children: maxLength === void 0 ? length : `${length} / ${maxLength}`
+			})
+		]
 	});
 });
 TextArea.displayName = "TextArea";
+var TextArea_default = Object.assign(TextArea, { formBinding: { emptyValue: "" } });
 //#endregion
-export { TextArea as default };
+export { TextArea_default as default };
 
 //# sourceMappingURL=TextArea.mjs.map

package/es/Input/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","names":["AntInput"],"sources":["../../src/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { TextAreaProps } from './type';\n\nconst TextArea = memo<TextAreaProps>(\n  ({ ref, variant, shadow, className, resize = false, style, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n\n    return (\n      <AntInput.TextArea\n        ref={ref}\n        variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n        className={cx(\n          variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n        style={{\n          resize: resize ? undefined : 'none',\n          ...style,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;AASA,MAAM,WAAW,MACd,EAAE,KAAK,SAAS,QAAQ,WAAW,SAAS,OAAO,OAAO,GAAG,WAAW;CACvE,MAAM,EAAE,eAAe,aAAa;CAEpC,OACE,oBAACA,MAAS,UAAV;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GAC7E,SACF;EACA,OAAO;GACL,QAAQ,SAAS,KAAA,IAAY;GAC7B,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../src/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport * as stylex from '@stylexjs/stylex';\nimport { type CSSProperties, memo, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport { useMergeRefs } from '@/utils/mergeRefs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { inputRootStyles, styles } from './style';\nimport type { TextAreaProps } from './type';\n\nconst textLength = (value: unknown) =>\n  value === undefined || value === null ? 0 : Array.from(String(value)).length;\n\nconst TextArea = memo<TextAreaProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    autoSize,\n    resize = false,\n    disabled,\n    readOnly,\n    allowClear,\n    onClear,\n    onPressEnter,\n    onKeyDown,\n    onChange,\n    showCount,\n    maxLength,\n    value,\n    defaultValue,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const mergedRef = useMergeRefs([ref, textareaRef]);\n    const [innerLength, setInnerLength] = useState(() => textLength(value ?? defaultValue));\n    const length = value === undefined ? innerLength : textLength(value);\n    const showClear = allowClear && length > 0 && !disabled && !readOnly;\n    const over = maxLength !== undefined && length > maxLength;\n\n    const cssVariables = useMemo<CSSProperties>(() => {\n      if (typeof autoSize !== 'object') return {};\n      return {\n        '--textarea-max-height': autoSize.maxRows ? `calc(1.5em * ${autoSize.maxRows})` : undefined,\n        '--textarea-min-rows': autoSize.minRows,\n      } as CSSProperties;\n    }, [autoSize]);\n\n    return (\n      <div\n        data-disabled={disabled ? '' : undefined}\n        data-variant={mergedVariant}\n        {...styleProps(\n          [\n            ...inputRootStyles({ shadow, variant: mergedVariant }),\n            styles.textarea,\n            showCount && styles.textareaWithCount,\n          ],\n          className,\n          { ...cssVariables, ...style },\n        )}\n      >\n        <Field.Control\n          disabled={disabled}\n          {...styleProps(\n            [\n              styles.input,\n              styles.textareaControl,\n              autoSize && styles.textareaAutoSize,\n              resize && styles.textareaResize,\n            ],\n            classNames?.input,\n            customStyles?.input,\n          )}\n          render={\n            <textarea\n              defaultValue={defaultValue}\n              maxLength={maxLength}\n              readOnly={readOnly}\n              ref={mergedRef}\n              value={value}\n              onChange={(event) => {\n                setInnerLength(textLength(event.currentTarget.value));\n                onChange?.(event);\n              }}\n              onKeyDown={(event) => {\n                if (isPressEnter(event)) onPressEnter?.(event);\n                onKeyDown?.(event);\n              }}\n              {...rest}\n            />\n          }\n        />\n        {showClear && (\n          <ClearButton\n            xstyle={styles.textareaClear}\n            onClear={() => {\n              clearNativeValue(textareaRef.current);\n              onClear?.();\n            }}\n          />\n        )}\n        {showCount && (\n          <span data-over={over ? '' : undefined} {...stylex.props(styles.count)}>\n            {maxLength === undefined ? length : `${length} / ${maxLength}`}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default Object.assign(TextArea, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,cAAc,UAAmB,UAAU,KAAA,KAAa,UAAU,OAAO,IAAI,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;AAC7G,MAAM,WAAW,MAAqB,EACpC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,UACA,SAAS,OACT,UACA,UACA,YACA,SACA,cACA,WACA,UACA,WACA,WACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EACJ,eACE,aAAa;CACjB,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,cAAc,OAA4B,IAAI;CACpD,MAAM,YAAY,aAAa,CAAC,KAAK,WAAW,CAAC;CACjD,MAAM,CAAC,aAAa,kBAAkB,eAAe,WAAW,SAAS,YAAY,CAAC;CACtF,MAAM,SAAS,UAAU,KAAA,IAAY,cAAc,WAAW,KAAK;CACnE,MAAM,YAAY,cAAc,SAAS,KAAK,CAAC,YAAY,CAAC;CAC5D,MAAM,OAAO,cAAc,KAAA,KAAa,SAAS;CACjD,MAAM,eAAe,cAA6B;EAChD,IAAI,OAAO,aAAa,UAAU,OAAO,CAAC;EAC1C,OAAO;GACL,yBAAyB,SAAS,UAAU,gBAAgB,SAAS,QAAQ,KAAK,KAAA;GAClF,uBAAuB,SAAS;EAClC;CACF,GAAG,CAAC,QAAQ,CAAC;CACb,OAAO,qBAAC,OAAD;EAAK,iBAAe,WAAW,KAAK,KAAA;EAAW,gBAAc;EAAe,GAAI,WAAW;GAAC,GAAG,gBAAgB;IACpH;IACA,SAAS;GACX,CAAC;GAAG,OAAO;GAAU,aAAa,OAAO;EAAiB,GAAG,WAAW;GACtE,GAAG;GACH,GAAG;EACL,CAAC;EANM,UAAA;GAOD,oBAAC,MAAM,SAAP;IAAyB;IAAU,GAAI,WAAW;KAAC,OAAO;KAAO,OAAO;KAAiB,YAAY,OAAO;KAAkB,UAAU,OAAO;IAAc,GAAG,YAAY,OAAO,cAAc,KAAK;IAAG,QAAQ,oBAAC,YAAD;KAAwB;KAAyB;KAAqB;KAAU,KAAK;KAAkB;KAAO,WAAU,UAAS;MACpV,eAAe,WAAW,MAAM,cAAc,KAAK,CAAC;MACpD,WAAW,KAAK;KAClB;KAAG,YAAW,UAAS;MACrB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;MAC7C,YAAY,KAAK;KACnB;KAAG,GAAI;IAAO,CAAA;GAAI,CAAA;GACb,aAAa,oBAAC,aAAD;IAAa,QAAQ,OAAO;IAAe,eAAe;KAC1E,iBAAiB,YAAY,OAAO;KACpC,UAAU;IACZ;GAAI,CAAA;GACC,aAAa,oBAAC,QAAD;IAAM,aAAW,OAAO,KAAK,KAAA;IAAW,GAAI,OAAO,MAAM,OAAO,KAAK;IAC9E,UAAA,cAAc,KAAA,IAAY,SAAS,GAAG,OAAO,KAAK;GAC/C,CAAA;EACL;;AACX,CAAC;AACD,SAAS,cAAc;AACvB,IAAA,mBAAe,OAAO,OAAO,UAAU,EACrC,aAAa,EACX,YAAY,GACd,EACF,CAAC"}

package/es/Input/clearNativeValue.mjs

@@ -0,0 +1,12 @@
+//#region src/Input/clearNativeValue.ts
+const clearNativeValue = (element) => {
+	if (!element) return;
+	const prototype = element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+	Object.getOwnPropertyDescriptor(prototype, "value")?.set?.call(element, "");
+	element.dispatchEvent(new Event("input", { bubbles: true }));
+	element.focus();
+};
+//#endregion
+export { clearNativeValue };
+
+//# sourceMappingURL=clearNativeValue.mjs.map

package/es/Input/clearNativeValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"clearNativeValue.mjs","names":[],"sources":["../../src/Input/clearNativeValue.ts"],"sourcesContent":["export const clearNativeValue = (element: HTMLInputElement | HTMLTextAreaElement | null) => {\n  if (!element) return;\n  const prototype =\n    element instanceof HTMLTextAreaElement\n      ? HTMLTextAreaElement.prototype\n      : HTMLInputElement.prototype;\n  Object.getOwnPropertyDescriptor(prototype, 'value')?.set?.call(element, '');\n  element.dispatchEvent(new Event('input', { bubbles: true }));\n  element.focus();\n};\n"],"mappings":";AAAA,MAAa,oBAAoB,YAA2D;CAC1F,IAAI,CAAC,SAAS;CACd,MAAM,YACJ,mBAAmB,sBACf,oBAAoB,YACpB,iBAAiB;CACvB,OAAO,yBAAyB,WAAW,OAAO,CAAC,EAAE,KAAK,KAAK,SAAS,EAAE;CAC1E,QAAQ,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;CAC3D,QAAQ,MAAM;AAChB"}

package/es/Input/index.d.mts

@@ -1,7 +1,8 @@
-import { InputNumberProps, InputOPTProps, InputPasswordProps, InputProps, TextAreaProps } from "./type.mjs";
-import Input from "./Input.mjs";
-import InputNumber from "./InputNumber.mjs";
-import InputOPT from "./InputOPT.mjs";
-import InputPassword from "./InputPassword.mjs";
-import TextArea from "./TextArea.mjs";
-export { InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, TextArea, type TextAreaProps, Input as default };
+import { InputClassNames, InputNumberProps, InputOTPProps, InputPasswordProps, InputProps, InputSize, InputStyles, InputVariant, TextAreaAutoSize, TextAreaProps } from "./type.mjs";
+import _default from "./Input.mjs";
+import _default$1 from "./InputNumber.mjs";
+import InputOTP from "./InputOTP.mjs";
+import _default$2 from "./InputPassword.mjs";
+import { inputClassNames, rootVariants } from "./style.mjs";
+import _default$3 from "./TextArea.mjs";
+export { _default as Input, type InputClassNames, _default$1 as InputNumber, type InputNumberProps, InputOTP, type InputOTPProps, _default$2 as InputPassword, type InputPasswordProps, type InputProps, type InputSize, type InputStyles, type InputVariant, _default$3 as TextArea, type TextAreaAutoSize, type TextAreaProps, inputClassNames as inputStyles, rootVariants as inputVariants };

package/es/Input/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Input/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Input/index.mjs

@@ -0,0 +1,7 @@
+import { inputClassNames, rootVariants } from "./style.mjs";
+import Input_default from "./Input.mjs";
+import InputNumber_default from "./InputNumber.mjs";
+import InputOTP from "./InputOTP.mjs";
+import InputPassword_default from "./InputPassword.mjs";
+import TextArea_default from "./TextArea.mjs";
+export { Input_default as Input, InputNumber_default as InputNumber, InputOTP, InputPassword_default as InputPassword, TextArea_default as TextArea, inputClassNames as inputStyles, rootVariants as inputVariants };

package/es/Input/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/Input/marker.stylex.ts
+const inputMarker = {
+	lby9uwd8: "lby9uwd8",
+	$$css: true
+};
+//#endregion
+export { inputMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/Input/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../src/Input/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const inputMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,cAAc;CACzB,UAAU;CACV,OAAO;AACT"}

package/es/Input/pressEnter.mjs

@@ -0,0 +1,6 @@
+//#region src/Input/pressEnter.ts
+const isPressEnter = (event) => event.key === "Enter" && !event.nativeEvent.isComposing && event.keyCode !== 229;
+//#endregion
+export { isPressEnter };
+
+//# sourceMappingURL=pressEnter.mjs.map

package/es/Input/pressEnter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pressEnter.mjs","names":[],"sources":["../../src/Input/pressEnter.ts"],"sourcesContent":["import type { KeyboardEvent } from 'react';\n\nexport const isPressEnter = (event: KeyboardEvent) =>\n  event.key === 'Enter' && !event.nativeEvent.isComposing && event.keyCode !== 229;\n"],"mappings":";AAEA,MAAa,gBAAgB,UAC3B,MAAM,QAAQ,WAAW,CAAC,MAAM,YAAY,eAAe,MAAM,YAAY"}

package/es/Input/style.d.mts

@@ -0,0 +1,41 @@
+import { InputSize, InputVariant } from "./type.mjs";
+import "@stylexjs/stylex";
+//#region src/Input/style.d.ts
+interface RootOptions {
+  shadow?: boolean | null;
+  size?: InputSize | null;
+  variant?: InputVariant | null;
+}
+export declare const rootVariants: (options?: RootOptions) => string;
+export declare const inputClassNames: {
+  borderless: string;
+  clear: string;
+  count: string;
+  filled: string;
+  input: string;
+  invalid: string;
+  numberControl: string;
+  numberControlLarge: string;
+  numberControls: string;
+  numberControlSmall: string;
+  numberControlsSmall: string;
+  numberInput: string;
+  otpCell: string;
+  otpRoot: string;
+  outlined: string;
+  passwordToggle: string;
+  root: string;
+  shadow: string;
+  sizeLarge: string;
+  sizeMiddle: string;
+  sizeSmall: string;
+  slot: string;
+  textarea: string;
+  textareaAutoSize: string;
+  textareaClear: string;
+  textareaResize: string;
+  textareaWithCount: string;
+};
+//#endregion
+export {};
+//# sourceMappingURL=style.d.mts.map