cooterlabs 1.0.1 → 2.0.0

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 }

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

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+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:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 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,84 @@
+import * as React from "react"
+import { ChevronLeft } from "lucide-react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+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:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 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,55 @@
+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))
+}
+
+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 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",
+                        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,109 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const 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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-disabled:pointer-events-none aria-disabled:text-grey-400 [&_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,69 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+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,41 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+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 ring-offset-background transition-colors hover:border-grey-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:border-grey-200 disabled:bg-muted data-[state=checked]:border-primary",
+            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 }

package/templates/stepper/stepper.tsx

@@ -0,0 +1,93 @@
+import * as React from "react"
+import { Check } from "lucide-react"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+const stepperCircleStates = {
+    completed: "bg-primary text-primary-foreground",
+    current: "border border-primary bg-background text-primary",
+    upcoming: "border border-grey-200 bg-background text-grey-400",
+}
+
+const stepperLabelStates = {
+    completed: "text-foreground",
+    current: "text-primary",
+    upcoming: "text-grey-400",
+}
+
+const Stepper = React.forwardRef<
+    HTMLOListElement,
+    React.OlHTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => (
+    <ol
+        ref={ref}
+        className={cn("flex w-full items-center", className)}
+        {...props}
+    />
+))
+Stepper.displayName = "Stepper"
+
+export interface StepperItemProps
+    extends React.LiHTMLAttributes<HTMLLIElement> {
+    index: number
+    state?: keyof typeof stepperCircleStates
+}
+
+const StepperItem = React.forwardRef<HTMLLIElement, StepperItemProps>(
+    ({ className, index, state = "upcoming", children, ...props }, ref) => (
+        <li
+            ref={ref}
+            aria-current={state === "current" ? "step" : undefined}
+            className={cn("flex items-center gap-2", className)}
+            {...props}
+        >
+            <span
+                className={cn(
+                    "flex size-8 shrink-0 items-center justify-center rounded-full text-c2 transition-colors",
+                    stepperCircleStates[state]
+                )}
+            >
+                {state === "completed" ? (
+                    <Check className="size-4" aria-hidden="true" />
+                ) : (
+                    index
+                )}
+            </span>
+            {children != null && (
+                <span className={cn("text-c1", stepperLabelStates[state])}>
+                    {children}
+                </span>
+            )}
+        </li>
+    )
+)
+StepperItem.displayName = "StepperItem"
+
+export interface StepperSeparatorProps
+    extends React.HTMLAttributes<HTMLLIElement> {
+    completed?: boolean
+}
+
+const StepperSeparator = ({
+    className,
+    completed = false,
+    ...props
+}: StepperSeparatorProps) => (
+    <li
+        role="presentation"
+        aria-hidden="true"
+        className={cn(
+            "mx-2 h-px flex-1",
+            completed ? "bg-primary" : "bg-grey-200",
+            className
+        )}
+        {...props}
+    />
+)
+StepperSeparator.displayName = "StepperSeparator"
+
+export { Stepper, StepperItem, StepperSeparator }