@ttoss/react-billing 0.1.2 → 0.1.3

package/README.md

@@ -1,7 +1,80 @@
 # @ttoss/react-billing
 
-React billing components for ttoss.
+Billing UI components for React apps.
+
+Built on top of `@ttoss/ui`.
+
+## Installation
+
+```shell
+pnpm add @ttoss/react-billing
+```
+
+## Quick Start
+
+This package expects your app to be wrapped with `@ttoss/ui` `ThemeProvider`.
+
+### PlanCard
+
+```tsx
+import { PlanCard } from '@ttoss/react-billing';
+
+export const Example = () => (
+  <PlanCard
+    title="Pro"
+    subtitle="Best for teams"
+    price={{
+      value: 'R$ 99,00',
+      interval: 'month',
+      description: 'Billed monthly',
+    }}
+    metadata={[
+      { title: 'Seats', value: '5', icon: 'fluent:people-24-regular' },
+      {
+        title: 'Support',
+        value: 'Priority',
+        icon: 'fluent:chat-help-24-regular',
+      },
+    ]}
+    features={[{ label: 'Unlimited projects' }, { label: 'SSO' }]}
+    buttonProps={{ label: 'Choose plan', variant: 'accent' }}
+  />
+);
+```
+
+### SubscriptionCard
+
+```tsx
+import { SubscriptionCard } from '@ttoss/react-billing';
+
+export const Example = () => (
+  <SubscriptionCard
+    planName="Pro"
+    price={{ value: 'R$ 99,00', interval: 'month' }}
+    status={{ status: 'active', interval: 'Monthly' }}
+    features={[{ label: 'Unlimited projects' }, { label: 'SSO' }]}
+    actions={[{ label: 'Manage', onClick: () => {}, variant: 'accent' }]}
+    metrics={[
+      {
+        type: 'date',
+        label: 'Renews on',
+        date: '2025-01-15',
+        icon: 'fluent:calendar-24-regular',
+      },
+      {
+        type: 'percentage',
+        label: 'Usage',
+        current: 75,
+        max: 100,
+        icon: 'fluent:data-usage-24-regular',
+      },
+    ]}
+  />
+);
+```
 
 ## Exports
 
 - `PlanCard`
+- `SubscriptionCard`
+- Types: `PlanCardProps`, `PlanCardVariant`, `PlanCardPrice`, `PlanCardMetadata`, `PlanCardButtonProps`, `PlanCardMetadataSlotService` (and related slot types)

package/dist/esm/index.js

@@ -6,10 +6,10 @@ var __name = (target, value) => __defProp(target, "name", {
   configurable: true
 });
 
-// src/components/PlanCard.tsx
+// src/components/planCard/PlanCard.tsx
 import { Box as Box4, Card } from "@ttoss/ui";
 
-// src/components/PlanCardCtaSlot.tsx
+// src/components/planCard/PlanCardCtaSlot.tsx
 import { Button, Flex } from "@ttoss/ui";
 var PlanCardCtaSlot = /* @__PURE__ */__name(({
   buttonProps
@@ -18,11 +18,12 @@ var PlanCardCtaSlot = /* @__PURE__ */__name(({
     label: ctaLabel = "Assine agora",
     sx: buttonSx,
     leftIcon,
-    variant,
+    variant: buttonVariant,
     ...restButtonProps
   } = buttonProps ?? {};
   return /* @__PURE__ */React.createElement(Flex, {
     sx: {
+      marginTop: "auto",
       paddingY: "2",
       paddingX: "6",
       width: "full",
@@ -30,7 +31,7 @@ var PlanCardCtaSlot = /* @__PURE__ */__name(({
     }
   }, /* @__PURE__ */React.createElement(Button, {
     ...restButtonProps,
-    variant: variant ?? "accent",
+    variant: buttonVariant ?? "accent",
     leftIcon,
     sx: {
       width: "full",
@@ -41,17 +42,48 @@ var PlanCardCtaSlot = /* @__PURE__ */__name(({
   }, ctaLabel));
 }, "PlanCardCtaSlot");
 
-// src/components/PlanCardFeaturesSlot.tsx
+// src/components/planCard/PlanCardFeaturesSlot.tsx
 import { Icon } from "@ttoss/react-icons";
 import { Box, Flex as Flex2, Stack, Text } from "@ttoss/ui";
 import * as React2 from "react";
+
+// src/components/planCard/PlanCardVariants.ts
+var normalizeVariant = /* @__PURE__ */__name(variantType => {
+  if (variantType === "default") return "primary";
+  if (variantType === "enterprise") return "secondary";
+  return variantType ?? "primary";
+}, "normalizeVariant");
+var getPlanCardVariantStyles = /* @__PURE__ */__name(variantType => {
+  const variant = normalizeVariant(variantType);
+  const variants = {
+    primary: {
+      // Primary is the default PlanCard styling (previously `muted`).
+      backgroundColor: "display.background.primary.default",
+      color: "display.text.primary.default",
+      secondaryColor: "display.text.secondary.default",
+      borderColor: "display.border.muted.default",
+      positiveColor: "feedback.text.positive.default"
+    },
+    secondary: {
+      // Secondary matches the old `enterprise` look.
+      backgroundColor: "display.background.primary.active",
+      color: "action.text.primary.default",
+      secondaryColor: "action.text.primary.default",
+      borderColor: "display.border.muted.default",
+      positiveColor: "action.text.primary.default"
+    }
+  };
+  return variants[variant] ?? variants.primary;
+}, "getPlanCardVariantStyles");
+
+// src/components/planCard/PlanCardFeaturesSlot.tsx
 var featuresTitle = "RECURSOS";
 var PlanCardFeaturesSlot = /* @__PURE__ */__name(({
   features,
-  variant = "default"
+  variant = "primary"
 }) => {
-  const isEnterprise = variant === "enterprise";
-  const featureColor = isEnterprise ? "white" : "feedback.text.positive.default";
+  const variantStyles = getPlanCardVariantStyles(variant);
+  const featurePositiveColor = variantStyles.positiveColor;
   return /* @__PURE__ */React2.createElement(Box, {
     sx: {
       paddingY: "4",
@@ -69,7 +101,7 @@ var PlanCardFeaturesSlot = /* @__PURE__ */__name(({
   }, /* @__PURE__ */React2.createElement(Flex2, {
     sx: {
       letterSpacing: "widest",
-      color: isEnterprise ? "white" : "text"
+      color: variantStyles.color
     }
   }, featuresTitle), /* @__PURE__ */React2.createElement(Flex2, {
     sx: {
@@ -86,7 +118,7 @@ var PlanCardFeaturesSlot = /* @__PURE__ */__name(({
       key: index,
       sx: {
         fontSize: "sm",
-        color: featureColor,
+        color: featurePositiveColor,
         alignItems: "center",
         gap: "3"
       }
@@ -95,22 +127,22 @@ var PlanCardFeaturesSlot = /* @__PURE__ */__name(({
     }), /* @__PURE__ */React2.createElement(Text, {
       sx: {
         fontSize: "sm",
-        color: featureColor,
+        color: featurePositiveColor,
         alignItems: "center"
       }
     }, String(feature)));
   }))));
 }, "PlanCardFeaturesSlot");
 
-// src/components/PlanCardHeaderSlot.tsx
+// src/components/planCard/PlanCardHeaderSlot.tsx
 import { Box as Box2, Flex as Flex3, Heading, Text as Text2 } from "@ttoss/ui";
 var PlanCardHeaderSlot = /* @__PURE__ */__name(({
   title,
   subtitle,
   hasTopTag,
-  variant = "default"
+  variant = "primary"
 }) => {
-  const isEnterprise = variant === "enterprise";
+  const variantStyles = getPlanCardVariantStyles(variant);
   return /* @__PURE__ */React.createElement(Box2, {
     sx: {
       paddingY: hasTopTag ? "4" : "8",
@@ -127,24 +159,24 @@ var PlanCardHeaderSlot = /* @__PURE__ */__name(({
   }, /* @__PURE__ */React.createElement(Heading, {
     sx: {
       fontSize: "3xl",
-      color: isEnterprise ? "white" : "text"
+      color: variantStyles.color
     }
   }, title), subtitle && /* @__PURE__ */React.createElement(Text2, {
     sx: {
       fontSize: "sm",
-      color: isEnterprise ? "white" : "display.text.secondary.default"
+      color: variantStyles.secondaryColor
     }
   }, subtitle)));
 }, "PlanCardHeaderSlot");
 
-// src/components/PlanCardMetadataSlot.tsx
+// src/components/planCard/PlanCardMetadataSlot.tsx
 import { Icon as Icon2 } from "@ttoss/react-icons";
 import { Flex as Flex4, Stack as Stack2, Text as Text3 } from "@ttoss/ui";
 var PlanCardMetadataSlot = /* @__PURE__ */__name(({
   metadata,
-  variant = "default"
+  variant = "primary"
 }) => {
-  const isEnterprise = variant === "enterprise";
+  const variantStyles = getPlanCardVariantStyles(variant);
   return /* @__PURE__ */React.createElement(Stack2, {
     sx: {
       width: "full",
@@ -163,14 +195,14 @@ var PlanCardMetadataSlot = /* @__PURE__ */__name(({
       sx: {
         gap: "4",
         alignItems: "center",
-        color: isEnterprise ? "white" : "display.text.secondary.default",
+        color: variantStyles.secondaryColor,
         width: "full"
       }
     }, service.icon && /* @__PURE__ */React.createElement(Icon2, {
       icon: service.icon
     }), /* @__PURE__ */React.createElement(Text3, {
       sx: {
-        color: isEnterprise ? "white" : "display.text.secondary.default"
+        color: variantStyles.secondaryColor
       }
     }, service.label + String.fromCharCode(58))), service.parameters.map(parameter => {
       return /* @__PURE__ */React.createElement(Flex4, {
@@ -205,13 +237,13 @@ var PlanCardMetadataSlot = /* @__PURE__ */__name(({
   }));
 }, "PlanCardMetadataSlot");
 
-// src/components/PlanCardPriceSlot.tsx
+// src/components/planCard/PlanCardPriceSlot.tsx
 import { Flex as Flex5, Text as Text4 } from "@ttoss/ui";
 var PlanCardPriceSlot = /* @__PURE__ */__name(({
   price,
-  variant = "default"
+  variant = "primary"
 }) => {
-  const isEnterprise = variant === "enterprise";
+  const variantStyles = getPlanCardVariantStyles(variant);
   return /* @__PURE__ */React.createElement(Flex5, {
     sx: {
       paddingY: "6",
@@ -231,22 +263,22 @@ var PlanCardPriceSlot = /* @__PURE__ */__name(({
     sx: {
       fontSize: "4xl",
       fontWeight: "bold",
-      color: isEnterprise ? "white" : "display.text.primary.default"
+      color: variantStyles.color
     }
   }, price.value), /* @__PURE__ */React.createElement(Text4, {
     sx: {
       fontSize: "sm",
-      color: isEnterprise ? "white" : "display.text.secondary.default"
+      color: variantStyles.secondaryColor
     }
   }, price.interval)), price.description && /* @__PURE__ */React.createElement(Text4, {
     sx: {
       fontSize: "md",
-      color: isEnterprise ? "white" : "display.text.secondary.default"
+      color: variantStyles.secondaryColor
     }
   }, price.description));
 }, "PlanCardPriceSlot");
 
-// src/components/PlanCardTopTagSlot.tsx
+// src/components/planCard/PlanCardTopTagSlot.tsx
 import { Box as Box3 } from "@ttoss/ui";
 var PlanCardTopTagSlot = /* @__PURE__ */__name(({
   children
@@ -258,10 +290,11 @@ var PlanCardTopTagSlot = /* @__PURE__ */__name(({
   }, children);
 }, "PlanCardTopTagSlot");
 
-// src/components/PlanCard.tsx
+// src/components/planCard/PlanCard.tsx
 var PlanCard = /* @__PURE__ */__name(props => {
   const {
-    variant = "default",
+    variant = "primary",
+    topTag,
     title,
     subtitle,
     metadata = [],
@@ -272,20 +305,24 @@ var PlanCard = /* @__PURE__ */__name(props => {
     ...cardProps
   } = props;
   const effectiveMetadataVariant = metadataVariant ?? variant;
+  const variantStyles = getPlanCardVariantStyles(variant);
   return /* @__PURE__ */React.createElement(Card, {
     ...cardProps,
     sx: {
+      display: "flex",
+      flexDirection: "column",
       width: "full",
       maxWidth: "410px",
-      backgroundColor: variant === "enterprise" ? "display.background.primary.active" : "display.background.primary.default",
+      backgroundColor: variantStyles.backgroundColor,
+      borderColor: variantStyles.borderColor,
       ...cardProps.sx
     }
-  }, props.topTag && /* @__PURE__ */React.createElement(PlanCardTopTagSlot, {
+  }, topTag && /* @__PURE__ */React.createElement(PlanCardTopTagSlot, {
     variant
-  }, props.topTag), /* @__PURE__ */React.createElement(PlanCardHeaderSlot, {
+  }, topTag), /* @__PURE__ */React.createElement(PlanCardHeaderSlot, {
     title,
     subtitle,
-    hasTopTag: Boolean(props.topTag),
+    hasTopTag: Boolean(topTag),
     variant
   }), metadata.length > 0 && /* @__PURE__ */React.createElement(Box4, {
     sx: {
@@ -307,4 +344,260 @@ var PlanCard = /* @__PURE__ */__name(props => {
     variant
   }));
 }, "PlanCard");
-export { PlanCard };
+
+// src/components/subscriptionPanel/SubscriptionPanel.tsx
+import { EnhancedTitle } from "@ttoss/components/EnhancedTitle";
+import { MetricCard } from "@ttoss/components/MetricCard";
+import { Card as Card2, Flex as Flex7, Spinner } from "@ttoss/ui";
+
+// src/components/subscriptionPanel/SubscriptionPanel.styles.ts
+import { keyframes } from "@ttoss/ui";
+var gradientFlow = keyframes({
+  "0%": {
+    backgroundPosition: "0% 50%"
+  },
+  "50%": {
+    backgroundPosition: "100% 50%"
+  },
+  "100%": {
+    backgroundPosition: "0% 50%"
+  }
+});
+var getAccentGradientBackground = /* @__PURE__ */__name(t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.accent?.default || theme.colors?.input?.background?.accent?.default;
+  if (!start) return void 0;
+  const middle = theme.colors?.action?.background?.accent?.active || theme.colors?.input?.background?.accent?.active || start;
+  return `linear-gradient(270deg, ${start}, ${middle}, ${start})`;
+}, "getAccentGradientBackground");
+var getPrimaryGradientBackground = /* @__PURE__ */__name(t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.primary?.default;
+  if (!start) return void 0;
+  const middle = theme.colors?.action?.background?.secondary?.default || start;
+  return `linear-gradient(270deg, ${start}, ${middle}, ${start})`;
+}, "getPrimaryGradientBackground");
+var getVariantStyles = /* @__PURE__ */__name(variantType => {
+  const variants = {
+    "spotlight-accent": {
+      backgroundColor: "input.background.accent.default",
+      color: "action.text.accent.default",
+      borderColor: "display.border.muted.default",
+      gradientBackground: getAccentGradientBackground
+    },
+    "spotlight-primary": {
+      backgroundColor: "action.background.primary.default",
+      color: "display.text.accent.default",
+      borderColor: "display.border.muted.default",
+      gradientBackground: getPrimaryGradientBackground
+    },
+    primary: {
+      backgroundColor: "action.background.primary.default",
+      color: "action.text.primary.default",
+      borderColor: "display.border.muted.default",
+      gradientBackground: void 0
+    },
+    secondary: {
+      backgroundColor: "action.background.secondary.default",
+      color: "action.text.primary.default",
+      borderColor: "display.border.muted.default",
+      gradientBackground: void 0
+    },
+    accent: {
+      backgroundColor: "action.background.accent.default",
+      color: "action.text.accent.default",
+      borderColor: "display.border.muted.default",
+      gradientBackground: void 0
+    }
+  };
+  return variants[variantType] || variants["spotlight-accent"];
+}, "getVariantStyles");
+var getSubscriptionPanelAccentBarSx = /* @__PURE__ */__name((variant = "spotlight-accent") => {
+  const variantStyles = getVariantStyles(variant);
+  const isSpotlight = variant.startsWith("spotlight-");
+  const gradientBg = variant === "spotlight-accent" ? getAccentGradientBackground : getPrimaryGradientBackground;
+  return {
+    height: "12px",
+    width: "full",
+    borderTopLeftRadius: "lg",
+    borderTopRightRadius: "lg",
+    backgroundColor: variantStyles.backgroundColor,
+    color: variantStyles.color,
+    borderColor: variantStyles.borderColor,
+    ...(isSpotlight ? {
+      background: gradientBg,
+      backgroundSize: "400% 400%",
+      animation: `${gradientFlow} 6s ease infinite`
+    } : {})
+  };
+}, "getSubscriptionPanelAccentBarSx");
+var SubscriptionPanelAccentBarSx = getSubscriptionPanelAccentBarSx("spotlight-accent");
+
+// src/components/subscriptionPanel/SubscriptionPanelActionsSlot.tsx
+import { Icon as Icon3 } from "@ttoss/react-icons";
+import { Button as Button2, Flex as Flex6 } from "@ttoss/ui";
+var SubscriptionPanelActionsSlot = /* @__PURE__ */__name(({
+  actions
+}) => {
+  if (actions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */React.createElement(Flex6, {
+    sx: {
+      gap: "3",
+      flexDirection: ["column", "row"],
+      flexShrink: 0,
+      paddingX: "6",
+      paddingBottom: "6"
+    }
+  }, actions.map((action, index) => {
+    const {
+      label,
+      onClick,
+      leftIcon,
+      isLoading,
+      variant = "secondary",
+      disabled,
+      ...buttonProps
+    } = action;
+    return /* @__PURE__ */React.createElement(Button2, {
+      key: index,
+      onClick,
+      variant,
+      disabled: disabled || isLoading,
+      leftIcon: isLoading ? void 0 : leftIcon,
+      sx: {
+        gap: "2",
+        justifyContent: "center",
+        minWidth: "fit-content"
+      },
+      ...buttonProps
+    }, isLoading ? /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Icon3, {
+      icon: "fluent:spinner-ios-20-regular"
+    }), "Processando...") : label);
+  }));
+}, "SubscriptionPanelActionsSlot");
+
+// src/components/subscriptionPanel/SubscriptionPanel.tsx
+var renderMetricCard = /* @__PURE__ */__name(params => {
+  const {
+    metric,
+    index,
+    isLoading
+  } = params;
+  return /* @__PURE__ */React.createElement(MetricCard, {
+    key: index,
+    metric,
+    isLoading
+  });
+}, "renderMetricCard");
+var SubscriptionPanel = /* @__PURE__ */__name(({
+  variant = "accent",
+  icon,
+  planName,
+  price,
+  status,
+  features = [],
+  actions = [],
+  metrics = [],
+  isLoading = false
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */React.createElement(Card2, {
+      sx: {
+        width: "full",
+        height: "400px",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, /* @__PURE__ */React.createElement(Spinner, null));
+  }
+  return /* @__PURE__ */React.createElement(Card2, {
+    sx: {
+      width: "full"
+    }
+  }, /* @__PURE__ */React.createElement(Flex7, {
+    sx: getSubscriptionPanelAccentBarSx(variant)
+  }), /* @__PURE__ */React.createElement(Flex7, {
+    sx: {
+      width: "full",
+      paddingX: "6",
+      paddingY: "6",
+      flexDirection: "column"
+    }
+  }, /* @__PURE__ */React.createElement(Flex7, {
+    sx: {
+      paddingY: "10",
+      paddingX: "3",
+      width: "full",
+      flexDirection: ["column", "column", "row"],
+      alignItems: ["stretch", "stretch", "center"],
+      justifyContent: "space-between",
+      gap: "6",
+      borderBottom: "sm",
+      borderBottomColor: "display.border.muted.default"
+    }
+  }, /* @__PURE__ */React.createElement(EnhancedTitle, {
+    variant,
+    icon,
+    title: planName,
+    frontTitle: price.interval ? `${price.value}/${price.interval}` : price.value,
+    topBadges: [
+    // Status badge
+    ...(status.status === "active" ? [{
+      label: "Ativo",
+      variant: "positive",
+      icon: "fluent:checkmark-circle-24-filled"
+    }] : status.status === "inactive" ? [{
+      label: "Inativo",
+      variant: "muted",
+      icon: "fluent:dismiss-circle-24-filled"
+    }] : [{
+      label: "Cancelado",
+      variant: "negative",
+      icon: "fluent:error-circle-24-filled"
+    }]),
+    // Interval badge
+    ...(status.interval ? [{
+      label: status.interval,
+      variant: "informative"
+    }] : []),
+    // Scheduled update badge
+    ...(status.hasScheduledUpdate ? [{
+      label: "Altera\xE7\xE3o Agendada",
+      variant: "informative",
+      icon: "fluent:clock-24-regular"
+    }] : []),
+    // Cancellation badge
+    ...(status.hasCancellation ? [{
+      label: "Renova\xE7\xE3o Cancelada",
+      variant: "negative",
+      icon: "fluent:dismiss-circle-24-regular"
+    }] : [])],
+    bottomBadges: features.map(feature => {
+      return {
+        label: feature.label,
+        icon: typeof feature.icon === "string" ? feature.icon : "fluent:checkmark-24-filled",
+        variant: "muted"
+      };
+    })
+  }), actions.length > 0 && /* @__PURE__ */React.createElement(SubscriptionPanelActionsSlot, {
+    actions
+  })), metrics.length > 0 && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Flex7, {
+    sx: {
+      paddingY: "10",
+      paddingX: "3",
+      width: "full",
+      flexWrap: "wrap",
+      gap: "10",
+      justifyContent: "center"
+    }
+  }, metrics.map((metric, index) => {
+    return renderMetricCard({
+      metric,
+      index,
+      isLoading
+    });
+  })))));
+}, "SubscriptionPanel");
+export { PlanCard, SubscriptionPanel };

package/dist/index.d.ts

@@ -3,6 +3,17 @@ import { IconType } from '@ttoss/react-icons';
 import { CardProps, ButtonProps } from '@ttoss/ui';
 import * as React from 'react';
 
+type PlanCardVariantType = 'primary' | 'secondary'
+/**
+ * @deprecated Use `primary`.
+ */
+ | 'default'
+/**
+ * @deprecated Use `secondary`.
+ */
+ | 'enterprise';
+type PlanCardVariant = PlanCardVariantType;
+
 type PlanCardMetadataSlotParameter = {
     name: string;
     value: React.ReactNode;
@@ -14,14 +25,12 @@ type PlanCardMetadataSlotService = {
     id?: string;
     key?: string;
 };
-type PlanCardMetadataSlotVariant = 'default' | 'enterprise';
+type PlanCardMetadataSlotVariant = PlanCardVariantType;
 interface PlanCardMetadataSlotProps {
     metadata: PlanCardMetadataSlotService[];
     variant?: PlanCardMetadataSlotVariant;
 }
 
-type PlanCardVariant = 'default' | 'enterprise';
-
 type PlanCardMetadata = PlanCardMetadataSlotService[];
 type PlanCardPrice = {
     value: string | number;
@@ -45,4 +54,254 @@ interface PlanCardProps extends Omit<CardProps, 'children'> {
 }
 declare const PlanCard: (props: PlanCardProps) => react_jsx_runtime.JSX.Element;
 
-export { PlanCard, type PlanCardButtonProps, type PlanCardMetadata, type PlanCardMetadataSlotParameter, type PlanCardMetadataSlotProps, type PlanCardMetadataSlotService, type PlanCardMetadataSlotVariant, type PlanCardPrice, type PlanCardProps, type PlanCardVariant };
+type SubscriptionPanelVariant = 'spotlight-accent' | 'spotlight-primary' | 'primary' | 'secondary' | 'accent';
+
+/**
+ * Subscription status indicating the current state of the subscription.
+ */
+type SubscriptionStatus = 'active' | 'inactive' | 'cancelled';
+/**
+ * Base metric properties shared by all metric types.
+ */
+interface BaseMetric {
+    /**
+     * Label displayed above the metric value.
+     */
+    label: string;
+    /**
+     * Optional tooltip text or action handler for additional context.
+     * When a string is provided, it displays a simple tooltip.
+     * When a function is provided, it's called when the tooltip icon is clicked (e.g., to open help articles).
+     */
+    tooltip?: string | (() => void);
+    /**
+     * Icon to display alongside the metric.
+     */
+    icon?: IconType;
+    /**
+     * Optional click handler to make the metric card interactive.
+     */
+    onClick?: () => void;
+    /**
+     * Optional help article action handler.
+     */
+    helpArticleAction?: () => void;
+}
+/**
+ * Date-based metric for displaying dates like expiration or renewal.
+ */
+interface DateMetric extends BaseMetric {
+    type: 'date';
+    /**
+     * The date value to display.
+     */
+    date: string;
+    /**
+     * Optional message showing remaining days.
+     */
+    remainingDaysMessage?: string;
+    /**
+     * Whether to show a warning indicator.
+     */
+    isWarning?: boolean;
+}
+/**
+ * Percentage-based metric with progress bar.
+ */
+interface PercentageMetric extends BaseMetric {
+    type: 'percentage';
+    /**
+     * Current value.
+     */
+    current: number;
+    /**
+     * Maximum value. Use null for unlimited.
+     */
+    max: number | null;
+    /**
+     * Custom formatter for displaying values.
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Percentage threshold at which to show an alert.
+     */
+    showAlertThreshold?: number;
+}
+/**
+ * Number-based metric for displaying counts.
+ */
+interface NumberMetric extends BaseMetric {
+    type: 'number';
+    /**
+     * Current value.
+     */
+    current: number;
+    /**
+     * Maximum value. Use null for unlimited.
+     */
+    max: number | null;
+    /**
+     * Custom formatter for displaying values.
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Optional footer text below the metric.
+     */
+    footerText?: string;
+}
+/**
+ * Union type for all metric types.
+ */
+type MetricType = DateMetric | PercentageMetric | NumberMetric;
+/**
+ * Status badge configuration.
+ */
+interface SubscriptionPanelStatusBadgeProps {
+    /**
+     * The subscription status.
+     */
+    status: SubscriptionStatus;
+    /**
+     * Billing interval (e.g., "Mensal", "Anual").
+     */
+    interval?: string;
+    /**
+     * Whether the subscription has a pending cancellation.
+     */
+    hasCancellation?: boolean;
+    /**
+     * Whether the subscription has a scheduled update.
+     */
+    hasScheduledUpdate?: boolean;
+}
+/**
+ * Feature tag displayed in the card header.
+ */
+interface SubscriptionPanelFeatureTag {
+    /**
+     * Label text for the feature.
+     */
+    label: string;
+    /**
+     * Optional icon for the feature.
+     */
+    icon?: IconType;
+}
+/**
+ * Action button configuration.
+ */
+interface SubscriptionPanelAction extends Omit<ButtonProps, 'children'> {
+    /**
+     * Button label text.
+     */
+    label: string;
+    /**
+     * Click handler for the action.
+     */
+    onClick: () => void;
+    /**
+     * Optional icon for the button.
+     */
+    leftIcon?: IconType;
+    /**
+     * Whether the action is currently loading.
+     */
+    isLoading?: boolean;
+}
+/**
+ * Price configuration.
+ */
+interface SubscriptionPanelPrice {
+    /**
+     * Price value (e.g., "R$ 5,00").
+     */
+    value: string;
+    /**
+     * Price interval (e.g., "mês", "ano").
+     */
+    interval?: string;
+}
+/**
+ * Main SubscriptionPanel props.
+ */
+interface SubscriptionPanelProps {
+    /**
+     * Visual variant for the accent bar and header icon.
+     * @default 'spotlight'
+     */
+    variant?: SubscriptionPanelVariant;
+    /**
+     * Plan icon to display. Can be a ReactNode or an IconType string.
+     */
+    icon?: string;
+    /**
+     * Name of the subscription plan.
+     */
+    planName: string;
+    /**
+     * Price configuration.
+     */
+    price: SubscriptionPanelPrice;
+    /**
+     * Status badge configuration.
+     */
+    status: SubscriptionPanelStatusBadgeProps;
+    /**
+     * Feature tags to display.
+     */
+    features?: SubscriptionPanelFeatureTag[];
+    /**
+     * Action buttons.
+     */
+    actions?: SubscriptionPanelAction[];
+    /**
+     * Metrics to display in the card.
+     */
+    metrics?: MetricType[];
+    /**
+     * Whether the card is in a loading state.
+     */
+    isLoading?: boolean;
+}
+
+/**
+ * SubscriptionPanel displays comprehensive subscription information including
+ * plan details, status, actions, and various metrics.
+ *
+ * It supports three types of metrics:
+ * - **Date**: For displaying dates like expiration or renewal
+ * - **Percentage**: For usage-based metrics with progress bars
+ * - **Number**: For count-based metrics
+ *
+ * @example
+ * ```tsx
+ * <SubscriptionPanel
+ *   planName="Premium Plan"
+ *   price={{ value: "R$ 99,00", interval: "mês" }}
+ *   status={{ status: "active", interval: "Mensal" }}
+ *   features={[{ label: "Feature 1" }, { label: "Feature 2" }]}
+ *   actions={[
+ *     { label: "Upgrade", onClick: () => {}, variant: "accent" },
+ *     { label: "Cancel", onClick: () => {}, variant: "danger" },
+ *   ]}
+ *   metrics={[
+ *     { type: "date", label: "Expira em", date: "15/01/2025", icon: "fluent:calendar-24-regular" },
+ *     { type: "percentage", label: "Uso", current: 75, max: 100, icon: "fluent:data-usage-24-regular" },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Compact mode for smaller spaces
+ * <SubscriptionPanel
+ *   planName="Basic Plan"
+ *   price={{ value: "R$ 29,00", interval: "mês" }}
+ *   status={{ status: "active" }}
+ *   compact
+ * />
+ * ```
+ */
+declare const SubscriptionPanel: ({ variant, icon, planName, price, status, features, actions, metrics, isLoading, }: SubscriptionPanelProps) => react_jsx_runtime.JSX.Element;
+
+export { PlanCard, type PlanCardButtonProps, type PlanCardMetadata, type PlanCardMetadataSlotParameter, type PlanCardMetadataSlotProps, type PlanCardMetadataSlotService, type PlanCardMetadataSlotVariant, type PlanCardPrice, type PlanCardProps, type PlanCardVariant, SubscriptionPanel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-billing",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Billing UI components for React apps.",
   "author": "Giovane Guimarães",
   "repository": {
@@ -20,6 +20,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
+    "@ttoss/components": "^2.11.5",
     "@ttoss/ui": "^6.3.2",
     "@ttoss/react-icons": "^0.5.6"
   },

package/dist/index.d.cts

@@ -1,48 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IconType } from '@ttoss/react-icons';
-import { CardProps, ButtonProps } from '@ttoss/ui';
-import * as React from 'react';
-
-type PlanCardMetadataSlotParameter = {
-    name: string;
-    value: React.ReactNode;
-};
-type PlanCardMetadataSlotService = {
-    label: string;
-    icon?: IconType;
-    parameters: PlanCardMetadataSlotParameter[];
-    id?: string;
-    key?: string;
-};
-type PlanCardMetadataSlotVariant = 'default' | 'enterprise';
-interface PlanCardMetadataSlotProps {
-    metadata: PlanCardMetadataSlotService[];
-    variant?: PlanCardMetadataSlotVariant;
-}
-
-type PlanCardVariant = 'default' | 'enterprise';
-
-type PlanCardMetadata = PlanCardMetadataSlotService[];
-type PlanCardPrice = {
-    value: string | number;
-    interval: string;
-    description?: string;
-};
-type PlanCardButtonProps = Omit<ButtonProps, 'children'> & {
-    label?: string;
-    leftIcon?: IconType;
-};
-interface PlanCardProps extends Omit<CardProps, 'children'> {
-    variant?: PlanCardVariant;
-    topTag?: React.ReactNode;
-    title: string;
-    subtitle?: string;
-    metadata?: PlanCardMetadata;
-    metadataVariant?: PlanCardMetadataSlotVariant;
-    price: PlanCardPrice;
-    features?: unknown[];
-    buttonProps?: PlanCardButtonProps;
-}
-declare const PlanCard: (props: PlanCardProps) => react_jsx_runtime.JSX.Element;
-
-export { PlanCard, type PlanCardButtonProps, type PlanCardMetadata, type PlanCardMetadataSlotParameter, type PlanCardMetadataSlotProps, type PlanCardMetadataSlotService, type PlanCardMetadataSlotVariant, type PlanCardPrice, type PlanCardProps, type PlanCardVariant };

package/dist/index.js

@@ -1,354 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from 'react';
-"use strict";
-
-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 __name = (target, value) => __defProp(target, "name", {
-  value,
-  configurable: true
-});
-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/index.ts
-var index_exports = {};
-__export(index_exports, {
-  PlanCard: () => PlanCard
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/components/PlanCard.tsx
-var import_ui7 = require("@ttoss/ui");
-
-// src/components/PlanCardCtaSlot.tsx
-var import_ui = require("@ttoss/ui");
-var PlanCardCtaSlot = /* @__PURE__ */__name(({
-  buttonProps
-}) => {
-  const {
-    label: ctaLabel = "Assine agora",
-    sx: buttonSx,
-    leftIcon,
-    variant,
-    ...restButtonProps
-  } = buttonProps ?? {};
-  return /* @__PURE__ */React.createElement(import_ui.Flex, {
-    sx: {
-      paddingY: "2",
-      paddingX: "6",
-      width: "full",
-      justifyContent: "center"
-    }
-  }, /* @__PURE__ */React.createElement(import_ui.Button, {
-    ...restButtonProps,
-    variant: variant ?? "accent",
-    leftIcon,
-    sx: {
-      width: "full",
-      justifyContent: "center",
-      fontWeight: "semibold",
-      ...buttonSx
-    }
-  }, ctaLabel));
-}, "PlanCardCtaSlot");
-
-// src/components/PlanCardFeaturesSlot.tsx
-var import_react_icons = require("@ttoss/react-icons");
-var import_ui2 = require("@ttoss/ui");
-var React2 = __toESM(require("react"), 1);
-var featuresTitle = "RECURSOS";
-var PlanCardFeaturesSlot = /* @__PURE__ */__name(({
-  features,
-  variant = "default"
-}) => {
-  const isEnterprise = variant === "enterprise";
-  const featureColor = isEnterprise ? "white" : "feedback.text.positive.default";
-  return /* @__PURE__ */React2.createElement(import_ui2.Box, {
-    sx: {
-      paddingY: "4",
-      paddingX: "6",
-      width: "full",
-      borderTop: "md",
-      borderBottom: "md",
-      borderColor: "display.border.muted.default"
-    }
-  }, /* @__PURE__ */React2.createElement(import_ui2.Stack, {
-    sx: {
-      gap: "5",
-      paddingY: "3"
-    }
-  }, /* @__PURE__ */React2.createElement(import_ui2.Flex, {
-    sx: {
-      letterSpacing: "widest",
-      color: isEnterprise ? "white" : "text"
-    }
-  }, featuresTitle), /* @__PURE__ */React2.createElement(import_ui2.Flex, {
-    sx: {
-      flexDirection: "column",
-      gap: "3"
-    }
-  }, features.map((feature, index) => {
-    if (/* @__PURE__ */React2.isValidElement(feature)) {
-      return /* @__PURE__ */React2.createElement(React2.Fragment, {
-        key: index
-      }, feature);
-    }
-    return /* @__PURE__ */React2.createElement(import_ui2.Flex, {
-      key: index,
-      sx: {
-        fontSize: "sm",
-        color: featureColor,
-        alignItems: "center",
-        gap: "3"
-      }
-    }, /* @__PURE__ */React2.createElement(import_react_icons.Icon, {
-      icon: "fluent:checkmark-24-filled"
-    }), /* @__PURE__ */React2.createElement(import_ui2.Text, {
-      sx: {
-        fontSize: "sm",
-        color: featureColor,
-        alignItems: "center"
-      }
-    }, String(feature)));
-  }))));
-}, "PlanCardFeaturesSlot");
-
-// src/components/PlanCardHeaderSlot.tsx
-var import_ui3 = require("@ttoss/ui");
-var PlanCardHeaderSlot = /* @__PURE__ */__name(({
-  title,
-  subtitle,
-  hasTopTag,
-  variant = "default"
-}) => {
-  const isEnterprise = variant === "enterprise";
-  return /* @__PURE__ */React.createElement(import_ui3.Box, {
-    sx: {
-      paddingY: hasTopTag ? "4" : "8",
-      paddingX: "8",
-      width: "full"
-    }
-  }, /* @__PURE__ */React.createElement(import_ui3.Flex, {
-    sx: {
-      flexDirection: "column",
-      gap: "2",
-      width: "full",
-      alignItems: "center"
-    }
-  }, /* @__PURE__ */React.createElement(import_ui3.Heading, {
-    sx: {
-      fontSize: "3xl",
-      color: isEnterprise ? "white" : "text"
-    }
-  }, title), subtitle && /* @__PURE__ */React.createElement(import_ui3.Text, {
-    sx: {
-      fontSize: "sm",
-      color: isEnterprise ? "white" : "display.text.secondary.default"
-    }
-  }, subtitle)));
-}, "PlanCardHeaderSlot");
-
-// src/components/PlanCardMetadataSlot.tsx
-var import_react_icons2 = require("@ttoss/react-icons");
-var import_ui4 = require("@ttoss/ui");
-var PlanCardMetadataSlot = /* @__PURE__ */__name(({
-  metadata,
-  variant = "default"
-}) => {
-  const isEnterprise = variant === "enterprise";
-  return /* @__PURE__ */React.createElement(import_ui4.Stack, {
-    sx: {
-      width: "full",
-      gap: "6"
-    }
-  }, metadata.map(service => {
-    const serviceKey = service.id ?? service.key ?? service.label;
-    return /* @__PURE__ */React.createElement(import_ui4.Flex, {
-      key: serviceKey,
-      sx: {
-        gap: "3",
-        flexDirection: "column",
-        width: "full"
-      }
-    }, /* @__PURE__ */React.createElement(import_ui4.Flex, {
-      sx: {
-        gap: "4",
-        alignItems: "center",
-        color: isEnterprise ? "white" : "display.text.secondary.default",
-        width: "full"
-      }
-    }, service.icon && /* @__PURE__ */React.createElement(import_react_icons2.Icon, {
-      icon: service.icon
-    }), /* @__PURE__ */React.createElement(import_ui4.Text, {
-      sx: {
-        color: isEnterprise ? "white" : "display.text.secondary.default"
-      }
-    }, service.label + String.fromCharCode(58))), service.parameters.map(parameter => {
-      return /* @__PURE__ */React.createElement(import_ui4.Flex, {
-        key: parameter.name,
-        sx: {
-          paddingX: "6",
-          paddingY: "4",
-          backgroundColor: "display.background.muted.default",
-          borderRadius: "lg",
-          width: "full"
-        }
-      }, /* @__PURE__ */React.createElement(import_ui4.Flex, {
-        sx: {
-          width: "full",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: "2"
-        }
-      }, /* @__PURE__ */React.createElement(import_ui4.Text, {
-        sx: {
-          fontSize: "sm",
-          textAlign: "center"
-        }
-      }, parameter.name), /* @__PURE__ */React.createElement(import_ui4.Text, {
-        sx: {
-          fontWeight: "semibold",
-          fontSize: "lg"
-        }
-      }, parameter.value)));
-    }));
-  }));
-}, "PlanCardMetadataSlot");
-
-// src/components/PlanCardPriceSlot.tsx
-var import_ui5 = require("@ttoss/ui");
-var PlanCardPriceSlot = /* @__PURE__ */__name(({
-  price,
-  variant = "default"
-}) => {
-  const isEnterprise = variant === "enterprise";
-  return /* @__PURE__ */React.createElement(import_ui5.Flex, {
-    sx: {
-      paddingY: "6",
-      paddingX: "8",
-      width: "full",
-      alignItems: "center",
-      flexDirection: "column",
-      gap: "3"
-    }
-  }, /* @__PURE__ */React.createElement(import_ui5.Flex, {
-    sx: {
-      alignItems: "baseline",
-      gap: "4",
-      justifyContent: "center"
-    }
-  }, /* @__PURE__ */React.createElement(import_ui5.Text, {
-    sx: {
-      fontSize: "4xl",
-      fontWeight: "bold",
-      color: isEnterprise ? "white" : "display.text.primary.default"
-    }
-  }, price.value), /* @__PURE__ */React.createElement(import_ui5.Text, {
-    sx: {
-      fontSize: "sm",
-      color: isEnterprise ? "white" : "display.text.secondary.default"
-    }
-  }, price.interval)), price.description && /* @__PURE__ */React.createElement(import_ui5.Text, {
-    sx: {
-      fontSize: "md",
-      color: isEnterprise ? "white" : "display.text.secondary.default"
-    }
-  }, price.description));
-}, "PlanCardPriceSlot");
-
-// src/components/PlanCardTopTagSlot.tsx
-var import_ui6 = require("@ttoss/ui");
-var PlanCardTopTagSlot = /* @__PURE__ */__name(({
-  children
-}) => {
-  return /* @__PURE__ */React.createElement(import_ui6.Box, {
-    sx: {
-      padding: "4"
-    }
-  }, children);
-}, "PlanCardTopTagSlot");
-
-// src/components/PlanCard.tsx
-var PlanCard = /* @__PURE__ */__name(props => {
-  const {
-    variant = "default",
-    title,
-    subtitle,
-    metadata = [],
-    metadataVariant,
-    price,
-    features = [],
-    buttonProps,
-    ...cardProps
-  } = props;
-  const effectiveMetadataVariant = metadataVariant ?? variant;
-  return /* @__PURE__ */React.createElement(import_ui7.Card, {
-    ...cardProps,
-    sx: {
-      width: "full",
-      maxWidth: "410px",
-      backgroundColor: variant === "enterprise" ? "display.background.primary.active" : "display.background.primary.default",
-      ...cardProps.sx
-    }
-  }, props.topTag && /* @__PURE__ */React.createElement(PlanCardTopTagSlot, {
-    variant
-  }, props.topTag), /* @__PURE__ */React.createElement(PlanCardHeaderSlot, {
-    title,
-    subtitle,
-    hasTopTag: Boolean(props.topTag),
-    variant
-  }), metadata.length > 0 && /* @__PURE__ */React.createElement(import_ui7.Box, {
-    sx: {
-      paddingY: "4",
-      paddingX: "8",
-      width: "full"
-    }
-  }, /* @__PURE__ */React.createElement(PlanCardMetadataSlot, {
-    metadata,
-    variant: effectiveMetadataVariant
-  })), /* @__PURE__ */React.createElement(PlanCardPriceSlot, {
-    price,
-    variant
-  }), features.length > 0 && /* @__PURE__ */React.createElement(PlanCardFeaturesSlot, {
-    features,
-    variant
-  }), /* @__PURE__ */React.createElement(PlanCardCtaSlot, {
-    buttonProps,
-    variant
-  }));
-}, "PlanCard");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  PlanCard
-});