@hanwenbo/x-taro-ui 0.0.1

package/es/components/capsuleTabs/capsuleTabs.js

@@ -0,0 +1,500 @@
+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 _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 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); }
+import React, { Children, isValidElement, useCallback, useMemo, useState } from 'react';
+import { ScrollView, Text, View } from '@tarojs/components';
+import { classNames } from "../../utils";
+import { centeredInlineSlot } from "../../utils/inlineAlignment";
+import { usePressable } from "../../patterns";
+import { capsuleTabsSizeMetrics, useTokens } from "../../theme";
+import { useConfigProvider } from "../configProvider";
+import { useTaroSelectionIndicator } from "../internal/selectionControl/useTaroSelectionIndicator";
+import { useTaroScrollIntoView } from "../internal/selectionControl/useTaroScrollIntoView";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export var CapsuleTab = function CapsuleTab() {
+  return null;
+};
+CapsuleTab.displayName = 'CapsuleTab';
+function resolveVariant(variant) {
+  if (variant === 'solid' || variant === 'pills') {
+    return 'pills';
+  }
+  if (variant === 'outline' || variant === 'ghost') {
+    return variant;
+  }
+  return 'default';
+}
+function CapsuleBadge(_ref) {
+  var content = _ref.content,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size;
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors;
+  var metrics = size === 'mini' ? {
+    minSize: 12,
+    padding: 2,
+    fontSize: 8
+  } : size === 'large' ? {
+    minSize: 20,
+    padding: 6,
+    fontSize: 12
+  } : {
+    minSize: 16,
+    padding: 4,
+    fontSize: 10
+  };
+  var backgroundColor = color === 'destructive' ? colors.destructive : color === 'success' ? colors.success : color === 'default' ? colors['muted-foreground'] : colors.primary;
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "capsule-tabs-badge-content",
+    style: {
+      minWidth: metrics.minSize,
+      height: metrics.minSize,
+      paddingLeft: metrics.padding,
+      paddingRight: metrics.padding,
+      borderRadius: 'var(--x-radius-full)',
+      backgroundColor: backgroundColor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: typeof content === 'string' || typeof content === 'number' ? /*#__PURE__*/_jsx(Text, {
+      style: {
+        fontSize: metrics.fontSize,
+        fontWeight: '600',
+        color: colors['primary-foreground'],
+        lineHeight: 1.2
+      },
+      children: content
+    }) : content
+  });
+}
+function nodeToText(node) {
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) {
+    var text = node.map(nodeToText).filter(Boolean).join('');
+    return text || undefined;
+  }
+  if ( /*#__PURE__*/React.isValidElement(node)) return nodeToText(node.props.children);
+  return undefined;
+}
+function CapsuleTrigger(_ref2) {
+  var _style$transition;
+  var active = _ref2.active,
+    ariaLabel = _ref2.ariaLabel,
+    children = _ref2.children,
+    className = _ref2.className,
+    disabled = _ref2.disabled,
+    id = _ref2.id,
+    onPress = _ref2.onPress,
+    prefixCls = _ref2.prefixCls,
+    style = _ref2.style;
+  var _usePressable = usePressable({
+      disabled: disabled,
+      onPress: onPress,
+      scale: 0.985
+    }),
+    handlers = _usePressable.handlers,
+    pressStyle = _usePressable.style;
+  var transition = [pressStyle.transition, 'background-color var(--x-duration-emphasis) var(--x-easing-standard)', 'border-color var(--x-duration-emphasis) var(--x-easing-standard)'].filter(Boolean).join(', ');
+  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
+    id: id,
+    className: classNames("".concat(prefixCls, "-capsule-tabs__trigger"), active && "".concat(prefixCls, "-capsule-tabs__trigger--active"), disabled && "".concat(prefixCls, "-capsule-tabs__trigger--disabled"), className),
+    "data-slot": "capsule-tabs-trigger",
+    "data-active": active ? 'true' : 'false',
+    "data-disabled": disabled ? 'true' : 'false',
+    role: "button",
+    ariaLabel: ariaLabel
+  }, handlers), {}, {
+    style: _objectSpread(_objectSpread(_objectSpread({
+      opacity: disabled ? 0.4 : 1
+    }, pressStyle), style), {}, {
+      transition: (_style$transition = style.transition) !== null && _style$transition !== void 0 ? _style$transition : transition
+    }),
+    children: children
+  }));
+}
+export var CapsuleTabs = function CapsuleTabs(_ref3) {
+  var _resolvedItems$;
+  var activeKey = _ref3.activeKey,
+    defaultActiveKey = _ref3.defaultActiveKey,
+    _ref3$items = _ref3.items,
+    items = _ref3$items === void 0 ? [] : _ref3$items,
+    children = _ref3.children,
+    onChange = _ref3.onChange,
+    sizeProp = _ref3.size,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'default' : _ref3$variant,
+    _ref3$scrollEnabled = _ref3.scrollEnabled,
+    scrollEnabled = _ref3$scrollEnabled === void 0 ? false : _ref3$scrollEnabled,
+    _ref3$isCompact = _ref3.isCompact,
+    isCompact = _ref3$isCompact === void 0 ? false : _ref3$isCompact,
+    disabledProp = _ref3.disabled,
+    tabClassName = _ref3.tabClassName,
+    tabStyle = _ref3.tabStyle,
+    activeTabClassName = _ref3.activeTabClassName,
+    activeTabStyle = _ref3.activeTabStyle,
+    headerStyle = _ref3.headerStyle,
+    tabTextStyle = _ref3.tabTextStyle,
+    activeTabTextStyle = _ref3.activeTabTextStyle,
+    _ref3$fadeMaskEnabled = _ref3.fadeMaskEnabled,
+    fadeMaskEnabled = _ref3$fadeMaskEnabled === void 0 ? true : _ref3$fadeMaskEnabled,
+    className = _ref3.className,
+    style = _ref3.style;
+  var config = useConfigProvider();
+  var prefixCls = config.prefixCls;
+  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : config.componentSize;
+  var disabled = disabledProp !== null && disabledProp !== void 0 ? disabledProp : config.disabled;
+  var childItems = Children.toArray(children).filter(function (child) {
+    var _child$type;
+    return /*#__PURE__*/isValidElement(child) && (child.type === CapsuleTab || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'CapsuleTab');
+  }).map(function (child, index) {
+    var _child$props$tabKey, _child$key;
+    return {
+      key: (_child$props$tabKey = child.props.tabKey) !== null && _child$props$tabKey !== void 0 ? _child$props$tabKey : String((_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index),
+      title: child.props.title,
+      icon: child.props.icon,
+      badge: child.props.badge,
+      badgeColor: child.props.badgeColor,
+      disabled: child.props.disabled,
+      children: child.props.children,
+      forceRender: child.props.forceRender,
+      destroyOnClose: child.props.destroyOnClose,
+      className: child.props.className,
+      style: child.props.style
+    };
+  });
+  var resolvedItems = items.length > 0 ? items : childItems;
+  var _useState = useState(defaultActiveKey !== null && defaultActiveKey !== void 0 ? defaultActiveKey : (_resolvedItems$ = resolvedItems[0]) === null || _resolvedItems$ === void 0 ? void 0 : _resolvedItems$.key),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalActiveKey = _useState2[0],
+    setInternalActiveKey = _useState2[1];
+  var currentKey = activeKey !== null && activeKey !== void 0 ? activeKey : internalActiveKey;
+  var controlled = activeKey !== undefined;
+  var _useState3 = useState({
+      left: false,
+      right: true
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollMasks = _useState4[0],
+    setScrollMasks = _useState4[1];
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors,
+    radius = _useTokens2.radius;
+  var metrics = capsuleTabsSizeMetrics[size];
+  var resolvedVariant = resolveVariant(variant);
+  var useSlidingIndicator = resolvedVariant === 'pills';
+  var _useTaroSelectionIndi = useTaroSelectionIndicator({
+      activeKey: currentKey !== null && currentKey !== void 0 ? currentKey : null,
+      enabled: useSlidingIndicator,
+      inset: isCompact ? 2 : metrics.indicatorInset,
+      mode: 'pill'
+    }),
+    containerId = _useTaroSelectionIndi.containerId,
+    itemId = _useTaroSelectionIndi.itemId,
+    indicatorStyle = _useTaroSelectionIndi.indicatorStyle,
+    indicatorReady = _useTaroSelectionIndi.indicatorReady,
+    indicatorMotionReady = _useTaroSelectionIndi.indicatorMotionReady;
+  var scrollContainerId = "".concat(containerId, "-scroll");
+  var _useTaroScrollIntoVie = useTaroScrollIntoView({
+      activeKey: currentKey,
+      containerId: scrollContainerId,
+      enabled: scrollEnabled,
+      itemId: itemId
+    }),
+    recordScroll = _useTaroScrollIntoVie.recordScroll,
+    scrollTarget = _useTaroScrollIntoVie.scrollIntoView,
+    scrollLeft = _useTaroScrollIntoVie.scrollLeft,
+    scrollToKey = _useTaroScrollIntoVie.scrollToKey;
+  var select = useCallback(function (item) {
+    if (disabled || item.disabled || item.key === currentKey) return;
+    if (!controlled) setInternalActiveKey(item.key);
+    if (scrollEnabled) scrollToKey(item.key);
+    onChange === null || onChange === void 0 || onChange(item.key);
+  }, [controlled, currentKey, disabled, onChange, scrollEnabled, scrollToKey]);
+  var trackBackground = useMemo(function () {
+    switch (resolvedVariant) {
+      case 'outline':
+        return colors.background;
+      case 'ghost':
+        return 'transparent';
+      case 'pills':
+        return colors.secondary;
+      default:
+        return colors.muted;
+    }
+  }, [colors, resolvedVariant]);
+  var getItemColors = function getItemColors(active) {
+    if (!active) {
+      return {
+        text: colors['muted-foreground'],
+        background: 'transparent',
+        border: 'transparent'
+      };
+    }
+    switch (resolvedVariant) {
+      case 'outline':
+        return {
+          text: colors['primary-foreground'],
+          background: colors.primary,
+          border: 'transparent'
+        };
+      case 'ghost':
+        return {
+          text: colors['accent-foreground'],
+          background: colors.accent,
+          border: 'transparent'
+        };
+      case 'pills':
+        return {
+          text: colors.background,
+          background: colors.foreground,
+          border: 'transparent'
+        };
+      default:
+        return {
+          text: colors.foreground,
+          background: colors.background,
+          border: 'transparent'
+        };
+    }
+  };
+  var activePalette = getItemColors(true);
+  var trackStyle = _objectSpread({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: scrollEnabled ? 'nowrap' : undefined,
+    alignItems: 'center',
+    gap: isCompact ? 0 : metrics.gap,
+    width: scrollEnabled ? 'auto' : undefined,
+    maxWidth: scrollEnabled ? undefined : '100%',
+    boxSizing: 'border-box',
+    padding: isCompact ? 1.75 : metrics.trackPadding,
+    borderRadius: metrics.trackRadius,
+    backgroundColor: trackBackground,
+    borderWidth: resolvedVariant === 'outline' ? 1 : 0,
+    borderStyle: 'solid',
+    borderColor: colors.border
+  }, headerStyle);
+  var content = /*#__PURE__*/_jsxs(View, {
+    id: containerId,
+    className: "".concat(prefixCls, "-capsule-tabs__list"),
+    "data-slot": "capsule-tabs-list",
+    style: trackStyle,
+    children: [useSlidingIndicator ? /*#__PURE__*/_jsx(View, {
+      className: "".concat(prefixCls, "-capsule-tabs__indicator"),
+      "data-slot": "capsule-tabs-indicator",
+      "data-motion-ready": indicatorMotionReady ? 'true' : 'false',
+      style: {
+        position: 'absolute',
+        top: '50%',
+        left: 0,
+        boxSizing: 'border-box',
+        borderRadius: radius.get('full'),
+        backgroundColor: activePalette.background,
+        borderWidth: 0,
+        borderStyle: 'solid',
+        borderColor: activePalette.border,
+        transitionProperty: indicatorMotionReady ? 'transform, width, opacity' : 'none',
+        transitionDuration: 'var(--x-duration-overlayDefault)',
+        transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        width: indicatorStyle.width,
+        height: indicatorStyle.height,
+        opacity: indicatorStyle.opacity,
+        transform: "".concat(indicatorStyle.transform, " translateY(-50%)"),
+        pointerEvents: 'none'
+      }
+    }) : null, resolvedItems.map(function (item) {
+      var active = item.key === currentKey;
+      var palette = getItemColors(active);
+      return /*#__PURE__*/_jsxs(CapsuleTrigger, {
+        className: classNames(tabClassName, item.className, active && activeTabClassName),
+        active: active,
+        ariaLabel: nodeToText(item.title),
+        disabled: disabled || Boolean(item.disabled),
+        id: itemId(item.key),
+        onPress: function onPress() {
+          return select(item);
+        },
+        prefixCls: prefixCls,
+        style: _objectSpread(_objectSpread(_objectSpread({
+          position: 'relative',
+          zIndex: 1,
+          flexShrink: scrollEnabled ? 0 : undefined,
+          minWidth: scrollEnabled ? undefined : 0,
+          minHeight: metrics.height,
+          paddingLeft: metrics.paddingInline,
+          paddingRight: metrics.paddingInline,
+          borderRadius: metrics.itemRadius,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: metrics.contentGap,
+          backgroundColor: active && (!useSlidingIndicator || !indicatorReady) ? palette.background : 'transparent',
+          borderWidth: 0,
+          borderStyle: 'solid',
+          borderColor: palette.border
+        }, tabStyle), item.style), active ? activeTabStyle : undefined),
+        children: [item.icon ? /*#__PURE__*/_jsx(View, {
+          className: "".concat(prefixCls, "-capsule-tabs__icon"),
+          "data-slot": "capsule-tabs-icon",
+          style: centeredInlineSlot({
+            flexShrink: 0
+          }),
+          children: item.icon
+        }) : null, typeof item.title === 'string' || typeof item.title === 'number' ? /*#__PURE__*/_jsx(Text, {
+          className: "".concat(prefixCls, "-capsule-tabs__title"),
+          style: _objectSpread(_objectSpread(_objectSpread({
+            fontSize: metrics.fontSize,
+            lineHeight: "".concat(metrics.textLineHeight, "px"),
+            fontWeight: '500',
+            color: palette.text,
+            transition: 'color var(--x-duration-emphasis) var(--x-easing-standard)',
+            display: 'block',
+            minWidth: 0
+          }, scrollEnabled ? {
+            whiteSpace: 'nowrap'
+          } : {
+            maxWidth: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }), tabTextStyle), active ? activeTabTextStyle : undefined),
+          children: item.title
+        }) : item.title, item.badge ? typeof item.badge === 'string' || typeof item.badge === 'number' ? /*#__PURE__*/_jsx(View, {
+          className: "".concat(prefixCls, "-capsule-tabs__badge"),
+          "data-slot": "capsule-tabs-badge",
+          style: centeredInlineSlot({
+            flexShrink: 0
+          }),
+          children: /*#__PURE__*/_jsx(CapsuleBadge, {
+            content: item.badge,
+            color: item.badgeColor,
+            size: size
+          })
+        }) : /*#__PURE__*/_jsx(View, {
+          className: "".concat(prefixCls, "-capsule-tabs__badge"),
+          "data-slot": "capsule-tabs-badge",
+          style: centeredInlineSlot({
+            flexShrink: 0
+          }),
+          children: item.badge
+        }) : null]
+      }, item.key);
+    })]
+  });
+  var panels = resolvedItems.map(function (item) {
+    var active = item.key === currentKey;
+    if (!active && !item.forceRender) return null;
+    if (!active && item.destroyOnClose) return null;
+    return /*#__PURE__*/_jsx(View, {
+      className: "".concat(prefixCls, "-capsule-tabs__panel"),
+      "data-slot": "capsule-tabs-panel",
+      "data-active": active ? 'true' : 'false',
+      style: {
+        display: active ? 'block' : 'none',
+        marginTop: isCompact ? 0 : 16
+      },
+      children: item.children
+    }, "panel-".concat(item.key));
+  });
+  if (scrollEnabled) {
+    var handleScroll = function handleScroll(event) {
+      var _ref4, _event$detail$scrollL, _event$detail, _event$currentTarget, _ref5, _event$detail$scrollW, _event$detail2, _event$currentTarget2, _event$currentTarget$, _event$currentTarget3;
+      recordScroll(event);
+      var scrollLeft = Number((_ref4 = (_event$detail$scrollL = event === null || event === void 0 || (_event$detail = event.detail) === null || _event$detail === void 0 ? void 0 : _event$detail.scrollLeft) !== null && _event$detail$scrollL !== void 0 ? _event$detail$scrollL : event === null || event === void 0 || (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.scrollLeft) !== null && _ref4 !== void 0 ? _ref4 : 0);
+      var scrollWidth = Number((_ref5 = (_event$detail$scrollW = event === null || event === void 0 || (_event$detail2 = event.detail) === null || _event$detail2 === void 0 ? void 0 : _event$detail2.scrollWidth) !== null && _event$detail$scrollW !== void 0 ? _event$detail$scrollW : event === null || event === void 0 || (_event$currentTarget2 = event.currentTarget) === null || _event$currentTarget2 === void 0 ? void 0 : _event$currentTarget2.scrollWidth) !== null && _ref5 !== void 0 ? _ref5 : 0);
+      var clientWidth = Number((_event$currentTarget$ = event === null || event === void 0 || (_event$currentTarget3 = event.currentTarget) === null || _event$currentTarget3 === void 0 ? void 0 : _event$currentTarget3.clientWidth) !== null && _event$currentTarget$ !== void 0 ? _event$currentTarget$ : 0);
+      setScrollMasks({
+        left: scrollLeft > 1,
+        right: scrollWidth > 0 ? scrollLeft + clientWidth < scrollWidth - 1 : true
+      });
+    };
+    return /*#__PURE__*/_jsxs(View, {
+      className: classNames("".concat(prefixCls, "-capsule-tabs"), disabled && "".concat(prefixCls, "-capsule-tabs--disabled"), className),
+      "data-slot": "capsule-tabs-root",
+      "data-size": size,
+      "data-variant": resolvedVariant,
+      "data-disabled": disabled ? 'true' : 'false',
+      style: style,
+      children: [/*#__PURE__*/_jsxs(View, {
+        "data-slot": "capsule-tabs-scroll-shell",
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/_jsx(ScrollView, {
+          id: scrollContainerId,
+          scrollX: true,
+          scrollIntoView: scrollTarget,
+          scrollLeft: scrollLeft,
+          enableFlex: true,
+          showScrollbar: false,
+          "data-slot": "capsule-tabs-scroll",
+          "data-scroll-target": scrollTarget,
+          "data-scroll-left": scrollLeft,
+          onScroll: handleScroll,
+          onScrollToLower: function onScrollToLower() {
+            return setScrollMasks(function (current) {
+              return _objectSpread(_objectSpread({}, current), {}, {
+                right: false
+              });
+            });
+          },
+          style: {
+            width: '100%',
+            whiteSpace: 'nowrap'
+          },
+          children: content
+        }), fadeMaskEnabled ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [scrollMasks.left ? /*#__PURE__*/_jsx(View, {
+            "data-slot": "capsule-tabs-fade-mask-left",
+            style: {
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: 24,
+              background: "linear-gradient(90deg, ".concat(colors.background, ", transparent)"),
+              pointerEvents: 'none'
+            }
+          }) : null, scrollMasks.right ? /*#__PURE__*/_jsx(View, {
+            "data-slot": "capsule-tabs-fade-mask-right",
+            style: {
+              position: 'absolute',
+              right: 0,
+              top: 0,
+              bottom: 0,
+              width: 24,
+              background: "linear-gradient(270deg, ".concat(colors.background, ", transparent)"),
+              pointerEvents: 'none'
+            }
+          }) : null]
+        }) : null]
+      }), panels]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    className: classNames("".concat(prefixCls, "-capsule-tabs"), disabled && "".concat(prefixCls, "-capsule-tabs--disabled"), className),
+    "data-slot": "capsule-tabs-root",
+    "data-size": size,
+    "data-variant": resolvedVariant,
+    "data-disabled": disabled ? 'true' : 'false',
+    style: style,
+    children: [content, panels]
+  });
+};
+export default CapsuleTabs;

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

@@ -0,0 +1,3 @@
+export { CapsuleTabs, CapsuleTab } from './capsuleTabs';
+export type { CapsuleTabsProps, CapsuleTabItem } from './types';
+//# sourceMappingURL=index.d.ts.map

package/es/components/capsuleTabs/index.js

@@ -0,0 +1 @@
+export { CapsuleTabs, CapsuleTab } from "./capsuleTabs";

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

@@ -0,0 +1,48 @@
+/**
+ * CapsuleTabs Component Types
+ */
+/// <reference types="react" />
+import type { SizeVariant } from '../../theme/types';
+export interface CapsuleTabItem {
+    key: string;
+    title: React.ReactNode;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    badgeColor?: 'default' | 'primary' | 'destructive' | 'success';
+    disabled?: boolean;
+    children?: React.ReactNode;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface CapsuleTabProps extends Omit<CapsuleTabItem, 'key'> {
+    tabKey?: string;
+    badgeColor?: 'default' | 'primary' | 'destructive' | 'success';
+}
+export interface CapsuleTabsProps {
+    activeKey?: string | null;
+    defaultActiveKey?: string | null;
+    items?: CapsuleTabItem[];
+    onChange?: (key: string) => void;
+    children?: React.ReactNode;
+    size?: SizeVariant;
+    variant?: 'default' | 'outline' | 'solid' | 'ghost' | 'pills';
+    scrollEnabled?: boolean;
+    isCompact?: boolean;
+    disabled?: boolean;
+    tabClassName?: string;
+    tabStyle?: React.CSSProperties;
+    activeTabClassName?: string;
+    activeTabStyle?: React.CSSProperties;
+    /** x-mobile-ui compatibility alias for styling the header shell */
+    headerStyle?: React.CSSProperties;
+    /** x-mobile-ui compatibility alias for styling labels */
+    tabTextStyle?: React.CSSProperties;
+    /** x-mobile-ui compatibility alias for styling the active label */
+    activeTabTextStyle?: React.CSSProperties;
+    fadeMaskEnabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/capsuleTabs/types.js

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

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

@@ -0,0 +1,20 @@
+/**
+ * Card Component
+ */
+import React from 'react';
+import type { CardProps, CardHeaderProps, CardMetaProps } from './types';
+export declare const Card: React.FC<CardProps>;
+/**
+ * Card.Header subcomponent
+ */
+export declare const CardHeader: React.FC<CardHeaderProps>;
+/**
+ * Card.Meta subcomponent
+ */
+export declare const CardMeta: React.FC<CardMetaProps>;
+declare const CardWithSubcomponents: React.FC<CardProps> & {
+    Header: typeof CardHeader;
+    Meta: typeof CardMeta;
+};
+export default CardWithSubcomponents;
+//# sourceMappingURL=card.d.ts.map