cooterlabs 1.0.2 → 2.1.0

package/templates/input/input.tsx

@@ -1,26 +1,92 @@
 import * as React from "react"
-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))
+export const inputVariants = {
+    outline: "border-input bg-background hover:border-grey-300",
+    filled: "border-transparent bg-secondary hover:bg-muted",
+}
+
+export const inputSizes = {
+    large: "h-12 px-4 text-b1 rounded-[12px]",
+    medium: "h-10 px-3 text-b3 rounded-[8px]",
+}
+
+export const inputStatuses = {
+    outline: {
+        success: "border-success-500",
+        info: "border-info-500",
+        warning: "border-warning-500",
+        error: "border-error-500",
+    },
+    filled: {
+        success: "bg-success-50",
+        info: "bg-info-50",
+        warning: "bg-warning-50",
+        error: "bg-error-50",
+    },
+}
+
+export const statusTextColors = {
+    success: "text-success-500",
+    info: "text-info-500",
+    warning: "text-warning-500",
+    error: "text-error-500",
 }
 
 export interface InputProps
-    extends React.InputHTMLAttributes<HTMLInputElement> { }
+    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    variant?: keyof typeof inputVariants
+    size?: keyof typeof inputSizes
+    status?: keyof typeof statusTextColors
+    helperText?: string
+    icon?: React.ReactNode
+    iconPosition?: "left" | "right"
+}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, type, ...props }, ref) => {
+    (
+        { className, type, variant = "outline", size = "large", status, helperText, icon, iconPosition = "left", ...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",
-                    className
+            <div>
+                <div className="relative">
+                    {icon && (
+                        <span
+                            className={cn(
+                                "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center text-muted-foreground size-6",
+                                iconPosition === "right" ? "right-3" : "left-3",
+                                status && statusTextColors[status]
+                            )}
+                        >
+                            {icon}
+                        </span>
+                    )}
+                    <input
+                        type={type}
+                        className={cn(
+                            "flex w-full border-[1.5px] text-foreground transition-colors file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:shadow-focus aria-invalid:border-error-500 aria-invalid:bg-error-50 disabled:pointer-events-none disabled:border-grey-200 disabled:bg-secondary disabled:text-grey-400",
+                            inputVariants[variant],
+                            inputSizes[size],
+                            status && inputStatuses[variant][status],
+                            icon && (iconPosition === "right" ? "pr-12" : "pl-12"),
+                            className
+                        )}
+                        ref={ref}
+                        {...props}
+                    />
+                </div>
+                {helperText && (
+                    <p
+                        className={cn(
+                            "text-b3 mt-2 text-muted-foreground",
+                            status && statusTextColors[status]
+                        )}
+                    >
+                        {helperText}
+                    </p>
                 )}
-                ref={ref}
-                {...props}
-            />
+            </div>
         )
     }
 )

package/templates/label/label.tsx

@@ -1,11 +1,6 @@
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs))
-}
+import { cn } from "../../lib/utils"
 
 const Label = React.forwardRef<
     React.ElementRef<typeof LabelPrimitive.Root>,
@@ -14,7 +9,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,91 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+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,33 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+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 }

package/templates/navbar-bottom/navbar-bottom.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const NavbarBottom = React.forwardRef<
+    HTMLElement,
+    React.HTMLAttributes<HTMLElement>
+>(({ className, ...props }, ref) => (
+    <nav
+        ref={ref}
+        // box-content keeps the tab row a full h-12 above the safe-area padding
+        className={cn(
+            "box-content flex h-12 items-stretch border-t border-grey-100 bg-background pb-[env(safe-area-inset-bottom)]",
+            className
+        )}
+        {...props}
+    />
+))
+NavbarBottom.displayName = "NavbarBottom"
+
+export interface NavbarBottomItemProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    label?: string
+    active?: boolean
+    badge?: boolean
+    // Figma Style="Line Selector + Icon": active top indicator line, no label
+    lineSelector?: boolean
+}
+
+const NavbarBottomItem = React.forwardRef<
+    HTMLButtonElement,
+    NavbarBottomItemProps
+>(
+    (
+        {
+            className,
+            label,
+            active = false,
+            badge = false,
+            lineSelector = false,
+            children,
+            ...props
+        },
+        ref
+    ) => (
+        <button
+            ref={ref}
+            type="button"
+            aria-current={active ? "page" : undefined}
+            className={cn(
+                "relative flex flex-1 flex-col items-center justify-center gap-1 transition-colors focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:text-grey-400",
+                active ? "text-primary" : "text-grey-400 hover:bg-secondary",
+                className
+            )}
+            {...props}
+        >
+            {lineSelector && active && (
+                <span className="absolute inset-x-3 top-0 h-0.5 rounded-full bg-primary" />
+            )}
+            <span className="relative [&_svg]:size-6 [&_svg]:shrink-0">
+                {children}
+                {badge && (
+                    <span className="absolute -right-1 -top-1 size-2 rounded-full bg-error-500" />
+                )}
+            </span>
+            {label && !lineSelector && <span className="text-c3">{label}</span>}
+        </button>
+    )
+)
+NavbarBottomItem.displayName = "NavbarBottomItem"
+
+export { NavbarBottom, NavbarBottomItem }

