more api, small fix

Author: flo-bit

apps/docs/src/lib/docs/colors/color-gradient-picker/api.ts

@@ -0,0 +1,33 @@
+import type { APISchema } from '$lib/types/schema';
+
+export default [
+	{
+		title: 'ColorGradientPicker',
+		description: 'A gradient editor that lets users add, remove, and reposition color stops.',
+		props: {
+			colors: {
+				type: { type: 'array', definition: '{ rgb: { r: number; g: number; b: number }; position: number }[]' },
+				description: 'The array of color stops defining the gradient.',
+				bindable: true
+			},
+			defaultNewColor: {
+				type: { type: 'object', definition: '{ r: number; g: number; b: number }' },
+				description: 'The default RGB color for newly added stops.',
+				default: '{ r: 0, g: 0, b: 0 }'
+			},
+			size: {
+				type: { type: 'enum', definition: "'default' | 'sm'" },
+				description: 'The size of the gradient picker.',
+				default: "'default'"
+			},
+			onchange: {
+				type: { type: 'function', definition: '(colors: ColorStop[]) => void' },
+				description: 'Callback invoked when the gradient colors change.'
+			},
+			class: {
+				type: 'string',
+				description: 'Additional CSS classes to apply.'
+			}
+		}
+	}
+] satisfies APISchema[];

apps/docs/src/lib/docs/colors/color-gradient-picker/index.ts

@@ -1,11 +1,13 @@
 import Docs from './Documentation.md';
 import Example from './Example.svelte';
 import Card from './Card.svelte';
+import api from './api';
 
 export default {
 	slug: 'color-gradient-picker',
 	title: 'Color Gradient Picker',
 	docs: Docs,
 	example: Example,
 	card: Card,
+	api,
 };

apps/docs/src/lib/docs/colors/color-picker/api.ts

@@ -0,0 +1,84 @@
+import type { APISchema } from '$lib/types/schema';
+
+export default [
+	{
+		title: 'ColorPicker',
+		description: 'A full color picker with a saturation/value area, hue slider, and optional quick-select swatches. Supports RGB, OKLab, and OKHsv color spaces.',
+		props: {
+			rgb: {
+				type: { type: 'object', definition: '{ r: number; g: number; b: number }' },
+				description: 'The current color in RGB format (0-255).',
+				bindable: true
+			},
+			oklab: {
+				type: { type: 'object', definition: '{ l: number; a: number; b: number }' },
+				description: 'The current color in OKLab format.',
+				bindable: true
+			},
+			okhsv: {
+				type: { type: 'object', definition: '{ h: number; s: number; v: number }' },
+				description: 'The current color in OKHsv format.',
+				bindable: true
+			},
+			onchange: {
+				type: { type: 'function', definition: '(color: { hex: string; rgb: RGB; oklab: OKlab; okhsv: OKhsv; oklch: OKlch }) => void' },
+				description: 'Callback invoked when the color changes. Provides the color in all supported formats.'
+			},
+			quickSelects: {
+				type: { type: 'array', definition: '{ label: string; rgb?: RGB; oklab?: OKlab; okhsv?: OKhsv }[]' },
+				description: 'Quick-select color swatches displayed below the picker.',
+				default: '[]',
+				bindable: true
+			},
+			class: {
+				type: 'string',
+				description: 'Additional CSS classes to apply.'
+			}
+		}
+	},
+	{
+		title: 'PopoverColorPicker',
+		description: 'A color picker wrapped in a popover, triggered by a color swatch button.',
+		props: {
+			rgb: {
+				type: { type: 'object', definition: '{ r: number; g: number; b: number }' },
+				description: 'The current color in RGB format (0-255).',
+				bindable: true
+			},
+			oklab: {
+				type: { type: 'object', definition: '{ l: number; a: number; b: number }' },
+				description: 'The current color in OKLab format.',
+				bindable: true
+			},
+			okhsv: {
+				type: { type: 'object', definition: '{ h: number; s: number; v: number }' },
+				description: 'The current color in OKHsv format.',
+				bindable: true
+			},
+			onchange: {
+				type: { type: 'function', definition: '(color: { hex: string; rgb: RGB; oklab: OKlab; okhsv: OKhsv; oklch: OKlch }) => void' },
+				description: 'Callback invoked when the color changes.'
+			},
+			quickSelects: {
+				type: { type: 'array', definition: '{ label: string; rgb?: RGB; oklab?: OKlab; okhsv?: OKhsv }[]' },
+				description: 'Quick-select color swatches.',
+				default: '[]',
+				bindable: true
+			},
+			side: {
+				type: { type: 'enum', definition: "'top' | 'right' | 'bottom' | 'left'" },
+				description: 'The preferred side of the trigger to render the popover.',
+				default: "'bottom'"
+			},
+			sideOffset: {
+				type: 'number',
+				description: 'The distance in pixels from the trigger.',
+				default: '10'
+			},
+			class: {
+				type: 'string',
+				description: 'Additional CSS classes to apply.'
+			}
+		}
+	}
+] satisfies APISchema[];

apps/docs/src/lib/docs/colors/color-picker/index.ts

@@ -1,11 +1,13 @@
 import Docs from './Documentation.md';
 import Example from './Example.svelte';
 import Card from './Card.svelte';
