@vegastack/design 0.8.14 → 0.8.16
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/dist/index.d.cts
CHANGED
|
@@ -108,8 +108,8 @@ declare const proseClassName: string;
|
|
|
108
108
|
* `cn` (tailwind-merge resolves each `[&_h1]:text-lg` against its `[&_h1]:text-2xl/8`), or use
|
|
109
109
|
* `proseDocumentClassName`, which is that composition done once.
|
|
110
110
|
*
|
|
111
|
-
* The
|
|
112
|
-
*
|
|
111
|
+
* The column's width is the layout's, not the recipe's: `DocumentLayout` sizes its fluid text
|
|
112
|
+
* column by tier, in the same font size this recipe sets.
|
|
113
113
|
*
|
|
114
114
|
* @example
|
|
115
115
|
* <div className={cn(proseClassName, proseDocument.root, proseDocument.h1)} />
|
package/dist/index.d.ts
CHANGED
|
@@ -108,8 +108,8 @@ declare const proseClassName: string;
|
|
|
108
108
|
* `cn` (tailwind-merge resolves each `[&_h1]:text-lg` against its `[&_h1]:text-2xl/8`), or use
|
|
109
109
|
* `proseDocumentClassName`, which is that composition done once.
|
|
110
110
|
*
|
|
111
|
-
* The
|
|
112
|
-
*
|
|
111
|
+
* The column's width is the layout's, not the recipe's: `DocumentLayout` sizes its fluid text
|
|
112
|
+
* column by tier, in the same font size this recipe sets.
|
|
113
113
|
*
|
|
114
114
|
* @example
|
|
115
115
|
* <div className={cn(proseClassName, proseDocument.root, proseDocument.h1)} />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vegastack/design",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.16",
|
|
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": {
|
|
@@ -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
|
+
**164 components**, plus 467 animated-icon items, 15 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-optimistic-action`, `use-overflow`, `use-platform`, `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 20 data libs (`code-highlight`, `date-time`, `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`, `icon-data`, `icon-components`, `picker-search`, `picker-preferences`) — 749 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
|
|
@@ -55,11 +55,13 @@ starts with `icon-` is a component and never an icon.
|
|
|
55
55
|
## Display
|
|
56
56
|
|
|
57
57
|
- **`activity-feed`** — A record's history, Linear style: comment threads and activity events ("Priya changed status from Open to Done · 2h") in one list, with an All / Comments / Activity filter, an order toggle, collapsible event groups, a New divider, a floating Jump to latest, J/K/X keyboard navigation and a skeleton.
|
|
58
|
+
- **`block-view`** — The frame TextEdit and MarkdownView draw a fenced block in when a blockViews entry renders its language: label, Preview / Code, split on a wide editable block, Expand with pan and pinch, and a ⋯ menu.
|
|
58
59
|
- **`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.
|
|
59
60
|
- **`code-block`** — A code panel with a language header and copy affordance — the shared code surface for chat transcripts, docs, and examples.
|
|
60
61
|
- **`comment-margin`** — Comment cards laid beside the text they are about — level with their highlight, stacked without overlap, the active card aligned with its text — and a CommentPopover anchored to a highlight for narrow screens.
|
|
61
62
|
- **`comments`** — A record's comments, Linear style: thread cards (first comment, Show N more replies, indented replies over hairlines, a flat reply row with the viewer's avatar), a bordered composer with a toolbar row and file drop, day labels, a list with a count, order toggle, Load earlier, skeleton and empty states, edit/delete/copy link/copy text, emoji reactions and an attachments slot.
|
|
62
63
|
- **`diff-view`** — What changed between two texts — changed lines, then the words inside them, removed struck through and added tinted — with the sanctioned diff engine in its own lazily loaded chunk; line-only above 200 KB.
|
|
64
|
+
- **`mermaid-block`** — A mermaid diagram drawn in the browser with the engine loaded lazily and its configuration pinned (strict security, SVG labels, dagre), in token colours for light and dark, keeping the last diagram that worked on an error — plus renderMermaid, useMermaidSvg and the ready blockViews entry for TextEdit and MarkdownView.
|
|
63
65
|
- **`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.
|
|
64
66
|
- **`reactions`** — Slack-style emoji reactions: pills with counts that toggle, a hover card naming who reacted, and an add-reaction button with quick reactions.
|
|
65
67
|
- **`stat`** — A labelled value block — muted label over a value, honest faint empty state, optional delta line. Two scales.
|
|
@@ -79,7 +81,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
79
81
|
- **`collapsible`** — An interactive component which expands and collapses a panel, with an animated height and a trigger you supply.
|
|
80
82
|
- **`empty`** — A zero-data placeholder — always an icon (the icon prop, Inbox by default), title, description and a content slot, with a compact sm size for inline empties. The one empty-state markup: DataList's emptyState and noResults (SearchX, "No matches", Clear filters) are built on it.
|
|
81
83
|
- **`icon-glyph`** — A generic identity glyph with no entity, access or avatar semantics.
|
|
82
|
-
- **`inline-chip`** — The one inline reference in running text — a person, page, file, task, meeting, customer or
|
|
84
|
+
- **`inline-chip`** — The one inline reference in running text — a person, page, file, task, meeting, customer, project or product — on the text's baseline at its size, tinted by kind; a person previews avatar, name and email on hover, the rest open on click with ⌘-click for a new tab.
|
|
83
85
|
- **`item`** — A composable row for list and feed content — media, title, description, actions — with a highlighted flash for a just-changed row.
|
|
84
86
|
- **`kbd`** — A keyboard-key chip, and a group that lays several of them out inline.
|
|
85
87
|
- **`markdown-view`** — Render a markdown string to safe, token-styled HTML — headings (with optional ids and copy links), lists, code, blockquotes, links, GFM tables that fade at a scrolling edge, mention and file chips, callouts and toggles — XSS-safe; at the document type scale, a page's read view with comment highlights, an outline, per-reader toggles and find.
|
|
@@ -165,7 +167,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
165
167
|
- **`aspect-ratio`** — Constrains its children to a given width-to-height ratio.
|
|
166
168
|
- **`board`** — Kanban lanes — full-height lanes that scroll their cards inside, sticky headers with a collapse button left of the ⋯ menu, a subtle top-down fade on each lane, + Add after the last card (the empty lane's action when it has none), Nothing here / Drop here empty zones, per-lane skeletons and load-on-scroll paging; live pointer and touch drag (lift, make room, settle, edge auto-scroll), a keyboard pick-up/move/drop model, a per-card ⋯ menu of the card's own actions, optimistic moves with rollback and a toast, and one lane at a time on a phone.
|
|
167
169
|
- **`direction`** — Base UI's DirectionProvider and useDirection — the text-direction context components read.
|
|
168
|
-
- **`document-layout`** — A page read as a document — the title area,
|
|
170
|
+
- **`document-layout`** — A page read as a document — the title area, a fluid text column, what follows it, a contents rail before it and a comment margin after it — on one grid with five tiers by its own width, plus its skeleton and a tier hook.
|
|
169
171
|
- **`record-layout`** — A record page's main column beside a sticky right rail of cards, with an ⓘ Details sheet in its place on small screens.
|
|
170
172
|
- **`resizable`** — Accessible resizable panel groups and layouts with keyboard support — horizontal or vertical, nestable, with an optional visible grip.
|
|
171
173
|
- **`scroll-area`** — Augments native scroll functionality for custom, cross-browser styling — a viewport, an auto-hiding scrollbar, and a corner.
|