cooterlabs 2.0.0 → 2.2.0

package/templates/page-control/page-control.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 PageControlProps
     extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
@@ -42,7 +37,7 @@ const PageControl = React.forwardRef<HTMLDivElement, PageControlProps>(
                     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",
+                        "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"
                     )}
                 />

package/templates/pagination/pagination.tsx

@@ -1,11 +1,6 @@
 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))
-}
+import { cn } from "../../lib/utils"
 
 const Pagination = ({
     className,
@@ -49,7 +44,7 @@ const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
             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",
+                "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",

package/templates/progress/progress.tsx

@@ -1,11 +1,6 @@
 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))
-}
+import { cn } from "../../lib/utils"
 
 export interface ProgressProps
     extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {

package/templates/radio/radio.tsx

@@ -1,11 +1,6 @@
 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))
-}
+import { cn } from "../../lib/utils"
 
 const RadioGroup = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -26,7 +21,7 @@ const RadioGroupItem = React.forwardRef<
     <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",
+            "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}

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

@@ -1,11 +1,6 @@
 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))
-}
+import { cn } from "../../lib/utils"
 
 const stepperCircleStates = {
     completed: "bg-primary text-primary-foreground",

package/templates/tabs/tabs.tsx

@@ -1,11 +1,6 @@
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
-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"
 
 const Tabs = TabsPrimitive.Root
 
@@ -16,7 +11,7 @@ const TabsList = React.forwardRef<
     <TabsPrimitive.List
         ref={ref}
         className={cn(
-            "inline-flex items-center justify-center gap-1 rounded-xs bg-secondary p-1",
+            "inline-flex items-center justify-center gap-1 rounded-full bg-secondary p-2",
             className
         )}
         {...props}
@@ -31,7 +26,7 @@ const TabsTrigger = React.forwardRef<
     <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 ring-offset-background 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 disabled:text-grey-400 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-100",
+            "inline-flex h-10 items-center justify-center whitespace-nowrap rounded-full px-4 text-b4 text-accent transition-colors hover:text-foreground hover:bg-primary-50 focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:text-disabled data-[state=active]:bg-primary-500 data-[state=active]:text-white data-[state=active]:shadow-100",
             className
         )}
         {...props}
@@ -46,7 +41,7 @@ const TabsContent = React.forwardRef<
     <TabsPrimitive.Content
         ref={ref}
         className={cn(
-            "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "mt-2 focus-visible:outline-none focus-visible:shadow-focus",
             className
         )}
         {...props}

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-24 w-full rounded-xs border border-input bg-background px-4 py-3 text-b1 text-foreground ring-offset-background transition-colors placeholder:text-muted-foreground hover:border-grey-300 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",
+                    "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

@@ -1,11 +1,6 @@
 import * as React from "react"
 import * as SwitchPrimitive from "@radix-ui/react-switch"
-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"
 
 const Toggle = React.forwardRef<
     React.ElementRef<typeof SwitchPrimitive.Root>,
@@ -14,7 +9,7 @@ const Toggle = React.forwardRef<
     <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 ring-offset-background transition-colors hover:bg-grey-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:hover:bg-primary-700",
+            "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}

package/templates/tooltip/tooltip.tsx

@@ -1,11 +1,6 @@
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-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"
 
 const TooltipProvider = TooltipPrimitive.Provider
 
@@ -22,7 +17,7 @@ const TooltipContent = React.forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             className={cn(
-                "z-50 overflow-hidden rounded-xxs bg-grey-900 px-3 py-1.5 text-c2 font-medium text-white shadow-300",
+                "z-50 overflow-hidden rounded-xs bg-primary-500 px-3 py-1.5 text-b3 font-medium text-white shadow-300",
                 className
             )}
             {...props}