@svgrid/ui 0.2.0

package/recipes/selection/auto-complete.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // SvAutoComplete - free-text input with a live suggestion list. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-auto-complete
+  import { SvAutoComplete } from '@svgrid/grid'
+
+  const cities = ['Amsterdam', 'Berlin', 'Copenhagen', 'Dublin']
+  let value = $state('')
+</script>
+
+<SvAutoComplete label="City" suggestions={cities}
+  {value} onChange={(v) => (value = v)} placeholder="Search a city" />

package/recipes/selection/combo-box.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvComboBox - searchable single-select combobox. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-combo-box
+  import { SvComboBox, type ListOption } from '@svgrid/grid'
+
+  const options: ListOption[] = [
+    { value: 'us', label: 'United States' },
+    { value: 'gb', label: 'United Kingdom' },
+    { value: 'de', label: 'Germany' },
+  ]
+  let value = $state<string | number | null>(null)
+</script>
+
+<SvComboBox label="Country" {options} {value} onChange={(v) => (value = v)} required />

package/recipes/selection/country-input.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvCountryInput - searchable country picker emitting an ISO code. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-country-input
+  import { SvCountryInput } from '@svgrid/grid'
+
+  let value = $state<string | null>(null)
+</script>
+
+<SvCountryInput label="Country" {value} onChange={(code) => (value = code)} required />

package/recipes/selection/drop-down-list.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvDropDownList - single-select dropdown with no typing. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-drop-down-list
+  import { SvDropDownList, type ListOption } from '@svgrid/grid'
+
+  const options: ListOption[] = [
+    { value: 'open', label: 'Open' },
+    { value: 'wip', label: 'In progress' },
+    { value: 'done', label: 'Done' },
+  ]
+  let value = $state<string | number | null>(null)
+</script>
+
+<SvDropDownList label="Status" {options} {value} onChange={(v) => (value = v)} />

package/recipes/selection/grid-select.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  // SvGridSelect - grid-in-a-dropdown multi-column single-select. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-grid-select
+  import { SvGridSelect, type GridSelectColumn } from '@svgrid/grid'
+
+  const columns: GridSelectColumn[] = [
+    { field: 'name', header: 'Name', width: '1.5fr' },
+    { field: 'email', header: 'Email' },
+    { field: 'role', header: 'Role', width: '80px' },
+  ]
+  const options = [
+    { id: 1, name: 'Ada Lovelace', email: 'ada@ex.com', role: 'Admin' },
+    { id: 2, name: 'Alan Turing', email: 'alan@ex.com', role: 'User' },
+  ]
+  let value = $state<string | number | null>(null)
+</script>
+
+<SvGridSelect label="Owner" {columns} {options} idField="id" bind:value />

package/recipes/selection/list-box.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvListBox - inline single/multi-select list picker. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-list-box
+  import { SvListBox, type ListOption } from '@svgrid/grid'
+
+  const options: ListOption[] = [
+    { value: 'eng', label: 'Engineering', group: 'Product' },
+    { value: 'des', label: 'Design', group: 'Product' },
+    { value: 'sal', label: 'Sales', group: 'Go-to-market' },
+  ]
+  let value = $state<string | null>(null)
+</script>
+
+<SvListBox label="Team" {options} {value} onChange={(v) => (value = v)} />

package/recipes/selection/multi-select.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvMultiSelect - multi-select dropdown with a chip trigger. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-multi-select
+  import { SvMultiSelect, type MultiSelectOption } from '@svgrid/grid'
+
+  const options: MultiSelectOption[] = [
+    { value: 'ts', label: 'TypeScript' },
+    { value: 'svelte', label: 'Svelte' },
+    { value: 'rust', label: 'Rust' },
+  ]
+  let value = $state<Array<string | number>>([])
+</script>
+
+<SvMultiSelect label="Skills" {options} bind:value maxTagCount={2} />

package/recipes/selection/tree-select.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // SvTreeSelect - single-select dropdown over a collapsible tree. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tree-select
+  import { SvTreeSelect, type TreeSelectNode } from '@svgrid/grid'
+
+  const nodes: TreeSelectNode[] = [
+    { value: 'eng', label: 'Engineering', children: [
+      { value: 'fe', label: 'Frontend' },
+      { value: 'be', label: 'Backend' },
+    ] },
+    { value: 'design', label: 'Design' },
+  ]
+  let value = $state<string | number | null>(null)
+</script>
+
+<SvTreeSelect label="Team" {nodes} bind:value showPath />