From 0f36ce898aa252dbc37058757fe1ffa558edcd7c Mon Sep 17 00:00:00 2001
From: Alexandre Asselin <alexandre.asselin@gsoft.com>
Date: Fri, 13 Dec 2024 14:48:30 -0500
Subject: [PATCH] simplifying documentation

---
 .../components/collections/Listbox.mdx        |  1 +
 apps/docs/content/components/icons/Icon.mdx   |  8 +-
 .../docs/ComboBoxOption/dynamicLists.tsx      | 97 +++++++------------
 .../ComboBox/docs/ComboBoxOption/footer.tsx   |  6 +-
 .../docs/ComboBoxOption/loadOnScroll.tsx      | 13 +--
 .../docs/ComboBoxOption/menuPlacement.tsx     |  3 +-
 .../src/ComboBox/docs/controlled.tsx          |  4 +-
 .../src/ComboBox/docs/customFiltering.tsx     | 42 ++++----
 .../src/Disclosure/docs/controlled.tsx        | 31 +++---
 .../src/Disclosure/docs/customHeader.tsx      | 28 +++---
 .../src/Disclosure/docs/description.tsx       | 30 +++---
 .../src/Disclosure/docs/disabled.tsx          | 32 +++---
 .../components/src/Disclosure/docs/icon.tsx   | 26 +++--
 .../src/Disclosure/docs/preview.tsx           | 24 +++--
 .../src/Disclosure/docs/variants.tsx          |  8 +-
 .../src/Form/docs/ariaValidation.tsx          | 24 +++--
 .../components/src/Form/docs/disabled.tsx     | 12 +--
 packages/components/src/Form/docs/fluid.tsx   | 12 +--
 .../src/Form/docs/nativeValidation.tsx        | 28 +++---
 packages/components/src/Form/docs/preview.tsx | 12 +--
 .../components/src/Form/docs/validation.tsx   | 10 +-
 .../components/src/Link/docs/external.tsx     |  4 +-
 .../src/ListBox/docs/ListBox.stories.tsx      |  3 +-
 .../src/ListBox/docs/dynamicLists.tsx         |  8 +-
 .../components/src/Select/docs/controlled.tsx |  4 +-
 .../src/Select/docs/customValue.tsx           |  6 +-
 packages/components/src/Select/docs/data.ts   |  3 +-
 .../docs/selectDropdown/dynamicLists.tsx      | 88 ++++++-----------
 .../docs/selectDropdown/loadOnScroll.tsx      |  9 +-
 packages/components/src/Select/src/Select.tsx |  6 +-
 packages/components/src/index.ts              |  1 +
 .../inputs/docs/numberField/formatting.tsx    |  9 +-
 .../src/switch/docs/switch/nolabel.tsx        |  2 +-
 33 files changed, 252 insertions(+), 342 deletions(-)

diff --git a/apps/docs/content/components/collections/Listbox.mdx b/apps/docs/content/components/collections/Listbox.mdx
index fe7d5668a..bcb312162 100644
--- a/apps/docs/content/components/collections/Listbox.mdx
+++ b/apps/docs/content/components/collections/Listbox.mdx
@@ -90,6 +90,7 @@ A list box can contain a count using a badge.
 ### Dynamic Lists
 
 Items and sections can be populated from a hierarchial data structure.
+If a section has a header, the `Collection` component can be used to render the child items.
 
 <Example src="ListBox/docs/dynamicLists" />
 
