cooterlabs 1.0.2 → 2.1.0

package/templates/select/select.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown } from "lucide-react"
+import { cn } from "../../lib/utils"
+import {
+    inputVariants,
+    inputSizes,
+    inputStatuses,
+    statusTextColors,
+} from "./input"
+
+const Select = SelectPrimitive.Root
+const SelectGroup = SelectPrimitive.Group
+const SelectValue = SelectPrimitive.Value
+
+export interface SelectTriggerProps
+    extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+    variant?: keyof typeof inputVariants
+    size?: keyof typeof inputSizes
+    status?: keyof typeof statusTextColors
+}
+
+const SelectTrigger = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Trigger>,
+    SelectTriggerProps
+>(
+    (
+        {
+            className,
+            variant = "outline",
+            size = "large",
+            status,
+            children,
+            ...props
+        },
+        ref
+    ) => (
+        <SelectPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                "flex w-full items-center justify-between gap-2 rounded-xs border-[1.5px] text-foreground transition-colors focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:border-grey-200 disabled:bg-secondary disabled:text-grey-400 data-[placeholder]:text-muted-foreground [&>span]:truncate",
+                inputVariants[variant],
+                inputSizes[size],
+                status && inputStatuses[variant][status],
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <SelectPrimitive.Icon asChild>
+                <ChevronDown
+                    className={cn(
+                        "size-4 shrink-0 text-muted-foreground",
+                        status && statusTextColors[status]
+                    )}
+                />
+            </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+    )
+)
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectContent = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", sideOffset = 4, ...props }, ref) => (
+    <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+            ref={ref}
+            position={position}
+            sideOffset={sideOffset}
+            className={cn(
+                "z-50 max-h-72 min-w-[var(--radix-select-trigger-width)] overflow-y-auto rounded-xs border border-grey-100 bg-popover text-popover-foreground shadow-400",
+                className
+            )}
+            {...props}
+        >
+            <SelectPrimitive.Viewport className="p-1">
+                {children}
+            </SelectPrimitive.Viewport>
+        </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectItem = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item
+        ref={ref}
+        className={cn(
+            "relative flex h-10 cursor-default select-none items-center gap-2 rounded-xxs px-3 pr-9 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",
+            className
+        )}
+        {...props}
+    >
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        <SelectPrimitive.ItemIndicator className="absolute right-3">
+            <Check />
+        </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+export {
+    Select,
+    SelectGroup,
+    SelectValue,
+    SelectTrigger,
+    SelectContent,
+    SelectItem,
+}

package/templates/stepper/stepper.tsx

@@ -0,0 +1,88 @@
+import * as React from "react"
+import { Check } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+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 }

package/templates/tabs/tabs.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "../../lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+    React.ComponentRef<typeof TabsPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.List
+        ref={ref}
+        className={cn(
+            "inline-flex items-center justify-center gap-1 rounded-xs bg-secondary p-1",
+            className
+        )}
+        {...props}
+    />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+    React.ComponentRef<typeof TabsPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            "inline-flex h-10 items-center justify-center whitespace-nowrap rounded-xxs px-4 text-b4 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:text-grey-400 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-100",
+            className
+        )}
+        {...props}
+    />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+    React.ComponentRef<typeof TabsPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Content
+        ref={ref}
+        className={cn(
+            "mt-2 focus-visible:outline-none focus-visible:shadow-focus",
+            className
+        )}
+        {...props}
+    />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/templates/textarea/textarea.tsx

@@ -1,10 +1,5 @@
 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))
-}
+import { cn } from "../../lib/utils"
 
 export interface TextareaProps
     extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
@@ -14,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         return (
             <textarea
                 className={cn(
-                    "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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 min-h-24 w-full rounded-xs border border-input bg-background px-4 py-3 text-b1 text-foreground transition-colors placeholder:text-muted-foreground hover:border-grey-300 focus-visible:outline-none focus-visible:shadow-focus aria-invalid:border-error disabled:pointer-events-none disabled:border-grey-200 disabled:bg-secondary disabled:text-grey-400",
                     className
                 )}
                 ref={ref}

package/templates/toggle/toggle.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { cn } from "../../lib/utils"
+
+const Toggle = React.forwardRef<
+    React.ElementRef<typeof SwitchPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <SwitchPrimitive.Root
+        ref={ref}
+        className={cn(
+            "peer inline-flex h-6 w-11 shrink-0 items-center rounded-full bg-grey-200 px-0.5 transition-colors hover:bg-grey-300 focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:hover:bg-primary-700",
+            className
+        )}
+        {...props}
+    >
+        <SwitchPrimitive.Thumb className="pointer-events-none block size-5 rounded-full bg-background shadow-100 transition-transform data-[state=checked]:translate-x-5" />
+    </SwitchPrimitive.Root>
+))
+Toggle.displayName = "Toggle"
+
+export { Toggle }

package/templates/tooltip/tooltip.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from "../../lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, children, ...props }, ref) => (
+    <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={cn(
+                "z-50 overflow-hidden rounded-xs bg-primary-500 px-3 py-1.5 text-b3 font-medium text-white shadow-300",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <TooltipPrimitive.Arrow className="fill-grey-900" />
+        </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent }