@hanwenbo/x-taro-ui 0.0.1

package/es/components/stepper/tokens.js

@@ -0,0 +1,130 @@
+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); }
+/**
+ * Stepper Component Tokens
+ * Defines how Stepper consumes design system tokens
+ */
+
+import { useMemo } from 'react';
+import { scaleMobileSelection, useTokens } from "../../theme";
+function parseSolidColor(color) {
+  var _color$match;
+  var hex = (_color$match = color.match(/^#([\da-f]{3}|[\da-f]{6})$/i)) === null || _color$match === void 0 ? void 0 : _color$match[1];
+  if (hex) {
+    var normalized = hex.length === 3 ? hex.split('').map(function (channel) {
+      return "".concat(channel).concat(channel);
+    }).join('') : hex;
+    return [Number.parseInt(normalized.slice(0, 2), 16), Number.parseInt(normalized.slice(2, 4), 16), Number.parseInt(normalized.slice(4, 6), 16)];
+  }
+  var rgb = color.match(/^rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)/i);
+  return rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] : undefined;
+}
+function withColorOpacity(color, opacity) {
+  var rgb = parseSolidColor(color);
+  return rgb ? "rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", ").concat(opacity, ")") : color;
+}
+function mixSolidColors(foreground, background, foregroundWeight) {
+  var foregroundRgb = parseSolidColor(foreground);
+  var backgroundRgb = parseSolidColor(background);
+  if (!foregroundRgb || !backgroundRgb) return background;
+  var mixed = foregroundRgb.map(function (channel, index) {
+    return Math.round(channel * foregroundWeight + backgroundRgb[index] * (1 - foregroundWeight));
+  });
+  return "rgb(".concat(mixed[0], ", ").concat(mixed[1], ", ").concat(mixed[2], ")");
+}
+
+/**
+ * Get stepper tokens
+ */
+export function useStepperTokens() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'middle';
+  var _useTokens = useTokens(),
+    radius = _useTokens.radius;
+  return useMemo(function () {
+    var sizeMap = {
+      mini: {
+        buttonSize: 24,
+        inputWidth: 48,
+        fontSize: 12,
+        lineHeight: 18,
+        iconSize: 12
+      },
+      small: {
+        buttonSize: 32,
+        inputWidth: 64,
+        fontSize: 14,
+        lineHeight: 20,
+        iconSize: 14
+      },
+      middle: {
+        buttonSize: 40,
+        inputWidth: 80,
+        fontSize: 16,
+        lineHeight: 24,
+        iconSize: 16
+      },
+      large: {
+        buttonSize: 48,
+        inputWidth: 96,
+        fontSize: 18,
+        lineHeight: 28,
+        iconSize: 20
+      }
+    };
+    var config = sizeMap[size];
+    return {
+      buttonSize: scaleMobileSelection(config.buttonSize),
+      inputWidth: scaleMobileSelection(config.inputWidth),
+      fontSize: config.fontSize,
+      lineHeight: config.lineHeight,
+      iconSize: scaleMobileSelection(config.iconSize),
+      inputPaddingX: scaleMobileSelection(8),
+      borderRadius: radius.md,
+      borderWidth: 1
+    };
+  }, [radius.md, size]);
+}
+
+/**
+ * Get stepper colors for variant
+ */
+export function useStepperColors() {
+  var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors;
+  return useMemo(function () {
+    var borderDefault = colors.input;
+    var separator = borderDefault;
+    var baseColors = {
+      background: colors.card,
+      border: borderDefault,
+      focusBorder: colors.primary,
+      ring: withColorOpacity(colors.primary, 0.18),
+      separator: separator,
+      text: colors.foreground,
+      buttonText: colors.foreground,
+      pressedBackground: colors.accent,
+      pressedText: colors['accent-foreground'],
+      disabledText: colors['muted-foreground']
+    };
+    switch (variant) {
+      case 'filled':
+        return _objectSpread(_objectSpread({}, baseColors), {}, {
+          background: withColorOpacity(colors.muted, 0.88)
+        });
+      case 'outline':
+        return _objectSpread(_objectSpread({}, baseColors), {}, {
+          background: colors.card,
+          border: mixSolidColors(colors.foreground, colors.input, 0.12),
+          separator: borderDefault
+        });
+      case 'default':
+      default:
+        return baseColors;
+    }
+  }, [variant, colors]);
+}

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

