@hanwenbo/x-taro-ui 0.0.1

package/lib/components/tag/tag.js

@@ -0,0 +1,527 @@
+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/tag/tag.tsx
+var tag_exports = {};
+__export(tag_exports, {
+  CheckableTag: () => CheckableTag,
+  CheckableTagGroup: () => CheckableTagGroup,
+  Tag: () => Tag,
+  default: () => tag_default
+});
+module.exports = __toCommonJS(tag_exports);
+var import_react = __toESM(require("react"));
+var import_taro = __toESM(require("@tarojs/taro"));
+var import_components = require("@tarojs/components");
+var import_patterns = require("../../patterns");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var import_tokens = require("./tokens");
+function isActivationKey(event) {
+  return event.key === "Enter" || event.key === " " || event.key === "Spacebar";
+}
+function getStyleColor(value, fallback = "currentColor") {
+  return typeof value === "string" ? value : fallback;
+}
+var Tag = ({
+  children,
+  closable = false,
+  closeIcon,
+  color,
+  href,
+  onClick,
+  icon,
+  onClose,
+  target,
+  size: sizeProp,
+  variant = "default",
+  disabled: disabledProp,
+  classNames: semanticClassNames,
+  styles: semanticStyles,
+  className,
+  style
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const size = sizeProp ?? config.componentSize;
+  const disabled = Boolean(disabledProp || config.componentDisabled);
+  const [visible, setVisible] = (0, import_react.useState)(true);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const [closeHovered, setCloseHovered] = (0, import_react.useState)(false);
+  const [closeFocused, setCloseFocused] = (0, import_react.useState)(false);
+  const tagStyle = (0, import_tokens.useTagStyle)(variant, size, color, disabled);
+  const interactionTokens = (0, import_tokens.useTagInteractionTokens)();
+  const showClose = Boolean(closable || onClose);
+  const rootInteractive = Boolean(onClick || href);
+  const rootHoverable = !disabled && Boolean(rootInteractive || showClose);
+  const handlePress = (0, import_react.useCallback)(async () => {
+    onClick == null ? void 0 : onClick();
+    if (!href) return;
+    if (/^https?:\/\//.test(href) && typeof globalThis.open === "function") {
+      globalThis.open(href, target || "_self");
+      return;
+    }
+    if (href.startsWith("/")) {
+      try {
+        await import_taro.default.navigateTo({ url: href });
+      } catch {
+        try {
+          await import_taro.default.switchTab({ url: href });
+        } catch {
+        }
+      }
+    }
+  }, [href, onClick, target]);
+  const rootPress = (0, import_patterns.usePressable)({
+    disabled: disabled || !rootInteractive,
+    onPress: handlePress,
+    scale: 0.985
+  });
+  const closePress = (0, import_patterns.usePressable)({ disabled, scale: 0.95 });
+  const handleClose = (0, import_react.useCallback)(
+    (nativeEvent) => {
+      var _a;
+      (_a = nativeEvent == null ? void 0 : nativeEvent.stopPropagation) == null ? void 0 : _a.call(nativeEvent);
+      if (disabled) return;
+      let defaultPrevented = false;
+      const closeEvent = {
+        get defaultPrevented() {
+          return defaultPrevented;
+        },
+        preventDefault() {
+          var _a2;
+          defaultPrevented = true;
+          (_a2 = nativeEvent == null ? void 0 : nativeEvent.preventDefault) == null ? void 0 : _a2.call(nativeEvent);
+        },
+        stopPropagation() {
+          var _a2;
+          (_a2 = nativeEvent == null ? void 0 : nativeEvent.stopPropagation) == null ? void 0 : _a2.call(nativeEvent);
+        }
+      };
+      onClose == null ? void 0 : onClose(closeEvent);
+      if (!closeEvent.defaultPrevented) setVisible(false);
+    },
+    [disabled, onClose]
+  );
+  if (!visible) return null;
+  const focusRing = `0 0 0 2px ${interactionTokens.ringOffset}, 0 0 0 4px ${interactionTokens.ring}`;
+  const hoverStyle = rootHoverable && hovered && !color ? {
+    backgroundColor: interactionTokens.hoverBackground,
+    borderColor: interactionTokens.hoverBorder
+  } : {};
+  const combinedStyle = {
+    ...tagStyle,
+    ...hoverStyle,
+    ...semanticStyles == null ? void 0 : semanticStyles.root,
+    ...style,
+    cursor: disabled ? "not-allowed" : rootHoverable ? "pointer" : void 0,
+    outline: "none",
+    boxShadow: focused && rootInteractive && !disabled ? focusRing : "none",
+    transform: rootInteractive ? rootPress.style.transform : void 0,
+    transition: rootInteractive ? `${rootPress.style.transition}, ${tagStyle.transition}` : tagStyle.transition
+  };
+  const contentColor = getStyleColor(combinedStyle.color, getStyleColor(tagStyle.color));
+  const rootRole = href ? "link" : onClick ? "button" : void 0;
+  const handleRootKeyDown = (event) => {
+    var _a;
+    if (!rootInteractive || disabled || !isActivationKey(event)) return;
+    (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+    void handlePress();
+  };
+  const closeStyle = {
+    marginLeft: 4,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    borderRadius: 4,
+    color: interactionTokens.closeIcon,
+    cursor: disabled ? "not-allowed" : "pointer",
+    outline: "none",
+    opacity: closeHovered && !disabled ? 0.7 : 1,
+    transform: closePress.style.transform,
+    transition: `${closePress.style.transition}, opacity ${interactionTokens.transition}`,
+    ...semanticStyles == null ? void 0 : semanticStyles.closeIcon,
+    boxShadow: closeFocused && !disabled ? focusRing : "none"
+  };
+  const closeColor = getStyleColor(closeStyle.color, interactionTokens.closeIcon);
+  const stopAndRunClosePress = (event, action) => {
+    var _a;
+    (_a = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _a.call(event);
+    action();
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "tag",
+      "data-size": size,
+      "data-variant": variant,
+      "data-disabled": disabled ? "true" : "false",
+      "data-interactive": rootInteractive ? "true" : "false",
+      "data-hovered": hovered ? "true" : "false",
+      "data-focused": focused ? "true" : "false",
+      "data-pressed": rootPress.pressed ? "true" : "false",
+      className: (0, import_utils.classNames)(
+        `${config.prefixCls}-tag`,
+        `${config.prefixCls}-tag--${variant}`,
+        `${config.prefixCls}-tag--${size}`,
+        rootInteractive && `${config.prefixCls}-tag--interactive`,
+        disabled && `${config.prefixCls}-tag--disabled`,
+        semanticClassNames == null ? void 0 : semanticClassNames.root,
+        className
+      ),
+      style: combinedStyle,
+      role: rootRole,
+      ariaRole: rootRole,
+      "aria-disabled": rootInteractive ? disabled : void 0,
+      tabIndex: rootInteractive ? disabled ? -1 : 0 : void 0,
+      onBlur: () => {
+        setFocused(false);
+        rootPress.handlers.onMouseLeave();
+      },
+      onFocus: () => {
+        if (!disabled && rootInteractive) setFocused(true);
+      },
+      onKeyDown: handleRootKeyDown,
+      onClick: rootInteractive ? rootPress.handlers.onClick : void 0,
+      onMouseDown: rootInteractive ? rootPress.handlers.onMouseDown : void 0,
+      onMouseEnter: () => {
+        if (rootHoverable) setHovered(true);
+      },
+      onMouseLeave: () => {
+        setHovered(false);
+        rootPress.handlers.onMouseLeave();
+      },
+      onMouseUp: rootInteractive ? rootPress.handlers.onMouseUp : void 0,
+      onTouchCancel: rootInteractive ? rootPress.handlers.onTouchCancel : void 0,
+      onTouchEnd: rootInteractive ? rootPress.handlers.onTouchEnd : void 0,
+      onTouchStart: rootInteractive ? rootPress.handlers.onTouchStart : void 0
+    },
+    icon && /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "tag-icon",
+        className: (0, import_utils.classNames)(`${config.prefixCls}-tag__icon`, semanticClassNames == null ? void 0 : semanticClassNames.icon),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          lineHeight: 0,
+          color: contentColor,
+          ...semanticStyles == null ? void 0 : semanticStyles.icon
+        }
+      },
+      icon
+    ),
+    children !== null && children !== void 0 && /* @__PURE__ */ import_react.default.createElement(
+      import_components.Text,
+      {
+        "data-slot": "tag-content",
+        className: (0, import_utils.classNames)(`${config.prefixCls}-tag__text`, semanticClassNames == null ? void 0 : semanticClassNames.content),
+        style: { color: contentColor, ...semanticStyles == null ? void 0 : semanticStyles.content }
+      },
+      children
+    ),
+    showClose && /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "tag-close",
+        "data-hovered": closeHovered ? "true" : "false",
+        "data-focused": closeFocused ? "true" : "false",
+        "data-pressed": closePress.pressed ? "true" : "false",
+        className: (0, import_utils.classNames)(`${config.prefixCls}-tag__close`, semanticClassNames == null ? void 0 : semanticClassNames.closeIcon),
+        style: closeStyle,
+        role: "button",
+        ariaRole: "button",
+        ariaLabel: "关闭标签",
+        "aria-disabled": disabled,
+        tabIndex: disabled ? -1 : 0,
+        onBlur: () => {
+          setCloseFocused(false);
+          closePress.handlers.onMouseLeave();
+        },
+        onFocus: () => {
+          if (!disabled) setCloseFocused(true);
+        },
+        onKeyDown: (event) => {
+          var _a;
+          const interactiveEvent = event;
+          if (disabled || !isActivationKey(interactiveEvent)) return;
+          (_a = interactiveEvent.preventDefault) == null ? void 0 : _a.call(interactiveEvent);
+          handleClose(interactiveEvent);
+        },
+        onClick: (event) => {
+          const interactiveEvent = event;
+          stopAndRunClosePress(interactiveEvent, closePress.handlers.onClick);
+          handleClose(interactiveEvent);
+        },
+        onMouseDown: (event) => stopAndRunClosePress(
+          event,
+          closePress.handlers.onMouseDown
+        ),
+        onMouseEnter: () => {
+          if (!disabled) setCloseHovered(true);
+        },
+        onMouseLeave: (event) => {
+          setCloseHovered(false);
+          stopAndRunClosePress(
+            event,
+            closePress.handlers.onMouseLeave
+          );
+        },
+        onMouseUp: (event) => stopAndRunClosePress(
+          event,
+          closePress.handlers.onMouseUp
+        ),
+        onTouchCancel: (event) => stopAndRunClosePress(
+          event,
+          closePress.handlers.onTouchCancel
+        ),
+        onTouchEnd: (event) => stopAndRunClosePress(
+          event,
+          closePress.handlers.onTouchEnd
+        ),
+        onTouchStart: (event) => stopAndRunClosePress(
+          event,
+          closePress.handlers.onTouchStart
+        )
+      },
+      closeIcon ? typeof closeIcon === "string" || typeof closeIcon === "number" ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: { color: closeColor, fontSize: 12, lineHeight: 1 } }, closeIcon) : closeIcon : /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "X", size: 12, color: closeColor })
+    )
+  );
+};
+var CheckableTag = ({
+  checked,
+  disabled: disabledProp,
+  icon,
+  size: sizeProp,
+  onChange,
+  children,
+  className,
+  style
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const size = sizeProp ?? config.componentSize;
+  const disabled = Boolean(disabledProp || config.componentDisabled);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const { colors, radius } = (0, import_theme.useTokens)();
+  const interactionTokens = (0, import_tokens.useTagInteractionTokens)();
+  const sizeTokens = (0, import_tokens.useTagSizeTokens)(size);
+  const handleClick = (0, import_react.useCallback)(() => {
+    onChange == null ? void 0 : onChange(!checked);
+  }, [checked, onChange]);
+  const {
+    handlers,
+    pressed,
+    style: pressStyle
+  } = (0, import_patterns.usePressable)({
+    disabled,
+    onPress: handleClick,
+    scale: 0.985
+  });
+  const focusRing = `0 0 0 2px ${interactionTokens.ringOffset}, 0 0 0 4px ${interactionTokens.ring}`;
+  const checkableStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 4,
+    boxSizing: "border-box",
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    paddingLeft: size === "middle" ? 12 : size === "large" ? 14 : sizeTokens.paddingInline,
+    paddingRight: size === "middle" ? 12 : size === "large" ? 14 : sizeTokens.paddingInline,
+    paddingTop: sizeTokens.paddingBlock,
+    paddingBottom: sizeTokens.paddingBlock,
+    fontSize: sizeTokens.fontSize,
+    lineHeight: `${sizeTokens.lineHeight}px`,
+    borderRadius: radius.get("md"),
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: !checked && hovered ? interactionTokens.hoverBorder : checked ? colors.primary : colors.border,
+    backgroundColor: !checked && hovered ? interactionTokens.hoverBackground : checked ? colors.primary : "transparent",
+    color: checked ? colors["primary-foreground"] : colors.foreground,
+    opacity: disabled ? 0.5 : 1,
+    cursor: disabled ? "not-allowed" : "pointer",
+    outline: "none",
+    transform: pressStyle.transform,
+    transition: `${pressStyle.transition}, background-color ${interactionTokens.transition}, border-color ${interactionTokens.transition}, color ${interactionTokens.transition}`,
+    ...style,
+    boxShadow: focused && !disabled ? focusRing : "none"
+  };
+  const contentColor = getStyleColor(checkableStyle.color, colors.foreground);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "checkable-tag",
+      "data-size": size,
+      "data-checked": checked ? "true" : "false",
+      "data-disabled": disabled ? "true" : "false",
+      "data-hovered": hovered ? "true" : "false",
+      "data-focused": focused ? "true" : "false",
+      "data-pressed": pressed ? "true" : "false",
+      className: (0, import_utils.classNames)(
+        `${config.prefixCls}-tag`,
+        `${config.prefixCls}-tag--${size}`,
+        `${config.prefixCls}-tag--checkable`,
+        checked && `${config.prefixCls}-tag--checked`,
+        disabled && `${config.prefixCls}-tag--disabled`,
+        className
+      ),
+      style: checkableStyle,
+      role: "checkbox",
+      ariaRole: "checkbox",
+      "aria-checked": checked,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : 0,
+      onBlur: () => {
+        setFocused(false);
+        handlers.onMouseLeave();
+      },
+      onFocus: () => {
+        if (!disabled) setFocused(true);
+      },
+      onKeyDown: (event) => {
+        var _a;
+        const interactiveEvent = event;
+        if (disabled || !isActivationKey(interactiveEvent)) return;
+        (_a = interactiveEvent.preventDefault) == null ? void 0 : _a.call(interactiveEvent);
+        handleClick();
+      },
+      onClick: handlers.onClick,
+      onMouseDown: handlers.onMouseDown,
+      onMouseEnter: () => {
+        if (!disabled) setHovered(true);
+      },
+      onMouseLeave: () => {
+        setHovered(false);
+        handlers.onMouseLeave();
+      },
+      onMouseUp: handlers.onMouseUp,
+      onTouchCancel: handlers.onTouchCancel,
+      onTouchEnd: handlers.onTouchEnd,
+      onTouchStart: handlers.onTouchStart
+    },
+    icon && /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "checkable-tag-icon",
+        className: `${config.prefixCls}-tag__icon`,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          lineHeight: 0,
+          color: contentColor
+        }
+      },
+      icon
+    ),
+    children !== null && children !== void 0 && /* @__PURE__ */ import_react.default.createElement(
+      import_components.Text,
+      {
+        "data-slot": "checkable-tag-content",
+        className: `${config.prefixCls}-tag__text`,
+        style: { color: contentColor }
+      },
+      children
+    )
+  );
+};
+var CheckableTagGroup = ({
+  defaultValue = null,
+  disabled: disabledProp,
+  multiple = false,
+  options = [],
+  value,
+  onChange,
+  size: sizeProp,
+  classNames: semanticClassNames,
+  styles: semanticStyles
+}) => {
+  const config = (0, import_configProvider.useConfig)();
+  const size = sizeProp ?? config.componentSize;
+  const disabled = Boolean(disabledProp || config.componentDisabled);
+  const [internalValue, setInternalValue] = (0, import_react.useState)(defaultValue);
+  const selectedValue = value === void 0 ? internalValue : value;
+  const selectedValues = multiple ? Array.isArray(selectedValue) ? selectedValue : [] : selectedValue === null ? [] : [selectedValue];
+  const handleChange = (0, import_react.useCallback)(
+    (nextValue) => {
+      const next = multiple ? selectedValues.includes(nextValue) ? selectedValues.filter((item) => item !== nextValue) : [...selectedValues, nextValue] : nextValue;
+      if (value === void 0) setInternalValue(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [multiple, onChange, selectedValues, value]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "checkable-tag-group",
+      "data-disabled": disabled ? "true" : "false",
+      "data-multiple": multiple ? "true" : "false",
+      className: (0, import_utils.classNames)(`${config.prefixCls}-checkable-tag-group`, semanticClassNames == null ? void 0 : semanticClassNames.root),
+      style: { display: "flex", flexWrap: "wrap", gap: 8, ...semanticStyles == null ? void 0 : semanticStyles.root },
+      role: "group",
+      ariaRole: "group",
+      "aria-disabled": disabled
+    },
+    options.map((option) => {
+      const normalized = typeof option === "object" ? option : { label: option, value: option };
+      const optionValue = normalized.value;
+      return /* @__PURE__ */ import_react.default.createElement(
+        CheckableTag,
+        {
+          key: String(optionValue),
+          checked: selectedValues.includes(optionValue),
+          disabled,
+          size,
+          className: semanticClassNames == null ? void 0 : semanticClassNames.item,
+          style: semanticStyles == null ? void 0 : semanticStyles.item,
+          onChange: () => handleChange(optionValue)
+        },
+        normalized.label
+      );
+    })
+  );
+};
+Tag.displayName = "Tag";
+CheckableTag.displayName = "Tag.CheckableTag";
+CheckableTagGroup.displayName = "Tag.CheckableTagGroup";
+Tag.CheckableTag = CheckableTag;
+Tag.CheckableTagGroup = CheckableTagGroup;
+var tag_default = Tag;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckableTag,
+  CheckableTagGroup,
+  Tag
+});

