chore: Finalized changesets and made a script gen:docs for autogenerating examples.

Author: Blankeos

.changeset/chilly-pugs-repair.md

@@ -0,0 +1,5 @@
+---
+'bagon-hooks': patch
+---
+
+feat: Added use-in-viewport.

.changeset/nasty-rings-beam.md

@@ -0,0 +1,5 @@
+---
+'bagon-hooks': patch
+---
+
+feat: Added use-input-state.

.changeset/perfect-tomatoes-exist.md

@@ -0,0 +1,5 @@
+---
+'bagon-hooks': patch
+---
+
+feat: Added use-intersection.

.changeset/sixty-ways-unite.md

@@ -0,0 +1,5 @@
+---
+'bagon-hooks': patch
+---
+
+feat: Added use-disclosure.

.changeset/strange-carrots-study.md

@@ -0,0 +1,5 @@
+---
+'bagon-hooks': patch
+---
+
+feat: Added use-document-visibility.

CHANGELOG.md

@@ -13,13 +13,14 @@
 ### Patch Changes
 
 - docs: Finished many examples for each hooks + code examples.
-- feat: Added use-resize-observer.
+- feat: Added use-resize-observer & use-element-size.
 - feat: Added use-favicon.
 - feat: Added use-network.
 - feat: Added use-mounted.
 - feat: Added use-local-storage.
 - fix: get-os to work in onMount (for SSR).
 - feat: Added use-toggle.
+- feat: Added use-idle.
 
 ## 0.0.1
 

dev/components/examples/use-disclosure/use-disclosure.code.mdx

@@ -1,7 +1,29 @@
 ```tsx
+import { useDisclosure } from 'bagon-hooks';
+
+import { Show } from 'solid-js';
+
 export function UseDisclosureExample() {
+  const [opened, handlers] = useDisclosure(false);
+
   return (
-    <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm"></div>
+    <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
+      <button onClick={handlers.open} class="rounded bg-blue-500 px-4 py-2 text-white">
+        Open Dialog
+      </button>
+
+      <Show when={opened()}>
+        <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+          <div class="rounded-lg bg-white p-6 shadow-lg">
+            <h2 class="mb-4 text-lg font-bold">Dialog Title</h2>
+            <p class="mb-4">This is an example dialog using useDisclosure</p>
+            <button onClick={handlers.close} class="rounded bg-gray-500 px-4 py-2 text-white">
+              Close
+            </button>
+          </div>
+        </div>
+      </Show>
+    </div>
   );
 }
 ```

dev/components/examples/use-disclosure/use-disclosure.example.tsx

@@ -1,19 +1,38 @@
-import { ExampleBase } from '../example-base';
-import Code from './use-disclosure.code.mdx';
+import { useDisclosure } from 'src';
 
+import { Show } from 'solid-js';
 import { useMDXComponents } from 'solid-jsx';
+import { ExampleBase } from '../example-base';
+import Code from './use-disclosure.code.mdx';
 
 export function UseDisclosureExample() {
+  const [opened, handlers] = useDisclosure(false);
+
   // @ts-ignore
   const components: any = useMDXComponents();
-
   return (
     <ExampleBase
       title="useDisclosure"
-      description="A hook to manage state for dialogs, modals, etc."
+      description="A simple hook to manage state for dialogs, modals, accordions, etc. Anything that needs to open/close/toggle."
       code={<Code components={components} />}
     >
-            <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm"></div>
+      <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
+        <button onClick={handlers.open} class="rounded bg-blue-500 px-4 py-2 text-white">
+          Open Dialog
+        </button>
+
+        <Show when={opened()}>
+          <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+            <div class="rounded-lg bg-white p-6 shadow-lg">
+              <h2 class="mb-4 text-lg font-bold">Dialog Title</h2>
+              <p class="mb-4">This is an example dialog using useDisclosure</p>
+              <button onClick={handlers.close} class="rounded bg-gray-500 px-4 py-2 text-white">
+                Close
+              </button>
+            </div>
+          </div>
+        </Show>
+      </div>
     </ExampleBase>
   );
 }

dev/constants/hooks-count.ts

@@ -0,0 +1 @@
+export const HOOKS_COUNT = 36;

dev/pages/index/+Page.tsx

@@ -37,6 +37,7 @@ import { UseOsExample } from 'dev/components/examples/use-os/use-os.example';
 import { UseResizeObserverExample } from 'dev/components/examples/use-resize-observer/use-resize-observer.example';
 import { UseToggleExample } from 'dev/components/examples/use-toggle/use-toggle.example';
 import { Kbd } from 'dev/components/kbd';
+import { HOOKS_COUNT } from 'dev/constants/hooks-count';
 import { IconCheck, IconCopy, IconGithub, IconLogo } from 'dev/icons';
 import { createMemo, createSignal, For, Show } from 'solid-js';
 import { createStore } from 'solid-js/store';
@@ -270,9 +271,9 @@ export default function HomePage() {
           </span>
         </div>
 
-        <p class="text-center text-neutral-50">
-          A collection of zero-dependency hooks for SolidJS forked directly from Mantine Hooks, with
-          some improvements.
+        <p class="mx-auto max-w-lg text-center text-neutral-50">
+          A collection of <span class="font-semibold">{HOOKS_COUNT}+</span> zero-dependency hooks
+          for SolidJS forked directly from Mantine Hooks, with some improvements.
         </p>
 
         <div class="class mx-auto flex items-center gap-x-4 rounded-md border border-neutral-950 bg-neutral-800 p-4 text-muted">