Migrate: textfield, button, label, dialog, sheet and more

.vscode/settings.json

@@ -47,7 +47,7 @@
   "tailwindCSS.experimental.configFile": {
     "packages/react/src/react/styles/tailwind.css": "packages/react/**",
     "examples/erp/src/app/(admin)/admin/tailwind.css": "examples/erp/src/app/(admin)/admin/**",
-    "examples/ui-playground/src/app/playground/tailwind.css": "examples/ui-playground/**"
+    "examples/ui-playground/src/styles/tailwind.css": "examples/ui-playground/**"
   },
   "tailwindCSS.experimental.classRegex": [
     ["clsx\\(.*?\\)(?!\\])", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],

examples/erp/genseki/auth/setup/setup.client.tsx

@@ -7,13 +7,13 @@ import { useRouter } from 'next/navigation'
 import z from 'zod'
 
 import {
+  AriaTextField,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormMessage,
   SubmitButton,
-  TextField,
   toast,
 } from '@genseki/react'
 
@@ -74,7 +74,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <TextField
+                <AriaTextField
                   {...field}
                   placeholder="full name..."
                   label="Full Name"
@@ -91,7 +91,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <TextField
+                <AriaTextField
                   {...field}
                   type="email"
                   placeholder="email..."
@@ -109,7 +109,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <TextField
+                <AriaTextField
                   {...field}
                   type="password"
                   placeholder="password..."
@@ -128,7 +128,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <TextField
+                <AriaTextField
                   {...field}
                   type="password"
                   placeholder="confirm password..."

examples/erp/genseki/collections/posts.client.tsx

@@ -250,13 +250,13 @@ const CancelButton = ({ pending }: CancelButtonProps) => {
   } = useFormContext()
   const { navigate } = useNavigation()
 
-  const handleCancel = () => {
+  const handleCancel: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     if ((isDirty && confirm('You have unsaved changes, sure to leave?')) || !isDirty)
       return navigate('./')
   }
 
   return (
-    <Button size="md" variant="destruction" onClick={handleCancel} isDisabled={pending}>
+    <Button variant="destructive" onClick={handleCancel} disabled={pending}>
       {pending ? 'Submitting...' : 'Cancel'}
     </Button>
   )
@@ -310,7 +310,9 @@ export const CustomCreatePage = () => {
         .join(',')
     )
 
-  const handleSubmit: SubmitHandler<CreatePostFields> = (data) => mutation.mutateAsync(data)
+  const handleSubmit: SubmitHandler<CreatePostFields> = (data) => {
+    mutation.mutateAsync(data)
+  }
 
   return (
     <CreateFormLayout>

examples/ui-playground/src/app/layout.tsx

@@ -1,3 +1,5 @@
+import '../styles/tailwind.css'
+
 import type { Metadata } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'