docs: update docs

packages/react-docs/pages/components/icon/index.page.mdx

@@ -10,9 +10,11 @@ import { Icon } from '@tonic-ui/react';
 
 ## Usage
 
+### Basic
+
 Use an icon by passing the `icon` prop. This `icon` property value must match an icon key defined in `theme.icons`. By default, the icon inherits the font size and color of its parent.
 
-{render('./usage')}
+{render('./basic')}
 
 ### Animating icons
 
@@ -31,7 +33,7 @@ The `animation` prop can be used to override default animation, it is a shorthan
 • [animationFillMode](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode)<br/>
 • [animationPlayState](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state)<br/>
 
-## Adding custom icons
+### Adding custom icons
 
 First, you have to add custom icons to the theme. Each icon must be an object containing `path` and optional style props passed to [SVGIcon](svgicon).
 
@@ -77,7 +79,7 @@ Pass the icon name as a prop to the `<Icon>` component to render the SVG icon:
 <Icon icon="icon1" color="blue:50" />
 ```
 
-### Search icons
+## Search icons
 
 {render('./search-icons')}
 

packages/react-docs/pages/components/scrollbar/faq-scroll-position.js

@@ -0,0 +1,32 @@
+import { Button, Divider, Scrollbar } from "@tonic-ui/react";
+import { useToggle } from "@tonic-ui/react-hooks";
+import React, { useRef } from "react";
+import Lorem from "@/components/Lorem";
+
+const App = () => {
+  const scrollTopRef = useRef();
+  const [on, toggle] = useToggle(true);
+
+  return (
+    <>
+      <Button onClick={toggle}>
+        Toggle Visibility
+      </Button>
+      <Divider my="4x" />
+      {on && (
+        <Scrollbar
+          height={200}
+          onUpdate={({ scrollTop }) => {
+            scrollTopRef.current = scrollTop;
+          }}
+          overflow="visible"
+          scrollTop={scrollTopRef.current}
+        >
+          <Lorem count={10} />
+        </Scrollbar>
+      )}
+    </>
+  );
+};
+
+export default App;

packages/react-docs/pages/components/scrollbar/index.page.mdx

@@ -14,7 +14,7 @@ import {
 
 The `Scrollbar` is hidden by default, and it only appears when the user hovers over the scrollable content. You can set the height of the scrollbar using the `height` prop.
 
-{render('./usage')}
+{render('./basic')}
 
 For more information on bidirectional scrolling, please refer to [Bidirectional scrolling: what's not to like?](https://adamsilver.io/blog/bidirectional-scrolling-whats-not-to-like/)
 
@@ -28,13 +28,13 @@ To enable vertical scrolling, set the scrollbar height to a value less than the
 
 {render('./vertical-scrolling')}
 
-### Horizontal scrolling
+#### Horizontal scrolling
 
 To enable horizontal scrolling, set the scrollbar width to a value less than the scrollable content width.
 
 {render('./horizontal-scrolling')}
 
-### Bidirectional scrolling
+#### Bidirectional scrolling
 
 {render('./bidirectional-scrolling')}
 
@@ -70,6 +70,16 @@ The scroll indicator can visually indicate the current scroll position of the sc
 
 {render('./menu')}
 
+## Commonly Asked Questions
+
+### How to control the scroll position?
+
+Utilize the `onUpdate`, `scrollLeft`, `scrollTop`, and `scrollViewRef` props to fetch or programmatically control the scroll position.
+
+To see this in action, simply scroll through the content and click the toggle button to confirm the scroll position.
+
+{render('./faq-scroll-position')}
+
 ## Props
 
 ### Scrollbar