@hanwenbo/x-taro-ui 0.0.1

package/lib/components/capsuleTabs/capsuleTabs.js

@@ -0,0 +1,537 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/capsuleTabs/capsuleTabs.tsx
+var capsuleTabs_exports = {};
+__export(capsuleTabs_exports, {
+  CapsuleTab: () => CapsuleTab,
+  CapsuleTabs: () => CapsuleTabs,
+  default: () => capsuleTabs_default
+});
+module.exports = __toCommonJS(capsuleTabs_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_utils = require("../../utils");
+var import_inlineAlignment = require("../../utils/inlineAlignment");
+var import_patterns = require("../../patterns");
+var import_theme = require("../../theme");
+var import_configProvider = require("../configProvider");
+var import_useTaroSelectionIndicator = require("../internal/selectionControl/useTaroSelectionIndicator");
+var import_useTaroScrollIntoView = require("../internal/selectionControl/useTaroScrollIntoView");
+var CapsuleTab = () => 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({
+  content,
+  color = "default",
+  size = "middle"
+}) {
+  const { colors } = (0, import_theme.useTokens)();
+  const metrics = size === "mini" ? { minSize: 12, padding: 2, fontSize: 8 } : size === "large" ? { minSize: 20, padding: 6, fontSize: 12 } : { minSize: 16, padding: 4, fontSize: 10 };
+  const backgroundColor = color === "destructive" ? colors.destructive : color === "success" ? colors.success : color === "default" ? colors["muted-foreground"] : colors.primary;
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.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,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    typeof content === "string" || typeof content === "number" ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.Text,
+      {
+        style: {
+          fontSize: metrics.fontSize,
+          fontWeight: "600",
+          color: colors["primary-foreground"],
+          lineHeight: 1.2
+        }
+      },
+      content
+    ) : content
+  );
+}
+function nodeToText(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) {
+    const text = node.map(nodeToText).filter(Boolean).join("");
+    return text || void 0;
+  }
+  if (import_react.default.isValidElement(node)) return nodeToText(node.props.children);
+  return void 0;
+}
+function CapsuleTrigger({
+  active,
+  ariaLabel,
+  children,
+  className,
+  disabled,
+  id,
+  onPress,
+  prefixCls,
+  style
+}) {
+  const { handlers, style: pressStyle } = (0, import_patterns.usePressable)({ disabled, onPress, scale: 0.985 });
+  const 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__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      id,
+      className: (0, import_utils.classNames)(
+        `${prefixCls}-capsule-tabs__trigger`,
+        active && `${prefixCls}-capsule-tabs__trigger--active`,
+        disabled && `${prefixCls}-capsule-tabs__trigger--disabled`,
+        className
+      ),
+      "data-slot": "capsule-tabs-trigger",
+      "data-active": active ? "true" : "false",
+      "data-disabled": disabled ? "true" : "false",
+      role: "button",
+      ariaLabel,
+      ...handlers,
+      style: {
+        opacity: disabled ? 0.4 : 1,
+        ...pressStyle,
+        ...style,
+        transition: style.transition ?? transition
+      }
+    },
+    children
+  );
+}
+var CapsuleTabs = ({
+  activeKey,
+  defaultActiveKey,
+  items = [],
+  children,
+  onChange,
+  size: sizeProp,
+  variant = "default",
+  scrollEnabled = false,
+  isCompact = false,
+  disabled: disabledProp,
+  tabClassName,
+  tabStyle,
+  activeTabClassName,
+  activeTabStyle,
+  headerStyle,
+  tabTextStyle,
+  activeTabTextStyle,
+  fadeMaskEnabled = true,
+  className,
+  style
+}) => {
+  var _a;
+  const config = (0, import_configProvider.useConfigProvider)();
+  const prefixCls = config.prefixCls;
+  const size = sizeProp ?? config.componentSize;
+  const disabled = disabledProp ?? config.disabled;
+  const childItems = import_react.Children.toArray(children).filter(
+    (child) => {
+      var _a2;
+      return (0, import_react.isValidElement)(child) && (child.type === CapsuleTab || ((_a2 = child.type) == null ? void 0 : _a2.displayName) === "CapsuleTab");
+    }
+  ).map((child, index) => ({
+    key: child.props.tabKey ?? String(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
+  }));
+  const resolvedItems = items.length > 0 ? items : childItems;
+  const [internalActiveKey, setInternalActiveKey] = (0, import_react.useState)(
+    defaultActiveKey ?? ((_a = resolvedItems[0]) == null ? void 0 : _a.key)
+  );
+  const currentKey = activeKey ?? internalActiveKey;
+  const controlled = activeKey !== void 0;
+  const [scrollMasks, setScrollMasks] = (0, import_react.useState)({ left: false, right: true });
+  const { colors, radius } = (0, import_theme.useTokens)();
+  const metrics = import_theme.capsuleTabsSizeMetrics[size];
+  const resolvedVariant = resolveVariant(variant);
+  const useSlidingIndicator = resolvedVariant === "pills";
+  const { containerId, itemId, indicatorStyle, indicatorReady, indicatorMotionReady } = (0, import_useTaroSelectionIndicator.useTaroSelectionIndicator)({
+    activeKey: currentKey ?? null,
+    enabled: useSlidingIndicator,
+    inset: isCompact ? 2 : metrics.indicatorInset,
+    mode: "pill"
+  });
+  const scrollContainerId = `${containerId}-scroll`;
+  const {
+    recordScroll,
+    scrollIntoView: scrollTarget,
+    scrollLeft,
+    scrollToKey
+  } = (0, import_useTaroScrollIntoView.useTaroScrollIntoView)({
+    activeKey: currentKey,
+    containerId: scrollContainerId,
+    enabled: scrollEnabled,
+    itemId
+  });
+  const select = (0, import_react.useCallback)(
+    (item) => {
+      if (disabled || item.disabled || item.key === currentKey) return;
+      if (!controlled) setInternalActiveKey(item.key);
+      if (scrollEnabled) scrollToKey(item.key);
+      onChange == null ? void 0 : onChange(item.key);
+    },
+    [controlled, currentKey, disabled, onChange, scrollEnabled, scrollToKey]
+  );
+  const trackBackground = (0, import_react.useMemo)(() => {
+    switch (resolvedVariant) {
+      case "outline":
+        return colors.background;
+      case "ghost":
+        return "transparent";
+      case "pills":
+        return colors.secondary;
+      default:
+        return colors.muted;
+    }
+  }, [colors, resolvedVariant]);
+  const 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"
+        };
+    }
+  };
+  const activePalette = getItemColors(true);
+  const trackStyle = {
+    position: "relative",
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: scrollEnabled ? "nowrap" : void 0,
+    alignItems: "center",
+    gap: isCompact ? 0 : metrics.gap,
+    width: scrollEnabled ? "auto" : void 0,
+    maxWidth: scrollEnabled ? void 0 : "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
+  };
+  const content = /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      id: containerId,
+      className: `${prefixCls}-capsule-tabs__list`,
+      "data-slot": "capsule-tabs-list",
+      style: trackStyle
+    },
+    useSlidingIndicator ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${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: `${indicatorStyle.transform} translateY(-50%)`,
+          pointerEvents: "none"
+        }
+      }
+    ) : null,
+    resolvedItems.map((item) => {
+      const active = item.key === currentKey;
+      const palette = getItemColors(active);
+      return /* @__PURE__ */ import_react.default.createElement(
+        CapsuleTrigger,
+        {
+          key: item.key,
+          className: (0, import_utils.classNames)(tabClassName, item.className, active && activeTabClassName),
+          active,
+          ariaLabel: nodeToText(item.title),
+          disabled: disabled || Boolean(item.disabled),
+          id: itemId(item.key),
+          onPress: () => select(item),
+          prefixCls,
+          style: {
+            position: "relative",
+            zIndex: 1,
+            flexShrink: scrollEnabled ? 0 : void 0,
+            minWidth: scrollEnabled ? void 0 : 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 : void 0
+          }
+        },
+        item.icon ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${prefixCls}-capsule-tabs__icon`,
+            "data-slot": "capsule-tabs-icon",
+            style: (0, import_inlineAlignment.centeredInlineSlot)({ flexShrink: 0 })
+          },
+          item.icon
+        ) : null,
+        typeof item.title === "string" || typeof item.title === "number" ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.Text,
+          {
+            className: `${prefixCls}-capsule-tabs__title`,
+            style: {
+              fontSize: metrics.fontSize,
+              lineHeight: `${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 : void 0
+            }
+          },
+          item.title
+        ) : item.title,
+        item.badge ? typeof item.badge === "string" || typeof item.badge === "number" ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${prefixCls}-capsule-tabs__badge`,
+            "data-slot": "capsule-tabs-badge",
+            style: (0, import_inlineAlignment.centeredInlineSlot)({ flexShrink: 0 })
+          },
+          /* @__PURE__ */ import_react.default.createElement(CapsuleBadge, { content: item.badge, color: item.badgeColor, size })
+        ) : /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${prefixCls}-capsule-tabs__badge`,
+            "data-slot": "capsule-tabs-badge",
+            style: (0, import_inlineAlignment.centeredInlineSlot)({ flexShrink: 0 })
+          },
+          item.badge
+        ) : null
+      );
+    })
+  );
+  const panels = resolvedItems.map((item) => {
+    const active = item.key === currentKey;
+    if (!active && !item.forceRender) return null;
+    if (!active && item.destroyOnClose) return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        key: `panel-${item.key}`,
+        className: `${prefixCls}-capsule-tabs__panel`,
+        "data-slot": "capsule-tabs-panel",
+        "data-active": active ? "true" : "false",
+        style: { display: active ? "block" : "none", marginTop: isCompact ? 0 : 16 }
+      },
+      item.children
+    );
+  });
+  if (scrollEnabled) {
+    const handleScroll = (event) => {
+      var _a2, _b, _c, _d, _e;
+      recordScroll(event);
+      const scrollLeft2 = Number(((_a2 = event == null ? void 0 : event.detail) == null ? void 0 : _a2.scrollLeft) ?? ((_b = event == null ? void 0 : event.currentTarget) == null ? void 0 : _b.scrollLeft) ?? 0);
+      const scrollWidth = Number(
+        ((_c = event == null ? void 0 : event.detail) == null ? void 0 : _c.scrollWidth) ?? ((_d = event == null ? void 0 : event.currentTarget) == null ? void 0 : _d.scrollWidth) ?? 0
+      );
+      const clientWidth = Number(((_e = event == null ? void 0 : event.currentTarget) == null ? void 0 : _e.clientWidth) ?? 0);
+      setScrollMasks({
+        left: scrollLeft2 > 1,
+        right: scrollWidth > 0 ? scrollLeft2 + clientWidth < scrollWidth - 1 : true
+      });
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: (0, import_utils.classNames)(
+          `${prefixCls}-capsule-tabs`,
+          disabled && `${prefixCls}-capsule-tabs--disabled`,
+          className
+        ),
+        "data-slot": "capsule-tabs-root",
+        "data-size": size,
+        "data-variant": resolvedVariant,
+        "data-disabled": disabled ? "true" : "false",
+        style
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_components.View, { "data-slot": "capsule-tabs-scroll-shell", style: { position: "relative" } }, /* @__PURE__ */ import_react.default.createElement(
+        import_components.ScrollView,
+        {
+          id: scrollContainerId,
+          scrollX: true,
+          scrollIntoView: scrollTarget,
+          scrollLeft,
+          enableFlex: true,
+          showScrollbar: false,
+          "data-slot": "capsule-tabs-scroll",
+          "data-scroll-target": scrollTarget,
+          "data-scroll-left": scrollLeft,
+          onScroll: handleScroll,
+          onScrollToLower: () => setScrollMasks((current) => ({ ...current, right: false })),
+          style: { width: "100%", whiteSpace: "nowrap" }
+        },
+        content
+      ), fadeMaskEnabled ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, scrollMasks.left ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "capsule-tabs-fade-mask-left",
+          style: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: 24,
+            background: `linear-gradient(90deg, ${colors.background}, transparent)`,
+            pointerEvents: "none"
+          }
+        }
+      ) : null, scrollMasks.right ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "capsule-tabs-fade-mask-right",
+          style: {
+            position: "absolute",
+            right: 0,
+            top: 0,
+            bottom: 0,
+            width: 24,
+            background: `linear-gradient(270deg, ${colors.background}, transparent)`,
+            pointerEvents: "none"
+          }
+        }
+      ) : null) : null),
+      panels
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      className: (0, import_utils.classNames)(
+        `${prefixCls}-capsule-tabs`,
+        disabled && `${prefixCls}-capsule-tabs--disabled`,
+        className
+      ),
+      "data-slot": "capsule-tabs-root",
+      "data-size": size,
+      "data-variant": resolvedVariant,
+      "data-disabled": disabled ? "true" : "false",
+      style
+    },
+    content,
+    panels
+  );
+};
+var capsuleTabs_default = CapsuleTabs;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CapsuleTab,
+  CapsuleTabs
+});

package/lib/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/lib/components/capsuleTabs/index.js

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/capsuleTabs/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CapsuleTab: () => import_capsuleTabs.CapsuleTab,
+  CapsuleTabs: () => import_capsuleTabs.CapsuleTabs
+});
+module.exports = __toCommonJS(index_exports);
+var import_capsuleTabs = require("./capsuleTabs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CapsuleTab,
+  CapsuleTabs
+});

package/lib/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/lib/components/capsuleTabs/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/capsuleTabs/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/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