@vegastack/design 0.8.50 → 0.8.51
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.8.
|
|
3
|
+
"version": "0.8.51",
|
|
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": {
|
|
@@ -80,7 +80,7 @@ link` (upstream's set, verbatim). `destructive` is a soft tint, not a solid red
|
|
|
80
80
|
for it before composing `combobox` by hand); **`combobox`** directly only for free text,
|
|
81
81
|
suggestions or multi-select chips.
|
|
82
82
|
- **One view-switch rule.** Form choices use `radio-group`; toolbar scope switches use default
|
|
83
|
-
`Tabs`, and Grid | List | Board
|
|
83
|
+
`Tabs`, and Grid | List | Board is the `ListToolbar`'s Layout tool. `ToggleGroup` is for
|
|
84
84
|
pressed action/value choices. URL navigation uses links and the route-tabs recipe.
|
|
85
85
|
|
|
86
86
|
- **Empty is tiered** — nothing yet, no matches ("Clear filters"), couldn't load (`role="alert"`,
|
|
@@ -88,13 +88,14 @@ link` (upstream's set, verbatim). `destructive` is a soft tint, not a solid red
|
|
|
88
88
|
(<https://design.vegastack.com/docs/foundations/empty-states>); never leave a region blank.
|
|
89
89
|
`Empty` always shows an icon (`icon`, `Inbox` by default). In a `DataList`, use `emptyState` for
|
|
90
90
|
"nothing yet" and `noResults={{ onClear }}` for "no matches" (SearchX, "No matches", "Clear
|
|
91
|
-
filters" wired to the
|
|
92
|
-
- **List toolbars are one recipe** — `
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
91
|
+
filters" wired to the FilterRow's `onClear`) — never hand-roll empty markup.
|
|
92
|
+
- **List toolbars are one recipe** — `ListToolbar`: scope `Tabs` (`TabsList size="sm"
|
|
93
|
+
overflow="menu"`) left; the search, then the tools — Filter (n), Sort (`SortMenu`), Layout
|
|
94
|
+
(List | Board | Grid icons), Display (`DisplayMenu`: row height, columns, group) and ⋯ — right;
|
|
95
|
+
it measures itself and folds tools into Display and ⋯ when tight. The Filter tool opens a
|
|
96
|
+
`FilterRow`: `+ Filter` (`AddFilterMenu`), the pinned `ListFacet` / `PeopleFacet` /
|
|
97
|
+
`DateRangeFilter` chips (compact, rounded-md, dashed while unset, tinted when set), the other
|
|
98
|
+
chips, Clear; people facets take `itemToSecondaryLabel={(p) => p.email}`. Tables are `DataList` with `sortable` columns (`compare`, `sortFirst`,
|
|
98
99
|
`sortMode="client"`) and `rowActions` (the ⋯ column, always last); row links are never underlined.
|
|
99
100
|
- **`alert`** for an in-content notice — `variant` is `default · destructive · success · warning ·
|
|
100
101
|
info`, each an ink on the `card` surface with a required icon; **`announcement-banner`** only for
|
|
@@ -129,7 +130,7 @@ A component's name undersells it. Before composing something by hand, check this
|
|
|
129
130
|
| `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. |
|
|
130
131
|
| `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. |
|
|
131
132
|
| `SortableList` | `layout="grid"` reorders tiles as well as rows. |
|
|
132
|
-
| `
|
|
133
|
+
| `FilterRow` / `FilterBuilder` | `FilterRow` is the chip row a `ListToolbar`'s Filter tool opens, and `ListFacet` 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. |
|
|
133
134
|
| `Stat` | `StatDelta` for change, `StatEmpty` for nothing to report. |
|
|
134
135
|
| `PropertyList` · `DataList` · `SettingsRow` | A record's facts · many records · one setting with its control. |
|
|
135
136
|
| `ActionBar` | The docked bar for bulk selection ("5 selected"), unsaved changes and batch progress. |
|
|
@@ -150,7 +151,7 @@ A component's name undersells it. Before composing something by hand, check this
|
|
|
150
151
|
- **A page** → `AppShell` › `AppShellContent` › `AppShellPage` (`size`: `prose` for forms and
|
|
151
152
|
settings, `default` for lists and record pages, `full` for boards and canvases — picked per route
|
|
152
153
|
from one `definePageWidths` map, never a `max-w-*` or padding class; see
|
|
153
|
-
<https://design.vegastack.com/docs/foundations/page-layout>) › `PageHeader` › `
|
|
154
|
+
<https://design.vegastack.com/docs/foundations/page-layout>) › `PageHeader` › `ListToolbar` (with its `FilterRow`) › `DataList` (or
|
|
154
155
|
`DataGrid`) › the `Empty` tier that fits. The spacing between them is the page-rhythm recipe
|
|
155
156
|
(<https://design.vegastack.com/docs/foundations/spacing#page-rhythm>).
|
|
156
157
|
- **Inline editing** → `EditableCell` with `onSave` returning a promise: `variant="cell"` inside a
|
|
@@ -182,7 +183,7 @@ A component's name undersells it. Before composing something by hand, check this
|
|
|
182
183
|
default `Tabs` stretched full width (`TabsList className="w-full"`) with `useTabsSwipe` on the
|
|
183
184
|
panels, and no cards around the panels.
|
|
184
185
|
- **A list page with a grid, list or board view** → one `DataList` with `view` + `onViewChange`
|
|
185
|
-
(it
|
|
186
|
+
(it fills a `ListToolbar` toolbar's Layout tool and remembers the view for the session) and
|
|
186
187
|
`views` for the ones the page allows. The grid renders a `MediaCard` per row (whole card is the
|
|
187
188
|
link, ⋯ on hover/focus/touch) with `sections` as headings; `view="board"` makes `sections` Board
|
|
188
189
|
lanes with `onMove` and a per-section `loading` / `loadMore` / `emptyState`. Record images are a
|
|
@@ -215,10 +216,10 @@ closest one rather than composing the page from nothing:
|
|
|
215
216
|
|
|
216
217
|
- **`app-shell-01`** — the shell: landmarks, skip link, a rail with search, inbox count and a user
|
|
217
218
|
menu.
|
|
218
|
-
- **`list-page-01`** — one kind of record: a `DataList` with a `
|
|
219
|
-
|
|
219
|
+
- **`list-page-01`** — one kind of record: a `DataList` with a `ListToolbar` (search, a `FilterRow`
|
|
220
|
+
of facets, the Grid | List Layout tool), Mine | Team scope tabs, grouped by industry, Load more and three
|
|
220
221
|
empty tiers.
|
|
221
|
-
- **`board-01`** — a `DataList` board of `BoardCard`s under a `
|
|
222
|
+
- **`board-01`** — a `DataList` board of `BoardCard`s under a `ListToolbar`: a backlog that pages as it
|
|
222
223
|
scrolls, "+ Add task" per lane, a locked lane and a submenu in each card's ⋯.
|
|
223
224
|
- **`settings-01`** — one settings page: grouped `SettingsRow` sections and a save bar.
|
|
224
225
|
- **`settings-02`** — the settings hub: grids of linked tiles, grouped by area.
|
|
@@ -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
|
+
**192 components**, plus 467 animated-icon items, 18 hooks (`use-animation-replay`, `use-announcer`, `use-async-search`, `use-drag-reorder`, `use-file-drop`, `use-grid-selection`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-optimistic-action`, `use-overflow-fold`, `use-overflow`, `use-platform`, `use-record-peek-row`, `use-tabs-swipe`, `use-view-transition`), 15 starter blocks (`app-shell-01`, `board-01`, `issue-detail-01`, `page-editor-01`, `command-search-01`, `list-page-01`, `library-01`, `login-01`, `notifications-01`, `review-split-01`, `settings-01`, `settings-02`, `status-pages-01`, `email-kit`, `share-01`), 68 chart blocks across 7 families, and 22 data libs (`code-highlight`, `date-time`, `grid-clipboard`, `geo-data`, `emoji-data`, `drag-item`, `text-anchor`, `text-anchor-doc`, `text-edit-grammar`, `embed-providers`, `text-edit-schema`, `text-edit-markdown`, `file-kind`, `upload-progress`, `media-probe`, `page-layout`, `tile-overlay`, `disclosure-trigger`, `icon-data`, `icon-components`, `picker-search`, `picker-preferences`) — 782 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
|
|
@@ -111,9 +111,8 @@ starts with `icon-` is a component and never an icon.
|
|
|
111
111
|
- **`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.
|
|
112
112
|
- **`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.
|
|
113
113
|
- **`display-menu`** — The toolbar's Display tool: Layout and Sort once folded in, row height, group by, a Columns drill-in, the Show switches (archived, closed, subtasks) and Reset — one surface, no fills.
|
|
114
|
-
- **`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.
|
|
115
114
|
- **`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.
|
|
116
|
-
- **`filter-row`** — The chips under a ListToolbar: + Filter, pinned facets (dashed while unset), the other chips, Clear — and after an AI filter run, one line with what it added, Undo and what it could not match.
|
|
115
|
+
- **`filter-row`** — The chips under a ListToolbar: + Filter, pinned facets (ListFacet, PeopleFacet, DateRangeFilter — dashed while unset), the other chips, Clear — and after an AI filter run, one line with what it added, Undo and what it could not match.
|
|
117
116
|
- **`list-toolbar`** — The one header row of every list and table: tabs left; search, the icon tools (Filter · Sort · Layout · Display · ⋯) and the main button right; the filter row under it. Measures its own width and collapses in a fixed order.
|
|
118
117
|
- **`load-more`** — The shared infinite-loading tail for keyset lists — a sentinel that fetches the next cursor page as the list nears its scroll edge, skeleton rows while it loads, an error line with Try again, and an optional end caption.
|
|
119
118
|
- **`media-card`** — A record as a card — an image, the title with its badge beside it, a meta line and a ⋯ menu — where the whole card is one link.
|
|
@@ -127,7 +126,6 @@ starts with `icon-` is a component and never an icon.
|
|
|
127
126
|
- **`sortable-list`** — Reorderable rows or tiles on ItemGroup/Item via use-drag-reorder — pointer drag with drop indicators, touch long-press, keyboard move mode, a remove button or a row menu, locked rows, a grid layout with bare tiles for attachments, and server-refusable moves. Controlled; the host owns the order.
|
|
128
127
|
- **`thumbnail`** — A small rounded, cover-fit image, 32 or 48px, with a fallback for records that have no image.
|
|
129
128
|
- **`view-tabs`** — A table's saved views as a tab row: shared views, a divider, then the reader's own; a lock on locked views; a + menu for a grid or board view, shared or personal; the open view's actions; one Select below a narrow container.
|
|
130
|
-
- **`view-toggle`** — The Grid | List | Board icon switch for a list page, labels hidden on a phone.
|
|
131
129
|
|
|
132
130
|
## Overlay
|
|
133
131
|
|
|
@@ -170,7 +168,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
170
168
|
- **`sidebar-menu-flyout`** — A sidebar row whose entries open in a menu beside it on hover or press — nested lists such as Spaces in the collapsed icon rail, with the row's count kept in sight.
|
|
171
169
|
- **`stepper`** — A bounded linear process as an ordered list — seven step states on a numbered rail that fills in behind you, aria-current=step, orientation chosen from the step count, and a compact summary below a container width.
|
|
172
170
|
- **`table-of-contents`** — The “On this page” outline of a long document — links to its headings with the one the reader has reached marked by a scroll spy; an always-labelled list, a rail of ticks that opens on hover or focus, or a left Sheet from a trigger on narrow screens. Exports useActiveHeading for custom outlines.
|
|
173
|
-
- **`tabs`** — Layered content sections — default (segmented) or line variants, compact size, optional leading icons and counts, horizontal or vertical, full keyboard navigation. Toolbar switches use default Tabs
|
|
171
|
+
- **`tabs`** — Layered content sections — default (segmented) or line variants, compact size, optional leading icons and counts, horizontal or vertical, full keyboard navigation. Toolbar switches use default Tabs for scope (My tasks | Team tasks); a list's List/Board/Grid switch is ListToolbar's Layout tool. The one component that keeps a focus ring.
|
|
174
172
|
|
|
175
173
|
## Feedback
|
|
176
174
|
|