85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import type * as React from "react"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
import { cn } from "cn"
|
|
import {
|
|
Button as ButtonPrimitive,
|
|
Link as LinkPrimitive,
|
|
type ButtonProps as ButtonPrimitiveProps,
|
|
type LinkProps as LinkPrimitiveProps,
|
|
} from "react-aria-components"
|
|
|
|
const buttonVariants = cva(
|
|
"cn-button group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "cn-button-variant-default",
|
|
outline: "cn-button-variant-outline",
|
|
secondary: "cn-button-variant-secondary",
|
|
ghost: "cn-button-variant-ghost",
|
|
destructive: "cn-button-variant-destructive",
|
|
link: "cn-button-variant-link",
|
|
},
|
|
size: {
|
|
default: "cn-button-size-default",
|
|
xs: "cn-button-size-xs",
|
|
sm: "cn-button-size-sm",
|
|
lg: "cn-button-size-lg",
|
|
icon: "cn-button-size-icon",
|
|
"icon-xs": "cn-button-size-icon-xs",
|
|
"icon-sm": "cn-button-size-icon-sm",
|
|
"icon-lg": "cn-button-size-icon-lg",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "default",
|
|
},
|
|
}
|
|
)
|
|
|
|
function Button({
|
|
className,
|
|
variant = "default",
|
|
size = "default",
|
|
...props
|
|
}: Omit<ButtonPrimitiveProps, "className"> &
|
|
React.RefAttributes<HTMLButtonElement> &
|
|
VariantProps<typeof buttonVariants> & {
|
|
className?: string
|
|
}) {
|
|
return (
|
|
<ButtonPrimitive
|
|
data-slot="button"
|
|
data-variant={variant}
|
|
data-size={size}
|
|
className={cn(buttonVariants({ variant, size, className }))}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function LinkButton({
|
|
className,
|
|
variant = "default",
|
|
size = "default",
|
|
...props
|
|
}: Omit<LinkPrimitiveProps, "className"> &
|
|
VariantProps<typeof buttonVariants> & {
|
|
className?: string
|
|
}) {
|
|
return (
|
|
<LinkPrimitive
|
|
data-slot="button"
|
|
data-variant={variant}
|
|
data-size={size}
|
|
className={cn(buttonVariants({ variant, size, className }))}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { Button, LinkButton, buttonVariants }
|