kumo-svelte 0.1.0-beta.0

package/src/routes/components/collapsible/+page.md

@@ -0,0 +1,191 @@
+---
+title: "Collapsible"
+description: "A composable disclosure component for showing and hiding content."
+sourceFile: "components/collapsible"
+baseUIComponent: "collapsible"
+---
+
+<script>
+  import ComponentExample from '$lib/docs/ComponentExample.svelte';
+  import ComponentSection from '$lib/docs/ComponentSection.svelte';
+  import PropsTable from '$lib/docs/PropsTable.svelte';
+</script>
+
+<!-- Hero Demo -->
+
+<ComponentSection>
+  <ComponentExample demo="CollapsibleHeroDemo" />
+</ComponentSection>
+
+<!-- Installation -->
+
+<ComponentSection>
+
+## Installation
+
+### Barrel
+
+```svelte
+<script lang="ts">
+  import {
+    Collapsible
+  } from 'kumo-svelte';
+</script>
+
+<Collapsible.Root open>
+  <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>
+  <Collapsible.DefaultPanel>
+    Content with border-left accent styling.
+  </Collapsible.DefaultPanel>
+</Collapsible.Root>
+```
+
+### Granular
+
+```svelte
+<script lang="ts">
+  import {
+    Collapsible
+  } from 'kumo-svelte';
+</script>
+```
+
+</ComponentSection>
+
+<!-- Usage -->
+
+<ComponentSection>
+
+## Usage
+
+Collapsible uses a compound component pattern for full composition control.
+
+### With Default Styling
+
+Use `Collapsible.DefaultTrigger` and `Collapsible.DefaultPanel` for the classic Kumo style:
+
+```svelte
+<script lang="ts">
+  import {
+    Collapsible
+  } from 'kumo-svelte';
+
+  let open = $state(false);
+</script>
+
+<Collapsible.Root bind:open>
+  <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>
+  <Collapsible.DefaultPanel>
+    Content with border-left accent styling.
+  </Collapsible.DefaultPanel>
+</Collapsible.Root>
+```
+
+### Custom Trigger
+
+Use `Collapsible.Trigger` for full control over the trigger element:
+
+```svelte
+<script lang="ts">
+  import { Collapsible } from 'kumo-svelte';
+
+  let open = $state(false);
+</script>
+
+<Collapsible.Root bind:open>
+  <Collapsible.Trigger class="rounded-lg bg-kumo-base px-3 py-2 text-sm ring ring-kumo-line">
+    {open ? 'Hide' : 'Show'} details
+  </Collapsible.Trigger>
+  <Collapsible.Panel class="mt-2 rounded-lg bg-kumo-tint p-4">
+    Custom styled panel content.
+  </Collapsible.Panel>
+</Collapsible.Root>
+```
+
+</ComponentSection>
+
+<!-- Examples -->
+
+<ComponentSection>
+
+## Examples
+
+### Basic
+
+<ComponentExample demo="CollapsibleBasicDemo" />
+
+### Multiple Items
+
+<ComponentExample demo="CollapsibleMultipleDemo" />
+
+### Custom Trigger
+
+Use `Collapsible.Trigger` for full control:
+
+<ComponentExample demo="CollapsibleCustomTriggerDemo" />
+
+### Keep Mounted
+
+Use `keepMounted` on `DefaultPanel` (or `Panel`) to preserve internal state — such as form inputs — when the panel is collapsed:
+
+<ComponentExample demo="CollapsibleKeepMountedDemo" />
+
+### Accordion Pattern
+
+Control which item is open to create an accordion where only one item can be expanded at a time:
+
+<ComponentExample demo="CollapsibleAccordionDemo" />
+
+</ComponentSection>
+
+<!-- Sub-components -->
+
+<ComponentSection>
+
+## Sub-components
+
+| Component | Description |
+|-----------|-------------|
+| `Collapsible.Root` | Manages open state. Pass `open` and `onOpenChange` for controlled mode, or use `bind:open`. |
+| `Collapsible.Trigger` | Button that toggles visibility. |
+| `Collapsible.Panel` | Container for collapsible content. |
+| `Collapsible.DefaultTrigger` | Pre-styled trigger with text label and animated caret icon. |
+| `Collapsible.DefaultPanel` | Pre-styled panel with border-left accent and standard spacing. |
+
+</ComponentSection>
+
+<!-- API Reference -->
+
+<ComponentSection>
+
+## API Reference
+
+### Collapsible
+
+Convenience component that renders the default trigger and panel composition.
+
+<PropsTable component="Collapsible" />
+
+### Collapsible.Root
+
+<PropsTable component="Collapsible.Root" />
+
+### Collapsible.Trigger
+
+<PropsTable component="Collapsible.Trigger" />
+
+### Collapsible.Panel
+
+<PropsTable component="Collapsible.Panel" />
+
+### Collapsible.DefaultTrigger
+
+<PropsTable component="Collapsible.DefaultTrigger" />
+
+### Collapsible.DefaultPanel
+
+Accepts all `Collapsible.Panel` props in addition to the ones listed below.
+
+<PropsTable component="Collapsible.DefaultPanel" />
+
+</ComponentSection>

