@gunjo/ui 0.0.1-alpha.0 → 0.0.1-alpha.2

package/src/components/display/AssetCard.tsx

@@ -0,0 +1,242 @@
+"use client"
+
+import * as React from "react"
+import { IconCheck as Check, IconHeart as Heart, IconStarFilled as Star } from "@tabler/icons-react"
+
+import { cn } from "../../lib/utils"
+import { Badge } from "./Badge"
+import { Icon } from "./Icon"
+import { ImagePreview } from "./ImagePreview"
+import { assetCardDefaultVariantKey } from "./generated/default-variant-keys"
+import type { AssetCardVariantKey } from "./generated/variant-keys"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+
+export interface AssetCardAsset {
+    id: string
+    title: string
+    src?: string
+    alt?: string
+    type?: string
+    size?: string
+    width?: number
+    height?: number
+    createdAt?: string
+    isFavorite?: boolean
+    rating?: number
+    score?: string | number
+    meta?: React.ReactNode
+}
+
+export interface AssetCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    asset: AssetCardAsset
+    selected?: boolean
+    variant?: AssetCardVariantKey
+    selectionMode?: "single" | "multiple" | "none"
+    imageFit?: "contain" | "cover"
+    previewLabel?: string
+    favoriteLabel?: string
+    unfavoriteLabel?: string
+    ratingLabel?: string
+    noImageLabel?: string
+    portalContainer?: HTMLElement | null
+    onSelect?: (asset: AssetCardAsset) => void
+    onPreview?: (asset: AssetCardAsset) => void
+    onFavorite?: (asset: AssetCardAsset) => void
+    renderMeta?: (asset: AssetCardAsset) => React.ReactNode
+}
+
+const densityClasses: Record<AssetCardVariantKey, { root: string; image: string; title: string; meta: string }> = {
+    default: {
+        root: "gap-2",
+        image: "rounded-lg",
+        title: "text-base",
+        meta: "text-sm",
+    },
+    compact: {
+        root: "gap-1.5",
+        image: "rounded-md",
+        title: "text-sm",
+        meta: "text-xs",
+    },
+}
+
+function defaultMeta(asset: AssetCardAsset) {
+    const dimensions = asset.width && asset.height ? `${asset.width} x ${asset.height}` : null
+    const typeSize = [asset.type, asset.size].filter(Boolean).join(" ")
+    return [dimensions, typeSize, asset.createdAt].filter(Boolean).join(" / ")
+}
+
+const AssetCard = React.forwardRef<HTMLDivElement, AssetCardProps>(
+    (
+        {
+            asset,
+            selected,
+            variant = assetCardDefaultVariantKey,
+            selectionMode = "single",
+            imageFit = "cover",
+            previewLabel = "Open preview",
+            favoriteLabel = "Favorite",
+            unfavoriteLabel = "Remove favorite",
+            ratingLabel = "Rating",
+            noImageLabel = "Preview image not found",
+            portalContainer,
+            onSelect,
+            onPreview,
+            onFavorite,
+            renderMeta,
+            className,
+            onKeyDown,
+            ...props
+        },
+        ref
+    ) => {
+        const interactive = Boolean(onSelect)
+        const classes = densityClasses[variant]
+        const meta = renderMeta ? renderMeta(asset) : asset.meta ?? defaultMeta(asset)
+        const ratingValue = typeof asset.rating === "number" && asset.rating > 0
+            ? asset.rating.toFixed(1)
+            : asset.score !== undefined
+                ? String(asset.score)
+                : null
+        const favoriteButtonRef = React.useRef<HTMLButtonElement>(null)
+        const favoriteBlurTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+        React.useEffect(() => {
+            if (asset.isFavorite && favoriteBlurTimerRef.current) {
+                clearTimeout(favoriteBlurTimerRef.current)
+                favoriteBlurTimerRef.current = null
+            }
+        }, [asset.isFavorite])
+
+        React.useEffect(() => {
+            return () => {
+                if (favoriteBlurTimerRef.current) {
+                    clearTimeout(favoriteBlurTimerRef.current)
+                }
+            }
+        }, [])
+
+        const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+            onKeyDown?.(event)
+            if (event.defaultPrevented || !interactive) return
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault()
+                onSelect?.(asset)
+            }
+        }
+
+        return (
+            <div
+                ref={ref}
+                role={interactive ? "button" : undefined}
+                tabIndex={interactive ? 0 : undefined}
+                aria-pressed={interactive ? selected : undefined}
+                data-state={selected ? "selected" : "idle"}
+                className={cn(
+                    "group flex w-full min-w-0 flex-col p-0 outline-none",
+                    interactive && "cursor-pointer",
+                    classes.root,
+                    className
+                )}
+                onClick={() => onSelect?.(asset)}
+                onKeyDown={handleKeyDown}
+                {...props}
+            >
+                <ImagePreview
+                    src={asset.src}
+                    alt={asset.src ? asset.alt ?? asset.title : undefined}
+                    objectFit={imageFit}
+                    className={cn(
+                        classes.image,
+                        selected
+                            ? "border-primary-border bg-primary-subtle ring-2 ring-primary-border"
+                            : "border-border group-hover:border-primary-border"
+                    )}
+                    noImageLabel={noImageLabel}
+                    previewLabel={previewLabel}
+                    portalContainer={portalContainer}
+                    onPreview={onPreview ? () => onPreview(asset) : undefined}
+                >
+                    {(asset.isFavorite || onFavorite) ? (
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <button
+                                    ref={favoriteButtonRef}
+                                    type="button"
+                                    className={cn(
+                                        "absolute left-2 top-2 z-20 inline-flex h-7 w-7 items-center justify-center rounded-full border bg-background/95 shadow-sm transition-opacity hover:text-primary focus:text-primary focus:opacity-100",
+                                        asset.isFavorite
+                                            ? "text-primary opacity-100"
+                                            : "text-muted-foreground opacity-0 group-hover:opacity-100"
+                                    )}
+                                    aria-label={asset.isFavorite ? unfavoriteLabel : favoriteLabel}
+                                    aria-pressed={asset.isFavorite}
+                                    onClick={(event) => {
+                                        event.stopPropagation()
+                                        const wasFavorite = Boolean(asset.isFavorite)
+                                        if (favoriteBlurTimerRef.current) {
+                                            clearTimeout(favoriteBlurTimerRef.current)
+                                            favoriteBlurTimerRef.current = null
+                                        }
+                                        onFavorite?.(asset)
+                                        if (wasFavorite) {
+                                            favoriteBlurTimerRef.current = setTimeout(() => {
+                                                favoriteButtonRef.current?.blur()
+                                                favoriteBlurTimerRef.current = null
+                                            }, 1000)
+                                        }
+                                    }}
+                                >
+                                    <Icon icon={Heart} size="xs" className={cn(asset.isFavorite && "fill-current")} />
+                                </button>
+                            </TooltipTrigger>
+                            <TooltipContent portalContainer={portalContainer}>{asset.isFavorite ? unfavoriteLabel : favoriteLabel}</TooltipContent>
+                        </Tooltip>
+                    ) : null}
+
+                    {(ratingValue || selectionMode === "multiple" || (selected && selectionMode !== "none")) ? (
+                        <div className="absolute right-2 top-2 z-20 flex max-w-[calc(100%-1rem)] items-center gap-1">
+                            {ratingValue ? (
+                                <Badge
+                                    className="gap-1 bg-background/95 text-foreground shadow-sm"
+                                    aria-label={`${ratingLabel}: ${ratingValue}`}
+                                >
+                                    {typeof asset.rating === "number" && asset.rating > 0 ? (
+                                        <Icon icon={Star} size="xs" className="fill-current text-warning" />
+                                    ) : null}
+                                    {ratingValue}
+                                </Badge>
+                            ) : null}
+                            {(selectionMode === "multiple" || (selected && selectionMode !== "none")) ? (
+                                <span
+                                    className={cn(
+                                        "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border shadow-sm",
+                                        selected
+                                            ? "border-primary bg-primary text-primary-foreground"
+                                            : "border-border bg-background/80 text-muted-foreground"
+                                    )}
+                                    aria-hidden="true"
+                                >
+                                    {selected ? <Icon icon={Check} size="xs" strokeWidth={2.5} /> : null}
+                                </span>
+                            ) : null}
+                        </div>
+                    ) : null}
+                </ImagePreview>
+                <div className="min-w-0 px-0.5">
+                    <div className={cn("truncate font-medium leading-tight text-foreground", classes.title)}>
+                        {asset.title}
+                    </div>
+                    {meta ? (
+                        <div className={cn("mt-1 truncate leading-tight text-muted-foreground", classes.meta)}>
+                            {meta}
+                        </div>
+                    ) : null}
+                </div>
+            </div>
+        )
+    }
+)
+AssetCard.displayName = "AssetCard"
+
+export { AssetCard }

