cooterlabs 1.0.2 → 2.1.0

package/templates/alert/alert.tsx

@@ -0,0 +1,146 @@
+import * as React from "react"
+import { X } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+const alertVariants = {
+    filled: {
+        default:
+            "bg-primary-500 text-white [&_[data-slot=alert-description]]:text-white/80",
+        success:
+            "bg-success-500 text-white [&_[data-slot=alert-description]]:text-white/80",
+        info: "bg-info-500 text-white [&_[data-slot=alert-description]]:text-white/80",
+        warning:
+            "bg-warning-500 text-white [&_[data-slot=alert-description]]:text-white/80",
+        error: "bg-error-500 text-white [&_[data-slot=alert-description]]:text-white/80",
+    },
+    outline: {
+        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",
+    },
+}
+
+const alertPositions = {
+    "top-left": "fixed left-4 top-4 z-50",
+    "top-center": "fixed left-1/2 top-4 z-50 -translate-x-1/2",
+    "top-right": "fixed right-4 top-4 z-50",
+    "bottom-left": "fixed bottom-4 left-4 z-50",
+    "bottom-center": "fixed bottom-4 left-1/2 z-50 -translate-x-1/2",
+    "bottom-right": "fixed bottom-4 right-4 z-50",
+}
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    severity?: keyof (typeof alertVariants)["filled"]
+    variant?: keyof typeof alertVariants
+    position?: keyof typeof alertPositions
+    /** seconds until the alert dismisses itself; pauses on hover */
+    duration?: number
+    onDismiss?: () => void
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+    (
+        {
+            className,
+            severity = "default",
+            variant = "filled",
+            position,
+            duration,
+            onDismiss,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const [visible, setVisible] = React.useState(true)
+        if (!visible) return null
+        const dismissible = duration != null || onDismiss != null
+        const dismiss = () => {
+            setVisible(false)
+            onDismiss?.()
+        }
+        return (
+            <div
+                ref={ref}
+                role="alert"
+                className={cn(
+                    "group relative overflow-hidden rounded-xs p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-5 [&>svg~*]:pl-8",
+                    alertVariants[variant][severity],
+                    position && alertPositions[position],
+                    dismissible && "pr-12",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                {dismissible && (
+                    <button
+                        type="button"
+                        aria-label="Dismiss"
+                        onClick={dismiss}
+                        className="absolute right-4 top-4"
+                    >
+                        <X className="size-4" />
+                    </button>
+                )}
+                {duration != null && (
+                    <div
+                        className="absolute bottom-0 left-0 h-1 bg-current opacity-30 group-hover:[animation-play-state:paused]"
+                        style={{
+                            animation: `alert-timer ${duration}s linear forwards`,
+                        }}
+                        onAnimationEnd={dismiss}
+                    />
+                )}
+            </div>
+        )
+    }
+)
+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

@@ -1,20 +1,32 @@
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { cn } from "../../lib/utils"
 
-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 +53,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,36 +1,125 @@
 import * as React from "react"
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { X } from "lucide-react"
+import { cn } from "../../lib/utils"
 
-export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs))
+const badgeColors = {
+    outline: {
+        default: "border-[1.5px] border-primary-500 bg-background text-primary-600",
+        success: "border-[1.5px] border-success-500 bg-background text-success-600",
+        info: "border-[1.5px] border-info-500 bg-background text-info-600",
+        warning: "border-[1.5px] border-warning-500 bg-background text-warning-600",
+        error: "border-[1.5px] border-error-500 bg-background text-error-600",
+    },
+    filled: {
+        default: "bg-primary-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",
+    },
 }
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: "default" | "secondary" | "destructive" | "outline"
+const chipInteractions = {
+    outline: {
+        default: "hover:bg-accent active:bg-primary-100",
+        success: "hover:bg-success-50 active:bg-success-100",
+        info: "hover:bg-info-50 active:bg-info-100",
+        warning: "hover:bg-warning-50 active:bg-warning-100",
+        error: "hover:bg-error-50 active:bg-error-100",
+    },
+    filled: {
+        default: "hover:bg-primary-700 active:bg-primary-800",
+        success: "hover:bg-success-700 active:bg-success-800",
+        info: "hover:bg-info-700 active:bg-info-800",
+        warning: "hover:bg-warning-700 active:bg-warning-800",
+        error: "hover:bg-error-700 active:bg-error-800",
+    },
 }
 
-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",
+const badgeSizes = {
+    badge: {
+        medium: "h-10 gap-1 p-3 text-b4 rounded-[12px] [&_svg]:size-3",
+        small: "h-8 gap-1 p-2 text-c2 rounded-[8px] [&_svg]:size-3",
+        tiny: "h-6 gap-1 p-1.5 text-c3 rounded-[8px] [&_svg]:size-3",
+    },
+    chip: {
+        medium: "h-10 gap-2 p-3 rounded-[12px] text-b4 [&_svg]:size-4",
+        small: "h-8 gap-1.5 p-2 rounded-[8px] text-c2 [&_svg]:size-4",
+        tiny: "h-6 gap-1 p-1.5 rounded-[8px] text-c3 [&_svg]:size-3",
+    },
 }
 
