@lobehub/ui 5.19.3 → 5.20.0

package/es/base-ui/Input/InputNumber.mjs

@@ -0,0 +1,50 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { rootVariants, styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/base-ui/Input/InputNumber.tsx
+const InputNumber = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", controls = true, changeOnWheel, onChange, placeholder, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	return /* @__PURE__ */ jsxs(NumberField.Root, {
+		allowWheelScrub: changeOnWheel,
+		className: cx(rootVariants({
+			shadow,
+			size,
+			variant: mergedVariant
+		}), className),
+		style,
+		onValueChange: onChange,
+		...rest,
+		children: [/* @__PURE__ */ jsx(NumberField.Input, {
+			className: cx(styles.input, styles.numberInput, classNames?.input),
+			placeholder,
+			ref,
+			style: customStyles?.input
+		}), controls && /* @__PURE__ */ jsxs("div", {
+			className: styles.numberControls,
+			children: [/* @__PURE__ */ jsx(NumberField.Increment, {
+				className: styles.numberControl,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: ChevronUp,
+					size: 12
+				})
+			}), /* @__PURE__ */ jsx(NumberField.Decrement, {
+				className: styles.numberControl,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: ChevronDown,
+					size: 12
+				})
+			})]
+		})]
+	});
+});
+InputNumber.displayName = "InputNumber";
+//#endregion
+export { InputNumber as default };
+
+//# sourceMappingURL=InputNumber.mjs.map

package/es/base-ui/Input/InputNumber.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumber.mjs","names":[],"sources":["../../../src/base-ui/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField } from '@base-ui/react/number-field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { rootVariants, styles } from './style';\nimport type { InputNumberProps } from './type';\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    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    return (\n      <NumberField.Root\n        allowWheelScrub={changeOnWheel}\n        className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n        style={style}\n        onValueChange={onChange}\n        {...rest}\n      >\n        <NumberField.Input\n          className={cx(styles.input, styles.numberInput, classNames?.input)}\n          placeholder={placeholder}\n          ref={ref}\n          style={customStyles?.input}\n        />\n        {controls && (\n          <div className={styles.numberControls}>\n            <NumberField.Increment className={styles.numberControl}>\n              <Icon icon={ChevronUp} size={12} />\n            </NumberField.Increment>\n            <NumberField.Decrement className={styles.numberControl}>\n              <Icon icon={ChevronDown} size={12} />\n            </NumberField.Decrement>\n          </div>\n        )}\n      </NumberField.Root>\n    );\n  },\n);\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":";;;;;;;;;AAYA,MAAM,cAAc,MACjB,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,WAAW,MACX,eACA,UACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CACrC,MAAM,gBAAgB,YAAY,aAAa,WAAW;AAE1D,QACE,qBAAC,YAAY,MAAb;EACE,iBAAiB;EACjB,WAAW,GAAG,aAAa;GAAE;GAAQ;GAAM,SAAS;GAAe,CAAC,EAAE,UAAU;EACzE;EACP,eAAe;EACf,GAAI;YALN,CAOE,oBAAC,YAAY,OAAb;GACE,WAAW,GAAG,OAAO,OAAO,OAAO,aAAa,YAAY,MAAM;GACrD;GACR;GACL,OAAO,cAAc;GACrB,CAAA,EACD,YACC,qBAAC,OAAD;GAAK,WAAW,OAAO;aAAvB,CACE,oBAAC,YAAY,WAAb;IAAuB,WAAW,OAAO;cACvC,oBAAC,MAAD;KAAM,MAAM;KAAW,MAAM;KAAM,CAAA;IACb,CAAA,EACxB,oBAAC,YAAY,WAAb;IAAuB,WAAW,OAAO;cACvC,oBAAC,MAAD;KAAM,MAAM;KAAa,MAAM;KAAM,CAAA;IACf,CAAA,CACpB;KAES;;EAGxB;AAED,YAAY,cAAc"}

package/es/base-ui/Input/InputOTP.d.mts