package/src/components/display/AssetGrid.tsx

@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+import { IconPhoto as ImageIcon } from "@tabler/icons-react"
+
+import { cn } from "../../lib/utils"
+import { AssetCard, type AssetCardAsset, type AssetCardProps } from "./AssetCard"
+import { EmptyState } from "./EmptyState"
+import { assetGridDefaultVariantKey } from "./generated/default-variant-keys"
+import type { AssetGridVariantKey } from "./generated/variant-keys"
+
+export interface AssetGridGroup<TAsset extends AssetCardAsset = AssetCardAsset> {
+    id: string
+    label: React.ReactNode
+    items: TAsset[]
+    description?: React.ReactNode
+}
+
+export interface AssetGridProps<TAsset extends AssetCardAsset = AssetCardAsset>
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> {
+    items?: TAsset[]
+    groups?: AssetGridGroup<TAsset>[]
+    selectedIds?: Iterable<string>
+    variant?: AssetGridVariantKey
+    layout?: "fill" | "content"
+    minColumnWidth?: number
+    gap?: number
+    selectionMode?: AssetCardProps["selectionMode"]
+    portalContainer?: HTMLElement | null
+    emptyTitle?: React.ReactNode
+    emptyDescription?: React.ReactNode
+    onSelect?: (asset: TAsset) => void
+    onPreview?: (asset: TAsset) => void
+    onFavorite?: (asset: TAsset) => void
+    renderMeta?: (asset: TAsset) => React.ReactNode
+    renderItem?: (asset: TAsset, state: { selected: boolean }) => React.ReactNode
+}
+
+const variantDefaults: Record<AssetGridVariantKey, { minColumnWidth: number; gap: number; cardVariant: AssetCardProps["variant"] }> = {
+    default: { minColumnWidth: 180, gap: 24, cardVariant: "default" },
+    compact: { minColumnWidth: 140, gap: 16, cardVariant: "compact" },
+}
+
+function normalizeGroups<TAsset extends AssetCardAsset>(
+    items: TAsset[] | undefined,
+    groups: AssetGridGroup<TAsset>[] | undefined
+) {
+    if (groups) return groups
+    return [{ id: "all", label: null, items: items ?? [] }]
+}
+
+const AssetGrid = React.forwardRef<HTMLDivElement, AssetGridProps>(
+    (
+        {
+            items,
+            groups,
+            selectedIds,
+            variant = assetGridDefaultVariantKey,
+            layout = "fill",
+            minColumnWidth,
+            gap,
+            selectionMode = "single",
+            portalContainer,
+            emptyTitle = "No assets",
+            emptyDescription = "Assets added to this library will appear here.",
+            onSelect,
+            onPreview,
+            onFavorite,
+            renderMeta,
+            renderItem,
+            className,
+            style,
+            ...props
+        },
+        ref
+    ) => {
+        const defaults = variantDefaults[variant]
+        const resolvedGroups = normalizeGroups(items, groups)
+        const selectedSet = React.useMemo(() => new Set(selectedIds ?? []), [selectedIds])
+        const hasAssets = resolvedGroups.some((group) => group.items.length > 0)
+        const columnWidth = minColumnWidth ?? defaults.minColumnWidth
+        const gridGap = gap ?? defaults.gap
+        const stretchColumns = layout === "fill"
+
+        if (!hasAssets) {
+            return (
+                <div ref={ref} className={cn("flex min-h-64 w-full items-center justify-center p-0", className)} {...props}>
+                    <EmptyState
+                        icon={<ImageIcon className="h-8 w-8" aria-hidden="true" />}
+                        title={emptyTitle}
+                        description={emptyDescription}
+                    />
+                </div>
+            )
+        }
+
+        return (
+            <div ref={ref} className={cn("w-full space-y-8 p-0", className)} style={style} {...props}>
+                {resolvedGroups.map((group) => {
+                    const contentMaxWidth =
+                        group.items.length > 0
+                            ? group.items.length * columnWidth + Math.max(0, group.items.length - 1) * gridGap
+                            : undefined
+
+                    return (
+                        <section
+                            key={group.id}
+                            className={cn("space-y-3", layout === "content" && "mx-auto w-full")}
+                            style={layout === "content" && contentMaxWidth ? { maxWidth: `${contentMaxWidth}px` } : undefined}
+                        >
+                            {group.label ? (
+                                <div className="flex min-w-0 items-end justify-between gap-3">
+                                    <div className="min-w-0">
+                                        <h3 className="truncate text-sm font-semibold text-foreground">{group.label}</h3>
+                                        {group.description ? (
+                                            <p className="mt-1 truncate text-xs text-muted-foreground">{group.description}</p>
+                                        ) : null}
+                                    </div>
+                                    <span className="text-xs text-muted-foreground">{group.items.length}</span>
+                                </div>
+                            ) : null}
+                            <div
+                                className="grid"
+                                style={{
+                                    gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${columnWidth}px), ${stretchColumns ? "1fr" : `${columnWidth}px`}))`,
+                                    gap: `${gridGap}px`,
+                                    justifyContent: layout === "content" ? "center" : undefined,
+                                }}
+                            >
+                                {group.items.map((asset) => {
+                                    const selected = selectedSet.has(asset.id)
+                                    if (renderItem) {
+                                        return (
+                                            <React.Fragment key={asset.id}>
+                                                {renderItem(asset, { selected })}
+                                            </React.Fragment>
+                                        )
+                                    }
+                                    return (
+                                        <AssetCard
+                                            key={asset.id}
+                                            asset={asset}
+                                            selected={selected}
+                                            variant={defaults.cardVariant}
+                                            selectionMode={selectionMode}
+                                            portalContainer={portalContainer}
+                                            onSelect={onSelect as ((asset: AssetCardAsset) => void) | undefined}
+                                            onPreview={onPreview as ((asset: AssetCardAsset) => void) | undefined}
+                                            onFavorite={onFavorite as ((asset: AssetCardAsset) => void) | undefined}
+                                            renderMeta={renderMeta as ((asset: AssetCardAsset) => React.ReactNode) | undefined}
+                                        />
+                                    )
+                                })}
+                            </div>
+                        </section>
+                    )
+                })}
+            </div>
+        )
+    }
+)
+AssetGrid.displayName = "AssetGrid"
+
+export { AssetGrid }

package/src/components/display/Avatar.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "../../lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+import type { AvatarVariantKey } from "./generated/variant-keys"
+import { avatarDefaultVariantKey } from "./generated/default-variant-keys"
+
+export type AvatarPresence = "online" | "away" | "busy" | "offline"
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipContent>
+
+export interface AvatarProps
+    extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+    tooltip?: React.ReactNode
+    tooltipSide?: TooltipContentProps["side"]
+    tooltipAlign?: TooltipContentProps["align"]
+    tooltipPortalContainer?: TooltipContentProps["portalContainer"]
+    tooltipContentClassName?: string
+    presence?: AvatarPresence
+    presenceLabel?: React.ReactNode
+}
+
+const avatarSlotClasses: Record<AvatarVariantKey, string> = {
+    fallback: "flex h-full w-full items-center justify-center rounded-full bg-secondary text-sm font-medium text-muted-foreground",
+    image: "aspect-square h-full w-full rounded-full object-cover",
+}
+
+const avatarPresenceClasses: Record<AvatarPresence, string> = {
+    online: "bg-success",
+    away: "bg-warning",
+    busy: "bg-destructive",
+    offline: "bg-muted-foreground",
+}
+
+const Avatar = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Root>,
+    AvatarProps
+>(
+    (
+        {
+            className,
+            children,
+            tooltip,
+            tooltipSide,
+            tooltipAlign,
+            tooltipPortalContainer,
+            tooltipContentClassName,
+            presence,
+            presenceLabel,
+            ...props
+        },
+        ref
+    ) => {
+        const root = (
+            <AvatarPrimitive.Root
+                ref={ref}
+                className={cn(
+                    "relative inline-flex h-10 w-10 shrink-0 items-center rounded-full",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                {presence ? (
+                    <span
+                        className={cn(
+                            "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background",
+                            avatarPresenceClasses[presence]
+                        )}
+                        aria-label={typeof presenceLabel === "string" ? presenceLabel : undefined}
+                        aria-hidden={presenceLabel ? undefined : true}
+                    />
+                ) : null}
+            </AvatarPrimitive.Root>
+        )
+
+        if (!tooltip) {
+            return root
+        }
+
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>{root}</TooltipTrigger>
+                <TooltipContent
+                    side={tooltipSide}
+                    align={tooltipAlign}
+                    portalContainer={tooltipPortalContainer}
+                    className={tooltipContentClassName}
+                >
+                    {tooltip}
+                </TooltipContent>
+            </Tooltip>
+        )
+    }
+)
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Image
+        ref={ref}
+        className={cn(avatarSlotClasses.image, className)}
+        {...props}
+    />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Fallback>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Fallback
+        ref={ref}
+        className={cn(
+            avatarSlotClasses[avatarDefaultVariantKey],
+            className
+        )}
+        {...props}
+    />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/display/AvatarGroup.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover"
+import { Avatar, AvatarFallback } from "./Avatar"
+
+type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverContent>
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Maximum avatars to show before collapsing into a +N indicator. */
+    max?: number
+    /** Pixel overlap between avatars (negative margin). Default 8. */
+    overlap?: number
+    /** Size class applied to each Avatar. */
+    avatarClassName?: string
+    /** Tooltip content shown on the +N overflow avatar. */
+    overflowTooltip?: React.ReactNode
+    /** Popover content opened when the +N overflow avatar is clicked. */
+    overflowContent?: React.ReactNode
+    /** Accessible label for the clickable +N overflow avatar. */
+    overflowAriaLabel?: string
+    /** Class applied to the +N overflow popover content. */
+    overflowContentClassName?: string
+    /** Portal container for the +N overflow popover. */
+    overflowPortalContainer?: HTMLElement | null
+    /** Side used by the +N overflow popover. */
+    overflowContentSide?: PopoverContentProps["side"]
+    /** Alignment used by the +N overflow popover. */
+    overflowContentAlign?: PopoverContentProps["align"]
+    /** Offset used by the +N overflow popover. */
+    overflowContentSideOffset?: PopoverContentProps["sideOffset"]
+    /** Whether the +N overflow popover may flip to avoid viewport collisions. */
+    overflowContentAvoidCollisions?: PopoverContentProps["avoidCollisions"]
+}
+
+const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+    (
+        {
+            className,
+            max,
+            overlap = 8,
+            avatarClassName,
+            overflowTooltip,
+            overflowContent,
+            overflowAriaLabel,
+            overflowContentClassName,
+            overflowPortalContainer,
+            overflowContentSide = "bottom",
+            overflowContentAlign = "end",
+            overflowContentSideOffset = 8,
+            overflowContentAvoidCollisions,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const items = React.Children.toArray(children).filter(React.isValidElement)
+        const visible = max !== undefined ? items.slice(0, max) : items
+        const overflow = max !== undefined ? items.length - visible.length : 0
+        const overflowAvatar = (
+            <Avatar
+                className={cn(
+                    "ring-2 ring-background bg-muted",
+                    avatarClassName
+                )}
+                tooltip={overflowTooltip}
+            >
+                <AvatarFallback className="text-xs font-medium">
+                    +{overflow}
+                </AvatarFallback>
+            </Avatar>
+        )
+
+        return (
+            <div
+                ref={ref}
+                className={cn("flex items-center", className)}
+                {...props}
+            >
+                {visible.map((child, idx) => {
+                    const isFirst = idx === 0
+                    return (
+                        <div
+                            key={idx}
+                            style={isFirst ? undefined : { marginLeft: -overlap }}
+                            className={cn(
+                                "rounded-full ring-2 ring-background",
+                                avatarClassName
+                            )}
+                        >
+                            {child}
+                        </div>
+                    )
+                })}
+                {overflow > 0 && overflowContent ? (
+                    <Popover>
+                        <PopoverTrigger asChild>
+                            <button
+                                type="button"
+                                style={{ marginLeft: -overlap }}
+                                className="inline-flex shrink-0 rounded-full border-0 bg-transparent p-0 text-inherit outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                                aria-label={overflowAriaLabel ?? `Show ${overflow} more avatars`}
+                            >
+                                {overflowAvatar}
+                            </button>
+                        </PopoverTrigger>
+                        <PopoverContent
+                            align={overflowContentAlign}
+                            side={overflowContentSide}
+                            sideOffset={overflowContentSideOffset}
+                            avoidCollisions={overflowContentAvoidCollisions}
+                            className={cn("w-72 p-0", overflowContentClassName)}
+                            portalContainer={overflowPortalContainer}
+                        >
+                            {overflowContent}
+                        </PopoverContent>
+                    </Popover>
+                ) : overflow > 0 ? (
+                    <div style={{ marginLeft: -overlap }}>
+                        {overflowAvatar}
+                    </div>
+                ) : null}
+            </div>
+        )
+    }
+)
+AvatarGroup.displayName = "AvatarGroup"
+
+export { AvatarGroup }

package/src/components/{atoms → display}/Badge.tsx

@@ -4,9 +4,9 @@ import type { BadgeVariantKey } from "./generated/variant-keys"
 import { badgeDefaultVariantKey } from "./generated/default-variant-keys"
 
 const badgeVariantClasses: Record<BadgeVariantKey, string> = {
-    default: "bg-foreground text-primary-foreground hover:bg-foreground/80",
-    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-    destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80",
+    default: "bg-foreground text-background",
+    secondary: "bg-secondary text-secondary-foreground",
+    destructive: "bg-destructive-strong text-destructive-strong-foreground",
     outline: "border-border bg-transparent text-foreground",
 }