@vegastack/design 0.7.11 → 0.7.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vegastack/design",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.13",
|
|
4
4
|
"description": "VegaStack design system — cn utility, icon runtime, Tailwind v4 preset, and the vegastack-design CLI (tokens ship separately as @vegastack/design-tokens)",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -85,9 +85,11 @@ info`, each an ink on the `card` surface with a required icon; **`announcement-b
|
|
|
85
85
|
render ONE `Announcer` element per component, mounted for its life. It keeps the region observed from first paint
|
|
86
86
|
and re-keys it per call, so repeating an identical string still announces. Do not hand-roll a
|
|
87
87
|
`role="status"` node with a `{text, seq}` counter.
|
|
88
|
-
- **
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
- **The user menu is one standard** (as in `app-shell-01`): the footer trigger shows avatar, name
|
|
89
|
+
and role; the menu header repeats avatar + name with the email instead of the role; then Profile
|
|
90
|
+
and Settings, a Theme `DropdownMenuSub` whose `DropdownMenuRadioGroup` (Light · Dark · System, with
|
|
91
|
+
Sun · Moon · Monitor icons) is bound to `theme`/`setTheme` from `useVegaStackTheme()`, Keyboard
|
|
92
|
+
shortcuts, a separator, and Sign out. Every item has an icon. Do not hand-roll a theme toggle button.
|
|
91
93
|
- **`code-block`** for static syntax-highlighted source; **`terminal`** for command sessions.
|
|
92
94
|
- **`navigation-menu`** is top-level site navigation with panels, not a menu inside a page.
|
|
93
95
|
|
|
@@ -95,32 +97,32 @@ info`, each an ink on the `card` surface with a required icon; **`announcement-b
|
|
|
95
97
|
|
|
96
98
|
A component's name undersells it. Before composing something by hand, check this list:
|
|
97
99
|
|
|
98
|
-
| Component | What it already does
|
|
99
|
-
| ------------------------------------------------------ |
|
|
100
|
-
| `Command` | Renders inline as well as in `CommandDialog
|
|
101
|
-
| `Combobox` | `multiple` with `ComboboxChips`; `filter={null}` hands filtering to your server.
|
|
102
|
-
| `SearchableSelect` | The Select-shaped search picker, with `clearable`. `multiple` for several values; `remote` plus `useAsyncSearch` hands search and paging to your server.
|
|
103
|
-
| `Item` | A link tile with `render={<a />}`; `ItemGroup` gives a set of items list semantics.
|
|
104
|
-
| `DialogContent` · `SheetContent` | `size`: `sm · default · lg · xl` (a side sheet). Never a width class.
|
|
105
|
-
| `DataList` | Per-column `mobile` (`merge` · `visible` · `hidden`), `minWidth`, and `mergedRender` so a merged value keeps its context (`4 to review`), `mergedLayout="line"` for one compact meta line. `DataGrid` adds editing, multi-key sort and a column picker; `Table` is static markup.
|
|
106
|
-
| `DataList` paging and rows | `loadMore` for keyset paging, `getRowHref` for rows that are links, `rowProps` for `data-*` and a `highlighted` new row, `sections` + `getRowSection` for collapsible groups, and `rowActionsColumn` for a per-row menu.
|
|
107
|
-
| `LoadMore` · `useAsyncSearch` | The Load more footer of a keyset list (keeps its width while loading, "Try again", an end caption) · the server-search engine: debounce, dropped stale responses, cursor paging.
|
|
108
|
-
| `SortableList` | `layout="grid"` reorders tiles as well as rows.
|
|
109
|
-
| `FilterBar` / `FilterBuilder` | `FilterBar` is a flat chip row with search, and `FilterBarFacet` is a "Status: Open" facet on `SearchableSelect` (single or `multiple`, local or `remote`); `FilterBuilder` (the `filter-bar-managed` item) edits a nested and/or tree over your field vocabulary. All controlled.
|
|
110
|
-
| `Stat` | `StatDelta` for change, `StatEmpty` for nothing to report.
|
|
111
|
-
| `PropertyList` · `DataList` · `SettingsRow` | A record's facts · many records · one setting with its control.
|
|
112
|
-
| `ActionBar` | The docked bar for bulk selection ("5 selected"), unsaved changes and batch progress.
|
|
113
|
-
| `TruncatedText` · `IconText` · `TableCellText` | Overflow detection, hover and keyboard reveal, and tap-to-toggle on touch.
|
|
114
|
-
| `RelativeTime` | `mode="ago"` ("3 minutes ago") or `mode="day"` ("Yesterday").
|
|
115
|
-
| `EditableCell` · `AutoSaveInput` · `useInlineEdit` | Click-to-edit in a table (`wrap` + `flush` for a page title) · a field that saves as you type, with its status · the hook `EditableCell` is built on.
|
|
116
|
-
| `AttachmentGroup` · `Dropzone` · `useFileDrop` | A file list with per-file state · a drop target · the drop and paste engine.
|
|
117
|
-
| `PageHeader` | Title, description, `breadcrumb`, a back link (`backHref`) and `actions`.
|
|
118
|
-
| `MultiStepForm` · `Stepper` · `Questionnaire` · `Tabs` | A form in steps · progress display (`navigable` on request) · one question at a time · peer regions.
|
|
119
|
-
| `NativeSelect` | The platform `<select>`, so a touch device opens its own picker.
|
|
120
|
-
| `Board` | A column's `lockedReason` explains why it cannot take a card; `itemLinkRender` is a template, the card's `href` wins.
|
|
121
|
-
| `AudioPlayer` | `mediaRef` to drive playback, a transcript button and a waveform; `docked` pins it to the bottom of a scroll column, `onOpenChange` adds its close button, `actionsRef` seeks it, and `onSourceExpired` renews an expired signed URL once.
|
|
122
|
-
| `Tabs` | `TabsList variant="line"` and `Tabs orientation="vertical"`; route tabs draw a `nav` from `tabsListVariants` and `tabsTriggerVariants`, which need no `data-orientation`.
|
|
123
|
-
| `MessageScroller` | `defaultScrollPosition` (`start` · `end` · `last-anchor`), `scrollToMessage` from `useMessageScroller()`, and `useMessageScrollerVisibility()`.
|
|
100
|
+
| Component | What it already does |
|
|
101
|
+
| ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
102
|
+
| `Command` | Renders inline as well as in `CommandDialog` (wide 820px palette by default). `CommandFilters` holds type chips (`ToggleGroup wrap`) and Selects under the input; bare `<CommandFooter />` shows ↵/⌘↵/Esc `Kbd` hints; `CommandLoading` shows the animated search icon. An item's check mark is `data-checked` — visual only, so it is not a form value. |
|
|
103
|
+
| `Combobox` | `multiple` with `ComboboxChips`; `filter={null}` hands filtering to your server. |
|
|
104
|
+
| `SearchableSelect` | The Select-shaped search picker, with `clearable`. `multiple` for several values; `remote` plus `useAsyncSearch` hands search and paging to your server. |
|
|
105
|
+
| `Item` | A link tile with `render={<a />}`; `ItemGroup` gives a set of items list semantics. |
|
|
106
|
+
| `DialogContent` · `SheetContent` | `size`: `sm · default · lg · xl` (a side sheet). Never a width class. |
|
|
107
|
+
| `DataList` | Per-column `mobile` (`merge` · `visible` · `hidden`), `minWidth`, and `mergedRender` so a merged value keeps its context (`4 to review`), `mergedLayout="line"` for one compact meta line. `DataGrid` adds editing, multi-key sort and a column picker; `Table` is static markup. |
|
|
108
|
+
| `DataList` paging and rows | `loadMore` for keyset paging, `getRowHref` for rows that are links, `rowProps` for `data-*` and a `highlighted` new row, `sections` + `getRowSection` for collapsible groups, and `rowActionsColumn` for a per-row menu. |
|
|
109
|
+
| `LoadMore` · `useAsyncSearch` | The Load more footer of a keyset list (keeps its width while loading, "Try again", an end caption) · the server-search engine: debounce, dropped stale responses, cursor paging. |
|
|
110
|
+
| `SortableList` | `layout="grid"` reorders tiles as well as rows. |
|
|
111
|
+
| `FilterBar` / `FilterBuilder` | `FilterBar` is a flat chip row with search, and `FilterBarFacet` is a "Status: Open" facet on `SearchableSelect` (single or `multiple`, local or `remote`); `FilterBuilder` (the `filter-bar-managed` item) edits a nested and/or tree over your field vocabulary. All controlled. |
|
|
112
|
+
| `Stat` | `StatDelta` for change, `StatEmpty` for nothing to report. |
|
|
113
|
+
| `PropertyList` · `DataList` · `SettingsRow` | A record's facts · many records · one setting with its control. |
|
|
114
|
+
| `ActionBar` | The docked bar for bulk selection ("5 selected"), unsaved changes and batch progress. |
|
|
115
|
+
| `TruncatedText` · `IconText` · `TableCellText` | Overflow detection, hover and keyboard reveal, and tap-to-toggle on touch. |
|
|
116
|
+
| `RelativeTime` | `mode="ago"` ("3 minutes ago") or `mode="day"` ("Yesterday"). |
|
|
117
|
+
| `EditableCell` · `AutoSaveInput` · `useInlineEdit` | Click-to-edit in a table (`wrap` + `flush` for a page title) · a field that saves as you type, with its status · the hook `EditableCell` is built on. |
|
|
118
|
+
| `AttachmentGroup` · `Dropzone` · `useFileDrop` | A file list with per-file state · a drop target · the drop and paste engine. |
|
|
119
|
+
| `PageHeader` | Title, description, `breadcrumb`, a back link (`backHref`) and `actions`. |
|
|
120
|
+
| `MultiStepForm` · `Stepper` · `Questionnaire` · `Tabs` | A form in steps · progress display (`navigable` on request) · one question at a time · peer regions. |
|
|
121
|
+
| `NativeSelect` | The platform `<select>`, so a touch device opens its own picker. |
|
|
122
|
+
| `Board` | A column's `lockedReason` explains why it cannot take a card; `itemLinkRender` is a template, the card's `href` wins. |
|
|
123
|
+
| `AudioPlayer` | `mediaRef` to drive playback, a transcript button and a waveform; `docked` pins it to the bottom of a scroll column, `onOpenChange` adds its close button, `actionsRef` seeks it, and `onSourceExpired` renews an expired signed URL once. |
|
|
124
|
+
| `Tabs` | `TabsList variant="line"` and `Tabs orientation="vertical"`; route tabs draw a `nav` from `tabsListVariants` and `tabsTriggerVariants`, which need no `data-orientation`. |
|
|
125
|
+
| `MessageScroller` | `defaultScrollPosition` (`start` · `end` · `last-anchor`), `scrollToMessage` from `useMessageScroller()`, and `useMessageScrollerVisibility()`. |
|
|
124
126
|
|
|
125
127
|
### Which component for X
|
|
126
128
|
|