+import api from './api';
 
 export default {
 	slug: 'color-picker',
 	title: 'Color Picker',
 	docs: Docs,
 	example: Example,
 	card: Card,
+	api,
 };

apps/docs/src/lib/docs/colors/color-select/api.ts

@@ -0,0 +1,43 @@
+import type { APISchema } from '$lib/types/schema';
+
+export default [
+	{
+		title: 'ColorSelect',
+		description: 'A group of color swatches that allows selecting a single color.',
+		props: {
+			colors: {
+				type: { type: 'array', definition: "(string | { class?: string; label: string; value?: string })[]" },
+				description: 'The list of selectable colors. Can be simple strings or objects with custom class, label, and value.',
+				required: true,
+				bindable: true
+			},
+			selected: {
+				type: { type: 'union', definition: "string | { class?: string; label: string; value?: string }" },
+				description: 'The currently selected color. Defaults to the first color.',
+				bindable: true
+			},
+			name: {
+				type: 'string',
+				description: 'The name attribute for the underlying radio inputs (auto-generated if not provided).',
+				bindable: true
+			},
+			onselected: {
+				type: { type: 'function', definition: '(color: Color, previous: Color) => void' },
+				description: 'Callback invoked when the selected color changes.'
+			},
+			colorsClass: {
+				type: 'string',
+				description: 'Additional CSS classes for the color swatches container.'
+			},
+			class: {
+				type: 'string',
+				description: 'Additional CSS classes to apply to the root element.'
+			},
+			ref: {
+				type: 'HTMLDivElement',
+				description: 'The underlying DOM element.',
+				bindable: true
+			}
+		}
+	}
+] satisfies APISchema[];

apps/docs/src/lib/docs/colors/color-select/index.ts

@@ -1,11 +1,13 @@
 import Docs from './Documentation.md';
 import Example from './Example.svelte';
 import Card from './Card.svelte';
+import api from './api';
 
 export default {
 	slug: 'color-select',
 	title: 'Color Select',
 	docs: Docs,
 	example: Example,
 	card: Card,
+	api,
 };

apps/docs/src/lib/docs/social/atproto-handle-popup/api.ts

@@ -0,0 +1,24 @@
+import type { APISchema } from '$lib/types/schema';
+
+export default [
+	{
+		title: 'AtprotoHandlePopup',
+		description: 'An autocomplete input for searching and selecting AT Protocol (Bluesky) user handles. Uses bits-ui Command for the combobox behavior.',
+		props: {
+			value: {
+				type: 'string',
+				description: 'The current input value.',
+				bindable: true
+			},
+			onselected: {
+				type: { type: 'function', definition: '(actor: { handle: string; displayName: string; avatar: string; did: string }) => void' },
+				description: 'Callback invoked when a user profile is selected from the results.'
+			},
+			ref: {
+				type: 'HTMLInputElement',
+				description: 'Reference to the input element.',
+				bindable: true
+			}
+		}
+	}
+] satisfies APISchema[];

apps/docs/src/lib/docs/social/atproto-handle-popup/index.ts

@@ -1,11 +1,21 @@
 import Docs from './Documentation.md';
 import Example from './Example.svelte';
 import Card from './Card.svelte';
+import api from './api';
 
 export default {
 	slug: 'atproto-handle-popup',
 	title: 'Atproto Handle Popup',
 	docs: Docs,
 	example: Example,
 	card: Card,
+	api,
+	sources: [
+		{
+			href: 'https://bits-ui.com/docs/components/command',
+			label: 'bits-ui command',
+			package: 'bits-ui',
+			component: 'Command'
+		}
+	]
 };

apps/docs/src/lib/docs/social/atproto-login/api.ts

@@ -0,0 +1,32 @@
+import type { APISchema } from '$lib/types/schema';
+
+export default [
+	{
+		title: 'AtprotoLoginModal',
+		description: 'A modal dialog for AT Protocol (Bluesky) login with handle autocomplete. Export atProtoLoginModalState to control the modal.',
+		props: {
+			login: {
+				type: { type: 'function', definition: '(handle: string) => Promise<boolean | undefined>' },
+				description: 'Callback to handle the login action. Should return true on success.'
+			},
+			signup: {
+				type: { type: 'function', definition: '() => Promise<boolean | undefined>' },
+				description: 'Callback to handle the signup action.'
+			},
+			formAction: {
+				type: 'string',
+				description: 'The form action URL for server-side form submission.'
+			},
+			formMethod: {
+				type: { type: 'enum', definition: "'dialog' | 'get' | 'post'" },
+				description: 'The form submission method.',
+				default: "'get'"
+			},
+			loginOnSelect: {
+				type: 'boolean',
+				description: 'Whether to automatically trigger login when a handle is selected from autocomplete.',
+				default: 'true'
+			}
+		}
+	}
+] satisfies APISchema[];

apps/docs/src/lib/docs/social/atproto-login/index.ts

@@ -1,11 +1,13 @@
 import Docs from './Documentation.md';
 import Example from './Example.svelte';
 import Card from './Card.svelte';
+import api from './api';
 
 export default {
 	slug: 'atproto-login',
 	title: 'Atproto Login',
 	docs: Docs,
 	example: Example,
 	card: Card,
+	api,
 };