@hanwenbo/x-taro-ui 0.0.1

package/lib/components/textInput/style.css

@@ -0,0 +1,37 @@
+.x-text-input input,
+.x-text-input textarea {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  background: transparent;
+  text-align: inherit;
+  caret-color: var(--x-text-input-caret-color);
+}
+
+.x-text-input::placeholder,
+.x-text-input input::placeholder,
+.x-text-input textarea::placeholder {
+  color: var(--x-text-input-placeholder-color);
+  opacity: 1;
+}
+
+.x-text-input__placeholder {
+  color: var(--x-text-input-placeholder-color);
+}
+
+.x-text-input--custom-selection::selection,
+.x-text-input--custom-selection input::selection,
+.x-text-input--custom-selection textarea::selection {
+  background-color: var(--x-text-input-selection-color);
+}
+
+.x-text-input input:-webkit-autofill,
+.x-text-input input:-webkit-autofill:hover,
+.x-text-input input:-webkit-autofill:focus {
+  box-shadow: inset 0 0 0 1000px var(--x-text-input-background);
+  -webkit-text-fill-color: var(--x-text-input-foreground);
+  caret-color: var(--x-text-input-caret-color);
+}

package/lib/components/textInput/textInput.d.ts

@@ -0,0 +1,10 @@
+/**
+ * TextInput Component
+ * Bare RN-compatible input primitive aligned with x-mobile-ui.
+ */
+import React from 'react';
+import type { TextInputProps, TextInputRef } from './types';
+import './style.css';
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<TextInputRef>>;
+export default TextInput;
+//# sourceMappingURL=textInput.d.ts.map

package/lib/components/textInput/textInput.js