package/templates/navbar-top/navbar-top.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+import { ChevronLeft } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+export interface NavbarTopProps extends React.HTMLAttributes<HTMLElement> {
+    bordered?: boolean
+}
+
+const NavbarTop = React.forwardRef<HTMLElement, NavbarTopProps>(
+    ({ className, bordered = false, ...props }, ref) => (
+        <header
+            ref={ref}
+            className={cn(
+                "relative flex h-11 items-center justify-between gap-2 bg-background px-4",
+                bordered && "border-b border-grey-100",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+NavbarTop.displayName = "NavbarTop"
+
+const NavbarTopLeft = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => (
+    <button
+        ref={ref}
+        type="button"
+        aria-label="Back"
+        className={cn(
+            "-ml-2 inline-flex items-center gap-1 rounded-xs p-2 text-b2 text-foreground transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:text-grey-400 [&_svg]:size-6 [&_svg]:shrink-0",
+            className
+        )}
+        {...props}
+    >
+        {children ?? <ChevronLeft />}
+    </button>
+))
+NavbarTopLeft.displayName = "NavbarTopLeft"
+
+export interface NavbarTopTitleProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    subtitle?: string
+}
+
+const NavbarTopTitle = React.forwardRef<HTMLDivElement, NavbarTopTitleProps>(
+    ({ className, subtitle, children, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-s2 text-foreground",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            {subtitle && (
+                <div className="text-c1 text-muted-foreground">{subtitle}</div>
+            )}
+        </div>
+    )
+)
+NavbarTopTitle.displayName = "NavbarTopTitle"
+
+const NavbarTopRight = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("ml-auto flex items-center gap-2", className)}
+        {...props}
+    />
+))
+NavbarTopRight.displayName = "NavbarTopRight"
+
+export { NavbarTop, NavbarTopLeft, NavbarTopTitle, NavbarTopRight }

package/templates/page-control/page-control.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface PageControlProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    count: number
+    index: number
+    onChange?: (index: number) => void
+    orientation?: "horizontal" | "vertical"
+}
+
+const PageControl = React.forwardRef<HTMLDivElement, PageControlProps>(
+    (
+        { className, count, index, onChange, orientation = "horizontal", ...props },
+        ref
+    ) => (
+        <div
+            ref={ref}
+            role="tablist"
+            aria-label="Page control"
+            aria-orientation={orientation}
+            className={cn(
+                "flex items-center gap-2 p-2",
+                orientation === "vertical" && "flex-col",
+                className
+            )}
+            {...props}
+        >
+            {Array.from({ length: count }, (_, i) => (
+                <button
+                    key={i}
+                    type="button"
+                    role="tab"
+                    aria-label={`Page ${i + 1}`}
+                    aria-selected={i === index}
+                    tabIndex={i === index ? 0 : -1}
+                    disabled={!onChange}
+                    onClick={() => onChange?.(i)}
+                    className={cn(
+                        "size-2 rounded-full transition-colors focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none",
+                        i === index ? "bg-primary" : "bg-grey-200 hover:bg-grey-300"
+                    )}
+                />
+            ))}
+        </div>
+    )
+)
+PageControl.displayName = "PageControl"
+
+export { PageControl }

package/templates/pagination/pagination.tsx

