@hanwenbo/x-taro-ui 0.0.1

package/es/components/textarea/textarea.js

@@ -0,0 +1,342 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+/**
+ * Textarea Component
+ * x-mobile-ui aligned multiline field with Taro H5/WeApp adapters.
+ */
+
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Text, Textarea as TaroTextarea, View } from '@tarojs/components';
+import { useTokens, withOpacity } from "../../theme";
+import { classNames } from "../../utils";
+import { useConfigProvider } from "../configProvider";
+import { useTextareaColors, useTextareaTokens } from "./tokens";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function resolveNativeTextArea(nativeRef) {
+  var _candidate$querySelec, _ref;
+  if (!nativeRef || _typeof(nativeRef) !== 'object') return null;
+  var candidate = nativeRef;
+  var nested = (_candidate$querySelec = candidate.querySelector) === null || _candidate$querySelec === void 0 ? void 0 : _candidate$querySelec.call(candidate, 'textarea');
+  return (_ref = nested) !== null && _ref !== void 0 ? _ref : candidate;
+}
+function callNativeTextAreaMethod(nativeRef, method) {
+  var target = resolveNativeTextArea(nativeRef);
+  var callback = target === null || target === void 0 ? void 0 : target[method];
+  if (typeof callback === 'function') callback.call(target);
+}
+function resolveRowCount(value, fallback) {
+  return value !== undefined && Number.isFinite(value) ? Math.max(1, Math.floor(value)) : fallback;
+}
+function resolveMaxLength(maxLength) {
+  return maxLength !== undefined && Number.isFinite(maxLength) && maxLength >= 0 ? Math.floor(maxLength) : -1;
+}
+function truncateValue(value, maxLength) {
+  return maxLength >= 0 ? value.slice(0, maxLength) : value;
+}
+export var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _ref2;
+  var hasValueProp = Object.prototype.hasOwnProperty.call(props, 'value');
+  var value = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
+    placeholder = props.placeholder,
+    size = props.size,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
+    disabled = props.disabled,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    maxLength = props.maxLength,
+    _props$showCount = props.showCount,
+    showCount = _props$showCount === void 0 ? false : _props$showCount,
+    _props$autoHeight = props.autoHeight,
+    autoHeight = _props$autoHeight === void 0 ? false : _props$autoHeight,
+    _props$autoSize = props.autoSize,
+    autoSize = _props$autoSize === void 0 ? false : _props$autoSize,
+    _props$rows = props.rows,
+    rows = _props$rows === void 0 ? 2 : _props$rows,
+    controlledFocused = props.focused,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+    _props$error = props.error,
+    error = _props$error === void 0 ? false : _props$error,
+    onChange = props.onChange,
+    onInputChange = props.onInputChange,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onLineChange = props.onLineChange,
+    onCompositionStart = props.onCompositionStart,
+    onCompositionEnd = props.onCompositionEnd,
+    onConfirm = props.onConfirm,
+    name = props.name,
+    autoComplete = props.autoComplete,
+    nativeProps = props.nativeProps,
+    ariaLabel = props.ariaLabel,
+    _props$testID = props.testID,
+    testID = _props$testID === void 0 ? 'textarea' : _props$testID,
+    className = props.className,
+    style = props.style;
+  var config = useConfigProvider();
+  var _useTokens = useTokens(),
+    themeColors = _useTokens.colors,
+    motion = _useTokens.motion;
+  var resolvedSize = size !== null && size !== void 0 ? size : config.size;
+  var isDisabled = Boolean(disabled || config.disabled);
+  var isReadonly = Boolean(readonly || readOnly);
+  var _useState = useState(autoFocus || controlledFocused || false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var _useState3 = useState(autoFocus || controlledFocused || false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focusRequested = _useState4[0],
+    setFocusRequested = _useState4[1];
+  var _useState5 = useState(defaultValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    internalValue = _useState6[0],
+    setInternalValue = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    requestReadonlyRestore = _useState8[1];
+  var nativeRef = useRef(null);
+  var composingRef = useRef(false);
+  var isControlled = hasValueProp;
+  var currentValue = isControlled ? value !== null && value !== void 0 ? value : '' : internalValue;
+  var isFocusedState = !isDisabled && (controlledFocused !== null && controlledFocused !== void 0 ? controlledFocused : isFocused);
+  var nativeFocus = !isDisabled && (controlledFocused !== null && controlledFocused !== void 0 ? controlledFocused : focusRequested);
+  var tokens = useTextareaTokens(resolvedSize);
+  var colors = useTextareaColors(variant, isDisabled, error, isFocusedState);
+  var resolvedRows = resolveRowCount(rows, 2);
+  var resolvedMaxLength = resolveMaxLength(maxLength);
+  var countMaxLength = resolvedMaxLength >= 0 ? resolvedMaxLength : undefined;
+  useEffect(function () {
+    if (autoFocus && !isDisabled) setFocusRequested(true);
+  }, [autoFocus, isDisabled]);
+  useEffect(function () {
+    if (isDisabled) {
+      setIsFocused(false);
+      setFocusRequested(false);
+    }
+  }, [isDisabled]);
+  var commitValue = useCallback(function (newValue) {
+    if (!isControlled) setInternalValue(newValue);
+    onChange === null || onChange === void 0 || onChange(newValue);
+  }, [isControlled, onChange]);
+  var handleInput = useCallback(function (event) {
+    if (isReadonly) {
+      requestReadonlyRestore(function (version) {
+        return version + 1;
+      });
+      return;
+    }
+    var nextValue = composingRef.current ? event.detail.value : truncateValue(event.detail.value, resolvedMaxLength);
+    commitValue(nextValue);
+    onInputChange === null || onInputChange === void 0 || onInputChange(nextValue === event.detail.value ? event : _objectSpread(_objectSpread({}, event), {}, {
+      detail: _objectSpread(_objectSpread({}, event.detail), {}, {
+        value: nextValue
+      })
+    }));
+  }, [commitValue, isReadonly, onInputChange, resolvedMaxLength]);
+  var handleFocus = useCallback(function (event) {
+    setIsFocused(true);
+    setFocusRequested(true);
+    onFocus === null || onFocus === void 0 || onFocus(event);
+  }, [onFocus]);
+  var handleBlur = useCallback(function (event) {
+    setIsFocused(false);
+    setFocusRequested(false);
+    onBlur === null || onBlur === void 0 || onBlur(event);
+  }, [onBlur]);
+  var handleLineChange = useCallback(function (event) {
+    onLineChange === null || onLineChange === void 0 || onLineChange(event.detail, event);
+  }, [onLineChange]);
+  var nativeCompositionStart = nativeProps === null || nativeProps === void 0 ? void 0 : nativeProps['onCompositionStart'];
+  var nativeCompositionEnd = nativeProps === null || nativeProps === void 0 ? void 0 : nativeProps['onCompositionEnd'];
+  var handleCompositionStart = useCallback(function (event) {
+    composingRef.current = true;
+    nativeCompositionStart === null || nativeCompositionStart === void 0 || nativeCompositionStart(event);
+    onCompositionStart === null || onCompositionStart === void 0 || onCompositionStart(event);
+  }, [nativeCompositionStart, onCompositionStart]);
+  var handleCompositionEnd = useCallback(function (event) {
+    composingRef.current = false;
+    if (!isReadonly && resolvedMaxLength >= 0) {
+      commitValue(truncateValue(event.currentTarget.value, resolvedMaxLength));
+    }
+    nativeCompositionEnd === null || nativeCompositionEnd === void 0 || nativeCompositionEnd(event);
+    onCompositionEnd === null || onCompositionEnd === void 0 || onCompositionEnd(event);
+  }, [commitValue, isReadonly, nativeCompositionEnd, onCompositionEnd, resolvedMaxLength]);
+  var handleConfirm = useCallback(function (event) {
+    onConfirm === null || onConfirm === void 0 || onConfirm(event.detail.value, event);
+  }, [onConfirm]);
+  useImperativeHandle(ref, function () {
+    return {
+      clear: function clear() {
+        return commitValue('');
+      },
+      focus: function focus() {
+        if (isDisabled) return;
+        setFocusRequested(true);
+        callNativeTextAreaMethod(nativeRef.current, 'focus');
+      },
+      blur: function blur() {
+        setFocusRequested(false);
+        setIsFocused(false);
+        callNativeTextAreaMethod(nativeRef.current, 'blur');
+      },
+      get textAreaElement() {
+        return resolveNativeTextArea(nativeRef.current);
+      }
+    };
+  }, [commitValue, isDisabled]);
+  var autoSizeConfig = _typeof(autoSize) === 'object' ? autoSize : undefined;
+  var minRows = resolveRowCount(autoSizeConfig === null || autoSizeConfig === void 0 ? void 0 : autoSizeConfig.minRows, resolvedRows);
+  var maxRows = (autoSizeConfig === null || autoSizeConfig === void 0 ? void 0 : autoSizeConfig.maxRows) === undefined ? undefined : Math.max(minRows, resolveRowCount(autoSizeConfig.maxRows, minRows));
+  var resolvedMinHeight = minRows * tokens.lineHeight + tokens.paddingBlock * 2;
+  var resolvedMaxHeight = maxRows === undefined ? undefined : maxRows * tokens.lineHeight + tokens.paddingBlock * 2;
+  var shouldAutoHeight = autoHeight || Boolean(autoSize);
+  var paddingInline = variant === 'underline' || variant === 'borderless' ? 0 : tokens.paddingInline;
+  var borderWidth = variant === 'underline' ? 0 : variant === 'outline' ? 2 : 1;
+  var borderBottomWidth = variant === 'underline' ? 2 : borderWidth;
+  var showFocusRing = isFocusedState && (error || variant !== 'filled' && variant !== 'underline' && variant !== 'borderless');
+  var ringColor = error ? themeColors.destructive : themeColors.primary;
+  var containerStyle = _objectSpread({
+    width: '100%',
+    minWidth: 0,
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: colors.background,
+    borderRadius: variant === 'underline' || variant === 'borderless' ? 0 : tokens.borderRadius,
+    borderWidth: borderWidth,
+    borderBottomWidth: borderBottomWidth,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    boxShadow: showFocusRing ? "0 0 0 1px ".concat(withOpacity(ringColor, 0.18)) : 'none',
+    transition: "border-color ".concat(motion.durationsMs.emphasis, "ms ").concat(motion.easing.standard, ", box-shadow ").concat(motion.durationsMs.emphasis, "ms ").concat(motion.easing.standard, ", background-color ").concat(motion.durationsMs.emphasis, "ms ").concat(motion.easing.standard),
+    cursor: isDisabled ? 'not-allowed' : undefined,
+    opacity: isDisabled ? 0.5 : 1,
+    '--x-textarea-color': colors.color,
+    '--x-textarea-placeholder-color': colors.placeholder,
+    '--x-textarea-padding-block': "".concat(tokens.paddingBlock, "px"),
+    '--x-textarea-padding-inline': "".concat(paddingInline, "px"),
+    '--x-textarea-font-size': "".concat(tokens.fontSize, "px"),
+    '--x-textarea-line-height': "".concat(tokens.lineHeight, "px")
+  }, style);
+  var textareaStyle = {
+    display: 'block',
+    flex: '1 1 auto',
+    width: '100%',
+    maxWidth: '100%',
+    minWidth: 0,
+    minHeight: resolvedMinHeight,
+    maxHeight: resolvedMaxHeight,
+    boxSizing: 'border-box',
+    padding: "".concat(tokens.paddingBlock, "px ").concat(paddingInline, "px"),
+    margin: 0,
+    fontFamily: 'inherit',
+    fontSize: tokens.fontSize,
+    fontWeight: 'inherit',
+    lineHeight: "".concat(tokens.lineHeight, "px"),
+    letterSpacing: 'inherit',
+    color: colors.color,
+    backgroundColor: 'transparent',
+    border: 'none',
+    outline: 'none',
+    resize: 'none',
+    overflowY: shouldAutoHeight && maxRows === undefined ? 'hidden' : 'auto',
+    cursor: isDisabled ? 'not-allowed' : undefined
+  };
+  var h5HostStyle = process.env.TARO_ENV === 'h5' ? _objectSpread(_objectSpread({}, textareaStyle), {}, {
+    padding: 0,
+    fontSize: 'inherit',
+    lineHeight: 'inherit'
+  }) : textareaStyle;
+  var nativePropsStyle = nativeProps !== null && nativeProps !== void 0 && nativeProps['style'] && _typeof(nativeProps['style']) === 'object' ? nativeProps['style'] : undefined;
+  var accessibleLabel = (_ref2 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : placeholder) !== null && _ref2 !== void 0 ? _ref2 : '多行文本输入';
+  var h5NativeProps = process.env.TARO_ENV === 'h5' ? _objectSpread(_objectSpread(_objectSpread({}, nativeProps), {}, {
+    readOnly: isReadonly,
+    rows: resolvedRows,
+    'aria-label': accessibleLabel
+  }, autoComplete ? {
+    autoComplete: autoComplete
+  } : {}), {}, {
+    style: _objectSpread(_objectSpread({}, textareaStyle), nativePropsStyle),
+    onCompositionStart: handleCompositionStart,
+    onCompositionEnd: handleCompositionEnd
+  }) : nativeProps;
+  var valueLength = _toConsumableArray(currentValue).length;
+  var countElement = typeof showCount === 'function' ? showCount(valueLength, countMaxLength) : showCount ? countMaxLength === undefined ? String(valueLength) : "".concat(valueLength, "/").concat(countMaxLength) : null;
+  return /*#__PURE__*/_jsxs(View, {
+    className: classNames("".concat(config.prefixCls, "-textarea"), "".concat(config.prefixCls, "-textarea--").concat(resolvedSize), "".concat(config.prefixCls, "-textarea--").concat(variant), isDisabled && "".concat(config.prefixCls, "-textarea--disabled"), isReadonly && "".concat(config.prefixCls, "-textarea--readonly"), error && "".concat(config.prefixCls, "-textarea--error"), isFocusedState && "".concat(config.prefixCls, "-textarea--focused"), shouldAutoHeight && "".concat(config.prefixCls, "-textarea--auto-size"), className),
+    style: containerStyle,
+    "data-slot": "text-area",
+    "data-testid": testID,
+    "data-size": resolvedSize,
+    "data-variant": variant,
+    "data-disabled": isDisabled ? 'true' : 'false',
+    "data-readonly": isReadonly ? 'true' : 'false',
+    "data-error": error ? 'true' : 'false',
+    "data-focused": isFocusedState ? 'true' : 'false',
+    "data-auto-size": shouldAutoHeight ? 'true' : 'false',
+    children: [/*#__PURE__*/_jsx(TaroTextarea, {
+      ref: nativeRef,
+      className: "".concat(config.prefixCls, "-textarea__native"),
+      "data-slot": "text-area-field",
+      style: h5HostStyle,
+      value: currentValue,
+      placeholder: placeholder,
+      placeholderStyle: "color: ".concat(colors.placeholder, ";"),
+      placeholderClass: "".concat(config.prefixCls, "-textarea__placeholder"),
+      disabled: isDisabled,
+      readonly: isReadonly,
+      maxlength: resolvedMaxLength,
+      autoHeight: shouldAutoHeight,
+      focus: nativeFocus,
+      disableDefaultPadding: true,
+      name: name,
+      ariaLabel: accessibleLabel,
+      nativeProps: h5NativeProps,
+      onInput: handleInput,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onLineChange: handleLineChange,
+      onConfirm: handleConfirm
+    }), countElement !== null ? /*#__PURE__*/_jsx(View, {
+      className: "".concat(config.prefixCls, "-textarea__count"),
+      "data-slot": "text-area-count",
+      style: {
+        flexShrink: 0,
+        padding: '8px 0 0',
+        textAlign: 'right'
+      },
+      children: typeof countElement === 'string' || typeof countElement === 'number' ? /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontSize: tokens.countFontSize,
+          lineHeight: "".concat(tokens.countLineHeight, "px"),
+          color: colors.placeholder
+        },
+        children: countElement
+      }) : countElement
+    }) : null]
+  });
+});
+Textarea.displayName = 'Textarea';
+export default Textarea;