@@ -0,0 +1,50 @@
+/**
+ * Stepper Component Types
+ */
+import type { CSSProperties } from 'react';
+import type { ViewProps as TaroViewProps } from '@tarojs/components/types/View';
+import type { SizeVariant } from '../../theme/types';
+declare type NativeStepperViewProps = Omit<TaroViewProps, 'ariaLabel' | 'children' | 'className' | 'onBlur' | 'onFocus' | 'ref' | 'style'>;
+export declare type StepperVariant = 'default' | 'filled' | 'outline';
+export interface StepperRef {
+    /** Focus the value input. */
+    focus: () => void;
+    /** Blur the value input. */
+    blur: () => void;
+}
+export interface StepperProps extends NativeStepperViewProps {
+    /** Current value */
+    value?: number;
+    /** Default value (uncontrolled) */
+    defaultValue?: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step size */
+    step?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Allow input directly */
+    allowEmpty?: boolean;
+    /** Size variant */
+    size?: SizeVariant;
+    /** Visual style variant */
+    variant?: StepperVariant;
+    /** Change handler */
+    onChange?: (value: number | null) => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+    /** Stable selector for tests and automation. */
+    testID?: string;
+    /** Accessible label used by the control and its actions. */
+    ariaLabel?: string;
+    digits?: number;
+    disableInput?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/es/components/stepper/types.js

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

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

@@ -0,0 +1,3 @@
+export { Steps } from './steps';
+export type { StepItem, StepRenderInfo, StepsProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/es/components/steps/index.js

@@ -0,0 +1 @@
+export { Steps } from "./steps";

package/es/components/steps/steps.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { StepsProps } from './types';
+export declare const Steps: React.FC<StepsProps>;
+export default Steps;
+//# sourceMappingURL=steps.d.ts.map

package/es/components/steps/steps.js

@@ -0,0 +1,204 @@
+var _excluded = ["items", "current", "direction", "status", "progressDot", "onChange", "children", "className", "style", "ariaLabel"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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); }
+import React from 'react';
+import { Text, View } from '@tarojs/components';
+import { usePressable } from "../../patterns";
+import { classNames } from "../../utils";
+import { designSystemMotion, designSystemRadius, designSystemSpacing, getTypographySize, useTheme } from "../../theme";
+import { renderTextNode } from "../_shared/render";
+import { useConfig } from "../configProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var statusLabels = {
+  wait: '等待中',
+  process: '进行中',
+  finish: '已完成',
+  error: '错误'
+};
+function StepView(_ref) {
+  var _item$icon;
+  var item = _ref.item,
+    index = _ref.index,
+    status = _ref.status,
+    progressDot = _ref.progressDot,
+    onChange = _ref.onChange;
+  var config = useConfig();
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var handleChange = onChange ? function () {
+    return onChange(index);
+  } : undefined;
+  var interactive = Boolean(handleChange);
+  var clickable = interactive && !item.disabled;
+  var pressable = usePressable({
+    disabled: !clickable,
+    onPress: clickable ? handleChange : undefined,
+    scale: 0.985
+  });
+  var active = status === 'finish' || status === 'process';
+  var markerColor = active ? theme.colors.primary : status === 'error' ? theme.colors.destructive : theme.colors.border;
+  var markerForeground = active ? theme.colors['primary-foreground'] : status === 'error' ? theme.colors['destructive-foreground'] : theme.colors['muted-foreground'];
+  var markerBackground = status === 'wait' ? theme.colors.background : markerColor;
+  var titleColor = status === 'wait' ? theme.colors['muted-foreground'] : status === 'error' ? theme.colors.destructive : theme.colors.foreground;
+  var renderInfo = _objectSpread(_objectSpread({}, item), {}, {
+    index: index,
+    status: status
+  });
+  var accessibleTitle = typeof item.title === 'string' || typeof item.title === 'number' ? String(item.title) : "\u6B65\u9AA4 ".concat(index + 1);
+  var indicatorStyle = {
+    width: 24,
+    height: 24,
+    flexShrink: 0,
+    borderRadius: designSystemRadius.full,
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: markerBackground,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: markerColor,
+    transition: "background-color ".concat(designSystemMotion.durationsMs.emphasis, "ms ").concat(designSystemMotion.easing.standard, ", border-color ").concat(designSystemMotion.durationsMs.emphasis, "ms ").concat(designSystemMotion.easing.standard)
+  };
+  var defaultIndicator = /*#__PURE__*/_jsx(View, {
+    className: "".concat(config.prefixCls, "-steps__indicator"),
+    "data-slot": "steps-indicator",
+    style: indicatorStyle,
+    children: (_item$icon = item.icon) !== null && _item$icon !== void 0 ? _item$icon : /*#__PURE__*/_jsx(Text, {
+      style: {
+        color: markerForeground,
+        fontSize: getTypographySize('xs'),
+        fontWeight: '600'
+      },
+      children: index + 1
+    })
+  });
+  var dotIndicatorStyle = _objectSpread(_objectSpread({}, indicatorStyle), {}, {
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    borderColor: 'transparent'
+  });
+  var indicator = typeof progressDot === 'function' ? progressDot(defaultIndicator, renderInfo) : progressDot ? /*#__PURE__*/_jsx(View, {
+    className: "".concat(config.prefixCls, "-steps__indicator"),
+    "data-slot": "steps-indicator",
+    style: dotIndicatorStyle,
+    children: /*#__PURE__*/_jsx(View, {
+      className: "".concat(config.prefixCls, "-steps__dot"),
+      "data-slot": "steps-dot",
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: designSystemRadius.full,
+        backgroundColor: markerColor
+      }
+    })
+  }) : defaultIndicator;
+  var opacityTransition = "opacity ".concat(designSystemMotion.durationsMs.emphasis, "ms ").concat(designSystemMotion.easing.standard);
+  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
+    role: interactive ? 'button' : 'listitem',
+    ariaRole: interactive ? 'button' : 'listitem',
+    ariaLabel: interactive ? "".concat(accessibleTitle, "\uFF0C").concat(statusLabels[status]) : undefined,
+    "aria-disabled": item.disabled || undefined,
+    "data-slot": "steps-item",
+    "data-status": status,
+    "data-index": index,
+    "data-active": active ? 'true' : 'false',
+    "data-disabled": item.disabled ? 'true' : 'false',
+    "data-pressed": pressable.pressed ? 'true' : 'false',
+    className: classNames("".concat(config.prefixCls, "-step"), "".concat(config.prefixCls, "-step--").concat(status), clickable && "".concat(config.prefixCls, "-step--clickable"), item.disabled && "".concat(config.prefixCls, "-step--disabled")),
+    style: _objectSpread(_objectSpread({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: designSystemSpacing['2'],
+      minWidth: 0,
+      opacity: item.disabled ? 0.5 : 1,
+      cursor: clickable ? 'pointer' : 'default'
+    }, clickable ? pressable.style : {}), {}, {
+      transition: clickable ? "".concat(pressable.style.transition, ", ").concat(opacityTransition) : opacityTransition
+    })
+  }, clickable ? pressable.handlers : {}), {}, {
+    children: [indicator, /*#__PURE__*/_jsxs(View, {
+      className: "".concat(config.prefixCls, "-steps__content"),
+      "data-slot": "steps-content",
+      style: {
+        minWidth: 0,
+        alignItems: 'flex-start',
+        textAlign: 'left',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: designSystemSpacing['1']
+      },
+      children: [renderTextNode(item.title, {
+        fontSize: getTypographySize('sm'),
+        lineHeight: '20px',
+        fontWeight: '400',
+        color: titleColor
+      }, {
+        className: "".concat(config.prefixCls, "-steps__title"),
+        'data-slot': 'steps-title'
+      }), renderTextNode(item.description, {
+        fontSize: getTypographySize('xs'),
+        lineHeight: '18px',
+        color: theme.colors['muted-foreground']
+      }, {
+        className: "".concat(config.prefixCls, "-steps__description"),
+        'data-slot': 'steps-description'
+      })]
+    })]
+  }));
+}
+export var Steps = function Steps(_ref2) {
+  var items = _ref2.items,
+    _ref2$current = _ref2.current,
+    current = _ref2$current === void 0 ? 0 : _ref2$current,
+    _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'horizontal' : _ref2$direction,
+    _ref2$status = _ref2.status,
+    status = _ref2$status === void 0 ? 'process' : _ref2$status,
+    _ref2$progressDot = _ref2.progressDot,
+    progressDot = _ref2$progressDot === void 0 ? false : _ref2$progressDot,
+    onChange = _ref2.onChange,
+    children = _ref2.children,
+    className = _ref2.className,
+    style = _ref2.style,
+    ariaLabel = _ref2.ariaLabel,
+    viewProps = _objectWithoutProperties(_ref2, _excluded);
+  var config = useConfig();
+  var isVertical = direction === 'vertical';
+  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
+    "data-slot": "steps-root",
+    "data-direction": direction,
+    className: classNames("".concat(config.prefixCls, "-steps"), "".concat(config.prefixCls, "-steps--").concat(direction), className),
+    style: _objectSpread({
+      display: 'flex',
+      flexDirection: isVertical ? 'column' : 'row',
+      flexWrap: isVertical ? 'nowrap' : 'wrap',
+      gap: designSystemSpacing['3']
+    }, style),
+    role: onChange ? 'group' : 'list',
+    ariaRole: onChange ? 'group' : 'list',
+    ariaLabel: ariaLabel
+  }, viewProps), {}, {
+    children: items === undefined ? children : items.map(function (item, index) {
+      var _item$status, _item$key;
+      var itemStatus = (_item$status = item.status) !== null && _item$status !== void 0 ? _item$status : index < current ? 'finish' : index === current ? status : 'wait';
+      return /*#__PURE__*/_jsx(StepView, {
+        item: item,
+        index: index,
+        status: itemStatus,
+        progressDot: progressDot,
+        onChange: onChange
+      }, (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : index);
+    })
+  }));
+};
+Steps.displayName = 'Steps';
+export default Steps;

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

