cooterlabs 1.0.2 → 2.0.0

package/templates/context-menu/context-menu.tsx

@@ -0,0 +1,177 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight } from "lucide-react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const surfaceClasses =
+    "z-50 min-w-48 overflow-hidden bg-popover text-popover-foreground rounded-xs shadow-400 border border-grey-100 p-1"
+
+const itemClasses =
+    "relative flex h-10 cursor-default select-none items-center gap-2 px-3 rounded-xxs text-b3 outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuContent = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Portal>
+        <ContextMenuPrimitive.Content
+            ref={ref}
+            className={cn(surfaceClasses, className)}
+            {...props}
+        />
+    </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+export interface ContextMenuItemProps
+    extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> {
+    variant?: "default" | "destructive"
+}
+
+const ContextMenuItem = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.Item>,
+    ContextMenuItemProps
+>(({ className, variant = "default", ...props }, ref) => (
+    <ContextMenuPrimitive.Item
+        ref={ref}
+        className={cn(
+            itemClasses,
+            variant === "destructive" &&
+                "text-error data-[highlighted]:bg-error-50 data-[highlighted]:text-error",
+            className
+        )}
+        {...props}
+    />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+    <ContextMenuPrimitive.CheckboxItem
+        ref={ref}
+        className={cn(itemClasses, "pl-8", className)}
+        checked={checked}
+        {...props}
+    >
+        <span className="absolute left-2 flex size-4 items-center justify-center">
+            <ContextMenuPrimitive.ItemIndicator>
+                <Check className="size-4" />
+            </ContextMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+    ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+    <ContextMenuPrimitive.RadioItem
+        ref={ref}
+        className={cn(itemClasses, "pl-8", className)}
+        {...props}
+    >
+        <span className="absolute left-2 flex size-4 items-center justify-center">
+            <ContextMenuPrimitive.ItemIndicator>
+                <span className="block size-2 rounded-full bg-current" />
+            </ContextMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>
+>(({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Label
+        ref={ref}
+        className={cn("px-3 py-2 text-label text-muted-foreground", className)}
+        {...props}
+    />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Separator
+        ref={ref}
+        className={cn("-mx-1 my-1 h-px bg-grey-100", className)}
+        {...props}
+    />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuSubTrigger = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>
+>(({ className, children, ...props }, ref) => (
+    <ContextMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+            itemClasses,
+            "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+            className
+        )}
+        {...props}
+    >
+        {children}
+        <ChevronRight className="ml-auto size-4" />
+    </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+    React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Portal>
+        <ContextMenuPrimitive.SubContent
+            ref={ref}
+            className={cn(surfaceClasses, className)}
+            {...props}
+        />
+    </ContextMenuPrimitive.Portal>
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+export {
+    ContextMenu,
+    ContextMenuTrigger,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuCheckboxItem,
+    ContextMenuRadioGroup,
+    ContextMenuRadioItem,
+    ContextMenuLabel,
+    ContextMenuSeparator,
+    ContextMenuGroup,
+    ContextMenuPortal,
+    ContextMenuSub,
+    ContextMenuSubTrigger,
+    ContextMenuSubContent,
+}

package/templates/dialog/dialog.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            "fixed inset-0 z-50 bg-black/50 transition-opacity data-[state=closed]:opacity-0",
+            className
+        )}
+        {...props}
+    />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed left-1/2 top-1/2 z-50 grid w-full max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 bg-background p-6 rounded-md shadow-600 transition-opacity data-[state=closed]:opacity-0",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-xxs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none">
+                <X className="size-5" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+        {...props}
+    />
+)
+DialogHeader.displayName = "DialogHeader"
+
+export interface DialogFooterProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical"
+}
+
+const DialogFooter = ({
+    className,
+    orientation = "horizontal",
+    ...props
+}: DialogFooterProps) => (
+    <div
+        className={cn(
+            "flex gap-2",
+            orientation === "vertical"
+                ? "flex-col"
+                : "flex-row justify-end [&>*]:flex-1 sm:[&>*]:flex-none",
+            className
+        )}
+        {...props}
+    />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn("text-s1 text-foreground", className)}
+        {...props}
+    />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn("text-b3 text-muted-foreground", className)}
+        {...props}
+    />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+    Dialog,
+    DialogTrigger,
+    DialogPortal,
+    DialogOverlay,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+}

package/templates/dropdown/dropdown.tsx

