@hanwenbo/x-taro-ui 0.0.1

package/es/components/sonner/style.css

@@ -0,0 +1,67 @@
+@keyframes x-sonner-item-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes x-sonner-loading-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes x-sonner-progress-countdown {
+  from {
+    width: 100%;
+  }
+
+  to {
+    width: 0;
+  }
+}
+
+.x-sonner__animated-item {
+  animation: x-sonner-item-enter var(--x-sonner-transition-duration, 300ms)
+    var(--x-easing-decelerate) both;
+  transition:
+    opacity var(--x-sonner-transition-duration, 300ms) var(--x-easing-accelerate),
+    transform var(--x-sonner-transition-duration, 300ms) var(--x-easing-accelerate);
+}
+
+.x-sonner__animated-item--exiting {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.x-sonner__loading-icon {
+  animation: x-sonner-loading-rotate var(--x-sonner-loading-duration) linear infinite;
+}
+
+.x-sonner__progress {
+  animation-name: x-sonner-progress-countdown;
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+}
+
+.x-sonner__action:hover,
+.x-sonner__action--active {
+  background-color: var(--x-sonner-action-hover-surface) !important;
+}
+
+.x-sonner__cancel:hover,
+.x-sonner__cancel--active {
+  background-color: var(--x-sonner-cancel-hover-surface) !important;
+}
+
+.x-sonner__close:hover,
+.x-sonner__close--active {
+  background-color: var(--x-sonner-close-hover-surface) !important;
+  color: var(--x-sonner-close-hover-foreground) !important;
+  opacity: 1 !important;
+}

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

@@ -0,0 +1,119 @@
+/**
+ * Sonner component types.
+ */
+import type { ReactNode } from 'react';
+export declare type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading';
+export declare type SonnerTone = ToastType;
+export declare type SonnerType = Exclude<ToastType, 'default'>;
+export declare type SonnerTheme = 'light' | 'dark' | 'system';
+export declare type SonnerSize = 'mini' | 'small' | 'middle' | 'large';
+export declare type SonnerPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export declare type ToastPosition = SonnerPosition;
+export interface SonnerAction {
+    key?: string;
+    label: ReactNode;
+    onClick?: () => void;
+}
+export interface SonnerToastClassNames {
+    toast?: string;
+    title?: string;
+    description?: string;
+    content?: string;
+    icon?: string;
+    actionButton?: string;
+    cancelButton?: string;
+    closeButton?: string;
+    default?: string;
+    success?: string;
+    error?: string;
+    warning?: string;
+    info?: string;
+    loading?: string;
+}
+export interface SonnerToastOptions {
+    id?: string | number;
+    title?: ReactNode;
+    description?: ReactNode;
+    duration?: number;
+    position?: SonnerPosition;
+    closeButton?: boolean;
+    richColors?: boolean;
+    type?: ToastType;
+    tone?: SonnerTone;
+    action?: SonnerAction;
+    cancel?: SonnerAction;
+    onDismiss?: () => void;
+    classNames?: SonnerToastClassNames;
+}
+export interface SonnerToast extends Omit<SonnerToastOptions, 'id'> {
+    id: string;
+}
+/** Legacy declarative item kept for compatibility with existing Taro scenarios. */
+export interface SonnerItem {
+    key: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    tone?: SonnerTone;
+    type?: ToastType;
+    duration?: number;
+    closable?: boolean;
+    action?: SonnerAction;
+    cancel?: SonnerAction;
+}
+export interface SonnerProps {
+    size?: SonnerSize;
+    variant?: ToastType;
+    position?: SonnerPosition;
+    gap?: number;
+    limit?: number;
+    visibleToasts?: number;
+    closeButton?: boolean;
+    pauseOnHover?: boolean;
+    containerClassName?: string;
+    containerStyle?: React.CSSProperties;
+    toastOptions?: Partial<SonnerToastOptions>;
+    duration?: number;
+    offset?: number | string;
+    theme?: SonnerTheme;
+    richColors?: boolean;
+    icons?: Partial<Record<SonnerType | 'close', ReactNode>>;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Legacy single-toast declarative API. */
+    title?: ReactNode;
+    description?: ReactNode;
+    tone?: SonnerTone;
+    action?: SonnerAction;
+    cancel?: SonnerAction;
+    items?: SonnerItem[];
+    emptyText?: ReactNode;
+    onClose?: (key: string) => void;
+    onActionClick?: (actionKey: string, toastKey: string) => void;
+}
+export interface SonnerProviderProps extends SonnerProps {
+    children?: ReactNode;
+}
+export interface SonnerItemProps {
+    toast: SonnerToast;
+    onDismiss: (id: string) => void;
+    size?: SonnerSize;
+    variant?: ToastType;
+    closeButton?: boolean;
+    pauseOnHover?: boolean;
+    richColors?: boolean;
+    icons?: Partial<Record<SonnerType | 'close', ReactNode>>;
+}
+export interface SonnerContainerProps extends SonnerProps {
+    toasts: SonnerToast[];
+    onDismiss: (id: string) => void;
+}
+export interface SonnerState {
+    toasts: SonnerToast[];
+    addToast: (options: Omit<SonnerToastOptions, 'id'> & {
+        id?: string | number;
+    }) => string;
+    dismissToast: (id: string) => void;
+    dismissAll: () => void;
+}
+export declare type ToasterProps = SonnerProviderProps;
+//# sourceMappingURL=types.d.ts.map

package/es/components/sonner/types.js

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

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

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as Space, SpaceCompact } from './space';
+export { default } from './space';
+//# sourceMappingURL=index.d.ts.map

