more docs

postcss.config.cjs

@@ -1,13 +1,7 @@
-const tailwindcss = require("tailwindcss");
-const autoprefixer = require("autoprefixer");
-
-const config = {
-	plugins: [
-		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
-		tailwindcss(),
-		//But others, like autoprefixer, need to run after,
-		autoprefixer
-	]
+module.exports = {
+	plugins: {
+		"tailwindcss/nesting": {},
+		tailwindcss: {},
+		autoprefixer: {}
+	}
 };
-
-module.exports = config;

src/components/markdown/pre.svelte

@@ -10,7 +10,7 @@
 
 <pre
 	class={cn(
-		"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900",
+		"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4 bg-primary/5",
 		className
 	)}
 	use:setCodeString

src/config/navigation.ts

@@ -85,6 +85,11 @@ export const navigation: Navigation = {
 					href: "/docs/components/collapsible",
 					items: []
 				},
+				{
+					title: "Context Menu",
+					href: "/docs/components/context-menu",
+					items: []
+				},
 				{
 					title: "Dialog",
 					href: "/docs/components/dialog",

src/content/components/accordion.md

@@ -2,3 +2,20 @@
 title: Accordion
 description: Organizes content in collapsible sections, enabling users to expand or collapse them as needed.
 ---
+
+## Anatomy
+
+```svelte
+<script lang="ts">
+	import { Accordion } from "bits-ui";
+</script>
+
+<Accordion.Root>
+	<Accordion.Item>
+		<Accordion.Header>
+			<Accordion.Trigger />
+		</Accordion.Header>
+		<Accordion.Content />
+	</Accordion.Item>
+</Accordion.Root>
+```

src/content/components/alert-dialog.md

@@ -2,3 +2,24 @@
 title: Alert Dialog
 description: Presents critical information or prompts to the user, typically requiring their attention or action.
 ---
+
+## Anatomy
+
+```svelte
+<script lang="ts">
+	import { AlertDialog } from "bits-ui";
+</script>
+
+<AlertDialog.Root>
+	<AlertDialog.Trigger />
+	<AlertDialog.Portal>
+		<AlertDialog.Overlay />
+		<AlertDialog.Content>
+			<AlertDialog.Title />
+			<AlertDialog.Description />
+			<AlertDialog.Cancel />
+			<AlertDialog.Action />
+		</AlertDialog.Content>
+	</AlertDialog.Portal>
+</AlertDialog.Root>
+```

src/content/components/aspect-ratio.md

@@ -2,3 +2,13 @@
 title: Aspect Ratio
 description: Displays content with a specified aspect ratio, ensuring consistent and visually balanced presentation.
 ---
+
+## Anatomy
+
+```svelte
+<script lang="ts">
+	import { AspectRatio } from "bits-ui";
+</script>
+
+<AspectRatio.Root />
+```

src/content/components/avatar.md

@@ -2,3 +2,16 @@
 title: Avatar
 description: Displays user or entity images with a fallback option for failed loading, ensuring consistent visual representation.
 ---
+
+## Anatomy
+
+```svelte
+<script lang="ts">
+	import { Avatar } from "bits-ui";
+</script>
+
+<Avatar.Root>
+	<Avatar.Image />
+	<Avatar.Fallback />
+</Avatar.Root>
+```

src/content/components/button.md

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

src/content/components/checkbox.md

@@ -2,3 +2,16 @@
 title: Checkbox
 description: Allow users to mark options as checked, unchecked, or indeterminate, accommodating versatile states.
 ---
+
+## Anatomy
+
+```svelte
+<script lang="ts">
+	import { Checkbox } from "bits-ui";
+</script>
+
+<Checkbox.Root>
+	<Checkbox.Indicator />
+	<Checkbox.Input />
+</Checkbox.Root>
+```

src/content/components/collapsible.md

@@ -2,3 +2,16 @@
 title: Collapsible
 description: An interactive component which expands and collapses content.
 ---
+
+## Anatomy
+
+```svelte
+<script lang="ts">
+	import { Collapsible } from "bits-ui";
+</script>
+
+<Collapsible.Root>
+	<Collapsible.Trigger />
+	<Collapsible.Content />
+</Collapsible.Root>
+```

src/content/components/dialog.md

@@ -2,3 +2,23 @@
 title: Dialog
 description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
 ---
+
+## Anatomy
+
+```svelte
+<script lang="ts">
+	import { Dialog } from "bits-ui";
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger />
+	<Dialog.Portal>
+		<Dialog.Overlay />
+		<Dialog.Content>
+			<Dialog.Title />
+			<Dialog.Description />
+			<Dialog.Close />
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+```

src/content/getting-started.md

@@ -8,14 +8,14 @@ description: Learn how to get started using Bits in your app.
 Install bits using your favorite package manager.
 
 ```bash
-npm install @huntabyte/bits
+npm install bits-ui
 ```
 
 You can them import and start using them in your app.
 
 ```svelte
 <script lang="ts">
-	import { Accordion } from "@huntabyte/bits";
+	import { Accordion } from "bits-ui";
 </script>
 
 <Accordion.Root>

src/content/introduction.md

@@ -1,6 +1,6 @@
 ---
 title: Introduction
-description: A collection of headless Svelte components built with Melt UI builders.
+description: A collection of headless components for Svelte, built with Melt UI builders.
 ---
 
 Bits are headless component primitives that provide a simple interface for composing your own components. They have been thoughtfully designed to prioritize simplicity, customizability, and compatibility with any styling or UI framework you choose to work with.

src/content/render-delegation.md

@@ -1,6 +1,6 @@
 ---
 title: Render Delegation
-description: Learn how to use the asChild prop to delegate rendering to a child element.
+description: Learn how to use the asChild prop to delegate rendering to a child element / component.
 ---
 
 ## Usage
@@ -55,13 +55,13 @@ Let's create a custom `<Button />` component that could be used with this patter
 
 ```svelte
 <script lang="ts">
-	import { builderActions, builderAttrs, type Builder } from "@huntabyte/bits"
-	export let builders: Builder[] = []
+	import { builderActions, builderAttrs, type Builder } from "@huntabyte/bits";
+	export let builders: Builder[] = [];
 </script>
 
 <button use:builderActions={{ builders }} {...builderAttrs(builders)}>
-<slot />
-<button>
+	<slot />
+</button>
 ```
 
 We're using the `builderActions` and `builderAttrs` helpers to apply the actions and attributes to the button. We're also using the `Builder` type to type the `builders` prop we'd receive from whatever component we're using this with. We use an array here to cover the case where we may want to apply multiple builders to the button. The helper functions handle applying all the actions and attributes to the button for us.

src/routes/+page.ts

@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async () => {
+	throw redirect(303, "/docs/introduction");
+};

src/routes/docs/[...slug]/+page.svelte

@@ -15,7 +15,6 @@
 	let tagline: string;
 	$: component = data.component as unknown as Component;
 	$: doc = data.metadata;
-	$: console.log($page.url.pathname);
 	$: if ($page.url.pathname.split("/")[2] === "components") {
 		tagline = "Components";
 	} else {

src/styles/markdown.postcss

@@ -37,7 +37,7 @@
 	@apply relative;
 
 	& pre {
-		@apply mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border border-border bg-muted py-4 text-sm font-semibold;
+		@apply mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border border-border py-4 px-2.5 text-sm font-semibold;
 	}
 
 	& code {