@ttoss/react-billing 0.3.5 → 0.4.0

package/README.md

@@ -42,13 +42,81 @@ export const Example = () => (
 );
 ```
 
-### SubscriptionCard
+### PlansPanel
+
+A higher-level component that renders a grid of `PlanCard` components with optional multi-dimensional `SegmentedControl` filters. Plans are shown only when they match all active filter values.
+
+```tsx
+import { PlansPanel } from '@ttoss/react-billing';
+
+export const PricingPage = () => (
+  <PlansPanel
+    filters={[
+      {
+        id: 'interval',
+        label: 'Billing frequency',
+        options: [
+          { label: 'Monthly', value: 'monthly' },
+          { label: 'Yearly', value: 'yearly' },
+        ],
+        defaultValue: 'monthly',
+      },
+    ]}
+    plans={[
+      {
+        id: 'plan_basic_monthly',
+        filterValues: { interval: 'monthly' },
+        title: 'Basic',
+        price: {
+          value: '$29',
+          interval: '/month',
+          description: 'Billed monthly',
+        },
+        features: ['10 proposals/month'],
+        buttonProps: { label: 'Subscribe' },
+      },
+      {
+        id: 'plan_basic_yearly',
+        filterValues: { interval: 'yearly' },
+        title: 'Basic',
+        price: {
+          value: '$24',
+          interval: '/month',
+          description: 'Billed annually',
+        },
+        features: ['10 proposals/month'],
+        buttonProps: { label: 'Subscribe' },
+      },
+    ]}
+    activePlanId="plan_basic_monthly"
+    onSelectPlan={(planId) => console.log('Selected:', planId)}
+  />
+);
+```
+
+Controlled mode (parent owns filter state):
+
+```tsx
+const [filterValues, setFilterValues] = React.useState({ interval: 'monthly' });
+
+<PlansPanel
+  filters={filters}
+  plans={plans}
+  filterValues={filterValues}
+  onFilterChange={(id, value) =>
+    setFilterValues((prev) => ({ ...prev, [id]: value }))
+  }
+  onSelectPlan={(planId) => checkout(planId)}
+/>;
+```
+
+### SubscriptionPanel
 
 ```tsx
-import { SubscriptionCard } from '@ttoss/react-billing';
+import { SubscriptionPanel } from '@ttoss/react-billing';
 
 export const Example = () => (
-  <SubscriptionCard
+  <SubscriptionPanel
     planName="Pro"
     price={{ value: 'R$ 99,00', interval: 'month' }}
     status={{ status: 'active', interval: 'Monthly' }}
@@ -76,5 +144,6 @@ export const Example = () => (
 ## Exports
 
 - `PlanCard`
-- `SubscriptionCard`
-- Types: `PlanCardProps`, `PlanCardVariant`, `PlanCardPrice`, `PlanCardMetadata`, `PlanCardButtonProps`, `PlanCardMetadataSlotService` (and related slot types)
+- `PlansPanel`
+- `SubscriptionPanel`
+- Types: `PlanCardProps`, `PlanCardVariant`, `PlanCardPrice`, `PlanCardMetadata`, `PlanCardButtonProps`, `PlanCardMetadataSlotService` (and related slot types), `PlansPanelProps`, `PlansPanelPlan`, `PlansPanelFilter`, `PlansPanelFilterOption`

package/dist/esm/index.js

@@ -345,10 +345,117 @@ var PlanCard = /* @__PURE__ */__name(props => {
   }));
 }, "PlanCard");
 
