@hanwenbo/x-taro-ui 0.0.1

package/lib/components/alert/tokens.js

@@ -0,0 +1,125 @@
+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/components/alert/tokens.ts
+var tokens_exports = {};
+__export(tokens_exports, {
+  useAlertColors: () => useAlertColors,
+  useAlertIcon: () => useAlertIcon,
+  useAlertStyle: () => useAlertStyle,
+  useAlertTokens: () => useAlertTokens
+});
+module.exports = __toCommonJS(tokens_exports);
+var import_react = require("react");
+var import_theme = require("../../theme");
+function useAlertTokens() {
+  const { radius } = (0, import_theme.useTokens)();
+  return (0, import_react.useMemo)(
+    () => ({
+      // x-mobile-ui is rooted at 14px, so its rem-based p-4 / h-5 / gap-3
+      // geometry resolves to 14 / 17.5 / 10.5px at runtime.
+      padding: 14,
+      borderRadius: radius.lg,
+      borderWidth: 1,
+      iconSize: 17.5,
+      fontSize: 14,
+      descriptionFontSize: 14
+    }),
+    [radius.lg]
+  );
+}
+function useAlertColors(variant = "info") {
+  const { colors } = (0, import_theme.useTokens)();
+  return (0, import_react.useMemo)(() => {
+    switch (variant) {
+      case "success":
+        return {
+          background: (0, import_theme.withOpacity)(colors.success, 0.12),
+          border: (0, import_theme.withOpacity)(colors.success, 0.32),
+          icon: colors.success,
+          text: colors.foreground,
+          description: colors["muted-foreground"]
+        };
+      case "warning":
+        return {
+          background: (0, import_theme.withOpacity)(colors.warning, 0.12),
+          border: (0, import_theme.withOpacity)(colors.warning, 0.32),
+          icon: colors.warning,
+          text: colors.foreground,
+          description: colors["muted-foreground"]
+        };
+      case "error":
+        return {
+          background: (0, import_theme.withOpacity)(colors.destructive, 0.12),
+          border: (0, import_theme.withOpacity)(colors.destructive, 0.32),
+          icon: colors.destructive,
+          text: colors.foreground,
+          description: colors["muted-foreground"]
+        };
+      case "info":
+      default:
+        return {
+          background: (0, import_theme.withOpacity)(colors.primary, 0.12),
+          border: (0, import_theme.withOpacity)(colors.primary, 0.32),
+          icon: colors.primary,
+          text: colors.foreground,
+          description: colors["muted-foreground"]
+        };
+    }
+  }, [variant, colors]);
+}
+function useAlertIcon(variant = "info") {
+  return (0, import_react.useMemo)(() => {
+    switch (variant) {
+      case "success":
+        return "CircleCheck";
+      case "warning":
+        return "TriangleAlert";
+      case "error":
+        return "CircleX";
+      case "info":
+      default:
+        return "Info";
+    }
+  }, [variant]);
+}
+function useAlertStyle(variant) {
+  const tokens = useAlertTokens();
+  const colors = useAlertColors(variant);
+  return (0, import_react.useMemo)(
+    () => ({
+      padding: tokens.padding,
+      borderRadius: tokens.borderRadius,
+      borderWidth: tokens.borderWidth,
+      borderStyle: "solid",
+      borderColor: colors.border,
+      backgroundColor: colors.background,
+      display: "flex",
+      alignItems: "flex-start",
+      gap: 12
+    }),
+    [tokens, colors]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAlertColors,
+  useAlertIcon,
+  useAlertStyle,
+  useAlertTokens
+});

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

@@ -0,0 +1,54 @@
+/**
+ * Alert Component Types
+ *
+ * @description
+ * Design system aligned alert component types
+ */
+/// <reference types="react" />
+export declare type AlertVariant = 'success' | 'info' | 'warning' | 'error';
+export interface AlertProps {
+    /** Alert message/content */
+    message?: React.ReactNode;
+    /** Alert description/subtitle */
+    description?: React.ReactNode;
+    /** Visual style variant */
+    variant?: AlertVariant;
+    /** Show icon */
+    showIcon?: boolean;
+    classNames?: {
+        root?: string;
+        icon?: string;
+        title?: string;
+        description?: string;
+        action?: string;
+        closeIcon?: string;
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        icon?: React.CSSProperties;
+        title?: React.CSSProperties;
+        description?: React.CSSProperties;
+        action?: React.CSSProperties;
+        closeIcon?: React.CSSProperties;
+    };
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /** Closable */
+    closable?: boolean;
+    /** Action element */
+    action?: React.ReactNode;
+    /** Close handler */
+    onClose?: (event?: unknown) => void;
+    closeIcon?: React.ReactNode;
+    closeText?: React.ReactNode;
+    type?: AlertVariant;
+    /** After close animation handler */
+    afterClose?: () => void;
+    /** Component children */
+    children?: React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/alert/types.js

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

package/lib/components/attachment/attachment.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 from 'react';
+import type { AttachmentActionProps, AttachmentActionsProps, AttachmentContentProps, AttachmentDescriptionProps, AttachmentGroupProps, AttachmentMediaProps, AttachmentProps, AttachmentTitleProps, AttachmentTriggerProps } from './types';
+export declare const Attachment: React.FC<AttachmentProps>;
+export declare const AttachmentMedia: React.FC<AttachmentMediaProps>;
+export declare const AttachmentContent: React.FC<AttachmentContentProps>;
+export declare const AttachmentTitle: React.FC<AttachmentTitleProps>;
+export declare const AttachmentDescription: React.FC<AttachmentDescriptionProps>;
+export declare const AttachmentActions: React.FC<AttachmentActionsProps>;
+export declare const AttachmentAction: React.FC<AttachmentActionProps>;
+export declare const AttachmentTrigger: React.FC<AttachmentTriggerProps>;
+export declare const AttachmentGroup: React.FC<AttachmentGroupProps>;
+export default Attachment;
+//# sourceMappingURL=attachment.d.ts.map

package/lib/components/attachment/attachment.js

@@ -0,0 +1,432 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/attachment/attachment.tsx
+var attachment_exports = {};
+__export(attachment_exports, {
+  Attachment: () => Attachment,
+  AttachmentAction: () => AttachmentAction,
+  AttachmentActions: () => AttachmentActions,
+  AttachmentContent: () => AttachmentContent,
+  AttachmentDescription: () => AttachmentDescription,
+  AttachmentGroup: () => AttachmentGroup,
+  AttachmentMedia: () => AttachmentMedia,
+  AttachmentTitle: () => AttachmentTitle,
+  AttachmentTrigger: () => AttachmentTrigger,
+  default: () => attachment_default
+});
+module.exports = __toCommonJS(attachment_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_utils = require("../../utils");
+var import_locale = require("../../utils/locale");
+var import_taroProps = require("../../utils/taroProps");
+var import_theme = require("../../theme");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var import_scrollFade = require("../scrollFade");
+var import_shimmer = require("../shimmer");
+var AttachmentContext = (0, import_react.createContext)({
+  state: "done",
+  size: "middle",
+  orientation: "horizontal"
+});
+var useAttachment = () => (0, import_react.useContext)(AttachmentContext);
+var ELLIPSIS_STYLE = {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  maxWidth: "100%"
+};
+var Attachment = ({
+  state = "done",
+  size = "middle",
+  orientation = "horizontal",
+  children,
+  className,
+  style,
+  testID = "attachment"
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const { colors, spacing, radius } = (0, import_theme.useTokens)();
+  const sizeStyle = {
+    small: { gap: spacing["2"], padding: spacing["2"] },
+    middle: { gap: spacing["3"], padding: spacing["3"] },
+    large: { gap: spacing["4"], padding: spacing["4"] }
+  };
+  const resolved = sizeStyle[size];
+  return /* @__PURE__ */ import_react.default.createElement(AttachmentContext.Provider, { value: { state, size, orientation } }, /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "attachment",
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(
+        `${config.prefixCls}-attachment`,
+        `${config.prefixCls}-attachment--${size}`,
+        `${config.prefixCls}-attachment--${orientation}`,
+        state === "error" && `${config.prefixCls}-attachment--error`,
+        className
+      ),
+      style: {
+        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
+  ));
+};
+Attachment.displayName = "Attachment";
+var AttachmentMedia = ({
+  variant = "icon",
+  children,
+  className,
+  style,
+  testID
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const { colors, spacing, radius } = (0, import_theme.useTokens)();
+  const { size, orientation } = useAttachment();
+  const mediaSizeMap = {
+    small: spacing["8"],
+    middle: spacing["10"],
+    large: spacing["12"]
+  };
+  const mediaSize = mediaSizeMap[size];
+  const imageCover = variant === "image" && orientation === "vertical";
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "attachment-media",
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(`${config.prefixCls}-attachment__media`, className),
+      style: {
+        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 : void 0,
+        ...style
+      }
+    },
+    variant === "image" ? typeof children === "string" ? /* @__PURE__ */ import_react.default.createElement(import_components.Image, { src: children, mode: "aspectFill", style: { width: "100%", height: "100%" } }) : children : children ?? /* @__PURE__ */ import_react.default.createElement(
+      import_icon.Icon,
+      {
+        name: "FileText",
+        size: mediaSize / 2,
+        color: colors["muted-foreground"] || colors.foreground
+      }
+    )
+  );
+};
+AttachmentMedia.displayName = "AttachmentMedia";
+var AttachmentContent = ({
+  children,
+  className,
+  style,
+  testID
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const { orientation } = useAttachment();
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "attachment-content",
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(`${config.prefixCls}-attachment__content`, className),
+      style: {
+        zIndex: 1,
+        display: "flex",
+        flex: 1,
+        minWidth: 0,
+        flexDirection: "column",
+        justifyContent: "center",
+        width: orientation === "vertical" ? "100%" : void 0,
+        ...style
+      }
+    },
+    children
+  );
+};
+AttachmentContent.displayName = "AttachmentContent";
+var titleFontSizeMap = {
+  small: 12,
+  middle: 14,
+  large: 16
+};
+var AttachmentTitle = ({
+  children,
+  className,
+  style,
+  testID
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const { colors } = (0, import_theme.useTokens)();
+  const { state, size } = useAttachment();
+  const sweeping = state === "uploading" || state === "processing";
+  const color = state === "error" ? colors.destructive : colors.foreground || colors["card-foreground"];
+  const textStyle = {
+    color,
+    fontSize: titleFontSizeMap[size],
+    fontWeight: 500,
+    ...ELLIPSIS_STYLE,
+    ...style
+  };
+  if (sweeping && typeof children === "string") {
+    return /* @__PURE__ */ import_react.default.createElement(import_shimmer.Shimmer, { color, textStyle, className, testID }, children);
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.Text,
+    {
+      "data-slot": "attachment-title",
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(`${config.prefixCls}-attachment__title`, className),
+      style: textStyle
+    },
+    children
+  );
+};
+AttachmentTitle.displayName = "AttachmentTitle";
+var AttachmentDescription = ({
+  children,
+  className,
+  style,
+  testID
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const locale = (0, import_configProvider.useConfigProvider)().locale;
+  const { colors } = (0, import_theme.useTokens)();
+  const { state, size } = useAttachment();
+  let content = children;
+  if (content === void 0 || content === null) {
+    if (state === "uploading") {
+      content = (0, import_locale.resolveLocaleText)(locale, "upload.uploading", "文件上传中");
+    } else if (state === "error") {
+      content = (0, import_locale.resolveLocaleText)(locale, "upload.error", "上传错误");
+    }
+  }
+  if (content === void 0 || content === null) {
+    return null;
+  }
+  const color = state === "error" ? colors.destructive : colors["muted-foreground"];
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.Text,
+    {
+      "data-slot": "attachment-description",
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(`${config.prefixCls}-attachment__description`, className),
+      style: { color, fontSize: titleFontSizeMap[size] - 2, ...ELLIPSIS_STYLE, ...style }
+    },
+    content
+  );
+};
+AttachmentDescription.displayName = "AttachmentDescription";
+var AttachmentActions = ({
+  children,
+  className,
+  style,
+  testID
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const { spacing } = (0, import_theme.useTokens)();
+  const { orientation } = useAttachment();
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "attachment-actions",
+      "data-testid": testID,
+      className: (0, import_utils.classNames)(`${config.prefixCls}-attachment__actions`, className),
+      style: {
+        zIndex: 2,
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing["1"],
+        width: orientation === "vertical" ? "100%" : void 0,
+        justifyContent: orientation === "vertical" ? "flex-end" : void 0,
+        ...style
+      }
+    },
+    children
+  );
+};
+AttachmentActions.displayName = "AttachmentActions";
+var AttachmentAction = ({
+  onClick,
+  "aria-label": ariaLabelProp,
+  ariaLabel,
+  disabled = false,
+  children,
+  className,
+  style,
+  testID
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const { radius } = (0, import_theme.useTokens)();
+  const resolvedLabel = ariaLabel ?? ariaLabelProp;
+  const handleClick = (event) => {
+    if (disabled) return;
+    onClick == null ? void 0 : onClick(event);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      ...(0, import_taroProps.resolveTaroAccessibilityProps)("button", resolvedLabel),
+      "data-slot": "attachment-action",
+      "data-testid": testID,
+      "aria-disabled": disabled || void 0,
+      className: (0, import_utils.classNames)(
+        `${config.prefixCls}-attachment__action`,
+        disabled && `${config.prefixCls}-attachment__action--disabled`,
+        className
+      ),
+      style: {
+        display: "flex",
+        width: 28,
+        height: 28,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: radius.md,
+        opacity: disabled ? 0.5 : 1,
+        ...style
+      },
+      onClick: handleClick
+    },
+    children
+  );
+};
+AttachmentAction.displayName = "AttachmentAction";
+var AttachmentTrigger = ({
+  onClick,
+  "aria-label": ariaLabelProp,
+  ariaLabel,
+  disabled = false,
+  className,
+  style,
+  testID
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const { radius } = (0, import_theme.useTokens)();
+  const resolvedLabel = ariaLabel ?? ariaLabelProp;
+  const handleClick = (event) => {
+    if (disabled) return;
+    onClick == null ? void 0 : onClick(event);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      ...(0, import_taroProps.resolveTaroAccessibilityProps)("button", resolvedLabel),
+      "data-slot": "attachment-trigger",
+      "data-testid": testID,
+      "aria-disabled": disabled || void 0,
+      className: (0, import_utils.classNames)(`${config.prefixCls}-attachment__trigger`, className),
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 0,
+        borderRadius: radius.xl,
+        ...style
+      },
+      onClick: handleClick
+    }
+  );
+};
+AttachmentTrigger.displayName = "AttachmentTrigger";
+function toPx(value, fallback) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+var AttachmentGroup = ({
+  gap,
+  size,
+  edges,
+  children,
+  onScroll,
+  className,
+  style,
+  contentStyle,
+  testID = "attachment-group"
+}) => {
+  const { spacing } = (0, import_theme.useTokens)();
+  const resolvedGap = toPx(gap, spacing["2"]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_scrollFade.ScrollFade,
+    {
+      direction: "horizontal",
+      size,
+      edges,
+      onScroll,
+      className,
+      style,
+      contentStyle: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "stretch",
+        gap: resolvedGap,
+        ...contentStyle
+      },
+      testID
+    },
+    children
+  );
+};
+AttachmentGroup.displayName = "AttachmentGroup";
+var attachment_default = Attachment;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+  AttachmentTrigger
+});

package/lib/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