@@ -0,0 +1,8 @@
+import { InputOTPProps } from "./type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Input/InputOTP.d.ts
+declare const InputOTP: _$react.NamedExoticComponent<InputOTPProps>;
+//#endregion
+export { InputOTP };
+//# sourceMappingURL=InputOTP.d.mts.map

package/es/base-ui/Input/InputOTP.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { rootVariants, styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/base-ui/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, {
+		className: cx(styles.otpRoot, className),
+		length,
+		style,
+		onValueChange: onChange,
+		...rest,
+		children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(OTPField.Input, {
+			style: customStyles?.input,
+			className: cx(rootVariants({
+				shadow,
+				size,
+				variant: mergedVariant
+			}), styles.otpCell, classNames?.input)
+		}, index))
+	});
+});
+InputOTP.displayName = "InputOTP";
+//#endregion
+export { InputOTP as default };
+
+//# sourceMappingURL=InputOTP.mjs.map

package/es/base-ui/Input/InputOTP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.mjs","names":[],"sources":["../../../src/base-ui/Input/InputOTP.tsx"],"sourcesContent":["'use client';\n\nimport { OTPField } from '@base-ui/react/otp-field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { rootVariants, 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        className={cx(styles.otpRoot, className)}\n        length={length}\n        style={style}\n        onValueChange={onChange}\n        {...rest}\n      >\n        {Array.from({ length }, (_, index) => (\n          <OTPField.Input\n            key={index}\n            style={customStyles?.input}\n            className={cx(\n              rootVariants({ shadow, size, variant: mergedVariant }),\n              styles.otpCell,\n              classNames?.input,\n            )}\n          />\n        ))}\n      </OTPField.Root>\n    );\n  },\n);\n\nInputOTP.displayName = 'InputOTP';\n\nexport default InputOTP;\n"],"mappings":";;;;;;;AASA,MAAM,WAAW,MACd,EACC,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,SAAS,GACT,UACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CACrC,MAAM,gBAAgB,YAAY,aAAa,WAAW;AAE1D,QACE,oBAAC,SAAS,MAAV;EACE,WAAW,GAAG,OAAO,SAAS,UAAU;EAChC;EACD;EACP,eAAe;EACf,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,UAC1B,oBAAC,SAAS,OAAV;GAEE,OAAO,cAAc;GACrB,WAAW,GACT,aAAa;IAAE;IAAQ;IAAM,SAAS;IAAe,CAAC,EACtD,OAAO,SACP,YAAY,MACb;GACD,EAPK,MAOL,CACF;EACY,CAAA;EAGrB;AAED,SAAS,cAAc"}

package/es/base-ui/Input/InputPassword.d.mts

@@ -0,0 +1,8 @@
+import { InputPasswordProps } from "./type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Input/InputPassword.d.ts
+declare const InputPassword: _$react.NamedExoticComponent<InputPasswordProps>;
+//#endregion
+export { InputPassword };
+//# sourceMappingURL=InputPassword.d.mts.map

package/es/base-ui/Input/InputPassword.mjs

@@ -0,0 +1,31 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
+import Input from "./Input.mjs";
+import { memo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Eye, EyeOff } from "lucide-react";
+//#region src/base-ui/Input/InputPassword.tsx
+const InputPassword = memo(({ visibilityToggle = true, suffix, ...rest }) => {
+	const [visible, setVisible] = useState(false);
+	return /* @__PURE__ */ jsx(Input, {
+		type: visible ? "text" : "password",
+		suffix: /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, visibilityToggle && /* @__PURE__ */ jsx("button", {
+			"aria-label": visible ? "Hide password" : "Show password",
+			className: styles.passwordToggle,
+			tabIndex: -1,
+			type: "button",
+			onClick: () => setVisible((v) => !v),
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: visible ? Eye : EyeOff,
+				size: 16
+			})
+		})] }),
+		...rest
+	});
+});
+InputPassword.displayName = "InputPassword";
+//#endregion
+export { InputPassword as default };
+
+//# sourceMappingURL=InputPassword.mjs.map

package/es/base-ui/Input/InputPassword.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputPassword.mjs","names":[],"sources":["../../../src/base-ui/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\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              className={styles.passwordToggle}\n              tabIndex={-1}\n              type={'button'}\n              onClick={() => setVisible((v) => !v)}\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 InputPassword;\n"],"mappings":";;;;;;;;AAWA,MAAM,gBAAgB,MAA0B,EAAE,mBAAmB,MAAM,QAAQ,GAAG,WAAW;CAC/F,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,QACE,oBAAC,OAAD;EACE,MAAM,UAAU,SAAS;EACzB,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,QACA,oBACC,oBAAC,UAAD;GACE,cAAY,UAAU,kBAAkB;GACxC,WAAW,OAAO;GAClB,UAAU;GACV,MAAM;GACN,eAAe,YAAY,MAAM,CAAC,EAAE;aAEpC,oBAAC,MAAD;IAAM,MAAM,UAAU,MAAM;IAAQ,MAAM;IAAM,CAAA;GACzC,CAAA,CAEV,EAAA,CAAA;EAEL,GAAI;EACJ,CAAA;EAEJ;AAEF,cAAc,cAAc"}

package/es/base-ui/Input/TextArea.d.mts

@@ -0,0 +1,8 @@
+import { TextAreaProps } from "./type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Input/TextArea.d.ts
+declare const TextArea: _$react.NamedExoticComponent<TextAreaProps>;
+//#endregion
+export { TextArea };
+//# sourceMappingURL=TextArea.d.mts.map

package/es/base-ui/Input/TextArea.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { rootVariants, styles } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import { Field } from "@base-ui/react/field";
+//#region src/base-ui/Input/TextArea.tsx
+const TextArea = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, autoSize, resize = false, disabled, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	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__ */ jsx("div", {
+		"data-disabled": disabled ? "" : void 0,
+		style: {
+			...cssVariables,
+			...style
+		},
+		className: cx(rootVariants({
+			shadow,
+			variant: mergedVariant
+		}), styles.textarea, autoSize && styles.textareaAutoSize, resize && styles.textareaResize, className),
+		children: /* @__PURE__ */ jsx(Field.Control, {
+			className: cx(styles.input, classNames?.input),
+			disabled,
+			render: /* @__PURE__ */ jsx("textarea", {
+				ref,
+				...rest
+			}),
+			style: customStyles?.input
+		})
+	});
+});
+TextArea.displayName = "TextArea";
+//#endregion
+export { TextArea as default };
+
+//# sourceMappingURL=TextArea.mjs.map

package/es/base-ui/Input/TextArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../src/base-ui/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { type CSSProperties, memo, useMemo } from 'react';\n\nimport { rootVariants, styles } from './style';\nimport type { TextAreaProps } from './type';\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    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\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        style={{ ...cssVariables, ...style }}\n        className={cx(\n          rootVariants({ shadow, variant: mergedVariant }),\n          styles.textarea,\n          autoSize && styles.textareaAutoSize,\n          resize && styles.textareaResize,\n          className,\n        )}\n      >\n        <Field.Control\n          className={cx(styles.input, classNames?.input)}\n          disabled={disabled}\n          render={<textarea ref={ref} {...rest} />}\n          style={customStyles?.input}\n        />\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;AASA,MAAM,WAAW,MACd,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,UACA,SAAS,OACT,UACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CACrC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,MAAM,eAAe,cAA6B;AAChD,MAAI,OAAO,aAAa,SAAU,QAAO,EAAE;AAC3C,SAAO;GACL,yBAAyB,SAAS,UAAU,gBAAgB,SAAS,QAAQ,KAAK,KAAA;GAClF,uBAAuB,SAAS;GACjC;IACA,CAAC,SAAS,CAAC;AAEd,QACE,oBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,OAAO;GAAE,GAAG;GAAc,GAAG;GAAO;EACpC,WAAW,GACT,aAAa;GAAE;GAAQ,SAAS;GAAe,CAAC,EAChD,OAAO,UACP,YAAY,OAAO,kBACnB,UAAU,OAAO,gBACjB,UACD;YAED,oBAAC,MAAM,SAAP;GACE,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GACpC;GACV,QAAQ,oBAAC,YAAD;IAAe;IAAK,GAAI;IAAQ,CAAA;GACxC,OAAO,cAAc;GACrB,CAAA;EACE,CAAA;EAGX;AAED,SAAS,cAAc"}

package/es/base-ui/Input/index.d.mts

@@ -0,0 +1,7 @@
+import { InputClassNames, InputNumberProps, InputOTPProps, InputPasswordProps, InputProps, InputSize, InputStyles, InputVariant, TextAreaAutoSize, TextAreaProps } from "./type.mjs";
+import { Input } from "./Input.mjs";
+import { InputNumber } from "./InputNumber.mjs";
+import { InputOTP } from "./InputOTP.mjs";
+import { InputPassword } from "./InputPassword.mjs";
+import { rootVariants, styles } from "./style.mjs";
+import { TextArea } from "./TextArea.mjs";

package/es/base-ui/Input/style.d.mts

@@ -0,0 +1,33 @@
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/base-ui/Input/style.d.ts
+declare const styles: {
+  borderless: string;
+  filled: string;
+  input: string;
+  invalid: string;
+  outlined: string;
+  root: string;
+  shadow: string;
+  sizeLarge: string;
+  sizeMiddle: string;
+  sizeSmall: string;
+  numberControl: string;
+  numberControls: string;
+  numberInput: string;
+  otpCell: string;
+  otpRoot: string;
+  passwordToggle: string;
+  slot: string;
+  textarea: string;
+  textareaAutoSize: string;
+  textareaResize: string;
+};
+declare const rootVariants: (props?: ({
+  shadow?: boolean | null | undefined;
+  size?: "small" | "large" | "middle" | null | undefined;
+  variant?: "filled" | "outlined" | "borderless" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+//#endregion
+export { rootVariants, styles };
+//# sourceMappingURL=style.d.mts.map

package/es/base-ui/Input/style.mjs

@@ -0,0 +1,230 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { controlHeight } from "../controlSize.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Input/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	borderless: css`
+    border: 1px solid transparent;
+    background: none;
+  `,
+	filled: css`
+    border: 1px solid transparent;
+    background: ${cssVar.colorFillTertiary};
+
+    &:hover:not(:focus-within, [data-disabled]) {
+      background: ${cssVar.colorFillSecondary};
+    }
+  `,
+	input: css`
+    flex: 1;
+
+    min-width: 0;
+    padding: 0;
+    border: none;
+
+    font: inherit;
+    color: inherit;
+
+    appearance: none;
+    background: transparent;
+    outline: none;
+
+    &::placeholder {
+      color: ${cssVar.colorTextPlaceholder};
+    }
+  `,
+	invalid: css`
+    &:has([data-invalid]) {
+      border-color: ${cssVar.colorError};
+
+      &:focus-within {
+        border-color: ${cssVar.colorError};
+        box-shadow: 0 0 0 2px ${cssVar.colorErrorBg};
+      }
+    }
+  `,
+	outlined: css`
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    background: ${cssVar.colorBgContainer};
+
+    &:hover:not(:focus-within, [data-disabled]) {
+      border-color: ${cssVar.colorBorder};
+    }
+
+    &:focus-within {
+      border-color: ${cssVar.colorPrimary};
+      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};
+    }
+  `,
+	root: css`
+    cursor: text;
+
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+
+    box-sizing: border-box;
+    width: 100%;
+    padding-inline: 12px;
+    border-radius: ${cssVar.borderRadius};
+
+    font-size: 14px;
+    color: ${cssVar.colorText};
+
+    transition:
+      background 150ms ${cssVar.motionEaseOut},
+      border-color 150ms ${cssVar.motionEaseOut},
+      box-shadow 150ms ${cssVar.motionEaseOut};
+
+    &[data-disabled],
+    &:has(:disabled) {
+      cursor: not-allowed;
+      color: ${cssVar.colorTextQuaternary};
+      opacity: 0.66;
+    }
+  `,
+	shadow: staticStylish.shadow,
+	sizeLarge: css`
+    height: ${controlHeight.large}px;
+    border-radius: ${cssVar.borderRadiusLG};
+    font-size: 16px;
+  `,
+	sizeMiddle: css`
+    height: ${controlHeight.middle}px;
+  `,
+	sizeSmall: css`
+    height: ${controlHeight.small}px;
+    padding-inline: 8px;
+    border-radius: ${cssVar.borderRadiusSM};
+    font-size: 12px;
+  `,
+	numberControl: css`
+    cursor: pointer;
+
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: none;
+    outline: none;
+
+    transition: color 150ms ${cssVar.motionEaseOut};
+
+    &:hover:not(:disabled) {
+      color: ${cssVar.colorText};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  `,
+	numberControls: css`
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    align-self: stretch;
+
+    width: 22px;
+    margin-inline-end: -8px;
+    border-inline-start: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	numberInput: css`
+    font-variant-numeric: tabular-nums;
+  `,
+	otpCell: css`
+    flex: none;
+    width: ${controlHeight.middle}px;
+    padding-inline: 0;
+    text-align: center;
+  `,
+	otpRoot: css`
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+  `,
+	passwordToggle: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: none;
+    outline: none;
+
+    transition: color 150ms ${cssVar.motionEaseOut};
+
+    &:hover {
+      color: ${cssVar.colorText};
+    }
+  `,
+	slot: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: ${cssVar.colorTextTertiary};
+  `,
+	textarea: css`
+    height: auto;
+    padding-block: 8px;
+
+    textarea {
+      resize: none;
+      min-height: calc(1.5em * var(--textarea-min-rows, 2));
+      max-height: var(--textarea-max-height, none);
+      line-height: 1.5;
+    }
+  `,
+	textareaAutoSize: css`
+    textarea {
+      field-sizing: content;
+    }
+  `,
+	textareaResize: css`
+    textarea {
+      resize: vertical;
+    }
+  `
+}));
+const rootVariants = cva([styles.root, styles.invalid], {
+	defaultVariants: {
+		shadow: false,
+		size: "middle",
+		variant: "outlined"
+	},
+	variants: {
+		shadow: {
+			false: null,
+			true: styles.shadow
+		},
+		size: {
+			large: styles.sizeLarge,
+			middle: styles.sizeMiddle,
+			small: styles.sizeSmall
+		},
+		variant: {
+			borderless: styles.borderless,
+			filled: styles.filled,
+			outlined: styles.outlined
+		}
+	}
+});
+//#endregion
+export { rootVariants, styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Input/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Input/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  borderless: css`\n    border: 1px solid transparent;\n    background: none;\n  `,\n  filled: css`\n    border: 1px solid transparent;\n    background: ${cssVar.colorFillTertiary};\n\n    &:hover:not(:focus-within, [data-disabled]) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  input: css`\n    flex: 1;\n\n    min-width: 0;\n    padding: 0;\n    border: none;\n\n    font: inherit;\n    color: inherit;\n\n    appearance: none;\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  invalid: css`\n    &:has([data-invalid]) {\n      border-color: ${cssVar.colorError};\n\n      &:focus-within {\n        border-color: ${cssVar.colorError};\n        box-shadow: 0 0 0 2px ${cssVar.colorErrorBg};\n      }\n    }\n  `,\n  outlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:focus-within, [data-disabled]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    &:focus-within {\n      border-color: ${cssVar.colorPrimary};\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};\n    }\n  `,\n  root: css`\n    cursor: text;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut},\n      box-shadow 150ms ${cssVar.motionEaseOut};\n\n    &[data-disabled],\n    &:has(:disabled) {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n      opacity: 0.66;\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  sizeLarge: css`\n    height: ${controlHeight.large}px;\n    border-radius: ${cssVar.borderRadiusLG};\n    font-size: 16px;\n  `,\n  sizeMiddle: css`\n    height: ${controlHeight.middle}px;\n  `,\n  sizeSmall: css`\n    height: ${controlHeight.small}px;\n    padding-inline: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 12px;\n  `,\n  numberControl: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: none;\n    outline: none;\n\n    transition: color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.4;\n    }\n  `,\n  numberControls: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    align-self: stretch;\n\n    width: 22px;\n    margin-inline-end: -8px;\n    border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  numberInput: css`\n    font-variant-numeric: tabular-nums;\n  `,\n  otpCell: css`\n    flex: none;\n    width: ${controlHeight.middle}px;\n    padding-inline: 0;\n    text-align: center;\n  `,\n  otpRoot: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n  `,\n  passwordToggle: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: none;\n    outline: none;\n\n    transition: color 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  slot: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  textarea: css`\n    height: auto;\n    padding-block: 8px;\n\n    textarea {\n      resize: none;\n      min-height: calc(1.5em * var(--textarea-min-rows, 2));\n      max-height: var(--textarea-max-height, none);\n      line-height: 1.5;\n    }\n  `,\n  textareaAutoSize: css`\n    textarea {\n      field-sizing: content;\n    }\n  `,\n  textareaResize: css`\n    textarea {\n      resize: vertical;\n    }\n  `,\n}));\n\nexport const rootVariants = cva([styles.root, styles.invalid], {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.sizeLarge,\n      middle: styles.sizeMiddle,\n      small: styles.sizeSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;kBAEK,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;;;;;;;;;;eAeG,OAAO,qBAAqB;;;CAGzC,SAAS,GAAG;;sBAEQ,OAAO,WAAW;;;wBAGhB,OAAO,WAAW;gCACV,OAAO,aAAa;;;;CAIlD,UAAU,GAAG;wBACS,OAAO,qBAAqB;kBAClC,OAAO,iBAAiB;;;sBAGpB,OAAO,YAAY;;;;sBAInB,OAAO,aAAa;8BACZ,OAAO,eAAe;;;CAGlD,MAAM,GAAG;;;;;;;;;;qBAUU,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;yBAGL,OAAO,cAAc;2BACnB,OAAO,cAAc;yBACvB,OAAO,cAAc;;;;;eAK/B,OAAO,oBAAoB;;;;CAIxC,QAAQA,cAAkB;CAC1B,WAAW,GAAG;cACF,cAAc,MAAM;qBACb,OAAO,eAAe;;;CAGzC,YAAY,GAAG;cACH,cAAc,OAAO;;CAEjC,WAAW,GAAG;cACF,cAAc,MAAM;;qBAEb,OAAO,eAAe;;;CAGzC,eAAe,GAAG;;;;;;;;;;;;aAYP,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;;;;;;CAQ9B,gBAAgB,GAAG;;;;;;;;qCAQgB,OAAO,qBAAqB;;CAE/D,aAAa,GAAG;;;CAGhB,SAAS,GAAG;;aAED,cAAc,OAAO;;;;CAIhC,SAAS,GAAG;;;;;CAKZ,gBAAgB,GAAG;;;;;;;;;;;aAWR,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;;;;;;;;CAWb,kBAAkB,GAAG;;;;;CAKrB,gBAAgB,GAAG;;;;;CAKpB,EAAE;AAEH,MAAa,eAAe,IAAI,CAAC,OAAO,MAAM,OAAO,QAAQ,EAAE;CAC7D,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACF;CACF,CAAC"}

package/es/base-ui/Input/type.d.mts

@@ -0,0 +1,122 @@
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+import { Input } from "@base-ui/react/input";
+import { NumberField } from "@base-ui/react/number-field";
+import { OTPField } from "@base-ui/react/otp-field";
+
+//#region src/base-ui/Input/type.d.ts
+type InputVariant = 'filled' | 'outlined' | 'borderless';
+type InputSize = 'small' | 'middle' | 'large';
+interface InputClassNames {
+  input?: string;
+  prefix?: string;
+  suffix?: string;
+}
+interface InputStyles {
+  input?: CSSProperties;
+  prefix?: CSSProperties;
+  suffix?: CSSProperties;
+}
+type BaseInputProps = Omit<ComponentProps<typeof Input>, 'size' | 'prefix' | 'render' | 'className' | 'style'>;
+interface InputProps extends BaseInputProps {
+  className?: string;
+  /**
+   * Custom class names for each part
+   */
+  classNames?: InputClassNames;
+  /**
+   * Prefix node rendered before the input
+   */
+  prefix?: ReactNode;
+  /**
+   * Reference to the input element
+   */
+  ref?: Ref<HTMLInputElement>;
+  /**
+   * Apply lobe shadow style
+   */
+  shadow?: boolean;
+  /**
+   * Size of the input
+   * @default 'middle'
+   */
+  size?: InputSize;
+  style?: CSSProperties;
+  /**
+   * Custom styles for each part
+   */
+  styles?: InputStyles;
+  /**
+   * Suffix node rendered after the input
+   */
+  suffix?: ReactNode;
+  /**
+   * Visual variant, defaults to `filled` in dark mode and `outlined` in light mode
+   */
+  variant?: InputVariant;
+}
+interface InputPasswordProps extends Omit<InputProps, 'type'> {
+  /**
+   * Show the eye toggle button
+   * @default true
+   */
+  visibilityToggle?: boolean;
+}
+type BaseNumberFieldProps = Omit<ComponentProps<typeof NumberField.Root>, 'className' | 'style' | 'render' | 'onValueChange' | 'children'>;
+interface InputNumberProps extends BaseNumberFieldProps {
+  /**
+   * Change value on wheel scrub
+   */
+  changeOnWheel?: boolean;
+  className?: string;
+  classNames?: Pick<InputClassNames, 'input'>;
+  /**
+   * Show increment/decrement buttons
+   * @default true
+   */
+  controls?: boolean;
+  onChange?: (value: number | null) => void;
+  placeholder?: string;
+  ref?: Ref<HTMLInputElement>;
+  shadow?: boolean;
+  size?: InputSize;
+  style?: CSSProperties;
+  styles?: Pick<InputStyles, 'input'>;
+  variant?: InputVariant;
+}
+type BaseOTPFieldProps = Omit<ComponentProps<typeof OTPField.Root>, 'className' | 'style' | 'render' | 'onValueChange' | 'children' | 'length'>;
+interface InputOTPProps extends BaseOTPFieldProps {
+  className?: string;
+  classNames?: Pick<InputClassNames, 'input'>;
+  /**
+   * Number of cells
+   * @default 6
+   */
+  length?: number;
+  onChange?: (value: string) => void;
+  shadow?: boolean;
+  size?: InputSize;
+  style?: CSSProperties;
+  styles?: Pick<InputStyles, 'input'>;
+  variant?: InputVariant;
+}
+type TextAreaAutoSize = boolean | {
+  maxRows?: number;
+  minRows?: number;
+};
+interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'prefix'>, Pick<InputProps, 'shadow' | 'variant'> {
+  /**
+   * Auto grow with content, optionally bounded by minRows/maxRows
+   */
+  autoSize?: TextAreaAutoSize;
+  classNames?: Pick<InputClassNames, 'input'>;
+  ref?: Ref<HTMLTextAreaElement>;
+  /**
+   * Allow manual resize
+   * @default false
+   */
+  resize?: boolean;
+  styles?: Pick<InputStyles, 'input'>;
+}
+//#endregion
+export { InputClassNames, InputNumberProps, InputOTPProps, InputPasswordProps, InputProps, InputSize, InputStyles, InputVariant, TextAreaAutoSize, TextAreaProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Select/style.mjs

@@ -1,4 +1,5 @@
 import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { controlHeight } from "../controlSize.mjs";
 import { createStaticStyles, cx } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Select/style.ts
@@ -251,7 +252,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	triggerLarge: css`
-    min-height: 40px;
+    min-height: ${controlHeight.large}px;
     padding-block: 6px;
     padding-inline: 12px;
 
@@ -259,7 +260,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     line-height: 24px;
   `,
 	triggerMiddle: css`
-    min-height: 32px;
+    min-height: ${controlHeight.middle}px;
     padding-block: 4px;
     padding-inline: 11px;
 
@@ -267,7 +268,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     line-height: 20px;
   `,
 	triggerSmall: css`
-    min-height: 24px;
+    min-height: ${controlHeight.small}px;
     padding-block: 0;
     padding-inline: 8px;