Merge pull request #43 from huntabyte/docs-menu

.changeset/lazy-apricots-sit.md

@@ -0,0 +1,7 @@
+---
+"@huntabyte/primitives": patch
+---
+
+- Add arrow components to floating UI bits
+- Rename indicators for menu `CheckboxItem` and `RadioItem`
+- Add inputs for elements that have them

src/components/markdown/pre.svelte

@@ -9,10 +9,7 @@
 </script>
 
 <pre
-	class={cn(
-		"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4 bg-primary/5",
-		className
-	)}
+	class={cn("mb-4 mt-6 overflow-x-auto rounded-lg border py-4 bg-primary/5", className)}
 	use:setCodeString
 	{...$$restProps}>
 	<slot />

src/content/components/accordion.md

@@ -3,7 +3,7 @@ title: Accordion
 description: Organizes content in collapsible sections, enabling users to expand or collapse them as needed.
 ---
 
-## Anatomy
+## Structure
 
 ```svelte
 <script lang="ts">

src/content/components/alert-dialog.md

@@ -3,7 +3,7 @@ title: Alert Dialog
 description: Presents critical information or prompts to the user, typically requiring their attention or action.
 ---
 
-## Anatomy
+## Structure
 
 ```svelte
 <script lang="ts">

src/content/components/aspect-ratio.md

@@ -3,7 +3,7 @@ title: Aspect Ratio
 description: Displays content with a specified aspect ratio, ensuring consistent and visually balanced presentation.
 ---
 
-## Anatomy
+## Structure
 
 ```svelte
 <script lang="ts">

src/content/components/avatar.md

@@ -3,7 +3,7 @@ title: Avatar
 description: Displays user or entity images with a fallback option for failed loading, ensuring consistent visual representation.
 ---
 
-## Anatomy
+## Structure
 
 ```svelte
 <script lang="ts">

src/content/components/button.md

@@ -3,12 +3,12 @@ title: Button
 description: An interactive component that triggers an event.
 ---
 
-## Anatomy
+## Structure
 
 ```svelte
 <script lang="ts">
 	import { Button } from "bits-ui";
 </script>
 
-<Button />
+<Button.Root />
 ```

src/content/components/checkbox.md

@@ -3,7 +3,7 @@ title: Checkbox
 description: Allow users to mark options as checked, unchecked, or indeterminate, accommodating versatile states.
 ---
 
-## Anatomy
+## Structure
 
 ```svelte
 <script lang="ts">

src/content/components/collapsible.md

@@ -3,7 +3,7 @@ title: Collapsible
 description: An interactive component which expands and collapses content.
 ---
 
-## Anatomy
+## Structure
 
 ```svelte
 <script lang="ts">

src/content/components/context-menu.md

@@ -2,3 +2,42 @@
 title: Context Menu
 description: Displays a menu at the pointer's position when the trigger is right-clicked or long-pressed.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { ContextMenu } from "bits-ui";
+</script>
+
+<ContextMenu.Root>
+	<ContextMenu.Trigger />
+
+	<ContextMenu.Content>
+		<ContextMenu.Label />
+		<ContextMenu.Item />
+
+		<ContextMenu.Group>
+			<ContextMenu.Item />
+		</ContextMenu.Group>
+
+		<ContextMenu.CheckboxItem>
+			<ContextMenu.CheckboxIndicator />
+		</ContextMenu.CheckboxItem>
+
+		<ContextMenu.RadioGroup>
+			<ContextMenu.RadioItem>
+				<ContextMenu.RadioIndicator />
+			</ContextMenu.RadioItem>
+		</ContextMenu.RadioGroup>
+
+		<ContextMenu.Sub>
+			<ContextMenu.SubTrigger />
+			<ContextMenu.SubContent />
+		</ContextMenu.Sub>
+
+		<ContextMenu.Separator />
+		<ContextMenu.Arrow />
+	</ContextMenu.Content>
+</ContextMenu.Root>
+```

src/content/components/dialog.md

@@ -3,7 +3,7 @@ title: Dialog
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
 ---
 
-## Anatomy
+## Structure
 
 ```svelte
 <script lang="ts">

src/content/components/dropdown-menu.md

@@ -2,3 +2,40 @@
 title: Dropdown Menu
 description: Displays a menu to the user, which can consist of links or functions, triggered by a button.
 ---
+
+```svelte
+<script lang="ts">
+	import { DropdownMenu } from "bits-ui";
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger />
+
+	<DropdownMenu.Content>
+		<DropdownMenu.Label />
+		<DropdownMenu.Item />
+
+		<DropdownMenu.Group>
+			<DropdownMenu.Item />
+		</DropdownMenu.Group>
+
+		<DropdownMenu.CheckboxItem>
+			<DropdownMenu.CheckboxIndicator />
+		</DropdownMenu.CheckboxItem>
+
+		<DropdownMenu.RadioGroup>
+			<DropdownMenu.RadioItem>
+				<DropdownMenu.RadioIndicator />
+			</DropdownMenu.RadioItem>
+		</DropdownMenu.RadioGroup>
+
+		<DropdownMenu.Sub>
+			<DropdownMenu.SubTrigger />
+			<DropdownMenu.SubContent />
+		</DropdownMenu.Sub>
+
+		<DropdownMenu.Separator />
+		<DropdownMenu.Arrow />
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+```

