experimental form

This commit is contained in:
2025-06-25 17:51:25 +05:30
parent 7645889297
commit e82685c7df
18 changed files with 2801 additions and 27 deletions

View File

@@ -1,37 +1,37 @@
import * as React from "react"
import type * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@workspace/ui/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-4 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transform active:scale-95",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow-xs shadow-foreground/20 hover:bg-primary/90",
"bg-primary text-primary-foreground shadow-lg shadow-primary/25 hover:bg-primary/90 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5 border border-primary/20",
destructive:
"bg-destructive text-destructive-foreground shadow-xs shadow-foreground/20 hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
"bg-destructive text-destructive-foreground shadow-lg shadow-destructive/25 hover:bg-destructive/90 hover:shadow-xl hover:shadow-destructive/30 hover:-translate-y-0.5 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 border border-destructive/20",
outline:
"bg-background border border-border text-foreground shadow shadow-foreground/20 transition-all duration-300 ease-out group relative overflow-hidden hover:bg-muted hover:border-muted-foreground hover:shadow-lg hover:shadow-primary/20 hover:scale-103 active:scale-98 active:shadow-md focus:ring-2 focus:ring-primary focus:ring-offset-2",
"bg-background border-2 border-border text-foreground shadow-md hover:bg-accent/10 hover:border-accent/50 hover:text-accent-foreground hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 ease-out backdrop-blur-sm",
secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
"bg-secondary text-secondary-foreground shadow-md shadow-secondary/20 hover:bg-secondary/80 hover:shadow-lg hover:-translate-y-0.5 border border-secondary/30",
ghost: "hover:bg-accent/10 hover:text-accent-foreground rounded-lg transition-all duration-200 hover:shadow-md",
link: "text-primary underline-offset-4 hover:underline hover:text-primary/80 transition-colors duration-200",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
default: "h-11 px-6 py-3 has-[>svg]:px-5",
sm: "h-9 rounded-lg gap-1.5 px-4 has-[>svg]:px-3 text-xs font-medium",
lg: "h-13 rounded-xl px-8 has-[>svg]:px-6 text-base",
icon: "size-11 rounded-xl",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
},
)
function Button({
@@ -46,13 +46,7 @@ function Button({
}) {
const Comp = asChild ? Slot : "button"
return (
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
}
export { Button, buttonVariants }