@zentauri-ui/zentauri-components 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +134 -0
- package/dist/ui/accordion.cjs +311 -0
- package/dist/ui/accordion.cjs.map +1 -0
- package/dist/ui/accordion.d.cts +70 -0
- package/dist/ui/accordion.d.ts +70 -0
- package/dist/ui/accordion.js +286 -0
- package/dist/ui/accordion.js.map +1 -0
- package/dist/ui/alert.cjs +257 -0
- package/dist/ui/alert.cjs.map +1 -0
- package/dist/ui/alert.d.cts +66 -0
- package/dist/ui/alert.d.ts +66 -0
- package/dist/ui/alert.js +224 -0
- package/dist/ui/alert.js.map +1 -0
- package/dist/ui/badge.cjs +192 -0
- package/dist/ui/badge.cjs.map +1 -0
- package/dist/ui/badge.d.cts +37 -0
- package/dist/ui/badge.d.ts +37 -0
- package/dist/ui/badge.js +165 -0
- package/dist/ui/badge.js.map +1 -0
- package/dist/ui/buttons.cjs +202 -0
- package/dist/ui/buttons.cjs.map +1 -0
- package/dist/ui/buttons.d.cts +27 -0
- package/dist/ui/buttons.d.ts +27 -0
- package/dist/ui/buttons.js +176 -0
- package/dist/ui/buttons.js.map +1 -0
- package/dist/ui/card.cjs +293 -0
- package/dist/ui/card.cjs.map +1 -0
- package/dist/ui/card.d.cts +77 -0
- package/dist/ui/card.d.ts +77 -0
- package/dist/ui/card.js +258 -0
- package/dist/ui/card.js.map +1 -0
- package/dist/ui/divider.cjs +229 -0
- package/dist/ui/divider.cjs.map +1 -0
- package/dist/ui/divider.d.cts +39 -0
- package/dist/ui/divider.d.ts +39 -0
- package/dist/ui/divider.js +200 -0
- package/dist/ui/divider.js.map +1 -0
- package/dist/ui/drawer.cjs +408 -0
- package/dist/ui/drawer.cjs.map +1 -0
- package/dist/ui/drawer.d.cts +81 -0
- package/dist/ui/drawer.d.ts +81 -0
- package/dist/ui/drawer.js +383 -0
- package/dist/ui/drawer.js.map +1 -0
- package/dist/ui/dropdown.cjs +302 -0
- package/dist/ui/dropdown.cjs.map +1 -0
- package/dist/ui/dropdown.d.cts +50 -0
- package/dist/ui/dropdown.d.ts +50 -0
- package/dist/ui/dropdown.js +278 -0
- package/dist/ui/dropdown.js.map +1 -0
- package/dist/ui/empty-state.cjs +186 -0
- package/dist/ui/empty-state.cjs.map +1 -0
- package/dist/ui/empty-state.d.cts +55 -0
- package/dist/ui/empty-state.d.ts +55 -0
- package/dist/ui/empty-state.js +154 -0
- package/dist/ui/empty-state.js.map +1 -0
- package/dist/ui/index.d.cts +27 -1164
- package/dist/ui/index.d.ts +27 -1164
- package/dist/ui/inputs.cjs +458 -0
- package/dist/ui/inputs.cjs.map +1 -0
- package/dist/ui/inputs.d.cts +35 -0
- package/dist/ui/inputs.d.ts +35 -0
- package/dist/ui/inputs.js +432 -0
- package/dist/ui/inputs.js.map +1 -0
- package/dist/ui/modal.cjs +406 -0
- package/dist/ui/modal.cjs.map +1 -0
- package/dist/ui/modal.d.cts +84 -0
- package/dist/ui/modal.d.ts +84 -0
- package/dist/ui/modal.js +384 -0
- package/dist/ui/modal.js.map +1 -0
- package/dist/ui/pagination.cjs +523 -0
- package/dist/ui/pagination.cjs.map +1 -0
- package/dist/ui/pagination.d.cts +114 -0
- package/dist/ui/pagination.d.ts +114 -0
- package/dist/ui/pagination.js +494 -0
- package/dist/ui/pagination.js.map +1 -0
- package/dist/ui/progress.cjs +268 -0
- package/dist/ui/progress.cjs.map +1 -0
- package/dist/ui/progress.d.cts +61 -0
- package/dist/ui/progress.d.ts +61 -0
- package/dist/ui/progress.js +237 -0
- package/dist/ui/progress.js.map +1 -0
- package/dist/ui/select.cjs +360 -0
- package/dist/ui/select.cjs.map +1 -0
- package/dist/ui/select.d.cts +73 -0
- package/dist/ui/select.d.ts +73 -0
- package/dist/ui/select.js +327 -0
- package/dist/ui/select.js.map +1 -0
- package/dist/ui/skeleton.cjs +576 -0
- package/dist/ui/skeleton.cjs.map +1 -0
- package/dist/ui/skeleton.d.cts +90 -0
- package/dist/ui/skeleton.d.ts +90 -0
- package/dist/ui/skeleton.js +544 -0
- package/dist/ui/skeleton.js.map +1 -0
- package/dist/ui/spinner.cjs +219 -0
- package/dist/ui/spinner.cjs.map +1 -0
- package/dist/ui/spinner.d.cts +27 -0
- package/dist/ui/spinner.d.ts +27 -0
- package/dist/ui/spinner.js +193 -0
- package/dist/ui/spinner.js.map +1 -0
- package/dist/ui/table.cjs +328 -0
- package/dist/ui/table.cjs.map +1 -0
- package/dist/ui/table.d.cts +81 -0
- package/dist/ui/table.d.ts +81 -0
- package/dist/ui/table.js +293 -0
- package/dist/ui/table.js.map +1 -0
- package/dist/ui/tabs.cjs +300 -0
- package/dist/ui/tabs.cjs.map +1 -0
- package/dist/ui/tabs.d.cts +58 -0
- package/dist/ui/tabs.d.ts +58 -0
- package/dist/ui/tabs.js +274 -0
- package/dist/ui/tabs.js.map +1 -0
- package/dist/ui/toast.cjs +285 -0
- package/dist/ui/toast.cjs.map +1 -0
- package/dist/ui/toast.d.cts +86 -0
- package/dist/ui/toast.d.ts +86 -0
- package/dist/ui/toast.js +258 -0
- package/dist/ui/toast.js.map +1 -0
- package/dist/ui/toggle.cjs +185 -0
- package/dist/ui/toggle.cjs.map +1 -0
- package/dist/ui/toggle.d.cts +37 -0
- package/dist/ui/toggle.d.ts +37 -0
- package/dist/ui/toggle.js +158 -0
- package/dist/ui/toggle.js.map +1 -0
- package/dist/ui/tooltip.cjs +242 -0
- package/dist/ui/tooltip.cjs.map +1 -0
- package/dist/ui/tooltip.d.cts +46 -0
- package/dist/ui/tooltip.d.ts +46 -0
- package/dist/ui/tooltip.js +214 -0
- package/dist/ui/tooltip.js.map +1 -0
- package/dist/variants-1Bx3BEeS.d.cts +8 -0
- package/dist/variants-1Bx3BEeS.d.ts +8 -0
- package/package.json +7 -3
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
// src/ui/buttons/button.tsx
|
|
5
|
+
import { motion } from "framer-motion";
|
|
6
|
+
|
|
7
|
+
// src/lib/utils.ts
|
|
8
|
+
import { clsx } from "clsx";
|
|
9
|
+
import { twMerge } from "tailwind-merge";
|
|
10
|
+
function cn(...inputs) {
|
|
11
|
+
return twMerge(clsx(inputs));
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// src/ui/buttons/animations.ts
|
|
15
|
+
var buttonAnimationPresets = {
|
|
16
|
+
none: {},
|
|
17
|
+
lift: {
|
|
18
|
+
whileHover: { y: -2, scale: 1.02 },
|
|
19
|
+
whileTap: { y: 0, scale: 0.98 },
|
|
20
|
+
transition: { type: "spring", stiffness: 420, damping: 28 }
|
|
21
|
+
},
|
|
22
|
+
press: {
|
|
23
|
+
whileTap: { scale: 0.96 },
|
|
24
|
+
transition: { type: "spring", stiffness: 520, damping: 30 }
|
|
25
|
+
},
|
|
26
|
+
glow: {
|
|
27
|
+
whileHover: {
|
|
28
|
+
boxShadow: "0 0 0 1px rgba(255,255,255,0.25), 0 18px 42px rgba(15,23,42,0.35)",
|
|
29
|
+
scale: 1.01
|
|
30
|
+
},
|
|
31
|
+
whileTap: { scale: 0.98 },
|
|
32
|
+
transition: { duration: 0.2, ease: "easeOut" }
|
|
33
|
+
},
|
|
34
|
+
tilt: {
|
|
35
|
+
whileHover: { rotateX: 6, rotateY: -6, scale: 1.01 },
|
|
36
|
+
whileTap: { scale: 0.98, rotateX: 0, rotateY: 0 },
|
|
37
|
+
transition: { type: "spring", stiffness: 300, damping: 20 },
|
|
38
|
+
style: { transformStyle: "preserve-3d" }
|
|
39
|
+
},
|
|
40
|
+
bounce: {
|
|
41
|
+
whileHover: { y: -4, scale: 1.03 },
|
|
42
|
+
whileTap: { y: 0, scale: 0.97 },
|
|
43
|
+
transition: { type: "spring", bounce: 0.45, duration: 0.45 }
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
// src/ui/buttons/variants.ts
|
|
48
|
+
import { cva } from "class-variance-authority";
|
|
49
|
+
var buttonVariants = cva(
|
|
50
|
+
[
|
|
51
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl",
|
|
52
|
+
"text-sm font-medium ring-offset-slate-950 transition-colors",
|
|
53
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2",
|
|
54
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
55
|
+
"select-none"
|
|
56
|
+
],
|
|
57
|
+
{
|
|
58
|
+
variants: {
|
|
59
|
+
appearance: {
|
|
60
|
+
default: "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)] hover:bg-white",
|
|
61
|
+
secondary: "bg-slate-800 text-slate-50 hover:bg-slate-700",
|
|
62
|
+
destructive: "bg-rose-600 text-white hover:bg-rose-600",
|
|
63
|
+
outline: "border border-white/10 bg-white/5 text-slate-50 hover:bg-white/10",
|
|
64
|
+
ghost: "bg-transparent text-slate-200 hover:bg-white/5",
|
|
65
|
+
link: "bg-transparent text-cyan-300 underline-offset-4 hover:underline",
|
|
66
|
+
glass: "border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/15",
|
|
67
|
+
emerald: "bg-emerald-600 text-white hover:bg-emerald-600",
|
|
68
|
+
indigo: "bg-indigo-600 text-white hover:bg-indigo-600",
|
|
69
|
+
purple: "bg-purple-600 text-white hover:bg-purple-600",
|
|
70
|
+
pink: "bg-pink-600 text-white hover:bg-pink-600",
|
|
71
|
+
rose: "bg-rose-600 text-white hover:bg-rose-600",
|
|
72
|
+
sky: "bg-sky-600 text-white hover:bg-sky-600",
|
|
73
|
+
teal: "bg-teal-600 text-white hover:bg-teal-600",
|
|
74
|
+
yellow: "bg-yellow-600 text-white hover:bg-yellow-600",
|
|
75
|
+
orange: "bg-orange-600 text-white hover:bg-orange-600",
|
|
76
|
+
gray: "bg-gray-600 text-white hover:bg-gray-600",
|
|
77
|
+
amber: "bg-amber-600 text-white hover:bg-amber-600",
|
|
78
|
+
violet: "bg-violet-600 text-white hover:bg-violet-600",
|
|
79
|
+
"gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-600 hover:to-purple-600",
|
|
80
|
+
"gradient-green": "bg-gradient-to-r from-green-600 to-lime-600 text-white hover:from-green-600 hover:to-lime-600",
|
|
81
|
+
"gradient-red": "bg-gradient-to-r from-red-600 to-pink-600 text-white hover:from-red-600 hover:to-pink-600",
|
|
82
|
+
"gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600 text-white hover:from-yellow-600 hover:to-orange-600",
|
|
83
|
+
"gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-600 hover:to-pink-600",
|
|
84
|
+
"gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600 text-white hover:from-teal-600 hover:to-cyan-600",
|
|
85
|
+
"gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-600 hover:to-purple-600",
|
|
86
|
+
"gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600 text-white hover:from-pink-600 hover:to-rose-600",
|
|
87
|
+
"gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600 text-white hover:from-orange-600 hover:to-red-600"
|
|
88
|
+
},
|
|
89
|
+
size: {
|
|
90
|
+
sm: "h-7 md:h-9 px-3 text-xs",
|
|
91
|
+
md: "h-9 md:h-11 px-4",
|
|
92
|
+
lg: "h-10 md:h-12 px-5 text-base",
|
|
93
|
+
xl: "h-12 md:h-14 px-6 text-lg",
|
|
94
|
+
"2xl": "h-14 md:h-16 px-6 md:px-8 text-xl",
|
|
95
|
+
"3xl": "h-16 md:h-18 px-8 md:px-10 text-2xl",
|
|
96
|
+
"4xl": "h-18 md:h-20 px-10 md:px-12 text-2xl",
|
|
97
|
+
"5xl": "h-20 md:h-22 px-12 md:px-14 text-2xl",
|
|
98
|
+
"6xl": "h-22 md:h-24 px-14 md:px-16 text-2xl",
|
|
99
|
+
"7xl": "h-24 md:h-26 px-16 md:px-18 text-2xl",
|
|
100
|
+
"8xl": "h-26 md:h-28 px-20 text-2xl",
|
|
101
|
+
"9xl": "h-24 md:h-30 px-18 md:px-22 text-2xl",
|
|
102
|
+
"10xl": "h-26 md:h-32 px-20 md:px-24 text-2xl",
|
|
103
|
+
icon: "h-10 w-10"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
defaultVariants: {
|
|
107
|
+
appearance: "default",
|
|
108
|
+
size: "md"
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
|
|
113
|
+
// src/ui/buttons/button.tsx
|
|
114
|
+
import { jsx } from "react/jsx-runtime";
|
|
115
|
+
var Button = (props) => {
|
|
116
|
+
if (props.as === "link") {
|
|
117
|
+
const {
|
|
118
|
+
className: className2,
|
|
119
|
+
appearance: appearance2,
|
|
120
|
+
size: size2,
|
|
121
|
+
children: children2,
|
|
122
|
+
ref: ref2,
|
|
123
|
+
href,
|
|
124
|
+
target,
|
|
125
|
+
animation: animation2 = "none",
|
|
126
|
+
...rest2
|
|
127
|
+
} = props;
|
|
128
|
+
const motionProps2 = buttonAnimationPresets[animation2];
|
|
129
|
+
return /* @__PURE__ */ jsx(
|
|
130
|
+
motion.a,
|
|
131
|
+
{
|
|
132
|
+
ref: ref2,
|
|
133
|
+
href,
|
|
134
|
+
target,
|
|
135
|
+
rel: target === "_blank" ? "noopener noreferrer" : void 0,
|
|
136
|
+
"data-slot": "button",
|
|
137
|
+
className: cn(buttonVariants({ appearance: appearance2, size: size2 }), className2),
|
|
138
|
+
initial: false,
|
|
139
|
+
...motionProps2,
|
|
140
|
+
...rest2,
|
|
141
|
+
children: children2
|
|
142
|
+
}
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
const {
|
|
146
|
+
className,
|
|
147
|
+
appearance,
|
|
148
|
+
size,
|
|
149
|
+
type = "button",
|
|
150
|
+
children,
|
|
151
|
+
ref,
|
|
152
|
+
animation = "none",
|
|
153
|
+
...rest
|
|
154
|
+
} = props;
|
|
155
|
+
const motionProps = buttonAnimationPresets[animation];
|
|
156
|
+
return /* @__PURE__ */ jsx(
|
|
157
|
+
motion.button,
|
|
158
|
+
{
|
|
159
|
+
ref,
|
|
160
|
+
type,
|
|
161
|
+
"data-slot": "button",
|
|
162
|
+
className: cn(buttonVariants({ appearance, size }), className),
|
|
163
|
+
initial: false,
|
|
164
|
+
...motionProps,
|
|
165
|
+
...rest,
|
|
166
|
+
children
|
|
167
|
+
}
|
|
168
|
+
);
|
|
169
|
+
};
|
|
170
|
+
Button.displayName = "Button";
|
|
171
|
+
export {
|
|
172
|
+
Button,
|
|
173
|
+
buttonAnimationPresets,
|
|
174
|
+
buttonVariants
|
|
175
|
+
};
|
|
176
|
+
//# sourceMappingURL=buttons.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ui/buttons/button.tsx","../../src/lib/utils.ts","../../src/ui/buttons/animations.ts","../../src/ui/buttons/variants.ts"],"sourcesContent":["\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { ButtonProps } from \"./types\";\nimport { buttonAnimationPresets } from \"./animations\";\nimport { buttonVariants } from \"./variants\";\n\nexport const Button = (props: ButtonProps) => {\n if (props.as === \"link\") {\n const {\n className,\n appearance,\n size,\n children,\n ref,\n href,\n target,\n animation = \"none\",\n ...rest\n } = props;\n const motionProps = buttonAnimationPresets[animation];\n\n return (\n <motion.a\n ref={ref}\n href={href}\n target={target}\n rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n data-slot=\"button\"\n className={cn(buttonVariants({ appearance, size }), className)}\n initial={false}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.a>\n );\n }\n\n const {\n className,\n appearance,\n size,\n type = \"button\",\n children,\n ref,\n animation = \"none\",\n ...rest\n } = props;\n const motionProps = buttonAnimationPresets[animation];\n\n return (\n <motion.button\n ref={ref}\n type={type}\n data-slot=\"button\"\n className={cn(buttonVariants({ appearance, size }), className)}\n initial={false}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.button>\n );\n};\n\nButton.displayName = \"Button\";\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","import type { AnimationPresets } from \"./types\";\n\nexport const buttonAnimationPresets: AnimationPresets = {\n none: {},\n lift: {\n whileHover: { y: -2, scale: 1.02 },\n whileTap: { y: 0, scale: 0.98 },\n transition: { type: \"spring\", stiffness: 420, damping: 28 },\n },\n press: {\n whileTap: { scale: 0.96 },\n transition: { type: \"spring\", stiffness: 520, damping: 30 },\n },\n glow: {\n whileHover: {\n boxShadow:\n \"0 0 0 1px rgba(255,255,255,0.25), 0 18px 42px rgba(15,23,42,0.35)\",\n scale: 1.01,\n },\n whileTap: { scale: 0.98 },\n transition: { duration: 0.2, ease: \"easeOut\" },\n },\n tilt: {\n whileHover: { rotateX: 6, rotateY: -6, scale: 1.01 },\n whileTap: { scale: 0.98, rotateX: 0, rotateY: 0 },\n transition: { type: \"spring\", stiffness: 300, damping: 20 },\n style: { transformStyle: \"preserve-3d\" },\n },\n bounce: {\n whileHover: { y: -4, scale: 1.03 },\n whileTap: { y: 0, scale: 0.97 },\n transition: { type: \"spring\", bounce: 0.45, duration: 0.45 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const buttonVariants = cva(\n [\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl\",\n \"text-sm font-medium ring-offset-slate-950 transition-colors\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n \"select-none\",\n ],\n {\n variants: {\n appearance: {\n default:\n \"bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)] hover:bg-white\",\n secondary: \"bg-slate-800 text-slate-50 hover:bg-slate-700\",\n destructive: \"bg-rose-600 text-white hover:bg-rose-600\",\n outline:\n \"border border-white/10 bg-white/5 text-slate-50 hover:bg-white/10\",\n ghost: \"bg-transparent text-slate-200 hover:bg-white/5\",\n link: \"bg-transparent text-cyan-300 underline-offset-4 hover:underline\",\n glass:\n \"border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/15\",\n emerald: \"bg-emerald-600 text-white hover:bg-emerald-600\",\n indigo: \"bg-indigo-600 text-white hover:bg-indigo-600\",\n purple: \"bg-purple-600 text-white hover:bg-purple-600\",\n pink: \"bg-pink-600 text-white hover:bg-pink-600\",\n rose: \"bg-rose-600 text-white hover:bg-rose-600\",\n sky: \"bg-sky-600 text-white hover:bg-sky-600\",\n teal: \"bg-teal-600 text-white hover:bg-teal-600\",\n yellow: \"bg-yellow-600 text-white hover:bg-yellow-600\",\n orange: \"bg-orange-600 text-white hover:bg-orange-600\",\n gray: \"bg-gray-600 text-white hover:bg-gray-600\",\n amber: \"bg-amber-600 text-white hover:bg-amber-600\",\n violet: \"bg-violet-600 text-white hover:bg-violet-600\",\n \"gradient-blue\": \"bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-600 hover:to-purple-600\",\n \"gradient-green\": \"bg-gradient-to-r from-green-600 to-lime-600 text-white hover:from-green-600 hover:to-lime-600\",\n \"gradient-red\": \"bg-gradient-to-r from-red-600 to-pink-600 text-white hover:from-red-600 hover:to-pink-600\",\n \"gradient-yellow\": \"bg-gradient-to-r from-yellow-600 to-orange-600 text-white hover:from-yellow-600 hover:to-orange-600\",\n \"gradient-purple\": \"bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-600 hover:to-pink-600\",\n \"gradient-teal\": \"bg-gradient-to-r from-teal-600 to-cyan-600 text-white hover:from-teal-600 hover:to-cyan-600\",\n \"gradient-indigo\": \"bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-600 hover:to-purple-600\",\n \"gradient-pink\": \"bg-gradient-to-r from-pink-600 to-rose-600 text-white hover:from-pink-600 hover:to-rose-600\",\n \"gradient-orange\": \"bg-gradient-to-r from-orange-600 to-red-600 text-white hover:from-orange-600 hover:to-red-600\",\n },\n size: {\n sm: \"h-7 md:h-9 px-3 text-xs\",\n md: \"h-9 md:h-11 px-4\",\n lg: \"h-10 md:h-12 px-5 text-base\",\n xl: \"h-12 md:h-14 px-6 text-lg\",\n \"2xl\": \"h-14 md:h-16 px-6 md:px-8 text-xl\",\n \"3xl\": \"h-16 md:h-18 px-8 md:px-10 text-2xl\",\n \"4xl\": \"h-18 md:h-20 px-10 md:px-12 text-2xl\",\n \"5xl\": \"h-20 md:h-22 px-12 md:px-14 text-2xl\",\n \"6xl\": \"h-22 md:h-24 px-14 md:px-16 text-2xl\",\n \"7xl\": \"h-24 md:h-26 px-16 md:px-18 text-2xl\",\n \"8xl\": \"h-26 md:h-28 px-20 text-2xl\",\n \"9xl\": \"h-24 md:h-30 px-18 md:px-22 text-2xl\",\n \"10xl\": \"h-26 md:h-32 px-20 md:px-24 text-2xl\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n },\n },\n);\n"],"mappings":"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","names":["className","appearance","size","children","ref","animation","rest","motionProps"]}
|
package/dist/ui/card.cjs
ADDED
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/ui/card/index.ts
|
|
21
|
+
var card_exports = {};
|
|
22
|
+
__export(card_exports, {
|
|
23
|
+
Card: () => Card,
|
|
24
|
+
CardBody: () => CardBody,
|
|
25
|
+
CardDescription: () => CardDescription,
|
|
26
|
+
CardFooter: () => CardFooter,
|
|
27
|
+
CardHeader: () => CardHeader,
|
|
28
|
+
CardTitle: () => CardTitle,
|
|
29
|
+
cardAnimationPresets: () => cardAnimationPresets,
|
|
30
|
+
cardDescriptionVariants: () => cardDescriptionVariants,
|
|
31
|
+
cardFooterVariants: () => cardFooterVariants,
|
|
32
|
+
cardHeaderVariants: () => cardHeaderVariants,
|
|
33
|
+
cardTitleVariants: () => cardTitleVariants,
|
|
34
|
+
cardVariants: () => cardVariants
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(card_exports);
|
|
37
|
+
|
|
38
|
+
// src/ui/card/card.tsx
|
|
39
|
+
var import_react = require("react");
|
|
40
|
+
var import_framer_motion = require("framer-motion");
|
|
41
|
+
|
|
42
|
+
// src/lib/utils.ts
|
|
43
|
+
var import_clsx = require("clsx");
|
|
44
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
45
|
+
function cn(...inputs) {
|
|
46
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// src/ui/card/animations.ts
|
|
50
|
+
var cardAnimationPresets = {
|
|
51
|
+
none: {},
|
|
52
|
+
lift: {
|
|
53
|
+
whileHover: { y: -4, scale: 1.01 },
|
|
54
|
+
whileTap: { y: 0, scale: 0.995 },
|
|
55
|
+
transition: { type: "spring", stiffness: 380, damping: 26 }
|
|
56
|
+
},
|
|
57
|
+
glow: {
|
|
58
|
+
whileHover: {
|
|
59
|
+
boxShadow: "0 0 0 1px rgba(255,255,255,0.18), 0 22px 48px rgba(15,23,42,0.45)"
|
|
60
|
+
},
|
|
61
|
+
transition: { duration: 0.22, ease: "easeOut" }
|
|
62
|
+
},
|
|
63
|
+
tilt: {
|
|
64
|
+
whileHover: { rotateX: 4, rotateY: -4, scale: 1.01 },
|
|
65
|
+
whileTap: { rotateX: 0, rotateY: 0, scale: 0.99 },
|
|
66
|
+
transition: { type: "spring", stiffness: 280, damping: 22 },
|
|
67
|
+
style: { transformStyle: "preserve-3d" }
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
// src/ui/card/variants.ts
|
|
72
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
73
|
+
var cardVariants = (0, import_class_variance_authority.cva)(
|
|
74
|
+
[
|
|
75
|
+
"relative flex w-full flex-col overflow-hidden text-slate-50",
|
|
76
|
+
"ring-offset-slate-950 transition-colors",
|
|
77
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2"
|
|
78
|
+
],
|
|
79
|
+
{
|
|
80
|
+
variants: {
|
|
81
|
+
appearance: {
|
|
82
|
+
default: "border border-white/10 bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
|
|
83
|
+
glass: "border border-white/15 bg-white/10 backdrop-blur-md shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
|
|
84
|
+
outline: "border border-white/15 bg-transparent",
|
|
85
|
+
ghost: "border border-transparent bg-transparent",
|
|
86
|
+
elevated: "border border-white/10 bg-slate-900/80 shadow-[0_24px_64px_rgba(15,23,42,0.45)]",
|
|
87
|
+
sky: "border border-sky-600 bg-sky-950/70 backdrop-blur-xl",
|
|
88
|
+
rose: "border border-rose-600 bg-rose-950/70 backdrop-blur-xl",
|
|
89
|
+
purple: "border border-purple-600 bg-purple-950/70 backdrop-blur-xl",
|
|
90
|
+
pink: "border border-pink-600 bg-pink-950/70 backdrop-blur-xl",
|
|
91
|
+
orange: "border border-orange-600 bg-orange-950/70 backdrop-blur-xl",
|
|
92
|
+
yellow: "border border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
|
|
93
|
+
teal: "border border-teal-600 bg-teal-950/70 backdrop-blur-xl",
|
|
94
|
+
indigo: "border border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
|
|
95
|
+
emerald: "border border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
|
|
96
|
+
gray: "border border-gray-600 bg-gray-950/70 backdrop-blur-xl",
|
|
97
|
+
amber: "border border-amber-600 bg-amber-950/70 backdrop-blur-xl",
|
|
98
|
+
violet: "border border-violet-600 bg-violet-950/70 backdrop-blur-xl",
|
|
99
|
+
"gradient-blue": "border border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
|
|
100
|
+
"gradient-green": "border border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
|
|
101
|
+
"gradient-red": "border border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
|
|
102
|
+
"gradient-yellow": "border border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
|
|
103
|
+
"gradient-purple": "border border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
|
|
104
|
+
"gradient-teal": "border border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
|
|
105
|
+
"gradient-indigo": "border border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
|
|
106
|
+
"gradient-pink": "border border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
|
|
107
|
+
"gradient-orange": "border border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl"
|
|
108
|
+
},
|
|
109
|
+
size: {
|
|
110
|
+
sm: "gap-2 p-3 text-sm",
|
|
111
|
+
md: "gap-3 p-4 text-sm",
|
|
112
|
+
lg: "gap-4 p-6 text-base"
|
|
113
|
+
},
|
|
114
|
+
rounded: {
|
|
115
|
+
sm: "rounded-lg",
|
|
116
|
+
md: "rounded-xl",
|
|
117
|
+
lg: "rounded-2xl",
|
|
118
|
+
full: "rounded-3xl"
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
defaultVariants: {
|
|
122
|
+
appearance: "default",
|
|
123
|
+
size: "md",
|
|
124
|
+
rounded: "md"
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
var cardHeaderVariants = (0, import_class_variance_authority.cva)(
|
|
129
|
+
"flex flex-col gap-1 border-b border-white/10 pb-3",
|
|
130
|
+
{
|
|
131
|
+
variants: {
|
|
132
|
+
size: {
|
|
133
|
+
sm: "pb-2",
|
|
134
|
+
md: "pb-3",
|
|
135
|
+
lg: "pb-4"
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
defaultVariants: { size: "md" }
|
|
139
|
+
}
|
|
140
|
+
);
|
|
141
|
+
var cardFooterVariants = (0, import_class_variance_authority.cva)(
|
|
142
|
+
"flex flex-col gap-2 border-t border-white/10 pt-3",
|
|
143
|
+
{
|
|
144
|
+
variants: {
|
|
145
|
+
size: {
|
|
146
|
+
sm: "pt-2",
|
|
147
|
+
md: "pt-3",
|
|
148
|
+
lg: "pt-4"
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
defaultVariants: { size: "md" }
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
var cardTitleVariants = (0, import_class_variance_authority.cva)("font-semibold tracking-tight text-slate-50", {
|
|
155
|
+
variants: {
|
|
156
|
+
size: {
|
|
157
|
+
sm: "text-sm",
|
|
158
|
+
md: "text-base",
|
|
159
|
+
lg: "text-lg"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
defaultVariants: { size: "md" }
|
|
163
|
+
});
|
|
164
|
+
var cardDescriptionVariants = (0, import_class_variance_authority.cva)("text-slate-400", {
|
|
165
|
+
variants: {
|
|
166
|
+
size: {
|
|
167
|
+
sm: "text-xs",
|
|
168
|
+
md: "text-sm",
|
|
169
|
+
lg: "text-base"
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
defaultVariants: { size: "md" }
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
// src/ui/card/card.tsx
|
|
176
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
177
|
+
var CardSizeContext = (0, import_react.createContext)("md");
|
|
178
|
+
function useCardSize() {
|
|
179
|
+
return (0, import_react.useContext)(CardSizeContext);
|
|
180
|
+
}
|
|
181
|
+
function Card(props) {
|
|
182
|
+
const {
|
|
183
|
+
className,
|
|
184
|
+
appearance,
|
|
185
|
+
size = "md",
|
|
186
|
+
rounded,
|
|
187
|
+
animation = "none",
|
|
188
|
+
children,
|
|
189
|
+
ref,
|
|
190
|
+
...rest
|
|
191
|
+
} = props;
|
|
192
|
+
const motionProps = cardAnimationPresets[animation];
|
|
193
|
+
const ctx = (0, import_react.useMemo)(() => size ?? "md", [size]);
|
|
194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
195
|
+
import_framer_motion.motion.article,
|
|
196
|
+
{
|
|
197
|
+
ref,
|
|
198
|
+
"data-slot": "card",
|
|
199
|
+
className: cn(cardVariants({ appearance, size, rounded }), className),
|
|
200
|
+
initial: false,
|
|
201
|
+
...motionProps,
|
|
202
|
+
...rest,
|
|
203
|
+
children
|
|
204
|
+
}
|
|
205
|
+
) });
|
|
206
|
+
}
|
|
207
|
+
Card.displayName = "Card";
|
|
208
|
+
function CardHeader({ className, children }) {
|
|
209
|
+
const size = useCardSize();
|
|
210
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
211
|
+
"header",
|
|
212
|
+
{
|
|
213
|
+
"data-slot": "card-header",
|
|
214
|
+
className: cn(cardHeaderVariants({ size }), className),
|
|
215
|
+
children
|
|
216
|
+
}
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
CardHeader.displayName = "CardHeader";
|
|
220
|
+
function CardBody({ className, children }) {
|
|
221
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "card-body", className: cn("flex flex-1 flex-col gap-2", className), children });
|
|
222
|
+
}
|
|
223
|
+
CardBody.displayName = "CardBody";
|
|
224
|
+
function CardFooter({ className, children }) {
|
|
225
|
+
const size = useCardSize();
|
|
226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
227
|
+
"footer",
|
|
228
|
+
{
|
|
229
|
+
"data-slot": "card-footer",
|
|
230
|
+
className: cn(cardFooterVariants({ size }), className),
|
|
231
|
+
children
|
|
232
|
+
}
|
|
233
|
+
);
|
|
234
|
+
}
|
|
235
|
+
CardFooter.displayName = "CardFooter";
|
|
236
|
+
function CardTitle({
|
|
237
|
+
className,
|
|
238
|
+
children,
|
|
239
|
+
as = "h3",
|
|
240
|
+
ref,
|
|
241
|
+
...rest
|
|
242
|
+
}) {
|
|
243
|
+
const size = useCardSize();
|
|
244
|
+
const Tag = as;
|
|
245
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
246
|
+
Tag,
|
|
247
|
+
{
|
|
248
|
+
ref,
|
|
249
|
+
"data-slot": "card-title",
|
|
250
|
+
className: cn(cardTitleVariants({ size }), className),
|
|
251
|
+
...rest,
|
|
252
|
+
children
|
|
253
|
+
}
|
|
254
|
+
);
|
|
255
|
+
}
|
|
256
|
+
CardTitle.displayName = "CardTitle";
|
|
257
|
+
function CardDescription({
|
|
258
|
+
className,
|
|
259
|
+
children,
|
|
260
|
+
as = "p",
|
|
261
|
+
ref,
|
|
262
|
+
...rest
|
|
263
|
+
}) {
|
|
264
|
+
const size = useCardSize();
|
|
265
|
+
const Tag = as;
|
|
266
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
267
|
+
Tag,
|
|
268
|
+
{
|
|
269
|
+
ref,
|
|
270
|
+
"data-slot": "card-description",
|
|
271
|
+
className: cn(cardDescriptionVariants({ size }), className),
|
|
272
|
+
...rest,
|
|
273
|
+
children
|
|
274
|
+
}
|
|
275
|
+
);
|
|
276
|
+
}
|
|
277
|
+
CardDescription.displayName = "CardDescription";
|
|
278
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
279
|
+
0 && (module.exports = {
|
|
280
|
+
Card,
|
|
281
|
+
CardBody,
|
|
282
|
+
CardDescription,
|
|
283
|
+
CardFooter,
|
|
284
|
+
CardHeader,
|
|
285
|
+
CardTitle,
|
|
286
|
+
cardAnimationPresets,
|
|
287
|
+
cardDescriptionVariants,
|
|
288
|
+
cardFooterVariants,
|
|
289
|
+
cardHeaderVariants,
|
|
290
|
+
cardTitleVariants,
|
|
291
|
+
cardVariants
|
|
292
|
+
});
|
|
293
|
+
//# sourceMappingURL=card.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ui/card/index.ts","../../src/ui/card/card.tsx","../../src/lib/utils.ts","../../src/ui/card/animations.ts","../../src/ui/card/variants.ts"],"sourcesContent":["export {\n Card,\n CardBody,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"./card\";\nexport type {\n CardAnimation,\n CardDescriptionProps,\n CardProps,\n CardSectionProps,\n CardTitleProps,\n} from \"./types\";\nexport { cardAnimationPresets } from \"./animations\";\nexport {\n cardVariants,\n cardHeaderVariants,\n cardFooterVariants,\n cardTitleVariants,\n cardDescriptionVariants,\n} from \"./variants\";\n","\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { cardAnimationPresets } from \"./animations\";\nimport type {\n CardDescriptionProps,\n CardProps,\n CardSectionProps,\n CardTitleProps,\n} from \"./types\";\nimport {\n cardDescriptionVariants,\n cardFooterVariants,\n cardHeaderVariants,\n cardTitleVariants,\n cardVariants,\n} from \"./variants\";\n\ntype CardSize = NonNullable<CardProps[\"size\"]>;\n\nconst CardSizeContext = createContext<CardSize>(\"md\");\n\nfunction useCardSize(): CardSize {\n return useContext(CardSizeContext);\n}\n\nexport function Card(props: CardProps) {\n const {\n className,\n appearance,\n size = \"md\",\n rounded,\n animation = \"none\",\n children,\n ref,\n ...rest\n } = props;\n const motionProps = cardAnimationPresets[animation];\n const ctx = useMemo(() => size ?? \"md\", [size]);\n\n return (\n <CardSizeContext.Provider value={ctx}>\n <motion.article\n ref={ref}\n data-slot=\"card\"\n className={cn(cardVariants({ appearance, size, rounded }), className)}\n initial={false}\n {...motionProps}\n {...rest}\n >\n {children}\n </motion.article>\n </CardSizeContext.Provider>\n );\n}\n\nCard.displayName = \"Card\";\n\nexport function CardHeader({ className, children }: CardSectionProps) {\n const size = useCardSize();\n return (\n <header\n data-slot=\"card-header\"\n className={cn(cardHeaderVariants({ size }), className)}\n >\n {children}\n </header>\n );\n}\n\nCardHeader.displayName = \"CardHeader\";\n\nexport function CardBody({ className, children }: CardSectionProps) {\n return (\n <div data-slot=\"card-body\" className={cn(\"flex flex-1 flex-col gap-2\", className)}>\n {children}\n </div>\n );\n}\n\nCardBody.displayName = \"CardBody\";\n\nexport function CardFooter({ className, children }: CardSectionProps) {\n const size = useCardSize();\n return (\n <footer\n data-slot=\"card-footer\"\n className={cn(cardFooterVariants({ size }), className)}\n >\n {children}\n </footer>\n );\n}\n\nCardFooter.displayName = \"CardFooter\";\n\nexport function CardTitle({\n className,\n children,\n as = \"h3\",\n ref,\n ...rest\n}: CardTitleProps) {\n const size = useCardSize();\n const Tag = as;\n return (\n <Tag\n ref={ref as never}\n data-slot=\"card-title\"\n className={cn(cardTitleVariants({ size }), className)}\n {...rest}\n >\n {children}\n </Tag>\n );\n}\n\nCardTitle.displayName = \"CardTitle\";\n\nexport function CardDescription({\n className,\n children,\n as = \"p\",\n ref,\n ...rest\n}: CardDescriptionProps) {\n const size = useCardSize();\n const Tag = as;\n return (\n <Tag\n ref={ref as never}\n data-slot=\"card-description\"\n className={cn(cardDescriptionVariants({ size }), className)}\n {...rest}\n >\n {children}\n </Tag>\n );\n}\n\nCardDescription.displayName = \"CardDescription\";\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { CardAnimation } from \"./types\";\n\ntype CardPresetMotionProps = Pick<\n HTMLMotionProps<\"article\">,\n \"style\" | \"transition\" | \"whileHover\" | \"whileTap\"\n>;\n\nexport type CardAnimationPresets = Record<CardAnimation, CardPresetMotionProps>;\n\nexport const cardAnimationPresets: CardAnimationPresets = {\n none: {},\n lift: {\n whileHover: { y: -4, scale: 1.01 },\n whileTap: { y: 0, scale: 0.995 },\n transition: { type: \"spring\", stiffness: 380, damping: 26 },\n },\n glow: {\n whileHover: {\n boxShadow:\n \"0 0 0 1px rgba(255,255,255,0.18), 0 22px 48px rgba(15,23,42,0.45)\",\n },\n transition: { duration: 0.22, ease: \"easeOut\" },\n },\n tilt: {\n whileHover: { rotateX: 4, rotateY: -4, scale: 1.01 },\n whileTap: { rotateX: 0, rotateY: 0, scale: 0.99 },\n transition: { type: \"spring\", stiffness: 280, damping: 22 },\n style: { transformStyle: \"preserve-3d\" },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const cardVariants = cva(\n [\n \"relative flex w-full flex-col overflow-hidden text-slate-50\",\n \"ring-offset-slate-950 transition-colors\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2\",\n ],\n {\n variants: {\n appearance: {\n default:\n \"border border-white/10 bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.12)]\",\n glass:\n \"border border-white/15 bg-white/10 backdrop-blur-md shadow-[0_18px_48px_rgba(15,23,42,0.35)]\",\n outline: \"border border-white/15 bg-transparent\",\n ghost: \"border border-transparent bg-transparent\",\n elevated:\n \"border border-white/10 bg-slate-900/80 shadow-[0_24px_64px_rgba(15,23,42,0.45)]\",\n sky: \"border border-sky-600 bg-sky-950/70 backdrop-blur-xl\",\n rose: \"border border-rose-600 bg-rose-950/70 backdrop-blur-xl\",\n purple: \"border border-purple-600 bg-purple-950/70 backdrop-blur-xl\",\n pink: \"border border-pink-600 bg-pink-950/70 backdrop-blur-xl\",\n orange: \"border border-orange-600 bg-orange-950/70 backdrop-blur-xl\",\n yellow: \"border border-yellow-600 bg-yellow-950/70 backdrop-blur-xl\",\n teal: \"border border-teal-600 bg-teal-950/70 backdrop-blur-xl\",\n indigo: \"border border-indigo-600 bg-indigo-950/70 backdrop-blur-xl\",\n emerald: \"border border-emerald-600 bg-emerald-950/70 backdrop-blur-xl\",\n gray: \"border border-gray-600 bg-gray-950/70 backdrop-blur-xl\",\n amber: \"border border-amber-600 bg-amber-950/70 backdrop-blur-xl\",\n violet: \"border border-violet-600 bg-violet-950/70 backdrop-blur-xl\",\n \"gradient-blue\": \"border border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl\",\n \"gradient-green\": \"border border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl\",\n \"gradient-red\": \"border border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl\",\n \"gradient-yellow\": \"border border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl\",\n \"gradient-purple\": \"border border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl\",\n \"gradient-teal\": \"border border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl\",\n \"gradient-indigo\": \"border border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl\",\n \"gradient-pink\": \"border border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl\",\n \"gradient-orange\": \"border border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl\",\n },\n size: {\n sm: \"gap-2 p-3 text-sm\",\n md: \"gap-3 p-4 text-sm\",\n lg: \"gap-4 p-6 text-base\",\n },\n rounded: {\n sm: \"rounded-lg\",\n md: \"rounded-xl\",\n lg: \"rounded-2xl\",\n full: \"rounded-3xl\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n rounded: \"md\",\n },\n },\n);\n\nexport const cardHeaderVariants = cva(\n \"flex flex-col gap-1 border-b border-white/10 pb-3\",\n {\n variants: {\n size: {\n sm: \"pb-2\",\n md: \"pb-3\",\n lg: \"pb-4\",\n },\n },\n defaultVariants: { size: \"md\" },\n },\n);\n\nexport const cardFooterVariants = cva(\n \"flex flex-col gap-2 border-t border-white/10 pt-3\",\n {\n variants: {\n size: {\n sm: \"pt-2\",\n md: \"pt-3\",\n lg: \"pt-4\",\n },\n },\n defaultVariants: { size: \"md\" },\n },\n);\n\nexport const cardTitleVariants = cva(\"font-semibold tracking-tight text-slate-50\", {\n variants: {\n size: {\n sm: \"text-sm\",\n md: \"text-base\",\n lg: \"text-lg\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n\nexport const cardDescriptionVariants = cva(\"text-slate-400\", {\n variants: {\n size: {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { HTMLMotionProps } from 'framer-motion';
|
|
4
|
+
import { ReactNode, Ref, HTMLAttributes } from 'react';
|
|
5
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
6
|
+
|
|
7
|
+
declare const cardVariants: (props?: ({
|
|
8
|
+
appearance?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | "elevated" | null | undefined;
|
|
9
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
10
|
+
rounded?: "sm" | "md" | "lg" | "full" | null | undefined;
|
|
11
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
12
|
+
declare const cardHeaderVariants: (props?: ({
|
|
13
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
14
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
15
|
+
declare const cardFooterVariants: (props?: ({
|
|
16
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
17
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
18
|
+
declare const cardTitleVariants: (props?: ({
|
|
19
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
20
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
21
|
+
declare const cardDescriptionVariants: (props?: ({
|
|
22
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
23
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
24
|
+
|
|
25
|
+
type CardAnimation = "none" | "lift" | "glow" | "tilt";
|
|
26
|
+
type CardVariantProps = VariantProps<typeof cardVariants>;
|
|
27
|
+
type CardProps = CardVariantProps & Omit<HTMLMotionProps<"article">, "children"> & {
|
|
28
|
+
animation?: CardAnimation;
|
|
29
|
+
children?: ReactNode;
|
|
30
|
+
};
|
|
31
|
+
type CardSectionProps = {
|
|
32
|
+
className?: string;
|
|
33
|
+
children?: ReactNode;
|
|
34
|
+
};
|
|
35
|
+
type CardTitleProps = {
|
|
36
|
+
as?: "h2" | "h3" | "h4" | "h5" | "h6";
|
|
37
|
+
className?: string;
|
|
38
|
+
children?: ReactNode;
|
|
39
|
+
ref?: Ref<HTMLHeadingElement>;
|
|
40
|
+
} & Omit<HTMLAttributes<HTMLHeadingElement>, "className" | "children">;
|
|
41
|
+
type CardDescriptionProps = {
|
|
42
|
+
as?: "p" | "span" | "div";
|
|
43
|
+
className?: string;
|
|
44
|
+
children?: ReactNode;
|
|
45
|
+
ref?: Ref<HTMLElement>;
|
|
46
|
+
} & Omit<HTMLAttributes<HTMLElement>, "className" | "children">;
|
|
47
|
+
|
|
48
|
+
declare function Card(props: CardProps): react_jsx_runtime.JSX.Element;
|
|
49
|
+
declare namespace Card {
|
|
50
|
+
var displayName: string;
|
|
51
|
+
}
|
|
52
|
+
declare function CardHeader({ className, children }: CardSectionProps): react_jsx_runtime.JSX.Element;
|
|
53
|
+
declare namespace CardHeader {
|
|
54
|
+
var displayName: string;
|
|
55
|
+
}
|
|
56
|
+
declare function CardBody({ className, children }: CardSectionProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
declare namespace CardBody {
|
|
58
|
+
var displayName: string;
|
|
59
|
+
}
|
|
60
|
+
declare function CardFooter({ className, children }: CardSectionProps): react_jsx_runtime.JSX.Element;
|
|
61
|
+
declare namespace CardFooter {
|
|
62
|
+
var displayName: string;
|
|
63
|
+
}
|
|
64
|
+
declare function CardTitle({ className, children, as, ref, ...rest }: CardTitleProps): react_jsx_runtime.JSX.Element;
|
|
65
|
+
declare namespace CardTitle {
|
|
66
|
+
var displayName: string;
|
|
67
|
+
}
|
|
68
|
+
declare function CardDescription({ className, children, as, ref, ...rest }: CardDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
69
|
+
declare namespace CardDescription {
|
|
70
|
+
var displayName: string;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
type CardPresetMotionProps = Pick<HTMLMotionProps<"article">, "style" | "transition" | "whileHover" | "whileTap">;
|
|
74
|
+
type CardAnimationPresets = Record<CardAnimation, CardPresetMotionProps>;
|
|
75
|
+
declare const cardAnimationPresets: CardAnimationPresets;
|
|
76
|
+
|
|
77
|
+
export { Card, type CardAnimation, CardBody, CardDescription, type CardDescriptionProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, CardTitle, type CardTitleProps, cardAnimationPresets, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants };
|