doc updates

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

@@ -57,7 +57,7 @@ export const cancel: APISchema = {
 };
 
 export const content: APISchema = {
-	title: "Cancel",
+	title: "Content",
 	description: "The content displayed within the alert dialog modal.",
 	props: [asChild],
 	dataAttributes: [

src/content/api-reference/button.ts

@@ -2,25 +2,21 @@ import type { APISchema } from "@/types";
 
 export const root: APISchema = {
 	title: "Root",
-	description: "The root component used to set and manage the state of the avatar.",
+	description:
+		"A special button component that can receive Melt UI builders for use with the `asChild` prop.",
 	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: "builders",
+			default: "[]",
+			type: "Builder[]",
+			description: "An array of melt builders to be applied to the button."
 		},
 		{
-			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."
+			name: "href",
+			type: "string",
+			description: "An optional prop that when passed converts the button into an anchor tag."
 		}
 	]
 };
+
+export const button = [root];

src/content/api-reference/checkbox.ts

@@ -0,0 +1,88 @@
+import type { APISchema } from "@/types";
+
+export const root: APISchema = {
+	title: "Root",
+	description: "The button component used to toggle the state of the checkbox.",
+	props: [
+		{
+			name: "disabled",
+			default: "false",
+			type: "boolean",
+			description:
+				"Whether or not the checkbox button is disabled. This prevents the user from interacting with it."
+		},
+		{
+			name: "checked",
+			default: "false",
+			type: "boolean | 'indeterminate'",
+			description:
+				"The checkbox button's checked state. This can be a boolean or the string 'indeterminate', which would typically display a dash in the checkbox."
+		},
+		{
+			name: "onCheckedChange",
+			type: "(checked: boolean | 'indeterminate') => void",
+			description: "A callback that is fired when the checkbox button's checked state changes."
+		}
+	],
+	dataAttributes: [
+		{
+			name: "disabled",
+			description: "Present when the checkbox is disabled.",
+			value: "''"
+		},
+		{
+			name: "state",
+			value: "'checked' | 'unchecked' | 'indeterminate'",
+			description: "The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'."
+		},
+		{
+			name: "melt-checkbox",
+			value: "''",
+			description: "Present on the root element of the checkbox."
+		}
+	]
+};
+
+export const input: APISchema = {
+	title: "Input",
+	description:
+		"The hidden input element that is used to store the checkbox's state for form submission. It receives all the same props as a regular HTML input element.",
+	props: [
+		{
+			name: "value",
+			default: "false",
+			type: "boolean",
+			description:
+				"Unless a value is provided, the input's value will be a boolean that represents the checkbox's checked state. Indeterminate checkboxes will have a value of `false`."
+		},
+		{
+			name: "disabled",
+			default: "false",
+			type: "boolean",
+			description:
+				"Whether or not the checkbox input is disabled. If not provided, it will inherit the disabled state of the Root component, which defaults to false."
+		}
+	],
+	dataAttributes: [
+		{
+			name: "melt-checkbox-input",
+			value: "''",
+			description: "Present on the input element."
+		}
+	]
+};
+
+export const indicator: APISchema = {
+	title: "Indicator",
+	description:
+		"A component which passes `isChecked` and `isIndeterminate` slot props to its children. This is useful for rendering the checkbox's indicator icon depending on its state.",
+	dataAttributes: [
+		{
+			name: "melt-checkbox-indicator",
+			value: "''",
+			description: "Present on the indicator element."
+		}
+	]
+};
+
+export const checkbox = [root, input, indicator];

src/content/api-reference/collapsible.ts

@@ -0,0 +1,93 @@
+import type { APISchema } from "@/types";
+import { asChild } from "./helpers";
+
+export const root: APISchema = {
+	title: "Root",
+	description: "The root collapsible container which manages the state of the collapsible.",
+	props: [
+		{
+			name: "disabled",
+			default: "false",
+			type: "boolean",
+			description:
+				"Whether or not the collapsible is disabled. This prevents the user from interacting with it."
+		},
+		{
+			name: "open",
+			default: "false",
+			type: "boolean",
+			description:
+				"The open state of the collapsible. The content will be visible when this is true, and hidden when it's false."
+		},
+		{
+			name: "onOpenChange",
+			type: "(open: boolean) => void",
+			description: "A callback that is fired when the collapsible's open state changes."
+		}
+	],
+	dataAttributes: [
+		{
+			name: "disabled",
+			description: "Present when the checkbox is disabled.",
+			value: "''"
+		},
+		{
+			name: "state",
+			value: "'open' | 'closed'",
+			description: "The collapsible's open state."
+		},
+		{
+			name: "melt-collapsible",
+			value: "''",
+			description: "Present on the root element of the collapsible."
+		}
+	]
+};
+
+export const trigger: APISchema = {
+	title: "Trigger",
+	description: "The button responsible for toggling the collapsible's open state.",
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "disabled",
+			description: "Present when the checkbox is disabled.",
+			value: "''"
+		},
+		{
+			name: "state",
+			value: "'open' | 'closed'",
+			description: "The collapsible's open state."
+		},
+		{
+			name: "melt-collapsible-trigger",
+			value: "''",
+			description: "Present on the trigger element of the collapsible."
+		}
+	]
+};
+
+export const content: APISchema = {
+	title: "Content",
+	description: "The content displayed when the collapsible is open.",
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "disabled",
+			description: "Present when the checkbox is disabled.",
+			value: "''"
+		},
+		{
+			name: "state",
+			value: "'open' | 'closed'",
+			description: "The collapsible's open state."
+		},
+		{
+			name: "melt-collapsible-content",
+			value: "''",
+			description: "Present on the content element of the collapsible."
+		}
+	]
+};
+
+export const collapsible = [root, trigger, content];

