cooterlabs 1.0.2 → 2.0.0

package/templates/alert/alert.tsx

@@ -0,0 +1,96 @@
+import * as React from "react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const alertVariants = {
+    filled: {
+        default:
+            "bg-primary-600 text-white [&_[data-slot=alert-description]]:text-white/80",
+        success:
+            "bg-success-600 text-white [&_[data-slot=alert-description]]:text-white/80",
+        info: "bg-info-600 text-white [&_[data-slot=alert-description]]:text-white/80",
+        warning:
+            "bg-warning-600 text-white [&_[data-slot=alert-description]]:text-white/80",
+        error: "bg-error-600 text-white [&_[data-slot=alert-description]]:text-white/80",
+    },
+    soft: {
+        default:
+            "border border-primary-500 bg-primary-50 text-primary-500 [&_[data-slot=alert-description]]:text-muted-foreground",
+        success:
+            "border border-success-500 bg-success-50 text-success-500 [&_[data-slot=alert-description]]:text-muted-foreground",
+        info: "border border-info-500 bg-info-50 text-info-500 [&_[data-slot=alert-description]]:text-muted-foreground",
+        warning:
+            "border border-warning-500 bg-warning-50 text-warning-500 [&_[data-slot=alert-description]]:text-muted-foreground",
+        error: "border border-error-500 bg-error-50 text-error-500 [&_[data-slot=alert-description]]:text-muted-foreground",
+    },
+}
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    severity?: keyof (typeof alertVariants)["filled"]
+    appearance?: keyof typeof alertVariants
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+    (
+        { className, severity = "default", appearance = "filled", ...props },
+        ref
+    ) => (
+        <div
+            ref={ref}
+            role="alert"
+            className={cn(
+                "relative rounded-xs p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-5 [&>svg~*]:pl-8",
+                alertVariants[appearance][severity],
+                className
+            )}
+            {...props}
+        />
+    )
+)
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+    HTMLHeadingElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h5
+        ref={ref}
+        className={cn("mb-1 text-s2 font-semibold", className)}
+        {...props}
+    />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        data-slot="alert-description"
+        className={cn("text-b3", className)}
+        {...props}
+    />
+))
+AlertDescription.displayName = "AlertDescription"
+
+const AlertActions = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "mt-3 flex items-center gap-4 text-b4 font-semibold",
+            className
+        )}
+        {...props}
+    />
+))
+AlertActions.displayName = "AlertActions"
+
+export { Alert, AlertTitle, AlertDescription, AlertActions }

package/templates/avatar/avatar.tsx

@@ -7,14 +7,31 @@ export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
 }
 
+const avatarSizes = {
+    tiny: "h-6 w-6",
+    small: "h-8 w-8",
+    medium: "h-10 w-10",
+    large: "h-12 w-12",
+    giant: "h-14 w-14",
+    "xl-giant": "h-16 w-16",
+    "xxl-giant": "h-20 w-20",
+    "xxxl-giant": "h-24 w-24",
+}
+
+export interface AvatarProps
+    extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+    size?: keyof typeof avatarSizes
+}
+
 const Avatar = React.forwardRef<
     React.ElementRef<typeof AvatarPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