@@ -0,0 +1,180 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight } from "lucide-react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const surfaceClasses =
+    "z-50 min-w-48 overflow-hidden bg-popover text-popover-foreground rounded-xs shadow-400 border border-grey-100 p-1"
+
+const itemClasses =
+    "relative flex h-10 cursor-default select-none items-center gap-2 px-3 rounded-xxs text-b3 outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuContent = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+    <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={cn(surfaceClasses, className)}
+            {...props}
+        />
+    </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+export interface DropdownMenuItemProps
+    extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+    variant?: "default" | "destructive"
+}
+
+const DropdownMenuItem = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+    DropdownMenuItemProps
+>(({ className, variant = "default", ...props }, ref) => (
+    <DropdownMenuPrimitive.Item
+        ref={ref}
+        className={cn(
+            itemClasses,
+            variant === "destructive" &&
+                "text-error data-[highlighted]:bg-error-50 data-[highlighted]:text-error",
+            className
+        )}
+        {...props}
+    />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+    <DropdownMenuPrimitive.CheckboxItem
+        ref={ref}
+        className={cn(itemClasses, "pl-8", className)}
+        checked={checked}
+        {...props}
+    >
+        <span className="absolute left-2 flex size-4 items-center justify-center">
+            <DropdownMenuPrimitive.ItemIndicator>
+                <Check className="size-4" />
+            </DropdownMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.RadioItem
+        ref={ref}
+        className={cn(itemClasses, "pl-8", className)}
+        {...props}
+    >
+        <span className="absolute left-2 flex size-4 items-center justify-center">
+            <DropdownMenuPrimitive.ItemIndicator>
+                <span className="block size-2 rounded-full bg-current" />
+            </DropdownMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+>(({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.Label
+        ref={ref}
+        className={cn("px-3 py-2 text-label text-muted-foreground", className)}
+        {...props}
+    />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.Separator
+        ref={ref}
+        className={cn("-mx-1 my-1 h-px bg-grey-100", className)}
+        {...props}
+    />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuSubTrigger = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>
+>(({ className, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+            itemClasses,
+            "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+            className
+        )}
+        {...props}
+    >
+        {children}
+        <ChevronRight className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.SubContent
+            ref={ref}
+            className={cn(surfaceClasses, className)}
+            {...props}
+        />
+    </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName
+
+export {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuCheckboxItem,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuGroup,
+    DropdownMenuPortal,
+    DropdownMenuSub,
+    DropdownMenuSubTrigger,
+    DropdownMenuSubContent,
+}

package/templates/input/input.tsx

@@ -6,16 +6,43 @@ export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
 }
 
+const inputVariants = {
+    outline: "border-input bg-background hover:border-grey-300",
+    filled: "border-transparent bg-secondary hover:bg-muted",
+}
+
+const inputSizes = {
+    large: "h-12 px-4 text-b1",
+    medium: "h-10 px-3 text-b3",
+}
+
+const inputStatuses = {
+    success: "border-success",
+    info: "border-info",
+    warning: "border-warning",
+    error: "border-error",
+}
+
 export interface InputProps
-    extends React.InputHTMLAttributes<HTMLInputElement> { }
+    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    variant?: keyof typeof inputVariants
+    size?: keyof typeof inputSizes
+    status?: keyof typeof inputStatuses
+}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, type, ...props }, ref) => {
+    (
+        { className, type, variant = "outline", size = "large", status, ...props },
+        ref
+    ) => {
         return (
             <input
                 type={type}
                 className={cn(
-                    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    "flex w-full rounded-xs border text-foreground ring-offset-background transition-colors file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-invalid:border-error disabled:pointer-events-none disabled:border-grey-200 disabled:bg-secondary disabled:text-grey-400",
+                    inputVariants[variant],
+                    inputSizes[size],
+                    status && inputStatuses[status],
                     className
                 )}
                 ref={ref}

package/templates/label/label.tsx

@@ -3,7 +3,7 @@ import * as LabelPrimitive from "@radix-ui/react-label"
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
-function cn(...inputs: ClassValue[]) {
+export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
 }
 
@@ -14,7 +14,7 @@ const Label = React.forwardRef<
     <LabelPrimitive.Root
         ref={ref}
         className={cn(
-            "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            "text-label text-foreground peer-disabled:pointer-events-none peer-disabled:text-grey-400",
             className
         )}
         {...props}

package/templates/list/list.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 List = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        role="list"
+        className={cn("w-full divide-y divide-grey-100", className)}
+        {...props}
+    />
+))
+List.displayName = "List"
+
+const ListHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("px-4 py-2 text-label text-muted-foreground", className)}
+        {...props}
+    />
+))
+ListHeader.displayName = "ListHeader"
+
+export interface ListItemProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    leading?: React.ReactNode
+    title?: React.ReactNode
+    subtitle?: React.ReactNode
+    trailing?: React.ReactNode
+    interactive?: boolean
+}
+
+const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
+    (
+        {
+            className,
+            leading,
+            title,
+            subtitle,
+            trailing,
+            interactive = false,
+            children,
+            ...props
+        },
+        ref
+    ) => (
+        <div
+            ref={ref}
+            role="listitem"
+            className={cn(
+                "flex min-h-12 items-center gap-3 px-4 py-2",
+                interactive &&
+                    "cursor-pointer transition-colors hover:bg-secondary active:bg-muted",
+                className
+            )}
+            {...props}
+        >
+            {leading && (
+                <span className="flex shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-5">
+                    {leading}
+                </span>
+            )}
+            <span className="flex min-w-0 flex-1 flex-col">
+                {title && (
+                    <span className="truncate text-b2 text-foreground">
+                        {title}
+                    </span>
+                )}
+                {subtitle && (
+                    <span className="truncate text-c1 text-muted-foreground">
+                        {subtitle}
+                    </span>
+                )}
+                {children}
+            </span>
+            {trailing && (
+                <span className="flex shrink-0 items-center gap-2 text-c1 text-muted-foreground [&_svg]:size-5">
+                    {trailing}
+                </span>
+            )}
+        </div>
+    )
+)
+ListItem.displayName = "ListItem"
+
+export { List, ListHeader, ListItem }

package/templates/loader/loader.tsx

@@ -0,0 +1,38 @@
+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 loaderSizes = {
+    tiny: "h-6 w-6 border-2",
+    small: "h-8 w-8 border-2",
+    medium: "h-10 w-10 border-4",
+    large: "h-12 w-12 border-4",
+    giant: "h-14 w-14 border-4",
+}
+
+export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: keyof typeof loaderSizes
+}
+
+const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(
+    ({ className, size = "medium", ...props }, ref) => (
+        <div
+            ref={ref}
+            role="status"
+            aria-label="Loading"
+            className={cn(
+                "inline-block animate-spin rounded-full border-grey-200 border-t-primary",
+                loaderSizes[size],
+                className
+            )}
+            {...props}
+        />
+    )
+)
+Loader.displayName = "Loader"
+
+export { Loader }