simplifying documentation

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" />
 

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} />
   )
 }
 ```

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>
     );
 }

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>

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>
     );

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"
         >

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">

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>
     );
 }

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>
     );
-}
+}

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>
     );
-}
+}

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>
     );
-}
+}