@hanwenbo/x-taro-ui 0.0.1

package/es/components/skeleton/skeleton.js

@@ -0,0 +1,312 @@
+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); }
+/**
+ * Skeleton Component
+ * Loading placeholder primitives plus the legacy Taro composite API.
+ */
+
+import React from 'react';
+import { View } from '@tarojs/components';
+import { classNames } from "../../utils";
+import { designSystemSpacing, useTokens } from "../../theme";
+import { useConfig } from "../configProvider";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var skeletonSizeValues = {
+  mini: 20,
+  small: 24,
+  middle: 32,
+  large: 40
+};
+var skeletonInputSizeValues = {
+  mini: 28,
+  small: 32,
+  middle: 40,
+  large: 48
+};
+var SKELETON_RADIUS = 'var(--x-skeleton-radius, 4px)';
+var SKELETON_AVATAR_SQUARE_RADIUS = 'var(--x-skeleton-avatar-square-radius, 4px)';
+var SKELETON_IMAGE_RADIUS = 'var(--x-skeleton-image-radius, 8px)';
+var SKELETON_INPUT_RADIUS = 'var(--x-skeleton-input-radius, 4px)';
+var MOBILE_INLINE_FONT_SIZE = 14;
+var MOBILE_INLINE_LINE_HEIGHT = '22px';
+var MOBILE_PARAGRAPH_MARGIN = 7;
+function toLength(value) {
+  return typeof value === 'number' ? "".concat(value, "px") : value;
+}
+function hasLegacyCompositeProps(props) {
+  return props.active !== undefined || props.avatar !== undefined || props.avatarSize !== undefined || props.title !== undefined || props.rows !== undefined || props.round !== undefined || props.loading !== undefined || props.children !== undefined;
+}
+export var Skeleton = function Skeleton(props) {
+  var config = useConfig();
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    motion = _useTokens.motion,
+    radius = _useTokens.radius;
+  var prefixCls = config.prefixCls;
+  var surfaceColor = "var(--x-skeleton-surface, ".concat(colors.muted, ")");
+  if (!hasLegacyCompositeProps(props)) {
+    var _props$dataSlot = props.dataSlot,
+      dataSlot = _props$dataSlot === void 0 ? 'skeleton' : _props$dataSlot,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'default' : _props$variant,
+      size = props.size,
+      _props$animated = props.animated,
+      _animated = _props$animated === void 0 ? false : _props$animated,
+      _width = props.width,
+      _props$height = props.height,
+      _height = _props$height === void 0 ? size ? skeletonSizeValues[size] : 16 : _props$height,
+      _borderRadius = props.borderRadius,
+      _className = props.className,
+      _style = props.style;
+    var resolvedRadius = _borderRadius !== null && _borderRadius !== void 0 ? _borderRadius : variant === 'circular' ? '50%' : variant === 'rectangular' ? 0 : SKELETON_RADIUS;
+    return /*#__PURE__*/_jsx(View, {
+      "data-slot": dataSlot,
+      "data-variant": variant,
+      "data-size": size,
+      "aria-hidden": true,
+      className: classNames("".concat(prefixCls, "-skeleton"), "".concat(prefixCls, "-skeleton--").concat(variant), _animated && 'x-skeleton__animated-surface', _animated && "".concat(prefixCls, "-skeleton--animated"), _className),
+      style: _objectSpread({
+        display: 'inline-block',
+        width: toLength(_width),
+        height: toLength(_height),
+        borderRadius: toLength(resolvedRadius),
+        backgroundColor: surfaceColor,
+        animationDuration: _animated ? "".concat(motion.durationsMs.overlayDefault * 4, "ms") : undefined
+      }, _style)
+    });
+  }
+  var _props$active = props.active,
+    active = _props$active === void 0 ? true : _props$active,
+    animated = props.animated,
+    width = props.width,
+    height = props.height,
+    borderRadius = props.borderRadius,
+    _props$avatar = props.avatar,
+    avatar = _props$avatar === void 0 ? false : _props$avatar,
+    _props$avatarSize = props.avatarSize,
+    avatarSize = _props$avatarSize === void 0 ? 40 : _props$avatarSize,
+    _props$title = props.title,
+    title = _props$title === void 0 ? true : _props$title,
+    _props$rows = props.rows,
+    rows = _props$rows === void 0 ? 3 : _props$rows,
+    _props$round = props.round,
+    round = _props$round === void 0 ? false : _props$round,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? true : _props$loading,
+    children = props.children,
+    className = props.className,
+    style = props.style;
+  if (!loading) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+  }
+  var isAnimated = animated !== null && animated !== void 0 ? animated : active;
+  var safeRows = Math.max(0, Math.floor(rows));
+  var surfaceClassName = classNames(isAnimated && 'x-skeleton__animated-surface');
+  var surfaceStyle = {
+    backgroundColor: surfaceColor,
+    animationDuration: isAnimated ? "".concat(motion.durationsMs.overlayDefault * 4, "ms") : undefined
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    "data-slot": "skeleton-composite",
+    "aria-hidden": true,
+    className: classNames("".concat(prefixCls, "-skeleton"), "".concat(prefixCls, "-skeleton--composite"), isAnimated && "".concat(prefixCls, "-skeleton--animated"), className),
+    style: _objectSpread({
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'row',
+      gap: designSystemSpacing['3.5'],
+      width: toLength(width),
+      height: toLength(height),
+      overflow: 'hidden',
+      borderRadius: toLength(borderRadius)
+    }, style),
+    children: [avatar && /*#__PURE__*/_jsx(View, {
+      "data-slot": "skeleton-avatar",
+      className: classNames("".concat(prefixCls, "-skeleton__avatar"), surfaceClassName),
+      style: _objectSpread(_objectSpread({}, surfaceStyle), {}, {
+        width: avatarSize,
+        height: avatarSize,
+        borderRadius: round ? '50%' : SKELETON_AVATAR_SQUARE_RADIUS,
+        flexShrink: 0
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      "data-slot": "skeleton-content",
+      className: "".concat(prefixCls, "-skeleton__content"),
+      style: {
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        gap: MOBILE_PARAGRAPH_MARGIN
+      },
+      children: [title && /*#__PURE__*/_jsx(View, {
+        "data-slot": "skeleton-title",
+        className: classNames("".concat(prefixCls, "-skeleton__title"), surfaceClassName),
+        style: _objectSpread(_objectSpread({}, surfaceStyle), {}, {
+          width: '40%',
+          height: 20,
+          marginBottom: safeRows > 0 ? MOBILE_PARAGRAPH_MARGIN : 0,
+          borderRadius: round ? radius.xl : SKELETON_RADIUS
+        })
+      }), Array.from({
+        length: safeRows
+      }).map(function (_, index) {
+        return /*#__PURE__*/_jsx(View, {
+          "data-slot": "skeleton-paragraph-line",
+          "data-index": index,
+          className: classNames("".concat(prefixCls, "-skeleton__paragraph-line"), surfaceClassName),
+          style: _objectSpread(_objectSpread({}, surfaceStyle), {}, {
+            width: index === safeRows - 1 ? '60%' : '100%',
+            height: 16,
+            borderRadius: round ? radius.lg : SKELETON_RADIUS
+          })
+        }, index);
+      })]
+    })]
+  });
+};
+export var SkeletonTitle = function SkeletonTitle(_ref) {
+  var _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? true : _ref$animated,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '40%' : _ref$width,
+    className = _ref.className,
+    style = _ref.style;
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "skeleton-title",
+    className: className,
+    style: _objectSpread({
+      fontSize: MOBILE_INLINE_FONT_SIZE,
+      lineHeight: MOBILE_INLINE_LINE_HEIGHT
+    }, style),
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      animated: animated,
+      width: width,
+      height: 20,
+      borderRadius: SKELETON_RADIUS,
+      style: {
+        marginBottom: 14
+      }
+    })
+  });
+};
+export var SkeletonParagraph = function SkeletonParagraph(_ref2) {
+  var _ref2$animated = _ref2.animated,
+    animated = _ref2$animated === void 0 ? true : _ref2$animated,
+    _ref2$lineCount = _ref2.lineCount,
+    lineCount = _ref2$lineCount === void 0 ? 3 : _ref2$lineCount,
+    className = _ref2.className,
+    style = _ref2.style;
+  var safeLineCount = Math.max(0, Math.floor(lineCount));
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "skeleton-paragraph",
+    className: className,
+    style: _objectSpread({
+      display: 'block',
+      fontSize: MOBILE_INLINE_FONT_SIZE,
+      lineHeight: MOBILE_INLINE_LINE_HEIGHT
+    }, style),
+    children: Array.from({
+      length: safeLineCount
+    }).map(function (_, index) {
+      return /*#__PURE__*/_jsx(Skeleton, {
+        dataSlot: "skeleton-paragraph-line",
+        animated: animated,
+        height: 16,
+        width: index === safeLineCount - 1 ? '60%' : '100%',
+        borderRadius: SKELETON_RADIUS,
+        style: {
+          marginTop: index === 0 ? undefined : MOBILE_PARAGRAPH_MARGIN
+        }
+      }, index);
+    })
+  });
+};
+export var SkeletonAvatar = function SkeletonAvatar(_ref3) {
+  var _ref3$animated = _ref3.animated,
+    animated = _ref3$animated === void 0 ? true : _ref3$animated,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 40 : _ref3$size,
+    _ref3$shape = _ref3.shape,
+    shape = _ref3$shape === void 0 ? 'circle' : _ref3$shape,
+    className = _ref3.className,
+    style = _ref3.style;
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "skeleton-avatar",
+    className: className,
+    style: _objectSpread({
+      fontSize: MOBILE_INLINE_FONT_SIZE,
+      lineHeight: MOBILE_INLINE_LINE_HEIGHT
+    }, style),
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      animated: animated,
+      width: size,
+      height: size,
+      borderRadius: shape === 'circle' ? '50%' : SKELETON_AVATAR_SQUARE_RADIUS
+    })
+  });
+};
+export var SkeletonImage = function SkeletonImage(_ref4) {
+  var _ref4$animated = _ref4.animated,
+    animated = _ref4$animated === void 0 ? true : _ref4$animated,
+    _ref4$width = _ref4.width,
+    width = _ref4$width === void 0 ? '100%' : _ref4$width,
+    _ref4$height = _ref4.height,
+    height = _ref4$height === void 0 ? 200 : _ref4$height,
+    className = _ref4.className,
+    style = _ref4.style;
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "skeleton-image",
+    className: className,
+    style: _objectSpread({
+      fontSize: MOBILE_INLINE_FONT_SIZE,
+      lineHeight: MOBILE_INLINE_LINE_HEIGHT
+    }, style),
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      animated: animated,
+      width: width,
+      height: height,
+      borderRadius: SKELETON_IMAGE_RADIUS
+    })
+  });
+};
+export var SkeletonInput = function SkeletonInput(_ref5) {
+  var _ref5$animated = _ref5.animated,
+    animated = _ref5$animated === void 0 ? true : _ref5$animated,
+    _ref5$width = _ref5.width,
+    width = _ref5$width === void 0 ? '100%' : _ref5$width,
+    _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 'middle' : _ref5$size,
+    className = _ref5.className,
+    style = _ref5.style;
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "skeleton-input",
+    "data-size": size,
+    className: className,
+    style: _objectSpread({
+      fontSize: MOBILE_INLINE_FONT_SIZE,
+      lineHeight: MOBILE_INLINE_LINE_HEIGHT
+    }, style),
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      animated: animated,
+      width: width,
+      height: skeletonInputSizeValues[size],
+      borderRadius: SKELETON_INPUT_RADIUS
+    })
+  });
+};
+Skeleton.displayName = 'Skeleton';
+SkeletonTitle.displayName = 'SkeletonTitle';
+SkeletonParagraph.displayName = 'SkeletonParagraph';
+SkeletonAvatar.displayName = 'SkeletonAvatar';
+SkeletonImage.displayName = 'SkeletonImage';
+SkeletonInput.displayName = 'SkeletonInput';
+export default Skeleton;

