Implemented AmountInput component.

apps/docs/src/components/App.tsx

@@ -1,6 +1,7 @@
 import { getFullnodeUrl, SuiClient } from '@mysten/sui/client';
 import { SuinsClient } from '@mysten/suins';
 import AddressInput from '@suiware/kit/AddressInput';
+import AmountInput from '@suiware/kit/AmountInput';
 import { FC } from 'react';
 import Layout from '~~/components/layout/Layout';
 
@@ -17,8 +18,13 @@ const suinsClient = new SuinsClient({
 const App: FC = () => {
   return (
     <Layout>
-      <h2 className='text-2xl mb-4'>Components:</h2>
+      <h2 className='text-2xl mb-4'>Components</h2>
+
+      <div className='text-md mt-4 mb-1'>AddressInput</div>
       <AddressInput value='0x0' onChange={(value) => console.log(value)} suinsClient={suinsClient}/>
+
+      <div className='text-md mt-4 mb-1'>AmountInput</div>
+      <AmountInput value='' onChange={(value) => console.log(value)}/>
     </Layout>
   )
 }

packages/kit/package.json

@@ -47,6 +47,11 @@
       "types": "./dist/components/AddressInput.d.ts",
       "import": "./dist/components/AddressInput.mjs",
       "require": "./dist/components/AddressInput.js"
+    },
+    "./AmountInput": {
+      "types": "./dist/components/AmountInput.d.ts",
+      "import": "./dist/components/AmountInput.mjs",
+      "require": "./dist/components/AmountInput.js"
     }
   },
   "files": [

packages/kit/src/components/AddressInput.tsx

@@ -86,7 +86,7 @@ const AddressInput: FC<IAddressInput> = ({
   }, [debouncedResolve])
 
   return (
-    <div className="sk-address-input">
+    <div className={`sk-address-input ${className}`}>
       <input
         type="text"
         value={inputValue}
@@ -96,7 +96,7 @@ const AddressInput: FC<IAddressInput> = ({
           'Enter Sui address' + (suinsClient != null ? ' or SuiNS name' : '')
         }
         disabled={disabled}
-        className={`${error ? 'error' : ''} ${className}`}
+        className={error ? 'error' : ''}
       />
       {error && <span>{error}</span>}
     </div>

packages/kit/src/components/AmountInput.tsx

@@ -0,0 +1,82 @@
+import { ChangeEvent, FC, useEffect, useState } from 'react'
+
+export interface IAmountInput {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  className?: string
+  disabled?: boolean
+}
+
+const AmountInput: FC<IAmountInput> = ({
+  value,
+  onChange,
+  placeholder,
+  className = '',
+  disabled = false,
+}) => {
+  const [inputValue, setInputValue] = useState(value)
+  const [error, setError] = useState<string | null>(null)
+
+  const validateAmount = (amount: string): boolean => {
+    if (!amount) return true
+
+    // Only allow numbers and decimal points
+    if (!/^\d*\.?\d*$/.test(amount)) {
+      return false
+    }
+
+    const numericValue = parseFloat(amount)
+
+    if (isNaN(numericValue)) {
+      return false
+    }
+
+    if (numericValue < 0) {
+      return false
+    }
+
+    return true
+  }
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value.trim()
+    setInputValue(newValue)
+
+    // Allow empty input
+    if (!newValue) {
+      setError(null)
+      onChange(newValue)
+      return
+    }
+
+    if (!validateAmount(newValue)) {
+      setError('Invalid amount')
+      onChange(newValue)
+      return
+    }
+
+    setError(null)
+    onChange(newValue)
+  }
+
+  useEffect(() => {
+    setInputValue(value)
+  }, [value])
+
+  return (
+    <div className={`sk-amount-input ${className}`}>
+      <input
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        placeholder={placeholder || 'Enter SUI amount'}
+        disabled={disabled}
+        className={`${error ? 'error' : ''} ${className}`}
+      />
+      {error && <span>{error}</span>}
+    </div>
+  )
+}
+
+export default AmountInput

packages/kit/src/styles/main.css

@@ -12,7 +12,7 @@
   .sk-network-badge {
     @apply rounded-lg px-3 py-1.5;
   }
-  .sk-address-input {
+  .sk-address-input, .sk-amount-input {
     @apply flex flex-col gap-1;
     & input {
       @apply w-full rounded-lg border px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 border-gray-300;

packages/kit/tsup.config.ts

@@ -10,6 +10,7 @@ export default defineConfig((options) => ({
     "src/hooks/useNetworkType.tsx",
     "src/providers/SuiProvider.tsx",
     "src/components/AddressInput.tsx",
+    "src/components/AmountInput.tsx",
   ],
   format: ["cjs", "esm"],
   dts: true,