@hanwenbo/x-taro-ui 0.0.1

package/es/components/switch/switch.js

@@ -0,0 +1,252 @@
+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); }
+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; }
+/**
+ * Switch Component
+ * With variant/size support
+ */
+
+import React, { useState, useCallback, useImperativeHandle, useRef } from 'react';
+import { View, Text } from '@tarojs/components';
+import { usePressable } from "../../patterns";
+import { classNames } from "../../utils";
+import { resolveTaroAccessibilityProps } from "../../utils/taroProps";
+import { useSwitchTokens, useSwitchColors } from "./tokens";
+import { useTokens } from "../../theme";
+import { Icon } from "../icon";
+import { useConfigProvider } from "../configProvider";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var checked = props.checked,
+    defaultChecked = props.defaultChecked,
+    _props$disabled = props.disabled,
+    disabledProp = _props$disabled === void 0 ? false : _props$disabled,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    sizeProp = props.size,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
+    checkedChildren = props.checkedChildren,
+    uncheckedChildren = props.uncheckedChildren,
+    checkedColor = props.checkedColor,
+    uncheckedColor = props.uncheckedColor,
+    onChange = props.onChange,
+    className = props.className,
+    style = props.style,
+    ariaLabel = props.ariaLabel,
+    _props$testID = props.testID,
+    testID = _props$testID === void 0 ? 'switch' : _props$testID;
+  var _useState = useState(defaultChecked || false),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var rootRef = useRef(null);
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    radius = _useTokens.radius;
+  var config = useConfigProvider();
+  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : config.size;
+  var disabled = Boolean(disabledProp || config.disabled);
+  var isControlled = checked !== undefined;
+  var currentChecked = isControlled ? checked : internalChecked;
+  var isDisabled = disabled || loading;
+  var tokens = useSwitchTokens(size);
+  var switchColors = useSwitchColors(variant, currentChecked, disabled);
+  var customStateColor = currentChecked ? checkedColor : uncheckedColor;
+  var resolvedSwitchColors = _objectSpread(_objectSpread({}, switchColors), {}, {
+    track: variant === 'outline' ? switchColors.track : customStateColor !== null && customStateColor !== void 0 ? customStateColor : switchColors.track,
+    trackBorder: variant === 'outline' ? customStateColor !== null && customStateColor !== void 0 ? customStateColor : switchColors.trackBorder : switchColors.trackBorder,
+    handle: variant === 'outline' ? customStateColor !== null && customStateColor !== void 0 ? customStateColor : switchColors.handle : switchColors.handle,
+    text: variant === 'outline' ? customStateColor !== null && customStateColor !== void 0 ? customStateColor : switchColors.text : switchColors.text
+  });
+  var commitChecked = useCallback(function () {
+    if (isDisabled) {
+      return;
+    }
+    var newChecked = !currentChecked;
+    if (!isControlled) {
+      setInternalChecked(newChecked);
+    }
+    onChange === null || onChange === void 0 || onChange(newChecked);
+  }, [currentChecked, isControlled, isDisabled, onChange]);
+  useImperativeHandle(ref, function () {
+    return {
+      toggle: commitChecked,
+      focus: function focus() {
+        if (!isDisabled) {
+          var _rootRef$current, _rootRef$current$focu;
+          (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 || (_rootRef$current$focu = _rootRef$current.focus) === null || _rootRef$current$focu === void 0 || _rootRef$current$focu.call(_rootRef$current);
+        }
+      },
+      blur: function blur() {
+        var _rootRef$current2, _rootRef$current2$blu;
+        return (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 || (_rootRef$current2$blu = _rootRef$current2.blur) === null || _rootRef$current2$blu === void 0 ? void 0 : _rootRef$current2$blu.call(_rootRef$current2);
+      }
+    };
+  }, [commitChecked, isDisabled]);
+  var _usePressable = usePressable({
+      disabled: isDisabled,
+      onPress: commitChecked,
+      scale: 0.985
+    }),
+    pressed = _usePressable.pressed,
+    handlers = _usePressable.handlers,
+    pressStyle = _usePressable.style;
+  var hasChildren = checkedChildren !== undefined && checkedChildren !== null || uncheckedChildren !== undefined && uncheckedChildren !== null;
+  var trackWidth = hasChildren ? tokens.width + tokens.textTrackExtra : tokens.width;
+  var trackBorderWidth = variant === 'outline' ? 2 : 0;
+  var handleInset = variant === 'outline' ? 0 : tokens.handleGap;
+  var handleTravel = trackWidth - tokens.handleSize - handleInset * 2 - trackBorderWidth * 2;
+  var labelInset = tokens.handleSize + tokens.handleGap + 2;
+  var labelFontSize = size === 'large' ? 14 : size === 'small' || size === 'mini' ? 11 : 12;
+  var switchStyle = {
+    position: 'relative',
+    display: 'inline-flex',
+    flex: '0 0 auto',
+    width: "".concat(trackWidth, "px"),
+    minWidth: "".concat(trackWidth, "px"),
+    maxWidth: "".concat(trackWidth, "px"),
+    height: "".concat(tokens.height, "px"),
+    borderRadius: radius.get('full'),
+    backgroundColor: resolvedSwitchColors.track,
+    opacity: resolvedSwitchColors.opacity,
+    transition: 'background-color var(--x-duration-emphasis) var(--x-easing-standard), border-color var(--x-duration-emphasis) var(--x-easing-standard), opacity var(--x-duration-emphasis) var(--x-easing-standard)',
+    border: variant === 'outline' ? "2px solid ".concat(resolvedSwitchColors.trackBorder) : 'none',
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    flexShrink: 0,
+    verticalAlign: 'middle'
+  };
+  var handleStyle = {
+    position: 'absolute',
+    top: "".concat(handleInset, "px"),
+    left: "".concat(handleInset, "px"),
+    width: "".concat(tokens.handleSize, "px"),
+    height: "".concat(tokens.handleSize, "px"),
+    borderRadius: radius.get('full'),
+    backgroundColor: resolvedSwitchColors.handle,
+    boxShadow: variant === 'outline' ? 'none' : tokens.shadow,
+    transition: 'transform var(--x-duration-emphasis) var(--x-easing-standard)',
+    animation: loading ? 'x-switch-thumb-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' : 'none',
+    transform: currentChecked ? "translateX(".concat(handleTravel, "px)") : 'translateX(0)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 2,
+    pointerEvents: 'none'
+  };
+  var labelStyle = {
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    zIndex: 1,
+    pointerEvents: 'none',
+    paddingLeft: currentChecked ? tokens.handleGap + 2 : labelInset,
+    paddingRight: currentChecked ? labelInset : tokens.handleGap + 2,
+    justifyContent: currentChecked ? 'flex-start' : 'flex-end'
+  };
+  var labelTextStyle = {
+    fontSize: labelFontSize,
+    fontWeight: 600,
+    lineHeight: 1,
+    whiteSpace: 'nowrap',
+    color: resolvedSwitchColors.text
+  };
+  var wrapperStyle = _objectSpread({
+    display: 'inline-flex',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    flexShrink: 0,
+    outline: 'none',
+    boxShadow: focused && !isDisabled ? "0 0 0 2px ".concat(tokens.ringOffset, ", 0 0 0 4px ").concat(tokens.ring) : 'none',
+    cursor: loading ? 'wait' : disabled ? 'not-allowed' : 'pointer',
+    transform: pressStyle.transform,
+    transition: "".concat(pressStyle.transition, ", box-shadow var(--x-duration-emphasis) var(--x-easing-standard)")
+  }, style);
+  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread(_objectSpread({
+    ref: rootRef,
+    className: classNames("".concat(config.prefixCls, "-switch-wrapper"), className, pressed && "".concat(config.prefixCls, "-switch-wrapper--pressed")),
+    style: wrapperStyle
+  }, resolveTaroAccessibilityProps('switch', ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : '开关')), {}, {
+    "aria-checked": currentChecked,
+    "aria-disabled": isDisabled,
+    tabIndex: isDisabled ? -1 : 0,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      var key = event.key;
+      if (key === 'Enter' || key === ' ') {
+        var _preventDefault, _ref;
+        (_preventDefault = (_ref = event).preventDefault) === null || _preventDefault === void 0 || _preventDefault.call(_ref);
+        commitChecked();
+      }
+    },
+    "data-slot": "switch-root",
+    "data-testid": testID,
+    "data-size": size,
+    "data-variant": variant,
+    "data-checked": currentChecked ? 'true' : 'false',
+    "data-disabled": disabled ? 'true' : 'false',
+    "data-loading": loading ? 'true' : 'false',
+    "data-focused": focused ? 'true' : 'false'
+  }, handlers), {}, {
+    children: /*#__PURE__*/_jsxs(View, {
+      className: classNames("".concat(config.prefixCls, "-switch"), "".concat(config.prefixCls, "-switch--").concat(size), "".concat(config.prefixCls, "-switch--").concat(variant), currentChecked && "".concat(config.prefixCls, "-switch--checked"), hasChildren && "".concat(config.prefixCls, "-switch--with-text"), disabled && "".concat(config.prefixCls, "-switch--disabled"), loading && "".concat(config.prefixCls, "-switch--loading")),
+      "data-slot": "switch-track",
+      style: switchStyle,
+      children: [hasChildren ? /*#__PURE__*/_jsx(View, {
+        className: "".concat(config.prefixCls, "-switch__label"),
+        "data-slot": "switch-label",
+        style: labelStyle,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: labelTextStyle,
+          children: currentChecked ? checkedChildren : uncheckedChildren
+        })
+      }) : null, /*#__PURE__*/_jsx(View, {
+        className: "".concat(config.prefixCls, "-switch__handle"),
+        "data-slot": "switch-thumb",
+        style: handleStyle
+      }), loading ? /*#__PURE__*/_jsx(View, {
+        className: "".concat(config.prefixCls, "-switch__loading"),
+        "data-slot": "switch-loading",
+        style: {
+          position: 'absolute',
+          inset: 0,
+          zIndex: 3,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          pointerEvents: 'none'
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "Loader2",
+          size: tokens.loadingSize,
+          spin: true,
+          color: currentChecked ? colors['primary-foreground'] : colors.foreground
+        })
+      }) : null]
+    })
+  }));
+});
+Switch.displayName = 'Switch';
+export default Switch;

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

@@ -0,0 +1,33 @@
+/**
+ * Switch Component Tokens
+ * Defines how Switch consumes design system tokens
+ */
+import type { SizeVariant } from '../../theme/types';
+import type { SwitchVariant } from './types';
+export interface SwitchTokens {
+    width: number;
+    height: number;
+    handleSize: number;
+    handleGap: number;
+    /** Extra track width when showing inner text (ON/OFF) */
+    textTrackExtra: number;
+    loadingSize: number;
+    shadow: string;
+    ring: string;
+    ringOffset: string;
+}
+/**
+ * Get switch tokens
+ */
+export declare function useSwitchTokens(size?: SizeVariant): SwitchTokens;
+/**
+ * Get switch colors for variant
+ */
+export declare function useSwitchColors(variant?: SwitchVariant, checked?: boolean, disabled?: boolean): {
+    track: string;
+    trackBorder: string;
+    handle: string;
+    text: string;
+    opacity: number;
+};
+//# sourceMappingURL=tokens.d.ts.map

package/es/components/switch/tokens.js

@@ -0,0 +1,108 @@
+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); }
+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); }
+/**
+ * Switch Component Tokens
+ * Defines how Switch consumes design system tokens
+ */
+
+import { useMemo } from 'react';
+import { scaleMobileSelection, useTokens, withOpacity } from "../../theme";
+/**
+ * Get switch tokens
+ */
+export function useSwitchTokens() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'middle';
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors;
+  return useMemo(function () {
+    var sizeMap = {
+      mini: {
+        width: 32,
+        height: 16,
+        handleSize: 12,
+        handleGap: 2,
+        textTrackExtra: 18
+      },
+      small: {
+        width: 32,
+        height: 16,
+        handleSize: 12,
+        handleGap: 2,
+        textTrackExtra: 18
+      },
+      middle: {
+        width: 44,
+        height: 24,
+        handleSize: 20,
+        handleGap: 2,
+        textTrackExtra: 24
+      },
+      large: {
+        width: 56,
+        height: 28,
+        handleSize: 24,
+        handleGap: 2,
+        textTrackExtra: 28
+      }
+    };
+    var config = sizeMap[size];
+
+    // --x-switch-thumb-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 18%, transparent)
+    var shadowColor = withOpacity(colors.foreground, 0.18);
+    return {
+      width: scaleMobileSelection(config.width),
+      height: scaleMobileSelection(config.height),
+      handleSize: scaleMobileSelection(config.handleSize),
+      handleGap: scaleMobileSelection(config.handleGap),
+      textTrackExtra: scaleMobileSelection(config.textTrackExtra),
+      loadingSize: scaleMobileSelection(size === 'mini' ? 10 : size === 'small' ? 12 : size === 'middle' ? 16 : 20),
+      shadow: "0 1px 2px ".concat(shadowColor),
+      // px, not rpx
+      ring: colors.primary,
+      ringOffset: colors.background
+    };
+  }, [size, colors]);
+}
+
+/**
+ * Get switch colors for variant
+ */
+export function useSwitchColors() {
+  var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
+  var checked = arguments.length > 1 ? arguments[1] : undefined;
+  var disabled = arguments.length > 2 ? arguments[2] : undefined;
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors;
+  return useMemo(function () {
+    // checked: --x-switch-surface-checked: var(--primary)
+    // unchecked: --x-switch-surface-unchecked: var(--input) -> 用更深的颜色让用户能看到
+    var checkedColor = checked ? colors.primary : colors.border;
+    var baseColors = {
+      track: checkedColor,
+      trackBorder: 'transparent',
+      handle: colors.background,
+      text: colors.background,
+      opacity: disabled ? 0.5 : 1
+    };
+    switch (variant) {
+      case 'filled':
+        return _objectSpread(_objectSpread({}, baseColors), {}, {
+          track: checked ? colors.primary : colors.muted
+        });
+      case 'outline':
+        return _objectSpread(_objectSpread({}, baseColors), {}, {
+          track: 'transparent',
+          trackBorder: checked ? colors.primary : colors.border,
+          handle: checked ? colors.primary : colors['muted-foreground'],
+          text: checked ? colors.primary : colors['muted-foreground']
+        });
+      case 'default':
+      default:
+        return baseColors;
+    }
+  }, [variant, checked, disabled, colors]);
+}

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

