@jinmi/ui 0.0.0-stage → 6.0.1

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';\r\n\r\nimport { OTPField } from '@base-ui/react/otp-field';\r\nimport { cx, useThemeMode } from 'antd-style';\r\nimport { memo } from 'react';\r\n\r\nimport { rootVariants, styles } from './style';\r\nimport type { InputOTPProps } from './type';\r\n\r\nconst InputOTP = memo<InputOTPProps>(\r\n  ({\r\n    className,\r\n    classNames,\r\n    styles: customStyles,\r\n    style,\r\n    variant,\r\n    shadow,\r\n    size = 'middle',\r\n    length = 6,\r\n    onChange,\r\n    ...rest\r\n  }) => {\r\n    const { isDarkMode } = useThemeMode();\r\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\r\n\r\n    return (\r\n      <OTPField.Root\r\n        className={cx(styles.otpRoot, className)}\r\n        length={length}\r\n        style={style}\r\n        onValueChange={onChange}\r\n        {...rest}\r\n      >\r\n        {Array.from({ length }, (_, index) => (\r\n          <OTPField.Input\r\n            key={index}\r\n            style={customStyles?.input}\r\n            className={cx(\r\n              rootVariants({ shadow, size, variant: mergedVariant }),\r\n              styles.otpCell,\r\n              classNames?.input,\r\n            )}\r\n          />\r\n        ))}\r\n      </OTPField.Root>\r\n    );\r\n  },\r\n);\r\n\r\nInputOTP.displayName = 'InputOTP';\r\n\r\nexport default InputOTP;\r\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,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,OACE,oBAAC,SAAS,MAAV;EACE,WAAW,GAAG,OAAO,SAAS,SAAS;EAC/B;EACD;EACP,eAAe;EACf,GAAI;EAEH,UAAA,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,UAC1B,oBAAC,SAAS,OAAV;GAEE,OAAO,cAAc;GACrB,WAAW,GACT,aAAa;IAAE;IAAQ;IAAM,SAAS;GAAc,CAAC,GACrD,OAAO,SACP,YAAY,KACd;EACD,GAPM,KAON,CACF;CACY,CAAA;AAEnB,CACF;AAEA,SAAS,cAAc"}

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

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

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