+    AvatarProps
+>(({ className, size = "medium", ...props }, ref) => (
     <AvatarPrimitive.Root
         ref={ref}
         className={cn(
-            "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+            "relative flex shrink-0 overflow-hidden rounded-full",
+            avatarSizes[size],
             className
         )}
         {...props}
@@ -41,7 +58,7 @@ const AvatarFallback = React.forwardRef<
     <AvatarPrimitive.Fallback
         ref={ref}
         className={cn(
-            "flex h-full w-full items-center justify-center rounded-full bg-muted",
+            "flex h-full w-full items-center justify-center rounded-full bg-primary-100 text-label font-medium text-primary",
             className
         )}
         {...props}

package/templates/badge/badge.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { X } from "lucide-react"
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
@@ -6,31 +7,121 @@ export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
 }
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: "default" | "secondary" | "destructive" | "outline"
+const badgeVariants = {
+    filled: {
+        primary: "bg-primary-600 text-white",
+        grey: "bg-grey-600 text-white",
+        success: "bg-success-600 text-white",
+        info: "bg-info-600 text-white",
+        warning: "bg-warning-600 text-white",
+        error: "bg-error-600 text-white",
+    },
+    soft: {
+        primary: "bg-primary-50 text-primary-600",
+        grey: "bg-grey-100 text-grey-600",
+        success: "bg-success-50 text-success-600",
+        info: "bg-info-50 text-info-600",
+        warning: "bg-warning-50 text-warning-600",
+        error: "bg-error-50 text-error-600",
+    },
 }
 
-const badgeVariants = {
-    default:
-        "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-    secondary:
-        "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-    destructive:
-        "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-    outline: "text-foreground",
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    color?: keyof (typeof badgeVariants)["filled"]
+    variant?: keyof typeof badgeVariants
 }
 
-function Badge({ className, variant = "default", ...props }: BadgeProps) {
-    return (
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+    ({ className, color = "primary", variant = "filled", ...props }, ref) => (
         <div
+            ref={ref}
             className={cn(
-                "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-                badgeVariants[variant],
+                "inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 text-c2 font-medium [&_svg]:size-3 [&_svg]:shrink-0",
+                badgeVariants[variant][color],
                 className
             )}
             {...props}
         />
     )
+)
+Badge.displayName = "Badge"
+
+const chipVariants = {
+    outline: {
+        default:
+            "border border-primary-500 bg-background text-primary-600 hover:bg-accent active:bg-primary-100",
+        success:
+            "border border-success-500 bg-background text-success-600 hover:bg-success-50 active:bg-success-100",
+        info: "border border-info-500 bg-background text-info-600 hover:bg-info-50 active:bg-info-100",
+        warning:
+            "border border-warning-500 bg-background text-warning-600 hover:bg-warning-50 active:bg-warning-100",
+        error: "border border-error-500 bg-background text-error-600 hover:bg-error-50 active:bg-error-100",
+    },
+    filled: {
+        default: "bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800",
+        success: "bg-success-600 text-white hover:bg-success-700 active:bg-success-800",
+        info: "bg-info-600 text-white hover:bg-info-700 active:bg-info-800",
+        warning: "bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800",
+        error: "bg-error-600 text-white hover:bg-error-700 active:bg-error-800",
+    },
+}
+
+const chipSizes = {
+    medium: "h-10 gap-2 px-4 text-b4 [&_svg]:size-4",
+    small: "h-8 gap-1.5 px-3 text-c2 [&_svg]:size-4",
+    tiny: "h-6 gap-1 px-2 text-c3 [&_svg]:size-3",
+}
+
+export interface ChipProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    color?: keyof (typeof chipVariants)["outline"]
+    variant?: keyof typeof chipVariants
+    size?: keyof typeof chipSizes
+    selected?: boolean
+    onDismiss?: () => void
 }
 
-export { Badge }
+const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(
+    (
+        {
+            className,
+            color = "default",
+            variant = "outline",
+            size = "medium",
+            selected = false,
+            onDismiss,
+            children,
+            ...props
+        },
+        ref
+    ) => (
+        <button
+            ref={ref}
+            type="button"
+            aria-pressed={selected || undefined}
+            className={cn(
+                "inline-flex items-center justify-center whitespace-nowrap rounded-full font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:border-grey-200 disabled:bg-muted disabled:text-grey-400 [&_svg]:shrink-0",
+                chipVariants[selected ? "filled" : variant][color],
+                chipSizes[size],
+                className
+            )}
+            {...props}
+        >
+            {children}
+            {onDismiss && (
+                <X
+                    role="button"
+                    aria-label="Remove"
+                    className="cursor-pointer"
+                    onClick={(event) => {
+                        event.stopPropagation()
+                        onDismiss()
+                    }}
+                />
+            )}
+        </button>
+    )
+)
+Chip.displayName = "Chip"
+
+export { Badge, Chip }

package/templates/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const Breadcrumb = React.forwardRef<
+    HTMLElement,
+    React.HTMLAttributes<HTMLElement>
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+    HTMLOListElement,
+    React.OlHTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => (
+    <ol
+        ref={ref}
+        className={cn(
+            "flex flex-wrap items-center gap-2 text-b3 text-muted-foreground",
+            className
+        )}
+        {...props}
+    />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+    HTMLLIElement,
+    React.LiHTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+    <li
+        ref={ref}
+        className={cn("inline-flex items-center gap-2", className)}
+        {...props}
+    />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+    HTMLAnchorElement,
+    React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(({ className, ...props }, ref) => (
+    <a
+        ref={ref}
+        className={cn(
+            "rounded-xxs text-b3 text-muted-foreground ring-offset-background transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-disabled:pointer-events-none aria-disabled:text-grey-400",
+            className
+        )}
+        {...props}
+    />
+))
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+    HTMLSpanElement,
+    React.HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => (
+    <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn("text-b4 text-foreground", className)}
+        {...props}
+    />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+    children,
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLLIElement>) => (
+    <li
+        role="presentation"
+        aria-hidden="true"
+        className={cn("[&_svg]:size-4", className)}
+        {...props}
+    >
+        {children ?? <ChevronRight />}
+    </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+    <span
+        role="presentation"
+        aria-hidden="true"
+        className={cn("flex size-5 items-center justify-center", className)}
+        {...props}
+    >
+        <MoreHorizontal className="size-4" />
+        <span className="sr-only">More</span>
+    </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis,
+}

package/templates/button/button.tsx

@@ -7,18 +7,56 @@ export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
 }
 