@@ -0,0 +1,29 @@
+import type { CSSProperties, Key, ReactNode } from 'react';
+import type { ViewProps as TaroViewProps } from '@tarojs/components/types/View';
+declare type NativeStepsViewProps = Omit<TaroViewProps, 'ariaLabel' | 'children' | 'className' | 'ref' | 'style'>;
+export interface StepItem {
+    key?: Key;
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    status?: 'wait' | 'process' | 'finish' | 'error';
+    disabled?: boolean;
+}
+export interface StepRenderInfo extends StepItem {
+    index: number;
+    status: NonNullable<StepItem['status']>;
+}
+export interface StepsProps extends NativeStepsViewProps {
+    items?: StepItem[];
+    current?: number;
+    direction?: 'horizontal' | 'vertical';
+    status?: 'process' | 'finish' | 'error' | 'wait';
+    onChange?: (current: number) => void;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+    progressDot?: boolean | ((iconDot: ReactNode, info: StepRenderInfo) => ReactNode);
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/es/components/steps/types.js

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

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

@@ -0,0 +1,4 @@
+export * from './types';
+export { Swiper, SwiperItem } from './swiper';
+export { default } from './swiper';
+//# sourceMappingURL=index.d.ts.map

package/es/components/swiper/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { Swiper, SwiperItem } from "./swiper";
+export { default } from "./swiper";

package/es/components/swiper/swiper.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SwiperItemProps, SwiperProps, SwiperRef } from './types';
+export declare const Swiper: React.ForwardRefExoticComponent<Omit<SwiperProps, "ref"> & React.RefAttributes<SwiperRef>>;
+export declare const SwiperItem: React.FC<SwiperItemProps>;
+export default Swiper;
+//# sourceMappingURL=swiper.d.ts.map