diff --git a/apps/docs/content/components/icons/Icon.mdx b/apps/docs/content/components/icons/Icon.mdx
index c5ea64da1..fee8b99d9 100644
--- a/apps/docs/content/components/icons/Icon.mdx
+++ b/apps/docs/content/components/icons/Icon.mdx
@@ -48,10 +48,10 @@ import { Icon, type CreatedIconProps } from "@hopper-ui/icons";
 function CustomIcon(props: CreatedIconProps) {
   return (
     <Icon
-    src16={CustomIcon16}
-    src24={CustomIcon24}
-    src32={CustomIcon32}
-    {...props} />
+        src16={CustomIcon16}
+        src24={CustomIcon24}
+        src32={CustomIcon32}
+        {...props} />
   )
 }
 ```
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx
index b7984e91f..629867b2e 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx
@@ -1,71 +1,40 @@
-import { Collection, ComboBox, ComboBoxItem, ComboBoxSection, Header, Inline } from "@hopper-ui/components";
+import { Collection, ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/components";
 
-interface ListItemProps {
-    id: number | string;
-    role: string;
-}
-
-interface ListSectionProps {
-    role: string;
-    children: ListItemProps[];
-}
+const OPTIONS_WITH_SECTIONS = [
+    {
+        role: "Operations", children: [
+            { id: 2, role: "Project Coordinator" },
+            { id: 3, role: "QA Specialist" },
+            { id: 4, role: "System Administrator" }
+        ]
+    },
+    {
+        role: "Creative Department", children: [
+            { id: 6, role: "Designer" },
+            { id: 7, role: "Designer" },
+            { id: 8, role: "UX Researcher" }
+        ]
+    }
+];
 
 export default function Example() {
-    const options = [
-        { id: 2, role: "Designer" },
-        { id: 3, role: "Developer" },
-        { id: 4, role: "Manager" },
-        { id: 6, role: "QA Engineer" },
-        { id: 7, role: "Product Owner" },
-        { id: 8, role: "Scrum Master" }
-    ] satisfies ListItemProps[];
-
-    const optionsWithSections = [
-        {
-            role: "Operations", children: [
-                { id: 2, role: "Project Coordinator" },
-                { id: 3, role: "QA Specialist" },
-                { id: 4, role: "System Administrator" }
-            ]
-        },
-        {
-            role: "Creative Department", children: [
-                { id: 6, role: "Designer" },
-                { id: 7, role: "Designer" },
-                { id: 8, role: "UX Researcher" }
-            ]
-        }
-    ] satisfies ListSectionProps[];
-
     return (
-        <Inline alignY="flex-start">
-            <ComboBox
-                items={options}
-                label="Items"
-            >
-                {(item: ListItemProps) => {
-                    const { id, role } = item;
-
-                    return <ComboBoxItem id={id}>{role}</ComboBoxItem>;
-                }}
-            </ComboBox>
-            <ComboBox
-                items={optionsWithSections}
-                label="Section"
-            >
-                {(section: ListSectionProps) => {
-                    const { role: sectionName, children } = section;
+        <ComboBox
+            items={OPTIONS_WITH_SECTIONS}
+            label="Section"
+        >
+            {section => {
+                const { role: sectionName, children } = section;
 
-                    return (
-                        <ComboBoxSection id={sectionName}>
-                            <Header>{sectionName}</Header>
-                            <Collection items={children}>
-                                {item => <ComboBoxItem id={item.id}>{item.role}</ComboBoxItem>}
-                            </Collection>
-                        </ComboBoxSection>
-                    );
-                }}
-            </ComboBox>
-        </Inline>
+                return (
+                    <ComboBoxSection id={sectionName}>
+                        <Header>{sectionName}</Header>
+                        <Collection items={children}>
+                            {item => <ComboBoxItem id={item.id}>{item.role}</ComboBoxItem>}
+                        </Collection>
+                    </ComboBoxSection>
+                );
+            }}
+        </ComboBox>
     );
 }
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx
index 6ebc46825..bb86b67fa 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx
@@ -5,7 +5,11 @@ export default function Example() {
     return (
         <ComboBox
             label="Roles"
-            footer={<Button variant="ghost-secondary" isFluid><AddIcon /><Text>Add</Text></Button>}
+            footer={(
+                <Button variant="ghost-secondary" isFluid>
+                    <AddIcon />
+                    <Text>Add</Text></Button>
+            )}
         >
             <ComboBoxItem id="developer">Developer</ComboBoxItem>
             <ComboBoxItem id="designer">Designer</ComboBoxItem>
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx
index 238f6460e..96509cb48 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx
@@ -1,12 +1,11 @@
-import { ComboBox, ComboBoxItem } from "@hopper-ui/components";
-import { useAsyncList } from "react-stately";
+import { ComboBox, ComboBoxItem, useAsyncList } from "@hopper-ui/components";
 
 interface Character {
     name: string;
 }
 
 export default function Example() {
-    const list = useAsyncList({
+    const list = useAsyncList<Character>({
         async load({ signal, cursor }) {
             const res = await fetch(cursor || "https://pokeapi.co/api/v2/pokemon", {
                 signal
@@ -23,15 +22,13 @@ export default function Example() {
     return (
         <ComboBox
             label="Roles"
-            items={list.items as Iterable<Character>}
+            items={list.items}
             maxHeight="core_1280"
             isLoading={list.isLoading}
             onLoadMore={list.loadMore}
         >
-            {(item: Character) => {
-                const { name } = item;
-
-                return <ComboBoxItem id={name}>{name}</ComboBoxItem>;
+            {item => {
+                return <ComboBoxItem id={item.name}>{item.name}</ComboBoxItem>;
             }}
         </ComboBox>
     );
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx
index 0ef4b2d3e..04b1a2136 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx
@@ -2,7 +2,8 @@ import { ComboBox, ComboBoxItem } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <ComboBox label="Roles"
+        <ComboBox
+            label="Roles"
             align="end"
             direction="top"
         >
diff --git a/packages/components/src/ComboBox/docs/controlled.tsx b/packages/components/src/ComboBox/docs/controlled.tsx
index 9803aae29..afb63e596 100644
--- a/packages/components/src/ComboBox/docs/controlled.tsx
+++ b/packages/components/src/ComboBox/docs/controlled.tsx
@@ -4,13 +4,13 @@ import { useState } from "react";
 export default function Example() {
     const [selectedKey, setSelectedKey] = useState<Key | null>();
 
-    function handleSelectionChange(key: Key | null) {
+    const handleSelectionChange = (key: Key | null) => {
         if (selectedKey === key) {
             setSelectedKey(null);
         } else {
             setSelectedKey(key);
         }
-    }
+    };
 
     return (
         <ComboBox selectedKey={selectedKey} onSelectionChange={handleSelectionChange} label="Roles">
diff --git a/packages/components/src/ComboBox/docs/customFiltering.tsx b/packages/components/src/ComboBox/docs/customFiltering.tsx
index 5faf4d10f..0e66913d5 100644
--- a/packages/components/src/ComboBox/docs/customFiltering.tsx
+++ b/packages/components/src/ComboBox/docs/customFiltering.tsx
@@ -1,32 +1,26 @@
-import { ComboBox, ComboBoxItem } from "@hopper-ui/components";
+import { ComboBox, ComboBoxItem, useFilter } from "@hopper-ui/components";
 import { useMemo, useState } from "react";
-import { useFilter } from "react-aria";
 
-interface Role {
-    id: number;
-    name: string;
-}
+const ROLE_OPTIONS = [
+    { id: 1, name: "Designer" },
+    { id: 2, name: "Developer" },
+    { id: 3, name: "Manager" },
+    { id: 4, name: "QA Engineer" },
+    { id: 5, name: "Product Owner" },
+    { id: 6, name: "Scrum Master" },
+    { id: 7, name: "UX Researcher" },
+    { id: 8, name: "Business Analyst" },
+    { id: 9, name: "DevOps Engineer" },
+    { id: 10, name: "Data Scientist" }
+];
 
 export default function Example() {
-    const options = useMemo(() => [
-        { id: 1, name: "Designer" },
-        { id: 2, name: "Developer" },
-        { id: 3, name: "Manager" },
-        { id: 4, name: "QA Engineer" },
-        { id: 5, name: "Product Owner" },
-        { id: 6, name: "Scrum Master" },
-        { id: 7, name: "UX Researcher" },
-        { id: 8, name: "Business Analyst" },
-        { id: 9, name: "DevOps Engineer" },
-        { id: 10, name: "Data Scientist" }
-    ] satisfies Role[], []);
-
     const { startsWith } = useFilter({ sensitivity: "base" });
     const [filterValue, setFilterValue] = useState("");
-    const filteredItems = useMemo(
-        () => options.filter(item => startsWith(item.name, filterValue)),
-        [options, startsWith, filterValue]
-    );
+
+    const filteredItems = useMemo(() => {
+        return ROLE_OPTIONS.filter(item => startsWith(item.name, filterValue));
+    }, [startsWith, filterValue]);
 
     return (
         <ComboBox
@@ -35,7 +29,7 @@ export default function Example() {
             onInputChange={setFilterValue}
             label="Roles"
         >
-            {(item: Role) => <ComboBoxItem>{item.name}</ComboBoxItem>}
+            {item => <ComboBoxItem id={item.id}>{item.name}</ComboBoxItem>}
         </ComboBox>
     );
 }
diff --git a/packages/components/src/Disclosure/docs/controlled.tsx b/packages/components/src/Disclosure/docs/controlled.tsx
index a096dd58d..7abe37cda 100644
--- a/packages/components/src/Disclosure/docs/controlled.tsx
+++ b/packages/components/src/Disclosure/docs/controlled.tsx
@@ -1,23 +1,22 @@
-import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";
+import { Disclosure, DisclosureHeader, DisclosurePanel } from "@hopper-ui/components";
 import { useState } from "react";
 
 export default function Example() {
     const [isExpanded, setIsExpanded] = useState(true);
 
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure
-                isExpanded={isExpanded}
-                onExpandedChange={setIsExpanded}
-            >
-                <DisclosureHeader>
-                    This disclosure is {isExpanded ? "expanded" : "collapsed"}
-                </DisclosureHeader>
-                <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
-                    The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure
+            width="100%"
+            isExpanded={isExpanded}
+            onExpandedChange={setIsExpanded}
+        >
+            <DisclosureHeader>
+                This disclosure is {isExpanded ? "expanded" : "collapsed"}
+            </DisclosureHeader>
+            <DisclosurePanel>
+                Tackle the challenges of hybrid, remote and distributed work, no matter what.
+                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/customHeader.tsx b/packages/components/src/Disclosure/docs/customHeader.tsx
index bb6518db7..493ceacdb 100644
--- a/packages/components/src/Disclosure/docs/customHeader.tsx
+++ b/packages/components/src/Disclosure/docs/customHeader.tsx
@@ -1,22 +1,18 @@
-import { Button, Disclosure, DisclosurePanel, Div, Text } from "@hopper-ui/components";
+import { Button, Disclosure, DisclosurePanel, Text } from "@hopper-ui/components";
 
 import { ToggleArrow } from "../../ToggleArrow/index.ts";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure>
-                <Button slot="trigger" variant="secondary">
-                    <Text>Help your people work better</Text>
-                    <ToggleArrow
-                        slot="end-icon"
-                    />
-                </Button>
-                <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
-                    The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure width="100%">
+            <Button slot="trigger" variant="secondary">
+                <Text>Help your people work better</Text>
+                <ToggleArrow slot="end-icon" />
+            </Button>
+            <DisclosurePanel>
+                Tackle the challenges of hybrid, remote and distributed work, no matter what.
+                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/description.tsx b/packages/components/src/Disclosure/docs/description.tsx
index 4ae399822..fc1dcca80 100644
--- a/packages/components/src/Disclosure/docs/description.tsx
+++ b/packages/components/src/Disclosure/docs/description.tsx
@@ -1,20 +1,18 @@
-import { Disclosure, DisclosureHeader, DisclosurePanel, Div, Inline, Text } from "@hopper-ui/components";
+import { Disclosure, DisclosureHeader, DisclosurePanel, Inline, Text } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure>
-                <DisclosureHeader>
-                    <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
-                        <Text>Workleap Officevibe</Text>
-                        <Text color="neutral-weak" size="sm">Engagement and Feedback</Text>
-                    </Inline>
-                </DisclosureHeader>
-                <DisclosurePanel>
-                    Help employees speak up and make sure they feel heard. 
-                    Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure width="100%">
+            <DisclosureHeader>
+                <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
+                    <Text>Workleap Officevibe</Text>
+                    <Text color="neutral-weak" size="sm">Engagement and Feedback</Text>
+                </Inline>
+            </DisclosureHeader>
+            <DisclosurePanel>
+                Help employees speak up and make sure they feel heard.
+                Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/disabled.tsx b/packages/components/src/Disclosure/docs/disabled.tsx
index 0e2827907..697df8595 100644
--- a/packages/components/src/Disclosure/docs/disabled.tsx
+++ b/packages/components/src/Disclosure/docs/disabled.tsx
@@ -1,22 +1,20 @@
-import { Disclosure, DisclosureHeader, DisclosurePanel, Div, Inline, Text } from "@hopper-ui/components";
+import { Disclosure, DisclosureHeader, DisclosurePanel, Inline, Text } from "@hopper-ui/components";
 import { SparklesIcon } from "@hopper-ui/icons";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure isDisabled>
-                <DisclosureHeader>
-                    <SparklesIcon />
-                    <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
-                        <Text>Workleap Officevibe</Text>
-                        <Text color="neutral-disabled" size="sm">Engagement and Feedback</Text>
-                    </Inline>
-                </DisclosureHeader>
-                <DisclosurePanel>
-                    Help employees speak up and make sure they feel heard. 
-                    Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure width="100%" isDisabled>
+            <DisclosureHeader>
+                <SparklesIcon />
+                <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
+                    <Text>Workleap Officevibe</Text>
+                    <Text color="neutral-disabled" size="sm">Engagement and Feedback</Text>
+                </Inline>
+            </DisclosureHeader>
+            <DisclosurePanel>
+                Help employees speak up and make sure they feel heard.
+                Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/icon.tsx b/packages/components/src/Disclosure/docs/icon.tsx
index 5c50a1770..3f9be485e 100644
--- a/packages/components/src/Disclosure/docs/icon.tsx
+++ b/packages/components/src/Disclosure/docs/icon.tsx
@@ -1,19 +1,17 @@
-import { Disclosure, DisclosureHeader, DisclosurePanel, Div, Text } from "@hopper-ui/components";
+import { Disclosure, DisclosureHeader, DisclosurePanel, Text } from "@hopper-ui/components";
 import { SparklesIcon } from "@hopper-ui/icons";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure>
-                <DisclosureHeader>
-                    <SparklesIcon />
-                    <Text>Help your people work better</Text>
-                </DisclosureHeader>
-                <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
-                    The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure width="100%">
+            <DisclosureHeader>
+                <SparklesIcon />
+                <Text>Help your people work better</Text>
+            </DisclosureHeader>
+            <DisclosurePanel>
+                Tackle the challenges of hybrid, remote and distributed work, no matter what.
+                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/preview.tsx b/packages/components/src/Disclosure/docs/preview.tsx
index 5711f791b..8ef311fc9 100644
--- a/packages/components/src/Disclosure/docs/preview.tsx
+++ b/packages/components/src/Disclosure/docs/preview.tsx
@@ -1,17 +1,15 @@
-import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";
+import { Disclosure, DisclosureHeader, DisclosurePanel } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure>
-                <DisclosureHeader>
-                    Help your people work better
-                </DisclosureHeader>
-                <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
-                    The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure width="100%">
+            <DisclosureHeader>
+                Help your people work better
+            </DisclosureHeader>
+            <DisclosurePanel>
+                Tackle the challenges of hybrid, remote and distributed work, no matter what.
+                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/variants.tsx b/packages/components/src/Disclosure/docs/variants.tsx
index 0bdde29c6..973bc2dda 100644
--- a/packages/components/src/Disclosure/docs/variants.tsx
+++ b/packages/components/src/Disclosure/docs/variants.tsx
@@ -2,13 +2,13 @@ import { Disclosure, DisclosureHeader, DisclosurePanel, Stack } from "@hopper-ui
 
 export default function Example() {
     return (
-        <Stack width="100%" paddingX="core_320" paddingY="core_480">
+        <Stack width="100%">
             <Disclosure variant="standalone">
                 <DisclosureHeader>
                     Help your people work better
                 </DisclosureHeader>
                 <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
+                    Tackle the challenges of hybrid, remote and distributed work, no matter what.
                     The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
                 </DisclosurePanel>
             </Disclosure>
@@ -17,10 +17,10 @@ export default function Example() {
                     Help your people work better
                 </DisclosureHeader>
                 <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
+                    Tackle the challenges of hybrid, remote and distributed work, no matter what.
                     The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
                 </DisclosurePanel>
             </Disclosure>
         </Stack>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Form/docs/ariaValidation.tsx b/packages/components/src/Form/docs/ariaValidation.tsx
index 0e7ced461..f3d3bb31d 100644
--- a/packages/components/src/Form/docs/ariaValidation.tsx
+++ b/packages/components/src/Form/docs/ariaValidation.tsx
@@ -1,18 +1,16 @@
-import { Button, Div, Form, TextField } from "@hopper-ui/components";
+import { Button, Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg">
-            <Form validationBehavior="aria">
-                <TextField
-                    name="username"
-                    defaultValue="admin"
-                    isRequired
-                    validate={value => value === "admin" ? "Nice try." : null}
-                    label="Username"
-                />
-                <Button type="submit">Submit</Button>
-            </Form>
-        </Div>
+        <Form validationBehavior="aria">
+            <TextField
+                name="username"
+                defaultValue="admin"
+                isRequired
+                validate={value => value === "admin" ? "Nice try." : null}
+                label="Username"
+            />
+            <Button type="submit">Submit</Button>
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/docs/disabled.tsx b/packages/components/src/Form/docs/disabled.tsx
index d07e0c05e..5e5f52a0c 100644
--- a/packages/components/src/Form/docs/disabled.tsx
+++ b/packages/components/src/Form/docs/disabled.tsx
@@ -1,12 +1,10 @@
-import { Button, Div, Form, TextField } from "@hopper-ui/components";
+import { Button, Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg">
-            <Form isDisabled>
-                <TextField name="email" placeholder="Enter your email" label="Email" />
-                <Button type="submit">Sign In</Button>
-            </Form>
-        </Div>
+        <Form isDisabled>
+            <TextField name="email" placeholder="Enter your email" label="Email" />
+            <Button type="submit">Sign In</Button>
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/docs/fluid.tsx b/packages/components/src/Form/docs/fluid.tsx
index b141b800b..378f49005 100644
--- a/packages/components/src/Form/docs/fluid.tsx
+++ b/packages/components/src/Form/docs/fluid.tsx
@@ -1,12 +1,10 @@
-import { Button, Div, Form, TextField } from "@hopper-ui/components";
+import { Button, Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg" width="80%">
-            <Form isFluid>
-                <TextField name="email" placeholder="Enter your email" label="Email" />
-                <Button type="submit">Sign In</Button>
-            </Form>
-        </Div>
+        <Form isFluid width="80%">
+            <TextField name="email" placeholder="Enter your email" label="Email" />
+            <Button type="submit">Sign In</Button>
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/docs/nativeValidation.tsx b/packages/components/src/Form/docs/nativeValidation.tsx
index 8883963c2..ed6a8f85e 100644
--- a/packages/components/src/Form/docs/nativeValidation.tsx
+++ b/packages/components/src/Form/docs/nativeValidation.tsx
@@ -1,20 +1,18 @@
-import { Button, ButtonGroup, Div, Form, TextField } from "@hopper-ui/components";
+import { Button, ButtonGroup, Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg">
-            <Form validationBehavior="native">
-                <TextField
-                    name="email"
-                    type="email"
-                    isRequired
-                    label="Email"
-                />
-                <ButtonGroup>
-                    <Button type="submit">Submit</Button>
-                    <Button type="reset">Reset</Button>
-                </ButtonGroup>
-            </Form>
-        </Div>
+        <Form validationBehavior="native">
+            <TextField
+                name="email"
+                type="email"
+                isRequired
+                label="Email"
+            />
+            <ButtonGroup>
+                <Button type="submit">Submit</Button>
+                <Button type="reset">Reset</Button>
+            </ButtonGroup>
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/docs/preview.tsx b/packages/components/src/Form/docs/preview.tsx
index 2a0d40e8d..b76a74b5a 100644
--- a/packages/components/src/Form/docs/preview.tsx
+++ b/packages/components/src/Form/docs/preview.tsx
@@ -1,12 +1,10 @@
-import { Button, Div, Form, TextField } from "@hopper-ui/components";
+import { Button, Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg">
-            <Form>
-                <TextField name="email" placeholder="Enter your email" label="Email" />
-                <Button type="submit">Sign In</Button>
-            </Form>
-        </Div>
+        <Form>
+            <TextField name="email" placeholder="Enter your email" label="Email" />
+            <Button type="submit">Sign In</Button>
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/docs/validation.tsx b/packages/components/src/Form/docs/validation.tsx
index 15455ebb4..053473b6a 100644
--- a/packages/components/src/Form/docs/validation.tsx
+++ b/packages/components/src/Form/docs/validation.tsx
@@ -1,11 +1,9 @@
-import { Div, Form, TextField } from "@hopper-ui/components";
+import { Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg">
-            <Form validationErrors={{ username: "Sorry, this username is taken." }}>
-                <TextField name="username" defaultValue="john_doe" label="Username" />
-            </Form>
-        </Div>
+        <Form validationErrors={{ username: "Sorry, this username is taken." }}>
+            <TextField name="username" defaultValue="john_doe" label="Username" />
+        </Form>
     );
 }
diff --git a/packages/components/src/Link/docs/external.tsx b/packages/components/src/Link/docs/external.tsx
index c8f6f017d..552c5cd2c 100644
--- a/packages/components/src/Link/docs/external.tsx
+++ b/packages/components/src/Link/docs/external.tsx
@@ -3,9 +3,9 @@ import { NewTabIcon } from "@hopper-ui/icons";
 
 export default function Example() {
     return (
-        <Link href="#" isExternal>
+        <Link href="#" isExternal alignItems="end">
             <Text>Learn more</Text>
-            <NewTabIcon />
+            <NewTabIcon size="sm" />
         </Link>
     );
 }
diff --git a/packages/components/src/ListBox/docs/ListBox.stories.tsx b/packages/components/src/ListBox/docs/ListBox.stories.tsx
index 45943af8d..0400b7502 100644
--- a/packages/components/src/ListBox/docs/ListBox.stories.tsx
+++ b/packages/components/src/ListBox/docs/ListBox.stories.tsx
@@ -1,8 +1,7 @@
-import { Collection, type Selection } from "@hopper-ui/components";
+import { Collection, type Selection, useAsyncList } from "@hopper-ui/components";
 import { SparklesIcon } from "@hopper-ui/icons";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { useAsyncList } from "react-stately";
 
 import { Badge } from "../../Badge/index.ts";
 import { Header } from "../../Header/index.ts";
diff --git a/packages/components/src/ListBox/docs/dynamicLists.tsx b/packages/components/src/ListBox/docs/dynamicLists.tsx
index e60196727..416272e25 100644
--- a/packages/components/src/ListBox/docs/dynamicLists.tsx
+++ b/packages/components/src/ListBox/docs/dynamicLists.tsx
@@ -1,4 +1,4 @@
-import { Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";
+import { Collection, Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";
 
 const OPTIONS_WITH_SECTIONS = [
     {
@@ -28,9 +28,9 @@ export default function Example() {
                 return (
                     <ListBoxSection id={section.name}>
                         <Header>{section.name}</Header>
-                        {section.children.map(item => (
-                            <ListBoxItem id={item.name}>{item.name}</ListBoxItem>
-                        ))}
+                        <Collection items={section.children}>
+                            {item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
+                        </Collection>
                     </ListBoxSection>
                 );
             }}
diff --git a/packages/components/src/Select/docs/controlled.tsx b/packages/components/src/Select/docs/controlled.tsx
index 60c9be95e..0ba969325 100644
--- a/packages/components/src/Select/docs/controlled.tsx
+++ b/packages/components/src/Select/docs/controlled.tsx
@@ -4,13 +4,13 @@ import { useState } from "react";
 export default function Example() {
     const [selectedKey, setSelectedKey] = useState<Key | null>();
 
-    function handleSelectionChange(key: Key) {
+    const handleSelectionChange = (key: Key) => {
         if (selectedKey === key) {
             setSelectedKey(null);
         } else {
             setSelectedKey(key);
         }
-    }
+    };
 
     return (
         <Select selectedKey={selectedKey} onSelectionChange={handleSelectionChange} label="Roles">
diff --git a/packages/components/src/Select/docs/customValue.tsx b/packages/components/src/Select/docs/customValue.tsx
index 092e7e422..877076934 100644
--- a/packages/components/src/Select/docs/customValue.tsx
+++ b/packages/components/src/Select/docs/customValue.tsx
@@ -2,9 +2,9 @@ import { Avatar, Select, SelectItem, Text, type ValueRenderProps } from "@hopper
 
 import { users, type User } from "./data.ts";
 
-const renderValue = ({ defaultChildren, selectedItem }: ValueRenderProps) => {
+const renderValue = ({ defaultChildren, selectedItem }: ValueRenderProps<User>) => {
     if (selectedItem) {
-        const { name, avatar } = selectedItem as User;
+        const { name, avatar } = selectedItem;
 
         return (
             <>
@@ -27,7 +27,7 @@ export default function Example() {
             items={users}
             label="Users"
         >
-            {({ id, name, avatar, role }: User) => {
+            {({ id, name, avatar, role }) => {
                 return (
                     <SelectItem id={id} textValue={name}>
                         <Avatar name={name} src={avatar} />
diff --git a/packages/components/src/Select/docs/data.ts b/packages/components/src/Select/docs/data.ts
index b9a4f49dd..789573b4e 100644
--- a/packages/components/src/Select/docs/data.ts
+++ b/packages/components/src/Select/docs/data.ts
@@ -9,7 +9,7 @@ export interface User {
     email: string;
 }
 
-export const users = [
+export const users: User[] = [
     {
         id: 1,
         name: "Tony Reichert",
@@ -211,4 +211,3 @@ export const users = [
         email: "mia.robinson@example.com"
     }
 ];
-  
\ No newline at end of file
diff --git a/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx b/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx
index 2c1bb6ffe..9d150a14b 100644
--- a/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx
@@ -1,65 +1,37 @@
-import { Collection, Header, Inline, Select, SelectItem, SelectSection } from "@hopper-ui/components";
+import { Collection, Header, Select, SelectItem, SelectSection } from "@hopper-ui/components";
 
-interface ListItemProps {
-    id: number | string;
-    role: string;
-}
-
-interface ListSectionProps {
-    role: string;
-    children: ListItemProps[];
-}
+const OPTIONS = [
+    {
+        role: "Operations", children: [
+            { id: 2, role: "Project Coordinator" },
+            { id: 3, role: "QA Specialist" },
+            { id: 4, role: "System Administrator" }
+        ]
+    },
+    {
+        role: "Creative Department", children: [
+            { id: 6, role: "Designer" },
+            { id: 7, role: "Designer" },
+            { id: 8, role: "UX Researcher" }
+        ]
+    }
+];
 
 export default function Example() {
-    const options = [
-        { id: 2, role: "Designer" },
-        { id: 3, role: "Developer" },
-        { id: 4, role: "Manager" },
-        { id: 6, role: "QA Engineer" },
-        { id: 7, role: "Product Owner" },
-        { id: 8, role: "Scrum Master" }
-    ] satisfies ListItemProps[];
-
-    const optionsWithSections = [
-        {
-            role: "Operations", children: [
-                { id: 2, role: "Project Coordinator" },
-                { id: 3, role: "QA Specialist" },
-                { id: 4, role: "System Administrator" }
-            ]
-        },
-        {
-            role: "Creative Department", children: [
-                { id: 6, role: "Designer" },
-                { id: 7, role: "Designer" },
-                { id: 8, role: "UX Researcher" }
-            ]
-        }
-    ] satisfies ListSectionProps[];
-
     return (
-        <Inline alignY="flex-start">
-            <Select items={options} label="Items">
-                {(item: ListItemProps) => {
-                    const { id, role } = item;
-
-                    return <SelectItem id={id}>{role}</SelectItem>;
-                }}
-            </Select>
-            <Select items={optionsWithSections} label="Section">
-                {(section: ListSectionProps) => {
-                    const { role: sectionName, children } = section;
+        <Select items={OPTIONS} label="Section">
+            {section => {
+                const { role: sectionName, children } = section;
 
-                    return (
-                        <SelectSection id={sectionName}>
-                            <Header>{sectionName}</Header>
-                            <Collection items={children}>
-                                {item => <SelectItem id={item.id}>{item.role}</SelectItem>}
-                            </Collection>
-                        </SelectSection>
-                    );
-                }}
-            </Select>
-        </Inline>
+                return (
+                    <SelectSection id={sectionName}>
+                        <Header>{sectionName}</Header>
+                        <Collection items={children}>
+                            {item => <SelectItem id={item.id}>{item.role}</SelectItem>}
+                        </Collection>
+                    </SelectSection>
+                );
+            }}
+        </Select>
     );
 }
diff --git a/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx b/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx
index 7060d4036..812d963d6 100644
--- a/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx
@@ -1,12 +1,11 @@
-import { Select, SelectItem } from "@hopper-ui/components";
-import { useAsyncList } from "react-stately";
+import { Select, SelectItem, useAsyncList } from "@hopper-ui/components";
 
 interface Character {
     name: string;
 }
 
 export default function Example() {
-    const list = useAsyncList({
+    const list = useAsyncList<Character>({
         async load({ signal, cursor }) {
             const res = await fetch(cursor || "https://pokeapi.co/api/v2/pokemon", {
                 signal
@@ -23,14 +22,14 @@ export default function Example() {
     return (
         <Select
             aria-label="list of options"
-            items={list.items as Iterable<Character>} 
+            items={list.items}
             isLoading={list.isLoading}
             onLoadMore={list.loadMore}
             popoverProps={{
                 maxHeight: "core_1280"
             }}
         >
-            {(item: Character) => {
+            {item => {
                 const { name } = item;
 
                 return <SelectItem id={name}>{name}</SelectItem>;
diff --git a/packages/components/src/Select/src/Select.tsx b/packages/components/src/Select/src/Select.tsx
index 56a8c9ed1..b15383b7a 100644
--- a/packages/components/src/Select/src/Select.tsx
+++ b/packages/components/src/Select/src/Select.tsx
@@ -32,7 +32,7 @@ import styles from "./Select.module.css";
 
 export const GlobalSelectCssSelector = "hop-Select";
 
-export type ValueRenderProps = SelectValueRenderProps<object> & { defaultChildren: ReactNode };
+export type ValueRenderProps<T> = SelectValueRenderProps<T> & { defaultChildren: ReactNode };
 export type SelectTriggerProps = StyledComponentProps<RACButtonProps>;
 
 export interface SelectProps<T extends object> extends StyledComponentProps<Omit<RACSelectProps<T>, "children">>, FieldProps {
@@ -94,7 +94,7 @@ export interface SelectProps<T extends object> extends StyledComponentProps<Omit
     /**
      * A function to render the value of the select. It will render the selected item's text by default.
      */
-    renderValue?: (valueRenderProps: ValueRenderProps) => ReactNode;
+    renderValue?: (valueRenderProps: ValueRenderProps<T>) => ReactNode;
     /**
      * The selection indicator to use. Only available if the selection mode is not "none".
      * When set to "input", the selection indicator will be either a radio or checkbox based on the selection mode.
@@ -277,7 +277,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
                         </Popover>
                         <Button className={buttonClassNames} style={triggerStyle} data-invalid={isInvalid || undefined} {...otherTriggerProps}>
                             {prefixMarkup}
-                            <SelectValue size={size}>
+                            <SelectValue<T> size={size}>
                                 {valueRenderProps => {
                                     return renderValue?.(valueRenderProps);
                                 }}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 2402b34cb..204f3cb68 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -34,6 +34,7 @@ export * from "./utils/index.ts";
 export * from "@hopper-ui/styled-system";
 export { useAsyncList } from "@react-stately/data";
 export type { RouterOptions } from "@react-types/shared";
+export { useFilter } from "react-aria";
 export type { Orientation, Placement } from "react-aria";
 export { Collection, DEFAULT_SLOT, useContextProps, useSlottedContext, type ContextValue, type Key, type Selection, type ValidationResult } from "react-aria-components";
 
diff --git a/packages/components/src/inputs/docs/numberField/formatting.tsx b/packages/components/src/inputs/docs/numberField/formatting.tsx
index 24e507951..a75f67822 100644
--- a/packages/components/src/inputs/docs/numberField/formatting.tsx
+++ b/packages/components/src/inputs/docs/numberField/formatting.tsx
@@ -2,13 +2,12 @@ import { NumberField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <NumberField formatOptions={
-            {
+        <NumberField
+            formatOptions={{
                 style: "currency",
                 currency: "USD"
-            }
-        }
-        label="Training Budget Allocated"
+            }}
+            label="Training Budget Allocated"
         />
     );
 }
diff --git a/packages/components/src/switch/docs/switch/nolabel.tsx b/packages/components/src/switch/docs/switch/nolabel.tsx
index 4dce5e348..0d5f10471 100644
--- a/packages/components/src/switch/docs/switch/nolabel.tsx
+++ b/packages/components/src/switch/docs/switch/nolabel.tsx
@@ -2,6 +2,6 @@ import { Switch } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Switch aria-label="Label"></Switch>
+        <Switch aria-label="Label" />
     );
 }