+const buttonVariants = {
+    filled: "bg-primary text-primary-foreground hover:bg-primary-700 active:bg-primary-800 disabled:bg-muted disabled:text-grey-400",
+    outline:
+        "border border-primary bg-transparent text-primary hover:bg-accent active:bg-primary-100 disabled:border-grey-200 disabled:text-grey-400",
+    clear: "bg-transparent text-primary hover:bg-accent active:bg-primary-100 disabled:text-grey-400",
+}
+
+const buttonSizes = {
+    giant: "h-14 gap-2 px-6 text-btn-giant",
+    large: "h-12 gap-2 px-5 text-btn-large",
+    medium: "h-10 gap-2 px-4 text-btn-medium",
+    small: "h-8 gap-1 px-3 text-btn-small",
+    tiny: "h-6 gap-1 px-2 text-btn-tiny",
+}
+
+const iconOnlySizes = {
+    giant: "h-14 w-14 text-btn-giant",
+    large: "h-12 w-12 text-btn-large",
+    medium: "h-10 w-10 text-btn-medium",
+    small: "h-8 w-8 text-btn-small",
+    tiny: "h-6 w-6 text-btn-tiny",
+}
+
 export interface ButtonProps
     extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: keyof typeof buttonVariants
+    size?: keyof typeof buttonSizes
+    iconOnly?: boolean
     asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, asChild = false, ...props }, ref) => {
+    (
+        {
+            className,
+            variant = "filled",
+            size = "medium",
+            iconOnly = false,
+            asChild = false,
+            ...props
+        },
+        ref
+    ) => {
         const Comp = asChild ? Slot : "button"
         return (
             <Comp
                 className={cn(
-                    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2",
+                    "inline-flex items-center justify-center whitespace-nowrap rounded-xs font-semibold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:size-[1.25em] [&_svg]:shrink-0",
+                    buttonVariants[variant],
+                    iconOnly ? iconOnlySizes[size] : buttonSizes[size],
                     className
                 )}
                 ref={ref}

package/templates/button-group/button-group.tsx

@@ -0,0 +1,93 @@
+import * as React from "react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+// Figma: Button Group items share Button's outline style and full size ramp
+// (Position=Left/Center/Right joined edge-to-edge, State=Selected fills).
+const buttonGroupItemSizes = {
+    giant: "h-14 gap-2 px-6 text-btn-giant",
+    large: "h-12 gap-2 px-5 text-btn-large",
+    medium: "h-10 gap-2 px-4 text-btn-medium",
+    small: "h-8 gap-1 px-3 text-btn-small",
+    tiny: "h-6 gap-1 px-2 text-btn-tiny",
+}
+
+const iconOnlySizes = {
+    giant: "h-14 w-14",
+    large: "h-12 w-12",
+    medium: "h-10 w-10",
+    small: "h-8 w-8",
+    tiny: "h-6 w-6",
+}
+
+interface ButtonGroupContextValue {
+    size: keyof typeof buttonGroupItemSizes
+    value?: string
+    onValueChange?: (value: string) => void
+}
+
+const ButtonGroupContext = React.createContext<ButtonGroupContextValue>({
+    size: "medium",
+})
+
+export interface ButtonGroupProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    size?: keyof typeof buttonGroupItemSizes
+    value?: string
+    onValueChange?: (value: string) => void
+}
+
+const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+    ({ className, size = "medium", value, onValueChange, ...props }, ref) => (
+        <ButtonGroupContext.Provider value={{ size, value, onValueChange }}>
+            <div
+                ref={ref}
+                role="group"
+                className={cn("inline-flex items-center", className)}
+                {...props}
+            />
+        </ButtonGroupContext.Provider>
+    )
+)
+ButtonGroup.displayName = "ButtonGroup"
+
+export interface ButtonGroupItemProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string
+    iconOnly?: boolean
+}
+
+const ButtonGroupItem = React.forwardRef<
+    HTMLButtonElement,
+    ButtonGroupItemProps
+>(({ className, value, iconOnly = false, onClick, ...props }, ref) => {
+    const ctx = React.useContext(ButtonGroupContext)
+    const selected = ctx.value === value
+    return (
+        <button
+            ref={ref}
+            type="button"
+            aria-pressed={selected}
+            onClick={(event) => {
+                ctx.onValueChange?.(value)
+                onClick?.(event)
+            }}
+            className={cn(
+                "-ml-px inline-flex items-center justify-center whitespace-nowrap border border-primary font-semibold ring-offset-background transition-colors first:-ml-0 first:rounded-l-xs last:rounded-r-xs focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:border-grey-200 disabled:text-grey-400 [&_svg]:size-[1.25em] [&_svg]:shrink-0",
+                iconOnly ? iconOnlySizes[ctx.size] : buttonGroupItemSizes[ctx.size],
+                selected
+                    ? "z-10 bg-primary text-primary-foreground"
+                    : "bg-transparent text-primary hover:bg-accent active:bg-primary-100",
+                className
+            )}
+            {...props}
+        />
+    )
+})
+ButtonGroupItem.displayName = "ButtonGroupItem"
+
+export { ButtonGroup, ButtonGroupItem }