src/content/api-reference/dialog.ts

@@ -51,7 +51,7 @@ export const close: APISchema = {
 };
 
 export const content: APISchema = {
-	title: "Cancel",
+	title: "Content",
 	description: "The content displayed within the dialog modal.",
 	props: [asChild],
 	dataAttributes: [

src/content/api-reference/index.ts

@@ -4,6 +4,9 @@ import { alertDialog } from "./alert-dialog";
 import { dialog } from "./dialog";
 import { aspectRatio } from "./aspect-ratio";
 import { avatar } from "./avatar";
+import { button } from "./button";
+import { checkbox } from "./checkbox";
+import { collapsible } from "./collapsible";
 
 export const bits = [
 	"accordion",
@@ -16,7 +19,7 @@ export const bits = [
 	"context-menu",
 	"dialog",
 	"dropdown-menu",
-	"hover-card",
+	"link-preview",
 	"label",
 	"menubar",
 	"popover",
@@ -44,7 +47,10 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	"alert-dialog": alertDialog,
 	dialog,
 	"aspect-ratio": aspectRatio,
-	avatar
+	avatar,
+	button,
+	checkbox,
+	collapsible
 };
 
 export function getAPISchemas(bit: Bit): APISchema[] {

src/content/components/button.md

@@ -1,8 +1,13 @@
 ---
 title: Button
-description: An interactive component that triggers an event.
+description: A special button component that can receive Melt UI builders for use with the `asChild` prop.
 ---
 
+<script>
+	import { APISection } from '@/components'
+	export let schemas;
+</script>
+
 ## Structure
 
 ```svelte
@@ -13,4 +18,6 @@ description: An interactive component that triggers an event.
 <Button.Root />
 ```
 
+<APISection {schemas} />
+
 🚧 **UNDER CONSTRUCTION** 🚧

src/content/components/checkbox.md

@@ -3,6 +3,11 @@ title: Checkbox
 description: Allow users to mark options as checked, unchecked, or indeterminate, accommodating versatile states.
 ---
 
+<script>
+	import { APISection } from '@/components'
+	export let schemas;
+</script>
+
 ## Structure
 
 ```svelte
@@ -16,4 +21,6 @@ description: Allow users to mark options as checked, unchecked, or indeterminate
 </Checkbox.Root>
 ```
 
+<APISection {schemas} />
+
 🚧 **UNDER CONSTRUCTION** 🚧

src/content/components/collapsible.md

@@ -3,6 +3,11 @@ title: Collapsible
 description: An interactive component which expands and collapses content.
 ---
 
+<script>
+	import { APISection } from '@/components'
+	export let schemas;
+</script>
+
 ## Structure
 
 ```svelte
@@ -16,4 +21,6 @@ description: An interactive component which expands and collapses content.
 </Collapsible.Root>
 ```
 
+<APISection {schemas} />
+
 🚧 **UNDER CONSTRUCTION** 🚧

src/lib/bits/checkbox/components/CheckboxIndicator.svelte

@@ -6,6 +6,6 @@
 	const { isChecked, isIndeterminate } = ctx.getIndicator();
 </script>
 
-<div {...$$restProps}>
+<div {...$$restProps} data-melt-checkbox-indicator>
 	<slot isChecked={$isChecked} isIndeterminate={$isIndeterminate} />
 </div>

src/lib/bits/checkbox/components/CheckboxInput.svelte

@@ -4,7 +4,16 @@
 
 	type $$Props = InputProps;
 
-	const isChecked = ctx.get().helpers.isChecked;
+	const {
+		helpers: { isChecked },
+		options: { disabled }
+	} = ctx.get();
 </script>
 
-<input {...$$restProps} hidden value={$isChecked ? true : false} />
+<input
+	hidden
+	value={$isChecked ? true : false}
+	disabled={$disabled}
+	{...$$restProps}
+	data-melt-checkbox-input
+/>

src/utils/docs.ts

@@ -1,4 +1,4 @@
-import { bits, bitsSet, getAPISchemas, isBit } from "@/content/api-reference";
+import { getAPISchemas, isBit } from "@/content/api-reference";
 import type { APISchema } from "@/types";
 import { error, redirect } from "@sveltejs/kit";