1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { twMerge } from "tailwind-merge"
4import { clsx, type ClassValue } from "clsx"
5
6function cn(...inputs: ClassValue[]) {
7  return twMerge(clsx(inputs))
8}
9
10/**
11 * Variants for <GlassCard />.
12 *
13 * Generated from the Glass UI playground.
14 * Tweak any value — every utility here is NativeWind-compatible.
15 */
16export const glassCardVariants = cva("overflow-hidden", {
17  variants: {
18    theme: {
19      light: "",
20      dark: "",
21    },
22    blur: {
23      none: "",
24      sm: "backdrop-blur-sm",
25      md: "backdrop-blur-md",
26      lg: "backdrop-blur-lg",
27      xl: "backdrop-blur-xl",
28    },
29    rounded: {
30      none: "rounded-none",
31      md: "rounded-md",
32      lg: "rounded-lg",
33      xl: "rounded-xl",
34      "2xl": "rounded-2xl",
35      "3xl": "rounded-3xl",
36      full: "rounded-full",
37    },
38    intensity: {
39      subtle: "",
40      medium: "",
41      strong: "",
42    },
43    border: {
44      none: "",
45      subtle: "border",
46      strong: "border-2",
47    },
48    padding: {
49      sm: "p-4",
50      md: "p-6",
51      lg: "p-8",
52    },
53    shadow: {
54      none: "",
55      sm: "shadow-sm",
56      md: "shadow-md",
57      lg: "shadow-xl",
58    },
59    tint: {
60        none: "",
61        blue: "",
62        pink: "",
63        orange: "",
64        teal: "",
65      },
66  },
67  compoundVariants: [
68    { theme: "light", intensity: "subtle", className: "bg-white/10" },
69    { theme: "light", intensity: "medium", className: "bg-white/20" },
70    { theme: "light", intensity: "strong", className: "bg-white/40" },
71    { theme: "dark", intensity: "subtle", className: "bg-black/20" },
72    { theme: "dark", intensity: "medium", className: "bg-black/40" },
73    { theme: "dark", intensity: "strong", className: "bg-black/60" },
74    { theme: "light", border: "subtle", className: "border-white/30" },
75    { theme: "light", border: "strong", className: "border-white/50" },
76    { theme: "dark", border: "subtle", className: "border-white/10" },
77    { theme: "dark", border: "strong", className: "border-white/20" },
78      { tint: "blue", intensity: "subtle", className: "bg-blue-500/15" },
79      { tint: "blue", intensity: "medium", className: "bg-blue-500/25" },
80      { tint: "blue", intensity: "strong", className: "bg-blue-500/40" },
81      { tint: "pink", intensity: "subtle", className: "bg-pink-500/15" },
82      { tint: "pink", intensity: "medium", className: "bg-pink-500/25" },
83      { tint: "pink", intensity: "strong", className: "bg-pink-500/40" },
84      { tint: "orange", intensity: "subtle", className: "bg-orange-500/20" },
85      { tint: "orange", intensity: "medium", className: "bg-orange-500/30" },
86      { tint: "orange", intensity: "strong", className: "bg-orange-500/45" },
87      { tint: "teal", intensity: "subtle", className: "bg-teal-500/15" },
88      { tint: "teal", intensity: "medium", className: "bg-teal-500/25" },
89      { tint: "teal", intensity: "strong", className: "bg-teal-500/40" },
90  ],
91  defaultVariants: {
92    theme: "light",
93    blur: "md",
94    rounded: "2xl",
95    intensity: "medium",
96    border: "subtle",
97    padding: "md",
98    shadow: "md",
99    tint: "none",
100  },
101})
102
103export interface GlassCardProps
104  extends React.HTMLAttributes<HTMLDivElement>,
105    VariantProps<typeof glassCardVariants> {}
106
107export const GlassCard = React.forwardRef<HTMLDivElement, GlassCardProps>(
108  ({ className, theme, blur, rounded, intensity, border, padding, shadow, tint, ...props }, ref) => {
109    return (
110      <div
111        ref={ref}
112        className={cn(glassCardVariants({ theme, blur, rounded, intensity, border, padding, shadow, tint }), className)}
113        {...props}
114      />
115    )
116  }
117)
118GlassCard.displayName = "GlassCard"
119
120/* ---------- Usage ----------
121import { GlassCard } from "./components/ui/glass-card"
122import { Text } from "react-native"
123
124<GlassCard theme="light" blur="md" rounded="2xl" tint="none">
125  <Text className="text-base font-semibold text-neutral-900">
126    Glass Card
127  </Text>
128</GlassCard>
129---------------------------- */