docs and menubar fix

package.json

@@ -53,6 +53,7 @@
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"publint": "^0.1.9",
+		"radix-icons-svelte": "^1.2.1",
 		"rehype-pretty-code": "^0.10.0",
 		"remark-gfm": "^3.0.1",
 		"shikiji": "^0.4.0",
@@ -72,7 +73,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.35.0",
+		"@melt-ui/svelte": "0.36.0",
 		"@sveltejs/adapter-vercel": "^3.0.3",
 		"nanoid": "^4.0.2",
 		"shiki": "^0.14.3",

src/components/api-section.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { DataAttrsTable, PropsTable } from "@/components";
-	import { h3 as H3 } from "@/components/markdown";
-	import { p as P } from "@/components/markdown";
+	import { h3 as H3, h2 as H2, p as P } from "@/components/markdown";
 	import type { APISchema } from "@/types";
 
 	export let schemas: APISchema[] = [];
 </script>
 
+<H2>Component API</H2>
+
 <div class="flex flex-col gap-8">
 	{#each schemas as schema}
 		<div>

src/components/api-tables/data-attrs-table.svelte

@@ -19,7 +19,7 @@
 			{#each dataAttrs as attr}
 				<Table.Row>
 					<Table.Cell class="align-baseline">
-						<Code class="!text-white">data-{attr.name}</Code>
+						<Code class="!text-secondary-foreground">data-{attr.name}</Code>
 					</Table.Cell>
 					<Table.Cell class="align-baseline">
 						{#if attr.value}

src/components/api-tables/props-table.svelte

@@ -19,7 +19,7 @@
 		{#each props as prop}
 			<Table.Row>
 				<Table.Cell class="align-baseline">
-					<Code class="!text-white">{prop.name}</Code>
+					<Code class="!text-secondary-foreground">{prop.name}</Code>
 				</Table.Cell>
 				<Table.Cell class="align-baseline">
 					{#if prop.default}

src/components/markdown/code.svelte

@@ -7,8 +7,8 @@
 
 <code
 	class={cn(
-		"relative rounded !px-[0.25rem] !py-[0.15rem] font-mono !text-[12px]",
-		neutral ? "!bg-muted" : "!bg-secondary/25",
+		"relative rounded !px-[0.25rem] !py-[0.15rem] font-mono !text-[13px]",
+		neutral ? "!bg-muted" : "!bg-secondary",
 		className
 	)}
 >

src/components/ui/menubar/menubar-checkbox-item.svelte

@@ -18,9 +18,9 @@
 	{...$$restProps}
 >
 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<MenubarPrimitive.CheckboxItemIndicator>
+		<MenubarPrimitive.CheckboxIndicator>
 			<Check class="h-4 w-4" />
-		</MenubarPrimitive.CheckboxItemIndicator>
+		</MenubarPrimitive.CheckboxIndicator>
 	</span>
 	<slot />
 </MenubarPrimitive.CheckboxItem>

src/components/ui/menubar/menubar-radio-item.svelte

@@ -20,9 +20,9 @@
 	on:m-click
 >
 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<MenubarPrimitive.RadioItemIndicator>
+		<MenubarPrimitive.RadioIndicator>
 			<DotFilled class="h-4 w-4 fill-current" />
-		</MenubarPrimitive.RadioItemIndicator>
+		</MenubarPrimitive.RadioIndicator>
 	</span>
 	<slot />
 </MenubarPrimitive.RadioItem>

src/content/api-reference/accordion.ts

@@ -1,7 +1,7 @@
 import type { APISchema } from "@/types";
 import { asChild } from "./helpers";
 
-export const root: APISchema = {
+const root: APISchema = {
 	title: "Root",
 	description: "The root accordion component used to set and manage the state of the accordion.",
 	props: [

src/content/api-reference/alert-dialog.ts

@@ -0,0 +1,149 @@
+import type { APISchema } from "@/types";
+import { asChild } from "./helpers";
+
+export const root: APISchema = {
+	title: "Root",
+	description: "The root component used to set and manage the state of the alert dialog.",
+	props: [
+		{
+			name: "preventScroll",
+			default: "true",
+			type: "boolean",
+			description: "Whether or not to prevent scroll on the body when the alert dialog is open."
+		},
+		{
+			name: "closeOnEscape",
+			default: "true",
+			type: "boolean",
+			description: "Whether to close the alert dialog when the escape key is pressed."
+		},
+		{
+			name: "closeOnOutsideClick",
+			type: "boolean",
+			default: "true",
+			description: "Whether to close the alert dialog when a click occurs outside of it."
+		},
+		{
+			name: "open",
+			type: "boolean",
+			default: "false",
+			description: "Whether or not the alert dialog is open."
+		},
+		{
+			name: "onOpenChange",
+			type: "(open: boolean) => void",
+			description: "A callback function called when the open state changes."
+		}
+	]
+};
+
+export const action: APISchema = {
+	title: "Action",
+	description: "A button used to close the alert dialog by taking an action.",
+	props: [asChild]
+};
+
+export const cancel: APISchema = {
+	title: "Cancel",
+	description: "A button used to close the alert dialog without taking an action.",
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "melt-dialog-close",
+			value: "",
+			description: "Present on the cancel element."
+		}
+	]
+};
+
+export const content: APISchema = {
+	title: "Cancel",
+	description: "The content displayed within the alert dialog modal.",
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "state",
+			value: "'open' | 'closed'",
+			description: "The state of the alert dialog."
+		},
+		{
+			name: "melt-dialog-content",
+			value: "",
+			description: "Present on the content element."
+		}
+	]
+};
+
+export const title: APISchema = {
+	title: "Title",
+	description: "An accessibile title for the alert dialog.",
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "melt-dialog-title",
+			value: "",
+			description: "Present on the title element."
+		}
+	]
+};
+
+export const description: APISchema = {
+	title: "Description",
+	description: "An accessibile description for the alert dialog.",
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "melt-dialog-description",
+			value: "",
+			description: "Present on the description element."
+		}
+	]
+};
+
+export const trigger: APISchema = {
+	title: "Trigger",
+	description: "The element which opens the alert dialog on press.",
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "melt-dialog-trigger",
+			value: "",
+			description: "Present on the trigger element."
+		}
+	]
+};
+
+export const overlay: APISchema = {
+	title: "Overlay",
+	description: "An overlay which covers the body when the alert dialog is open.",
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "state",
+			value: "'open' | 'closed'",
+			description: "The state of the alert dialog."
+		},
+		{
+			name: "melt-dialog-overlay",
+			value: "",
+			description: "Present on the overlay element."
+		}
+	]
+};
+
+export const portal: APISchema = {
+	title: "Portal",
+	description: "A portal which renders the alert dialog into the body when it is open."
+};
+
+export const alertDialog = [
+	root,
+	trigger,
+	content,
+	overlay,
+	portal,
+	action,
+	cancel,
+	title,
+	description
+];

