@ttoss/react-billing 0.1.1 → 0.1.3

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.1",
+  "version": "0.1.3",
   "description": "Billing UI components for React apps.",
   "author": "Giovane Guimarães",
   "repository": {
@@ -19,6 +19,11 @@
     "dist"
   ],
   "sideEffects": false,
+  "dependencies": {
+    "@ttoss/components": "^2.11.5",
+    "@ttoss/ui": "^6.3.2",
+    "@ttoss/react-icons": "^0.5.6"
+  },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
@@ -29,8 +34,6 @@
     "react": "^19.2.1",
     "tsup": "^8.5.1",
     "@ttoss/config": "^1.35.12",
-    "@ttoss/ui": "^6.3.2",
-    "@ttoss/react-icons": "^0.5.6",
     "@ttoss/test-utils": "^4.0.2"
   },
   "keywords": [

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 };