Pricing Table

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5import { Badge } from "@/registry/default/ui/badge"
6import { Button } from "@/registry/default/ui/button"
7import {
8  Card,
9  CardAction,
10  CardContent,
11  CardDescription,
12  CardFooter,
13  CardHeader,
14  CardTitle,
15} from "@/registry/default/ui/card"
16import {
17  InfoList,
18  InfoListIcon,
19  InfoListItem,
20  InfoListText,
21} from "@/registry/default/ui/info-list"
22import { Switch } from "@/registry/default/ui/switch"
23import {
24  ToggleGroup,
25  ToggleGroupItem,
26} from "@/registry/default/ui/toggle-group"
27import NumberFlow from "@number-flow/react"
28import { useControllableState } from "@radix-ui/react-use-controllable-state"
29 
30type BillingPeriod = "monthly" | "yearly"
31export type { BillingPeriod as PricingTableBillingPeriod }
32 
33type PriceFormatterOptions = {
34  style: "currency"
35  currency: string
36  trailingZeroDisplay?: "stripIfInteger" | "auto"
37  minimumFractionDigits?: number
38  maximumFractionDigits?: number
39}
40 
41type PricingTableContextValue = {
42  billingPeriod: BillingPeriod
43  setBillingPeriod: (period: BillingPeriod) => void
44  priceFormatter: Intl.NumberFormat
45  priceFormatterOptions: PriceFormatterOptions
46  locale: Intl.LocalesArgument
47}
48 
49const defaultPriceFormatterOptions: PriceFormatterOptions = {
50  style: "currency",
51  currency: "USD",
52  trailingZeroDisplay: "stripIfInteger",
53} as const
54 
55const PricingTableContext = React.createContext<PricingTableContextValue>({
56  billingPeriod: "monthly",
57  setBillingPeriod: () => {},
58  priceFormatter: new Intl.NumberFormat("en-US", defaultPriceFormatterOptions),
59  priceFormatterOptions: defaultPriceFormatterOptions,
60  locale: "en-US",
61})
62 
63export const usePricingTableContext = () =>
64  React.useContext(PricingTableContext)
65 
66export function PricingTable({
67  billingPeriod: billingPeriodProp,
68  setBillingPeriod: setBillingPeriodProp,
69  defaultBillingPeriod = "monthly",
70  priceFormatterOptions = defaultPriceFormatterOptions,
71  locale = "en-US",
72  children,
73  className,
74  ...props
75}: React.ComponentProps<"div"> & {
76  billingPeriod?: BillingPeriod
77  setBillingPeriod?: (period: BillingPeriod) => void
78  defaultBillingPeriod?: BillingPeriod
79  priceFormatterOptions?: PriceFormatterOptions
80  locale?: string
81}) {
82  const [billingPeriod, setBillingPeriod] = useControllableState({
83    prop: billingPeriodProp,
84    defaultProp: defaultBillingPeriod,
85    onChange: setBillingPeriodProp,
86    caller: "pricing-table",
87  })
88 
89  const priceFormatter = React.useMemo(
90// … truncated