@lobehub/ui 5.51.2 → 5.53.0

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

@@ -1,13 +1,24 @@
 "use client";
 import { rootVariants, styles } from "./style.mjs";
-import { memo, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+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 TextArea = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, autoSize, resize = false, disabled, ...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();
 	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 {
@@ -15,7 +26,7 @@ const TextArea = memo(({ ref, className, classNames, styles: customStyles, style
 			"--textarea-min-rows": autoSize.minRows
 		};
 	}, [autoSize]);
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		"data-disabled": disabled ? "" : void 0,
 		style: {
 			...cssVariables,
@@ -24,16 +35,42 @@ const TextArea = memo(({ ref, className, classNames, styles: customStyles, 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
+		}), 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
+				})
 			}),
-			style: customStyles?.input
-		})
+			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";

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

@@ -1 +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,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,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,oBAAC,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,SACF;EAEA,UAAA,oBAAC,MAAM,SAAP;GACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GACnC;GACV,QAAQ,oBAAC,YAAD;IAAe;IAAK,GAAI;GAAO,CAAA;GACvC,OAAO,cAAc;EACtB,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}
+{"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, useRef, useState } from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, 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        style={{ ...cssVariables, ...style }}\n        className={cx(\n          rootVariants({ shadow, variant: mergedVariant }),\n          styles.textarea,\n          autoSize && styles.textareaAutoSize,\n          resize && styles.textareaResize,\n          showCount && styles.textareaWithCount,\n          className,\n        )}\n      >\n        <Field.Control\n          className={cx(styles.input, classNames?.input)}\n          disabled={disabled}\n          style={customStyles?.input}\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            className={styles.textareaClear}\n            onClear={() => {\n              clearNativeValue(textareaRef.current);\n              onClear?.();\n            }}\n          />\n        )}\n        {showCount && (\n          <span className={styles.count} data-over={over ? '' : undefined}>\n            {maxLength === undefined ? length : `${length} / ${maxLength}`}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\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"}

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) => {\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/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';\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/base-ui/Input/style.d.mts

@@ -1,5 +1,9 @@
 //#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;
@@ -24,7 +28,7 @@ declare const styles: {
 declare const rootVariants: (props?: ({
   shadow?: boolean | null | undefined;
   size?: "large" | "middle" | "small" | null | undefined;
-  variant?: "borderless" | "filled" | "outlined" | null | undefined;
+  variant?: "filled" | "borderless" | "outlined" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 export { rootVariants, styles };

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

@@ -4,6 +4,63 @@ 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;
@@ -35,7 +92,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	invalid: css`
-    &:has([data-invalid]) {
+    &:has([data-invalid], [aria-invalid='true']) {
       border-color: ${cssVar.colorError};
 
       &:focus-within {
@@ -83,18 +140,23 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       color: ${cssVar.colorTextQuaternary};
       opacity: 0.66;
     }
+
+    &:hover [data-lobe-input-clear],
+    &:focus-within [data-lobe-input-clear] {
+      visibility: visible;
+    }
   `,
 	shadow: staticStylish.shadow,
 	sizeLarge: css`
-    height: ${controlHeight.large}px;
+    min-height: ${controlHeight.large}px;
     border-radius: ${cssVar.borderRadiusLG};
     font-size: 16px;
   `,
 	sizeMiddle: css`
-    height: ${controlHeight.middle}px;
+    min-height: ${controlHeight.middle}px;
   `,
 	sizeSmall: css`
-    height: ${controlHeight.small}px;
+    min-height: ${controlHeight.small}px;
     padding-inline: 8px;
     border-radius: ${cssVar.borderRadiusSM};
     font-size: 12px;
@@ -180,6 +242,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     color: ${cssVar.colorTextTertiary};
   `,
 	textarea: css`
+    position: relative;
     height: auto;
     padding-block: 8px;
 

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

@@ -1 +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;;;;;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"}
+{"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  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-lobe-input-clear],\n    &:focus-within [data-lobe-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    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    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;;;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;;;;;;;;;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;;;;;;;;;;;;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;;;;;;;;;;;;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"}

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

@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+import { CSSProperties, ComponentProps, KeyboardEvent, 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";
@@ -17,11 +17,14 @@ interface InputStyles {
 }
 type BaseInputProps = Omit<ComponentProps<typeof Input>, 'size' | 'prefix' | 'render' | 'className' | 'style'>;
 interface InputProps extends BaseInputProps {
+  allowClear?: boolean;
   className?: string;
   /**
    * Custom class names for each part
    */
   classNames?: InputClassNames;
+  onClear?: () => void;
+  onPressEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
   /**
    * Prefix node rendered before the input
    */
@@ -60,7 +63,7 @@ interface InputPasswordProps extends Omit<InputProps, 'type'> {
    */
   visibilityToggle?: boolean;
 }
-type BaseNumberFieldProps = Omit<ComponentProps<typeof NumberField.Root>, 'className' | 'style' | 'render' | 'onValueChange' | 'children'>;
+type BaseNumberFieldProps = Omit<ComponentProps<typeof NumberField.Root>, 'className' | 'style' | 'render' | 'onValueChange' | 'children' | 'prefix'>;
 interface InputNumberProps extends BaseNumberFieldProps {
   /**
    * Change value on wheel scrub
@@ -74,12 +77,16 @@ interface InputNumberProps extends BaseNumberFieldProps {
    */
   controls?: boolean;
   onChange?: (value: number | null) => void;
+  onPressEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
+  precision?: number;
+  prefix?: ReactNode;
   ref?: Ref<HTMLInputElement>;
   shadow?: boolean;
   size?: InputSize;
   style?: CSSProperties;
   styles?: Pick<InputStyles, 'input'>;
+  suffix?: ReactNode;
   variant?: InputVariant;
 }
 type BaseOTPFieldProps = Omit<ComponentProps<typeof OTPField.Root>, 'className' | 'style' | 'render' | 'onValueChange' | 'children' | 'length'>;
@@ -103,17 +110,21 @@ type TextAreaAutoSize = boolean | {
   minRows?: number;
 };
 interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'prefix'>, Pick<InputProps, 'shadow' | 'variant'> {
+  allowClear?: boolean;
   /**
    * Auto grow with content, optionally bounded by minRows/maxRows
    */
   autoSize?: TextAreaAutoSize;
   classNames?: Pick<InputClassNames, 'input'>;
+  onClear?: () => void;
+  onPressEnter?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
   ref?: Ref<HTMLTextAreaElement>;
   /**
    * Allow manual resize
    * @default false
    */
   resize?: boolean;
+  showCount?: boolean;
   styles?: Pick<InputStyles, 'input'>;
 }
 //#endregion

package/es/base-ui/List/List.d.mts

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

package/es/base-ui/List/List.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { styles } from "./style.mjs";
+import ListRow from "./ListRow.mjs";
+import { memo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/List/List.tsx
+const isDivider = (item) => item.type === "divider";
+const variantClass = {
+	borderless: void 0,
+	filled: styles.filled,
+	outlined: styles.outlined
+};
+const List = memo(({ activeKey, className, classNames, compact = false, defaultActiveKey, items, onActiveChange, onClick, ref, selectable = false, styles: customStyles, variant = "borderless", ...rest }) => {
+	const [innerKey, setInnerKey] = useState(defaultActiveKey);
+	const currentKey = activeKey === void 0 ? innerKey : activeKey;
+	const handleSelect = (item, domEvent) => {
+		const info = {
+			domEvent,
+			item,
+			key: item.key
+		};
+		item.onClick?.(info);
+		onClick?.(info);
+		if (!selectable || item.key === currentKey) return;
+		if (activeKey === void 0) setInnerKey(item.key);
+		onActiveChange?.(item.key);
+	};
+	return /* @__PURE__ */ jsx("ul", {
+		className: cx(styles.root, variantClass[variant], compact && styles.compact, className),
+		ref,
+		role: "list",
+		...rest,
+		children: items.map((item, index) => isDivider(item) ? /* @__PURE__ */ jsx("li", {
+			className: styles.divider,
+			role: "separator"
+		}, item.key ?? `divider-${index}`) : /* @__PURE__ */ jsx(ListRow, {
+			active: currentKey !== void 0 && currentKey !== null && item.key === currentKey,
+			classNames,
+			item,
+			styles: customStyles,
+			onSelect: handleSelect
+		}, item.key))
+	});
+});
+List.displayName = "List";
+//#endregion
+export { List as default };
+
+//# sourceMappingURL=List.mjs.map

package/es/base-ui/List/List.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.mjs","names":[],"sources":["../../../src/base-ui/List/List.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type Key, memo, type MouseEvent, useState } from 'react';\n\nimport ListRow from './ListRow';\nimport { styles } from './style';\nimport type { ListDividerType, ListItem, ListItemType, ListProps } from './type';\n\nconst isDivider = (item: ListItem): item is ListDividerType => item.type === 'divider';\n\nconst variantClass = {\n  borderless: undefined,\n  filled: styles.filled,\n  outlined: styles.outlined,\n};\n\nconst List = memo<ListProps>(\n  ({\n    activeKey,\n    className,\n    classNames,\n    compact = false,\n    defaultActiveKey,\n    items,\n    onActiveChange,\n    onClick,\n    ref,\n    selectable = false,\n    styles: customStyles,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [innerKey, setInnerKey] = useState<Key | undefined>(defaultActiveKey);\n    const currentKey = activeKey === undefined ? innerKey : activeKey;\n\n    const handleSelect = (item: ListItemType, domEvent: MouseEvent<HTMLElement>) => {\n      const info = { domEvent, item, key: item.key };\n      item.onClick?.(info);\n      onClick?.(info);\n\n      if (!selectable || item.key === currentKey) return;\n      if (activeKey === undefined) setInnerKey(item.key);\n      onActiveChange?.(item.key);\n    };\n\n    return (\n      <ul\n        className={cx(styles.root, variantClass[variant], compact && styles.compact, className)}\n        ref={ref}\n        role=\"list\"\n        {...rest}\n      >\n        {items.map((item, index) =>\n          isDivider(item) ? (\n            <li className={styles.divider} key={item.key ?? `divider-${index}`} role=\"separator\" />\n          ) : (\n            <ListRow\n              active={currentKey !== undefined && currentKey !== null && item.key === currentKey}\n              classNames={classNames}\n              item={item}\n              key={item.key}\n              styles={customStyles}\n              onSelect={handleSelect}\n            />\n          ),\n        )}\n      </ul>\n    );\n  },\n);\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":";;;;;;;AASA,MAAM,aAAa,SAA4C,KAAK,SAAS;AAE7E,MAAM,eAAe;CACnB,YAAY,KAAA;CACZ,QAAQ,OAAO;CACf,UAAU,OAAO;AACnB;AAEA,MAAM,OAAO,MACV,EACC,WACA,WACA,YACA,UAAU,OACV,kBACA,OACA,gBACA,SACA,KACA,aAAa,OACb,QAAQ,cACR,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAA0B,gBAAgB;CAC1E,MAAM,aAAa,cAAc,KAAA,IAAY,WAAW;CAExD,MAAM,gBAAgB,MAAoB,aAAsC;EAC9E,MAAM,OAAO;GAAE;GAAU;GAAM,KAAK,KAAK;EAAI;EAC7C,KAAK,UAAU,IAAI;EACnB,UAAU,IAAI;EAEd,IAAI,CAAC,cAAc,KAAK,QAAQ,YAAY;EAC5C,IAAI,cAAc,KAAA,GAAW,YAAY,KAAK,GAAG;EACjD,iBAAiB,KAAK,GAAG;CAC3B;CAEA,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,OAAO,MAAM,aAAa,UAAU,WAAW,OAAO,SAAS,SAAS;EACjF;EACL,MAAK;EACL,GAAI;EAEH,UAAA,MAAM,KAAK,MAAM,UAChB,UAAU,IAAI,IACZ,oBAAC,MAAD;GAAI,WAAW,OAAO;GAA8C,MAAK;EAAa,GAAlD,KAAK,OAAO,WAAW,OAA2B,IAEtF,oBAAC,SAAD;GACE,QAAQ,eAAe,KAAA,KAAa,eAAe,QAAQ,KAAK,QAAQ;GAC5D;GACN;GAEN,QAAQ;GACR,UAAU;EACX,GAHM,KAAK,GAGX,CAEL;CACE,CAAA;AAER,CACF;AAEA,KAAK,cAAc"}

package/es/base-ui/List/ListRow.mjs

@@ -0,0 +1,74 @@
+"use client";
+import A from "../../A/index.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/List/ListRow.tsx
+const ListRow = memo(({ active, classNames, item, onSelect, styles: customStyles }) => {
+	const { actions, avatar, danger, description, disabled, extra, href, icon, label, showAction } = item;
+	const handleClick = (event) => {
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+		onSelect(item, event);
+	};
+	const rowClassName = cx(styles.row, active && styles.active, danger && styles.danger, disabled && styles.disabled, classNames?.item, item.className);
+	const rowStyle = {
+		...customStyles?.item,
+		...item.style
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		avatar ?? (icon ? /* @__PURE__ */ jsx(Icon, {
+			icon,
+			size: 16
+		}) : null),
+		/* @__PURE__ */ jsxs("span", {
+			className: styles.body,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cx(styles.label, classNames?.label),
+				style: customStyles?.label,
+				children: label
+			}), description != null && /* @__PURE__ */ jsx("span", {
+				className: cx(styles.description, classNames?.description),
+				style: customStyles?.description,
+				children: description
+			})]
+		}),
+		extra != null && /* @__PURE__ */ jsx("span", {
+			className: cx(styles.extra, classNames?.extra),
+			style: customStyles?.extra,
+			children: extra
+		})
+	] });
+	return /* @__PURE__ */ jsxs("li", {
+		className: cx(styles.item, showAction && styles.showAction),
+		children: [href && !disabled ? /* @__PURE__ */ jsx(A, {
+			"aria-current": active ? "page" : void 0,
+			className: rowClassName,
+			href,
+			style: rowStyle,
+			onClick: handleClick,
+			children: content
+		}) : /* @__PURE__ */ jsx("button", {
+			"aria-current": active ? "true" : void 0,
+			"aria-disabled": disabled || void 0,
+			className: rowClassName,
+			style: rowStyle,
+			type: "button",
+			onClick: handleClick,
+			children: content
+		}), actions != null && /* @__PURE__ */ jsx("span", {
+			className: cx(styles.actions, classNames?.actions),
+			style: customStyles?.actions,
+			children: actions
+		})]
+	});
+});
+ListRow.displayName = "ListRow";
+//#endregion
+export { ListRow as default };
+
+//# sourceMappingURL=ListRow.mjs.map

package/es/base-ui/List/ListRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListRow.mjs","names":[],"sources":["../../../src/base-ui/List/ListRow.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, type MouseEvent } from 'react';\n\nimport A from '@/A';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { ListItemType, ListProps } from './type';\n\ninterface ListRowProps {\n  active: boolean;\n  classNames?: ListProps['classNames'];\n  item: ListItemType;\n  onSelect: (item: ListItemType, event: MouseEvent<HTMLElement>) => void;\n  styles?: ListProps['styles'];\n}\n\nconst ListRow = memo<ListRowProps>(\n  ({ active, classNames, item, onSelect, styles: customStyles }) => {\n    const { actions, avatar, danger, description, disabled, extra, href, icon, label, showAction } =\n      item;\n\n    const handleClick = (event: MouseEvent<HTMLElement>) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n      onSelect(item, event);\n    };\n\n    const rowClassName = cx(\n      styles.row,\n      active && styles.active,\n      danger && styles.danger,\n      disabled && styles.disabled,\n      classNames?.item,\n      item.className,\n    );\n    const rowStyle = { ...customStyles?.item, ...item.style };\n\n    const content = (\n      <>\n        {avatar ?? (icon ? <Icon icon={icon} size={16} /> : null)}\n        <span className={styles.body}>\n          <span className={cx(styles.label, classNames?.label)} style={customStyles?.label}>\n            {label}\n          </span>\n          {description != null && (\n            <span\n              className={cx(styles.description, classNames?.description)}\n              style={customStyles?.description}\n            >\n              {description}\n            </span>\n          )}\n        </span>\n        {extra != null && (\n          <span className={cx(styles.extra, classNames?.extra)} style={customStyles?.extra}>\n            {extra}\n          </span>\n        )}\n      </>\n    );\n\n    return (\n      <li className={cx(styles.item, showAction && styles.showAction)}>\n        {href && !disabled ? (\n          <A\n            aria-current={active ? 'page' : undefined}\n            className={rowClassName}\n            href={href}\n            style={rowStyle}\n            onClick={handleClick}\n          >\n            {content}\n          </A>\n        ) : (\n          <button\n            aria-current={active ? 'true' : undefined}\n            aria-disabled={disabled || undefined}\n            className={rowClassName}\n            style={rowStyle}\n            type=\"button\"\n            onClick={handleClick}\n          >\n            {content}\n          </button>\n        )}\n        {actions != null && (\n          <span className={cx(styles.actions, classNames?.actions)} style={customStyles?.actions}>\n            {actions}\n          </span>\n        )}\n      </li>\n    );\n  },\n);\n\nListRow.displayName = 'ListRow';\n\nexport default ListRow;\n"],"mappings":";;;;;;;;AAmBA,MAAM,UAAU,MACb,EAAE,QAAQ,YAAY,MAAM,UAAU,QAAQ,mBAAmB;CAChE,MAAM,EAAE,SAAS,QAAQ,QAAQ,aAAa,UAAU,OAAO,MAAM,MAAM,OAAO,eAChF;CAEF,MAAM,eAAe,UAAmC;EACtD,IAAI,UAAU;GACZ,MAAM,eAAe;GACrB;EACF;EACA,SAAS,MAAM,KAAK;CACtB;CAEA,MAAM,eAAe,GACnB,OAAO,KACP,UAAU,OAAO,QACjB,UAAU,OAAO,QACjB,YAAY,OAAO,UACnB,YAAY,MACZ,KAAK,SACP;CACA,MAAM,WAAW;EAAE,GAAG,cAAc;EAAM,GAAG,KAAK;CAAM;CAExD,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA;EACG,WAAW,OAAO,oBAAC,MAAD;GAAY;GAAM,MAAM;EAAK,CAAA,IAAI;EACpD,qBAAC,QAAD;GAAM,WAAW,OAAO;GAAxB,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA,GACL,eAAe,QACd,oBAAC,QAAD;IACE,WAAW,GAAG,OAAO,aAAa,YAAY,WAAW;IACzD,OAAO,cAAc;IAEpB,UAAA;GACG,CAAA,CAEJ;;EACL,SAAS,QACR,oBAAC,QAAD;GAAM,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GAAG,OAAO,cAAc;GACxE,UAAA;EACG,CAAA;CAER,EAAA,CAAA;CAGJ,OACE,qBAAC,MAAD;EAAI,WAAW,GAAG,OAAO,MAAM,cAAc,OAAO,UAAU;EAA9D,UAAA,CACG,QAAQ,CAAC,WACR,oBAAC,GAAD;GACE,gBAAc,SAAS,SAAS,KAAA;GAChC,WAAW;GACL;GACN,OAAO;GACP,SAAS;GAER,UAAA;EACA,CAAA,IAEH,oBAAC,UAAD;GACE,gBAAc,SAAS,SAAS,KAAA;GAChC,iBAAe,YAAY,KAAA;GAC3B,WAAW;GACX,OAAO;GACP,MAAK;GACL,SAAS;GAER,UAAA;EACK,CAAA,GAET,WAAW,QACV,oBAAC,QAAD;GAAM,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;GAAG,OAAO,cAAc;GAC5E,UAAA;EACG,CAAA,CAEN;;AAER,CACF;AAEA,QAAQ,cAAc"}

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

@@ -0,0 +1,3 @@
+import { ListClickInfo, ListDividerType, ListItem, ListItemType, ListProps, ListSemanticName } from "./type.mjs";
+import List from "./List.mjs";
+export { type ListClickInfo, type ListDividerType, type ListItem, type ListItemType, type ListProps, type ListSemanticName, List as default };