From 8cd116d82d0c63961127b66c097de25d4dbdef56 Mon Sep 17 00:00:00 2001
From: Viki <hi@viki.moe>
Date: Wed, 14 Aug 2024 14:03:56 +0800
Subject: [PATCH] docs: modify docs

---
 docs/src/components/zone.tsx | 8 ++++----
 src/use-clamp/demo.tsx       | 1 -
 src/use-clamp/index.ts       | 8 ++++----
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/docs/src/components/zone.tsx b/docs/src/components/zone.tsx
index c3535bdc..a9d6130b 100644
--- a/docs/src/components/zone.tsx
+++ b/docs/src/components/zone.tsx
@@ -9,10 +9,10 @@ const colors = {
 }
 
 const borderTypes = {
-  solid: 'border-solid',
-  dashed: 'border-dashed',
-  dotted: 'border-dotted',
-  double: 'border-double',
+  solid: 'border border-solid',
+  dashed: 'border border-dashed',
+  dotted: 'border border-dotted',
+  double: 'border border-double',
 }
 
 interface Props {
diff --git a/src/use-clamp/demo.tsx b/src/use-clamp/demo.tsx
index 44d0a721..a1391bc8 100644
--- a/src/use-clamp/demo.tsx
+++ b/src/use-clamp/demo.tsx
@@ -12,7 +12,6 @@ export function App() {
       <div className="rounded transition-all p-1 bg-primary/36 box-content" style={{ width: max * 20 }}>
         <div className="rounded transition-all h-[20px] bg-primary/80" style={{ width: count * 20 }} />
       </div>
-
       <Zone>
         <KeyValue label="Min" value={min} />
         <KeyValue label="Max" value={max} />
diff --git a/src/use-clamp/index.ts b/src/use-clamp/index.ts
index 438dd224..fcc1ef45 100644
--- a/src/use-clamp/index.ts
+++ b/src/use-clamp/index.ts
@@ -12,15 +12,15 @@ export type UseClampReturns = readonly [number, UseCounterReturnsAction]
  *
  * Essentially, it's a more semantic version of [useCounter](/reference/use-counter) with `min` and `max` options set.
  */
-export function useClamp(value: Gettable<number>, min: Gettable<number>, max: Gettable<number>): UseClampReturns {
-  const inputNumber = unwrapGettable(value)
+export function useClamp(input: Gettable<number>, min: Gettable<number>, max: Gettable<number>): UseClampReturns {
+  const inputValue = unwrapGettable(input)
 
-  const [result, actions] = useCounter(inputNumber, {
+  const [result, actions] = useCounter(inputValue, {
     max: unwrapGettable(max),
     min: unwrapGettable(min),
   })
 
-  useUpdateEffect(() => void actions.set(inputNumber), [inputNumber])
+  useUpdateEffect(() => void actions.set(inputValue), [inputValue])
 
   return [result, actions] as const
 }