package/es/components/space/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { default as Space, SpaceCompact } from "./space";
+export { default } from "./space";

package/es/components/space/space.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { SpaceCompactProps, SpaceProps } from './types';
+export declare const SpaceCompact: React.FC<SpaceCompactProps>;
+export declare type SpaceComponent = React.FC<SpaceProps> & {
+    Compact: typeof SpaceCompact;
+};
+/**
+ * Space Component
+ *
+ * @description
+ * Design system aligned space component
+ */
+declare const Space: SpaceComponent;
+export default Space;
+//# sourceMappingURL=space.d.ts.map

package/es/components/space/space.js

@@ -0,0 +1,108 @@
+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); }
+var _excluded = ["block", "direction", "children", "className", "style", "testID"],
+  _excluded2 = ["children", "direction", "size", "wrap", "align", "split", "flex", "testID", "className", "style"];
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import { View } from '@tarojs/components';
+import { designSystemSpacing } from "../../theme";
+import { classNames } from "../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var sizeMap = {
+  small: designSystemSpacing['2'],
+  middle: designSystemSpacing['3'],
+  large: designSystemSpacing['4']
+};
+var isPresetSize = function isPresetSize(size) {
+  return typeof size === 'string' && Object.prototype.hasOwnProperty.call(sizeMap, size);
+};
+export var SpaceCompact = function SpaceCompact(_ref) {
+  var _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    testID = _ref.testID,
+    viewProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({}, viewProps), {}, {
+    className: classNames('x-space-compact', className),
+    "data-slot": "space-compact",
+    "data-testid": testID,
+    style: _objectSpread({
+      display: 'inline-flex',
+      flexDirection: direction === 'horizontal' ? 'row' : 'column',
+      width: block ? '100%' : undefined
+    }, style),
+    children: children
+  }));
+};
+SpaceCompact.displayName = 'SpaceCompact';
+/**
+ * Space Component
+ *
+ * @description
+ * Design system aligned space component
+ */
+var Space = function Space(_ref2) {
+  var _tupleSize$;
+  var children = _ref2.children,
+    _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'horizontal' : _ref2$direction,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'small' : _ref2$size,
+    _ref2$wrap = _ref2.wrap,
+    wrap = _ref2$wrap === void 0 ? false : _ref2$wrap,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? 'start' : _ref2$align,
+    split = _ref2.split,
+    flex = _ref2.flex,
+    testID = _ref2.testID,
+    className = _ref2.className,
+    style = _ref2.style,
+    viewProps = _objectWithoutProperties(_ref2, _excluded2);
+  var resolvedSize = isPresetSize(size) ? sizeMap[size] : size;
+  var tupleSize = Array.isArray(resolvedSize) ? resolvedSize : undefined;
+  var scalarSize = Array.isArray(resolvedSize) ? undefined : resolvedSize;
+  var gapStyle = tupleSize ? {
+    columnGap: tupleSize[0],
+    rowGap: (_tupleSize$ = tupleSize[1]) !== null && _tupleSize$ !== void 0 ? _tupleSize$ : tupleSize[0]
+  } : {
+    gap: scalarSize
+  };
+  var containerStyle = _objectSpread(_objectSpread({
+    display: 'inline-flex',
+    flexDirection: direction === 'horizontal' ? 'row' : 'column',
+    flexWrap: wrap === 'wrap-reverse' ? 'wrap-reverse' : wrap === true || wrap === 'wrap' ? 'wrap' : undefined,
+    alignItems: direction === 'horizontal' ? align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : align === 'center' ? 'center' : 'baseline' : undefined,
+    flex: flex
+  }, style), gapStyle);
+  var childItems = React.Children.toArray(children);
+  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({}, viewProps), {}, {
+    className: classNames('x-space', className),
+    "data-slot": "space",
+    "data-testid": testID,
+    "data-space-direction": direction,
+    "data-space-wrap": wrap === true ? 'wrap' : wrap || 'nowrap',
+    "data-space-align": align,
+    style: containerStyle,
+    children: childItems.map(function (child, index) {
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [child, split && index < childItems.length - 1 && /*#__PURE__*/_jsx(View, {
+          className: "x-space-split",
+          children: split
+        })]
+      }, index);
+    })
+  }));
+};
+Space.displayName = 'Space';
+Space.Compact = SpaceCompact;
+export default Space;

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