+// src/components/plansPanel/PlansPanel.tsx
+import { Flex as Flex6, SegmentedControl, Stack as Stack3, Text as Text5 } from "@ttoss/ui";
+import * as React3 from "react";
+var PlansPanel = /* @__PURE__ */__name(({
+  filters = [],
+  plans,
+  activePlanId,
+  onSelectPlan,
+  filterValues: controlledFilterValues,
+  onFilterChange
+}) => {
+  const [internalFilterValues, setInternalFilterValues] = React3.useState(() => {
+    const initial = {};
+    for (const filter of filters) {
+      if (filter.defaultValue !== void 0) {
+        initial[filter.id] = filter.defaultValue;
+      }
+    }
+    return initial;
+  });
+  const isControlled = controlledFilterValues !== void 0;
+  const activeFilterValues = isControlled ? controlledFilterValues : internalFilterValues;
+  const handleFilterChange = /* @__PURE__ */__name((id, value) => {
+    const strValue = String(value);
+    if (isControlled) {
+      onFilterChange?.(id, strValue);
+    } else {
+      setInternalFilterValues(prev => {
+        return {
+          ...prev,
+          [id]: strValue
+        };
+      });
+    }
+  }, "handleFilterChange");
+  const visiblePlans = plans.filter(plan => {
+    if (!plan.filterValues || Object.keys(plan.filterValues).length === 0) {
+      return true;
+    }
+    return Object.entries(activeFilterValues).every(([filterId, filterValue]) => {
+      if (!plan.filterValues || !(filterId in plan.filterValues)) {
+        return true;
+      }
+      return plan.filterValues[filterId] === filterValue;
+    });
+  });
+  return /* @__PURE__ */React3.createElement(Stack3, {
+    sx: {
+      gap: "6",
+      width: "full",
+      alignItems: "center"
+    }
+  }, filters.length > 0 && /* @__PURE__ */React3.createElement(Stack3, {
+    sx: {
+      gap: "4",
+      alignItems: "center"
+    }
+  }, filters.map(filter => {
+    return /* @__PURE__ */React3.createElement(Stack3, {
+      key: filter.id,
+      sx: {
+        gap: "2",
+        alignItems: "center"
+      }
+    }, filter.label && /* @__PURE__ */React3.createElement(Text5, {
+      sx: {
+        fontWeight: "semibold",
+        color: "display.text.primary.default"
+      }
+    }, filter.label), /* @__PURE__ */React3.createElement(SegmentedControl, {
+      options: filter.options,
+      value: isControlled ? controlledFilterValues[filter.id] ?? filter.defaultValue : activeFilterValues[filter.id],
+      defaultValue: isControlled ? void 0 : filter.defaultValue,
+      onChange: /* @__PURE__ */__name(value => {
+        return handleFilterChange(filter.id, value);
+      }, "onChange")
+    }));
+  })), /* @__PURE__ */React3.createElement(Flex6, {
+    sx: {
+      flexWrap: "wrap",
+      gap: "4",
+      width: "full",
+      justifyContent: "center"
+    }
+  }, visiblePlans.map(plan => {
+    const isActive = plan.id === activePlanId;
+    const effectiveVariant = isActive ? "secondary" : plan.variant ?? "primary";
+    return /* @__PURE__ */React3.createElement(PlanCard, {
+      key: plan.id,
+      title: plan.title,
+      subtitle: plan.subtitle,
+      price: plan.price,
+      features: plan.features,
+      metadata: plan.metadata,
+      variant: effectiveVariant,
+      topTag: plan.topTag,
+      buttonProps: {
+        ...plan.buttonProps,
+        onClick: /* @__PURE__ */__name(e => {
+          onSelectPlan?.(plan.id);
+          plan.buttonProps?.onClick?.(e);
+        }, "onClick")
+      }
+    });
+  })));
+}, "PlansPanel");
+
 // 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";
+import { Card as Card2, Flex as Flex8, Spinner } from "@ttoss/ui";
 
 // src/components/subscriptionPanel/SubscriptionPanel.styles.ts
 import { keyframes } from "@ttoss/ui";