package/lib/components/tag/tokens.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Tag Component Tokens
+ * Following x-design-system tag.yaml spec
+ */
+/// <reference types="react" />
+import type { SizeVariant } from '../../theme/types';
+import type { TagVariant } from './types';
+export interface TagSizeTokens {
+    paddingInline: number;
+    paddingBlock: number;
+    fontSize: number;
+    lineHeight: number;
+}
+export interface TagColorTokens {
+    background: string;
+    color: string;
+    border: string;
+}
+export interface TagInteractionTokens {
+    hoverBackground: string;
+    hoverBorder: string;
+    closeIcon: string;
+    ring: string;
+    ringOffset: string;
+    transition: string;
+}
+/**
+ * Get tag size tokens
+ */
+export declare function useTagSizeTokens(size?: SizeVariant): TagSizeTokens;
+/**
+ * Get tag colors for variant and color
+ */
+export declare function useTagColors(variant?: TagVariant, color?: string): TagColorTokens;
+/**
+ * Get shared hover, close, focus, and motion tokens.
+ */
+export declare function useTagInteractionTokens(): TagInteractionTokens;
+/**
+ * Build tag style
+ */
+export declare function useTagStyle(variant: TagVariant, size: SizeVariant, color?: string, disabled?: boolean): React.CSSProperties;
+//# sourceMappingURL=tokens.d.ts.map