src/content/api-reference/aspect-ratio.ts

@@ -0,0 +1,16 @@
+import type { APISchema } from "@/types";
+
+export const root: APISchema = {
+	title: "Root",
+	description: "The aspect ratio component.",
+	props: [
+		{
+			name: "ratio",
+			default: "1",
+			type: "number",
+			description: "The desired aspect ratio."
+		}
+	]
+};
+
+export const aspectRatio = [root];

src/content/api-reference/avatar.ts

@@ -0,0 +1,55 @@
+import type { APISchema } from "@/types";
+import { asChild } from "./helpers";
+
+export const root: APISchema = {
+	title: "Root",
+	description: "The root component used to set and manage the state of the avatar.",
+	props: [
+		{
+			name: "delayMs",
+			default: "0",
+			type: "number",
+			description:
+				"How long to wait before showing the image after it has loaded. This can be useful to prevent a harsh flickering effect when the image loads quickly."
+		},
+		{
+			name: "loadingStatus",
+			type: "'loading' | 'loaded' | 'error'",
+			description:
+				"The loading status of the avatars source image. You can bind a variable to track the status outside of the component and use it to show a loading indicator or error message."
+		},
+		{
+			name: "onLoadingStatusChange",
+			type: "(status: 'loading' | 'loaded' | 'error') => void",
+			description: "A callback function called when the loading status of the image changes."
+		}
+	]
+};
+
+export const image: APISchema = {
+	title: "Image",
+	description: "The avatar image displayed once it has loaded.",
+	props: [
+		{
+			name: "src",
+			type: "string",
+			description:
+				"The source of the image. This is typed the same as the native `img` element so you can use any valid `img` `src` value."
+		},
+		{
+			name: "alt",
+			type: "string",
+			description:
+				"The alt text of the image. This is typed the same as the native `img` element so you can use any valid `img` `alt` value."
+		},
+		asChild
+	]
+};
+
+export const fallback: APISchema = {
+	title: "Fallback",
+	description: "The fallback displayed while the avatar image is loading or if it fails to load",
+	props: [asChild]
+};
+
+export const avatar = [root, image, fallback];