fix: add hooks docs (#206)

* fix: hooks useId docs

* fix: hooks Toggle docs

* fix: hooks useClickOutside docs

* fix: hooks useScrollLock docs

* fix: hooks useForceUpdate docs

* fix: hooks useDidUpdate docs

* fix: hooks useClipboard docs

* fix: docs menu

.changeset/rich-kings-wave.md

@@ -0,0 +1,6 @@
+---
+'kubed-documents': major
+'@kubed/hooks': major
+---
+
+fix: add hooks docs

docs/docs/en/hooks/useClickOutside.mdx

@@ -0,0 +1,63 @@
+---
+group: 'hooks'
+category: 'state'
+title: 'useClickOutside'
+description: 'Listen to click events outside the target element'
+order: 2
+---
+
+## Usage
+
+useClickOutside Please click the button or outside the button to see the effect
+
+```jsx live=true
+import React from 'react';
+import { useClickOutside } from '@kubed/hooks';
+import { Button } from '@kubed/components'
+
+export default function App() {
+   const [counter, setCounter] = React.useState(0);
+   const ref = useClickOutside(() => {
+     console.log('OutsideClick')
+     setCounter(counter => counter+1)
+   }
+);
+
+     return (
+       <div>
+         <p>counter: {counter}</p>
+         <Button ref={ref}>Button</Button>
+       </div>
+     );
+}
+
+```
+
+## API
+
+The useClickOutside hook accepts three parameters:
+
+- `handler` – the callback function that triggers the event
+- `events` – the event type used for monitoring, default value: `['mousedown', 'touchstart']`
+- `nodes` – DOM nodes or Ref, supports arrays
+
+```tsx
+function useClickOutside<T extends HTMLElement = any>(
+   handler: () => void, events?: string[] | null, nodes?: HTMLElement[]
+): React.MutableRefObject<T>
+```
+
+## Params
+
+| Parameters | Default Value | Type | Description |
+|---------|----------------------------------|------ ------------|-------------------|
+| handler | - | `() => void` | callback function that triggers the event |
+| events | `['mousedown', 'touchstart']` | `(string[] null)` | Event type for listening |
+| nodes | - | `HTMLElement[]` | DOM node or Ref, supports array |
+
+## Result
+
+
+| Parameters | Default Value | Type                        | Description    |
+|------------|---------------|-----------------------------|----------------|
+| ref        | -             | `React.MutableRefObject<T>` | target element |

docs/docs/en/hooks/useClipboard.mdx

@@ -0,0 +1,57 @@
+---
+group: 'hooks'
+category: 'state'
+title: 'useClipboard'
+description: 'useClipboard copies values in components'
+Order: 4
+---
+
+## Usage
+
+useClipboard copies the value in the component.
+
+```jsx live=true
+import { useClipboard } from '@kubed/hooks';
+import { Button, Group } from '@kubed/components'
+
+export default function App() {
+   const {copy, reset, error, copied } = useClipboard();
+
+     return (
+       <div>
+         <p>{"copied: "+copied}</p>
+         <p>error: {error}</p>
+         <Group spacing="xl">
+           <Button onClick={() => copy('copy message')}> copy </Button>
+           <Button onClick={() => reset() }> reset </Button>
+         </Group>
+       </div>
+     );
+}
+
+```
+
+## API
+
+```tsx
+
+function useClipboard(
+     {timeout}?: {timeout?: number}
+   ): {copy: (valueToCopy: any) => void, reset: () => void, error: Error, copied: boolean}
+```
+
+## Params
+
+| Parameters | Default Value | Type | Description |
+|---------|--------|----------|-------------|
+| timeout | `2000` | `number` | The time delay for event triggering |
+
+## Result
+
+
+| Parameters | Default Value | Type | Description |
+|--------|-----|---------------------------------|--- --------|
+| copy | - | `(valueToCopy: any) => void` | The value to be copied |
+| reset | - | `() => void` | Reset the copied value |
+| error | - | `Error` | An error when copying a value |
+| copied | - | `boolean` | Whether the copied value was successful |

docs/docs/en/hooks/useDidUpdate.mdx

@@ -0,0 +1,45 @@
+---
+group: 'hooks'
+category: 'state'
+title: 'useDidUpdate'
+description: 'useDidUpdate Hook executed when the component updates its dependencies. '
+Order: 4
+---
+
+## Usage
+
+useDidUpdate is identical to useEffect except that it ignores the first execution and only executes when dependencies are updated.
+
+```jsx live=true
+import React from 'react';
+import { useDidUpdate } from '@kubed/hooks';
+import { Button, Group } from '@kubed/components'
+
+export default function App() {
+   const [counter, setCounter] = React.useState(0);
+   const [updateCount, setUpdateCount] = React.useState(0);
+     useDidUpdate(() => {
+       setUpdateCount((updateCount) => updateCount + 1)
+     }, [counter]);
+
+     return (
+       <div>
+         <p>counter:{counter}</p>
+         <p>updateCount: {updateCount}</p>
+         <Group spacing="xl">
+           <Button onClick={() => setCounter((counter) =>counter + 1 )}> counter +1 </Button>
+         </Group>
+       </div>
+     );
+}
+
+```
+
+## API
+
+```tsx
+
+function useDidUpdate(
+   fn: () => void,
+   dependencies?: any[]): void
+```

docs/docs/en/hooks/useForceUpdate.mdx

@@ -0,0 +1,37 @@
+---
+group: 'hooks'
+category: 'state'
+title: 'useForceUpdate'
+description: 'useForceUpdate will return a function, calling this function will force the component to re-render'
+Order: 2
+---
+
+## Usage
+
+useForceUpdate forces the component to re-render.
+
+```jsx live=true
+import React from 'react';
+import { useForceUpdate } from '@kubed/hooks';
+import { Button, Group } from '@kubed/components'
+
+export default function App() {
+   const update = useForceUpdate();
+
+     return (
+       <div>
+         <p>Time:{Date.now()}</p>
+         <Group spacing="xl">
+           <Button onClick={() => update()}>update</Button>
+         </Group>
+       </div>
+     );
+}
+
+```
+
+## API
+
+```tsx
+function useForceUpdate(): () => void
+```

docs/docs/en/hooks/useId.mdx

@@ -2,48 +2,67 @@
 group: 'hooks'
 category: 'state'
 title: 'useId'
-description: 'Generate memoized random id'
+description: 'Generate a random ID for memory'
 order: 1
 ---
 
 ## Usage
 
-use-id generates random id that persists across renders.
-Hook is usually used to bind input elements to labels.
-Generated random id is saved to ref and will not change unless component is unmounted.
+useId generates a random ID that persists during rendering.
+Hooks are typically used to bind input elements to tags.
+The generated random id is saved into the ref and will not change unless the component is unloaded.
 
-```jsx
+```jsx live=true
 import { useId } from '@kubed/hooks';
+import { Input } from '@kubed/components'
 
-function Input({ id }) {
-  const uuid = useId(id);
+function MyInput({ id }) {
+   const uuid = useId(id);
 
-  return (
-    <>
-      <label htmlFor={uuid}>Input label</label>
-      <input type="text" id={uuid} />
-    </>
-  );
+   return (
+     <>
+       <label htmlFor={uuid}>Input label</label>
+       <Input type="text" id={uuid} />
+     </>
+   );
 }
 
-// input and label will have id 'my-id'
-const withId = <Input id="my-id" />;
+export default function App() {
+   return (
+     <div className="flex gap-3 items-center">
+       // input and label will have id 'my-id'
+       <MyInput id="my-id" />
+       // input and label will have random id 'kubed-fZMoF'
+       <MyInput />
+     </div>
+   );
+}
 
-// input and label will have random id 'kubed-fZMoF'
-const withoutId = <Input />;
 ```
 
 ## API
 
-use-id hook accepts two arguments:
-
-- `id` – string value that is returned by default
-- `generateId` – function that is used to generate random id
+The useId hook accepts two parameters:
 
-Hook returns string value that is either `id` (if first argument is passed) or random id generated with `generateId` function.
+- `id` – the string value returned by default
+- `generateId` – function for generating random IDs
 
-## Definition
+Hook returns a string value, which can be either "id" (if the first argument is passed) or a random id generated using the "generateId" function.
 
 ```tsx
 function useId(id: string, generateId?: () => string): string;
 ```
+
+## Params
+
+| Parameters | Default Value | Type | Description |
+| --- | --- | --- | --- |
+| id | - | `string` | The string value returned by default |
+| generateId | - | `() => string` | Function to generate a random ID` |
+
+## Result
+
+
+| Parameters | Default Value | Type | Description |
+| --- | --- | --- | --- |
+| id | - | `string` | Generate a random ID for memory |