@@ -0,0 +1,361 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/textInput/textInput.tsx
+var textInput_exports = {};
+__export(textInput_exports, {
+  TextInput: () => TextInput,
+  default: () => textInput_default
+});
+module.exports = __toCommonJS(textInput_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_configProvider = require("../configProvider");
+var import_style = require("./style.css");
+function mapKeyboardType(keyboardType) {
+  switch (keyboardType) {
+    case "number-pad":
+    case "numeric":
+    case "number":
+      return { type: "number", inputMode: "numeric" };
+    case "decimal-pad":
+    case "digit":
+      return { type: "digit", inputMode: "decimal" };
+    case "email-address":
+      return { type: "text", inputMode: "email" };
+    case "phone-pad":
+      return { type: "text", inputMode: "tel" };
+    case "url":
+      return { type: "text", inputMode: "url" };
+    case "search":
+      return { type: "text", inputMode: "search" };
+    case "default":
+      return { type: "text" };
+    default:
+      return { type: keyboardType };
+  }
+}
+function mapHtmlInputType(keyboardType, secureTextEntry) {
+  if (secureTextEntry || keyboardType === "safe-password") return "password";
+  switch (keyboardType) {
+    case "number-pad":
+    case "decimal-pad":
+    case "numeric":
+    case "number":
+    case "digit":
+      return "number";
+    case "email-address":
+      return "email";
+    case "phone-pad":
+      return "tel";
+    case "url":
+      return "url";
+    case "search":
+      return "search";
+    default:
+      return "text";
+  }
+}
+function mapReturnKeyType(returnKeyType) {
+  return returnKeyType;
+}
+function resolveNumberOfLines(numberOfLines) {
+  return Number.isFinite(numberOfLines) ? Math.max(1, Math.floor(numberOfLines)) : 1;
+}
+function resolveNativeTextControl(nativeRef) {
+  var _a;
+  if (!nativeRef || typeof nativeRef !== "object") return null;
+  const candidate = nativeRef;
+  const nested = (_a = candidate.querySelector) == null ? void 0 : _a.call(candidate, "input,textarea");
+  return nested ?? candidate;
+}
+function callNativeTextControlMethod(nativeRef, method) {
+  const target = resolveNativeTextControl(nativeRef);
+  const callback = target == null ? void 0 : target[method];
+  if (typeof callback === "function") callback.call(target);
+}
+var TextInput = import_react.default.forwardRef((props, ref) => {
+  const hasValueProp = Object.prototype.hasOwnProperty.call(props, "value");
+  const {
+    value,
+    defaultValue = "",
+    onChangeText,
+    onChange,
+    placeholder,
+    placeholderTextColor,
+    editable = true,
+    disabled: disabledProp = false,
+    readOnly = false,
+    readonly = false,
+    maxLength,
+    multiline = false,
+    numberOfLines = 1,
+    keyboardType = "default",
+    secureTextEntry = false,
+    returnKeyType,
+    autoCapitalize,
+    autoCorrect,
+    autoComplete,
+    autoFocus = false,
+    selectTextOnFocus = false,
+    textAlign,
+    selectionColor,
+    onFocus,
+    onBlur,
+    onConfirm,
+    name,
+    nativeProps,
+    className,
+    style,
+    ariaLabel,
+    testID = "text-input"
+  } = props;
+  const config = (0, import_configProvider.useConfigProvider)();
+  const { colors } = (0, import_theme.useTokens)();
+  const isDisabled = Boolean(disabledProp || config.disabled || editable === false);
+  const isReadonly = Boolean(readOnly || readonly);
+  const isControlled = hasValueProp;
+  const [internalValue, setInternalValue] = (0, import_react.useState)(defaultValue);
+  const [focusRequested, setFocusRequested] = (0, import_react.useState)(autoFocus);
+  const [selectAllRequested, setSelectAllRequested] = (0, import_react.useState)(false);
+  const nativeRef = (0, import_react.useRef)(null);
+  const currentValue = isControlled ? value ?? "" : internalValue;
+  const valueChangeHandler = onChangeText ?? onChange;
+  (0, import_react.useEffect)(() => {
+    if (autoFocus && !isDisabled) setFocusRequested(true);
+  }, [autoFocus, isDisabled]);
+  (0, import_react.useEffect)(() => {
+    if (isDisabled) {
+      setFocusRequested(false);
+      setSelectAllRequested(false);
+    }
+  }, [isDisabled]);
+  (0, import_react.useEffect)(() => {
+    if (!selectAllRequested) return;
+    const timeoutId = setTimeout(() => setSelectAllRequested(false), 0);
+    return () => clearTimeout(timeoutId);
+  }, [selectAllRequested]);
+  const handleValueChange = (0, import_react.useCallback)(
+    (nextValue) => {
+      if (maxLength !== void 0 && maxLength >= 0 && nextValue.length > maxLength) return;
+      if (!isControlled) setInternalValue(nextValue);
+      valueChangeHandler == null ? void 0 : valueChangeHandler(nextValue);
+    },
+    [isControlled, maxLength, valueChangeHandler]
+  );
+  const handleFocus = (0, import_react.useCallback)(
+    (event) => {
+      setFocusRequested(true);
+      if (selectTextOnFocus) {
+        setSelectAllRequested(true);
+        callNativeTextControlMethod(nativeRef.current, "select");
+      }
+      onFocus == null ? void 0 : onFocus(event);
+    },
+    [onFocus, selectTextOnFocus]
+  );
+  const handleBlur = (0, import_react.useCallback)(
+    (event) => {
+      setFocusRequested(false);
+      setSelectAllRequested(false);
+      onBlur == null ? void 0 : onBlur(event);
+    },
+    [onBlur]
+  );
+  const handleConfirm = (0, import_react.useCallback)(
+    (nextValue, event) => {
+      onConfirm == null ? void 0 : onConfirm(nextValue, event);
+    },
+    [onConfirm]
+  );
+  const handleNativeInput = (0, import_react.useCallback)(
+    (nextValue) => {
+      if (isReadonly) return currentValue;
+      handleValueChange(nextValue);
+      return void 0;
+    },
+    [currentValue, handleValueChange, isReadonly]
+  );
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      clear: () => handleValueChange(""),
+      focus: () => {
+        if (isDisabled) return;
+        setFocusRequested(true);
+        callNativeTextControlMethod(nativeRef.current, "focus");
+      },
+      blur: () => {
+        setFocusRequested(false);
+        setSelectAllRequested(false);
+        callNativeTextControlMethod(nativeRef.current, "blur");
+      },
+      get inputElement() {
+        return resolveNativeTextControl(nativeRef.current);
+      }
+    }),
+    [handleValueChange, isDisabled]
+  );
+  const keyboardMode = mapKeyboardType(keyboardType);
+  const htmlInputType = mapHtmlInputType(keyboardType, secureTextEntry);
+  const enterKeyHint = mapReturnKeyType(returnKeyType);
+  const confirmType = returnKeyType === "previous" ? "done" : returnKeyType;
+  const resolvedLines = resolveNumberOfLines(numberOfLines);
+  const accessibleLabel = ariaLabel ?? placeholder ?? "文本输入";
+  const placeholderColor = placeholderTextColor ?? colors["muted-foreground"];
+  const resolvedAutoComplete = autoComplete ?? (secureTextEntry ? "current-password" : "off");
+  const h5NativeBehaviorProps = process.env.TARO_ENV === "h5" ? {
+    ...nativeProps,
+    readOnly: isReadonly,
+    "aria-label": accessibleLabel,
+    autoComplete: resolvedAutoComplete,
+    ...autoCapitalize ? { autoCapitalize } : {},
+    ...autoCorrect !== void 0 ? { autoCorrect: String(autoCorrect) } : {},
+    ...enterKeyHint ? { enterKeyHint } : {},
+    ...keyboardMode.inputMode ? { inputMode: keyboardMode.inputMode } : {}
+  } : nativeProps;
+  const h5InputNativeProps = process.env.TARO_ENV === "h5" ? { ...h5NativeBehaviorProps, type: htmlInputType } : h5NativeBehaviorProps;
+  const nativeStyle = {
+    display: "block",
+    width: "100%",
+    minWidth: 0,
+    height: multiline ? resolvedLines * 22 : 22,
+    boxSizing: "border-box",
+    padding: 0,
+    margin: 0,
+    fontFamily: "inherit",
+    fontSize: 14,
+    fontWeight: "inherit",
+    lineHeight: "22px",
+    letterSpacing: "inherit",
+    color: colors.foreground,
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    borderStyle: "solid",
+    borderColor: "transparent",
+    borderRadius: 0,
+    outline: "none",
+    ...textAlign ? { textAlign } : {},
+    caretColor: selectionColor ?? colors.foreground,
+    cursor: isDisabled ? "not-allowed" : void 0,
+    opacity: isDisabled ? 0.5 : 1,
+    "--x-text-input-foreground": colors.foreground,
+    "--x-text-input-background": colors.background,
+    "--x-text-input-placeholder-color": placeholderColor,
+    "--x-text-input-caret-color": selectionColor ?? colors.foreground,
+    "--x-text-input-selection-color": selectionColor ?? colors.primary,
+    ...style
+  };
+  const nativeClassName = (0, import_utils.classNames)(
+    `${config.prefixCls}-text-input`,
+    multiline && `${config.prefixCls}-text-input--multiline`,
+    selectionColor && `${config.prefixCls}-text-input--custom-selection`,
+    isDisabled && `${config.prefixCls}-text-input--disabled`,
+    isReadonly && `${config.prefixCls}-text-input--readonly`,
+    className
+  );
+  const stateProps = {
+    "data-slot": "text-input",
+    "data-testid": testID,
+    "data-multiline": multiline ? "true" : "false",
+    "data-disabled": isDisabled ? "true" : "false",
+    "data-readonly": isReadonly ? "true" : "false",
+    "data-focused": focusRequested ? "true" : "false",
+    "data-keyboard-type": keyboardType,
+    "data-return-key-type": returnKeyType,
+    "data-secure": secureTextEntry ? "true" : "false"
+  };
+  if (multiline) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.Textarea,
+      {
+        ...stateProps,
+        ref: nativeRef,
+        className: nativeClassName,
+        style: nativeStyle,
+        value: currentValue,
+        placeholder,
+        placeholderStyle: `color: ${placeholderColor};`,
+        placeholderClass: `${config.prefixCls}-text-input__placeholder`,
+        disabled: isDisabled,
+        readonly: isReadonly,
+        maxlength: maxLength ?? -1,
+        focus: focusRequested,
+        selectionStart: selectAllRequested ? 0 : void 0,
+        selectionEnd: selectAllRequested ? currentValue.length : void 0,
+        confirmType,
+        ariaLabel: accessibleLabel,
+        name,
+        nativeProps: h5NativeBehaviorProps,
+        onInput: (event) => handleNativeInput(event.detail.value),
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onConfirm: (event) => handleConfirm(event.detail.value, event)
+      }
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.Input,
+    {
+      ...stateProps,
+      ref: nativeRef,
+      className: nativeClassName,
+      style: nativeStyle,
+      value: currentValue,
+      placeholder,
+      placeholderStyle: `color: ${placeholderColor};`,
+      placeholderClass: `${config.prefixCls}-text-input__placeholder`,
+      placeholderTextColor: placeholderColor,
+      type: keyboardMode.type,
+      password: secureTextEntry,
+      disabled: isDisabled,
+      readonly: isReadonly,
+      maxlength: maxLength ?? -1,
+      confirmType,
+      focus: focusRequested,
+      selectionStart: selectAllRequested ? 0 : void 0,
+      selectionEnd: selectAllRequested ? currentValue.length : void 0,
+      cursorColor: selectionColor,
+      ariaLabel: accessibleLabel,
+      name,
+      nativeProps: h5InputNativeProps,
+      onInput: (event) => handleNativeInput(event.detail.value),
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onConfirm: (event) => handleConfirm(event.detail.value, event)
+    }
+  );
+});
+TextInput.displayName = "TextInput";
+var textInput_default = TextInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextInput
+});

