@vegastack/design 0.7.18 → 0.7.19
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.19",
|
|
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": {
|
|
@@ -112,32 +112,32 @@ info`, each an ink on the `card` surface with a required icon; **`announcement-b
|
|
|
112
112
|
|
|
113
113
|
A component's name undersells it. Before composing something by hand, check this list:
|
|
114
114
|
|
|
115
|
-
| Component | What it already does
|
|
116
|
-
| ------------------------------------------------------ |
|
|
117
|
-
| `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.
|
|
118
|
-
| `Combobox` | `multiple` with `ComboboxChips`; `filter={null}` hands filtering to your server.
|
|
119
|
-
| `SearchableSelect` | The Select-shaped search picker, with `clearable`. `multiple` for several values; `remote` plus `useAsyncSearch` hands search and paging to your server.
|
|
120
|
-
| `Item` | A link tile with `render={<a />}`; `ItemGroup` gives a set of items list semantics.
|
|
121
|
-
| `DialogContent` · `SheetContent` | `size`: `sm · default · lg · xl` (a side sheet). Never a width class.
|
|
122
|
-
| `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.
|
|
123
|
-
| `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.
|
|
124
|
-
| `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.
|
|
125
|
-
| `SortableList` | `layout="grid"` reorders tiles as well as rows.
|
|
126
|
-
| `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.
|
|
127
|
-
| `Stat` | `StatDelta` for change, `StatEmpty` for nothing to report.
|
|
128
|
-
| `PropertyList` · `DataList` · `SettingsRow` | A record's facts · many records · one setting with its control.
|
|
129
|
-
| `ActionBar` | The docked bar for bulk selection ("5 selected"), unsaved changes and batch progress.
|
|
130
|
-
| `TruncatedText` · `IconText` · `TableCellText` | Overflow detection, hover and keyboard reveal, and tap-to-toggle on touch.
|
|
131
|
-
| `RelativeTime` | `mode="ago"` ("3 minutes ago") or `mode="day"` ("Yesterday").
|
|
132
|
-
| `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.
|
|
133
|
-
| `AttachmentGroup` · `Dropzone` · `useFileDrop` | A file list with per-file state · a drop target · the drop and paste engine.
|
|
134
|
-
| `PageHeader` | Title, description, `breadcrumb`, a back link (`backHref`) and `actions`.
|
|
135
|
-
| `MultiStepForm` · `Stepper` · `Questionnaire` · `Tabs` | A form in steps · progress display (`navigable` on request) · one question at a time · peer regions.
|
|
136
|
-
| `NativeSelect` | The platform `<select>`, so a touch device opens its own picker.
|
|
137
|
-
| `Board` | A column's `lockedReason` explains why it cannot take a card; `itemLinkRender` is a template, the card's `href` wins.
|
|
138
|
-
| `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.
|
|
139
|
-
| `Tabs` | `TabsList variant="line"` and `Tabs orientation="vertical"`; route tabs draw a `nav` from `tabsListVariants` and `tabsTriggerVariants`, which need no `data-orientation`.
|
|
140
|
-
| `MessageScroller` | `defaultScrollPosition` (`start` · `end` · `last-anchor`), `scrollToMessage` from `useMessageScroller()`, and `useMessageScrollerVisibility()`.
|
|
115
|
+
| Component | What it already does |
|
|
116
|
+
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
117
|
+
| `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. |
|
|
118
|
+
| `Combobox` | `multiple` with `ComboboxChips`; `filter={null}` hands filtering to your server. |
|
|
119
|
+
| `SearchableSelect` | The Select-shaped search picker, with `clearable`. `multiple` for several values; `remote` plus `useAsyncSearch` hands search and paging to your server. |
|
|
120
|
+
| `Item` | A link tile with `render={<a />}`; `ItemGroup` gives a set of items list semantics. |
|
|
121
|
+
| `DialogContent` · `SheetContent` | `size`: `sm · default · lg · xl` (a side sheet). Never a width class. |
|
|
122
|
+
| `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. |
|
|
123
|
+
| `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. |
|
|
124
|
+
| `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. |
|
|
125
|
+
| `SortableList` | `layout="grid"` reorders tiles as well as rows. |
|
|
126
|
+
| `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. |
|
|
127
|
+
| `Stat` | `StatDelta` for change, `StatEmpty` for nothing to report. |
|
|
128
|
+
| `PropertyList` · `DataList` · `SettingsRow` | A record's facts · many records · one setting with its control. |
|
|
129
|
+
| `ActionBar` | The docked bar for bulk selection ("5 selected"), unsaved changes and batch progress. |
|
|
130
|
+
| `TruncatedText` · `IconText` · `TableCellText` | Overflow detection, hover and keyboard reveal, and tap-to-toggle on touch. |
|
|
131
|
+
| `RelativeTime` | `mode="ago"` ("3 minutes ago") or `mode="day"` ("Yesterday"). |
|
|
132
|
+
| `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. |
|
|
133
|
+
| `AttachmentGroup` · `Dropzone` · `useFileDrop` | A file list with per-file state · a drop target · the drop and paste engine. |
|
|
134
|
+
| `PageHeader` | Title, description, `breadcrumb`, a back link (`backHref`) and `actions`. |
|
|
135
|
+
| `MultiStepForm` · `Stepper` · `Questionnaire` · `Tabs` | A form in steps · progress display (`navigable` on request) · one question at a time · peer regions. |
|
|
136
|
+
| `NativeSelect` | The platform `<select>`, so a touch device opens its own picker. |
|
|
137
|
+
| `Board` | A column's `lockedReason` explains why it cannot take a card; `itemLinkRender` is a template, the card's `href` wins. |
|
|
138
|
+
| `AudioPlayer` | `mediaRef` to drive playback, a transcript button and a waveform; `docked` pins it to the bottom of a scroll column, `variant="floating"` is the centred pill, `onOpenChange` adds its close button, `actionsRef` seeks it, and `onSourceExpired` renews an expired signed URL once. `AudioPlayerProvider` + `GlobalAudioPlayer` + `useGlobalPlayer()` keep one recording playing across routes. |
|
|
139
|
+
| `Tabs` | `TabsList variant="line"` and `Tabs orientation="vertical"`; route tabs draw a `nav` from `tabsListVariants` and `tabsTriggerVariants`, which need no `data-orientation`. `useTabsSwipe` adds a touch swipe between controlled tabs. |
|
|
140
|
+
| `MessageScroller` | `defaultScrollPosition` (`start` · `end` · `last-anchor`), `scrollToMessage` from `useMessageScroller()`, and `useMessageScrollerVisibility()`. |
|
|
141
141
|
|
|
142
142
|
### Which component for X
|
|
143
143
|
|
|
@@ -160,7 +160,15 @@ A component's name undersells it. Before composing something by hand, check this
|
|
|
160
160
|
edge: give it `data-slot="sheet-cancel"` and `SheetFooter` pushes it left with `me-auto`.
|
|
161
161
|
- **Feedback after an action** → `toast.add({ title })`.
|
|
162
162
|
- **A recording's text beside its player** → `Transcript` (follows `currentTime`, seeks through
|
|
163
|
-
`onSeek`, searches
|
|
163
|
+
`onSeek`, searches; `TranscriptSpeakers` + `onSpeakerRename` for speaker chips) with a `docked`
|
|
164
|
+
`AudioPlayer` at the bottom of the column — or, when playback must survive navigation, one
|
|
165
|
+
`AudioPlayerProvider` in the app shell, `GlobalAudioPlayer` at the end of the main column and
|
|
166
|
+
`useGlobalPlayer().open(track, { at })` / `useGlobalPlayerTime()` on the page.
|
|
167
|
+
- **A record page's header** → an inline-editable title, a `MetaLine` of icon + text facts,
|
|
168
|
+
`RecordChip`s for the records it links to (a picker trigger with a ↗ link), and one `StatusLine`
|
|
169
|
+
for its processing state (progress, or an error with its reason and Retry inline). The body is
|
|
170
|
+
default `Tabs` stretched full width (`TabsList className="w-full"`) with `useTabsSwipe` on the
|
|
171
|
+
panels, and no cards around the panels.
|
|
164
172
|
- **A list that pages by cursor** → `DataList` `loadMore` (or `LoadMore` under your own list), with
|
|
165
173
|
`useAsyncSearch` when the search runs on the server.
|
|
166
174
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<!-- GENERATED — do not hand-edit. Regenerated from the design system's component contract,
|
|
4
4
|
which is the authority for membership and counts. -->
|
|
5
5
|
|
|
6
|
-
**
|
|
6
|
+
**118 components**, plus 467 animated-icon items, 13 hooks (`use-animation-replay`, `use-announcer`, `use-async-search`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`, `use-tabs-swipe`), 10 starter blocks (`app-shell-01`, `board-01`, `command-search-01`, `list-page-01`, `login-01`, `notifications-01`, `review-split-01`, `settings-01`, `settings-02`, `status-pages-01`), 68 chart blocks across 7 families, and 3 data libs (`date-time`, `geo-data`, `drag-item`) — 679 registry items in total.
|
|
7
7
|
|
|
8
8
|
Install any of them with `shadcn add @vegastack/<name>`. Animated icons install as
|
|
9
9
|
`@vegastack/icon-<name>`; the bare name is reserved for components, so a component whose name
|
|
@@ -39,6 +39,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
39
39
|
- **`number-field`** — Locale-aware numeric input on Base UI's NumberField in upstream's InputGroup chrome, with full-height flanking steppers.
|
|
40
40
|
- **`password-input`** — A password field with a show/hide toggle, composed from InputGroup, forwarding native input props and the ref to the inner input.
|
|
41
41
|
- **`radio-group`** — Mutually-exclusive options with arrow-key navigation and a 24px invisible hit area (A11Y-2).
|
|
42
|
+
- **`record-chip`** — A pill that shows the record something belongs to and picks another: icon, name and a chevron as a picker trigger, plus an arrow link to the record.
|
|
42
43
|
- **`region-select`** — A searchable picker of states/provinces for a country, with a free-text fallback for countries with no subdivisions. A thin wrapper over SearchableSelect fed by the geo-data item.
|
|
43
44
|
- **`search-input`** — A token-safe search field with a consistent clear action and controlled or uncontrolled native input semantics.
|
|
44
45
|
- **`searchable-select`** — The Select-shaped Combobox preset: a full-width trigger, an in-panel search field, a tick on the selected row (matched by key, so async options tick too), a standard person option (name plus muted email, both searched) and an optional clear control. Single or multiple, controlled through value/onValueChange.
|
|
@@ -51,6 +52,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
51
52
|
|
|
52
53
|
- **`chip`** — The one labelled pill primitive — 10 decorative hues, two tiers, an optional selection rung, and a real 24x24 remove control. Behind Tag and FilterChip; ComboboxChip is Base UI's own chip, not this primitive.
|
|
53
54
|
- **`code-block`** — A code panel with a language header and copy affordance — the shared code surface for chat transcripts, docs, and examples.
|
|
55
|
+
- **`meta-line`** — An icon + text meta line under a record title: wrapping facts such as type, date and time, duration and owner, in the muted ink.
|
|
54
56
|
- **`stat`** — A labelled value block — muted label over a value, honest faint empty state, optional delta line. Two scales.
|
|
55
57
|
- **`tag-group`** — Hue-tinted label chips on the 10-hue tag palette, with +N overflow collapsing and removable tags.
|
|
56
58
|
|
|
@@ -121,6 +123,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
121
123
|
- **`provider`** — The single app-root wrapper — theme (next-themes), Base UI toasts, tooltip delays, and text direction in one mount-once component.
|
|
122
124
|
- **`skeleton`** — A pulsing placeholder that reserves layout space while content loads.
|
|
123
125
|
- **`spinner`** — An indeterminate loading indicator that inherits its host's ink.
|
|
126
|
+
- **`status-line`** — A slim inline status: info, progress (spinner) or error (destructive ink, role=alert), with an optional inline action.
|
|
124
127
|
- **`toast`** — Brief, non-blocking notifications — a stacking Base UI Toast surface with typed icons, actions and promise toasts.
|
|
125
128
|
|
|
126
129
|
## Layout
|
|
@@ -136,7 +139,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
136
139
|
|
|
137
140
|
## Media
|
|
138
141
|
|
|
139
|
-
- **`audio-player`** — A custom audio transport with play/pause, skip, seek, a tappable speed control, and keyboard shortcuts
|
|
142
|
+
- **`audio-player`** — A compact custom audio transport with play/pause, skip, seek, a tappable speed control, and keyboard shortcuts — a single line on a wide player, two lines with an optional transcript control on a narrow, mobile-width player; a floating pill variant and a global AudioPlayerProvider + useGlobalPlayer that keep one recording playing across routes.
|
|
140
143
|
- **`image`** — A presentational framed image with aspect-ratio, rounding, a loading skeleton, and an error fallback.
|
|
141
144
|
- **`inbox`** — The notification Inbox: frame with header actions, All | Unread chips, sticky day groups, full-bleed rows with avatar or icon and an unread tint (no dot), rich titles, action chips, a fixed right column with the time over the hover actions (read toggle and menu), and empty, loading and error states.
|
|
142
145
|
- **`media-player-controls`** — The shared media transport — play/pause, skip, seek, elapsed/duration, mute + volume, playback speed, and one keyboard shortcut map (useMediaShortcuts) — composed by Audio Player and Video Player.
|
|
@@ -159,7 +162,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
159
162
|
- **`message`** — Layout primitives for a conversation row - avatar anchoring, content column, header/footer slots, start/end alignment. Server-safe.
|
|
160
163
|
- **`message-scroller`** — An auto-scrolling conversation viewport (not virtualised) - pins to the latest message, preserves position on prepend, tracks the anchor, and a floating scroll-to-end button.
|
|
161
164
|
- **`questionnaire`** — A guided one-question-at-a-time form — choices, freeform answers, skip, shortcuts, validation, resume and conditional items, built on the @shadcn/react questionnaire state machine.
|
|
162
|
-
- **`transcript`** — A timestamped, speaker-labelled transcript on MessageScroller's primitive -
|
|
165
|
+
- **`transcript`** — A timestamped, speaker-labelled transcript on MessageScroller's primitive - turns with a coloured speaker dot, the line playing at currentTime followed with a Back to current line button, seek from each timestamp, highlighted announced search, speaker chips with rename, and progressive mounting of long transcripts.
|
|
163
166
|
|
|
164
167
|
## Marketing
|
|
165
168
|
|