package/es/components/textarea/tokens.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Textarea Component Tokens
+ */
+import type { SizeVariant } from '../../theme/types';
+import type { TextareaVariant } from './types';
+export interface TextareaTokens {
+    paddingInline: number;
+    paddingBlock: number;
+    fontSize: number;
+    lineHeight: number;
+    borderRadius: number;
+    borderWidth: number;
+    countFontSize: number;
+    countLineHeight: number;
+}
+/**
+ * Get textarea tokens
+ */
+export declare function useTextareaTokens(size?: SizeVariant): TextareaTokens;
+/**
+ * Get textarea colors for variant
+ */
+export declare function useTextareaColors(variant?: TextareaVariant, disabled?: boolean, error?: boolean, focused?: boolean): {
+    background: string;
+    color: string;
+    border: string;
+    placeholder: string;
+};
+//# sourceMappingURL=tokens.d.ts.map

package/es/components/textarea/tokens.js

@@ -0,0 +1,123 @@
+/**
+ * Textarea Component Tokens
+ */
+
+import { useMemo } from 'react';
+import { useTokens } from "../../theme";
+/**
+ * Get textarea tokens
+ */
+export function useTextareaTokens() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'middle';
+  var _useTokens = useTokens(),
+    radius = _useTokens.radius;
+  return useMemo(function () {
+    var sizeMap = {
+      mini: {
+        paddingInline: 8,
+        paddingBlock: 4,
+        fontSize: 12,
+        lineHeight: 19.5
+      },
+      small: {
+        paddingInline: 10,
+        paddingBlock: 6,
+        fontSize: 14,
+        lineHeight: 22.75
+      },
+      middle: {
+        paddingInline: 12,
+        paddingBlock: 8,
+        fontSize: 16,
+        lineHeight: 26
+      },
+      large: {
+        paddingInline: 16,
+        paddingBlock: 12,
+        fontSize: 18,
+        lineHeight: 29.25
+      }
+    };
+    var config = sizeMap[size];
+    return {
+      paddingInline: config.paddingInline,
+      paddingBlock: config.paddingBlock,
+      fontSize: config.fontSize,
+      lineHeight: config.lineHeight,
+      borderRadius: radius.md,
+      borderWidth: 1,
+      countFontSize: 12,
+      countLineHeight: 18
+    };
+  }, [radius.md, size]);
+}
+
+/**
+ * Get textarea colors for variant
+ */
+export function useTextareaColors() {
+  var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
+  var disabled = arguments.length > 1 ? arguments[1] : undefined;
+  var error = arguments.length > 2 ? arguments[2] : undefined;
+  var focused = arguments.length > 3 ? arguments[3] : undefined;
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors;
+  return useMemo(function () {
+    var resolved;
+    switch (variant) {
+      case 'filled':
+        resolved = {
+          background: colors.muted,
+          color: colors.foreground,
+          border: 'transparent',
+          placeholder: colors['muted-foreground']
+        };
+        break;
+      case 'outline':
+        resolved = {
+          background: colors.background,
+          color: colors.foreground,
+          border: colors.border,
+          placeholder: colors['muted-foreground']
+        };
+        break;
+      case 'underline':
+        resolved = {
+          background: 'transparent',
+          color: colors.foreground,
+          border: colors.border,
+          placeholder: colors['muted-foreground']
+        };
+        break;
+      case 'borderless':
+        resolved = {
+          background: 'transparent',
+          color: colors.foreground,
+          border: 'transparent',
+          placeholder: colors['muted-foreground']
+        };
+        break;
+      case 'default':
+      default:
+        resolved = {
+          background: colors.background,
+          color: colors.foreground,
+          border: colors.border,
+          placeholder: colors['muted-foreground']
+        };
+        break;
+    }
+    if (focused && !disabled) {
+      if (variant === 'filled') resolved.background = colors.background;
+      if (variant !== 'borderless') resolved.border = colors.primary;
+    }
+    if (disabled) {
+      resolved.background = colors.muted;
+      resolved.color = colors['muted-foreground'];
+    }
+    if (error) {
+      resolved.border = colors.destructive;
+    }
+    return resolved;
+  }, [variant, disabled, error, focused, colors]);
+}

