@vegastack/design 0.7.18 → 0.7.20
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.20",
|
|
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,10 +85,10 @@ link` (upstream's set, verbatim). `destructive` is a soft tint, not a solid red
|
|
|
85
85
|
filters" wired to the FilterBar's `onClear`) — never hand-roll empty markup.
|
|
86
86
|
- **List toolbars are one recipe** — `FilterBar`: search (~320px) left; right, the Filters (n)
|
|
87
87
|
toggle, then views as `Tabs` (default variant, `TabsList size="sm"`, optional leading icons), then
|
|
88
|
-
the layout switch
|
|
88
|
+
the layout switch (`ViewToggle`), furthest right. Filters are `FilterBarFacet` /
|
|
89
89
|
`DateRangeFilter` chips (compact, rounded-md, tinted when set) on the toggled row; people facets
|
|
90
|
-
take `itemToSecondaryLabel={(p) => p.email}`. Use Tabs for scope/views,
|
|
91
|
-
List
|
|
90
|
+
take `itemToSecondaryLabel={(p) => p.email}`. Use Tabs for scope/views, `ViewToggle` for
|
|
91
|
+
Grid | List | Board. Tables are `DataList` with `sortable` columns (`compare`, `sortFirst`,
|
|
92
92
|
`sortMode="client"`) and `rowActions` (the ⋯ column, always last); row links are never underlined.
|
|
93
93
|
- **`alert`** for an in-content notice — `variant` is `default · destructive · success · warning ·
|
|
94
94
|
info`, each an ink on the `card` surface with a required icon; **`announcement-banner`** only for
|
|
@@ -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,23 @@ 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.
|
|
172
|
+
- **A list page with a grid, list or board view** → one `DataList` with `view` + `onViewChange`
|
|
173
|
+
(it mounts `ViewToggle` in the `FilterBar` `view` slot and remembers the view for the session) and
|
|
174
|
+
`views` for the ones the page allows. The grid renders a `MediaCard` per row (whole card is the
|
|
175
|
+
link, ⋯ on hover/focus/touch) with `sections` as headings; `view="board"` makes `sections` Board
|
|
176
|
+
lanes with `onMove` and a per-section `loading` / `loadMore` / `emptyState`. Record images are a
|
|
177
|
+
column `thumbnail` + `thumbnailFallback` (the app mark) — never a hand-rolled card grid, card or
|
|
178
|
+
`<img>`. A count needing attention is `<Badge variant="warning"><TriangleAlert />n</Badge>`, and
|
|
179
|
+
groups in a ⋯ menu are split by `{ type: "separator" }` entries.
|
|
164
180
|
- **A list that pages by cursor** → `DataList` `loadMore` (or `LoadMore` under your own list), with
|
|
165
181
|
`useAsyncSearch` when the search runs on the server.
|
|
166
182
|
|
|
@@ -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
|
+
**121 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`) — 682 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
|
|
|
@@ -83,8 +85,11 @@ starts with `icon-` is a component and never an icon.
|
|
|
83
85
|
- **`filter-bar`** — The two-row toolbar above a list or table — search (~320px) left; a Filters (n) toggle, scope Tabs and the view switch right; compact rounded-md filter chips (FilterBarFacet, DateRangeFilter with presets) on a toggled row 12px below that scrolls sideways on a phone.
|
|
84
86
|
- **`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
87
|
- **`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.
|
|
88
|
+
- **`media-card`** — A record as a card — an image, the title, a meta line, a badge and a ⋯ menu — where the whole card is one link.
|
|
86
89
|
- **`property-list`** — Record-facts rows: an icon+label column beside a value column, as an accessible definition list.
|
|
87
90
|
- **`sortable-list`** — Reorderable rows or tiles on ItemGroup/Item via use-drag-reorder — pointer drag with drop indicators, keyboard move mode, a lossless row menu, locked rows, inline actions, a grid layout, and server-refusable moves. Controlled; the host owns the order.
|
|
91
|
+
- **`thumbnail`** — A small rounded, cover-fit image, 32 or 48px, with a fallback for records that have no image.
|
|
92
|
+
- **`view-toggle`** — The Grid | List | Board icon switch for a list page, labels hidden on a phone.
|
|
88
93
|
|
|
89
94
|
## Overlay
|
|
90
95
|
|
|
@@ -121,6 +126,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
121
126
|
- **`provider`** — The single app-root wrapper — theme (next-themes), Base UI toasts, tooltip delays, and text direction in one mount-once component.
|
|
122
127
|
- **`skeleton`** — A pulsing placeholder that reserves layout space while content loads.
|
|
123
128
|
- **`spinner`** — An indeterminate loading indicator that inherits its host's ink.
|
|
129
|
+
- **`status-line`** — A slim inline status: info, progress (spinner) or error (destructive ink, role=alert), with an optional inline action.
|
|
124
130
|
- **`toast`** — Brief, non-blocking notifications — a stacking Base UI Toast surface with typed icons, actions and promise toasts.
|
|
125
131
|
|
|
126
132
|
## Layout
|
|
@@ -136,7 +142,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
136
142
|
|
|
137
143
|
## Media
|
|
138
144
|
|
|
139
|
-
- **`audio-player`** — A custom audio transport with play/pause, skip, seek, a tappable speed control, and keyboard shortcuts
|
|
145
|
+
- **`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
146
|
- **`image`** — A presentational framed image with aspect-ratio, rounding, a loading skeleton, and an error fallback.
|
|
141
147
|
- **`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
148
|
- **`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 +165,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
159
165
|
- **`message`** — Layout primitives for a conversation row - avatar anchoring, content column, header/footer slots, start/end alignment. Server-safe.
|
|
160
166
|
- **`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
167
|
- **`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 -
|
|
168
|
+
- **`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
169
|
|
|
164
170
|
## Marketing
|
|
165
171
|
|