pricing-plan.ts
2.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
const orientation = [
"horizontal",
"vertical"
] as const
const variant = [
"solid",
"outline",
"soft",
"subtle"
] as const
export default {
"slots": {
"root": "relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6",
"header": "",
"body": "flex flex-col min-w-0",
"footer": "flex flex-col gap-6 items-center",
"titleWrapper": "flex items-center gap-3",
"title": "text-highlighted truncate text-2xl sm:text-3xl text-pretty font-semibold",
"description": "text-muted text-base text-pretty mt-2",
"priceWrapper": "flex items-center gap-1",
"price": "text-highlighted text-3xl sm:text-4xl font-semibold",
"discount": "text-muted line-through text-xl sm:text-2xl",
"billing": "flex flex-col justify-between min-w-0",
"billingPeriod": "text-toned truncate text-xs font-medium",
"billingCycle": "text-muted truncate text-xs font-medium",
"features": "flex flex-col gap-3 flex-1 mt-6 grow-0",
"feature": "flex items-center gap-2 min-w-0",
"featureIcon": "size-5 shrink-0 text-primary",
"featureTitle": "text-muted text-sm truncate",
"badge": "",
"button": "",
"tagline": "text-base font-semibold text-default",
"terms": "text-xs/5 text-muted text-center text-balance"
},
"variants": {
"orientation": {
"horizontal": {
"root": "grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default",
"body": "lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center",
"footer": "lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto",
"features": "lg:grid lg:grid-cols-2 lg:mt-12"
},
"vertical": {
"footer": "justify-end",
"priceWrapper": "mt-6"
}
},
"variant": {
"solid": {
"root": "bg-inverted",
"title": "text-inverted",
"description": "text-dimmed",
"price": "text-inverted",
"discount": "text-dimmed",
"billingCycle": "text-dimmed",
"billingPeriod": "text-dimmed",
"featureTitle": "text-dimmed"
},
"outline": {
"root": "bg-default ring ring-default"
},
"soft": {
"root": "bg-elevated/50"
},
"subtle": {
"root": "bg-elevated/50 ring ring-default"
}
},
"highlight": {
"true": {
"root": "ring-2 ring-inset ring-primary"
}
},
"scale": {
"true": {
"root": "lg:scale-[1.1] lg:z-[1]"
}
}
},
"compoundVariants": [
{
"orientation": "horizontal" as typeof orientation[number],
"variant": "soft" as typeof variant[number],
"class": {
"root": "divide-accented"
}
},
{
"orientation": "horizontal" as typeof orientation[number],
"variant": "subtle" as typeof variant[number],
"class": {
"root": "divide-accented"
}
}
],
"defaultVariants": {
"variant": "outline" as typeof variant[number]
}
}