@hanwenbo/x-taro-ui 0.0.1

package/es/components/attachment/attachment.js

@@ -0,0 +1,451 @@
+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); }
+/**
+ * Attachment Component
+ *
+ * Taro (H5 + WeApp) port of the compositional Attachment API shared with
+ * x-mobile-ui and x-rn-ui: Attachment + Media/Content/Title/Description/
+ * Actions/Action/Trigger/Group coordinated by React Context. Titles sweep
+ * with <Shimmer> while uploading/processing, error state switches to
+ * destructive tokens, and Group reuses the horizontal <ScrollFade>.
+ */
+
+import React, { createContext, useContext } from 'react';
+import { Image, Text, View } from '@tarojs/components';
+import { classNames } from "../../utils";
+import { resolveLocaleText } from "../../utils/locale";
+import { resolveTaroAccessibilityProps } from "../../utils/taroProps";
+import { useTokens } from "../../theme";
+import { useConfig, useConfigProvider } from "../configProvider";
+import { Icon } from "../icon";
+import { ScrollFade } from "../scrollFade";
+import { Shimmer } from "../shimmer";
+import { jsx as _jsx } from "react/jsx-runtime";
+// ========================================
+// Context
+// ========================================
+
+var AttachmentContext = /*#__PURE__*/createContext({
+  state: 'done',
+  size: 'middle',
+  orientation: 'horizontal'
+});
+var useAttachment = function useAttachment() {
+  return useContext(AttachmentContext);
+};
+var ELLIPSIS_STYLE = {
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  maxWidth: '100%'
+};
+
+// ========================================
+// Attachment 根容器
+// ========================================
+
+export var Attachment = function Attachment(_ref) {
+  var _ref$state = _ref.state,
+    state = _ref$state === void 0 ? 'done' : _ref$state,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$testID = _ref.testID,
+    testID = _ref$testID === void 0 ? 'attachment' : _ref$testID;
+  var config = useConfig();
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    spacing = _useTokens.spacing,
+    radius = _useTokens.radius;
+  var sizeStyle = {
+    small: {
+      gap: spacing['2'],
+      padding: spacing['2']
+    },
+    middle: {
+      gap: spacing['3'],
+      padding: spacing['3']
+    },
+    large: {
+      gap: spacing['4'],
+      padding: spacing['4']
+    }
+  };
+  var resolved = sizeStyle[size];
+  return /*#__PURE__*/_jsx(AttachmentContext.Provider, {
+    value: {
+      state: state,
+      size: size,
+      orientation: orientation
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      "data-slot": "attachment",
+      "data-testid": testID,
+      className: classNames("".concat(config.prefixCls, "-attachment"), "".concat(config.prefixCls, "-attachment--").concat(size), "".concat(config.prefixCls, "-attachment--").concat(orientation), state === 'error' && "".concat(config.prefixCls, "-attachment--error"), className),
+      style: _objectSpread({
+        position: 'relative',
+        display: 'flex',
+        flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+        alignItems: orientation === 'horizontal' ? 'center' : 'flex-start',
+        gap: resolved.gap,
+        padding: resolved.padding,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: state === 'error' ? colors.destructive : colors.border,
+        borderRadius: radius.xl,
+        backgroundColor: colors.card || colors.background
+      }, style),
+      children: children
+    })
+  });
+};
+Attachment.displayName = 'Attachment';
+
+// ========================================
+// AttachmentMedia 媒体槽
+// ========================================
+
+export var AttachmentMedia = function AttachmentMedia(_ref2) {
+  var _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'icon' : _ref2$variant,
+    children = _ref2.children,
+    className = _ref2.className,
+    style = _ref2.style,
+    testID = _ref2.testID;
+  var config = useConfig();
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors,
+    spacing = _useTokens2.spacing,
+    radius = _useTokens2.radius;
+  var _useAttachment = useAttachment(),
+    size = _useAttachment.size,
+    orientation = _useAttachment.orientation;
+  var mediaSizeMap = {
+    small: spacing['8'],
+    middle: spacing['10'],
+    large: spacing['12']
+  };
+  var mediaSize = mediaSizeMap[size];
+  var imageCover = variant === 'image' && orientation === 'vertical';
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "attachment-media",
+    "data-testid": testID,
+    className: classNames("".concat(config.prefixCls, "-attachment__media"), className),
+    style: _objectSpread(_objectSpread({
+      zIndex: 1,
+      flexShrink: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      borderRadius: radius.md
+    }, imageCover ? {
+      height: 96,
+      width: '100%'
+    } : {
+      width: mediaSize,
+      height: mediaSize
+    }), {}, {
+      backgroundColor: variant === 'icon' ? colors.muted || colors.secondary : undefined
+    }, style),
+    children: variant === 'image' ? typeof children === 'string' ? /*#__PURE__*/_jsx(Image, {
+      src: children,
+      mode: "aspectFill",
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    }) : children : children !== null && children !== void 0 ? children : /*#__PURE__*/_jsx(Icon, {
+      name: "FileText",
+      size: mediaSize / 2,
+      color: colors['muted-foreground'] || colors.foreground
+    })
+  });
+};
+AttachmentMedia.displayName = 'AttachmentMedia';
+
+// ========================================
+// AttachmentContent 文本列容器
+// ========================================
+
+export var AttachmentContent = function AttachmentContent(_ref3) {
+  var children = _ref3.children,
+    className = _ref3.className,
+    style = _ref3.style,
+    testID = _ref3.testID;
+  var config = useConfig();
+  var _useAttachment2 = useAttachment(),
+    orientation = _useAttachment2.orientation;
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "attachment-content",
+    "data-testid": testID,
+    className: classNames("".concat(config.prefixCls, "-attachment__content"), className),
+    style: _objectSpread({
+      zIndex: 1,
+      display: 'flex',
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      width: orientation === 'vertical' ? '100%' : undefined
+    }, style),
+    children: children
+  });
+};
+AttachmentContent.displayName = 'AttachmentContent';
+
+// ========================================
+// AttachmentTitle 标题
+// ========================================
+
+var titleFontSizeMap = {
+  small: 12,
+  middle: 14,
+  large: 16
+};
+export var AttachmentTitle = function AttachmentTitle(_ref4) {
+  var children = _ref4.children,
+    className = _ref4.className,
+    style = _ref4.style,
+    testID = _ref4.testID;
+  var config = useConfig();
+  var _useTokens3 = useTokens(),
+    colors = _useTokens3.colors;
+  var _useAttachment3 = useAttachment(),
+    state = _useAttachment3.state,
+    size = _useAttachment3.size;
+  var sweeping = state === 'uploading' || state === 'processing';
+  var color = state === 'error' ? colors.destructive : colors.foreground || colors['card-foreground'];
+  var textStyle = _objectSpread(_objectSpread({
+    color: color,
+    fontSize: titleFontSizeMap[size],
+    fontWeight: 500
+  }, ELLIPSIS_STYLE), style);
+  if (sweeping && typeof children === 'string') {
+    return /*#__PURE__*/_jsx(Shimmer, {
+      color: color,
+      textStyle: textStyle,
+      className: className,
+      testID: testID,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(Text, {
+    "data-slot": "attachment-title",
+    "data-testid": testID,
+    className: classNames("".concat(config.prefixCls, "-attachment__title"), className),
+    style: textStyle,
+    children: children
+  });
+};
+AttachmentTitle.displayName = 'AttachmentTitle';
+
+// ========================================
+// AttachmentDescription 描述
+// ========================================
+
+export var AttachmentDescription = function AttachmentDescription(_ref5) {
+  var children = _ref5.children,
+    className = _ref5.className,
+    style = _ref5.style,
+    testID = _ref5.testID;
+  var config = useConfig();
+  var locale = useConfigProvider().locale;
+  var _useTokens4 = useTokens(),
+    colors = _useTokens4.colors;
+  var _useAttachment4 = useAttachment(),
+    state = _useAttachment4.state,
+    size = _useAttachment4.size;
+  var content = children;
+  if (content === undefined || content === null) {
+    if (state === 'uploading') {
+      content = resolveLocaleText(locale, 'upload.uploading', '文件上传中');
+    } else if (state === 'error') {
+      content = resolveLocaleText(locale, 'upload.error', '上传错误');
+    }
+  }
+  if (content === undefined || content === null) {
+    return null;
+  }
+  var color = state === 'error' ? colors.destructive : colors['muted-foreground'];
+  return /*#__PURE__*/_jsx(Text, {
+    "data-slot": "attachment-description",
+    "data-testid": testID,
+    className: classNames("".concat(config.prefixCls, "-attachment__description"), className),
+    style: _objectSpread(_objectSpread({
+      color: color,
+      fontSize: titleFontSizeMap[size] - 2
+    }, ELLIPSIS_STYLE), style),
+    children: content
+  });
+};
+AttachmentDescription.displayName = 'AttachmentDescription';
+
+// ========================================
+// AttachmentActions 操作区
+// ========================================
+
+export var AttachmentActions = function AttachmentActions(_ref6) {
+  var children = _ref6.children,
+    className = _ref6.className,
+    style = _ref6.style,
+    testID = _ref6.testID;
+  var config = useConfig();
+  var _useTokens5 = useTokens(),
+    spacing = _useTokens5.spacing;
+  var _useAttachment5 = useAttachment(),
+    orientation = _useAttachment5.orientation;
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "attachment-actions",
+    "data-testid": testID,
+    className: classNames("".concat(config.prefixCls, "-attachment__actions"), className),
+    style: _objectSpread({
+      zIndex: 2,
+      flexShrink: 0,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing['1'],
+      width: orientation === 'vertical' ? '100%' : undefined,
+      justifyContent: orientation === 'vertical' ? 'flex-end' : undefined
+    }, style),
+    children: children
+  });
+};
+AttachmentActions.displayName = 'AttachmentActions';
+
+// ========================================
+// AttachmentAction 操作按钮
+// ========================================
+
+export var AttachmentAction = function AttachmentAction(_ref7) {
+  var onClick = _ref7.onClick,
+    ariaLabelProp = _ref7['aria-label'],
+    ariaLabel = _ref7.ariaLabel,
+    _ref7$disabled = _ref7.disabled,
+    disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
+    children = _ref7.children,
+    className = _ref7.className,
+    style = _ref7.style,
+    testID = _ref7.testID;
+  var config = useConfig();
+  var _useTokens6 = useTokens(),
+    radius = _useTokens6.radius;
+  var resolvedLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp;
+  var handleClick = function handleClick(event) {
+    if (disabled) return;
+    onClick === null || onClick === void 0 || onClick(event);
+  };
+  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({}, resolveTaroAccessibilityProps('button', resolvedLabel)), {}, {
+    "data-slot": "attachment-action",
+    "data-testid": testID,
+    "aria-disabled": disabled || undefined,
+    className: classNames("".concat(config.prefixCls, "-attachment__action"), disabled && "".concat(config.prefixCls, "-attachment__action--disabled"), className),
+    style: _objectSpread({
+      display: 'flex',
+      width: 28,
+      height: 28,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: radius.md,
+      opacity: disabled ? 0.5 : 1
+    }, style),
+    onClick: handleClick,
+    children: children
+  }));
+};
+AttachmentAction.displayName = 'AttachmentAction';
+
+// ========================================
+// AttachmentTrigger 整卡触发层
+// ========================================
+
+export var AttachmentTrigger = function AttachmentTrigger(_ref8) {
+  var onClick = _ref8.onClick,
+    ariaLabelProp = _ref8['aria-label'],
+    ariaLabel = _ref8.ariaLabel,
+    _ref8$disabled = _ref8.disabled,
+    disabled = _ref8$disabled === void 0 ? false : _ref8$disabled,
+    className = _ref8.className,
+    style = _ref8.style,
+    testID = _ref8.testID;
+  var config = useConfig();
+  var _useTokens7 = useTokens(),
+    radius = _useTokens7.radius;
+  var resolvedLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp;
+  var handleClick = function handleClick(event) {
+    if (disabled) return;
+    onClick === null || onClick === void 0 || onClick(event);
+  };
+  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({}, resolveTaroAccessibilityProps('button', resolvedLabel)), {}, {
+    "data-slot": "attachment-trigger",
+    "data-testid": testID,
+    "aria-disabled": disabled || undefined,
+    className: classNames("".concat(config.prefixCls, "-attachment__trigger"), className),
+    style: _objectSpread({
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      zIndex: 0,
+      borderRadius: radius.xl
+    }, style),
+    onClick: handleClick
+  }));
+};
+AttachmentTrigger.displayName = 'AttachmentTrigger';
+
+// ========================================
+// AttachmentGroup 横向滚动行
+// ========================================
+
+function toPx(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    var parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+export var AttachmentGroup = function AttachmentGroup(_ref9) {
+  var gap = _ref9.gap,
+    size = _ref9.size,
+    edges = _ref9.edges,
+    children = _ref9.children,
+    onScroll = _ref9.onScroll,
+    className = _ref9.className,
+    style = _ref9.style,
+    contentStyle = _ref9.contentStyle,
+    _ref9$testID = _ref9.testID,
+    testID = _ref9$testID === void 0 ? 'attachment-group' : _ref9$testID;
+  var _useTokens8 = useTokens(),
+    spacing = _useTokens8.spacing;
+  var resolvedGap = toPx(gap, spacing['2']);
+  return /*#__PURE__*/_jsx(ScrollFade, {
+    direction: "horizontal",
+    size: size,
+    edges: edges,
+    onScroll: onScroll,
+    className: className,
+    style: style,
+    contentStyle: _objectSpread({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      gap: resolvedGap
+    }, contentStyle),
+    testID: testID,
+    children: children
+  });
+};
+AttachmentGroup.displayName = 'AttachmentGroup';
+export default Attachment;

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

@@ -0,0 +1,3 @@
+export { default, Attachment, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger, AttachmentGroup } from './attachment';
+export type { AttachmentProps, AttachmentState, AttachmentSize, AttachmentOrientation, AttachmentContextValue, AttachmentTapEvent, AttachmentMediaProps, AttachmentContentProps, AttachmentTitleProps, AttachmentDescriptionProps, AttachmentActionsProps, AttachmentActionProps, AttachmentTriggerProps, AttachmentGroupProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/es/components/attachment/index.js

@@ -0,0 +1 @@
+export { default, Attachment, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger, AttachmentGroup } from "./attachment";

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

@@ -0,0 +1,141 @@
+/**
+ * Attachment Component Types
+ *
+ * Aligned with x-design-system attachment spec and the
+ * x-mobile-ui / x-rn-ui Attachment implementations.
+ */
+/// <reference types="react" />
+import type { ScrollFadeScrollEvent } from '../scrollFade/types';
+export declare type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';
+export declare type AttachmentSize = 'small' | 'middle' | 'large';
+export declare type AttachmentOrientation = 'horizontal' | 'vertical';
+export interface AttachmentContextValue {
+    state: AttachmentState;
+    size: AttachmentSize;
+    orientation: AttachmentOrientation;
+}
+/** Taro tap event surface (H5 mouse event / WeApp touch event). */
+export declare type AttachmentTapEvent = unknown;
+export interface AttachmentProps {
+    /** 附件状态，默认 done */
+    state?: AttachmentState;
+    /** 尺寸，默认 middle */
+    size?: AttachmentSize;
+    /** 布局方向，默认 horizontal */
+    orientation?: AttachmentOrientation;
+    /** 组合内容 */
+    children?: React.ReactNode;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: React.CSSProperties;
+    /** Test ID for testing */
+    testID?: string;
+}
+export interface AttachmentMediaProps {
+    /** icon：居中图标槽；image：图片预览（children 为图片地址或元素） */
+    variant?: 'icon' | 'image';
+    /** 媒体内容 */
+    children?: React.ReactNode;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: React.CSSProperties;
+    /** Test ID for testing */
+    testID?: string;
+}
+export interface AttachmentContentProps {
+    /** 文本列内容 */
+    children?: React.ReactNode;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: React.CSSProperties;
+    /** Test ID for testing */
+    testID?: string;
+}
+export interface AttachmentTitleProps {
+    /** 标题文本 */
+    children?: React.ReactNode;
+    /** 容器类名 */
+    className?: string;
+    /** 文本样式 */
+    style?: React.CSSProperties;
+    /** Test ID for testing */
+    testID?: string;
+}
+export interface AttachmentDescriptionProps {
+    /** 描述文本，缺省时按状态显示默认文案 */
+    children?: React.ReactNode;
+    /** 容器类名 */
+    className?: string;
+    /** 文本样式 */
+    style?: React.CSSProperties;
+    /** Test ID for testing */
+    testID?: string;
+}
+export interface AttachmentActionsProps {
+    /** 操作按钮组 */
+    children?: React.ReactNode;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: React.CSSProperties;
+    /** Test ID for testing */
+    testID?: string;
+}
+export interface AttachmentActionProps {
+    /** 点击回调 */
+    onClick?: (event: AttachmentTapEvent) => void;
+    /** 无障碍标签（语义必填，映射 Taro ariaLabel/aria-label） */
+    'aria-label'?: string;
+    /** 无障碍标签别名（对齐包内 Touchable 惯例） */
+    ariaLabel?: string;
+    /** 禁用态 */
+    disabled?: boolean;
+    /** 图标内容 */
+    children?: React.ReactNode;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: React.CSSProperties;
+    /** Test ID for testing */
+    testID?: string;
+}
+export interface AttachmentTriggerProps {
+    /** 点击回调 */
+    onClick?: (event: AttachmentTapEvent) => void;
+    /** 无障碍标签（语义必填，映射 Taro ariaLabel/aria-label） */
+    'aria-label'?: string;
+    /** 无障碍标签别名（对齐包内 Touchable 惯例） */
+    ariaLabel?: string;
+    /** 禁用态 */
+    disabled?: boolean;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: React.CSSProperties;
+    /** Test ID for testing */
+    testID?: string;
+}
+export interface AttachmentGroupProps {
+    /** 附件子项 */
+    children?: React.ReactNode;
+    /** 子项间距（px，string 按 px 数值解析），默认 8 */
+    gap?: number | string;
+    /** 淡出深度（px），默认 40 */
+    size?: number | string;
+    /** 渐显边缘，默认 both */
+    edges?: 'both' | 'start' | 'end';
+    /** 滚动事件回调 */
+    onScroll?: (event: ScrollFadeScrollEvent) => void;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: React.CSSProperties;
+    /** 内容容器样式 */
+    contentStyle?: React.CSSProperties;
+    /** Test ID for testing */
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/attachment/types.js

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

package/es/components/avatar/avatar.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Avatar Component
+ */
+import React from 'react';
+import type { AvatarProps, AvatarGroupProps, AvatarItemProps } from './types';
+import './style.css';
+export declare const Avatar: React.FC<AvatarProps>;
+/**
+ * AvatarGroup subcomponent
+ */
+export declare const AvatarGroup: React.FC<AvatarGroupProps> & {
+    Item: React.FC<AvatarItemProps>;
+};
+export default Avatar;
+//# sourceMappingURL=avatar.d.ts.map