@keboola/design 6.4.0 → 8.0.0

package/AGENTS.md

@@ -36,12 +36,12 @@ The root barrel (`@keboola/design`) is **not** the whole package. These live onl
 
 The API is "shadcn-shaped" enough to invite copy-paste but different enough to break it — copied shadcn code fails type-check. Translate these before emitting:
 
-| Component             | shadcn shape (wrong here)                                                                         | `@keboola/design` shape                                                                                                                                                            |
-| --------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `DropdownMenu`        | named parts `DropdownMenuTrigger` / `DropdownMenuContent` / `DropdownMenuItem`                    | **compound** — only `DropdownMenu` exports; use `DropdownMenu.Trigger` / `.Content` / `.Item` / `.Label` / `.Separator`                                                            |
-| `Tabs`                | `<Tabs><TabsList><TabsTrigger/></TabsList><TabsContent/>`                                         | data-driven — `<Tabs triggers={[{ value, title }]}>` + `TabsContent` children. **No** `TabsList` / `TabsTrigger` export                                                            |
-| `Select`              | composed children `<Select><SelectTrigger/><SelectContent><SelectItem/></SelectContent></Select>` | data-driven — `Select` takes **`items`**; the form connector `SelectField` also takes **`items`** (canonical), with `options` as a deprecated alias. Same `{ value, label }` shape |
-| `Sidebar.SearchInput` | `asChild`-wrappable trigger                                                                       | concrete `<input>` (`ComponentProps<'input'>`), **no `asChild`** — put a custom search affordance in a plain element inside `Sidebar.Header`                                       |
+| Component             | shadcn shape (wrong here)                                                                         | `@keboola/design` shape                                                                                                                                                                                          |
+| --------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `DropdownMenu`        | named parts `DropdownMenuTrigger` / `DropdownMenuContent` / `DropdownMenuItem`                    | **compound** — only `DropdownMenu` exports; use `DropdownMenu.Trigger` / `.Content` / `.Item` / `.Label` / `.Separator`                                                                                          |
+| `Tabs`                | `<Tabs><TabsList><TabsTrigger/></TabsList><TabsContent/>`                                         | data-driven — `<Tabs triggers={[{ value, title }]}>` + `TabsContent` children. **No** `TabsList` / `TabsTrigger` export                                                                                          |
+| `Select`              | composed children `<Select><SelectTrigger/><SelectContent><SelectItem/></SelectContent></Select>` | data-driven — `Select` takes **`items`**, and the form connector `SelectField` delegates to it, so both take the same `items`: flat `{ value, label, icon?, disabled? }` or groups of them (`{ label?, items }`) |
+| `Sidebar.SearchInput` | `asChild`-wrappable trigger                                                                       | concrete `<input>` (`ComponentProps<'input'>`), **no `asChild`** — put a custom search affordance in a plain element inside `Sidebar.Header`                                                                     |
 
 Other compound (not named-export) components in the barrel: `Modal.*`, `Sheet.*`, `Card.*`, `Sidebar.*`, `PageHeader.Index` / `.Detail`, `EmptyState.*`, `Pagination.*`, `Popover.*` — reach for the dotted sub-parts, not flat `XContent` / `XTrigger` named imports. (The root `SearchInput` block is distinct from `Sidebar.SearchInput` and is fully composable.)
 
@@ -205,11 +205,10 @@ The `label` prop implies `orientation="horizontal"` — labels are not rendered
 | `Combobox`        | Single selection from a searchable list                       |
 | `MultiCombobox`   | Multiple selections from a searchable list                    |
 | `Select`          | Single selection from a short enum (≤ ~10 options, no search) |
-| `Tagger`          | Free-form chip/tag entry                                      |
 | `CodeEditor`      | Generic code editing (JSON, YAML, shell)                      |
 | `SqlEditor`       | SQL editing (syntax + autocomplete)                           |
 
-`Select` is wrong above ~10 items — use `Combobox`. `Combobox` is wrong for free-form values — use `Tagger`. `CodeEditor`/`SqlEditor` load the full CodeMirror bundle and ship from the `@keboola/design/editors` subpath (not the root); reserve for real code editing.
+`Select` is wrong above ~10 items — use `Combobox`. `CodeEditor`/`SqlEditor` load the full CodeMirror bundle and ship from the `@keboola/design/editors` subpath (not the root); reserve for real code editing.
 
 ## Composition recipes
 
@@ -231,7 +230,7 @@ const form = useAppForm({
 
 <Modal open={open} onOpenChange={setOpen}>
   <Modal.Content size="medium">
-    <Modal.Header title="New bucket" />
+    <Modal.Header>New bucket</Modal.Header>
     <Modal.Body>
       <form.AppForm>
         <form.FormBody id={FORM_ID}>
@@ -427,7 +426,7 @@ Controlled (opened from elsewhere, no `Trigger`): pass `open` + `onOpenChange` t
 
 ## Icons
 
-Canonical icon surface is `@keboola/design/icons` — a wildcard re-export of [lucide-react](https://lucide.dev) plus Keboola-custom inline-SVG icons. Follow **shadcn convention**: import named icons directly, no wrapper component. Every Lucide icon is available without any package edit.
+Canonical icon surface is `@keboola/design/icons` — a re-export of every [lucide-react](https://lucide.dev) icon plus Keboola-custom inline-SVG icons. Follow **shadcn convention**: import named icons directly, no wrapper component. Every Lucide icon is available without any package edit.
 
 ```tsx
 import { ChevronDown, Keboola, Loader2 } from '@keboola/design/icons';