@@ -0,0 +1,41 @@
+/**
+ * Space Component Types
+ *
+ * @description
+ * Design system aligned space component types
+ */
+import type { CSSProperties, ReactNode } from 'react';
+import type { ViewProps as TaroViewProps } from '@tarojs/components/types/View';
+declare type NativeSpaceViewProps = Omit<TaroViewProps, 'children' | 'className' | 'ref' | 'style'>;
+export interface SpaceProps extends NativeSpaceViewProps {
+    /** Component children */
+    children?: ReactNode;
+    /** Spacing direction */
+    direction?: 'horizontal' | 'vertical';
+    /** Space size */
+    size?: number | number[] | 'small' | 'middle' | 'large' | string;
+    /** Wrap items */
+    wrap?: boolean | 'wrap' | 'wrap-reverse';
+    /** Align items */
+    align?: 'start' | 'end' | 'center' | 'baseline';
+    /** Optional separator compatibility extension. */
+    split?: ReactNode;
+    /** Native-compatible flex shortcut. */
+    flex?: number;
+    /** Native-compatible test id. */
+    testID?: string;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+}
+export interface SpaceCompactProps extends NativeSpaceViewProps {
+    block?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/es/components/space/types.js

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

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

@@ -0,0 +1,3 @@
+export { Spin } from './spin';
+export type { SpinProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/es/components/spin/index.js

@@ -0,0 +1 @@
+export { Spin } from "./spin";

package/es/components/spin/spin.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SpinProps } from './types';
+import './style.css';
+export declare const Spin: React.FC<SpinProps>;
+export default Spin;
+//# sourceMappingURL=spin.d.ts.map

package/es/components/spin/spin.js

@@ -0,0 +1,157 @@
+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); }
+var _excluded = ["spinning", "size", "color", "tip", "delay", "fullscreen", "indicator", "wrapperClassName", "children", "className", "style", "testID"];
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useEffect, useState } from 'react';
+import { View } from '@tarojs/components';
+import { designSystemLayers, designSystemSpacing, designSystemTypography, useTheme, withOpacity } from "../../theme";
+import { classNames } from "../../utils";
+import { renderTextNode } from "../_shared/render";
+import { useConfig } from "../configProvider";
+import { Spinner } from "../spinner";
+import "./style.css";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Spin = function Spin(_ref) {
+  var _ref$spinning = _ref.spinning,
+    spinning = _ref$spinning === void 0 ? true : _ref$spinning,
+    size = _ref.size,
+    color = _ref.color,
+    tip = _ref.tip,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    _ref$fullscreen = _ref.fullscreen,
+    fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
+    customIndicator = _ref.indicator,
+    wrapperClassName = _ref.wrapperClassName,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    testID = _ref.testID,
+    viewProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var config = useConfig();
+  var _useState = useState(spinning && delay <= 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    ready = _useState2[0],
+    setReady = _useState2[1];
+  var active = spinning && ready;
+  var hasChildren = children !== undefined && children !== null;
+  var prefixCls = config.prefixCls;
+  useEffect(function () {
+    if (!spinning) {
+      setReady(false);
+      return;
+    }
+    if (delay <= 0) {
+      setReady(true);
+      return;
+    }
+    setReady(false);
+    var timer = setTimeout(function () {
+      return setReady(true);
+    }, delay);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [delay, spinning]);
+  if (!active) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+  }
+  var indicator = customIndicator !== null && customIndicator !== void 0 ? customIndicator : /*#__PURE__*/_jsx(Spinner, {
+    size: size,
+    color: color
+  });
+  var rootStyle = _objectSpread({
+    position: fullscreen ? 'fixed' : 'relative',
+    left: fullscreen ? 0 : undefined,
+    right: fullscreen ? 0 : undefined,
+    top: fullscreen ? 0 : undefined,
+    bottom: fullscreen ? 0 : undefined,
+    zIndex: fullscreen ? designSystemLayers.overlay : undefined,
+    minHeight: fullscreen || hasChildren ? undefined : 64
+  }, style);
+  var overlay = /*#__PURE__*/_jsxs(View, {
+    "data-slot": "spin-overlay",
+    className: classNames("".concat(prefixCls, "-spin__overlay"), 'x-spin__fade-in'),
+    catchMove: true,
+    style: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      zIndex: designSystemLayers.raised,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: designSystemSpacing['2']
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      "data-slot": "spin-backdrop",
+      className: "".concat(prefixCls, "-spin__backdrop"),
+      style: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        backgroundColor: withOpacity(theme.colors.background, 0.4),
+        backdropFilter: 'blur(4px)',
+        WebkitBackdropFilter: 'blur(4px)'
+      }
+    }), /*#__PURE__*/_jsxs(View, {
+      "data-slot": "spin-indicator",
+      className: "".concat(prefixCls, "-spin__indicator"),
+      style: {
+        position: 'relative',
+        zIndex: designSystemLayers.raised,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: designSystemSpacing['2']
+      },
+      children: [indicator, renderTextNode(tip, {
+        fontSize: designSystemTypography.sizes.sm,
+        color: theme.colors['muted-foreground']
+      }, {
+        className: "".concat(prefixCls, "-spin__tip"),
+        'data-slot': 'spin-tip'
+      })]
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({}, viewProps), {}, {
+    "data-slot": "spin-root",
+    "data-spinning": "true",
+    "data-fullscreen": fullscreen ? 'true' : undefined,
+    "data-testid": testID,
+    className: classNames("".concat(prefixCls, "-spin"), fullscreen && "".concat(prefixCls, "-spin--fullscreen"), className),
+    style: rootStyle,
+    children: [/*#__PURE__*/_jsx(View, {
+      "data-slot": "spin-content",
+      className: classNames("".concat(prefixCls, "-spin__content"), wrapperClassName),
+      style: {
+        opacity: hasChildren ? 0.5 : undefined,
+        minHeight: fullscreen || hasChildren ? undefined : 64
+      },
+      children: children
+    }), overlay]
+  }));
+};
+export default Spin;