package/es/components/textarea/types.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Textarea Component Types
+ */
+import type { SizeVariant } from '../../theme/types';
+import type { ReactNode } from 'react';
+export declare type TextareaVariant = 'default' | 'outline' | 'filled' | 'underline' | 'borderless';
+export declare type TextareaAutoSize = boolean | {
+    minRows?: number;
+    maxRows?: number;
+};
+export declare type TextareaShowCount = boolean | ((length: number, maxLength?: number) => ReactNode);
+export interface TextareaNativeEvent<TDetail extends object = {
+    value: string;
+}> {
+    detail: TDetail;
+    currentTarget?: unknown;
+    target?: unknown;
+    nativeEvent?: unknown;
+}
+export declare type TextareaInputEvent = TextareaNativeEvent<{
+    value: string;
+    cursor?: number;
+    keyCode?: number;
+}>;
+export declare type TextareaFocusEvent = TextareaNativeEvent<{
+    value: string;
+    height?: number;
+}>;
+export declare type TextareaBlurEvent = TextareaNativeEvent<{
+    value: string;
+    cursor?: number;
+}>;
+export declare type TextareaConfirmEvent = TextareaNativeEvent<{
+    value: string;
+}>;
+export declare type TextareaLineChangeDetail = {
+    lineCount: number;
+    height: number;
+    heightRpx?: number;
+};
+export interface TextareaCompositionEvent {
+    data?: string | null;
+    currentTarget: {
+        value: string;
+    };
+    target?: {
+        value?: string;
+    } | null;
+    nativeEvent?: unknown;
+}
+export interface TextareaRef {
+    clear: () => void;
+    focus: () => void;
+    blur: () => void;
+    textAreaElement: unknown | null;
+}
+export declare type TextAreaRef = TextareaRef;
+export interface TextareaProps {
+    /** Textarea value */
+    value?: string;
+    /** Default value (uncontrolled) */
+    defaultValue?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Size variant */
+    size?: SizeVariant;
+    /** Visual style variant */
+    variant?: TextareaVariant;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Read-only state */
+    readonly?: boolean;
+    readOnly?: boolean;
+    /** Maximum input length */
+    maxLength?: number;
+    /** Show character count */
+    showCount?: TextareaShowCount;
+    /** Auto-grow height */
+    autoHeight?: boolean;
+    autoSize?: TextareaAutoSize;
+    /** Fixed number of rows (overrides autoHeight) */
+    rows?: number;
+    /** Focus state */
+    focused?: boolean;
+    /** Focus the native textarea on mount. */
+    autoFocus?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Change handler */
+    onChange?: (value: string) => void;
+    /** Native input event, aligned with x-mobile-ui's eventful onInputChange callback. */
+    onInputChange?: (event: TextareaInputEvent) => void;
+    /** Focus handler */
+    onFocus?: (event: TextareaFocusEvent) => void;
+    /** Blur handler */
+    onBlur?: (event: TextareaBlurEvent) => void;
+    /** Line change handler (for autoHeight) */
+    onLineChange?: (detail: TextareaLineChangeDetail, event: TextareaNativeEvent<TextareaLineChangeDetail>) => void;
+    /** IME composition lifecycle callbacks on H5. */
+    onCompositionStart?: (event: TextareaCompositionEvent) => void;
+    onCompositionEnd?: (event: TextareaCompositionEvent) => void;
+    /** Taro-native confirm callback. */
+    onConfirm?: (value: string, event: TextareaConfirmEvent) => void;
+    /** Native form field name. */
+    name?: string;
+    /** Browser autofill hint. */
+    autoComplete?: string;
+    /** Props forwarded to the inner H5 textarea by Taro. */
+    nativeProps?: Record<string, unknown>;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+    /** Accessible label for the native textarea. */
+    ariaLabel?: string;
+    /** Stable automation id */
+    testID?: string;
+}
+export declare type TextAreaProps = TextareaProps;
+//# sourceMappingURL=types.d.ts.map

