@hanwenbo/x-taro-ui 0.0.1

package/es/components/card/card.js

@@ -0,0 +1,289 @@
+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); }
+/**
+ * Card Component
+ */
+
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import { usePressable } from "../../patterns";
+import { classNames } from "../../utils";
+import { useCardPadding, useCardColors, useCardStyle } from "./tokens";
+import { useTokens, withOpacity } from "../../theme";
+import { useConfig } from "../configProvider";
+import { Spinner } from "../spinner";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Card = function Card(_ref) {
+  var title = _ref.title,
+    extra = _ref.extra,
+    children = _ref.children,
+    cover = _ref.cover,
+    actions = _ref.actions,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    loadingText = _ref.loadingText,
+    _ref$hoverable = _ref.hoverable,
+    hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
+    disabledProp = _ref.disabled,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    sizeProp = _ref.size,
+    onClick = _ref.onClick,
+    onHeaderClick = _ref.onHeaderClick,
+    onBodyClick = _ref.onBodyClick,
+    headerClassName = _ref.headerClassName,
+    headerStyle = _ref.headerStyle,
+    bodyClassName = _ref.bodyClassName,
+    bodyStyle = _ref.bodyStyle,
+    coverClassName = _ref.coverClassName,
+    coverStyle = _ref.coverStyle,
+    actionsClassName = _ref.actionsClassName,
+    actionsStyle = _ref.actionsStyle,
+    type = _ref.type,
+    bordered = _ref.bordered,
+    className = _ref.className,
+    style = _ref.style;
+  var config = useConfig();
+  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : config.componentSize;
+  var disabled = Boolean(disabledProp || config.componentDisabled);
+  var resolvedSize = size === 'default' ? 'middle' : size;
+  var resolvedVariant = type === 'borderless' || variant === 'borderless' ? 'borderless' : type === 'outlined' || variant === 'outlined' ? 'outline' : variant;
+  var effectiveBordered = bordered !== null && bordered !== void 0 ? bordered : resolvedVariant === 'default' || resolvedVariant === 'outline';
+  var padding = useCardPadding(resolvedSize);
+  var colors = useCardColors(resolvedVariant);
+  var cardStyle = useCardStyle(resolvedVariant, resolvedSize);
+  var _useTokens = useTokens(),
+    themeColors = _useTokens.colors;
+  var _usePressable = usePressable({
+      disabled: disabled || loading || !onClick && !hoverable,
+      onPress: onClick,
+      scale: 0.99
+    }),
+    handlers = _usePressable.handlers,
+    pressStyle = _usePressable.style;
+  var combinedStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cardStyle), {}, {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    color: colors.foreground
+  }, effectiveBordered ? {} : {
+    borderWidth: 0,
+    borderColor: 'transparent'
+  }), disabled ? {
+    opacity: 0.6
+  } : {}), style), pressStyle);
+  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
+    "data-slot": "card",
+    className: classNames("".concat(config.prefixCls, "-card"), "".concat(config.prefixCls, "-card--").concat(resolvedVariant), "".concat(config.prefixCls, "-card--").concat(resolvedSize), hoverable && !disabled && !loading && "".concat(config.prefixCls, "-card--hoverable"), disabled && "".concat(config.prefixCls, "-card--disabled"), loading && "".concat(config.prefixCls, "-card--loading"), className),
+    style: combinedStyle
+  }, handlers), {}, {
+    children: [loading && /*#__PURE__*/_jsx(View, {
+      "data-slot": "card-loading",
+      className: "".concat(config.prefixCls, "-card__loading"),
+      style: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 10,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: withOpacity(themeColors.card, 0.8),
+        borderRadius: 'inherit',
+        backdropFilter: 'blur(4px)',
+        WebkitBackdropFilter: 'blur(4px)'
+      },
+      children: /*#__PURE__*/_jsxs(View, {
+        "data-slot": "card-loading-content",
+        className: "".concat(config.prefixCls, "-card__loading-content"),
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 8 * (14 / 16)
+        },
+        children: [/*#__PURE__*/_jsx(Spinner, {
+          size: "middle",
+          color: themeColors.primary,
+          label: loadingText
+        }), loadingText ? /*#__PURE__*/_jsx(Text, {
+          "data-slot": "card-loading-text",
+          className: "".concat(config.prefixCls, "-card__loading-text"),
+          style: {
+            color: themeColors['muted-foreground'],
+            fontSize: 14,
+            lineHeight: '20px'
+          },
+          children: loadingText
+        }) : null]
+      })
+    }), cover && /*#__PURE__*/_jsx(View, {
+      "data-slot": "card-cover",
+      className: classNames("".concat(config.prefixCls, "-card__cover"), coverClassName),
+      style: _objectSpread({
+        height: padding.coverHeight,
+        overflow: 'hidden'
+      }, coverStyle),
+      children: cover
+    }), (title !== undefined || extra !== undefined) && /*#__PURE__*/_jsxs(View, {
+      "data-slot": "card-header",
+      className: classNames("".concat(config.prefixCls, "-card__header"), headerClassName),
+      onClick: disabled || loading ? undefined : onHeaderClick,
+      style: _objectSpread({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: "".concat(padding.headerPaddingY, "px ").concat(padding.headerPaddingX, "px"),
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: colors.headerBorder
+      }, headerStyle),
+      children: [/*#__PURE__*/_jsx(View, {
+        "data-slot": "card-title",
+        className: "".concat(config.prefixCls, "-card__title"),
+        style: {
+          fontSize: padding.titleFontSize,
+          lineHeight: '28px',
+          fontWeight: 600,
+          color: colors.foreground
+        },
+        children: title
+      }), extra !== undefined && /*#__PURE__*/_jsx(View, {
+        "data-slot": "card-extra",
+        style: {
+          color: themeColors['muted-foreground']
+        },
+        children: extra
+      })]
+    }), children !== undefined && children !== null && /*#__PURE__*/_jsx(View, {
+      "data-slot": "card-body",
+      className: classNames("".concat(config.prefixCls, "-card__body"), bodyClassName),
+      onClick: disabled || loading ? undefined : onBodyClick,
+      style: _objectSpread({
+        flex: 1,
+        padding: "".concat(padding.bodyPaddingY, "px ").concat(padding.bodyPaddingX, "px"),
+        fontSize: padding.fontSize,
+        lineHeight: '22px'
+      }, bodyStyle),
+      children: children
+    }), actions && actions.length > 0 && /*#__PURE__*/_jsx(View, {
+      "data-slot": "card-actions",
+      className: classNames("".concat(config.prefixCls, "-card__actions"), actionsClassName),
+      style: _objectSpread({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: 8 * (14 / 16),
+        padding: "".concat(padding.actionsPaddingY, "px ").concat(padding.actionsPaddingX, "px"),
+        backgroundColor: colors.actionsBackground,
+        borderTopWidth: 1,
+        borderTopStyle: 'solid',
+        borderTopColor: colors.headerBorder
+      }, actionsStyle),
+      children: actions.map(function (action, index) {
+        return /*#__PURE__*/_jsx(React.Fragment, {
+          children: action
+        }, index);
+      })
+    })]
+  }));
+};
+
+/**
+ * Card.Header subcomponent
+ */
+export var CardHeader = function CardHeader(_ref2) {
+  var title = _ref2.title,
+    subtitle = _ref2.subtitle,
+    avatar = _ref2.avatar,
+    extra = _ref2.extra;
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors;
+  return /*#__PURE__*/_jsxs(View, {
+    className: "x-card-header",
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 12,
+      padding: 16
+    },
+    children: [avatar && /*#__PURE__*/_jsx(View, {
+      children: avatar
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1
+      },
+      children: [title && /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontSize: 16,
+          fontWeight: 600,
+          color: colors.foreground
+        },
+        children: title
+      }), subtitle && /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontSize: 14,
+          color: colors['muted-foreground'],
+          marginTop: 4
+        },
+        children: subtitle
+      })]
+    }), extra && /*#__PURE__*/_jsx(View, {
+      children: extra
+    })]
+  });
+};
+
+/**
+ * Card.Meta subcomponent
+ */
+export var CardMeta = function CardMeta(_ref3) {
+  var title = _ref3.title,
+    description = _ref3.description,
+    avatar = _ref3.avatar;
+  var _useTokens3 = useTokens(),
+    colors = _useTokens3.colors;
+  return /*#__PURE__*/_jsxs(View, {
+    className: "x-card-meta",
+    style: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      gap: 12
+    },
+    children: [avatar && /*#__PURE__*/_jsx(View, {
+      children: avatar
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1
+      },
+      children: [title && /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontSize: 16,
+          fontWeight: 500,
+          color: colors.foreground
+        },
+        children: title
+      }), description && /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontSize: 14,
+          color: colors['muted-foreground'],
+          marginTop: 4
+        },
+        children: description
+      })]
+    })]
+  });
+};
+
+// Attach subcomponents
+var CardWithSubcomponents = Card;
+CardWithSubcomponents.Header = CardHeader;
+CardWithSubcomponents.Meta = CardMeta;
+export default CardWithSubcomponents;

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

