From 1e876ae04fbc7810cc270c3f30c5de7eb91ad975 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sat, 1 Mar 2025 16:14:03 +0800
Subject: [PATCH] feat: refactor Button and Input components to use Headless UI

---
 app/components/ui/button.tsx | 3 ++-
 app/components/ui/input.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index a3f03fa..f2f9eba 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -1,3 +1,4 @@
+import { Button as HeadlessButton } from '@headlessui/react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
 import { twMerge } from 'tailwind-merge'
@@ -52,7 +53,7 @@ export const Button = <C extends ElementType = 'button'>({
   className,
   ...properties
 }: ButtonProperties<C>) => {
-  const Component = as || 'button'
+  const Component = as || HeadlessButton
   const classes = twMerge(buttonVariants({ variant, size, className }))
 
   return (
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
index 490954d..7dd9ca1 100644
--- a/app/components/ui/input.tsx
+++ b/app/components/ui/input.tsx
@@ -1,4 +1,4 @@
-import { Field, Label, Input as UIInput } from '@headlessui/react'
+import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
 import { useState, type ComponentProps, type ReactNode } from 'react'
 import {
   get,
@@ -55,7 +55,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
       <Label className="mb-1 block text-gray-700">
         {label} {error && <span className="text-red-500">{error.message}</span>}
       </Label>
-      <UIInput
+      <HeadlessInput
         type={inputType}
         className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
         placeholder={inputType === 'password' ? '******' : placeholder}