Checkpoint

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tawasukha/ui",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "type": "module",
   "types": "dist/index.d.ts",
   "exports": {

src/components/dialog.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { InputText } from "./inputText"
 import { RawTextArea } from "./inputTextArea"
 import { create } from "./modal-promise"
@@ -38,9 +38,15 @@ function useDialogInput({
 
   const Input = React.useMemo(() => {
     return !option ? null : option === "input" ? (
-      <InputText placeholder={placeholder} className="mt-2" ref={refInput} onKeyDown={onKeyDown} />
+      <InputText
+        autoFocus
+        placeholder={placeholder}
+        className="mt-2"
+        ref={refInput}
+        onKeyDown={onKeyDown}
+      />
     ) : (
-      <RawTextArea placeholder={placeholder} className="mt-2 h-28" ref={refInput} />
+      <RawTextArea autoFocus placeholder={placeholder} className="mt-2 h-28" ref={refInput} />
     )
   }, [])
 

src/components/inputNumber.tsx

@@ -1,6 +1,6 @@
 import { NumericFormat, type NumericFormatProps } from "react-number-format"
 import { cva, type VariantProps } from "../helpers/cva"
-import { forwardRef, useMemo } from "react"
+import { forwardRef, useCallback, useMemo, useRef } from "react"
 
 const _input = cva(
   [
@@ -37,14 +37,10 @@ export interface InputNumberProps
   onChange?: (value: number | undefined) => void
 }
 
-export const InputNumber = forwardRef<HTMLInputElement,InputNumberProps>(function InputNumber({
-  mode = "base",
-  className,
-  onChange,
-  value: _value,
-  decimal,
-  ...props
-},ref) {
+export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(function InputNumber(
+  { mode = "base", className, onChange, value: _value, decimal, ...props },
+  ref,
+) {
   const value = useMemo(() => numberParser(_value), [_value])
   const decimalScale = useMemo(
     () => (decimal ? (typeof decimal === "boolean" ? 2 : decimal) : 0),

src/components/inputPassword.tsx

@@ -40,21 +40,23 @@ const _input = cva(
 
 export interface InputPasswordProps extends Omit<InputProps, "type">, VariantProps<typeof _input> {}
 
-export const InputPassword = forwardRef<HTMLInputElement,InputPasswordProps>(function InputPassword({ mode = "base", className, ...props },ref) {
-  const { value, toggle, eye } = useEye(mode)
+export const InputPassword = forwardRef<HTMLInputElement, InputPasswordProps>(
+  function InputPassword({ mode = "base", className, ...props }, ref) {
+    const { value, toggle, eye } = useEye(mode)
 
-  return (
-    <div className="relative flex items-center">
-      <button onClick={toggle} className="absolute right-3 focus:outline-none">
-        {eye}
-      </button>
+    return (
+      <div className="relative flex items-center">
+        <button type="button" onClick={toggle} className="absolute right-3 focus:outline-none">
+          {eye}
+        </button>
 
-      <input
-        ref={ref}
-        type={value ? "text" : "password"}
-        {...props}
-        className={_input({ mode, className })}
-      />
-    </div>
-  )
-})
+        <input
+          ref={ref}
+          type={value ? "text" : "password"}
+          {...props}
+          className={_input({ mode, className })}
+        />
+      </div>
+    )
+  },
+)

src/components/inputSelect.tsx

@@ -274,6 +274,7 @@ export const InputSelect = forwardRef(function InputSelect<T>(
         >
           {multiple ? displayValue : isOpen ? <span></span> : displayValue}
           <input
+            disabled={disabled}
             placeholder="Select ..."
             className={cx(
               "place-base-3 bg-[transparent!important] focus:outline-none text-md",

src/components/upload/Uploader.tsx

@@ -4,6 +4,7 @@ import { ProgressBar } from "./ProgressBar"
 import { useDropzone, type Accept } from "react-dropzone"
 import { useCallback, useState } from "react"
 import { uploadFile } from "./util"
+import { cx } from "src/helpers"
 
 export type UploaderProps = {
   responseKey?: string
@@ -54,8 +55,10 @@ export function Uploader({
   return (
     <div
       {...getRootProps({
-        className:
-          "relative flex flex-col p-4 w-40 items-center justify-center border rounded-lg border-base-2 h-28 cursor-pointer border-dashed",
+        className: cx(
+          "relative flex flex-col p-4 items-center justify-center rounded-lg",
+          disabled ? "" : "w-40 border border-base-2 h-28 cursor-pointer border-dashed",
+        ),
       })}
     >
       {progress === 0 ? (