@@ -0,0 +1,7 @@
+/**
+ * Card Component Export
+ */
+export { Card, CardHeader, CardMeta } from './card';
+export type { CardProps, CardSize, CardVariant, CardHeaderProps, CardMetaProps } from './types';
+export { useCardPadding, useCardColors, useCardStyle } from './tokens';
+//# sourceMappingURL=index.d.ts.map

package/es/components/card/index.js

@@ -0,0 +1,6 @@
+/**
+ * Card Component Export
+ */
+
+export { Card, CardHeader, CardMeta } from "./card";
+export { useCardPadding, useCardColors, useCardStyle } from "./tokens";

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

@@ -0,0 +1,37 @@
+/**
+ * Card Component Tokens
+ * Defines how Card consumes design system tokens
+ */
+/// <reference types="react" />
+import type { CardVariant, CardSize } from './types';
+export interface CardPaddingTokens {
+    bodyPaddingX: number;
+    bodyPaddingY: number;
+    headerPaddingX: number;
+    headerPaddingY: number;
+    actionsPaddingX: number;
+    actionsPaddingY: number;
+    coverHeight: number;
+    fontSize: number;
+    titleFontSize: number;
+}
+/**
+ * Get card size tokens
+ */
+export declare function useCardPadding(size?: CardSize): CardPaddingTokens;
+/**
+ * Get card colors for variant
+ */
+export declare function useCardColors(variant?: CardVariant): {
+    background: string;
+    foreground: string;
+    border: string;
+    headerBorder: string;
+    actionsBackground: string;
+    shadow: string;
+};
+/**
+ * Build card style object
+ */
+export declare function useCardStyle(variant: CardVariant, size: CardSize): React.CSSProperties;
+//# sourceMappingURL=tokens.d.ts.map