package/es/components/textarea/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/toast/index.d.ts

@@ -0,0 +1,4 @@
+export { Toast, InternalToast, toast } from './toast';
+export type { ToastProps, ToastType, ToastPosition, ToastIcon, ToastShowOptions, ToastController } from './types';
+export { useToastTokens, useToastIcon, useToastColors, useToastStyle } from './tokens';
+//# sourceMappingURL=index.d.ts.map

package/es/components/toast/index.js

@@ -0,0 +1,2 @@
+export { Toast, InternalToast, toast } from "./toast";
+export { useToastTokens, useToastIcon, useToastColors, useToastStyle } from "./tokens";

package/es/components/toast/style.css

@@ -0,0 +1,9 @@
+@keyframes x-toast-loading-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.x-toast__loading-icon {
+  animation: x-toast-loading-rotate var(--x-toast-loading-duration, 900ms) linear infinite;
+}

package/es/components/toast/toast.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Toast Component
+ * Compact transient feedback aligned with x-mobile-ui.
+ */
+import React from 'react';
+import type { ToastController, ToastProps, ToastShowOptions } from './types';
+import './style.css';
+declare type ToastComponent = React.FC<ToastProps> & ToastController;
+export declare const InternalToast: React.FC<ToastProps>;
+export declare const Toast: ToastComponent;
+export declare const toast: {
+    show: (options: ToastShowOptions) => void;
+    success: (content: React.ReactNode, duration?: number, size?: ToastProps['size']) => void;
+    error: (content: React.ReactNode, duration?: number, size?: ToastProps['size']) => void;
+    info: (content: React.ReactNode, duration?: number, size?: ToastProps['size']) => void;
+    warning: (content: React.ReactNode, duration?: number, size?: ToastProps['size']) => void;
+    loading: (content?: React.ReactNode, size?: ToastProps['size']) => void;
+    hide: () => void;
+};
+export default Toast;
+//# sourceMappingURL=toast.d.ts.map