@vegastack/design 0.7.39 → 0.7.41
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/{chunk-32APSUN7.js → chunk-ZSXJC3TJ.js} +37 -31
- package/dist/create-animated-icon.js +1 -1
- package/dist/icons/index.js +1 -1
- package/dist/index.cjs +37 -31
- package/dist/index.d.cts +20 -20
- package/dist/index.d.ts +20 -20
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/skills/vegastack-design-system/references/components.md +3 -3
|
@@ -19,51 +19,57 @@ var prose = {
|
|
|
19
19
|
* rather than something prose falls into by accident. A consumer who genuinely wants mono prose
|
|
20
20
|
* still says so on the root, where it reads as a decision.
|
|
21
21
|
*/
|
|
22
|
-
root: "font-sans text-sm text-foreground",
|
|
23
|
-
// Headings
|
|
24
|
-
// `
|
|
25
|
-
//
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
h5: "[&_h5]:mt-
|
|
32
|
-
h6: "[&_h6]:mt-
|
|
33
|
-
|
|
34
|
-
//
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
22
|
+
root: "font-sans text-sm font-normal text-foreground",
|
|
23
|
+
// Headings follow the app's type scale (design.md §Headings), not a document scale: the page
|
|
24
|
+
// title is the only `text-2xl`, so a heading inside rendered text stops at `text-lg` for `#`,
|
|
25
|
+
// the section size (`text-base`) for `##`, and body size for everything below — weight carries
|
|
26
|
+
// the rest. Every heading wears `font-heading` like the app's own titles.
|
|
27
|
+
h1: "[&_h1]:mt-5 [&_h1]:mb-2 [&_h1]:scroll-m-20 [&_h1]:font-heading [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-foreground [&_h1]:first:mt-0",
|
|
28
|
+
h2: "[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:scroll-m-20 [&_h2]:font-heading [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:first:mt-0",
|
|
29
|
+
h3: "[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:scroll-m-20 [&_h3]:font-heading [&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:first:mt-0",
|
|
30
|
+
h4: "[&_h4]:mt-3 [&_h4]:mb-1.5 [&_h4]:font-heading [&_h4]:text-sm [&_h4]:font-medium [&_h4]:text-foreground [&_h4]:first:mt-0",
|
|
31
|
+
h5: "[&_h5]:mt-3 [&_h5]:mb-1.5 [&_h5]:font-heading [&_h5]:text-sm [&_h5]:font-medium [&_h5]:text-foreground [&_h5]:first:mt-0",
|
|
32
|
+
h6: "[&_h6]:mt-3 [&_h6]:mb-1.5 [&_h6]:font-heading [&_h6]:text-sm [&_h6]:font-medium [&_h6]:text-foreground [&_h6]:first:mt-0",
|
|
33
|
+
// Body text is the app's body text — size, leading and ink inherit from the root, so a paragraph
|
|
34
|
+
// here is indistinguishable from any other `text-sm` paragraph in the product. No prose look.
|
|
35
|
+
p: "[&_p]:my-2 [&_p]:first:mt-0 [&_p]:last:mb-0",
|
|
36
|
+
// Marks. Links are `info` ink per design.md §Colours at body weight; `s` is Tiptap's strike
|
|
37
|
+
// element and `del` is GFM's — the same mark from two producers.
|
|
38
|
+
a: "[&_a]:text-info-text [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-info-text/88",
|
|
39
|
+
strong: "[&_strong]:font-semibold",
|
|
38
40
|
em: "[&_em]:italic",
|
|
39
|
-
del: "[&_del]:
|
|
40
|
-
// Lists.
|
|
41
|
-
//
|
|
42
|
-
//
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
del: "[&_del]:line-through [&_s]:line-through",
|
|
42
|
+
// Lists. Items and markers are body text: family, size and ink inherit (a `::marker` takes the
|
|
43
|
+
// item's font), so `1.` and `•` never read as a second typeface or a second colour. One thing
|
|
44
|
+
// does NOT inherit: the user-agent stylesheet gives `::marker` `font-variant-numeric:
|
|
45
|
+
// tabular-nums`, and Geist's tabular figures are fixed-width — that is what made ordered-list
|
|
46
|
+
// numbers look monospaced. `marker:normal-nums` restores the body's proportional figures. A GFM task
|
|
47
|
+
// list carries `contains-task-list` and its checkbox IS the marker, so the disc goes — expressed
|
|
48
|
+
// as a second, more specific descendant rule rather than a class on the element, which would
|
|
49
|
+
// lose the cascade (see the header).
|
|
50
|
+
ul: "[&_ul]:my-2 [&_ul]:ms-5 [&_ul]:list-disc [&_ul.contains-task-list]:list-none",
|
|
51
|
+
ol: "[&_ol]:my-2 [&_ol]:ms-5 [&_ol]:list-decimal",
|
|
52
|
+
li: "[&_li]:mt-1 [&_li]:marker:normal-nums [&_li]:marker:text-inherit [&_li_p]:my-0",
|
|
46
53
|
// Task lists, one shape for both producers: `MarkdownView` tags the GFM list
|
|
47
54
|
// `data-type="taskList"` and each item `data-type="taskItem"` with its body in a
|
|
48
55
|
// `data-slot="task-item-content"` box, which is exactly the DOM Tiptap's `TaskItem` node view
|
|
49
56
|
// renders — so the checkbox IS the marker, the body wraps beside it, and a nested list indents
|
|
50
|
-
// under the body in view and edit alike.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
blockquote: "[&_blockquote]:my-3 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic",
|
|
57
|
+
// under the body in view and edit alike.
|
|
58
|
+
taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1",
|
|
59
|
+
blockquote: "[&_blockquote]:my-2 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-3",
|
|
54
60
|
// Inline code is a chip. Code inside a `pre` is not: it inherits the panel's ground, so the chip
|
|
55
61
|
// is undone at higher specificity (`[&_pre_code]` is (0,1,2) against the chip's (0,1,1)).
|
|
56
62
|
code: "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-sm [&_code]:text-foreground",
|
|
57
63
|
// A bare `<pre>` wears `CodeBlock`'s surface — the same sunken panel, one vocabulary (B4-09).
|
|
58
64
|
// `CodeBlock`'s own `pre` is excluded: it already sits inside a `figure` carrying the border,
|
|
59
65
|
// radius and ground, and re-applying them here would draw a second panel inside the first.
|
|
60
|
-
pre: "[&_pre:not([data-slot='code-block-pre'])]:my-
|
|
66
|
+
pre: "[&_pre:not([data-slot='code-block-pre'])]:my-2 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground",
|
|
61
67
|
preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground",
|
|
62
|
-
hr: "[&_hr]:my-
|
|
68
|
+
hr: "[&_hr]:my-4 [&_hr]:border-border",
|
|
63
69
|
// GFM tables. The scroll container is structural and belongs to the consumer (MarkdownView wraps
|
|
64
70
|
// the table in an `overflow-x-auto` div); these are the cell and rule tokens.
|
|
65
|
-
table: "[&_table]:w-full [&_table]:border-collapse [&
|
|
66
|
-
img: "[&_img]:my-
|
|
71
|
+
table: "[&_table]:w-full [&_table]:border-collapse [&_thead]:border-b [&_thead]:border-border [&_tr]:border-b [&_tr]:border-border [&_tr]:last:border-0 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td_p]:my-0 [&_th_p]:my-0",
|
|
72
|
+
img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border"
|
|
67
73
|
};
|
|
68
74
|
var proseClassName = Object.values(prose).join(" ");
|
|
69
75
|
|
package/dist/icons/index.js
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -48,51 +48,57 @@ var prose = {
|
|
|
48
48
|
* rather than something prose falls into by accident. A consumer who genuinely wants mono prose
|
|
49
49
|
* still says so on the root, where it reads as a decision.
|
|
50
50
|
*/
|
|
51
|
-
root: "font-sans text-sm text-foreground",
|
|
52
|
-
// Headings
|
|
53
|
-
// `
|
|
54
|
-
//
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
h5: "[&_h5]:mt-
|
|
61
|
-
h6: "[&_h6]:mt-
|
|
62
|
-
|
|
63
|
-
//
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
51
|
+
root: "font-sans text-sm font-normal text-foreground",
|
|
52
|
+
// Headings follow the app's type scale (design.md §Headings), not a document scale: the page
|
|
53
|
+
// title is the only `text-2xl`, so a heading inside rendered text stops at `text-lg` for `#`,
|
|
54
|
+
// the section size (`text-base`) for `##`, and body size for everything below — weight carries
|
|
55
|
+
// the rest. Every heading wears `font-heading` like the app's own titles.
|
|
56
|
+
h1: "[&_h1]:mt-5 [&_h1]:mb-2 [&_h1]:scroll-m-20 [&_h1]:font-heading [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-foreground [&_h1]:first:mt-0",
|
|
57
|
+
h2: "[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:scroll-m-20 [&_h2]:font-heading [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:first:mt-0",
|
|
58
|
+
h3: "[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:scroll-m-20 [&_h3]:font-heading [&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:first:mt-0",
|
|
59
|
+
h4: "[&_h4]:mt-3 [&_h4]:mb-1.5 [&_h4]:font-heading [&_h4]:text-sm [&_h4]:font-medium [&_h4]:text-foreground [&_h4]:first:mt-0",
|
|
60
|
+
h5: "[&_h5]:mt-3 [&_h5]:mb-1.5 [&_h5]:font-heading [&_h5]:text-sm [&_h5]:font-medium [&_h5]:text-foreground [&_h5]:first:mt-0",
|
|
61
|
+
h6: "[&_h6]:mt-3 [&_h6]:mb-1.5 [&_h6]:font-heading [&_h6]:text-sm [&_h6]:font-medium [&_h6]:text-foreground [&_h6]:first:mt-0",
|
|
62
|
+
// Body text is the app's body text — size, leading and ink inherit from the root, so a paragraph
|
|
63
|
+
// here is indistinguishable from any other `text-sm` paragraph in the product. No prose look.
|
|
64
|
+
p: "[&_p]:my-2 [&_p]:first:mt-0 [&_p]:last:mb-0",
|
|
65
|
+
// Marks. Links are `info` ink per design.md §Colours at body weight; `s` is Tiptap's strike
|
|
66
|
+
// element and `del` is GFM's — the same mark from two producers.
|
|
67
|
+
a: "[&_a]:text-info-text [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-info-text/88",
|
|
68
|
+
strong: "[&_strong]:font-semibold",
|
|
67
69
|
em: "[&_em]:italic",
|
|
68
|
-
del: "[&_del]:
|
|
69
|
-
// Lists.
|
|
70
|
-
//
|
|
71
|
-
//
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
70
|
+
del: "[&_del]:line-through [&_s]:line-through",
|
|
71
|
+
// Lists. Items and markers are body text: family, size and ink inherit (a `::marker` takes the
|
|
72
|
+
// item's font), so `1.` and `•` never read as a second typeface or a second colour. One thing
|
|
73
|
+
// does NOT inherit: the user-agent stylesheet gives `::marker` `font-variant-numeric:
|
|
74
|
+
// tabular-nums`, and Geist's tabular figures are fixed-width — that is what made ordered-list
|
|
75
|
+
// numbers look monospaced. `marker:normal-nums` restores the body's proportional figures. A GFM task
|
|
76
|
+
// list carries `contains-task-list` and its checkbox IS the marker, so the disc goes — expressed
|
|
77
|
+
// as a second, more specific descendant rule rather than a class on the element, which would
|
|
78
|
+
// lose the cascade (see the header).
|
|
79
|
+
ul: "[&_ul]:my-2 [&_ul]:ms-5 [&_ul]:list-disc [&_ul.contains-task-list]:list-none",
|
|
80
|
+
ol: "[&_ol]:my-2 [&_ol]:ms-5 [&_ol]:list-decimal",
|
|
81
|
+
li: "[&_li]:mt-1 [&_li]:marker:normal-nums [&_li]:marker:text-inherit [&_li_p]:my-0",
|
|
75
82
|
// Task lists, one shape for both producers: `MarkdownView` tags the GFM list
|
|
76
83
|
// `data-type="taskList"` and each item `data-type="taskItem"` with its body in a
|
|
77
84
|
// `data-slot="task-item-content"` box, which is exactly the DOM Tiptap's `TaskItem` node view
|
|
78
85
|
// renders — so the checkbox IS the marker, the body wraps beside it, and a nested list indents
|
|
79
|
-
// under the body in view and edit alike.
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
blockquote: "[&_blockquote]:my-3 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic",
|
|
86
|
+
// under the body in view and edit alike.
|
|
87
|
+
taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1",
|
|
88
|
+
blockquote: "[&_blockquote]:my-2 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-3",
|
|
83
89
|
// Inline code is a chip. Code inside a `pre` is not: it inherits the panel's ground, so the chip
|
|
84
90
|
// is undone at higher specificity (`[&_pre_code]` is (0,1,2) against the chip's (0,1,1)).
|
|
85
91
|
code: "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-sm [&_code]:text-foreground",
|
|
86
92
|
// A bare `<pre>` wears `CodeBlock`'s surface — the same sunken panel, one vocabulary (B4-09).
|
|
87
93
|
// `CodeBlock`'s own `pre` is excluded: it already sits inside a `figure` carrying the border,
|
|
88
94
|
// radius and ground, and re-applying them here would draw a second panel inside the first.
|
|
89
|
-
pre: "[&_pre:not([data-slot='code-block-pre'])]:my-
|
|
95
|
+
pre: "[&_pre:not([data-slot='code-block-pre'])]:my-2 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground",
|
|
90
96
|
preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground",
|
|
91
|
-
hr: "[&_hr]:my-
|
|
97
|
+
hr: "[&_hr]:my-4 [&_hr]:border-border",
|
|
92
98
|
// GFM tables. The scroll container is structural and belongs to the consumer (MarkdownView wraps
|
|
93
99
|
// the table in an `overflow-x-auto` div); these are the cell and rule tokens.
|
|
94
|
-
table: "[&_table]:w-full [&_table]:border-collapse [&
|
|
95
|
-
img: "[&_img]:my-
|
|
100
|
+
table: "[&_table]:w-full [&_table]:border-collapse [&_thead]:border-b [&_thead]:border-border [&_tr]:border-b [&_tr]:border-border [&_tr]:last:border-0 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td_p]:my-0 [&_th_p]:my-0",
|
|
101
|
+
img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border"
|
|
96
102
|
};
|
|
97
103
|
var proseClassName = Object.values(prose).join(" ");
|
|
98
104
|
|
package/dist/index.d.cts
CHANGED
|
@@ -55,29 +55,29 @@ declare const prose: {
|
|
|
55
55
|
* rather than something prose falls into by accident. A consumer who genuinely wants mono prose
|
|
56
56
|
* still says so on the root, where it reads as a decision.
|
|
57
57
|
*/
|
|
58
|
-
readonly root: "font-sans text-sm text-foreground";
|
|
59
|
-
readonly h1: "[&_h1]:mt-
|
|
60
|
-
readonly h2: "[&_h2]:mt-
|
|
61
|
-
readonly h3: "[&_h3]:mt-
|
|
62
|
-
readonly h4: "[&_h4]:mt-
|
|
63
|
-
readonly h5: "[&_h5]:mt-
|
|
64
|
-
readonly h6: "[&_h6]:mt-
|
|
65
|
-
readonly p: "[&_p]:my-
|
|
66
|
-
readonly a: "[&_a]:
|
|
67
|
-
readonly strong: "[&_strong]:font-
|
|
58
|
+
readonly root: "font-sans text-sm font-normal text-foreground";
|
|
59
|
+
readonly h1: "[&_h1]:mt-5 [&_h1]:mb-2 [&_h1]:scroll-m-20 [&_h1]:font-heading [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-foreground [&_h1]:first:mt-0";
|
|
60
|
+
readonly h2: "[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:scroll-m-20 [&_h2]:font-heading [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:first:mt-0";
|
|
61
|
+
readonly h3: "[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:scroll-m-20 [&_h3]:font-heading [&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:first:mt-0";
|
|
62
|
+
readonly h4: "[&_h4]:mt-3 [&_h4]:mb-1.5 [&_h4]:font-heading [&_h4]:text-sm [&_h4]:font-medium [&_h4]:text-foreground [&_h4]:first:mt-0";
|
|
63
|
+
readonly h5: "[&_h5]:mt-3 [&_h5]:mb-1.5 [&_h5]:font-heading [&_h5]:text-sm [&_h5]:font-medium [&_h5]:text-foreground [&_h5]:first:mt-0";
|
|
64
|
+
readonly h6: "[&_h6]:mt-3 [&_h6]:mb-1.5 [&_h6]:font-heading [&_h6]:text-sm [&_h6]:font-medium [&_h6]:text-foreground [&_h6]:first:mt-0";
|
|
65
|
+
readonly p: "[&_p]:my-2 [&_p]:first:mt-0 [&_p]:last:mb-0";
|
|
66
|
+
readonly a: "[&_a]:text-info-text [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-info-text/88";
|
|
67
|
+
readonly strong: "[&_strong]:font-semibold";
|
|
68
68
|
readonly em: "[&_em]:italic";
|
|
69
|
-
readonly del: "[&_del]:
|
|
70
|
-
readonly ul: "[&_ul]:my-
|
|
71
|
-
readonly ol: "[&_ol]:my-
|
|
72
|
-
readonly li: "[&_li]:mt-1
|
|
73
|
-
readonly taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-
|
|
74
|
-
readonly blockquote: "[&_blockquote]:my-
|
|
69
|
+
readonly del: "[&_del]:line-through [&_s]:line-through";
|
|
70
|
+
readonly ul: "[&_ul]:my-2 [&_ul]:ms-5 [&_ul]:list-disc [&_ul.contains-task-list]:list-none";
|
|
71
|
+
readonly ol: "[&_ol]:my-2 [&_ol]:ms-5 [&_ol]:list-decimal";
|
|
72
|
+
readonly li: "[&_li]:mt-1 [&_li]:marker:normal-nums [&_li]:marker:text-inherit [&_li_p]:my-0";
|
|
73
|
+
readonly taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1";
|
|
74
|
+
readonly blockquote: "[&_blockquote]:my-2 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-3";
|
|
75
75
|
readonly code: "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-sm [&_code]:text-foreground";
|
|
76
|
-
readonly pre: "[&_pre:not([data-slot='code-block-pre'])]:my-
|
|
76
|
+
readonly pre: "[&_pre:not([data-slot='code-block-pre'])]:my-2 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground";
|
|
77
77
|
readonly preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground";
|
|
78
|
-
readonly hr: "[&_hr]:my-
|
|
79
|
-
readonly table: "[&_table]:w-full [&_table]:border-collapse [&
|
|
80
|
-
readonly img: "[&_img]:my-
|
|
78
|
+
readonly hr: "[&_hr]:my-4 [&_hr]:border-border";
|
|
79
|
+
readonly table: "[&_table]:w-full [&_table]:border-collapse [&_thead]:border-b [&_thead]:border-border [&_tr]:border-b [&_tr]:border-border [&_tr]:last:border-0 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td_p]:my-0 [&_th_p]:my-0";
|
|
80
|
+
readonly img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border";
|
|
81
81
|
};
|
|
82
82
|
/** The element roles the prose recipe covers. */
|
|
83
83
|
type ProseElement = keyof typeof prose;
|
package/dist/index.d.ts
CHANGED
|
@@ -55,29 +55,29 @@ declare const prose: {
|
|
|
55
55
|
* rather than something prose falls into by accident. A consumer who genuinely wants mono prose
|
|
56
56
|
* still says so on the root, where it reads as a decision.
|
|
57
57
|
*/
|
|
58
|
-
readonly root: "font-sans text-sm text-foreground";
|
|
59
|
-
readonly h1: "[&_h1]:mt-
|
|
60
|
-
readonly h2: "[&_h2]:mt-
|
|
61
|
-
readonly h3: "[&_h3]:mt-
|
|
62
|
-
readonly h4: "[&_h4]:mt-
|
|
63
|
-
readonly h5: "[&_h5]:mt-
|
|
64
|
-
readonly h6: "[&_h6]:mt-
|
|
65
|
-
readonly p: "[&_p]:my-
|
|
66
|
-
readonly a: "[&_a]:
|
|
67
|
-
readonly strong: "[&_strong]:font-
|
|
58
|
+
readonly root: "font-sans text-sm font-normal text-foreground";
|
|
59
|
+
readonly h1: "[&_h1]:mt-5 [&_h1]:mb-2 [&_h1]:scroll-m-20 [&_h1]:font-heading [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-foreground [&_h1]:first:mt-0";
|
|
60
|
+
readonly h2: "[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:scroll-m-20 [&_h2]:font-heading [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:first:mt-0";
|
|
61
|
+
readonly h3: "[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:scroll-m-20 [&_h3]:font-heading [&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:first:mt-0";
|
|
62
|
+
readonly h4: "[&_h4]:mt-3 [&_h4]:mb-1.5 [&_h4]:font-heading [&_h4]:text-sm [&_h4]:font-medium [&_h4]:text-foreground [&_h4]:first:mt-0";
|
|
63
|
+
readonly h5: "[&_h5]:mt-3 [&_h5]:mb-1.5 [&_h5]:font-heading [&_h5]:text-sm [&_h5]:font-medium [&_h5]:text-foreground [&_h5]:first:mt-0";
|
|
64
|
+
readonly h6: "[&_h6]:mt-3 [&_h6]:mb-1.5 [&_h6]:font-heading [&_h6]:text-sm [&_h6]:font-medium [&_h6]:text-foreground [&_h6]:first:mt-0";
|
|
65
|
+
readonly p: "[&_p]:my-2 [&_p]:first:mt-0 [&_p]:last:mb-0";
|
|
66
|
+
readonly a: "[&_a]:text-info-text [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-info-text/88";
|
|
67
|
+
readonly strong: "[&_strong]:font-semibold";
|
|
68
68
|
readonly em: "[&_em]:italic";
|
|
69
|
-
readonly del: "[&_del]:
|
|
70
|
-
readonly ul: "[&_ul]:my-
|
|
71
|
-
readonly ol: "[&_ol]:my-
|
|
72
|
-
readonly li: "[&_li]:mt-1
|
|
73
|
-
readonly taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-
|
|
74
|
-
readonly blockquote: "[&_blockquote]:my-
|
|
69
|
+
readonly del: "[&_del]:line-through [&_s]:line-through";
|
|
70
|
+
readonly ul: "[&_ul]:my-2 [&_ul]:ms-5 [&_ul]:list-disc [&_ul.contains-task-list]:list-none";
|
|
71
|
+
readonly ol: "[&_ol]:my-2 [&_ol]:ms-5 [&_ol]:list-decimal";
|
|
72
|
+
readonly li: "[&_li]:mt-1 [&_li]:marker:normal-nums [&_li]:marker:text-inherit [&_li_p]:my-0";
|
|
73
|
+
readonly taskList: "[&_ul[data-type=taskList]]:ms-0 [&_ul[data-type=taskList]]:list-none [&_li[data-type=taskItem]]:flex [&_li[data-type=taskItem]]:items-start [&_li[data-type=taskItem]]:gap-2 [&_li[data-type=taskItem]_[data-slot=checkbox]]:mt-0.5 [&_li[data-type=taskItem]_[data-slot=checkbox]]:me-0 [&_[data-slot=task-item-content]]:min-w-0 [&_[data-slot=task-item-content]]:flex-1";
|
|
74
|
+
readonly blockquote: "[&_blockquote]:my-2 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-3";
|
|
75
75
|
readonly code: "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-sm [&_code]:text-foreground";
|
|
76
|
-
readonly pre: "[&_pre:not([data-slot='code-block-pre'])]:my-
|
|
76
|
+
readonly pre: "[&_pre:not([data-slot='code-block-pre'])]:my-2 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground";
|
|
77
77
|
readonly preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-sm [&_pre_code]:text-foreground";
|
|
78
|
-
readonly hr: "[&_hr]:my-
|
|
79
|
-
readonly table: "[&_table]:w-full [&_table]:border-collapse [&
|
|
80
|
-
readonly img: "[&_img]:my-
|
|
78
|
+
readonly hr: "[&_hr]:my-4 [&_hr]:border-border";
|
|
79
|
+
readonly table: "[&_table]:w-full [&_table]:border-collapse [&_thead]:border-b [&_thead]:border-border [&_tr]:border-b [&_tr]:border-border [&_tr]:last:border-0 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-medium [&_td]:px-3 [&_td]:py-2 [&_td_p]:my-0 [&_th_p]:my-0";
|
|
80
|
+
readonly img: "[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border";
|
|
81
81
|
};
|
|
82
82
|
/** The element roles the prose recipe covers. */
|
|
83
83
|
type ProseElement = keyof typeof prose;
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vegastack/design",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.41",
|
|
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
|
-
**127 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`),
|
|
6
|
+
**127 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`), 11 starter blocks (`app-shell-01`, `board-01`, `issue-detail-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`) — 689 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
|
|
@@ -31,7 +31,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
31
31
|
- **`editable-cell`** — Inline-editable value whose edit mode looks like view — same box, inherited type, no border — with optimistic saves, a delayed spinner, rollback plus a Retry toast on failure, required, multiline, table-cell and heading variants, and a typed text/select/custom editor registry.
|
|
32
32
|
- **`emoji-picker`** — A popover with a searchable, category-grouped grid of emoji that returns the selected character via onValueChange (curated set, not full Unicode).
|
|
33
33
|
- **`field`** — The form-field scaffold — label, description, error, legend, separator and choice-card layouts.
|
|
34
|
-
- **`input`** — A styled Base UI input for every text-entry type
|
|
34
|
+
- **`input`** — A styled Base UI input for every text-entry type: a bordered default with the focus border tint (FOC-3), or a borderless ghost title field tinted on hover and focus; sm, default and lg sizes.
|
|
35
35
|
- **`input-group`** — An input or textarea with addons — icons, text, buttons, kbd hints and spinners on one surface.
|
|
36
36
|
- **`input-otp`** — A one-time-password field with per-character slots, driven by one hidden input.
|
|
37
37
|
- **`label`** — A styled native label for form controls.
|
|
@@ -157,7 +157,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
157
157
|
|
|
158
158
|
## Rich text
|
|
159
159
|
|
|
160
|
-
- **`text-edit`** — A Tiptap-based rich-text editor with a
|
|
160
|
+
- **`text-edit`** — A Tiptap-based, markdown-first rich-text editor with no toolbar: a slash menu for blocks and a bubble menu for inline marks, a hover/focus tint, and one onCommit path.
|
|
161
161
|
|
|
162
162
|
## Chat
|
|
163
163
|
|