-function Badge({ className, variant = "default", ...props }: BadgeProps) {
-    return (
-        <div
-            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],
-                className
-            )}
-            {...props}
-        />
-    )
+const iconOnlySizes = {
+    badge: { medium: "w-6 px-5", small: "w-6 px-3", tiny: "w-4 px-2" },
+    chip: { medium: "w-6 px-5", small: "w-6 px-3", tiny: "w-4 px-2" },
 }
 
+export interface BadgeProps
+    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    type?: "badge" | "chip"
+    variant?: keyof typeof badgeColors
+    color?: keyof (typeof badgeColors)["filled"]
+    size?: keyof (typeof badgeSizes)["badge"]
+    iconOnly?: boolean
+    // chip only
+    selected?: boolean
+    onDismiss?: () => void
+}
+
+const Badge = React.forwardRef<HTMLElement, BadgeProps>(
+    (
+        {
+            className,
+            type = "badge",
+            variant = "filled",
+            color = "default",
+            size = "medium",
+            iconOnly = false,
+            selected = false,
+            onDismiss,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const isChip = type === "chip"
+        const activeVariant = selected ? "filled" : variant
+        const Comp = (isChip ? "button" : "div") as "button"
+        return (
+            <Comp
+                ref={ref as React.Ref<HTMLButtonElement>}
+                {...(isChip && {
+                    type: "button" as const,
+                    "aria-pressed": selected || undefined,
+                })}
+                className={cn(
+                    "inline-flex items-center justify-center whitespace-nowrap font-medium [&_svg]:shrink-0",
+                    isChip &&
+                        " transition-colors focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:border-grey-200 disabled:bg-muted disabled:text-grey-400",
+                    badgeColors[activeVariant][color],
+                    isChip && chipInteractions[activeVariant][color],
+                    badgeSizes[type][size],
+                    iconOnly && iconOnlySizes[type][size],
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                {isChip && onDismiss && (
+                    <X
+                        role="button"
+                        aria-label="Remove"
+                        className="cursor-pointer"
+                        onClick={(event) => {
+                            event.stopPropagation()
+                            onDismiss()
+                        }}
+                    />
+                )}
+            </Comp>
+        )
+    }
+)
+Badge.displayName = "Badge"
+
 export { Badge }

package/templates/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+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 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:shadow-focus 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

@@ -1,24 +1,57 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { cn } from "../../lib/utils"
 
-export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs))
+const buttonVariants = {
+    filled: "bg-primary text-white 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 [font-size:var(--text-btn-giant)] [line-height:var(--text-btn-giant--line-height)] [font-weight:var(--text-btn-giant--font-weight)] rounded-md",
+    large: "h-12 gap-2 px-5 [font-size:var(--text-btn-large)] [line-height:var(--text-btn-large--line-height)] [font-weight:var(--text-btn-large--font-weight)] rounded-md",
+    medium: "h-10 gap-2 px-4 [font-size:var(--text-btn-medium)] [line-height:var(--text-btn-medium--line-height)] [font-weight:var(--text-btn-medium--font-weight)] rounded-md",
+    small: "h-8 gap-1 px-3 [font-size:var(--text-btn-small)] [line-height:var(--text-btn-small--line-height)] [font-weight:var(--text-btn-small--font-weight)] rounded-sm",
+    tiny: "h-6 gap-1 px-2 [font-size:var(--text-btn-tiny)] [line-height:var(--text-btn-tiny--line-height)] [font-weight:var(--text-btn-tiny--font-weight)] rounded-sm",
+}
+
+const iconOnlySizes = {
+    giant: "h-14 w-14 [font-size:var(--text-btn-giant)] [line-height:var(--text-btn-giant--line-height)] [font-weight:var(--text-btn-giant--font-weight)]",
+    large: "h-12 w-12 [font-size:var(--text-btn-large)] [line-height:var(--text-btn-large--line-height)] [font-weight:var(--text-btn-large--font-weight)]",
+    medium: "h-10 w-10 [font-size:var(--text-btn-medium)] [line-height:var(--text-btn-medium--line-height)] [font-weight:var(--text-btn-medium--font-weight)]",
+    small: "h-8 w-8 [font-size:var(--text-btn-small)] [line-height:var(--text-btn-small--line-height)] [font-weight:var(--text-btn-small--font-weight)]",
+    tiny: "h-6 w-6 [font-size:var(--text-btn-tiny)] [line-height:var(--text-btn-tiny--line-height)] [font-weight:var(--text-btn-tiny--font-weight)]",
 }
 
 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 font-semibold transition-colors focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none [&_svg]:size-[1.25em] [&_svg]:shrink-0",
+                    iconOnly ? iconOnlySizes[size] : buttonSizes[size],
+                    buttonVariants[variant],
                     className
                 )}
                 ref={ref}

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

@@ -0,0 +1,88 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+// 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 transition-colors first:-ml-0 first:rounded-l-xs last:rounded-r-xs focus-visible:z-10 focus-visible:outline-none focus-visible:shadow-focus 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 }