package/src/routes/components/combobox/+page.md

@@ -0,0 +1,251 @@
+---
+title: "Combobox"
+description: "A searchable select component that allows users to filter and select from a list of options."
+sourceFile: "components/combobox"
+baseUIComponent: "combobox"
+---
+
+<script>
+  import ComponentExample from '$lib/docs/ComponentExample.svelte';
+  import ComponentSection from '$lib/docs/ComponentSection.svelte';
+  import PropsTable from '$lib/docs/PropsTable.svelte';
+</script>
+
+<!-- Hero Demo -->
+
+<ComponentSection>
+  <ComponentExample demo="ComboboxDemo" />
+</ComponentSection>
+
+<!-- Installation -->
+
+<ComponentSection>
+
+## Installation
+
+### Barrel
+
+
+```svelte
+<script lang="ts">
+  import { Combobox } from 'kumo-svelte';
+</script>
+```
+
+### Granular
+
+```svelte
+<script lang="ts">
+  import { Combobox } from 'kumo-svelte';
+</script>
+```
+
+</ComponentSection>
+
+<!-- Usage -->
+
+<ComponentSection>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Combobox } from 'kumo-svelte';
+
+  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
+  let value = $state<string | null>(null);
+</script>
+
+<Combobox bind:value items={fruits}>
+  <Combobox.TriggerInput placeholder="Select a fruit" />
+  <Combobox.Content>
+    <Combobox.Empty />
+    <Combobox.List>
+      {#snippet children(item)}
+        <Combobox.Item value={item}>{item}</Combobox.Item>
+      {/snippet}
+    </Combobox.List>
+  </Combobox.Content>
+</Combobox>
+```
+
+</ComponentSection>
+
+<!-- Examples -->
+
+<ComponentSection>
+
+## Examples
+
+### Sizes
+
+
+The Combobox supports four size variants that match the Input component: `xs`,
+  `sm`, `base` (default), and `lg`.
+
+<ComponentExample demo="ComboboxSizesDemo" />
+
+
+Size also applies to `TriggerValue` (searchable inside variant):
+
+  <ComponentExample demo="ComboboxSizesSearchableInsideDemo" />
+</ComponentSection>
+
+<ComponentSection>
+
+### Searchable Item (Inside)
+
+
+A searchable select component inside popup that allows users to filter and
+    select.
+
+  <ComponentExample demo="ComboboxSearchableInsideDemo" />
+</ComponentSection>
+
+<ComponentSection>
+
+### Searchable Select with Placeholder
+
+
+Use `TriggerValue` with a `placeholder` prop to create a searchable Select-style field.
+    The placeholder is displayed until a value is selected.
+
+  <ComponentExample demo="ComboboxSearchableSelectDemo" />
+</ComponentSection>
+
+<ComponentSection>
+
+### Custom Trigger
+
+
+Use <code>Combobox.Trigger</code> with a <code>render</code> prop to replace the default input-like trigger with your own element. Pair with <code>Combobox.Value</code> to display the selected value. Useful for account switchers, sidebar navigation, or anywhere the default chrome doesn't fit.
+
+<ComponentExample demo="ComboboxCustomTriggerDemo" />
+
+</ComponentSection>
+
+<ComponentSection>
+
+### Grouped
+
+
+Group items into categories using the Group and GroupLabel components.
+
+  <ComponentExample demo="ComboboxGroupedDemo" />
+</ComponentSection>
+
+<ComponentSection>
+
+### Multiple
+
+
+Allow users to select multiple options from the list.
+
+  <ComponentExample demo="ComboboxMultipleDemo" />
+</ComponentSection>
+
+<ComponentSection>
+
+### With Field
+
+
+Add label and description using the built-in Field wrapper.
+
+  <ComponentExample demo="ComboboxWithFieldDemo" />
+</ComponentSection>
+
+<ComponentSection>
+
+### Disabled
+
+
+Pass the `disabled` prop to prevent interaction. Works with both `TriggerInput` and `TriggerValue`.
+
+  <ComponentExample demo="ComboboxDisabledDemo" />
+</ComponentSection>
+
+<ComponentSection>
+
+### Disabled Items
+
+
+Pass the `disabled` prop to an individual `Combobox.Item` to make it non-selectable. Disabled rows are rendered with a muted style and skipped during keyboard navigation selection.
+
+  <ComponentExample demo="ComboboxDisabledItemsDemo" />
+</ComponentSection>
+
+<ComponentSection>
+
+### Error State
+
+
+Display validation errors with the error prop.
+
+  <ComponentExample demo="ComboboxErrorDemo" />
+</ComponentSection>
+
+<ComponentSection>
+
+## Customizing Dropdown Height
+
+
+By default, <code class="text-surface">Combobox.Content</code> has a max height of <code class="text-surface">24rem</code> (384px) or the available viewport space, whichever is smaller. The dropdown scrolls automatically when content exceeds this height.
+
+
+To customize the max height, pass a class to <code class="text-surface">Combobox.Content</code>:
+
+
+```svelte
+// Shorter dropdown (200px)
+<Combobox.Content class="max-h-[200px]">
+
+// Taller dropdown (500px)
+<Combobox.Content class="max-h-[500px]">
+
+// Use Tailwind presets
+<Combobox.Content class="max-h-64">  // 256px
+<Combobox.Content class="max-h-96">  // 384px (same as default)
+```
+
+</ComponentSection>
+
+<ComponentSection>
+
+## API Reference
+
+### Combobox
+
+
+Root component for the searchable select.
+
+<PropsTable component="Combobox" />
+
+### Combobox.Content
+
+
+Dropdown container for the list.
+
+<PropsTable component="Combobox.Content" />
+
+### Combobox.Item
+
+
+Individual selectable option.
+
+<PropsTable component="Combobox.Item" />
+
+### Additional Sub-components
+
+  <ul class="list-disc list-inside space-y-1">
+    <li>`Combobox.TriggerInput` - Single-select input trigger</li>
+    <li>`Combobox.TriggerValue` - Button trigger showing selected value</li>
+    <li>`Combobox.TriggerMultipleWithInput` - Multi-select with chips</li>
+    <li>`Combobox.Input` - Search input inside dropdown</li>
+    <li>`Combobox.List` - List container with render prop</li>
+    <li>`Combobox.Group` - Group container for categorized items</li>
+    <li>`Combobox.GroupLabel` - Header label for a group</li>
+    <li>`Combobox.Collection` - Items container within a group</li>
+    <li>`Combobox.Chip` - Selected item chip</li>
+    <li>`Combobox.Empty` - Empty state message</li>
+  </ul>
+</ComponentSection>

package/src/routes/components/command-palette/+page.md

@@ -0,0 +1,244 @@
+---
+title: "CommandPalette"
+description: "A composable command palette component for search and command dialogs."
+sourceFile: "components/command-palette"
+baseUIComponent: "command"
+---
+
+<script>
+  import ComponentExample from '$lib/docs/ComponentExample.svelte';
+  import ComponentSection from '$lib/docs/ComponentSection.svelte';
+  import PropsTable from '$lib/docs/PropsTable.svelte';
+</script>
+
+<!-- Hero Demo -->
+
+<ComponentSection>
+  <ComponentExample demo="CommandPaletteBasicDemo" />
+</ComponentSection>
+
+<!-- Installation -->
+
+<ComponentSection>
+
+## Installation
+
+### Barrel
+
+```svelte
+<script lang="ts">
+  import { CommandPalette } from 'kumo-svelte';
+</script>
+
+<CommandPalette />
+```
+
+</ComponentSection>
+
+<!-- Keyboard Navigation -->
+
+<ComponentSection>
+
+## Keyboard Navigation
+
+
+Built-in keyboard navigation is provided automatically:
+
+<ul>
+  <li><kbd>↑</kbd> <kbd>↓</kbd> Move highlight between items</li>
+  <li><kbd>Enter</kbd> Select highlighted item</li>
+  <li><kbd>⌘/Ctrl</kbd> <kbd>Enter</kbd> Select with <code>newTab: true</code></li>
+  <li><kbd>Escape</kbd> Close the dialog</li>
+</ul>
+</ComponentSection>
+
+<!-- Examples -->
+
+<ComponentSection>
+
+## Examples
+
+### With Grouped Items
+
+
+Group related commands together with labels.
+
+<ComponentExample demo="CommandPaletteBasicDemo" />
+
+### Simple Flat List
+
+
+For simpler use cases, use a flat array of items without grouping.
+
+<ComponentExample demo="CommandPaletteSimpleDemo" />
+
+### Loading State
+
+
+Show a loading spinner while fetching results.
+
+<ComponentExample demo="CommandPaletteLoadingDemo" />
+
+### Disabling Browser Autocomplete
+
+
+Pass input attributes through `inputProps` to suppress browser and password manager autocomplete overlays.
+
+<ComponentExample demo="CommandPaletteNoAutocompleteDemo" />
+
+### ResultItem with Breadcrumbs
+
+
+Use `ResultItem` for rich items with
+    breadcrumbs, icons, and optional text highlighting.
+
+  <ComponentExample demo="CommandPaletteResultItemDemo" />
+</ComponentSection>
+
+<!-- Component Parts -->
+
+<ComponentSection>
+
+## Component Parts
+
+### CommandPalette.Root
+
+
+The main wrapper that combines Dialog + Panel. Manages open state and
+  Autocomplete functionality.
+
+
+### CommandPalette.Dialog
+
+
+Modal dialog wrapper. Use with Panel for swappable content (e.g., drill-down
+  navigation).
+
+
+### CommandPalette.Panel
+
+
+Autocomplete panel without dialog. Use inside Dialog for content that can swap
+  without re-mounting.
+
+
+### CommandPalette.Input
+
+
+Search input field with auto-focus and keyboard handling.
+
+
+### CommandPalette.List
+
+
+Scrollable container for results.
+
+
+### CommandPalette.Results
+
+
+Render prop iterator for items/groups.
+
+
+### CommandPalette.Group
+
+
+Category grouping container.
+
+
+### CommandPalette.GroupLabel
+
+
+Section header text within a group.
+
+
+### CommandPalette.Items
+
+
+Render prop iterator for items within a group.
+
+
+### CommandPalette.Item
+
+
+Basic selectable item.
+
+
+### CommandPalette.ResultItem
+
+
+Rich item with breadcrumbs, icons, and text highlighting.
+
+
+### CommandPalette.HighlightedText
+
+
+Renders text with highlighted portions based on match indices.
+
+
+### CommandPalette.Empty
+
+
+Empty state when no results match.
+
+
+### CommandPalette.Loading
+
+
+Loading spinner state.
+
+
+### CommandPalette.Footer
+
+
+Footer for keyboard hints or other content.
+
+</ComponentSection>
+
+<!-- API Reference -->
+
+<ComponentSection>
+
+## API Reference
+
+### CommandPalette.Root Props
+
+```svelte
+interface CommandPaletteRootProps<TGroup, TItem> {
+  // Simple list API
+  commands?: CommandPaletteCommand[];
+  placeholder?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  onSelect?: (command: CommandPaletteCommand, options: { newTab: boolean }) => void;
+  inputProps?: Record<string, unknown>;
+
+  // Bits UI command options
+  label?: string;
+  loop?: boolean;
+  shouldFilter?: boolean;
+
+  // Composable API
+  children?: Snippet;
+}
+```
+
+### CommandPalette.ResultItem Props
+
+```svelte
+interface CommandPaletteResultItemProps<T> {
+  value: T;
+  title: string;
+  breadcrumbs?: string[];
+  titleHighlights?: [number, number][];
+  breadcrumbHighlights?: [number, number][][];
+  description?: string;
+  icon?: Snippet;
+  onclick: (e: MouseEvent) => void;
+  showArrow?: boolean; // default: true
+  external?: boolean; // shows external link icon
+  nonInteractive?: boolean;
+}
+```
+
+</ComponentSection>