package/lib/components/textInput/types.d.ts

@@ -0,0 +1,79 @@
+/**
+ * TextInput Component Types
+ * Bare RN-compatible input primitive aligned with x-mobile-ui.
+ */
+/// <reference types="react" />
+import type { InputType } from '../input/types';
+export declare type TextInputAutoCapitalize = 'none' | 'sentences' | 'characters' | 'words';
+export declare type TextInputKeyboardType = InputType | 'default' | 'number-pad' | 'decimal-pad' | 'numeric' | 'email-address' | 'phone-pad' | 'url' | 'search';
+export interface TextInputNativeEvent<TDetail extends object = {
+    value: string;
+}> {
+    detail: TDetail;
+    currentTarget?: unknown;
+    target?: unknown;
+    nativeEvent?: unknown;
+}
+export declare type TextInputFocusEvent = TextInputNativeEvent<{
+    value: string;
+    height?: number;
+}>;
+export declare type TextInputBlurEvent = TextInputNativeEvent<{
+    value: string;
+    cursor?: number;
+}>;
+export declare type TextInputConfirmEvent = TextInputNativeEvent<{
+    value: string;
+}>;
+export interface TextInputRef {
+    /** Clear the input value. */
+    clear: () => void;
+    /** Focus the native input. */
+    focus: () => void;
+    /** Blur the native input. */
+    blur: () => void;
+    /** Native element when the current platform exposes one. */
+    inputElement: unknown | null;
+}
+export interface TextInputProps {
+    value?: string;
+    defaultValue?: string;
+    onChangeText?: (value: string) => void;
+    /** Web-compatible alias of onChangeText. */
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    placeholderTextColor?: string;
+    editable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Taro-native read-only alias. */
+    readonly?: boolean;
+    maxLength?: number;
+    multiline?: boolean;
+    numberOfLines?: number;
+    keyboardType?: TextInputKeyboardType;
+    secureTextEntry?: boolean;
+    returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send' | 'previous';
+    autoCapitalize?: TextInputAutoCapitalize;
+    autoCorrect?: boolean;
+    /** Browser autofill hint. Defaults to current-password for secure input, otherwise off. */
+    autoComplete?: string;
+    autoFocus?: boolean;
+    selectTextOnFocus?: boolean;
+    textAlign?: 'left' | 'center' | 'right';
+    selectionColor?: string;
+    onFocus?: (event: TextInputFocusEvent) => void;
+    onBlur?: (event: TextInputBlurEvent) => void;
+    /** Taro-native confirm callback. */
+    onConfirm?: (value: string, event: TextInputConfirmEvent) => void;
+    /** Native form field name. */
+    name?: string;
+    /** Props forwarded to the inner H5 input/textarea by Taro. */
+    nativeProps?: Record<string, unknown>;
+    className?: string;
+    style?: React.CSSProperties;
+    ariaLabel?: string;
+    /** Stable automation id. */
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/textInput/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/textInput/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/textarea/index.d.ts

@@ -0,0 +1,5 @@
+export { Textarea, Textarea as TextArea } from './textarea';
+export type { TextareaAutoSize, TextareaBlurEvent, TextareaCompositionEvent, TextareaConfirmEvent, TextareaFocusEvent, TextareaInputEvent, TextareaLineChangeDetail, TextareaNativeEvent, TextareaProps, TextareaRef, TextareaShowCount, TextareaVariant, TextAreaProps, TextAreaRef } from './types';
+export { useTextareaTokens, useTextareaColors } from './tokens';
+export { default } from './textarea';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/textarea/index.js

@@ -0,0 +1,48 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/textarea/index.ts
+var index_exports = {};
+__export(index_exports, {
+  TextArea: () => import_textarea.Textarea,
+  Textarea: () => import_textarea.Textarea,
+  default: () => import_textarea2.default,
+  useTextareaColors: () => import_tokens.useTextareaColors,
+  useTextareaTokens: () => import_tokens.useTextareaTokens
+});
+module.exports = __toCommonJS(index_exports);
+var import_textarea = require("./textarea");
+var import_tokens = require("./tokens");
+var import_textarea2 = __toESM(require("./textarea"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextArea,
+  Textarea,
+  useTextareaColors,
+  useTextareaTokens
+});

package/lib/components/textarea/style.css

@@ -0,0 +1,32 @@
+.x-textarea__native textarea {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  min-height: inherit;
+  max-height: inherit;
+  margin: 0;
+  padding: var(--x-textarea-padding-block) var(--x-textarea-padding-inline);
+  overflow-y: auto;
+  color: var(--x-textarea-color);
+  font-family: inherit;
+  font-size: var(--x-textarea-font-size);
+  font-weight: inherit;
+  line-height: var(--x-textarea-line-height);
+  letter-spacing: inherit;
+  background: transparent;
+  border: 0;
+  outline: none;
+  resize: none;
+}
+
+.x-textarea--auto-size .x-textarea__native textarea {
+  overflow-y: hidden;
+}
+
+.x-textarea__native textarea::placeholder,
+.x-textarea__placeholder {
+  color: var(--x-textarea-placeholder-color);
+  opacity: 1;
+}

package/lib/components/textarea/textarea.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Textarea Component
+ * x-mobile-ui aligned multiline field with Taro H5/WeApp adapters.
+ */
+import React from 'react';
+import type { TextareaProps, TextareaRef } from './types';
+import './style.css';
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<TextareaRef>>;
+export default Textarea;
+//# sourceMappingURL=textarea.d.ts.map