package/es/components/skeleton/style.css

@@ -0,0 +1,16 @@
+@keyframes x-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.x-skeleton__animated-surface {
+  animation-name: x-skeleton-pulse;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}

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

@@ -0,0 +1,71 @@
+/**
+ * Skeleton Component Types
+ */
+/// <reference types="react" />
+export declare type SkeletonVariant = 'default' | 'text' | 'circular' | 'rectangular' | 'rounded';
+export declare type SkeletonSize = 'mini' | 'small' | 'middle' | 'large';
+export interface SkeletonProps {
+    /** Slot identifier, aligned with x-mobile-ui. */
+    dataSlot?: string;
+    /** Optional visual variant. */
+    variant?: SkeletonVariant;
+    /** Optional height preset. */
+    size?: SkeletonSize;
+    /** Whether the placeholder should pulse. */
+    animated?: boolean;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number | string;
+    /** Legacy composite API: animation alias. */
+    active?: boolean;
+    /** Legacy composite API: avatar placeholder. */
+    avatar?: boolean;
+    /** Legacy composite API: avatar size. */
+    avatarSize?: number;
+    /** Legacy composite API: title placeholder. */
+    title?: boolean;
+    /** Legacy composite API: number of paragraph rows. */
+    rows?: number;
+    /** Legacy composite API: rounded placeholder surfaces. */
+    round?: boolean;
+    /** Legacy composite API: false renders children. */
+    loading?: boolean;
+    /** Legacy composite API: loaded content. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SkeletonTitleProps {
+    animated?: boolean;
+    width?: number | string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SkeletonParagraphProps {
+    animated?: boolean;
+    lineCount?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SkeletonAvatarProps {
+    animated?: boolean;
+    size?: number | string;
+    shape?: 'circle' | 'square';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SkeletonImageProps {
+    animated?: boolean;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SkeletonInputProps {
+    animated?: boolean;
+    width?: number | string;
+    size?: SkeletonSize;
+    className?: string;
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/skeleton/types.js

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

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

@@ -0,0 +1,5 @@
+export { Slider } from './slider';
+export type { SliderProps, SliderVariant } from './types';
+export { useSliderTokens, useSliderColors } from './tokens';
+export { default } from './slider';
+//# sourceMappingURL=index.d.ts.map

package/es/components/slider/index.js

@@ -0,0 +1,3 @@
+export { Slider } from "./slider";
+export { useSliderTokens, useSliderColors } from "./tokens";
+export { default } from "./slider";

package/es/components/slider/slider.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Slider Component
+ * Cross-platform single/range slider aligned with x-mobile-ui.
+ */
+import React from 'react';
+import type { SliderProps } from './types';
+export declare const normalizeSliderValue: (value: number, min: number, max: number, step: number) => number;
+export declare const Slider: React.FC<SliderProps>;
+export default Slider;
+//# sourceMappingURL=slider.d.ts.map