@@ -0,0 +1,42 @@
+/**
+ * Switch Component Types
+ */
+/// <reference types="react" />
+import type { SizeVariant } from '../../theme/types';
+export declare type SwitchVariant = 'default' | 'filled' | 'outline';
+export interface SwitchRef {
+    toggle: () => void;
+    focus: () => void;
+    blur: () => void;
+}
+export interface SwitchProps {
+    /** Checked state */
+    checked?: boolean;
+    /** Default checked (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Size variant */
+    size?: SizeVariant;
+    /** Visual style variant */
+    variant?: SwitchVariant;
+    /** Checked children (inner text) */
+    checkedChildren?: React.ReactNode;
+    /** Unchecked children (inner text) */
+    uncheckedChildren?: React.ReactNode;
+    checkedColor?: string;
+    uncheckedColor?: string;
+    /** Change handler */
+    onChange?: (checked: boolean) => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+    /** Accessible label for custom switch semantics */
+    ariaLabel?: string;
+    /** Stable automation id */
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/switch/types.js

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

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

@@ -0,0 +1,4 @@
+export { TabBar, TabBarItem } from './tabBar';
+export type { TabBarProps, TabBarItem as TabBarItemData, TabBarItemProps, TabBarSize, TabBarVariant } from './types';
+export { default } from './tabBar';
+//# sourceMappingURL=index.d.ts.map

package/es/components/tabBar/index.js

@@ -0,0 +1,2 @@
+export { TabBar, TabBarItem } from "./tabBar";
+export { default } from "./tabBar";

package/es/components/tabBar/tabBar.d.ts

@@ -0,0 +1,12 @@
+/**
+ * TabBar Component
+ * Bottom navigation bar aligned with x-mobile-ui while retaining the Taro items API.
+ */
+import React from 'react';
+import type { TabBarItemProps, TabBarProps } from './types';
+export declare const TabBarItem: React.FC<TabBarItemProps>;
+export declare const TabBar: React.FC<TabBarProps> & {
+    Item: typeof TabBarItem;
+};
+export default TabBar;
+//# sourceMappingURL=tabBar.d.ts.map