🎨 Update UI package (#1070)

Add new components and update various existing ones.
This commit is contained in:
Luke Vella 2024-03-25 15:28:24 +07:00 committed by GitHub
parent a4ffbee081
commit e6792a4283
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
33 changed files with 386 additions and 56 deletions

View file

@ -4,22 +4,22 @@ import { Loader2Icon } from "lucide-react";
import { cva, VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@rallly/ui";
import { cn } from "./lib/utils";
const buttonVariants = cva(
cn(
"inline-flex border font-medium disabled:text-muted-foreground disabled:bg-muted disabled:pointer-events-none select-none items-center justify-center whitespace-nowrap rounded-md border",
"focus-visible:ring-offset-input-background focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-indigo-100",
"inline-flex border font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap rounded-md border",
"focus:ring-offset-input-background focus:border-primary-400 focus:ring-2 focus:ring-indigo-100",
),
{
variants: {
variant: {
primary:
"border-transparent bg-primary text-white focus:ring-offset-1 shadow-sm hover:bg-primary-500 active:bg-primary-700",
"border-primary-700 bg-primary disabled:bg-gray-400 disabled:border-transparent text-primary-foreground shadow-sm hover:bg-primary-500 active:bg-primary-700",
destructive:
"bg-destructive text-destructive-foreground focus:ring-offset-1 active:bg-destructive border-destructive hover:bg-destructive/90",
default:
"rounded-md px-3.5 py-2.5 data-[state=open]:shadow-none data-[state=open]:bg-gray-100 active:bg-gray-200 focus:border-gray-300 hover:bg-gray-100 bg-gray-50",
"rounded-md px-3.5 py-2.5 data-[state=open]:shadow-none data-[state=open]:bg-gray-100 active:bg-gray-200 hover:bg-gray-100 bg-gray-50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "border-transparent hover:bg-gray-200 active:bg-gray-300",
@ -27,7 +27,7 @@ const buttonVariants = cva(
},
size: {
default: "h-9 px-2.5 gap-x-2.5 text-sm",
sm: "h-7 text-xs px-2 gap-x-1.5 rounded-md",
sm: "h-7 text-xs px-1.5 gap-x-1.5 rounded-md",
lg: "h-11 text-base gap-x-3 px-4 rounded-md",
},
},
@ -65,6 +65,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
return (
<Comp
className={cn(
"group",
buttonVariants({ variant, size }),
{
"pointer-events-none": loading,