package/es/components/card/tokens.js

@@ -0,0 +1,167 @@
+/**
+ * Card Component Tokens
+ * Defines how Card consumes design system tokens
+ */
+
+import { useMemo } from 'react';
+import { useTokens, withOpacity } from "../../theme";
+var MOBILE_ROOT_REM_SCALE = 14 / 16;
+var mobileSpacing = function mobileSpacing(value) {
+  return value * MOBILE_ROOT_REM_SCALE;
+};
+/**
+ * Get card size tokens
+ */
+export function useCardPadding() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
+  return useMemo(function () {
+    var sizeMap = {
+      mini: {
+        bodyPaddingX: mobileSpacing(12),
+        bodyPaddingY: mobileSpacing(8),
+        headerPaddingX: mobileSpacing(12),
+        headerPaddingY: mobileSpacing(8),
+        actionsPaddingX: mobileSpacing(12),
+        actionsPaddingY: mobileSpacing(8),
+        coverHeight: mobileSpacing(96),
+        fontSize: 14,
+        titleFontSize: 18
+      },
+      small: {
+        bodyPaddingX: mobileSpacing(16),
+        bodyPaddingY: mobileSpacing(12),
+        headerPaddingX: mobileSpacing(16),
+        headerPaddingY: mobileSpacing(10),
+        actionsPaddingX: mobileSpacing(16),
+        actionsPaddingY: mobileSpacing(10),
+        coverHeight: mobileSpacing(128),
+        fontSize: 14,
+        titleFontSize: 18
+      },
+      middle: {
+        bodyPaddingX: mobileSpacing(16),
+        bodyPaddingY: mobileSpacing(16),
+        headerPaddingX: mobileSpacing(16),
+        headerPaddingY: mobileSpacing(12),
+        actionsPaddingX: mobileSpacing(16),
+        actionsPaddingY: mobileSpacing(12),
+        coverHeight: mobileSpacing(160),
+        fontSize: 14,
+        titleFontSize: 18
+      },
+      large: {
+        bodyPaddingX: mobileSpacing(20),
+        bodyPaddingY: mobileSpacing(20),
+        headerPaddingX: mobileSpacing(20),
+        headerPaddingY: mobileSpacing(16),
+        actionsPaddingX: mobileSpacing(20),
+        actionsPaddingY: mobileSpacing(16),
+        coverHeight: mobileSpacing(192),
+        fontSize: 14,
+        titleFontSize: 18
+      },
+      default: {
+        bodyPaddingX: mobileSpacing(16),
+        bodyPaddingY: mobileSpacing(16),
+        headerPaddingX: mobileSpacing(16),
+        headerPaddingY: mobileSpacing(12),
+        actionsPaddingX: mobileSpacing(16),
+        actionsPaddingY: mobileSpacing(12),
+        coverHeight: mobileSpacing(160),
+        fontSize: 14,
+        titleFontSize: 18
+      }
+    };
+    return sizeMap[size];
+  }, [size]);
+}
+
+/**
+ * Get card colors for variant
+ */
+export function useCardColors() {
+  var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors;
+  return useMemo(function () {
+    switch (variant) {
+      case 'secondary':
+        return {
+          background: colors.secondary,
+          foreground: colors['secondary-foreground'],
+          border: 'transparent',
+          headerBorder: 'transparent',
+          actionsBackground: withOpacity(colors.secondary, 0.5),
+          shadow: 'none'
+        };
+      case 'outline':
+      case 'outlined':
+        return {
+          background: 'transparent',
+          foreground: colors['card-foreground'],
+          border: colors.border,
+          headerBorder: colors.border,
+          actionsBackground: withOpacity(colors.muted, 0.2),
+          shadow: 'none'
+        };
+      case 'ghost':
+      case 'borderless':
+        return {
+          background: 'transparent',
+          foreground: colors['card-foreground'],
+          border: 'transparent',
+          headerBorder: 'transparent',
+          actionsBackground: 'transparent',
+          shadow: 'none'
+        };
+      case 'elevated':
+        return {
+          background: colors.card,
+          foreground: colors['card-foreground'],
+          border: 'transparent',
+          headerBorder: colors.border,
+          actionsBackground: withOpacity(colors.muted, 0.3),
+          shadow: "0 10px 24px ".concat(withOpacity(colors.foreground, 0.1))
+        };
+      case 'default':
+      default:
+        return {
+          background: colors.card,
+          foreground: colors['card-foreground'],
+          border: colors.border,
+          headerBorder: colors.border,
+          actionsBackground: withOpacity(colors.muted, 0.3),
+          shadow: 'none'
+        };
+    }
+  }, [variant, colors]);
+}
+
+/**
+ * Build card style object
+ */
+export function useCardStyle(variant, size) {
+  var colors = useCardColors(variant);
+  var _useTokens2 = useTokens(),
+    radius = _useTokens2.radius;
+  var resolvedVariant = variant === 'outlined' ? 'outline' : variant;
+  var resolvedSize = size === 'default' ? 'middle' : size;
+  var radiusBySize = {
+    mini: radius.get('md'),
+    small: radius.get('lg'),
+    middle: radius.get('lg'),
+    large: radius.get('xl')
+  };
+  var radiusValue = radiusBySize[resolvedSize];
+  return useMemo(function () {
+    return {
+      backgroundColor: colors.background,
+      borderRadius: radiusValue,
+      borderWidth: resolvedVariant === 'outline' || resolvedVariant === 'default' ? 1 : 0,
+      borderStyle: 'solid',
+      borderColor: colors.border,
+      boxShadow: colors.shadow,
+      overflow: 'hidden'
+    };
+  }, [colors, radiusValue, resolvedVariant]);
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Card Component Types
+ */
+/// <reference types="react" />
+export declare type CardVariant = 'default' | 'secondary' | 'outline' | 'outlined' | 'borderless' | 'ghost' | 'elevated';
+export declare type CardSize = 'mini' | 'small' | 'middle' | 'large' | 'default';
+export interface CardProps {
+    /** Card title */
+    title?: React.ReactNode;
+    /** Extra content in header (top-right) */
+    extra?: React.ReactNode;
+    /** Card content */
+    children?: React.ReactNode;
+    /** Cover image */
+    cover?: React.ReactNode;
+    /** Actions at the bottom */
+    actions?: React.ReactNode[];
+    /** Loading state */
+    loading?: boolean;
+    /** Whether card has hover effect */
+    hoverable?: boolean;
+    /** Disable card interaction */
+    disabled?: boolean;
+    /** Visual style variant */
+    variant?: CardVariant;
+    /** Size variant */
+    size?: CardSize;
+    /** Click handler */
+    onClick?: () => void;
+    /** Click handler for the header */
+    onHeaderClick?: () => void;
+    /** Click handler for the body */
+    onBodyClick?: () => void;
+    /** Header class/style overrides */
+    headerClassName?: string;
+    headerStyle?: React.CSSProperties;
+    /** Body class/style overrides */
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    /** Cover/actions class overrides */
+    coverClassName?: string;
+    coverStyle?: React.CSSProperties;
+    actionsClassName?: string;
+    actionsStyle?: React.CSSProperties;
+    /** Loading copy */
+    loadingText?: string;
+    /** x-web-ui compatibility alias */
+    type?: string;
+    /** x-web-ui compatibility alias */
+    bordered?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+}
+export interface CardHeaderProps {
+    /** Header title */
+    title?: React.ReactNode;
+    /** Subtitle */
+    subtitle?: React.ReactNode;
+    /** Avatar/icon on the left */
+    avatar?: React.ReactNode;
+    /** Extra content on the right */
+    extra?: React.ReactNode;
+}
+export interface CardMetaProps {
+    /** Meta title */
+    title?: React.ReactNode;
+    /** Meta description */
+    description?: React.ReactNode;
+    /** Avatar on the left */
+    avatar?: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/card/types.js

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

package/es/components/cascadePicker/cascadePicker.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CascadePickerProps } from './types';
+export declare const CascadePicker: React.ForwardRefExoticComponent<CascadePickerProps & React.RefAttributes<import("../picker").PickerActions>>;
+export default CascadePicker;
+//# sourceMappingURL=cascadePicker.d.ts.map