cooterlabs 2.0.0 → 2.2.0

package/templates/avatar/avatar.tsx

@@ -1,11 +1,6 @@
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
-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 avatarSizes = {
     tiny: "h-6 w-6",

package/templates/badge/badge.tsx

@@ -1,127 +1,125 @@
 import * as React from "react"
 import { X } from "lucide-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))
-}
-
-const badgeVariants = {
+const badgeColors = {
+    outline: {
+        default: "border-[1.5px] border-primary-500 bg-background text-primary-600",
+        success: "border-[1.5px] border-success-500 bg-background text-success-600",
+        info: "border-[1.5px] border-info-500 bg-background text-info-600",
+        warning: "border-[1.5px] border-warning-500 bg-background text-warning-600",
+        error: "border-[1.5px] border-error-500 bg-background text-error-600",
+    },
     filled: {
-        primary: "bg-primary-600 text-white",
-        grey: "bg-grey-600 text-white",
+        default: "bg-primary-600 text-white",
         success: "bg-success-600 text-white",
         info: "bg-info-600 text-white",
         warning: "bg-warning-600 text-white",
         error: "bg-error-600 text-white",
     },
-    soft: {
-        primary: "bg-primary-50 text-primary-600",
-        grey: "bg-grey-100 text-grey-600",
-        success: "bg-success-50 text-success-600",
-        info: "bg-info-50 text-info-600",
-        warning: "bg-warning-50 text-warning-600",
-        error: "bg-error-50 text-error-600",
-    },
-}
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-    color?: keyof (typeof badgeVariants)["filled"]
-    variant?: keyof typeof badgeVariants
 }
 