@@ -435,14 +542,14 @@ var SubscriptionPanelAccentBarSx = getSubscriptionPanelAccentBarSx("spotlight-ac
 
 // src/components/subscriptionPanel/SubscriptionPanelActionsSlot.tsx
 import { Icon as Icon3 } from "@ttoss/react-icons";
-import { Button as Button2, Flex as Flex6 } from "@ttoss/ui";
+import { Button as Button2, Flex as Flex7 } from "@ttoss/ui";
 var SubscriptionPanelActionsSlot = /* @__PURE__ */__name(({
   actions
 }) => {
   if (actions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */React.createElement(Flex6, {
+  return /* @__PURE__ */React.createElement(Flex7, {
     sx: {
       gap: "3",
       flexDirection: ["column", "row"],
@@ -516,16 +623,16 @@ var SubscriptionPanel = /* @__PURE__ */__name(({
     sx: {
       width: "full"
     }
-  }, /* @__PURE__ */React.createElement(Flex7, {
+  }, /* @__PURE__ */React.createElement(Flex8, {
     sx: getSubscriptionPanelAccentBarSx(variant)
-  }), /* @__PURE__ */React.createElement(Flex7, {
+  }), /* @__PURE__ */React.createElement(Flex8, {
     sx: {
       width: "full",
       paddingX: "6",
       paddingY: "6",
       flexDirection: "column"
     }
-  }, /* @__PURE__ */React.createElement(Flex7, {
+  }, /* @__PURE__ */React.createElement(Flex8, {
     sx: {
       paddingY: "10",
       paddingX: "3",
@@ -583,7 +690,7 @@ var SubscriptionPanel = /* @__PURE__ */__name(({
     })
   }), actions.length > 0 && /* @__PURE__ */React.createElement(SubscriptionPanelActionsSlot, {
     actions
-  })), metrics.length > 0 && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Flex7, {
+  })), metrics.length > 0 && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Flex8, {
     sx: {
       paddingY: "10",
       paddingX: "3",
@@ -600,4 +707,4 @@ var SubscriptionPanel = /* @__PURE__ */__name(({
     });
   })))));
 }, "SubscriptionPanel");
-export { PlanCard, SubscriptionPanel };
+export { PlanCard, PlansPanel, SubscriptionPanel };

package/dist/index.d.ts

@@ -54,6 +54,133 @@ interface PlanCardProps extends Omit<CardProps, 'children'> {
 }
 declare const PlanCard: (props: PlanCardProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * A single option inside a PlansPanel filter.
+ */
+interface PlansPanelFilterOption {
+    /** Display label shown in the SegmentedControl. */
+    label: string;
+    /** Value used for filtering plans. */
+    value: string;
+}
+/**
+ * Defines one filter dimension rendered as a SegmentedControl above the plans grid.
+ */
+interface PlansPanelFilter {
+    /** Unique identifier for this filter dimension. */
+    id: string;
+    /** Optional label rendered above the SegmentedControl. */
+    label?: string;
+    /** List of selectable options. */
+    options: PlansPanelFilterOption[];
+    /** Initial value used in uncontrolled mode. */
+    defaultValue?: string;
+}
+/**
+ * A plan displayed inside the PlansPanel.
+ */
+interface PlansPanelPlan {
+    /** Unique plan identifier. */
+    id: string;
+    /**
+     * Maps each filter id to the value this plan belongs to.
+     * Plans are only shown when all active filter values match.
+     */
+    filterValues?: Record<string, string>;
+    /** Plan title (e.g. "Basic", "Pro"). */
+    title: string;
+    /** Optional subtitle displayed below the title. */
+    subtitle?: string;
+    /** Pricing information. */
+    price: PlanCardPrice;
+    /** Feature list items. */
+    features?: unknown[];
+    /** Optional metadata sections. */
+    metadata?: PlanCardMetadata;
+    /** Props forwarded to the CTA button. onClick is merged with onSelectPlan. */
+    buttonProps?: PlanCardButtonProps;
+    /** Visual variant for the PlanCard. Active plans override this with "secondary". */
+    variant?: PlanCardVariant;
+    /** Optional content rendered at the top of the PlanCard. */
+    topTag?: React.ReactNode;
+}
+/**
+ * Props for the PlansPanel component.
+ */
+interface PlansPanelProps {
+    /**
+     * Filter dimensions rendered as SegmentedControl rows above the plan grid.
+     * Each dimension independently narrows the visible set of plans.
+     */
+    filters?: PlansPanelFilter[];
+    /** All available plans. Only plans matching every active filter value are shown. */
+    plans: PlansPanelPlan[];
+    /** ID of the currently active/subscribed plan. That card is highlighted. */
+    activePlanId?: string;
+    /**
+     * Called when the user clicks the CTA button of a plan.
+     * @param planId - The id of the selected plan.
+     */
+    onSelectPlan?: (planId: string) => void;
+    /**
+     * Controlled filter values (record of filterId → selected value).
+     * When provided the component operates in controlled mode and internal
+     * state is not used.
+     */
+    filterValues?: Record<string, string>;
+    /**
+     * Called when a filter value changes in controlled mode.
+     * @param id - The filter id that changed.
+     * @param value - The new selected value.
+     */
+    onFilterChange?: (id: string, value: string) => void;
+}
+
+/**
+ * PlansPanel renders a grid of PlanCard components with optional multi-dimensional
+ * SegmentedControl filters above them.
+ *
+ * Each filter dimension independently narrows the visible set of plan cards.
+ * The component supports both uncontrolled mode (internal state from `defaultValue`)
+ * and controlled mode (via `filterValues` + `onFilterChange`).
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled — component manages filter state internally
+ * <PlansPanel
+ *   filters={[
+ *     {
+ *       id: 'interval',
+ *       label: 'Billing Frequency',
+ *       options: [
+ *         { label: 'Monthly', value: 'monthly' },
+ *         { label: 'Yearly',  value: 'yearly' },
+ *       ],
+ *       defaultValue: 'monthly',
+ *     },
+ *   ]}
+ *   plans={plans}
+ *   activePlanId="plan_basic_monthly"
+ *   onSelectPlan={(planId) => console.log(planId)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled — consumer owns filter state
+ * <PlansPanel
+ *   filters={filters}
+ *   filterValues={{ interval: 'yearly' }}
+ *   onFilterChange={(id, value) =>
+ *     setFilterValues((prev) => ({ ...prev, [id]: value }))
+ *   }
+ *   plans={plans}
+ *   onSelectPlan={(planId) => checkout(planId)}
+ * />
+ * ```
+ */
+declare const PlansPanel: ({ filters, plans, activePlanId, onSelectPlan, filterValues: controlledFilterValues, onFilterChange, }: PlansPanelProps) => react_jsx_runtime.JSX.Element;
+
 type SubscriptionPanelVariant = 'spotlight-accent' | 'spotlight-primary' | 'primary' | 'secondary' | 'accent';
 
 /**
@@ -304,4 +431,4 @@ interface SubscriptionPanelProps {
  */
 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 };
+export { PlanCard, type PlanCardButtonProps, type PlanCardMetadata, type PlanCardMetadataSlotParameter, type PlanCardMetadataSlotProps, type PlanCardMetadataSlotService, type PlanCardMetadataSlotVariant, type PlanCardPrice, type PlanCardProps, type PlanCardVariant, PlansPanel, type PlansPanelFilter, type PlansPanelFilterOption, type PlansPanelPlan, type PlansPanelProps, SubscriptionPanel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-billing",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "Billing UI components for React apps.",
   "author": "Giovane Guimarães",
   "repository": {
@@ -20,9 +20,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@ttoss/react-icons": "^0.7.5",
-    "@ttoss/components": "^2.14.5",
-    "@ttoss/ui": "^6.9.5"
+    "@ttoss/components": "^2.14.7",
+    "@ttoss/react-icons": "^0.7.7",
+    "@ttoss/ui": "^6.9.7"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -33,8 +33,8 @@
     "jest": "^30.3.0",
     "react": "^19.2.4",
     "tsup": "^8.5.1",
-    "@ttoss/config": "^1.37.5",
-    "@ttoss/test-utils": "^4.2.5"
+    "@ttoss/config": "^1.37.7",
+    "@ttoss/test-utils": "^4.2.7"
   },
   "keywords": [
     "React",