@@ -0,0 +1,104 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+const Pagination = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLElement>) => (
+    <nav
+        role="navigation"
+        aria-label="pagination"
+        className={cn("mx-auto flex w-full justify-center", className)}
+        {...props}
+    />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+    HTMLUListElement,
+    React.HTMLAttributes<HTMLUListElement>
+>(({ className, ...props }, ref) => (
+    <ul
+        ref={ref}
+        className={cn("flex flex-row items-center gap-1", className)}
+        {...props}
+    />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+    HTMLLIElement,
+    React.LiHTMLAttributes<HTMLLIElement>
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+PaginationItem.displayName = "PaginationItem"
+
+export interface PaginationLinkProps
+    extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    isActive?: boolean
+}
+
+const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+    ({ className, isActive = false, ...props }, ref) => (
+        <a
+            ref={ref}
+            aria-current={isActive ? "page" : undefined}
+            className={cn(
+                "inline-flex size-12 items-center justify-center whitespace-nowrap rounded-xs text-b4 transition-colors focus-visible:outline-none focus-visible:shadow-focus aria-disabled:pointer-events-none aria-disabled:text-grey-400 [&_svg]:size-4",
+                isActive
+                    ? "bg-primary text-primary-foreground"
+                    : "text-foreground hover:bg-secondary",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = React.forwardRef<
+    HTMLAnchorElement,
+    PaginationLinkProps
+>(({ ...props }, ref) => (
+    <PaginationLink ref={ref} aria-label="Go to previous page" {...props}>
+        <ChevronLeft />
+    </PaginationLink>
+))
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+    ({ ...props }, ref) => (
+        <PaginationLink ref={ref} aria-label="Go to next page" {...props}>
+            <ChevronRight />
+        </PaginationLink>
+    )
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+    <span
+        aria-hidden="true"
+        className={cn(
+            "flex size-12 items-center justify-center text-muted-foreground",
+            className
+        )}
+        {...props}
+    >
+        <MoreHorizontal className="size-4" />
+        <span className="sr-only">More pages</span>
+    </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+    Pagination,
+    PaginationContent,
+    PaginationItem,
+    PaginationLink,
+    PaginationPrevious,
+    PaginationNext,
+    PaginationEllipsis,
+}

package/templates/progress/progress.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import { cn } from "../../lib/utils"
+
+export interface ProgressProps
+    extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+    label?: "left" | "right"
+    disabled?: boolean
+}
+
+const Progress = React.forwardRef<
+    React.ElementRef<typeof ProgressPrimitive.Root>,
+    ProgressProps
+>(({ className, value, label, disabled = false, ...props }, ref) => {
+    const percent = value ?? 0
+    const bar = (
+        <ProgressPrimitive.Root
+            ref={ref}
+            className={cn(
+                "relative h-2 w-full overflow-hidden rounded-full bg-grey-100",
+                !label && className
+            )}
+            value={value}
+            {...props}
+        >
+            <ProgressPrimitive.Indicator
+                className={cn(
+                    "h-full w-full flex-1 rounded-full transition-all",
+                    disabled ? "bg-grey-200" : "bg-primary"
+                )}
+                style={{ transform: `translateX(-${100 - percent}%)` }}
+            />
+        </ProgressPrimitive.Root>
+    )
+    if (!label) return bar
+    return (
+        <div className={cn("flex items-center gap-3", className)}>
+            {label === "left" && (
+                <span
+                    className={cn(
+                        "text-c2 font-medium",
+                        disabled ? "text-grey-400" : "text-muted-foreground"
+                    )}
+                >
+                    {percent}%
+                </span>
+            )}
+            {bar}
+            {label === "right" && (
+                <span
+                    className={cn(
+                        "text-c2 font-medium",
+                        disabled ? "text-grey-400" : "text-muted-foreground"
+                    )}
+                >
+                    {percent}%
+                </span>
+            )}
+        </div>
+    )
+})
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

package/templates/radio/radio.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { cn } from "../../lib/utils"
+
+const RadioGroup = React.forwardRef<
+    React.ElementRef<typeof RadioGroupPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <RadioGroupPrimitive.Root
+        ref={ref}
+        className={cn("grid gap-2", className)}
+        {...props}
+    />
+))
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+    React.ElementRef<typeof RadioGroupPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <RadioGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+            "aspect-square size-5 shrink-0 rounded-full border border-grey-300 bg-background transition-colors hover:border-grey-400 focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:border-grey-200 disabled:bg-muted data-[state=checked]:border-primary",
+            className
+        )}
+        {...props}
+    >
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+            <span className="block size-2.5 rounded-full bg-primary" />
+        </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+))
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }