@hanwenbo/x-taro-ui 0.0.1 → 0.0.3

package/lib/auth/entries/locales.d.ts

@@ -0,0 +1,2 @@
+export { authLocales, authZhCN, authEnUS, type AuthMessageKey } from '@hanwenbo/x-auth-core/locales';
+//# sourceMappingURL=locales.d.ts.map

package/lib/auth/entries/locales.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/auth/entries/locales.ts
+var locales_exports = {};
+__export(locales_exports, {
+  authEnUS: () => import_locales.authEnUS,
+  authLocales: () => import_locales.authLocales,
+  authZhCN: () => import_locales.authZhCN
+});
+module.exports = __toCommonJS(locales_exports);
+var import_locales = require("@hanwenbo/x-auth-core/locales");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  authEnUS,
+  authLocales,
+  authZhCN
+});

package/lib/auth/index.d.ts

@@ -4,4 +4,5 @@ export * from './phoneNumberInput';
 export * from './provider';
 export * from './theme';
 export * from './types';
+export { authLocales, authZhCN, authEnUS, type AuthMessageKey } from '@hanwenbo/x-auth-core/locales';
 //# sourceMappingURL=index.d.ts.map

package/lib/auth/index.js

@@ -2,6 +2,10 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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))
@@ -15,6 +19,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // src/auth/index.ts
 var index_exports = {};
+__export(index_exports, {
+  authEnUS: () => import_locales.authEnUS,
+  authLocales: () => import_locales.authLocales,
+  authZhCN: () => import_locales.authZhCN
+});
 module.exports = __toCommonJS(index_exports);
 var import_styles = require("./styles.css");
 __reExport(index_exports, require("./components"), module.exports);
@@ -22,8 +31,12 @@ __reExport(index_exports, require("./phoneNumberInput"), module.exports);
 __reExport(index_exports, require("./provider"), module.exports);
 __reExport(index_exports, require("./theme"), module.exports);
 __reExport(index_exports, require("./types"), module.exports);
+var import_locales = require("@hanwenbo/x-auth-core/locales");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  authEnUS,
+  authLocales,
+  authZhCN,
   ...require("./components"),
   ...require("./phoneNumberInput"),
   ...require("./provider"),

package/lib/auth/internal.d.ts

@@ -1,34 +1,38 @@
-import React, { type CSSProperties, type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import type { ContactIdentifierType, IdentifierType, ResolvedAuthConfig } from '@hanwenbo/x-auth-core/types';
 export declare type AuthSurface = 'card' | 'plain';
-export declare function AuthPanel({ children, className, description, footer, logo, style, surface, testID, title }: {
+export declare type AuthHeaderAlign = 'left' | 'center';
+export declare function AuthPanel({ children, className, description, footer, headerAlign, logo, style, surface, testID, title }: {
     children: ReactNode;
     className?: string;
     description?: ReactNode;
     footer?: ReactNode;
+    headerAlign?: AuthHeaderAlign;
     logo?: ReactNode;
     style?: CSSProperties;
     surface?: AuthSurface;
     testID?: string;
     title?: ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function AuthField({ children, error, hint, label }: {
     children: ReactNode;
     error?: string;
     hint?: ReactNode;
     label?: ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function AuthError({ children }: {
     children?: ReactNode;
-}): React.JSX.Element | null;
-export declare function AuthSelector<Value extends string>({ onChange, options, value }: {
+}): import("react/jsx-runtime").JSX.Element | null;
+interface AuthSelectorProps<Value extends string> {
     onChange: (value: Value) => void;
     options: Array<{
         label: ReactNode;
         value: Value;
     }>;
     value?: Value;
-}): React.JSX.Element | null;
+}
+export declare function AuthSelector<Value extends string>({ onChange, options, value }: AuthSelectorProps<Value>): import("react/jsx-runtime").JSX.Element | null;
+export declare function CredentialSelector<Value extends string>({ onChange, options, value }: AuthSelectorProps<Value>): import("react/jsx-runtime").JSX.Element | null;
 export declare function IdentifierInput({ config, error, onChange, showLabel, type, value }: {
     config: ResolvedAuthConfig;
     error?: string;
@@ -36,8 +40,9 @@ export declare function IdentifierInput({ config, error, onChange, showLabel, ty
     showLabel?: boolean;
     type: IdentifierType;
     value: string;
-}): React.JSX.Element;
-export declare function VerificationCodeInput({ codeLength, countdown, disabled, error, onChange, onSend, sending, showLabel, value }: {
+}): import("react/jsx-runtime").JSX.Element;
+export declare function VerificationCodeInput({ config, codeLength, countdown, disabled, error, onChange, onSend, sending, showLabel, value }: {
+    config?: ResolvedAuthConfig;
     codeLength: number;
     countdown: number;
     disabled?: boolean;
@@ -47,9 +52,10 @@ export declare function VerificationCodeInput({ codeLength, countdown, disabled,
     sending?: boolean;
     showLabel?: boolean;
     value: string;
-}): React.JSX.Element;
-export declare function contactOptions(types: ContactIdentifierType[]): {
+}): import("react/jsx-runtime").JSX.Element;
+export declare function contactOptions(types: ContactIdentifierType[], config?: ResolvedAuthConfig): {
     label: any;
     value: ContactIdentifierType;
 }[];
+export {};
 //# sourceMappingURL=internal.d.ts.map

package/lib/auth/internal.js

@@ -33,42 +33,47 @@ __export(internal_exports, {
   AuthField: () => AuthField,
   AuthPanel: () => AuthPanel,
   AuthSelector: () => AuthSelector,
+  CredentialSelector: () => CredentialSelector,
   IdentifierInput: () => IdentifierInput,
   VerificationCodeInput: () => VerificationCodeInput,
   contactOptions: () => contactOptions
 });
 module.exports = __toCommonJS(internal_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("@hanwenbo/x-auth-core/react");
+var import_react2 = __toESM(require("react"));
 var import_components = require("@tarojs/components");
 var import_identifier = require("@hanwenbo/x-auth-core/identifier");
 var import_button = require("../components/button");
 var import_icon = require("../components/icon");
+var import_segmented = require("../components/segmented");
+var import_tabs = require("../components/tabs");
 var import_inputItem = require("../components/inputItem/index");
 var import_phoneNumberInput = require("./phoneNumberInput");
 function renderText(node, className) {
-  return typeof node === "string" || typeof node === "number" ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className }, node) : node;
+  return typeof node === "string" || typeof node === "number" ? /* @__PURE__ */ import_react2.default.createElement(import_components.Text, { className }, node) : node;
 }
 function AuthPanel({
   children,
   className,
   description,
   footer,
+  headerAlign = "left",
   logo,
   style,
   surface = "card",
   testID,
   title
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react2.default.createElement(
     import_components.View,
     {
       className: `x-taro-auth-panel x-taro-auth-panel--${surface} ${className ?? ""}`,
       "data-testid": testID,
       style
     },
-    logo || title || description ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-panel__header" }, logo ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-panel__logo" }, logo) : null, title ? renderText(title, "x-taro-auth-panel__title") : null, description ? renderText(description, "x-taro-auth-panel__description") : null) : null,
+    logo || title || description ? /* @__PURE__ */ import_react2.default.createElement(import_components.View, { className: `x-taro-auth-panel__header x-taro-auth-panel__header--${headerAlign}` }, logo ? /* @__PURE__ */ import_react2.default.createElement(import_components.View, { className: "x-taro-auth-panel__logo" }, logo) : null, title ? renderText(title, "x-taro-auth-panel__title") : null, description ? renderText(description, "x-taro-auth-panel__description") : null) : null,
     children,
-    footer ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-panel__footer" }, footer) : null
+    footer ? /* @__PURE__ */ import_react2.default.createElement(import_components.View, { className: "x-taro-auth-panel__footer" }, footer) : null
   );
 }
 function AuthField({
@@ -77,10 +82,10 @@ function AuthField({
   hint,
   label
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-field" }, label ? renderText(label, "x-taro-auth-field__label") : null, children, error ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-field__error" }, error) : null, !error && hint ? renderText(hint, "x-taro-auth-field__hint") : null);
+  return /* @__PURE__ */ import_react2.default.createElement(import_components.View, { className: "x-taro-auth-field" }, label ? renderText(label, "x-taro-auth-field__label") : null, children, error ? /* @__PURE__ */ import_react2.default.createElement(import_components.Text, { className: "x-taro-auth-field__error" }, error) : null, !error && hint ? renderText(hint, "x-taro-auth-field__hint") : null);
 }
 function AuthError({ children }) {
-  return children ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-error", role: "alert" }, renderText(children, "x-taro-auth-error__text")) : null;
+  return children ? /* @__PURE__ */ import_react2.default.createElement(import_components.View, { className: "x-taro-auth-error", role: "alert" }, renderText(children, "x-taro-auth-error__text")) : null;
 }
 function AuthSelector({
   onChange,
@@ -88,17 +93,50 @@ function AuthSelector({
   value
 }) {
   if (options.length < 2) return null;
-  return /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-selector", role: "tablist" }, options.map((option) => /* @__PURE__ */ import_react.default.createElement(
-    import_button.Button,
+  return /* @__PURE__ */ import_react2.default.createElement(
+    import_segmented.Segmented,
     {
-      ariaLabel: typeof option.label === "string" ? option.label : void 0,
-      key: option.value,
-      onClick: () => onChange(option.value),
-      size: "small",
-      type: option.value === value ? "outline" : "ghost"
-    },
-    option.label
-  )));
+      block: true,
+      className: "x-taro-auth-selector",
+      onChange: (next) => onChange(next),
+      options: options.map((option) => ({
+        ...option,
+        icon: /* @__PURE__ */ import_react2.default.createElement(
+          import_icon.Icon,
+          {
+            name: option.value === "account" ? "UserRound" : option.value === "phone" ? "Phone" : "Mail",
+            size: 16
+          }
+        )
+      })),
+      value
+    }
+  );
+}
+function CredentialSelector({
+  onChange,
+  options,
+  value
+}) {
+  if (options.length < 2) return null;
+  return /* @__PURE__ */ import_react2.default.createElement(
+    import_tabs.Tabs,
+    {
+      className: "x-taro-auth-method-tabs",
+      activeKey: value,
+      items: options.map((option) => ({ key: option.value, title: option.label })),
+      onChange: (next) => onChange(next),
+      variant: "outline",
+      size: "large",
+      stretch: false,
+      indicatorVisible: false,
+      headerStyle: { gap: 28 },
+      tabBarStyle: { borderWidth: 0 },
+      tabStyle: { paddingLeft: 0, paddingRight: 0 },
+      textStyle: { fontSize: 16 },
+      activeTextStyle: { fontWeight: 650 }
+    }
+  );
 }
 function IdentifierInput({
   config,
@@ -108,10 +146,13 @@ function IdentifierInput({
   type,
   value
 }) {
+  const t = config.t;
   const label = (0, import_identifier.identifierLabel)(type, config);
-  return /* @__PURE__ */ import_react.default.createElement(AuthField, { error, label: showLabel ? label : void 0 }, type === "phone" ? /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react2.default.createElement(AuthField, { error, label: showLabel ? label : void 0 }, type === "phone" ? /* @__PURE__ */ import_react2.default.createElement(
     import_phoneNumberInput.PhoneNumberInput,
     {
+      placeholder: t("auth.enter", { label }),
+      config,
       countries: config.phone.countries,
       countryCallingCodeEditable: config.phone.countryCallingCodeEditable,
       defaultCountry: config.phone.defaultCountry,
@@ -122,14 +163,14 @@ function IdentifierInput({
       size: "large",
       value
     }
-  ) : /* @__PURE__ */ import_react.default.createElement(
+  ) : /* @__PURE__ */ import_react2.default.createElement(
     import_inputItem.InputItem,
     {
-      error,
+      error: Boolean(error),
       maxLength: type === "account" ? config.account.maxLength : void 0,
       onChange,
-      placeholder: type === "account" ? config.account.placeholder : `请输入${label}`,
-      prefix: /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: type === "account" ? "User" : "Mail", size: 18 }),
+      placeholder: type === "account" ? config.account.placeholder : t("auth.enter", { label }),
+      prefix: /* @__PURE__ */ import_react2.default.createElement(import_icon.Icon, { name: type === "account" ? "User" : "Mail", size: 18 }),
       size: "large",
       type: type === "email" ? "email" : "text",
       value
@@ -137,6 +178,7 @@ function IdentifierInput({
   ));
 }
 function VerificationCodeInput({
+  config,
   codeLength,
   countdown,
   disabled,
@@ -147,32 +189,34 @@ function VerificationCodeInput({
   showLabel = true,
   value
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(AuthField, { error, label: showLabel ? "验证码" : void 0 }, /* @__PURE__ */ import_react.default.createElement(
+  const t = (0, import_react.useAuthTranslation)(config);
+  return /* @__PURE__ */ import_react2.default.createElement(AuthField, { error, label: showLabel ? t("auth.code") : void 0 }, /* @__PURE__ */ import_react2.default.createElement(
     import_inputItem.InputItem,
     {
-      error,
+      error: Boolean(error),
       maxLength: codeLength,
       onChange: (next) => onChange(next.replace(/\D/g, "").slice(0, codeLength)),
-      placeholder: `请输入 ${codeLength} 位验证码`,
-      prefix: /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "CircleCheck", size: 18 }),
+      placeholder: t("auth.codeLength", { length: codeLength }),
+      prefix: /* @__PURE__ */ import_react2.default.createElement(import_icon.Icon, { name: "CircleCheck", size: 18 }),
       size: "large",
-      suffix: /* @__PURE__ */ import_react.default.createElement(
+      suffix: /* @__PURE__ */ import_react2.default.createElement(
         import_button.Button,
         {
           disabled: disabled || sending || countdown > 0,
           onClick: onSend,
           size: "small",
-          type: "link"
+          type: "link",
+          compact: true
         },
-        sending ? "发送中" : countdown > 0 ? `${countdown}s` : "获取验证码"
+        sending ? t("auth.sending") : countdown > 0 ? t("auth.resendCountdown", { seconds: countdown }) : t("auth.getCode")
       ),
       type: "tel",
       value
     }
   ));
 }
-function contactOptions(types) {
-  return types.map((type) => ({ label: (0, import_identifier.identifierLabel)(type), value: type }));
+function contactOptions(types, config) {
+  return types.map((type) => ({ label: (0, import_identifier.identifierLabel)(type, config), value: type }));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -180,6 +224,7 @@ function contactOptions(types) {
   AuthField,
   AuthPanel,
   AuthSelector,
+  CredentialSelector,
   IdentifierInput,
   VerificationCodeInput,
   contactOptions

package/lib/auth/phoneNumberInput.d.ts

@@ -1,7 +1,9 @@
-import React, { type CSSProperties } from 'react';
+import type { AuthConfig } from '@hanwenbo/x-auth-core/types';
+import { type CSSProperties } from 'react';
 import type { PhoneCountryCode, PhoneCountryLabels } from '@hanwenbo/x-auth-core/types';
 import './styles.css';
 export interface PhoneNumberInputProps {
+    config?: AuthConfig;
     className?: string;
     countries?: PhoneCountryCode[];
     countryCallingCodeEditable?: boolean;
@@ -18,5 +20,5 @@ export interface PhoneNumberInputProps {
     testID?: string;
     value?: string;
 }
-export declare function PhoneNumberInput({ className, countries, defaultCountry, disabled, error, labels, limitMaxLength, onChange, placeholder, readOnly, size, style, testID, value }: PhoneNumberInputProps): React.JSX.Element;
+export declare function PhoneNumberInput({ config, className, countries, defaultCountry, disabled, error, labels, limitMaxLength, onChange, placeholder, readOnly, size, style, testID, value }: PhoneNumberInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=phoneNumberInput.d.ts.map

package/lib/auth/phoneNumberInput.js

@@ -32,13 +32,16 @@ __export(phoneNumberInput_exports, {
   PhoneNumberInput: () => PhoneNumberInput
 });
 module.exports = __toCommonJS(phoneNumberInput_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("@hanwenbo/x-auth-core/react");
+var import_react2 = __toESM(require("react"));
 var import_components = require("@tarojs/components");
 var import_phone = require("@hanwenbo/x-auth-core/phone");
 var import_inputItem = require("../components/inputItem/index");
 var import_picker = require("../components/picker");
+var import_tokens = require("../components/inputItem/tokens");
 var import_styles = require("./styles.css");
 function PhoneNumberInput({
+  config,
   className,
   countries,
   defaultCountry = "CN",
@@ -47,72 +50,89 @@ function PhoneNumberInput({
   labels,
   limitMaxLength = true,
   onChange,
-  placeholder = "请输入手机号",
+  placeholder,
   readOnly,
   size,
   style,
   testID = "auth-phone-number",
   value
 }) {
+  const t = (0, import_react.useAuthTranslation)(config);
+  const inputTokens = (0, import_tokens.useInputItemTokens)(size);
+  if (placeholder === void 0) placeholder = t("auth.enter", { label: t("auth.phone") });
   const parsed = (0, import_phone.splitPhoneNumber)(value, defaultCountry);
-  const [country, setCountry] = (0, import_react.useState)(parsed.countryCode);
-  const options = (0, import_react.useMemo)(() => (0, import_phone.getPhoneCountryOptions)(countries), [countries]);
+  const [country, setCountry] = (0, import_react2.useState)(parsed.countryCode);
+  const options = (0, import_react2.useMemo)(() => (0, import_phone.getPhoneCountryOptions)(countries), [countries]);
   const selected = options.find((option) => option.countryCode === country) ?? options[0];
   const nationalNumber = (0, import_phone.splitPhoneNumber)(
     value,
     (selected == null ? void 0 : selected.countryCode) ?? defaultCountry
   ).nationalNumber;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (options.some((option) => option.countryCode === parsed.countryCode)) {
       setCountry(parsed.countryCode);
     }
   }, [options, parsed.countryCode]);
-  return /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: `x-taro-auth-phone ${className ?? ""}`, "data-testid": testID, style }, /* @__PURE__ */ import_react.default.createElement(
-    import_picker.Picker,
+  return /* @__PURE__ */ import_react2.default.createElement(
+    import_components.View,
     {
-      ariaLabel: "选择国家或地区",
-      columns: options.map((option) => ({
-        label: `${option.flag} ${(labels == null ? void 0 : labels[option.countryCode]) ?? option.countryCode} ${option.callingCode}`,
-        value: option.countryCode
-      })),
-      disabled: disabled || readOnly,
-      title: "选择国家或地区",
-      value: [(selected == null ? void 0 : selected.countryCode) ?? defaultCountry],
-      onConfirm: (nextValue) => {
-        const next = options.find((option) => option.countryCode === nextValue[0]);
-        if (!next) return;
-        setCountry(next.countryCode);
-        onChange((0, import_phone.composePhoneNumber)(next.countryCode, nationalNumber));
+      className: `x-taro-auth-phone ${className ?? ""}`,
+      "data-testid": testID,
+      style: {
+        "--x-taro-auth-phone-height": `${inputTokens.height}px`,
+        "--x-taro-auth-phone-font-size": `${inputTokens.fontSize}px`,
+        ...style
       }
     },
-    (_items, actions) => /* @__PURE__ */ import_react.default.createElement(
-      import_components.View,
+    /* @__PURE__ */ import_react2.default.createElement(
+      import_picker.Picker,
       {
-        ariaLabel: "选择国家或地区",
-        className: "x-taro-auth-phone__country",
-        role: "button",
-        onClick: actions.open
+        ariaLabel: t("auth.chooseCountry"),
+        columns: options.map((option) => ({
+          label: `${option.flag} ${(labels == null ? void 0 : labels[option.countryCode]) ?? option.countryCode} ${option.callingCode}`,
+          value: option.countryCode
+        })),
+        disabled: disabled || readOnly,
+        title: t("auth.chooseCountry"),
+        value: [(selected == null ? void 0 : selected.countryCode) ?? defaultCountry],
+        onConfirm: (nextValue) => {
+          const next = options.find((option) => option.countryCode === nextValue[0]);
+          if (!next) return;
+          setCountry(next.countryCode);
+          onChange((0, import_phone.composePhoneNumber)(next.countryCode, nationalNumber));
+        }
       },
-      /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, selected == null ? void 0 : selected.flag),
-      /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, selected == null ? void 0 : selected.callingCode),
-      /* @__PURE__ */ import_react.default.createElement(import_components.Text, { "aria-hidden": true }, "⌄")
+      (_items, actions) => /* @__PURE__ */ import_react2.default.createElement(
+        import_components.View,
+        {
+          ariaLabel: t("auth.chooseCountry"),
+          className: "x-taro-auth-phone__country",
+          role: "button",
+          onClick: actions.open
+        },
+        /* @__PURE__ */ import_react2.default.createElement(import_components.Text, null, selected == null ? void 0 : selected.flag),
+        /* @__PURE__ */ import_react2.default.createElement(import_components.Text, null, selected == null ? void 0 : selected.callingCode),
+        /* @__PURE__ */ import_react2.default.createElement(import_components.Text, { "aria-hidden": true }, "⌄")
+      )
+    ),
+    /* @__PURE__ */ import_react2.default.createElement(
+      import_inputItem.InputItem,
+      {
+        ariaLabel: t("auth.phone"),
+        className: "x-taro-auth-phone__input",
+        disabled,
+        error,
+        maxLength: limitMaxLength ? 15 : void 0,
+        onChange: (next) => onChange((0, import_phone.composePhoneNumber)(country, next.replace(/\D/g, ""))),
+        placeholder,
+        readOnly,
+        size,
+        style: { minHeight: inputTokens.height - 2 },
+        type: "tel",
+        value: nationalNumber
+      }
     )
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_inputItem.InputItem,
-    {
-      ariaLabel: "手机号",
-      className: "x-taro-auth-phone__input",
-      disabled,
-      error,
-      maxLength: limitMaxLength ? 15 : void 0,
-      onChange: (next) => onChange((0, import_phone.composePhoneNumber)(country, next.replace(/\D/g, ""))),
-      placeholder,
-      readOnly,
-      size,
-      type: "tel",
-      value: nationalNumber
-    }
-  ));
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/lib/auth/provider.d.ts

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import type { AuthConfig, AuthFailureHandler, AuthServices, AuthSession, ReauthenticationRequiredHandler } from '@hanwenbo/x-auth-core/types';
 import { type AuthThemeTokens } from './theme';
 export interface AuthProviderProps<Session extends AuthSession = AuthSession> extends PropsWithChildren {
@@ -8,6 +8,6 @@ export interface AuthProviderProps<Session extends AuthSession = AuthSession> ex
     services?: AuthServices<Session>;
     tokens?: AuthThemeTokens;
 }
-export declare function AuthProvider<Session extends AuthSession = AuthSession>({ children, config, onAuthError, onReauthenticationRequired, services, tokens }: AuthProviderProps<Session>): React.JSX.Element;
+export declare function AuthProvider<Session extends AuthSession = AuthSession>({ children, config, onAuthError, onReauthenticationRequired, services, tokens }: AuthProviderProps<Session>): import("react/jsx-runtime").JSX.Element;
 export declare function useAuthTheme(tokens?: AuthThemeTokens): AuthThemeTokens;
 //# sourceMappingURL=provider.d.ts.map