@spunto/design-system 0.22.0 → 0.24.0

package/README.md

@@ -73,6 +73,26 @@ const nextConfig = { transpilePackages: ["@spunto/design-system"] }
   - _Forms_ — `Input`, `Textarea`, `Label`, `Switch`, `Checkbox`,
     `RadioGroup` (+`RadioGroupItem`), `Select` (+`SelectTrigger`/`SelectValue`/
     `SelectContent`/`SelectItem`/`SelectGroup`/`SelectGroupLabel`/`SelectSeparator`).
+  - _Combobox_ — `Combobox` (+`ComboboxInput`/`Clear`/`Trigger`/`Value`/`Search`/`Chips`/
+    `Chip`/`ChipsInput`/`Content`/`List`/`Group`/`GroupLabel`/`Separator`/`Item`/`Empty`/
+    `Loading`), the `Select` you can type into — for the list nobody wants to scroll
+    (branches, repos, model ids, members, tags). Base UI's `Combobox` underneath, and
+    compositional like `Select`: items are children. Three things it adds. (1) **Items
+    filter themselves**, with the same collator `CommandPalette` uses, so no caller
+    re-`.filter()`s its options and "deploi" finds "déploiement"; groups hide themselves
+    through `:has()` (no more `if (items.length === 0) return null`), and so does a
+    separator with nothing left after it. (2) **A query is only a query when someone
+    typed it** — Base UI writes the selected item's label into the input, and taken at
+    face value that text filters the list down to the row you just picked; the filter
+    keys off the `input-change` reason and ignores anything the component wrote itself.
+    (3) In multi-select **the chips field registers itself as the popup's anchor**, so
+    the list opens under the whole field instead of the caret-sized `<input>` — no ref
+    to remember, no `anchor` prop to pass. Two field shapes, two components rather than
+    a flag: `ComboboxInput` (the combobox *is* the field, same 32 px/border/ring as
+    `Input`, chevron out of the tab order) or `ComboboxTrigger` + `ComboboxValue` with a
+    `ComboboxSearch` at the top of the popup, for when the value is rendered rather than
+    typed. Presentational only: `loading` is a prop and a server-side search is
+    `onInputValueChange` + `filter={null}`.
   - _Navigation & feedback_ — `Tabs` (+`TabsList`/`TabsIndicator`/`TabsTab`/`TabsPanel`),
     `Alert` (+`AlertTitle`/`AlertDescription`, +`alertVariants`) — an **inline, persistent,
     declarative** status banner, the counterpart to the ephemeral imperative `toast()`.
@@ -292,9 +312,24 @@ hand-typed reference that degrades cleanly.
   secrets") instead of showing a bare chevron, and the form opens it by itself
   when any of those sections already has a value — so editing a project never
   hides a setting you made earlier.
+- **Git hosting is a list of providers, not GitHub** (0.21.0). `gitProviders`
+  (id, name, `connected`, `accounts`, `installUrl`, `operations`, `icon`) and
+  `gitRepos` (each tagged with its `provider`) replace `githubRepos` / `github` /
+  `connectUrl` / `githubIcon`, and `ProjectRepo.provider` widens from
+  `"github" | "git"` to a `string` — the set of forges belongs to the deployment,
+  not to this package. The component reads `operations` to decide what to offer
+  rather than branching on a provider id, so a second forge needs no change here.
+  `"git"` (exported as `RAW_GIT`) still means "a raw clone URL", which is the
+  *absence* of a provider rather than one more of them.
+- **One "Add repository" button, with no brand on it.** The forge is a property
+  of the repository you pick, not a decision to make before you know which
+  repository you want — so the field offers every connected provider's repos at
+  once and `renderRepoField`'s `onChange(value, option?)` hands back the chosen
+  entry, which is how the row learns its provider. A brand glyph on a generic
+  button is wrong as soon as two providers are connected.
 - **Nothing fetches.** Catalogs come in as data, the marketplace search is
-  `onSearchExtensions`, the GitHub combobox is `renderRepoField` (without it: a
-  plain `<input list>` + `<datalist>`, no dependency, keyboard-friendly), and
+  `onSearchExtensions`, the repository combobox is `renderRepoField` (without it:
+  a plain `<input list>` + `<datalist>`, no dependency, keyboard-friendly), and
   `extras` slips app-specific content *inside* a section — the deploy key card,
   a warning — without forking the component.
 - **Its bricks, exported individually**: `FormSection`, `Field`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -61,7 +61,8 @@
     "README.md"
   ],
   "scripts": {
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   },
   "dependencies": {
     "@xterm/addon-fit": "^0.11.0",
@@ -81,8 +82,13 @@
   },
   "devDependencies": {
     "@base-ui/react": "^1.6.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "typescript": "^5"
+    "@vitejs/plugin-react": "^5.0.4",
+    "jsdom": "^28.0.0",
+    "typescript": "^5",
+    "vitest": "^4.1.11"
   }
 }