feat: API Reference Components (#24)

.changeset/twenty-teachers-learn.md

@@ -0,0 +1,5 @@
+---
+"@svecodocs/kit": patch
+---
+
+feat: add `PropField`, `Collapsible`, and `Select` components

docs/src/content/components/callout.md

@@ -5,7 +5,7 @@ section: Components
 ---
 
 <script>
-	import { Callout } from "@svecodocs/kit";
+	import { Callout, PropField } from "@svecodocs/kit";
 	import Avocado from "phosphor-svelte/lib/Avocado";
 </script>
 
@@ -86,3 +86,21 @@ This is an example of a note callout with a custom icon.
 This is an example of a warning callout with a custom title.
 
 </Callout>
+
+## Props
+
+<PropField name="type" type="'warning' | 'note' | 'danger' | 'tip' | 'success'" defaultValue="'note'">
+The type of callout to display.
+</PropField>
+
+<PropField name="title" type="string">
+Override the default title for the callout.
+</PropField>
+
+<PropField name="icon" type="Component">
+Override the default icon for the callout.
+</PropField>
+
+<PropField name="children" type="Snippet">
+The content to display inside of the callout's body.
+</PropField>

docs/src/content/components/card-grid.md

@@ -5,7 +5,7 @@ section: Components
 ---
 
 <script>
-	import { CardGrid, Card } from "@svecodocs/kit";
+	import { CardGrid, Card, PropField } from "@svecodocs/kit";
 	import RocketLaunch from "phosphor-svelte/lib/RocketLaunch";
 	import Blueprint from "phosphor-svelte/lib/Blueprint";
 	import Binary from "phosphor-svelte/lib/Binary";
@@ -92,3 +92,9 @@ Use the `CardGrid` component to display a grid of [`Card`](/docs/components/card
 		content in your Markdown file.
 	</Card>
 </CardGrid>
+
+## Props
+
+<PropField name="cols" type="number" defaultValue="2">
+The number of columns to display the cards in. Uses flex column layout when in smaller viewports.
+</PropField>

docs/src/content/components/card.md

@@ -5,7 +5,7 @@ section: Components
 ---
 
 <script>
-	import { Card } from "@svecodocs/kit";
+	import { Card, PropField } from "@svecodocs/kit";
 	import RocketLaunch from "phosphor-svelte/lib/RocketLaunch";
 </script>
 
@@ -88,3 +88,23 @@ You can use the `horizontal` prop to display the card horizontally.
 <Card title="A horizontal card" horizontal icon={RocketLaunch}>
 You can use markdown in here, just ensure to include a space between the component and the content in your Markdown file.
 </Card>
+
+## Props
+
+<PropField name="title" type="string" required>
+The title to display in the card.
+</PropField>
+
+<PropField name="icon" type="Component">
+The icon to display in the card.
+</PropField>
+
+<PropField name="href" type="string">
+
+If provided, the card will become a link. The `target` is handled automatically based on what the `href` starts with. External links will open in a new tab, and internal links will open in the current tab.
+
+</PropField>
+
+<PropField name="children" type="Snippet">
+The body content of the card.
+</PropField>

docs/src/content/components/checkbox.md

@@ -23,3 +23,7 @@ section: Components
 <DemoContainer class="flex items-center gap-2.5 flex-wrap">
 	<Checkbox checked />
 </DemoContainer>
+
+## Props
+
+See [Bits UI Checkbox](https://bits-ui.com/docs/components/checkbox) for available props.

docs/src/content/components/collapsible.md

@@ -0,0 +1,49 @@
+---
+title: Collapsible
+description: Show and hide content in a collapsible container.
+section: Components
+---
+
+<script>
+	import { Collapsible, DemoContainer, PropField } from "@svecodocs/kit";
+</script>
+
+## Usage
+
+```svelte title="document.md"
+<script>
+	import { Collapsible, DemoContainer } from "@svecodocs/kit";
+</script>
+
+<Collapsible title="more info">
+	<!-- space here so MD can render -->
+	To learn more about SvelteKit, check out the [SvelteKit documentation](https://svelte.dev/kit).
+	<!-- space here so MD can render -->
+</Collapsible>
+```
+
+## Example
+
+<Collapsible title="more info" class="mt-6">
+
+To learn more about SvelteKit, check out the [SvelteKit documentation](https://svelte.dev/kit).
+
+</Collapsible>
+
+## Props
+
+<PropField name="title" type="string">
+The title to display in the trigger. "Hide" and "Show" prefix will be added automatically.
+</PropField>
+
+<PropField name="open" type="boolean" defaultValue="false">
+Whether the content should be open or closed.
+</PropField>
+
+<PropField name="triggerContent" type="Snippet">
+Override the content inside of the trigger button.
+</PropField>
+
+<PropField name="children" type="Snippet">
+The content that is collapsible.
+</PropField>

docs/src/content/components/demo-container.md

@@ -1,5 +1,5 @@
 ---
-title: Demo Container
+title: DemoContainer
 description: Display a container with a border and a background color for examples/demos.
 section: Components
 ---

docs/src/content/components/native-select.md

@@ -1,5 +1,5 @@
 ---
-title: Native Select
+title: NativeSelect
 description: A styled native select component to use in examples and documentation.
 section: Components
 ---

docs/src/content/components/prop-field.md

@@ -0,0 +1,93 @@
+---
+title: PropField
+description: Display a prop field with a name, type, and description.
+section: Components
+---
+
+<script>
+	import { PropField, Collapsible } from "@svecodocs/kit";
+</script>
+
+Use the `PropField` component to annotate props/params in your documentation.
+
+## Usage
+
+```svelte title="document.md"
+<script>
+	import { PropField } from "@svecodocs/kit";
+</script>
+
+<PropField name="checked" type="boolean" required defaultValue="false">
+	<!-- Space here-->
+	The checked state of the checkbox.
+	<!-- Space here-->
+</PropField>
+```
+
+## Examples
+
+### Basic
+
+<PropField name="checked" type="boolean" defaultValue="false" required>
+The checked state of the checkbox.
+</PropField>
+
+### Object
+
+You can use `PropField` in combination with the [`Collapsible`](/docs/components/collapsible) component to represent more complex types.
+
+```svelte title="document.md"
+<script>
+	import { PropField, Collapsible } from "@svecodocs/kit";
+</script>
+
+<PropField name="options" type="CheckboxOptions" required>
+	<!-- Space here -->
+	Configuration options to customize the behavior of the `Checkbox` component.
+	<!-- Space here -->
+	<Collapsible title="properties">
+		<PropField name="width" type="number" required>
+			The width to apply to the checkbox.
+		</PropField>
+		<PropField name="height" type="number" required defaultValue="20">
+			The height to apply to the checkbox.
+		</PropField>
+	</Collapsible>
+</PropField>
+```
+
+<PropField name="options" type="CheckboxOptions" required>
+
+Configuration options to customize the behavior of the `Checkbox` component.
+
+<Collapsible title="properties">
+	<PropField name="width" type="number" required>
+	The width to apply to the checkbox.
+	</PropField>
+	<PropField name="height" type="number" required defaultValue="20">
+	The height to apply to the checkbox.
+	</PropField>
+</Collapsible>
+</PropField>
+
+## Props
+
+<PropField name="name" type="string" required>
+The name of the prop.
+</PropField>
+
+<PropField name="type" type="string" required>
+The type of the prop.
+</PropField>
+
+<PropField name="defaultValue" type="string">
+The default value of the prop.
+</PropField>
+
+<PropField name="required" type="boolean" defaultValue="false">
+Whether the prop is required.
+</PropField>
+
+<PropField name="children" type="Snippet">
+The description/content to display within the prop field.
+</PropField>

docs/src/content/components/select.md

@@ -0,0 +1,32 @@
+---
+title: Select
+description: A select component to use in examples and documentation.
+section: Components
+---
+
+<script>
+	import { Select, DemoContainer } from "@svecodocs/kit";
+	import SelectDemo from "$lib/components/demos/select-demo.svelte";
+</script>
+
+## Usage
+
+```svelte title="document.md"
+<script>
+	import { Select } from "@svecodocs/kit";
+</script>
+
+<Select>
+	<!-- ... -->
+</Select>
+```
+
+## Example
+
+<DemoContainer class="flex items-center gap-2.5 flex-wrap">
+	<SelectDemo />
+</DemoContainer>
+
+## Props
+
+See [Bits UI Select](https://bits-ui.com/docs/components/select) for available props.

docs/src/content/components/switch.md

@@ -23,3 +23,7 @@ section: Components
 <DemoContainer class="flex items-center gap-2.5 flex-wrap">
 	<Switch checked />
 </DemoContainer>
+
+## Props
+
+See [Bits UI Switch](https://bits-ui.com/docs/components/switch) for available props.

docs/src/content/components/tabs.md

@@ -5,7 +5,9 @@ section: Components
 ---
 
 <script>
-	import { Tabs, TabItem, Callout } from "@svecodocs/kit";
+	import { Tabs, TabItem, Callout, PropField } from "@svecodocs/kit";
+	const itemsA = ["First tab", "Second tab"];
+	const itemsB = ["+page.svelte", "+page.server.ts"];
 </script>
 
 You can use the `Tabs` and `TabItem` components to create tabbed interfaces. A `label` prop must be provided to each `TabItem` which will be used to display the label. Whichever tab should be active by default is specified by the `value` prop on the `Tabs` component.
@@ -15,27 +17,28 @@ You can use the `Tabs` and `TabItem` components to create tabbed interfaces. A `
 ```svelte title="document.md"
 <script>
 	import { Tabs, TabItem } from "@svecodocs/kit";
+	const items = ["First tab", "Second tab"];
 </script>
 
-<Tabs value="First tab">
-	<TabItem label="First tab">This is the first tab's content.</TabItem>
-	<TabItem label="Second tab">This is the second tab's content.</TabItem>
+<Tabs value="First tab" {items}>
+	<TabItem value="First tab">This is the first tab's content.</TabItem>
+	<TabItem value="Second tab">This is the second tab's content.</TabItem>
 </Tabs>
 ```
 
 ## Examples
 
 ### Simple Text
 
-<Tabs value="First tab">
-<TabItem label="First tab">This is the first tab's content.</TabItem>
-<TabItem label="Second tab">This is the second tab's content.</TabItem>
+<Tabs items={itemsA}>
+	<TabItem value="First tab">This is the first tab's content.</TabItem>
+	<TabItem value="Second tab">This is the second tab's content.</TabItem>
 </Tabs>
 
 ### Markdown Syntax
 
-<Tabs value="+page.svelte">
-<TabItem label="+page.svelte">
+<Tabs items={itemsB}>
+<TabItem value="+page.svelte">
 
 ```svelte
 <script lang="ts">
@@ -47,7 +50,7 @@ You can use the `Tabs` and `TabItem` components to create tabbed interfaces. A `
 
 </TabItem>
 
-<TabItem label="+page.server.ts">
+<TabItem value="+page.server.ts">
 
 ```ts
 export async function load() {
@@ -63,3 +66,23 @@ export async function load() {
 <Callout type="note" class="mt-8">
 	If you plan to use markdown-specific syntax in your tabs, ensure you include a space between the component and the content in your Markdown file.
 </Callout>
+
+## Props
+
+### Tabs
+
+<PropField name="items" type="string[]" required>
+The tab items to display.
+</PropField>
+
+<PropField name="value" type="string" default="items[0]">
+The label of the tab to be active by default.
+</PropField>
+
+### TabItem
+
+<PropField name="value" type="string" required>
+
+The value that identifies the tab. This value should map to an item within the `items` prop passed to the `Tabs` component.
+
+</PropField>