src/content/components/hover-card.md

@@ -2,3 +2,16 @@
 title: Hover Card
 description: Enable sighted users to preview content behind a link.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { HoverCard } from "bits-ui";
+</script>
+
+<HoverCard.Root>
+	<HoverCard.Trigger />
+	<HoverCard.Content />
+</HoverCard.Root>
+```

src/content/components/label.md

@@ -2,3 +2,13 @@
 title: Label
 description: An enhanced version of the native HTML label element.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Label } from "bits-ui";
+</script>
+
+<Label.Root />
+```

src/content/components/menubar.md

@@ -2,3 +2,44 @@
 title: Menubar
 description: Displays a list of menus that can be used to control the application.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Menubar } from "bits-ui";
+</script>
+
+<Menubar.Root>
+	<Menubar.Menu>
+		<Menubar.Trigger />
+		<Menubar.Content>
+			<Menubar.Label />
+			<Menubar.Item />
+
+			<Menubar.Group>
+				<Menubar.Item />
+			</Menubar.Group>
+
+			<Menubar.CheckboxItem>
+				<Menubar.CheckboxIndicator />
+			</Menubar.CheckboxItem>
+
+			<Menubar.RadioGroup>
+				<Menubar.RadioItem>
+					<Menubar.RadioIndicator />
+				<Menubar.RadioItem>
+			</Menubar.RadioGroup>
+
+			<Menubar.Sub>
+				<Menubar.SubTrigger />
+				<Menubar.SubContent />
+			</Menubar.Sub>
+
+			<Menubar.Separator />
+			<Menubar.Arrow />
+		</Menubar.Content>
+	</Menubar.Menu>
+</Menubar.Root>
+
+```

src/content/components/popover.md

@@ -2,3 +2,19 @@
 title: Popover
 description: Displays content in a floating container that appears above the surrounding content.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Popover } from "bits-ui";
+</script>
+
+<Popover.Root>
+	<Popover.Trigger />
+	<Popover.Content>
+		<Popover.Close />
+		<Popover.Arrow />
+	</Popover.Content>
+</Popover.Root>
+```

src/content/components/progress.md

@@ -2,3 +2,13 @@
 title: Progress
 description: A visual indicator that displays the progress of a task, usually in the form of a progress bar.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Progress } from "bits-ui";
+</script>
+
+<Progress.Root />
+```

src/content/components/radio-group.md

@@ -2,3 +2,17 @@
 title: Radio Group
 description: Allows users to select a single option from a predetermined set of choices.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { RadioGroup } from "bits-ui";
+</script>
+
+<RadioGroup.Root>
+	<RadioGroup.Item>
+		<RadioGroup.ItemIndicator />
+	</RadioGroup.Item>
+</RadioGroup.Root>
+```

src/content/components/select.md

@@ -1,4 +1,33 @@
 ---
 title: Select
-description: Enables users to choose a single option from a dropdown menu that presents a list of selectable items.
+description: Enable users to choose a single option from a dropdown menu that presents a list of selectable items.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Select } from "bits-ui";
+</script>
+
+<Select.Root>
+	<Select.Trigger>
+		<Select.Value />
+	</Select.Trigger>
+
+	<Select.Content>
+		<Select.Item>
+			<Select.ItemIndicator />
+		</Select.Item>
+
+		<Select.Group>
+			<Select.Label />
+			<Select.Item>
+				<Select.ItemIndicator />
+			</Select.Item>
+		</Select.Group>
+
+		<Select.Arrow />
+	</Select.Content>
+</Select.Root>
+```

src/content/components/separator.md

@@ -1,4 +1,14 @@
 ---
 title: Separator
-description: Visually divide or separate sections or elements within a user interface, providing clarity and organization.
+description: Visually divide or separate sections or elements, providing clarity and organization.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Separator } from "bits-ui";
+</script>
+
+<Separator.Root />
+```

src/content/components/slider.md

@@ -1,4 +1,18 @@
 ---
 title: Slider
-description: Enables users to select a value within a specific range by sliding a handle.
+description: Enable users to select a value within a specific range with sliding handles.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Slider } from "bits-ui";
+</script>
+
+<Slider.Root>
+	<Slider.Range />
+	<Slider.Thumb />
+	<Slider.Input />
+</Slider.Root>
+```

src/content/components/switch.md

@@ -2,3 +2,16 @@
 title: Switch
 description: Enables users to toggle between two states.
 ---
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Switch } from "bits-ui";
+</script>
+
+<Switch.Root>
+	<Switch.Thumb />
+	<Switch.Input />
+</Switch.Root>
+```