package/templates/card/card.tsx

@@ -1,17 +1,8 @@
 import * as React from "react"
-
-import { cn } from "./button" // Assuming they have cn utility somewhere accessible, or we'll rewrite it to inline
-
-export function cnFallback(...classes: (string | undefined | null | false)[]) {
-    return classes.filter(Boolean).join(" ")
-}
-
-// In a real scenario you'd import 'cn' from a library or a utils file.
-// We'll provide an inline cn for fallback or rely on the user having ones installed:
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
-function localCn(...inputs: ClassValue[]) {
+function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
 }
 
@@ -21,8 +12,8 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
-        className={localCn(
-            "rounded-xl border bg-card text-card-foreground shadow",
+        className={cn(
+            "overflow-hidden rounded-md border border-grey-100 bg-card text-foreground shadow-200",
             className
         )}
         {...props}
@@ -30,25 +21,38 @@ const Card = React.forwardRef<
 ))
 Card.displayName = "Card"
 
+const CardImage = React.forwardRef<
+    HTMLImageElement,
+    React.ImgHTMLAttributes<HTMLImageElement>
+>(({ className, alt = "", ...props }, ref) => (
+    <img
+        ref={ref}
+        alt={alt}
+        className={cn("h-50 w-full object-cover", className)}
+        {...props}
+    />
+))
+CardImage.displayName = "CardImage"
+
 const CardHeader = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
-        className={localCn("flex flex-col space-y-1.5 p-6", className)}
+        className={cn("flex flex-col space-y-1.5 p-6", className)}
         {...props}
     />
 ))
 CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
-    HTMLParagraphElement,
+    HTMLHeadingElement,
     React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
     <h3
         ref={ref}
-        className={localCn("font-semibold leading-none tracking-tight", className)}
+        className={cn("text-s2 text-foreground", className)}
         {...props}
     />
 ))
@@ -60,7 +64,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <p
         ref={ref}
-        className={localCn("text-sm text-muted-foreground", className)}
+        className={cn("text-b3 text-muted-foreground", className)}
         {...props}
     />
 ))
@@ -70,7 +74,7 @@ const CardContent = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-    <div ref={ref} className={localCn("p-6 pt-0", className)} {...props} />
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
@@ -80,10 +84,18 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
-        className={localCn("flex items-center p-6 pt-0", className)}
+        className={cn("flex items-center p-6 pt-0", className)}
         {...props}
     />
 ))
 CardFooter.displayName = "CardFooter"
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+    Card,
+    CardImage,
+    CardHeader,
+    CardFooter,
+    CardTitle,
+    CardDescription,
+    CardContent,
+}

package/templates/checkbox/checkbox.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import { Check, Minus } from "lucide-react"
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
@@ -15,7 +15,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
         ref={ref}
         className={cn(
-            "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+            "group peer size-5 shrink-0 rounded-xxs border border-grey-300 bg-background ring-offset-background transition-colors hover:border-grey-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:border-grey-200 disabled:bg-muted data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
             className
         )}
         {...props}
@@ -23,7 +23,8 @@ const Checkbox = React.forwardRef<
         <CheckboxPrimitive.Indicator
             className={cn("flex items-center justify-center text-current")}
         >
-            <Check className="h-4 w-4" />
+            <Check className="size-4 group-data-[state=indeterminate]:hidden" />
+            <Minus className="size-4 group-data-[state=checked]:hidden" />
         </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
 ))