sparkdesign 0.4.6 → 0.4.7
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/AI_README.md +60 -0
- package/README.md +1 -1
- package/cli/dist/commands/add.js +1 -1
- package/cli/dist/commands/init.js +1 -1
- package/cli/registry/AGENTS.md +9 -2
- package/cli/registry/agent-manifest.json +794 -0
- package/cli/registry/basic/alert.tsx +76 -0
- package/cli/registry/basic/aspect-ratio.tsx +8 -0
- package/cli/registry/basic/breadcrumb.tsx +117 -0
- package/cli/registry/basic/button-group.tsx +79 -0
- package/cli/registry/basic/button.tsx +1 -1
- package/cli/registry/basic/calendar.tsx +221 -0
- package/cli/registry/basic/card.tsx +103 -0
- package/cli/registry/basic/carousel.tsx +241 -0
- package/cli/registry/basic/chart.tsx +372 -0
- package/cli/registry/basic/checkbox.tsx +42 -0
- package/cli/registry/basic/collapsible-card.tsx +2 -2
- package/cli/registry/basic/combobox.tsx +75 -0
- package/cli/registry/basic/command.tsx +184 -0
- package/cli/registry/basic/context-menu.tsx +239 -0
- package/cli/registry/basic/data-table.tsx +73 -0
- package/cli/registry/basic/date-picker.tsx +13 -0
- package/cli/registry/basic/dialog.tsx +169 -0
- package/cli/registry/basic/direction.tsx +25 -0
- package/cli/registry/basic/drawer.tsx +164 -0
- package/cli/registry/basic/dropdown-menu.tsx +0 -4
- package/cli/registry/basic/empty.tsx +104 -0
- package/cli/registry/basic/field.tsx +248 -0
- package/cli/registry/basic/hover-card.tsx +58 -0
- package/cli/registry/basic/input-group.tsx +168 -0
- package/cli/registry/basic/input-otp.tsx +75 -0
- package/cli/registry/basic/input.tsx +27 -0
- package/cli/registry/basic/item.tsx +204 -0
- package/cli/registry/basic/label.tsx +24 -0
- package/cli/registry/basic/menubar.tsx +274 -0
- package/cli/registry/basic/native-select.tsx +62 -0
- package/cli/registry/basic/navigation-menu.tsx +168 -0
- package/cli/registry/basic/popover.tsx +59 -0
- package/cli/registry/basic/scroll-area.tsx +58 -0
- package/cli/registry/basic/select.tsx +2 -1
- package/cli/registry/basic/separator.tsx +26 -0
- package/cli/registry/basic/sheet.tsx +18 -0
- package/cli/registry/basic/textarea.tsx +25 -0
- package/cli/registry/basic/toggle.tsx +1 -1
- package/cli/registry/basic/typography.tsx +1 -1
- package/cli/registry/chat/chat-input/chat-input-textarea.tsx +1 -1
- package/cli/registry/chat/chat-input/compound.tsx +4 -3
- package/cli/registry/chat/chat-input/context.tsx +4 -1
- package/cli/registry/chat/code-block-part.tsx +1 -1
- package/cli/registry/chat/conversation-anchor-nav.tsx +349 -0
- package/cli/registry/chat/file-attachment.tsx +2 -1
- package/cli/registry/chat/file-review-part.tsx +21 -21
- package/cli/registry/chat/markdown.tsx +2 -2
- package/cli/registry/chat/queue-indicator.tsx +1 -0
- package/cli/registry/chat/streaming-markdown-block.tsx +12 -8
- package/cli/registry/chat/tool-invocation-card.tsx +4 -1
- package/cli/registry/lib/file-icon-maps.ts +22 -22
- package/cli/registry/meta.json +518 -0
- package/cli/registry/tokens/ontology.json +404 -0
- package/cli/registry/tokens/scale/presets/compact.css +16 -5
- package/cli/registry/tokens/scale/presets/dense.css +13 -2
- package/cli/registry/tokens/scale/presets/sharp.css +18 -6
- package/cli/registry/tokens/scale/presets/soft.css +23 -1
- package/dist/registry/basic/alert.d.ts +24 -0
- package/dist/registry/basic/aspect-ratio.d.ts +16 -0
- package/dist/registry/basic/breadcrumb.d.ts +24 -0
- package/dist/registry/basic/button-group.d.ts +26 -0
- package/dist/registry/basic/button.d.ts +1 -1
- package/dist/registry/basic/calendar.d.ts +22 -0
- package/dist/registry/basic/card.d.ts +27 -0
- package/dist/registry/basic/carousel.d.ts +19 -0
- package/dist/registry/basic/chart.d.ts +55 -0
- package/dist/registry/basic/checkbox.d.ts +21 -0
- package/dist/registry/basic/combobox.d.ts +26 -0
- package/dist/registry/basic/command.d.ts +18 -0
- package/dist/registry/basic/context-menu.d.ts +44 -0
- package/dist/registry/basic/data-table.d.ts +26 -0
- package/dist/registry/basic/date-picker.d.ts +18 -0
- package/dist/registry/basic/dialog.d.ts +39 -0
- package/dist/registry/basic/direction.d.ts +19 -0
- package/dist/registry/basic/drawer.d.ts +37 -0
- package/dist/registry/basic/empty.d.ts +22 -0
- package/dist/registry/basic/field.d.ts +24 -0
- package/dist/registry/basic/hover-card.d.ts +22 -0
- package/dist/registry/basic/input-group.d.ts +27 -0
- package/dist/registry/basic/input-otp.d.ts +22 -0
- package/dist/registry/basic/input.d.ts +15 -0
- package/dist/registry/basic/item.d.ts +34 -0
- package/dist/registry/basic/label.d.ts +16 -0
- package/dist/registry/basic/menubar.d.ts +37 -0
- package/dist/registry/basic/native-select.d.ts +18 -0
- package/dist/registry/basic/navigation-menu.d.ts +25 -0
- package/dist/registry/basic/popover.d.ts +23 -0
- package/dist/registry/basic/scroll-area.d.ts +5 -0
- package/dist/registry/basic/separator.d.ts +16 -0
- package/dist/registry/basic/sheet.d.ts +13 -0
- package/dist/registry/basic/textarea.d.ts +15 -0
- package/dist/registry/basic/toggle.d.ts +1 -1
- package/dist/registry/chat/chat-input/context.d.ts +3 -1
- package/dist/registry/chat/conversation-anchor-nav.d.ts +72 -0
- package/dist/registry/chat/tool-invocation-card.d.ts +2 -0
- package/dist/scale/presets/compact.css +16 -5
- package/dist/scale/presets/dense.css +13 -2
- package/dist/scale/presets/sharp.css +18 -6
- package/dist/scale/presets/soft.css +23 -1
- package/dist/spark-design.cjs.js +40 -36
- package/dist/spark-design.es.js +8647 -8657
- package/dist/sparkdesign.css +1 -1
- package/dist/src/components/basic/Alert/index.d.ts +13 -0
- package/dist/src/components/basic/AspectRatio/index.d.ts +13 -0
- package/dist/src/components/basic/Breadcrumb/index.d.ts +12 -0
- package/dist/src/components/basic/ButtonGroup/index.d.ts +13 -0
- package/dist/src/components/basic/Calendar/index.d.ts +13 -0
- package/dist/src/components/basic/Card/index.d.ts +13 -0
- package/dist/src/components/basic/Carousel/index.d.ts +12 -0
- package/dist/src/components/basic/Chart/index.d.ts +13 -0
- package/dist/src/components/basic/Checkbox/index.d.ts +13 -0
- package/dist/src/components/basic/Combobox/index.d.ts +13 -0
- package/dist/src/components/basic/Command/index.d.ts +12 -0
- package/dist/src/components/basic/ContextMenu/index.d.ts +19 -0
- package/dist/src/components/basic/DataTable/index.d.ts +13 -0
- package/dist/src/components/basic/DatePicker/index.d.ts +13 -0
- package/dist/src/components/basic/Dialog/index.d.ts +16 -0
- package/dist/src/components/basic/Direction/index.d.ts +13 -0
- package/dist/src/components/basic/Drawer/index.d.ts +16 -0
- package/dist/src/components/basic/Empty/index.d.ts +12 -0
- package/dist/src/components/basic/Field/index.d.ts +12 -0
- package/dist/src/components/basic/HoverCard/index.d.ts +16 -0
- package/dist/src/components/basic/Input/index.d.ts +13 -0
- package/dist/src/components/basic/InputGroup/index.d.ts +12 -0
- package/dist/src/components/basic/InputOTP/index.d.ts +12 -0
- package/dist/src/components/basic/Item/index.d.ts +12 -0
- package/dist/src/components/basic/Label/index.d.ts +13 -0
- package/dist/src/components/basic/Menubar/index.d.ts +12 -0
- package/dist/src/components/basic/NativeSelect/index.d.ts +12 -0
- package/dist/src/components/basic/NavigationMenu/index.d.ts +12 -0
- package/dist/src/components/basic/Popover/index.d.ts +16 -0
- package/dist/src/components/basic/ScrollArea/index.d.ts +12 -0
- package/dist/src/components/basic/Separator/index.d.ts +13 -0
- package/dist/src/components/basic/Sheet/index.d.ts +13 -0
- package/dist/src/components/basic/Textarea/index.d.ts +13 -0
- package/dist/src/components/chat/ConversationAnchorNav/index.d.ts +13 -0
- package/dist/src/components/chat/StreamingMarkdownBlock/index.d.ts +13 -0
- package/dist/src/components/index.d.ts +57 -0
- package/dist/tokens/AGENTS.md +1 -0
- package/dist/tokens/scale/presets/compact.css +16 -5
- package/dist/tokens/scale/presets/dense.css +13 -2
- package/dist/tokens/scale/presets/sharp.css +18 -6
- package/dist/tokens/scale/presets/soft.css +23 -1
- package/docs/agent/component-selection.md +60 -0
- package/docs/agent/token-ontology.md +37 -0
- package/package.json +31 -5
- package/registry/agent-manifest.json +794 -0
- package/registry/tokens/ontology.json +404 -0
- package/dist/_basePickBy-DnQN8w3y.js +0 -151
- package/dist/_basePickBy-a-kPMlkg.cjs +0 -1
- package/dist/_baseUniq-B-N2NQ50.js +0 -614
- package/dist/_baseUniq-Cc_zbSif.cjs +0 -1
- package/dist/arc-BQBhijZ6.js +0 -83
- package/dist/arc-mWQt0Yph.cjs +0 -1
- package/dist/architectureDiagram-VXUJARFQ-BMZEucno.cjs +0 -36
- package/dist/architectureDiagram-VXUJARFQ-DTdjD3Bp.js +0 -4661
- package/dist/blockDiagram-VD42YOAC-CzHn0yob.js +0 -2256
- package/dist/blockDiagram-VD42YOAC-DDxdHAlz.cjs +0 -122
- package/dist/c4Diagram-YG6GDRKO-4Gz0I4gj.cjs +0 -10
- package/dist/c4Diagram-YG6GDRKO-BIy--yVN.js +0 -1580
- package/dist/channel-BQn0o8bs.js +0 -5
- package/dist/channel-DaN7XniJ.cjs +0 -1
- package/dist/chunk-4BX2VUAB-BlQFTQqz.cjs +0 -1
- package/dist/chunk-4BX2VUAB-Czitj3Kc.js +0 -8
- package/dist/chunk-55IACEB6-DXacNZbO.js +0 -8
- package/dist/chunk-55IACEB6-DnDxpye9.cjs +0 -1
- package/dist/chunk-B4BG7PRW-CBdN0q_V.js +0 -1375
- package/dist/chunk-B4BG7PRW-DbGvUkGO.cjs +0 -165
- package/dist/chunk-DI55MBZ5-D1YJMs6x.cjs +0 -220
- package/dist/chunk-DI55MBZ5-NCQTvayw.js +0 -1370
- package/dist/chunk-FMBD7UC4-CsGMbrtr.js +0 -19
- package/dist/chunk-FMBD7UC4-Di7cUUh5.cjs +0 -15
- package/dist/chunk-QN33PNHL-0j5LC8Lm.cjs +0 -1
- package/dist/chunk-QN33PNHL-3GERZBRm.js +0 -19
- package/dist/chunk-QZHKN3VN-AVEY9ImQ.js +0 -15
- package/dist/chunk-QZHKN3VN-s8Z0a8mc.cjs +0 -1
- package/dist/chunk-TZMSLE5B-CAf87HPt.cjs +0 -1
- package/dist/chunk-TZMSLE5B-sbiflal0.js +0 -64
- package/dist/classDiagram-2ON5EDUG-Ct9JLIN2.cjs +0 -1
- package/dist/classDiagram-2ON5EDUG-Dzfrft3a.js +0 -16
- package/dist/classDiagram-v2-WZHVMYZB-Ct9JLIN2.cjs +0 -1
- package/dist/classDiagram-v2-WZHVMYZB-Dzfrft3a.js +0 -16
- package/dist/clone-Cde_NQ8V.js +0 -8
- package/dist/clone-DCNjWuM2.cjs +0 -1
- package/dist/cose-bilkent-S5V4N54A-0uLijMro.cjs +0 -1
- package/dist/cose-bilkent-S5V4N54A-Bb08N431.js +0 -2608
- package/dist/cytoscape.esm-CNUX3VTg.cjs +0 -321
- package/dist/cytoscape.esm-Cvf3sx9F.js +0 -18704
- package/dist/dagre-6UL2VRFP-CY_Wz5Zd.js +0 -444
- package/dist/dagre-6UL2VRFP-Dxe7_qZc.cjs +0 -4
- package/dist/defaultLocale-BgPVtth8.js +0 -171
- package/dist/defaultLocale-C4wbwF1n.cjs +0 -1
- package/dist/diagram-PSM6KHXK-D2bdb7MT.js +0 -531
- package/dist/diagram-PSM6KHXK-YF69SUjY.cjs +0 -24
- package/dist/diagram-QEK2KX5R-BpUSoh0-.js +0 -217
- package/dist/diagram-QEK2KX5R-DZPGteon.cjs +0 -43
- package/dist/diagram-S2PKOQOG-ht-zdvFG.cjs +0 -24
- package/dist/diagram-S2PKOQOG-zFeLJ50Z.js +0 -142
- package/dist/erDiagram-Q2GNP2WA-B38iJ6ts.js +0 -841
- package/dist/erDiagram-Q2GNP2WA-RgS80DDU.cjs +0 -60
- package/dist/flowDiagram-NV44I4VS-BHilOs2p.cjs +0 -162
- package/dist/flowDiagram-NV44I4VS-BrBJcoce.js +0 -1620
- package/dist/ganttDiagram-JELNMOA3-pZiJeFio.cjs +0 -267
- package/dist/ganttDiagram-JELNMOA3-tw6FhkWJ.js +0 -2670
- package/dist/gitGraphDiagram-V2S2FVAM-BWn5uIK5.js +0 -699
- package/dist/gitGraphDiagram-V2S2FVAM-DKKeG-9R.cjs +0 -65
- package/dist/graph-DIbblrZP.cjs +0 -1
- package/dist/graph-DPcK91G3.js +0 -247
- package/dist/infoDiagram-HS3SLOUP-B8gwwhct.cjs +0 -2
- package/dist/infoDiagram-HS3SLOUP-D47PNcP_.js +0 -24
- package/dist/init-CHZsXQcr.cjs +0 -1
- package/dist/init-DjUOC4st.js +0 -16
- package/dist/journeyDiagram-XKPGCS4Q-BG3cfhyU.js +0 -834
- package/dist/journeyDiagram-XKPGCS4Q-D8DVLJof.cjs +0 -139
- package/dist/kanban-definition-3W4ZIXB7-4OCnEouP.cjs +0 -89
- package/dist/kanban-definition-3W4ZIXB7-CWi_ssF9.js +0 -719
- package/dist/layout-Byuh8f-J.cjs +0 -1
- package/dist/layout-CdLdvj1j.js +0 -1335
- package/dist/linear-C2Q_PI9B.js +0 -259
- package/dist/linear-C69aPBW1.cjs +0 -1
- package/dist/mermaid.core-DBwAx_jp.cjs +0 -249
- package/dist/mermaid.core-gFR0XUlD.js +0 -15300
- package/dist/mindmap-definition-VGOIOE7T-8P7obVV4.cjs +0 -68
- package/dist/mindmap-definition-VGOIOE7T-DnOa7WJ9.js +0 -784
- package/dist/ordinal-B6-f3MAq.js +0 -61
- package/dist/ordinal-CagbB1m8.cjs +0 -1
- package/dist/pieDiagram-ADFJNKIX-5NAlvhMo.js +0 -161
- package/dist/pieDiagram-ADFJNKIX-CQBG4yR9.cjs +0 -30
- package/dist/quadrantDiagram-AYHSOK5B-Oe4y7RZ0.cjs +0 -7
- package/dist/quadrantDiagram-AYHSOK5B-rh2DPEP1.js +0 -1022
- package/dist/requirementDiagram-UZGBJVZJ-DcWaCuXr.js +0 -850
- package/dist/requirementDiagram-UZGBJVZJ-gfdlrFiq.cjs +0 -64
- package/dist/sankeyDiagram-TZEHDZUN-CQIKFwD0.js +0 -810
- package/dist/sankeyDiagram-TZEHDZUN-DvPtzQvC.cjs +0 -10
- package/dist/sequenceDiagram-WL72ISMW-BNrsMagL.cjs +0 -145
- package/dist/sequenceDiagram-WL72ISMW-iCX3ckKx.js +0 -2511
- package/dist/stateDiagram-FKZM4ZOC-DBvJ_eeL.cjs +0 -1
- package/dist/stateDiagram-FKZM4ZOC-ZVsJlaHJ.js +0 -263
- package/dist/stateDiagram-v2-4FDKWEC3-CB_nTHcE.js +0 -16
- package/dist/stateDiagram-v2-4FDKWEC3-Xkx17v6T.cjs +0 -1
- package/dist/timeline-definition-IT6M3QCI-BmGkYQiz.cjs +0 -61
- package/dist/timeline-definition-IT6M3QCI-Ck8zTt6w.js +0 -795
- package/dist/treemap-GDKQZRPO-B9sfERx8.js +0 -17922
- package/dist/treemap-GDKQZRPO-BVfJRs0Z.cjs +0 -160
- package/dist/xychartDiagram-PRI3JC2R-By_S8NzN.js +0 -1340
- package/dist/xychartDiagram-PRI3JC2R-CNfDrGxM.cjs +0 -7
|
@@ -0,0 +1,404 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "0.1.0",
|
|
3
|
+
"library": "sparkdesign",
|
|
4
|
+
"purpose": "Machine-readable design token ontology for AI agents choosing semantic styling without reading CSS internals first.",
|
|
5
|
+
"axes": {
|
|
6
|
+
"theme": {
|
|
7
|
+
"attribute": "data-theme",
|
|
8
|
+
"intent": "Controls color palette independently from layout density or geometry.",
|
|
9
|
+
"knownValues": [
|
|
10
|
+
"light",
|
|
11
|
+
"dark",
|
|
12
|
+
"light-parchment",
|
|
13
|
+
"dark-parchment"
|
|
14
|
+
],
|
|
15
|
+
"rules": [
|
|
16
|
+
"Do not infer layout density from data-theme.",
|
|
17
|
+
"Custom themes should define --token-color-* values and rely on theme-base.css mappings.",
|
|
18
|
+
"Components should consume --color-* semantic tokens rather than raw --token-color-* internals."
|
|
19
|
+
]
|
|
20
|
+
},
|
|
21
|
+
"style": {
|
|
22
|
+
"attribute": "data-style",
|
|
23
|
+
"intent": "Controls spacing, radius, and typography rhythm independently from color.",
|
|
24
|
+
"knownValues": [
|
|
25
|
+
"neutral",
|
|
26
|
+
"compact",
|
|
27
|
+
"soft",
|
|
28
|
+
"sharp",
|
|
29
|
+
"dense"
|
|
30
|
+
],
|
|
31
|
+
"rules": [
|
|
32
|
+
"Use neutral when no product density preference is known.",
|
|
33
|
+
"Use compact for efficiency-oriented workspaces that need tighter controls without becoming spreadsheet-dense.",
|
|
34
|
+
"Use dense for data-heavy UI where text-sm, line-height, spacing, and radius all need compression.",
|
|
35
|
+
"Use soft for airy, approachable, reading-friendly surfaces with larger radius and more breathing room.",
|
|
36
|
+
"Use sharp when square geometry and mono-like precision are a deliberate product direction."
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"families": {
|
|
41
|
+
"color.primary": {
|
|
42
|
+
"tokens": [
|
|
43
|
+
"--color-primary",
|
|
44
|
+
"--color-primary-hover",
|
|
45
|
+
"--color-primary-active",
|
|
46
|
+
"--color-primary-bg",
|
|
47
|
+
"--color-primary-bg-hover",
|
|
48
|
+
"--color-primary-border",
|
|
49
|
+
"--color-primary-border-hover",
|
|
50
|
+
"--color-primary-text",
|
|
51
|
+
"--color-primary-text-hover",
|
|
52
|
+
"--color-primary-text-active",
|
|
53
|
+
"--color-text-on-primary"
|
|
54
|
+
],
|
|
55
|
+
"intent": "Brand and primary action emphasis.",
|
|
56
|
+
"useFor": [
|
|
57
|
+
"Primary action buttons",
|
|
58
|
+
"Selected controls",
|
|
59
|
+
"Active navigation accents",
|
|
60
|
+
"Focused brand emphasis"
|
|
61
|
+
],
|
|
62
|
+
"avoidFor": [
|
|
63
|
+
"Large page backgrounds",
|
|
64
|
+
"Destructive actions",
|
|
65
|
+
"Neutral metadata",
|
|
66
|
+
"Multiple competing actions in the same group"
|
|
67
|
+
],
|
|
68
|
+
"agentRules": [
|
|
69
|
+
"Use only one primary action per decision surface.",
|
|
70
|
+
"Use --color-text-on-primary for text placed directly on --color-primary."
|
|
71
|
+
]
|
|
72
|
+
},
|
|
73
|
+
"color.text": {
|
|
74
|
+
"tokens": [
|
|
75
|
+
"--color-text",
|
|
76
|
+
"--color-text-secondary",
|
|
77
|
+
"--color-text-tertiary",
|
|
78
|
+
"--color-text-quaternary",
|
|
79
|
+
"--color-text-base"
|
|
80
|
+
],
|
|
81
|
+
"intent": "Readable hierarchy for foreground content.",
|
|
82
|
+
"useFor": [
|
|
83
|
+
"Body copy",
|
|
84
|
+
"Headings",
|
|
85
|
+
"Metadata",
|
|
86
|
+
"Disabled-looking low-emphasis support text"
|
|
87
|
+
],
|
|
88
|
+
"avoidFor": [
|
|
89
|
+
"Status semantics that need success, warning, error, or info color",
|
|
90
|
+
"Decorative accents"
|
|
91
|
+
],
|
|
92
|
+
"agentRules": [
|
|
93
|
+
"Use --color-text for primary readable content.",
|
|
94
|
+
"Use secondary and tertiary text only after hierarchy is established."
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
"color.background": {
|
|
98
|
+
"tokens": [
|
|
99
|
+
"--color-bg-base",
|
|
100
|
+
"--color-bg-container",
|
|
101
|
+
"--color-bg-elevated",
|
|
102
|
+
"--color-bg-layout",
|
|
103
|
+
"--color-bg-spotlight",
|
|
104
|
+
"--color-bg-mask",
|
|
105
|
+
"--color-bg-highlight",
|
|
106
|
+
"--color-bg-highlight-hover"
|
|
107
|
+
],
|
|
108
|
+
"intent": "Page, container, elevation, overlay, and spotlight surfaces.",
|
|
109
|
+
"useFor": [
|
|
110
|
+
"Application background",
|
|
111
|
+
"Cards and panels",
|
|
112
|
+
"Popover and modal surfaces",
|
|
113
|
+
"Overlay masks",
|
|
114
|
+
"Temporary highlight surfaces"
|
|
115
|
+
],
|
|
116
|
+
"avoidFor": [
|
|
117
|
+
"Text foreground",
|
|
118
|
+
"Status messages without semantic color",
|
|
119
|
+
"Arbitrary decorative blocks"
|
|
120
|
+
],
|
|
121
|
+
"agentRules": [
|
|
122
|
+
"Use --color-bg-layout for app-level backgrounds.",
|
|
123
|
+
"Use --color-bg-container or --color-bg-base for content surfaces.",
|
|
124
|
+
"Use --color-bg-mask only for modal, drawer, dialog, and popover overlays."
|
|
125
|
+
]
|
|
126
|
+
},
|
|
127
|
+
"color.border": {
|
|
128
|
+
"tokens": [
|
|
129
|
+
"--color-border",
|
|
130
|
+
"--color-border-secondary",
|
|
131
|
+
"--color-border-tertiary",
|
|
132
|
+
"--color-input",
|
|
133
|
+
"--color-ring"
|
|
134
|
+
],
|
|
135
|
+
"intent": "Separation, input affordance, and keyboard focus indication.",
|
|
136
|
+
"useFor": [
|
|
137
|
+
"Card and panel boundaries",
|
|
138
|
+
"Dividers",
|
|
139
|
+
"Input borders",
|
|
140
|
+
"Focus rings"
|
|
141
|
+
],
|
|
142
|
+
"avoidFor": [
|
|
143
|
+
"Primary semantic emphasis",
|
|
144
|
+
"Replacing spacing as the only separator"
|
|
145
|
+
],
|
|
146
|
+
"agentRules": [
|
|
147
|
+
"Use --color-ring for focus indication.",
|
|
148
|
+
"Prefer border-secondary or border-tertiary for low-emphasis separators."
|
|
149
|
+
]
|
|
150
|
+
},
|
|
151
|
+
"color.fill": {
|
|
152
|
+
"tokens": [
|
|
153
|
+
"--color-fill",
|
|
154
|
+
"--color-fill-secondary",
|
|
155
|
+
"--color-fill-tertiary",
|
|
156
|
+
"--color-fill-quaternary",
|
|
157
|
+
"--color-fill-disable",
|
|
158
|
+
"--color-accent",
|
|
159
|
+
"--color-muted"
|
|
160
|
+
],
|
|
161
|
+
"intent": "Subtle non-surface fills for controls, hover areas, muted chips, and disabled states.",
|
|
162
|
+
"useFor": [
|
|
163
|
+
"Hover backgrounds",
|
|
164
|
+
"Secondary controls",
|
|
165
|
+
"Muted chips",
|
|
166
|
+
"Disabled fill areas"
|
|
167
|
+
],
|
|
168
|
+
"avoidFor": [
|
|
169
|
+
"Primary page background",
|
|
170
|
+
"High-risk status feedback",
|
|
171
|
+
"Readable foreground text"
|
|
172
|
+
],
|
|
173
|
+
"agentRules": [
|
|
174
|
+
"Use fill tokens to support interaction affordance without adding new brand colors.",
|
|
175
|
+
"Use --color-fill-disable only when disabled semantics are explicit."
|
|
176
|
+
]
|
|
177
|
+
},
|
|
178
|
+
"color.semantic": {
|
|
179
|
+
"tokens": [
|
|
180
|
+
"--color-link",
|
|
181
|
+
"--color-error",
|
|
182
|
+
"--color-error-hover",
|
|
183
|
+
"--color-error-bg",
|
|
184
|
+
"--color-error-bg-hover",
|
|
185
|
+
"--color-error-border",
|
|
186
|
+
"--color-info",
|
|
187
|
+
"--color-info-hover",
|
|
188
|
+
"--color-info-bg",
|
|
189
|
+
"--color-info-bg-hover",
|
|
190
|
+
"--color-info-border",
|
|
191
|
+
"--color-success",
|
|
192
|
+
"--color-success-hover",
|
|
193
|
+
"--color-success-bg",
|
|
194
|
+
"--color-success-bg-hover",
|
|
195
|
+
"--color-success-border",
|
|
196
|
+
"--color-warning",
|
|
197
|
+
"--color-warning-hover",
|
|
198
|
+
"--color-warning-bg",
|
|
199
|
+
"--color-warning-bg-hover",
|
|
200
|
+
"--color-warning-border"
|
|
201
|
+
],
|
|
202
|
+
"intent": "Meaningful status communication.",
|
|
203
|
+
"useFor": [
|
|
204
|
+
"Validation errors",
|
|
205
|
+
"Warnings",
|
|
206
|
+
"Success confirmations",
|
|
207
|
+
"Informational callouts",
|
|
208
|
+
"Links"
|
|
209
|
+
],
|
|
210
|
+
"avoidFor": [
|
|
211
|
+
"Pure decoration",
|
|
212
|
+
"Brand emphasis",
|
|
213
|
+
"Dense rainbow categorization without labels"
|
|
214
|
+
],
|
|
215
|
+
"agentRules": [
|
|
216
|
+
"Do not rely on color alone; pair semantic color with text or icon labels.",
|
|
217
|
+
"Use background and border companions for Alert-like surfaces."
|
|
218
|
+
]
|
|
219
|
+
},
|
|
220
|
+
"color.accent": {
|
|
221
|
+
"tokens": [
|
|
222
|
+
"--color-pink",
|
|
223
|
+
"--color-pink-bg",
|
|
224
|
+
"--color-pink-bg-hover",
|
|
225
|
+
"--color-purple",
|
|
226
|
+
"--color-purple-bg",
|
|
227
|
+
"--color-purple-bg-hover",
|
|
228
|
+
"--color-yellow",
|
|
229
|
+
"--color-yellow-bg",
|
|
230
|
+
"--color-yellow-bg-hover",
|
|
231
|
+
"--color-orange",
|
|
232
|
+
"--color-orange-bg",
|
|
233
|
+
"--color-orange-bg-hover",
|
|
234
|
+
"--color-teal",
|
|
235
|
+
"--color-teal-bg",
|
|
236
|
+
"--color-teal-bg-hover",
|
|
237
|
+
"--color-blue",
|
|
238
|
+
"--color-blue-bg",
|
|
239
|
+
"--color-blue-bg-hover",
|
|
240
|
+
"--color-mauve",
|
|
241
|
+
"--color-mauve-bg",
|
|
242
|
+
"--color-mauve-bg-hover",
|
|
243
|
+
"--color-slate",
|
|
244
|
+
"--color-slate-bg",
|
|
245
|
+
"--color-slate-bg-hover",
|
|
246
|
+
"--color-lavender",
|
|
247
|
+
"--color-lavender-bg",
|
|
248
|
+
"--color-lavender-bg-hover",
|
|
249
|
+
"--color-sage",
|
|
250
|
+
"--color-sage-bg",
|
|
251
|
+
"--color-sage-bg-hover"
|
|
252
|
+
],
|
|
253
|
+
"intent": "Categorical accents for tags, files, generated artifacts, or non-status grouping.",
|
|
254
|
+
"useFor": [
|
|
255
|
+
"Category tags",
|
|
256
|
+
"File type accents",
|
|
257
|
+
"Non-critical visual grouping",
|
|
258
|
+
"Generated artifact previews"
|
|
259
|
+
],
|
|
260
|
+
"avoidFor": [
|
|
261
|
+
"Primary actions",
|
|
262
|
+
"Error, warning, success, or info status",
|
|
263
|
+
"Long-form text"
|
|
264
|
+
],
|
|
265
|
+
"agentRules": [
|
|
266
|
+
"Use accents sparingly and label categories explicitly.",
|
|
267
|
+
"Do not invent new accent colors in generated UI."
|
|
268
|
+
]
|
|
269
|
+
},
|
|
270
|
+
"spacing": {
|
|
271
|
+
"tokens": [
|
|
272
|
+
"--spacing-0",
|
|
273
|
+
"--spacing-px",
|
|
274
|
+
"--spacing-0.5",
|
|
275
|
+
"--spacing-1",
|
|
276
|
+
"--spacing-1.5",
|
|
277
|
+
"--spacing-2",
|
|
278
|
+
"--spacing-2.5",
|
|
279
|
+
"--spacing-3",
|
|
280
|
+
"--spacing-3.5",
|
|
281
|
+
"--spacing-4",
|
|
282
|
+
"--spacing-5",
|
|
283
|
+
"--spacing-6",
|
|
284
|
+
"--spacing-8",
|
|
285
|
+
"--spacing-10",
|
|
286
|
+
"--spacing-12",
|
|
287
|
+
"--spacing-16",
|
|
288
|
+
"--spacing-20",
|
|
289
|
+
"--spacing-24"
|
|
290
|
+
],
|
|
291
|
+
"intent": "Rhythm and density controlled by data-style.",
|
|
292
|
+
"useFor": [
|
|
293
|
+
"Component padding",
|
|
294
|
+
"Stack gaps",
|
|
295
|
+
"Grid gutters",
|
|
296
|
+
"Inline icon-label spacing"
|
|
297
|
+
],
|
|
298
|
+
"avoidFor": [
|
|
299
|
+
"One-off pixel nudges",
|
|
300
|
+
"Encoding visual hierarchy only through whitespace",
|
|
301
|
+
"Breaking sibling rhythm without a reason"
|
|
302
|
+
],
|
|
303
|
+
"agentRules": [
|
|
304
|
+
"Prefer existing Tailwind spacing utilities mapped to Spark tokens.",
|
|
305
|
+
"Use larger spacing for section rhythm and smaller spacing for control internals."
|
|
306
|
+
]
|
|
307
|
+
},
|
|
308
|
+
"radius": {
|
|
309
|
+
"tokens": [
|
|
310
|
+
"--radius-none",
|
|
311
|
+
"--radius-sm",
|
|
312
|
+
"--radius-md",
|
|
313
|
+
"--radius-lg",
|
|
314
|
+
"--radius-xl",
|
|
315
|
+
"--radius-2xl",
|
|
316
|
+
"--radius-3xl",
|
|
317
|
+
"--radius-full"
|
|
318
|
+
],
|
|
319
|
+
"intent": "Geometry and softness controlled by data-style.",
|
|
320
|
+
"useFor": [
|
|
321
|
+
"Buttons",
|
|
322
|
+
"Cards",
|
|
323
|
+
"Inputs",
|
|
324
|
+
"Pills",
|
|
325
|
+
"Panels"
|
|
326
|
+
],
|
|
327
|
+
"avoidFor": [
|
|
328
|
+
"Mixing unrelated radii in a single component",
|
|
329
|
+
"Using full radius for large rectangular panels",
|
|
330
|
+
"Overriding sharp or dense styles with arbitrary rounded values"
|
|
331
|
+
],
|
|
332
|
+
"agentRules": [
|
|
333
|
+
"Let data-style drive geometry unless a component has a documented exception.",
|
|
334
|
+
"Use --radius-full only for pills, avatars, and circular controls."
|
|
335
|
+
]
|
|
336
|
+
},
|
|
337
|
+
"typography": {
|
|
338
|
+
"tokens": [
|
|
339
|
+
"--font-size-xs",
|
|
340
|
+
"--font-size-sm",
|
|
341
|
+
"--font-size-base",
|
|
342
|
+
"--font-size-lg",
|
|
343
|
+
"--font-size-xl",
|
|
344
|
+
"--font-size-2xl",
|
|
345
|
+
"--font-size-3xl",
|
|
346
|
+
"--font-size-4xl",
|
|
347
|
+
"--font-size-5xl",
|
|
348
|
+
"--font-size-6xl",
|
|
349
|
+
"--font-size-7xl",
|
|
350
|
+
"--font-size-8xl",
|
|
351
|
+
"--font-size-9xl"
|
|
352
|
+
],
|
|
353
|
+
"intent": "Readable type hierarchy controlled by data-style.",
|
|
354
|
+
"useFor": [
|
|
355
|
+
"Body text",
|
|
356
|
+
"Labels",
|
|
357
|
+
"Section headings",
|
|
358
|
+
"Display headings"
|
|
359
|
+
],
|
|
360
|
+
"avoidFor": [
|
|
361
|
+
"Decorative scale jumps without information hierarchy",
|
|
362
|
+
"Tiny text for required content",
|
|
363
|
+
"Long paragraphs above base size without layout reason"
|
|
364
|
+
],
|
|
365
|
+
"agentRules": [
|
|
366
|
+
"Use base or sm for dense application text.",
|
|
367
|
+
"Use larger sizes to express hierarchy, not decoration."
|
|
368
|
+
]
|
|
369
|
+
},
|
|
370
|
+
"motion": {
|
|
371
|
+
"tokens": [
|
|
372
|
+
"--motion-duration-fast",
|
|
373
|
+
"--motion-duration-base",
|
|
374
|
+
"--motion-duration-slow",
|
|
375
|
+
"--motion-ease-standard",
|
|
376
|
+
"--motion-ease-emphasized",
|
|
377
|
+
"--motion-ease-out"
|
|
378
|
+
],
|
|
379
|
+
"intent": "Purposeful feedback and state transition timing.",
|
|
380
|
+
"useFor": [
|
|
381
|
+
"Hover and press feedback",
|
|
382
|
+
"Disclosure transitions",
|
|
383
|
+
"Modal and popover entry/exit",
|
|
384
|
+
"Streaming or generation state changes"
|
|
385
|
+
],
|
|
386
|
+
"avoidFor": [
|
|
387
|
+
"Purely decorative delay",
|
|
388
|
+
"Animating large layout shifts without user benefit",
|
|
389
|
+
"Long-running loops that distract from task work"
|
|
390
|
+
],
|
|
391
|
+
"agentRules": [
|
|
392
|
+
"Use fast durations for control feedback.",
|
|
393
|
+
"Use base or slow only for surface transitions that clarify spatial change."
|
|
394
|
+
]
|
|
395
|
+
}
|
|
396
|
+
},
|
|
397
|
+
"forbiddenPatterns": [
|
|
398
|
+
"Hard-coded hex colors in component className or style props.",
|
|
399
|
+
"Raw rgba overlays when --color-bg-mask or a semantic token exists.",
|
|
400
|
+
"Arbitrary radius values that fight data-style.",
|
|
401
|
+
"One-off spacing values that break sibling rhythm.",
|
|
402
|
+
"Using accent colors to communicate status without labels."
|
|
403
|
+
]
|
|
404
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* ============================================
|
|
2
2
|
* Preset: Compact - 紧凑风格
|
|
3
|
-
*
|
|
3
|
+
* 小幅压缩控件节奏,适合效率型工作台
|
|
4
4
|
* ============================================ */
|
|
5
5
|
|
|
6
6
|
[data-style="compact"] {
|
|
@@ -15,14 +15,25 @@
|
|
|
15
15
|
--radius-2xl: 12px;
|
|
16
16
|
--radius-3xl: 16px;
|
|
17
17
|
|
|
18
|
-
/* Font Size (
|
|
19
|
-
--font-size-
|
|
20
|
-
--font-size-
|
|
21
|
-
--font-size-
|
|
18
|
+
/* Font Size (略小但保持阅读舒适) */
|
|
19
|
+
--font-size-xs: 12px;
|
|
20
|
+
--font-size-xs--line-height: 16px;
|
|
21
|
+
--font-size-sm: 13px;
|
|
22
|
+
--font-size-sm--line-height: 18px;
|
|
23
|
+
--font-size-base: 14px;
|
|
24
|
+
--font-size-base--line-height: 20px;
|
|
25
|
+
--font-size-lg: 15px;
|
|
26
|
+
--font-size-lg--line-height: 22px;
|
|
27
|
+
--font-size-xl: 17px;
|
|
28
|
+
--font-size-xl--line-height: 24px;
|
|
22
29
|
--font-size-2xl: 18px;
|
|
30
|
+
--font-size-2xl--line-height: 24px;
|
|
23
31
|
--font-size-3xl: 22px;
|
|
32
|
+
--font-size-3xl--line-height: 28px;
|
|
24
33
|
--font-size-4xl: 28px;
|
|
34
|
+
--font-size-4xl--line-height: 32px;
|
|
25
35
|
--font-size-5xl: 34px;
|
|
36
|
+
--font-size-5xl--line-height: 36px;
|
|
26
37
|
--font-size-6xl: 44px;
|
|
27
38
|
--font-size-7xl: 56px;
|
|
28
39
|
--font-size-8xl: 64px;
|
|
@@ -49,14 +49,25 @@
|
|
|
49
49
|
/* ChatInput 特殊配置 */
|
|
50
50
|
--chat-status-overlap: 4px;
|
|
51
51
|
|
|
52
|
-
/* Font Size (
|
|
53
|
-
--font-size-
|
|
52
|
+
/* Font Size (信息密集:主力 text-sm 也压缩) */
|
|
53
|
+
--font-size-xs: 11px;
|
|
54
|
+
--font-size-xs--line-height: 14px;
|
|
55
|
+
--font-size-sm: 12px;
|
|
56
|
+
--font-size-sm--line-height: 16px;
|
|
57
|
+
--font-size-base: 13px;
|
|
58
|
+
--font-size-base--line-height: 18px;
|
|
54
59
|
--font-size-lg: 14px;
|
|
60
|
+
--font-size-lg--line-height: 20px;
|
|
55
61
|
--font-size-xl: 14px;
|
|
62
|
+
--font-size-xl--line-height: 20px;
|
|
56
63
|
--font-size-2xl: 16px;
|
|
64
|
+
--font-size-2xl--line-height: 22px;
|
|
57
65
|
--font-size-3xl: 18px;
|
|
66
|
+
--font-size-3xl--line-height: 24px;
|
|
58
67
|
--font-size-4xl: 22px;
|
|
68
|
+
--font-size-4xl--line-height: 28px;
|
|
59
69
|
--font-size-5xl: 28px;
|
|
70
|
+
--font-size-5xl--line-height: 32px;
|
|
60
71
|
--font-size-6xl: 36px;
|
|
61
72
|
--font-size-7xl: 44px;
|
|
62
73
|
--font-size-8xl: 56px;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
/* ============================================
|
|
2
2
|
* Preset: Sharp - 锐利风格
|
|
3
|
-
* 几何精度,无圆角 + 等宽字体
|
|
3
|
+
* 几何精度,无圆角 + 等宽字体 + 硬朗节奏
|
|
4
4
|
* ============================================ */
|
|
5
5
|
|
|
6
6
|
[data-style="sharp"] {
|
|
7
|
-
/* Spacing (
|
|
7
|
+
/* Spacing (方正、克制,少量压缩) */
|
|
8
8
|
--spacing-3: 10px;
|
|
9
9
|
--spacing-4: 14px;
|
|
10
|
+
--spacing-5: 18px;
|
|
11
|
+
--spacing-6: 22px;
|
|
10
12
|
--spacing-9: 32px;
|
|
11
13
|
--spacing-11: 40px;
|
|
12
14
|
|
|
@@ -25,13 +27,23 @@
|
|
|
25
27
|
--font-sans: var(--config-font-mono);
|
|
26
28
|
font-family: var(--font-sans);
|
|
27
29
|
|
|
28
|
-
/* Font Size (
|
|
29
|
-
--font-size-
|
|
30
|
-
--font-size-
|
|
31
|
-
--font-size-
|
|
30
|
+
/* Font Size (工程感:略紧、等宽、层级清楚) */
|
|
31
|
+
--font-size-xs: 12px;
|
|
32
|
+
--font-size-xs--line-height: 16px;
|
|
33
|
+
--font-size-sm: 13px;
|
|
34
|
+
--font-size-sm--line-height: 18px;
|
|
35
|
+
--font-size-base: 14px;
|
|
36
|
+
--font-size-base--line-height: 20px;
|
|
37
|
+
--font-size-lg: 15px;
|
|
38
|
+
--font-size-lg--line-height: 22px;
|
|
39
|
+
--font-size-xl: 17px;
|
|
40
|
+
--font-size-xl--line-height: 24px;
|
|
32
41
|
--font-size-2xl: 18px;
|
|
42
|
+
--font-size-2xl--line-height: 24px;
|
|
33
43
|
--font-size-3xl: 22px;
|
|
44
|
+
--font-size-3xl--line-height: 28px;
|
|
34
45
|
--font-size-4xl: 28px;
|
|
46
|
+
--font-size-4xl--line-height: 32px;
|
|
35
47
|
--font-size-5xl: 34px;
|
|
36
48
|
--font-size-6xl: 44px;
|
|
37
49
|
--font-size-7xl: 56px;
|
|
@@ -4,7 +4,17 @@
|
|
|
4
4
|
* ============================================ */
|
|
5
5
|
|
|
6
6
|
[data-style="soft"] {
|
|
7
|
-
/*
|
|
7
|
+
/* Spacing (舒展留白) */
|
|
8
|
+
--spacing-3: 14px;
|
|
9
|
+
--spacing-4: 18px;
|
|
10
|
+
--spacing-5: 24px;
|
|
11
|
+
--spacing-6: 28px;
|
|
12
|
+
--spacing-8: 36px;
|
|
13
|
+
--spacing-9: 40px;
|
|
14
|
+
--spacing-11: 48px;
|
|
15
|
+
--spacing-12: 56px;
|
|
16
|
+
|
|
17
|
+
/* Radius (大圆角) */
|
|
8
18
|
--radius-sm: 8px;
|
|
9
19
|
--radius-DEFAULT: 12px;
|
|
10
20
|
--radius-md: 12px;
|
|
@@ -13,4 +23,16 @@
|
|
|
13
23
|
--radius-2xl: 24px;
|
|
14
24
|
--radius-3xl: 28px;
|
|
15
25
|
--radius: var(--radius-DEFAULT);
|
|
26
|
+
|
|
27
|
+
/* Font Size (阅读舒适,行高更松) */
|
|
28
|
+
--font-size-sm: 14px;
|
|
29
|
+
--font-size-sm--line-height: 22px;
|
|
30
|
+
--font-size-base: 15px;
|
|
31
|
+
--font-size-base--line-height: 24px;
|
|
32
|
+
--font-size-lg: 17px;
|
|
33
|
+
--font-size-lg--line-height: 26px;
|
|
34
|
+
--font-size-xl: 20px;
|
|
35
|
+
--font-size-xl--line-height: 28px;
|
|
36
|
+
--font-size-2xl: 22px;
|
|
37
|
+
--font-size-2xl--line-height: 30px;
|
|
16
38
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* [WHO]: Alert — inline callout surface (info / warning / success / destructive).
|
|
3
|
+
* [FROM]: React + CVA + `@/lib/utils` cn.
|
|
4
|
+
* [TO]: sparkdesign package consumers; output of CLI `add alert` when registered.
|
|
5
|
+
* [HERE]: registry/basic/alert.tsx — Spark Design source; keep aligned with the main library.
|
|
6
|
+
*
|
|
7
|
+
* [PROTOCOL]:
|
|
8
|
+
* 1. Keep this P3 header in sync when the public contract changes.
|
|
9
|
+
* 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
|
|
10
|
+
* 3. Follow design tokens and explicit type exports.
|
|
11
|
+
*/
|
|
12
|
+
import * as React from 'react';
|
|
13
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
14
|
+
declare const alertVariants: (props?: ({
|
|
15
|
+
variant?: "default" | "destructive" | "warning" | "success" | "info" | null | undefined;
|
|
16
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
17
|
+
export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
|
|
18
|
+
}
|
|
19
|
+
declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
export type AlertTitleProps = React.HTMLAttributes<HTMLDivElement>;
|
|
23
|
+
export type AlertDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
24
|
+
export { Alert, AlertTitle, AlertDescription, alertVariants };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* [WHO]: AspectRatio — keep content at a fixed aspect ratio via @radix-ui/react-aspect-ratio.
|
|
3
|
+
* [FROM]: @radix-ui/react-aspect-ratio.
|
|
4
|
+
* [TO]: sparkdesign package consumers; output of CLI `add aspect-ratio` when registered.
|
|
5
|
+
* [HERE]: registry/basic/aspect-ratio.tsx — Spark Design source; keep aligned with the main library.
|
|
6
|
+
*
|
|
7
|
+
* [PROTOCOL]:
|
|
8
|
+
* 1. Keep this P3 header in sync when the public contract changes.
|
|
9
|
+
* 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
|
|
10
|
+
* 3. Follow design tokens and explicit type exports.
|
|
11
|
+
*/
|
|
12
|
+
import type * as React from 'react';
|
|
13
|
+
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
|
|
14
|
+
declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>;
|
|
16
|
+
export { AspectRatio };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* [WHO]: Breadcrumb — navigation trail with Separator / Ellipsis support.
|
|
3
|
+
* [FROM]: React + `@/lib/utils` cn + local icons-inline (ArrowRightSLine via ArrowRightLine fallback).
|
|
4
|
+
* [TO]: sparkdesign package consumers; output of CLI `add breadcrumb` when registered.
|
|
5
|
+
* [HERE]: registry/basic/breadcrumb.tsx — Spark Design source; keep aligned with the main library.
|
|
6
|
+
*
|
|
7
|
+
* [PROTOCOL]:
|
|
8
|
+
* 1. Keep this P3 header in sync when the public contract changes.
|
|
9
|
+
* 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
|
|
10
|
+
* 3. Follow design tokens and explicit type exports.
|
|
11
|
+
*/
|
|
12
|
+
import * as React from 'react';
|
|
13
|
+
declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
14
|
+
separator?: React.ReactNode;
|
|
15
|
+
} & React.RefAttributes<HTMLElement>>;
|
|
16
|
+
declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
|
|
17
|
+
declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
|
|
18
|
+
declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
19
|
+
asChild?: boolean;
|
|
20
|
+
} & React.RefAttributes<HTMLAnchorElement>>;
|
|
21
|
+
declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
22
|
+
declare const BreadcrumbSeparator: React.FC<React.ComponentPropsWithoutRef<'li'>>;
|
|
23
|
+
declare const BreadcrumbEllipsis: React.FC<React.ComponentPropsWithoutRef<'span'>>;
|
|
24
|
+
export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* [WHO]: ButtonGroup — visually join adjacent Button / IconButton siblings into a single control group, plus inline label / separator helpers.
|
|
3
|
+
* [FROM]: React + CVA + `@/lib/utils` cn.
|
|
4
|
+
* [TO]: sparkdesign package consumers; output of CLI `add button-group` when registered.
|
|
5
|
+
* [HERE]: registry/basic/button-group.tsx — Spark Design source; keep aligned with the main library.
|
|
6
|
+
*
|
|
7
|
+
* [PROTOCOL]:
|
|
8
|
+
* 1. Keep this P3 header in sync when the public contract changes.
|
|
9
|
+
* 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
|
|
10
|
+
* 3. Follow design tokens and explicit type exports.
|
|
11
|
+
*/
|
|
12
|
+
import * as React from 'react';
|
|
13
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
14
|
+
declare const buttonGroupVariants: (props?: ({
|
|
15
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
16
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
17
|
+
export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof buttonGroupVariants> {
|
|
18
|
+
}
|
|
19
|
+
declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
export type ButtonGroupTextProps = React.HTMLAttributes<HTMLDivElement>;
|
|
21
|
+
declare const ButtonGroupText: React.ForwardRefExoticComponent<ButtonGroupTextProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
export interface ButtonGroupSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
23
|
+
orientation?: 'horizontal' | 'vertical';
|
|
24
|
+
}
|
|
25
|
+
declare const ButtonGroupSeparator: React.ForwardRefExoticComponent<ButtonGroupSeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
26
|
+
export { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, buttonGroupVariants };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "primary" | "secondary" | "tertiary" | "ghost" | "text" | null | undefined;
|
|
4
|
+
variant?: "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "text" | null | undefined;
|
|
5
5
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
6
|
rounded?: "square" | "pill" | null | undefined;
|
|
7
7
|
textOnly?: boolean | null | undefined;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* [WHO]: Calendar and CalendarDayButton date grid primitives.
|
|
3
|
+
* [FROM]: React, react-day-picker, registry/basic/button, registry/lib/utils.
|
|
4
|
+
* [TO]: sparkdesign package consumers; Showcase; CLI registry copies.
|
|
5
|
+
* [HERE]: registry/basic/calendar.tsx — tokenized shadcn-derived calendar primitive.
|
|
6
|
+
*
|
|
7
|
+
* [PROTOCOL]:
|
|
8
|
+
* 1. Keep this P3 header in sync when the public contract changes.
|
|
9
|
+
* 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
|
|
10
|
+
* 3. Follow design tokens and explicit type exports.
|
|
11
|
+
*/
|
|
12
|
+
import * as React from "react";
|
|
13
|
+
import { DayPicker, type DayButton } from "react-day-picker";
|
|
14
|
+
import { Button } from "./button";
|
|
15
|
+
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
|
|
16
|
+
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
|
17
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
|
|
19
|
+
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
|
20
|
+
};
|
|
21
|
+
declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export { Calendar, CalendarDayButton };
|