-const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
-    ({ className, color = "primary", variant = "filled", ...props }, ref) => (
-        <div
-            ref={ref}
-            className={cn(
-                "inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 text-c2 font-medium [&_svg]:size-3 [&_svg]:shrink-0",
-                badgeVariants[variant][color],
-                className
-            )}
-            {...props}
-        />
-    )
-)
-Badge.displayName = "Badge"
-
-const chipVariants = {
+const chipInteractions = {
     outline: {
-        default:
-            "border border-primary-500 bg-background text-primary-600 hover:bg-accent active:bg-primary-100",
-        success:
-            "border border-success-500 bg-background text-success-600 hover:bg-success-50 active:bg-success-100",
-        info: "border border-info-500 bg-background text-info-600 hover:bg-info-50 active:bg-info-100",
-        warning:
-            "border border-warning-500 bg-background text-warning-600 hover:bg-warning-50 active:bg-warning-100",
-        error: "border border-error-500 bg-background text-error-600 hover:bg-error-50 active:bg-error-100",
+        default: "hover:bg-accent active:bg-primary-100",
+        success: "hover:bg-success-50 active:bg-success-100",
+        info: "hover:bg-info-50 active:bg-info-100",
+        warning: "hover:bg-warning-50 active:bg-warning-100",
+        error: "hover:bg-error-50 active:bg-error-100",
     },
     filled: {
-        default: "bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800",
-        success: "bg-success-600 text-white hover:bg-success-700 active:bg-success-800",
-        info: "bg-info-600 text-white hover:bg-info-700 active:bg-info-800",
-        warning: "bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800",
-        error: "bg-error-600 text-white hover:bg-error-700 active:bg-error-800",
+        default: "hover:bg-primary-700 active:bg-primary-800",
+        success: "hover:bg-success-700 active:bg-success-800",
+        info: "hover:bg-info-700 active:bg-info-800",
+        warning: "hover:bg-warning-700 active:bg-warning-800",
+        error: "hover:bg-error-700 active:bg-error-800",
     },
 }
 
-const chipSizes = {
-    medium: "h-10 gap-2 px-4 text-b4 [&_svg]:size-4",
-    small: "h-8 gap-1.5 px-3 text-c2 [&_svg]:size-4",
-    tiny: "h-6 gap-1 px-2 text-c3 [&_svg]:size-3",
+const badgeSizes = {
+    badge: {
+        medium: "h-10 gap-1 p-3 text-b4 rounded-[12px] [&_svg]:size-3",
+        small: "h-8 gap-1 p-2 text-c2 rounded-[8px] [&_svg]:size-3",
+        tiny: "h-6 gap-1 p-1.5 text-c3 rounded-[8px] [&_svg]:size-3",
+    },
+    chip: {
+        medium: "h-10 gap-2 p-3 rounded-[12px] text-b4 [&_svg]:size-4",
+        small: "h-8 gap-1.5 p-2 rounded-[8px] text-c2 [&_svg]:size-4",
+        tiny: "h-6 gap-1 p-1.5 rounded-[8px] text-c3 [&_svg]:size-3",
+    },
 }
 
-export interface ChipProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    color?: keyof (typeof chipVariants)["outline"]
-    variant?: keyof typeof chipVariants
-    size?: keyof typeof chipSizes
+const iconOnlySizes = {
+    badge: { medium: "w-6 px-5", small: "w-6 px-3", tiny: "w-4 px-2" },
+    chip: { medium: "w-6 px-5", small: "w-6 px-3", tiny: "w-4 px-2" },
+}
+
+export interface BadgeProps
+    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    type?: "badge" | "chip"
+    variant?: keyof typeof badgeColors
+    color?: keyof (typeof badgeColors)["filled"]
+    size?: keyof (typeof badgeSizes)["badge"]
+    iconOnly?: boolean
+    // chip only
     selected?: boolean
     onDismiss?: () => void
 }
 
-const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(
+const Badge = React.forwardRef<HTMLElement, BadgeProps>(
     (
         {
             className,
+            type = "badge",
+            variant = "filled",
             color = "default",
-            variant = "outline",
             size = "medium",
+            iconOnly = false,
             selected = false,
             onDismiss,
             children,
             ...props
         },
         ref
-    ) => (
-        <button
-            ref={ref}
-            type="button"
-            aria-pressed={selected || undefined}
-            className={cn(
-                "inline-flex items-center justify-center whitespace-nowrap rounded-full font-medium 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 disabled:border-grey-200 disabled:bg-muted disabled:text-grey-400 [&_svg]:shrink-0",
-                chipVariants[selected ? "filled" : variant][color],
-                chipSizes[size],
-                className
-            )}
-            {...props}
-        >
-            {children}
-            {onDismiss && (
-                <X
-                    role="button"
-                    aria-label="Remove"
-                    className="cursor-pointer"
-                    onClick={(event) => {
-                        event.stopPropagation()
-                        onDismiss()
-                    }}
-                />
-            )}
-        </button>
-    )
+    ) => {
+        const isChip = type === "chip"
+        const activeVariant = selected ? "filled" : variant
+        const Comp = (isChip ? "button" : "div") as "button"
+        return (
+            <Comp
+                ref={ref as React.Ref<HTMLButtonElement>}
+                {...(isChip && {
+                    type: "button" as const,
+                    "aria-pressed": selected || undefined,
+                })}
+                className={cn(
+                    "inline-flex items-center justify-center whitespace-nowrap font-medium [&_svg]:shrink-0",
+                    isChip &&
+                        " transition-colors focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:border-grey-200 disabled:bg-muted disabled:text-grey-400",
+                    badgeColors[activeVariant][color],
+                    isChip && chipInteractions[activeVariant][color],
+                    badgeSizes[type][size],
+                    iconOnly && iconOnlySizes[type][size],
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                {isChip && onDismiss && (
+                    <X
+                        role="button"
+                        aria-label="Remove"
+                        className="cursor-pointer"
+                        onClick={(event) => {
+                            event.stopPropagation()
+                            onDismiss()
+                        }}
+                    />
+                )}
+            </Comp>
+        )
+    }
 )
-Chip.displayName = "Chip"
+Badge.displayName = "Badge"
 
-export { Badge, Chip }
+export { Badge }

package/templates/breadcrumb/breadcrumb.tsx

@@ -1,11 +1,6 @@
 import * as React from "react"
 import { 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 Breadcrumb = React.forwardRef<
     HTMLElement,
@@ -47,7 +42,7 @@ const BreadcrumbLink = React.forwardRef<
     <a
         ref={ref}
         className={cn(
-            "rounded-xxs text-b3 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 aria-disabled:pointer-events-none aria-disabled:text-grey-400",
+            "rounded-xxs text-b3 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:shadow-focus aria-disabled:pointer-events-none aria-disabled:text-grey-400",
             className
         )}
         {...props}

package/templates/button/button.tsx

@@ -1,33 +1,28 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-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 buttonVariants = {
-    filled: "bg-primary text-primary-foreground hover:bg-primary-700 active:bg-primary-800 disabled:bg-muted disabled:text-grey-400",
+    filled: "bg-primary text-white hover:bg-primary-700 active:bg-primary-800 disabled:bg-muted disabled:text-grey-400",
     outline:
         "border border-primary bg-transparent text-primary hover:bg-accent active:bg-primary-100 disabled:border-grey-200 disabled:text-grey-400",
     clear: "bg-transparent text-primary hover:bg-accent active:bg-primary-100 disabled:text-grey-400",
 }
 
 const buttonSizes = {
-    giant: "h-14 gap-2 px-6 text-btn-giant",
-    large: "h-12 gap-2 px-5 text-btn-large",
-    medium: "h-10 gap-2 px-4 text-btn-medium",
-    small: "h-8 gap-1 px-3 text-btn-small",
-    tiny: "h-6 gap-1 px-2 text-btn-tiny",
+    giant: "h-14 gap-2 px-6 [font-size:var(--text-btn-giant)] [line-height:var(--text-btn-giant--line-height)] [font-weight:var(--text-btn-giant--font-weight)] rounded-md",
+    large: "h-12 gap-2 px-5 [font-size:var(--text-btn-large)] [line-height:var(--text-btn-large--line-height)] [font-weight:var(--text-btn-large--font-weight)] rounded-md",
+    medium: "h-10 gap-2 px-4 [font-size:var(--text-btn-medium)] [line-height:var(--text-btn-medium--line-height)] [font-weight:var(--text-btn-medium--font-weight)] rounded-md",
+    small: "h-8 gap-1 px-3 [font-size:var(--text-btn-small)] [line-height:var(--text-btn-small--line-height)] [font-weight:var(--text-btn-small--font-weight)] rounded-sm",
+    tiny: "h-6 gap-1 px-2 [font-size:var(--text-btn-tiny)] [line-height:var(--text-btn-tiny--line-height)] [font-weight:var(--text-btn-tiny--font-weight)] rounded-sm",
 }
 
 const iconOnlySizes = {
-    giant: "h-14 w-14 text-btn-giant",
-    large: "h-12 w-12 text-btn-large",
-    medium: "h-10 w-10 text-btn-medium",
-    small: "h-8 w-8 text-btn-small",
-    tiny: "h-6 w-6 text-btn-tiny",
+    giant: "h-14 w-14 [font-size:var(--text-btn-giant)] [line-height:var(--text-btn-giant--line-height)] [font-weight:var(--text-btn-giant--font-weight)]",
+    large: "h-12 w-12 [font-size:var(--text-btn-large)] [line-height:var(--text-btn-large--line-height)] [font-weight:var(--text-btn-large--font-weight)]",
+    medium: "h-10 w-10 [font-size:var(--text-btn-medium)] [line-height:var(--text-btn-medium--line-height)] [font-weight:var(--text-btn-medium--font-weight)]",
+    small: "h-8 w-8 [font-size:var(--text-btn-small)] [line-height:var(--text-btn-small--line-height)] [font-weight:var(--text-btn-small--font-weight)]",
+    tiny: "h-6 w-6 [font-size:var(--text-btn-tiny)] [line-height:var(--text-btn-tiny--line-height)] [font-weight:var(--text-btn-tiny--font-weight)]",
 }
 
 export interface ButtonProps
@@ -54,9 +49,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         return (
             <Comp
                 className={cn(
-                    "inline-flex items-center justify-center whitespace-nowrap rounded-xs font-semibold 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 [&_svg]:size-[1.25em] [&_svg]:shrink-0",
-                    buttonVariants[variant],
+                    "inline-flex items-center justify-center whitespace-nowrap font-semibold transition-colors focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none [&_svg]:size-[1.25em] [&_svg]:shrink-0",
                     iconOnly ? iconOnlySizes[size] : buttonSizes[size],
+                    buttonVariants[variant],
                     className
                 )}
                 ref={ref}

package/templates/button-group/button-group.tsx

@@ -1,10 +1,5 @@
 import * as React from "react"
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs))
-}
+import { cn } from "../../lib/utils"
 
 // Figma: Button Group items share Button's outline style and full size ramp
 // (Position=Left/Center/Right joined edge-to-edge, State=Selected fills).
@@ -77,7 +72,7 @@ const ButtonGroupItem = React.forwardRef<
                 onClick?.(event)
             }}
             className={cn(
-                "-ml-px inline-flex items-center justify-center whitespace-nowrap border border-primary font-semibold ring-offset-background transition-colors first:-ml-0 first:rounded-l-xs last:rounded-r-xs focus-visible:z-10 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:text-grey-400 [&_svg]:size-[1.25em] [&_svg]:shrink-0",
+                "-ml-px inline-flex items-center justify-center whitespace-nowrap border border-primary font-semibold transition-colors first:-ml-0 first:rounded-l-md last:rounded-r-md focus-visible:z-10 focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:border-grey-200 disabled:text-grey-400 [&_svg]:size-[1.25em] [&_svg]:shrink-0",
                 iconOnly ? iconOnlySizes[ctx.size] : buttonGroupItemSizes[ctx.size],
                 selected
                     ? "z-10 bg-primary text-primary-foreground"

package/templates/card/card.tsx

@@ -1,10 +1,5 @@
 import * as React from "react"
-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 Card = React.forwardRef<
     HTMLDivElement,

package/templates/checkbox/checkbox.tsx

@@ -1,12 +1,7 @@
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check, Minus } 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 Checkbox = React.forwardRef<
     React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -15,7 +10,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
         ref={ref}
         className={cn(
-            "group peer size-5 shrink-0 rounded-xxs 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+            "group peer size-5 shrink-0 rounded-xxs 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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
             className
         )}
         {...props}

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

@@ -1,12 +1,7 @@
 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))
-}
+import { cn } from "../../lib/utils"
 
 const surfaceClasses =
     "z-50 min-w-48 overflow-hidden bg-popover text-popover-foreground rounded-xs shadow-400 border border-grey-100 p-1"

package/templates/dialog/dialog.tsx

@@ -1,12 +1,7 @@
 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))
-}
+import { cn } from "../../lib/utils"
 
 const Dialog = DialogPrimitive.Root
 
@@ -46,7 +41,7 @@ const DialogContent = React.forwardRef<
             {...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">
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-xxs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none">
                 <X className="size-5" />
                 <span className="sr-only">Close</span>
             </DialogPrimitive.Close>

package/templates/dropdown/dropdown.tsx

@@ -1,12 +1,7 @@
 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))
-}
+import { cn } from "../../lib/utils"
 
 const surfaceClasses =
     "z-50 min-w-48 overflow-hidden bg-popover text-popover-foreground rounded-xs shadow-400 border border-grey-100 p-1"

package/templates/input/input.tsx

@@ -1,53 +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))
-}
-
-const inputVariants = {
+export 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",
+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",
+    },
 }
 
-const inputStatuses = {
-    success: "border-success",
-    info: "border-info",
-    warning: "border-warning",
-    error: "border-error",
+export const statusTextColors = {
+    success: "text-success-500",
+    info: "text-info-500",
+    warning: "text-warning-500",
+    error: "text-error-500",
 }
 
 export interface InputProps
     extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     variant?: keyof typeof inputVariants
     size?: keyof typeof inputSizes
-    status?: keyof typeof inputStatuses
+    status?: keyof typeof statusTextColors
+    helperText?: string
+    icon?: React.ReactNode
+    iconPosition?: "left" | "right"
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
     (
-        { className, type, variant = "outline", size = "large", status, ...props },
+        { className, type, variant = "outline", size = "large", status, helperText, icon, iconPosition = "left", ...props },
         ref
     ) => {
         return (
-            <input
-                type={type}
-                className={cn(
-                    "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
+            <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"
-
-export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs))
-}
+import { cn } from "../../lib/utils"
 
 const Label = React.forwardRef<
     React.ElementRef<typeof LabelPrimitive.Root>,

package/templates/list/list.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"
 
 const List = React.forwardRef<
     HTMLDivElement,

package/templates/loader/loader.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"
 
 const loaderSizes = {
     tiny: "h-6 w-6 border-2",

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

@@ -1,10 +1,5 @@
 import * as React from "react"
-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 NavbarBottom = React.forwardRef<
     HTMLElement,
@@ -52,7 +47,7 @@ const NavbarBottomItem = React.forwardRef<
             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",
+                "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
             )}

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

@@ -1,11 +1,6 @@
 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))
-}
+import { cn } from "../../lib/utils"
 
 export interface NavbarTopProps extends React.HTMLAttributes<HTMLElement> {
     bordered?: boolean
@@ -35,7 +30,7 @@ const NavbarTopLeft = React.forwardRef<
         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",
+            "-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}