@@ -0,0 +1,32 @@
+"use client";
+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 { 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_default, {
+		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";
+var InputPassword_default = Object.assign(InputPassword, { formBinding: { emptyValue: "" } });
+//#endregion
+export { InputPassword_default as default };
+
+//# sourceMappingURL=InputPassword.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputPassword.mjs","names":["Input"],"sources":["../../../src/base-ui/Input/InputPassword.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Eye, EyeOff } from 'lucide-react';\r\nimport { memo, useState } from 'react';\r\n\r\nimport Icon from '@/Icon';\r\n\r\nimport Input from './Input';\r\nimport { styles } from './style';\r\nimport type { InputPasswordProps } from './type';\r\n\r\nconst InputPassword = memo<InputPasswordProps>(({ visibilityToggle = true, suffix, ...rest }) => {\r\n  const [visible, setVisible] = useState(false);\r\n\r\n  return (\r\n    <Input\r\n      type={visible ? 'text' : 'password'}\r\n      suffix={\r\n        <>\r\n          {suffix}\r\n          {visibilityToggle && (\r\n            <button\r\n              aria-label={visible ? 'Hide password' : 'Show password'}\r\n              className={styles.passwordToggle}\r\n              tabIndex={-1}\r\n              type={'button'}\r\n              onClick={() => setVisible((v) => !v)}\r\n            >\r\n              <Icon icon={visible ? Eye : EyeOff} size={16} />\r\n            </button>\r\n          )}\r\n        </>\r\n      }\r\n      {...rest}\r\n    />\r\n  );\r\n});\r\n\r\nInputPassword.displayName = 'InputPassword';\r\n\r\nexport default Object.assign(InputPassword, { formBinding: { emptyValue: '' } as const });\r\n"],"mappings":";;;;;;;;AAWA,MAAM,gBAAgB,MAA0B,EAAE,mBAAmB,MAAM,QAAQ,GAAG,WAAW;CAC/F,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,OACE,oBAACA,eAAD;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,CAAC;GAEnC,UAAA,oBAAC,MAAD;IAAM,MAAM,UAAU,MAAM;IAAQ,MAAM;GAAK,CAAA;EACzC,CAAA,CAEV,EAAA,CAAA;EAEJ,GAAI;CACL,CAAA;AAEL,CAAC;AAED,cAAc,cAAc;AAE5B,IAAA,wBAAe,OAAO,OAAO,eAAe,EAAE,aAAa,EAAE,YAAY,GAAG,EAAW,CAAC"}

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

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

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

@@ -0,0 +1,81 @@
+"use client";
+import { rootVariants, 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 { cx, useThemeMode } from "antd-style";
+import { useMergeRefs } from "react-merge-refs";
+import { Field } from "@base-ui/react/field";
+//#region src/base-ui/Input/TextArea.tsx
+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();
+	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,
+		style: {
+			...cssVariables,
+			...style
+		},
+		className: cx(rootVariants({
+			shadow,
+			variant: mergedVariant
+		}), styles.textarea, autoSize && styles.textareaAutoSize, resize && styles.textareaResize, showCount && styles.textareaWithCount, className),
+		children: [
+			/* @__PURE__ */ jsx(Field.Control, {
+				className: cx(styles.input, classNames?.input),
+				disabled,
+				style: 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, {
+				className: styles.textareaClear,
+				onClear: () => {
+					clearNativeValue(textareaRef.current);
+					onClear?.();
+				}
+			}),
+			showCount && /* @__PURE__ */ jsx("span", {
+				className: styles.count,
+				"data-over": over ? "" : void 0,
+				children: maxLength === void 0 ? length : `${length} / ${maxLength}`
+			})
+		]
+	});
+});
+TextArea.displayName = "TextArea";
+var TextArea_default = Object.assign(TextArea, { formBinding: { emptyValue: "" } });
+//#endregion
+export { TextArea_default 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';\r\n\r\nimport { Field } from '@base-ui/react/field';\r\nimport { cx, useThemeMode } from 'antd-style';\r\nimport { type CSSProperties, memo, useMemo, useRef, useState } from 'react';\r\nimport { useMergeRefs } from 'react-merge-refs';\r\n\r\nimport ClearButton from './ClearButton';\r\nimport { clearNativeValue } from './clearNativeValue';\r\nimport { isPressEnter } from './pressEnter';\r\nimport { rootVariants, styles } from './style';\r\nimport type { TextAreaProps } from './type';\r\n\r\nconst textLength = (value: unknown) =>\r\n  value === undefined || value === null ? 0 : Array.from(String(value)).length;\r\n\r\nconst TextArea = memo<TextAreaProps>(\r\n  ({\r\n    ref,\r\n    className,\r\n    classNames,\r\n    styles: customStyles,\r\n    style,\r\n    variant,\r\n    shadow,\r\n    autoSize,\r\n    resize = false,\r\n    disabled,\r\n    readOnly,\r\n    allowClear,\r\n    onClear,\r\n    onPressEnter,\r\n    onKeyDown,\r\n    onChange,\r\n    showCount,\r\n    maxLength,\r\n    value,\r\n    defaultValue,\r\n    ...rest\r\n  }) => {\r\n    const { isDarkMode } = useThemeMode();\r\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\r\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\r\n    const mergedRef = useMergeRefs([ref, textareaRef]);\r\n    const [innerLength, setInnerLength] = useState(() => textLength(value ?? defaultValue));\r\n    const length = value === undefined ? innerLength : textLength(value);\r\n    const showClear = allowClear && length > 0 && !disabled && !readOnly;\r\n    const over = maxLength !== undefined && length > maxLength;\r\n\r\n    const cssVariables = useMemo<CSSProperties>(() => {\r\n      if (typeof autoSize !== 'object') return {};\r\n      return {\r\n        '--textarea-max-height': autoSize.maxRows ? `calc(1.5em * ${autoSize.maxRows})` : undefined,\r\n        '--textarea-min-rows': autoSize.minRows,\r\n      } as CSSProperties;\r\n    }, [autoSize]);\r\n\r\n    return (\r\n      <div\r\n        data-disabled={disabled ? '' : undefined}\r\n        style={{ ...cssVariables, ...style }}\r\n        className={cx(\r\n          rootVariants({ shadow, variant: mergedVariant }),\r\n          styles.textarea,\r\n          autoSize && styles.textareaAutoSize,\r\n          resize && styles.textareaResize,\r\n          showCount && styles.textareaWithCount,\r\n          className,\r\n        )}\r\n      >\r\n        <Field.Control\r\n          className={cx(styles.input, classNames?.input)}\r\n          disabled={disabled}\r\n          style={customStyles?.input}\r\n          render={\r\n            <textarea\r\n              defaultValue={defaultValue}\r\n              maxLength={maxLength}\r\n              readOnly={readOnly}\r\n              ref={mergedRef}\r\n              value={value}\r\n              onChange={(event) => {\r\n                setInnerLength(textLength(event.currentTarget.value));\r\n                onChange?.(event);\r\n              }}\r\n              onKeyDown={(event) => {\r\n                if (isPressEnter(event)) onPressEnter?.(event);\r\n                onKeyDown?.(event);\r\n              }}\r\n              {...rest}\r\n            />\r\n          }\r\n        />\r\n        {showClear && (\r\n          <ClearButton\r\n            className={styles.textareaClear}\r\n            onClear={() => {\r\n              clearNativeValue(textareaRef.current);\r\n              onClear?.();\r\n            }}\r\n          />\r\n        )}\r\n        {showCount && (\r\n          <span className={styles.count} data-over={over ? '' : undefined}>\r\n            {maxLength === undefined ? length : `${length} / ${maxLength}`}\r\n          </span>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nTextArea.displayName = 'TextArea';\r\n\r\nexport default Object.assign(TextArea, { formBinding: { emptyValue: '' } as const });\r\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,cAAc,UAClB,UAAU,KAAA,KAAa,UAAU,OAAO,IAAI,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;AAExE,MAAM,WAAW,MACd,EACC,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,EAAE,eAAe,aAAa;CACpC,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;CAEjD,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;CAEb,OACE,qBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,OAAO;GAAE,GAAG;GAAc,GAAG;EAAM;EACnC,WAAW,GACT,aAAa;GAAE;GAAQ,SAAS;EAAc,CAAC,GAC/C,OAAO,UACP,YAAY,OAAO,kBACnB,UAAU,OAAO,gBACjB,aAAa,OAAO,mBACpB,SACF;EAVF,UAAA;GAYE,oBAAC,MAAM,SAAP;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IACnC;IACV,OAAO,cAAc;IACrB,QACE,oBAAC,YAAD;KACgB;KACH;KACD;KACV,KAAK;KACE;KACP,WAAW,UAAU;MACnB,eAAe,WAAW,MAAM,cAAc,KAAK,CAAC;MACpD,WAAW,KAAK;KAClB;KACA,YAAY,UAAU;MACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;MAC7C,YAAY,KAAK;KACnB;KACA,GAAI;IACL,CAAA;GAEJ,CAAA;GACA,aACC,oBAAC,aAAD;IACE,WAAW,OAAO;IAClB,eAAe;KACb,iBAAiB,YAAY,OAAO;KACpC,UAAU;IACZ;GACD,CAAA;GAEF,aACC,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,aAAW,OAAO,KAAK,KAAA;IACnD,UAAA,cAAc,KAAA,IAAY,SAAS,GAAG,OAAO,KAAK;GAC/C,CAAA;EAEL;;AAET,CACF;AAEA,SAAS,cAAc;AAEvB,IAAA,mBAAe,OAAO,OAAO,UAAU,EAAE,aAAa,EAAE,YAAY,GAAG,EAAW,CAAC"}

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

@@ -0,0 +1,12 @@
+//#region src/base-ui/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/base-ui/Input/clearNativeValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"clearNativeValue.mjs","names":[],"sources":["../../../src/base-ui/Input/clearNativeValue.ts"],"sourcesContent":["export const clearNativeValue = (element: HTMLInputElement | HTMLTextAreaElement | null) => {\r\n  if (!element) return;\r\n  const prototype =\r\n    element instanceof HTMLTextAreaElement\r\n      ? HTMLTextAreaElement.prototype\r\n      : HTMLInputElement.prototype;\r\n  Object.getOwnPropertyDescriptor(prototype, 'value')?.set?.call(element, '');\r\n  element.dispatchEvent(new Event('input', { bubbles: true }));\r\n  element.focus();\r\n};\r\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/base-ui/Input/index.d.mts

@@ -0,0 +1,8 @@
+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 { rootVariants, styles } 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, styles as inputStyles, rootVariants as inputVariants };

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

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

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

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

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

@@ -0,0 +1,38 @@
+//#region src/base-ui/Input/style.d.ts
+declare const styles: {
+  clear: string;
+  count: string;
+  textareaClear: string;
+  textareaWithCount: string;
+  borderless: string;
+  filled: string;
+  input: string;
+  invalid: string;
+  outlined: string;
+  root: string;
+  shadow: string;
+  sizeLarge: string;
+  sizeMiddle: string;
+  sizeSmall: string;
+  numberControl: string;
+  numberControlLarge: string;
+  numberControlSmall: string;
+  numberControls: string;
+  numberControlsSmall: 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?: "large" | "middle" | "small" | null | undefined;
+  variant?: "filled" | "outlined" | "borderless" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { rootVariants, styles };
+//# sourceMappingURL=style.d.mts.map

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

@@ -0,0 +1,311 @@
+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 }) => ({
+	clear: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+
+    color: ${cssVar.colorBgContainer};
+
+    visibility: hidden;
+    background: ${cssVar.colorTextQuaternary};
+
+    &:hover {
+      background: ${cssVar.colorTextTertiary};
+    }
+  `,
+	count: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block-end: 6px;
+    inset-inline-end: 8px;
+
+    display: inline-flex;
+    align-items: center;
+
+    height: 20px;
+    padding-inline: 8px;
+    border-radius: 999px;
+
+    font-size: 11px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: ${cssVar.colorTextSecondary};
+
+    background: ${cssVar.colorFillTertiary};
+
+    &[data-over] {
+      color: ${cssVar.colorWhite};
+      background: ${cssVar.colorError};
+    }
+  `,
+	textareaClear: css`
+    position: absolute;
+    inset-block-start: 10px;
+    inset-inline-end: 10px;
+  `,
+	textareaWithCount: css`
+    padding-block-end: 30px;
+  `,
+	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};
+    }
+
+    /* the root shows focus via its border; outrank global :focus-visible rings */
+    &:focus-visible {
+      outline: none;
+    }
+  `,
+	invalid: css`
+    &:has([data-invalid], [aria-invalid='true']) {
+      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;
+    }
+
+    &:hover [data-jinmi-input-clear],
+    &:focus-within [data-jinmi-input-clear] {
+      visibility: visible;
+    }
+  `,
+	shadow: staticStylish.shadow,
+	sizeLarge: css`
+    min-height: ${controlHeight.large}px;
+    border-radius: ${cssVar.borderRadiusLG};
+    font-size: 16px;
+  `,
+	sizeMiddle: css`
+    min-height: ${controlHeight.middle}px;
+  `,
+	sizeSmall: css`
+    min-height: ${controlHeight.small}px;
+    padding-inline: 8px;
+    border-radius: ${cssVar.borderRadiusSM};
+    font-size: 12px;
+  `,
+	numberControl: css`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 20px;
+    height: 13px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: none;
+    outline: none;
+
+    transition:
+      color 150ms ${cssVar.motionEaseOut},
+      background 150ms ${cssVar.motionEaseOut};
+
+    &:hover:not(:disabled) {
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillSecondary};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+  `,
+	numberControlLarge: css`
+    width: 22px;
+    height: 15px;
+  `,
+	numberControlSmall: css`
+    width: 16px;
+    height: 10px;
+    border-radius: 3px;
+  `,
+	numberControls: css`
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    margin-inline-end: -6px;
+  `,
+	numberControlsSmall: css`
+    margin-inline-end: -4px;
+  `,
+	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`
+    position: relative;
+    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  clear: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 16px;\n    height: 16px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n\n    color: ${cssVar.colorBgContainer};\n\n    visibility: hidden;\n    background: ${cssVar.colorTextQuaternary};\n\n    &:hover {\n      background: ${cssVar.colorTextTertiary};\n    }\n  `,\n  count: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-block-end: 6px;\n    inset-inline-end: 8px;\n\n    display: inline-flex;\n    align-items: center;\n\n    height: 20px;\n    padding-inline: 8px;\n    border-radius: 999px;\n\n    font-size: 11px;\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorFillTertiary};\n\n    &[data-over] {\n      color: ${cssVar.colorWhite};\n      background: ${cssVar.colorError};\n    }\n  `,\n  textareaClear: css`\n    position: absolute;\n    inset-block-start: 10px;\n    inset-inline-end: 10px;\n  `,\n  textareaWithCount: css`\n    padding-block-end: 30px;\n  `,\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    /* the root shows focus via its border; outrank global :focus-visible rings */\n    &:focus-visible {\n      outline: none;\n    }\n  `,\n  invalid: css`\n    &:has([data-invalid], [aria-invalid='true']) {\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    &:hover [data-jinmi-input-clear],\n    &:focus-within [data-jinmi-input-clear] {\n      visibility: visible;\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  sizeLarge: css`\n    min-height: ${controlHeight.large}px;\n    border-radius: ${cssVar.borderRadiusLG};\n    font-size: 16px;\n  `,\n  sizeMiddle: css`\n    min-height: ${controlHeight.middle}px;\n  `,\n  sizeSmall: css`\n    min-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    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 13px;\n    margin: 0;\n    padding: 0;\n    border: none;\n    border-radius: 4px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: none;\n    outline: none;\n\n    transition:\n      color 150ms ${cssVar.motionEaseOut},\n      background 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.3;\n    }\n  `,\n  numberControlLarge: css`\n    width: 22px;\n    height: 15px;\n  `,\n  numberControlSmall: css`\n    width: 16px;\n    height: 10px;\n    border-radius: 3px;\n  `,\n  numberControls: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    margin-inline-end: -6px;\n  `,\n  numberControlsSmall: css`\n    margin-inline-end: -4px;\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    position: relative;\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,OAAO,GAAG;;;;;;;;;;;;;;aAcC,OAAO,iBAAiB;;;kBAGnB,OAAO,oBAAoB;;;oBAGzB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,mBAAmB;;kBAErB,OAAO,kBAAkB;;;eAG5B,OAAO,WAAW;oBACb,OAAO,WAAW;;;CAGpC,eAAe,GAAG;;;;;CAKlB,mBAAmB,GAAG;;;CAGtB,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;kBAEK,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;;;;;;;;;;eAeG,OAAO,qBAAqB;;;;;;;;CAQzC,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;;;;;;;;;CASxC,QAAQA,cAAkB;CAC1B,WAAW,GAAG;kBACE,cAAc,MAAM;qBACjB,OAAO,eAAe;;;CAGzC,YAAY,GAAG;kBACC,cAAc,OAAO;;CAErC,WAAW,GAAG;kBACE,cAAc,MAAM;;qBAEjB,OAAO,eAAe;;;CAGzC,eAAe,GAAG;;;;;;;;;;;;;;aAcP,OAAO,kBAAkB;;;;;;oBAMlB,OAAO,cAAc;yBAChB,OAAO,cAAc;;;eAG/B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;;;CAQ5C,oBAAoB,GAAG;;;;CAIvB,oBAAoB,GAAG;;;;;CAKvB,gBAAgB,GAAG;;;;;;CAMnB,qBAAqB,GAAG;;;CAGxB,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;;;;;;;;;;;;CAYb,kBAAkB,GAAG;;;;;CAKrB,gBAAgB,GAAG;;;;;AAKrB,EAAE;AAEF,MAAa,eAAe,IAAI,CAAC,OAAO,MAAM,OAAO,OAAO,GAAG;CAC7D,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}