@vegastack/design 0.7.10 → 0.7.12
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.12",
|
|
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": {
|
|
@@ -95,32 +95,32 @@ info`, each an ink on the `card` surface with a required icon; **`announcement-b
|
|
|
95
95
|
|
|
96
96
|
A component's name undersells it. Before composing something by hand, check this list:
|
|
97
97
|
|
|
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()`.
|
|
98
|
+
| Component | What it already does |
|
|
99
|
+
| ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
100
|
+
| `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. |
|
|
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()`. |
|
|
124
124
|
|
|
125
125
|
### Which component for X
|
|
126
126
|
|
|
@@ -135,6 +135,12 @@ A component's name undersells it. Before composing something by hand, check this
|
|
|
135
135
|
- **A metric** → `Stat`.
|
|
136
136
|
- **A confirmation that interrupts** → `AlertDialog`; a form or detail in an overlay → `Dialog` or
|
|
137
137
|
`Sheet`.
|
|
138
|
+
- **An overlay's footer** (`DialogFooter`, `AlertDialogFooter`, `SheetFooter`, `DrawerFooter`,
|
|
139
|
+
`MultiStepFormActions`) is as plain as its header: no background, no top border, no extra padding
|
|
140
|
+
or negative margins. Actions are right-aligned, primary last; every secondary action (Cancel,
|
|
141
|
+
Keep editing, Back, Save draft) is `variant="secondary"`, never `outline` — `AlertDialogCancel`
|
|
142
|
+
and `DialogFooter showCloseButton` already default to it. A Sheet's Cancel may sit at the start
|
|
143
|
+
edge: give it `data-slot="sheet-cancel"` and `SheetFooter` pushes it left with `me-auto`.
|
|
138
144
|
- **Feedback after an action** → `toast.add({ title })`.
|
|
139
145
|
- **A recording's text beside its player** → `Transcript` (follows `currentTime`, seeks through
|
|
140
146
|
`onSeek`, searches) with a `docked` `AudioPlayer` at the bottom of the column.
|
|
@@ -80,7 +80,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
80
80
|
- **`data-list`** — A generic, typed data table — configurable columns, row selection, sortable headers, plus loading and empty states.
|
|
81
81
|
- **`data-list-pager`** — A controlled paging footer for DataList — a tabular-numeral range summary, a rows-per-page Select, and a windowed Pagination that hides on a single page.
|
|
82
82
|
- **`data-table-parts`** — The chrome DataList and DataGrid share — sort header, selection cells, skeleton rows, the empty row, column class rules, and the selection/sort/controlled-state hooks.
|
|
83
|
-
- **`filter-bar`** —
|
|
83
|
+
- **`filter-bar`** — The two-row toolbar above a list or table — search, scope and view on top, filters below, folding into a sheet on a narrow screen.
|
|
84
84
|
- **`filter-bar-managed`** — The controlled nested and/or filter builder — host-injected field grammar (vocabulary + per-type value editors), depth and condition caps, focus-managed removal, and a removable FilterChip summary.
|
|
85
85
|
- **`load-more`** — The shared Load more footer for keyset lists — an outline button that keeps its width while loading, an error line with Try again, and an optional end caption.
|
|
86
86
|
- **`property-list`** — Record-facts rows: an icon+label column beside a value column, as an accessible definition list.
|
|
@@ -90,7 +90,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
90
90
|
|
|
91
91
|
- **`alert-dialog`** — A modal that interrupts for a decision — an optional media slot, two sizes and an action/cancel footer.
|
|
92
92
|
- **`context-menu`** — The same menu vocabulary opened by right-click, positioned at the pointer.
|
|
93
|
-
- **`dialog`** — A modal overlay — a backdrop, a centred popup, an optional close button and a
|
|
93
|
+
- **`dialog`** — A modal overlay — a backdrop, a centred popup, an optional close button and a plain, right-aligned footer.
|
|
94
94
|
- **`drawer`** — A swipeable panel with snap points — four directions, a swipe handle, nesting and a non-modal mode.
|
|
95
95
|
- **`dropdown-menu`** — An anchored action menu — items, submenus, checkboxes, radio groups, shortcuts and a destructive variant.
|
|
96
96
|
- **`hover-card`** — A preview surface that opens on hover or focus, with configurable delays and sides.
|