LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-07 20:37:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(demo): migrate to tailwind v4 (#4855)

Browse Source
This commit is contained in:
Alex Yang
2025-09-23 14:50:49 -07:00
committed by GitHub
parent 7cbabaa466
commit 9c1a2719ed
26 changed files with 138 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/nextjs/app/(auth)/forget-password/page.tsx
View File

@@ -76,7 +76,7 @@ export default function Component() {
return ( return (
<main className="flex flex-col items-center justify-center min-h-[calc(100vh-10rem)]"> <main className="flex flex-col items-center justify-center min-h-[calc(100vh-10rem)]">
{/* Radial gradient for the container to give a faded look */} {/* Radial gradient for the container to give a faded look */}
<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div> <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white mask-[radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
<Card className="w-[350px]"> <Card className="w-[350px]">
<CardHeader> <CardHeader>
<CardTitle>Forgot password</CardTitle> <CardTitle>Forgot password</CardTitle>

2
demo/nextjs/app/accept-invitation/[id]/page.tsx
View File

@@ -87,7 +87,7 @@ export default function InvitationPage() {
return ( return (
<div className="min-h-[80vh] flex items-center justify-center"> <div className="min-h-[80vh] flex items-center justify-center">
<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div> <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white mask-[radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
{invitation ? ( {invitation ? (
<Card className="w-full max-w-md"> <Card className="w-full max-w-md">
<CardHeader> <CardHeader>

8
demo/nextjs/app/dashboard/change-plan.tsx
View File

@@ -27,7 +27,7 @@ function Component(props: { currentPlan?: string; isTrial?: boolean }) {
className={cn( className={cn(
"gap-2", "gap-2",
!props.currentPlan && !props.currentPlan &&
" bg-gradient-to-br from-purple-100 to-stone-300", " bg-linear-to-br from-purple-100 to-stone-300",
)} )}
> >
{props.currentPlan ? ( {props.currentPlan ? (
@@ -67,7 +67,7 @@ function Component(props: { currentPlan?: string; isTrial?: boolean }) {
value={selectedPlan} value={selectedPlan}
onValueChange={(value) => setSelectedPlan(value)} onValueChange={(value) => setSelectedPlan(value)}
> >
<div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent"> <div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent">
<RadioGroupItem <RadioGroupItem
value="plus" value="plus"
id={`${id}-1`} id={`${id}-1`}
@@ -84,7 +84,7 @@ function Component(props: { currentPlan?: string; isTrial?: boolean }) {
</p> </p>
</div> </div>
</div> </div>
<div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent"> <div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent">
<RadioGroupItem <RadioGroupItem
value="pro" value="pro"
id={`${id}-2`} id={`${id}-2`}
@@ -101,7 +101,7 @@ function Component(props: { currentPlan?: string; isTrial?: boolean }) {
</p> </p>
</div> </div>
</div> </div>
<div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent"> <div className="relative flex w-full items-center gap-2 rounded-lg border border-input px-4 py-3 shadow-sm shadow-black/5 has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent">
<RadioGroupItem <RadioGroupItem
value="enterprise" value="enterprise"
id={`${id}-3`} id={`${id}-3`}

4
demo/nextjs/app/dashboard/organization-card.tsx
View File

@@ -140,7 +140,7 @@ export function OrganizationCard(props: {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex gap-8 flex-col md:flex-row"> <div className="flex gap-8 flex-col md:flex-row">
<div className="flex flex-col gap-2 flex-grow"> <div className="flex flex-col gap-2 grow">
<p className="font-medium border-b-2 border-b-foreground/10"> <p className="font-medium border-b-2 border-b-foreground/10">
Members Members
</p> </p>
@@ -202,7 +202,7 @@ export function OrganizationCard(props: {
)} )}
</div> </div>
</div> </div>
<div className="flex flex-col gap-2 flex-grow"> <div className="flex flex-col gap-2 grow">
<p className="font-medium border-b-2 border-b-foreground/10"> <p className="font-medium border-b-2 border-b-foreground/10">
Invites Invites
</p> </p>

4
demo/nextjs/app/dashboard/upgrade-button.tsx
View File

@@ -9,7 +9,7 @@ export default function UpgradeButton() {
return ( return (
<motion.button <motion.button
className="relative overflow-hidden px-6 py-3 rounded-md bg-gradient-to-r from-gray-900 to-black text-white font-bold text-lg shadow-lg transition-all duration-300 ease-out transform hover:scale-105 hover:shadow-xl" className="relative overflow-hidden px-6 py-3 rounded-md bg-linear-to-r from-gray-900 to-black text-white font-bold text-lg shadow-lg transition-all duration-300 ease-out transform hover:scale-105 hover:shadow-xl"
onHoverStart={() => setIsHovered(true)} onHoverStart={() => setIsHovered(true)}
onHoverEnd={() => setIsHovered(false)} onHoverEnd={() => setIsHovered(false)}
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
@@ -20,7 +20,7 @@ export default function UpgradeButton() {
Upgrade to Pro Upgrade to Pro
</span> </span>
<motion.div <motion.div
className="absolute inset-0 bg-gradient-to-r from-gray-800 to-gray-700" className="absolute inset-0 bg-linear-to-r from-gray-800 to-gray-700"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: isHovered ? 1 : 0 }} animate={{ opacity: isHovered ? 1 : 0 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}

2
demo/nextjs/app/features.tsx
View File

@@ -28,7 +28,7 @@ const Card = ({
<div <div
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)} onMouseLeave={() => setHovered(false)}
className="border border-black/[0.2] group/canvas-card flex items-center justify-center dark:border-white/[0.2] max-w-sm w-full mx-auto p-4 relative h-[18rem]" className="border border-black/20 group/canvas-card flex items-center justify-center dark:border-white/20 max-w-sm w-full mx-auto p-4 relative h-72"
> >
<Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" /> <Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />
<Icon className="absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black" /> <Icon className="absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black" />

107
demo/nextjs/app/globals.css
View File

@@ -1,63 +1,62 @@
@import "tailwindcss"; @import "tailwindcss";
@config "../tailwind.config.ts";
@import "tw-animate-css"; @import "tw-animate-css";
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
@layer base { :root {
:root { --background: hsl(0 0% 100%);
--background: hsl(0 0% 100%); --foreground: hsl(20 14.3% 4.1%);
--foreground: hsl(20 14.3% 4.1%); --card: hsl(0 0% 100%);
--card: hsl(0 0% 100%); --card-foreground: hsl(20 14.3% 4.1%);
--card-foreground: hsl(20 14.3% 4.1%); --popover: hsl(0 0% 100%);
--popover: hsl(0 0% 100%); --popover-foreground: hsl(20 14.3% 4.1%);
--popover-foreground: hsl(20 14.3% 4.1%); --primary: hsl(24 9.8% 10%);
--primary: hsl(24 9.8% 10%); --primary-foreground: hsl(60 9.1% 97.8%);
--primary-foreground: hsl(60 9.1% 97.8%); --secondary: hsl(60 4.8% 95.9%);
--secondary: hsl(60 4.8% 95.9%); --secondary-foreground: hsl(24 9.8% 10%);
--secondary-foreground: hsl(24 9.8% 10%); --muted: hsl(60 4.8% 95.9%);
--muted: hsl(60 4.8% 95.9%); --muted-foreground: hsl(25 5.3% 44.7%);
--muted-foreground: hsl(25 5.3% 44.7%); --accent: hsl(60 4.8% 95.9%);
--accent: hsl(60 4.8% 95.9%); --accent-foreground: hsl(24 9.8% 10%);
--accent-foreground: hsl(24 9.8% 10%); --destructive: hsl(0 84.2% 60.2%);
--destructive: hsl(0 84.2% 60.2%); --destructive-foreground: hsl(60 9.1% 97.8%);
--destructive-foreground: hsl(60 9.1% 97.8%); --border: hsl(20 5.9% 90%);
--border: hsl(20 5.9% 90%); --input: hsl(20 5.9% 90%);
--input: hsl(20 5.9% 90%); --ring: hsl(20 14.3% 4.1%);
--ring: hsl(20 14.3% 4.1%); --radius: 0rem;
--radius: 0rem; --chart-1: hsl(12 76% 61%);
--chart-1: hsl(12 76% 61%); --chart-2: hsl(173 58% 39%);
--chart-2: hsl(173 58% 39%); --chart-3: hsl(197 37% 24%);
--chart-3: hsl(197 37% 24%); --chart-4: hsl(43 74% 66%);
--chart-4: hsl(43 74% 66%); --chart-5: hsl(27 87% 67%);
--chart-5: hsl(27 87% 67%); }
}
.dark { .dark {
--background: hsl(20 14.3% 4.1%); --background: hsl(20 14.3% 4.1%);
--foreground: hsl(60 9.1% 97.8%); --foreground: hsl(60 9.1% 97.8%);
--card: hsl(20 14.3% 4.1%); --card: hsl(20 14.3% 4.1%);
--card-foreground: hsl(60 9.1% 97.8%); --card-foreground: hsl(60 9.1% 97.8%);
--popover: hsl(20 14.3% 4.1%); --popover: hsl(20 14.3% 4.1%);
--popover-foreground: hsl(60 9.1% 97.8%); --popover-foreground: hsl(60 9.1% 97.8%);
--primary: hsl(60 9.1% 97.8%); --primary: hsl(60 9.1% 97.8%);
--primary-foreground: hsl(24 9.8% 10%); --primary-foreground: hsl(24 9.8% 10%);
--secondary: hsl(12 6.5% 15.1%); --secondary: hsl(12 6.5% 15.1%);
--secondary-foreground: hsl(60 9.1% 97.8%); --secondary-foreground: hsl(60 9.1% 97.8%);
--muted: hsl(12 6.5% 15.1%); --muted: hsl(12 6.5% 15.1%);
--muted-foreground: hsl(24 5.4% 63.9%); --muted-foreground: hsl(24 5.4% 63.9%);
--accent: hsl(12 6.5% 15.1%); --accent: hsl(12 6.5% 15.1%);
--accent-foreground: hsl(60 9.1% 97.8%); --accent-foreground: hsl(60 9.1% 97.8%);
--destructive: hsl(0 62.8% 30.6%); --destructive: hsl(0 62.8% 30.6%);
--destructive-foreground: hsl(60 9.1% 97.8%); --destructive-foreground: hsl(60 9.1% 97.8%);
--border: hsl(12 6.5% 15.1%); --border: hsl(12 6.5% 15.1%);
--input: hsl(12 6.5% 15.1%); --input: hsl(12 6.5% 15.1%);
--ring: hsl(24 5.7% 82.9%); --ring: hsl(24 5.7% 82.9%);
--chart-1: hsl(220 70% 50%); --chart-1: hsl(220 70% 50%);
--chart-2: hsl(160 60% 45%); --chart-2: hsl(160 60% 45%);
--chart-3: hsl(30 80% 55%); --chart-3: hsl(30 80% 55%);
--chart-4: hsl(280 65% 60%); --chart-4: hsl(280 65% 60%);
--chart-5: hsl(340 75% 55%); --chart-5: hsl(340 75% 55%);
}
} }
@theme inline { @theme inline {

6
demo/nextjs/components/blocks/pricing.tsx
View File

@@ -139,12 +139,12 @@ export function Pricing({
opacity: { duration: 0.5 }, opacity: { duration: 0.5 },
}} }}
className={cn( className={cn(
`rounded-sm border-[1px] p-6 bg-background text-center lg:flex lg:flex-col lg:justify-center relative`, `rounded-sm border p-6 bg-background text-center lg:flex lg:flex-col lg:justify-center relative`,
plan.isPopular ? "border-border border-2" : "border-border", plan.isPopular ? "border-border border-2" : "border-border",
"flex flex-col", "flex flex-col",
!plan.isPopular && "mt-5", !plan.isPopular && "mt-5",
index === 0 || index === 2 index === 0 || index === 2
? "z-0 transform translate-x-0 translate-y-0 -translate-z-[50px] rotate-y-[10deg]" ? "z-0 transform translate-x-0 translate-y-0 -translate-z-[50px] rotate-y-10"
: "z-10", : "z-10",
index === 0 && "origin-right", index === 0 && "origin-right",
index === 2 && "origin-left", index === 2 && "origin-left",
@@ -196,7 +196,7 @@ export function Pricing({
<ul className="mt-5 gap-2 flex flex-col"> <ul className="mt-5 gap-2 flex flex-col">
{plan.features.map((feature, idx) => ( {plan.features.map((feature, idx) => (
<li key={idx} className="flex items-start gap-2"> <li key={idx} className="flex items-start gap-2">
<CheckIcon className="h-4 w-4 text-primary mt-1 flex-shrink-0" /> <CheckIcon className="h-4 w-4 text-primary mt-1 shrink-0" />
<span className="text-left">{feature}</span> <span className="text-left">{feature}</span>
</li> </li>
))} ))}

2
demo/nextjs/components/theme-toggle.tsx
View File

@@ -13,7 +13,7 @@ export function ThemeToggle() {
size="icon" size="icon"
onClick={() => setTheme(theme === "light" ? "dark" : "light")} onClick={() => setTheme(theme === "light" ? "dark" : "light")}
> >
<Sun className="h-[1.5rem] w-[1.3rem] dark:hidden" color="#000" /> <Sun className="h-6 w-[1.3rem] dark:hidden" color="#000" />
<Moon className="hidden h-5 w-5 dark:block" /> <Moon className="hidden h-5 w-5 dark:block" />
<span className="sr-only">Toggle theme</span> <span className="sr-only">Toggle theme</span>
</Button> </Button>

2
demo/nextjs/components/ui/canvas-reveal-effect.tsx
View File

@@ -42,7 +42,7 @@ export const CanvasRevealEffect = ({
/> />
</div> </div>
{showGradient && ( {showGradient && (
<div className="absolute inset-0 bg-gradient-to-t from-gray-950 to-[84%]" /> <div className="absolute inset-0 bg-linear-to-t from-gray-950 to-84%" />
)} )}
</div> </div>
); );

4
demo/nextjs/components/ui/chart.tsx
View File

@@ -158,7 +158,7 @@ const ChartTooltipContent = ({
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
className, className,
)} )}
> >
@@ -187,7 +187,7 @@ const ChartTooltipContent = ({
!hideIndicator && ( !hideIndicator && (
<div <div
className={cn( className={cn(
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", "shrink-0 rounded-[2px] border-border bg-(--color-bg)",
{ {
"h-2.5 w-2.5": indicator === "dot", "h-2.5 w-2.5": indicator === "dot",
"w-1": indicator === "line", "w-1": indicator === "line",

10
demo/nextjs/components/ui/context-menu.tsx
View File

@@ -56,7 +56,7 @@ const ContextMenuSubContent = ({
<ContextMenuPrimitive.SubContent <ContextMenuPrimitive.SubContent
ref={ref} ref={ref}
className={cn( className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className, className,
)} )}
{...props} {...props}
@@ -75,7 +75,7 @@ const ContextMenuContent = ({
<ContextMenuPrimitive.Content <ContextMenuPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className, className,
)} )}
{...props} {...props}
@@ -88,7 +88,7 @@ const ContextMenuItem = ({ ref, className, inset, ...props }) => (
<ContextMenuPrimitive.Item <ContextMenuPrimitive.Item
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
inset && "pl-8", inset && "pl-8",
className, className,
)} )}
@@ -111,7 +111,7 @@ const ContextMenuCheckboxItem = ({
<ContextMenuPrimitive.CheckboxItem <ContextMenuPrimitive.CheckboxItem
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className, className,
)} )}
checked={checked} checked={checked}
@@ -139,7 +139,7 @@ const ContextMenuRadioItem = ({
<ContextMenuPrimitive.RadioItem <ContextMenuPrimitive.RadioItem
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className, className,
)} )}
{...props} {...props}

14
demo/nextjs/components/ui/dropdown-menu.tsx
View File

@@ -42,7 +42,7 @@ function DropdownMenuContent({
data-slot="dropdown-menu-content" data-slot="dropdown-menu-content"
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className, className,
)} )}
{...props} {...props}
@@ -74,7 +74,7 @@ function DropdownMenuItem({
data-inset={inset} data-inset={inset}
data-variant={variant} data-variant={variant}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:text-destructive-foreground! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className, className,
)} )}
{...props} {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
<DropdownMenuPrimitive.CheckboxItem <DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item" data-slot="dropdown-menu-checkbox-item"
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className, className,
)} )}
checked={checked} checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
<DropdownMenuPrimitive.RadioItem <DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item" data-slot="dropdown-menu-radio-item"
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className, className,
)} )}
{...props} {...props}
@@ -155,7 +155,7 @@ function DropdownMenuLabel({
data-slot="dropdown-menu-label" data-slot="dropdown-menu-label"
data-inset={inset} data-inset={inset}
className={cn( className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
className, className,
)} )}
{...props} {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger" data-slot="dropdown-menu-sub-trigger"
data-inset={inset} data-inset={inset}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8",
className, className,
)} )}
{...props} {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
<DropdownMenuPrimitive.SubContent <DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content" data-slot="dropdown-menu-sub-content"
className={cn( className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
className, className,
)} )}
{...props} {...props}

2
demo/nextjs/components/ui/input-otp.tsx
View File

@@ -17,7 +17,7 @@ const InputOTP = ({
<OTPInput <OTPInput
ref={ref} ref={ref}
containerClassName={cn( containerClassName={cn(
"flex items-center gap-2 has-[:disabled]:opacity-50", "flex items-center gap-2 has-disabled:opacity-50",
containerClassName, containerClassName,
)} )}
className={cn("disabled:cursor-not-allowed", className)} className={cn("disabled:cursor-not-allowed", className)}

10
demo/nextjs/components/ui/menubar.tsx
View File

@@ -82,7 +82,7 @@ const MenubarSubContent = ({
<MenubarPrimitive.SubContent <MenubarPrimitive.SubContent
ref={ref} ref={ref}
className={cn( className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className, className,
)} )}
{...props} {...props}
@@ -107,7 +107,7 @@ const MenubarContent = ({
alignOffset={alignOffset} alignOffset={alignOffset}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className, className,
)} )}
{...props} {...props}
@@ -120,7 +120,7 @@ const MenubarItem = ({ ref, className, inset, ...props }) => (
<MenubarPrimitive.Item <MenubarPrimitive.Item
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
inset && "pl-8", inset && "pl-8",
className, className,
)} )}
@@ -141,7 +141,7 @@ const MenubarCheckboxItem = ({
<MenubarPrimitive.CheckboxItem <MenubarPrimitive.CheckboxItem
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className, className,
)} )}
checked={checked} checked={checked}
@@ -168,7 +168,7 @@ const MenubarRadioItem = ({
<MenubarPrimitive.RadioItem <MenubarPrimitive.RadioItem
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className, className,
)} )}
{...props} {...props}

8
demo/nextjs/components/ui/navigation-menu.tsx
View File

@@ -48,7 +48,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
const NavigationMenuItem = NavigationMenuPrimitive.Item; const NavigationMenuItem = NavigationMenuPrimitive.Item;
const navigationMenuTriggerStyle = cva( const navigationMenuTriggerStyle = cva(
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50", "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
); );
const NavigationMenuTrigger = ({ const NavigationMenuTrigger = ({
@@ -68,7 +68,7 @@ const NavigationMenuTrigger = ({
> >
{children}{" "} {children}{" "}
<ChevronDownIcon <ChevronDownIcon
className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180" className="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
aria-hidden="true" aria-hidden="true"
/> />
</NavigationMenuPrimitive.Trigger> </NavigationMenuPrimitive.Trigger>
@@ -109,7 +109,7 @@ const NavigationMenuViewport = ({
<div className={cn("absolute left-0 top-full flex justify-center")}> <div className={cn("absolute left-0 top-full flex justify-center")}>
<NavigationMenuPrimitive.Viewport <NavigationMenuPrimitive.Viewport
className={cn( className={cn(
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)",
className, className,
)} )}
ref={ref} ref={ref}
@@ -132,7 +132,7 @@ const NavigationMenuIndicator = ({
<NavigationMenuPrimitive.Indicator <NavigationMenuPrimitive.Indicator
ref={ref} ref={ref}
className={cn( className={cn(
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in", "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
className, className,
)} )}
{...props} {...props}

4
demo/nextjs/components/ui/scroll-area.tsx
View File

@@ -45,9 +45,9 @@ const ScrollBar = ({
className={cn( className={cn(
"flex touch-none select-none transition-colors", "flex touch-none select-none transition-colors",
orientation === "vertical" && orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]", "h-full w-2.5 border-l border-l-transparent p-px",
orientation === "horizontal" && orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]", "h-2.5 flex-col border-t border-t-transparent p-px",
className, className,
)} )}
{...props} {...props}

8
demo/nextjs/components/ui/select.tsx
View File

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className, className,
)} )}
{...props} {...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content <SelectPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" && position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className, className,
@@ -88,7 +88,7 @@ const SelectContent = React.forwardRef<
className={cn( className={cn(
"p-1", "p-1",
position === "popper" && position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]", "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)",
)} )}
> >
{children} {children}
@@ -118,7 +118,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item <SelectPrimitive.Item
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className, className,
)} )}
{...props} {...props}

2
demo/nextjs/components/ui/separator.tsx
View File

@@ -20,7 +20,7 @@ const Separator = ({
orientation={orientation} orientation={orientation}
className={cn( className={cn(
"shrink-0 bg-border", "shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
className, className,
)} )}
{...props} {...props}

4
demo/nextjs/components/ui/tabs2.tsx
View File

@@ -40,7 +40,7 @@ export const Tabs = ({
<> <>
<div <div
className={cn( className={cn(
"flex flex-row items-center justify-start mt-0 [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar border-x w-full border-t max-w-max bg-opacity-0", "flex flex-row items-center justify-start mt-0 perspective-[1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar border-x w-full border-t max-w-max bg-opacity-0",
containerClassName, containerClassName,
)} )}
> >
@@ -133,7 +133,7 @@ export const FadeInDiv = ({
}, },
}} }}
className={cn( className={cn(
"w-50 h-full", "w-full h-full",
isActive(tab) ? "" : "hidden", isActive(tab) ? "" : "hidden",
className, className,
)} )}

4
demo/nextjs/components/ui/toast.tsx
View File

@@ -20,7 +20,7 @@ const ToastViewport = ({
<ToastPrimitives.Viewport <ToastPrimitives.Viewport
ref={ref} ref={ref}
className={cn( className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
className, className,
)} )}
{...props} {...props}
@@ -29,7 +29,7 @@ const ToastViewport = ({
ToastViewport.displayName = ToastPrimitives.Viewport.displayName; ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
const toastVariants = cva( const toastVariants = cva(
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
{ {
variants: { variants: {
variant: { variant: {

2
demo/nextjs/components/ui/tooltip.tsx
View File

@@ -52,7 +52,7 @@ function TooltipContent({
{...props} {...props}
> >
{children} {children}
<TooltipPrimitive.Arrow className="-z-10 relative bg-primary dark:bg-stone-900 dark:fill-stone-900 fill-primary size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" /> <TooltipPrimitive.Arrow className="-z-10 relative bg-primary dark:bg-stone-900 dark:fill-stone-900 fill-primary size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
</TooltipPrimitive.Content> </TooltipPrimitive.Content>
</TooltipPrimitive.Portal> </TooltipPrimitive.Portal>
); );

2
demo/nextjs/components/wrapper.tsx
View File

@@ -8,7 +8,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
export function Wrapper(props: { children: React.ReactNode }) { export function Wrapper(props: { children: React.ReactNode }) {
return ( return (
<div className="min-h-screen w-full dark:bg-black bg-white dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2] relative flex justify-center"> <div className="min-h-screen w-full dark:bg-black bg-white dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2] relative flex justify-center">
<div className="absolute pointer-events-none inset-0 md:flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] hidden"></div> <div className="absolute pointer-events-none inset-0 md:flex items-center justify-center dark:bg-black bg-white mask-[radial-gradient(ellipse_at_center,transparent_20%,black)] hidden"></div>
<div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-full lg:w-8/12 px-4 md:px-1"> <div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-full lg:w-8/12 px-4 md:px-1">
<Link href="/"> <Link href="/">
<div className="flex gap-2 cursor-pointer"> <div className="flex gap-2 cursor-pointer">

6
demo/nextjs/package.json
View File

@@ -11,8 +11,8 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@better-auth/stripe": "workspace:*",
"@better-auth/sso": "workspace:*", "@better-auth/sso": "workspace:*",
"@better-auth/stripe": "workspace:*",
"@better-fetch/fetch": "catalog:", "@better-fetch/fetch": "catalog:",
"@hookform/resolvers": "^5.2.1", "@hookform/resolvers": "^5.2.1",
"@libsql/client": "^0.15.14", "@libsql/client": "^0.15.14",
@@ -84,7 +84,6 @@
"shiki": "^3.12.2", "shiki": "^3.12.2",
"sonner": "^2.0.7", "sonner": "^2.0.7",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.3.1",
"tailwindcss-animate": "^1.0.7",
"three": "^0.180.0", "three": "^0.180.0",
"ua-parser-js": "^2.0.4", "ua-parser-js": "^2.0.4",
"vaul": "^1.1.2", "vaul": "^1.1.2",
@@ -98,6 +97,7 @@
"@types/three": "^0.180.0", "@types/three": "^0.180.0",
"@types/ua-parser-js": "^0.7.39", "@types/ua-parser-js": "^0.7.39",
"postcss": "^8.5.6", "postcss": "^8.5.6",
"tailwindcss": "^4.1.13" "tailwindcss": "^4.1.13",
"tw-animate-css": "^1.3.8"
} }
} }

41
demo/nextjs/tailwind.config.ts
View File

@@ -8,7 +8,7 @@ const {
} = require("tailwindcss/lib/util/flattenColorPalette"); } = require("tailwindcss/lib/util/flattenColorPalette");
const config = { const config = {
darkMode: ["class"], darkMode: ["class", '[data-theme="dark"]'],
content: [ content: [
"./pages/**/*.{ts,tsx}", "./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}",
@@ -26,38 +26,38 @@ const config = {
}, },
extend: { extend: {
colors: { colors: {
border: "hsl(var(--border))", border: "var(--border)",
input: "hsl(var(--input))", input: "var(--input)",
ring: "hsl(var(--ring))", ring: "var(--ring)",
background: "hsl(var(--background))", background: "var(--background)",
foreground: "hsl(var(--foreground))", foreground: "var(--foreground)",
primary: { primary: {
DEFAULT: "hsl(var(--primary))", DEFAULT: "var(--primary)",
foreground: "hsl(var(--primary-foreground))", foreground: "var(--primary-foreground)",
}, },
secondary: { secondary: {
DEFAULT: "hsl(var(--secondary))", DEFAULT: "var(--secondary)",
foreground: "hsl(var(--secondary-foreground))", foreground: "var(--secondary-foreground)",
}, },
destructive: { destructive: {
DEFAULT: "hsl(var(--destructive))", DEFAULT: "var(--destructive)",
foreground: "hsl(var(--destructive-foreground))", foreground: "var(--destructive-foreground)",
}, },
muted: { muted: {
DEFAULT: "hsl(var(--muted))", DEFAULT: "var(--muted)",
foreground: "hsl(var(--muted-foreground))", foreground: "var(--muted-foreground)",
}, },
accent: { accent: {
DEFAULT: "hsl(var(--accent))", DEFAULT: "var(--accent)",
foreground: "hsl(var(--accent-foreground))", foreground: "var(--accent-foreground)",
}, },
popover: { popover: {
DEFAULT: "hsl(var(--popover))", DEFAULT: "var(--popover)",
foreground: "hsl(var(--popover-foreground))", foreground: "var(--popover-foreground)",
}, },
card: { card: {
DEFAULT: "hsl(var(--card))", DEFAULT: "var(--card)",
foreground: "hsl(var(--card-foreground))", foreground: "var(--card-foreground)",
}, },
}, },
borderRadius: { borderRadius: {
@@ -85,7 +85,6 @@ const config = {
}, },
}, },
plugins: [ plugins: [
require("tailwindcss-animate"),
addVariablesForColors, addVariablesForColors,
function ({ matchUtilities, theme }: any) { function ({ matchUtilities, theme }: any) {
matchUtilities( matchUtilities(

13
pnpm-lock.yaml generated
View File

@@ -274,9 +274,6 @@ importers:
tailwind-merge: tailwind-merge:
specifier: ^3.3.1 specifier: ^3.3.1
version: 3.3.1 version: 3.3.1
tailwindcss-animate:
specifier: ^1.0.7
version: 1.0.7(tailwindcss@4.1.13)
three: three:
specifier: ^0.180.0 specifier: ^0.180.0
version: 0.180.0 version: 0.180.0
@@ -314,6 +311,9 @@ importers:
tailwindcss: tailwindcss:
specifier: ^4.1.13 specifier: ^4.1.13
version: 4.1.13 version: 4.1.13
tw-animate-css:
specifier: ^1.3.8
version: 1.3.8
docs: docs:
dependencies: dependencies:
@@ -11404,6 +11404,9 @@ packages:
resolution: {integrity: sha512-gxToHmi9oTBNB05UjUsrWf0OyN5ZXtD0apOarC1KIx232Vp3WimRNy3810QzeNSgyD5rsaIDXlxlbnOzlouo+w==} resolution: {integrity: sha512-gxToHmi9oTBNB05UjUsrWf0OyN5ZXtD0apOarC1KIx232Vp3WimRNy3810QzeNSgyD5rsaIDXlxlbnOzlouo+w==}
hasBin: true hasBin: true
tw-animate-css@1.3.8:
resolution: {integrity: sha512-Qrk3PZ7l7wUcGYhwZloqfkWCmaXZAoqjkdbIDvzfGshwGtexa/DAs9koXxIkrpEasyevandomzCBAV1Yyop5rw==}
type-detect@4.0.8: type-detect@4.0.8:
resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==} resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
engines: {node: '>=4'} engines: {node: '>=4'}
@@ -16543,7 +16546,7 @@ snapshots:
dependencies: dependencies:
'@jridgewell/remapping': 2.3.5 '@jridgewell/remapping': 2.3.5
enhanced-resolve: 5.18.3 enhanced-resolve: 5.18.3
jiti: 2.5.1 jiti: 2.6.0
lightningcss: 1.30.1 lightningcss: 1.30.1
magic-string: 0.30.19 magic-string: 0.30.19
source-map-js: 1.2.1 source-map-js: 1.2.1
@@ -24677,6 +24680,8 @@ snapshots:
turbo-windows-64: 2.5.6 turbo-windows-64: 2.5.6
turbo-windows-arm64: 2.5.6 turbo-windows-arm64: 2.5.6
tw-animate-css@1.3.8: {}
type-detect@4.0.8: {} type-detect@4.0.8: {}
type-fest@0.21.3: {} type-fest@0.21.3: {}