package/es/components/spin/style.css

@@ -0,0 +1,13 @@
+@keyframes x-spin-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.x-spin__fade-in {
+  animation: x-spin-fade-in 160ms ease-out both;
+}

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

@@ -0,0 +1,21 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ViewProps as TaroViewProps } from '@tarojs/components/types/View';
+import type { SpinnerProps } from '../spinner';
+declare type NativeSpinViewProps = Omit<TaroViewProps, 'children' | 'className' | 'ref' | 'style'>;
+export interface SpinProps extends NativeSpinViewProps {
+    spinning?: boolean;
+    size?: SpinnerProps['size'];
+    color?: string;
+    tip?: ReactNode;
+    delay?: number;
+    fullscreen?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    indicator?: ReactNode;
+    wrapperClassName?: string;
+    /** Native-compatible stable test id. */
+    testID?: string;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/es/components/spin/types.js

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

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

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as Spinner } from './spinner';
+export { default } from './spinner';
+//# sourceMappingURL=index.d.ts.map

package/es/components/spinner/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { default as Spinner } from "./spinner";
+export { default } from "./spinner";

package/es/components/spinner/spinner.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SpinnerProps } from './types';
+import './style.css';
+/**
+ * Spinner Component
+ *
+ * @description
+ * Design system aligned spinner component
+ */
+declare const Spinner: React.FC<SpinnerProps>;
+export default Spinner;
+//# sourceMappingURL=spinner.d.ts.map