@rtkelly-labs/design-system 0.0.0-bootstrap.0 → 0.16.0-dev.0.37dedac

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.
Files changed (284) hide show
  1. package/CHANGELOG.md +347 -0
  2. package/LICENSE +21 -0
  3. package/README.md +317 -2
  4. package/dist/components/AlertDialog.js +95 -0
  5. package/dist/components/AlertDialog.js.map +1 -0
  6. package/dist/components/AppShell.js +261 -0
  7. package/dist/components/AppShell.js.map +1 -0
  8. package/dist/components/AsciiDivider.js +8 -0
  9. package/dist/components/AsciiDivider.js.map +1 -0
  10. package/dist/components/AsciiGauge.js +130 -0
  11. package/dist/components/AsciiGauge.js.map +1 -0
  12. package/dist/components/Avatar.js +87 -0
  13. package/dist/components/Avatar.js.map +1 -0
  14. package/dist/components/Badge.js +25 -0
  15. package/dist/components/Badge.js.map +1 -0
  16. package/dist/components/BarChart.js +288 -0
  17. package/dist/components/BarChart.js.map +1 -0
  18. package/dist/components/BracketText.js +23 -0
  19. package/dist/components/BracketText.js.map +1 -0
  20. package/dist/components/BulletChart.js +50 -0
  21. package/dist/components/BulletChart.js.map +1 -0
  22. package/dist/components/Button.js +130 -0
  23. package/dist/components/Button.js.map +1 -0
  24. package/dist/components/Card.js +181 -0
  25. package/dist/components/Card.js.map +1 -0
  26. package/dist/components/ChartTooltip.js +54 -0
  27. package/dist/components/ChartTooltip.js.map +1 -0
  28. package/dist/components/Checkbox.js +55 -0
  29. package/dist/components/Checkbox.js.map +1 -0
  30. package/dist/components/ColophonCard.js +122 -0
  31. package/dist/components/ColophonCard.js.map +1 -0
  32. package/dist/components/DataTable.js +299 -0
  33. package/dist/components/DataTable.js.map +1 -0
  34. package/dist/components/Divider.js +42 -0
  35. package/dist/components/Divider.js.map +1 -0
  36. package/dist/components/Drawer.js +81 -0
  37. package/dist/components/Drawer.js.map +1 -0
  38. package/dist/components/EmptyState.js +39 -0
  39. package/dist/components/EmptyState.js.map +1 -0
  40. package/dist/components/ErrorSummary.js +122 -0
  41. package/dist/components/ErrorSummary.js.map +1 -0
  42. package/dist/components/Fieldset.js +37 -0
  43. package/dist/components/Fieldset.js.map +1 -0
  44. package/dist/components/Glyph.js +60 -0
  45. package/dist/components/Glyph.js.map +1 -0
  46. package/dist/components/Input.js +111 -0
  47. package/dist/components/Input.js.map +1 -0
  48. package/dist/components/LinkProvider.js +76 -0
  49. package/dist/components/LinkProvider.js.map +1 -0
  50. package/dist/components/Menu.js +144 -0
  51. package/dist/components/Menu.js.map +1 -0
  52. package/dist/components/MetadataGrid.js +184 -0
  53. package/dist/components/MetadataGrid.js.map +1 -0
  54. package/dist/components/MobileNav.js +120 -0
  55. package/dist/components/MobileNav.js.map +1 -0
  56. package/dist/components/Modal.js +79 -0
  57. package/dist/components/Modal.js.map +1 -0
  58. package/dist/components/NerdIcon.js +177 -0
  59. package/dist/components/NerdIcon.js.map +1 -0
  60. package/dist/components/NoteBlock.js +84 -0
  61. package/dist/components/NoteBlock.js.map +1 -0
  62. package/dist/components/PageHeader.js +34 -0
  63. package/dist/components/PageHeader.js.map +1 -0
  64. package/dist/components/PageTitle.js +21 -0
  65. package/dist/components/PageTitle.js.map +1 -0
  66. package/dist/components/Pagination.js +96 -0
  67. package/dist/components/Pagination.js.map +1 -0
  68. package/dist/components/Popover.js +87 -0
  69. package/dist/components/Popover.js.map +1 -0
  70. package/dist/components/Progress.js +83 -0
  71. package/dist/components/Progress.js.map +1 -0
  72. package/dist/components/RadioGroup.js +74 -0
  73. package/dist/components/RadioGroup.js.map +1 -0
  74. package/dist/components/ReportDocument.js +75 -0
  75. package/dist/components/ReportDocument.js.map +1 -0
  76. package/dist/components/SectionContainer.js +18 -0
  77. package/dist/components/SectionContainer.js.map +1 -0
  78. package/dist/components/Select.js +199 -0
  79. package/dist/components/Select.js.map +1 -0
  80. package/dist/components/SiteFooter.js +29 -0
  81. package/dist/components/SiteFooter.js.map +1 -0
  82. package/dist/components/SiteHeader.js +59 -0
  83. package/dist/components/SiteHeader.js.map +1 -0
  84. package/dist/components/SiteNav.js +141 -0
  85. package/dist/components/SiteNav.js.map +1 -0
  86. package/dist/components/Skeleton.js +51 -0
  87. package/dist/components/Skeleton.js.map +1 -0
  88. package/dist/components/SocialIcon.js +77 -0
  89. package/dist/components/SocialIcon.js.map +1 -0
  90. package/dist/components/Sparkline.js +104 -0
  91. package/dist/components/Sparkline.js.map +1 -0
  92. package/dist/components/Spinner.js +65 -0
  93. package/dist/components/Spinner.js.map +1 -0
  94. package/dist/components/StatCard.js +53 -0
  95. package/dist/components/StatCard.js.map +1 -0
  96. package/dist/components/StatusPage.js +99 -0
  97. package/dist/components/StatusPage.js.map +1 -0
  98. package/dist/components/Swatch.js +55 -0
  99. package/dist/components/Swatch.js.map +1 -0
  100. package/dist/components/Switch.js +53 -0
  101. package/dist/components/Switch.js.map +1 -0
  102. package/dist/components/TLDR.js +53 -0
  103. package/dist/components/TLDR.js.map +1 -0
  104. package/dist/components/Table.js +155 -0
  105. package/dist/components/Table.js.map +1 -0
  106. package/dist/components/Tabs.js +325 -0
  107. package/dist/components/Tabs.js.map +1 -0
  108. package/dist/components/Tag.js +19 -0
  109. package/dist/components/Tag.js.map +1 -0
  110. package/dist/components/TelemetryGauge.js +112 -0
  111. package/dist/components/TelemetryGauge.js.map +1 -0
  112. package/dist/components/ThemeProvider.js +87 -0
  113. package/dist/components/ThemeProvider.js.map +1 -0
  114. package/dist/components/TickerTape.js +196 -0
  115. package/dist/components/TickerTape.js.map +1 -0
  116. package/dist/components/Toast.js +200 -0
  117. package/dist/components/Toast.js.map +1 -0
  118. package/dist/components/Tooltip.js +69 -0
  119. package/dist/components/Tooltip.js.map +1 -0
  120. package/dist/components/TrackCard.js +206 -0
  121. package/dist/components/TrackCard.js.map +1 -0
  122. package/dist/components/blog/BlogPost.js +116 -0
  123. package/dist/components/blog/BlogPost.js.map +1 -0
  124. package/dist/components/blog/LoremIpsumPost.js +62 -0
  125. package/dist/components/blog/LoremIpsumPost.js.map +1 -0
  126. package/dist/components/blog/author.js +25 -0
  127. package/dist/components/blog/author.js.map +1 -0
  128. package/dist/components/booleanControl.js +50 -0
  129. package/dist/components/booleanControl.js.map +1 -0
  130. package/dist/components/dialogPopupRef.js +28 -0
  131. package/dist/components/dialogPopupRef.js.map +1 -0
  132. package/dist/components/dialogSurface.js +75 -0
  133. package/dist/components/dialogSurface.js.map +1 -0
  134. package/dist/components/docs/AnchorHeading.js +80 -0
  135. package/dist/components/docs/AnchorHeading.js.map +1 -0
  136. package/dist/components/docs/Breadcrumbs.js +26 -0
  137. package/dist/components/docs/Breadcrumbs.js.map +1 -0
  138. package/dist/components/docs/CodeBlock.js +63 -0
  139. package/dist/components/docs/CodeBlock.js.map +1 -0
  140. package/dist/components/docs/CodeTabs.js +71 -0
  141. package/dist/components/docs/CodeTabs.js.map +1 -0
  142. package/dist/components/docs/DocPager.js +28 -0
  143. package/dist/components/docs/DocPager.js.map +1 -0
  144. package/dist/components/docs/DocsHeader.js +124 -0
  145. package/dist/components/docs/DocsHeader.js.map +1 -0
  146. package/dist/components/docs/DocsLayout.js +61 -0
  147. package/dist/components/docs/DocsLayout.js.map +1 -0
  148. package/dist/components/docs/DocsLinkProvider.js +25 -0
  149. package/dist/components/docs/DocsLinkProvider.js.map +1 -0
  150. package/dist/components/docs/DocsSidebar.js +147 -0
  151. package/dist/components/docs/DocsSidebar.js.map +1 -0
  152. package/dist/components/docs/Prose.js +56 -0
  153. package/dist/components/docs/Prose.js.map +1 -0
  154. package/dist/components/docs/TableOfContents.js +71 -0
  155. package/dist/components/docs/TableOfContents.js.map +1 -0
  156. package/dist/components/docs/codeTabsStore.js +75 -0
  157. package/dist/components/docs/codeTabsStore.js.map +1 -0
  158. package/dist/components/docs/figures/ActivityGrid.js +116 -0
  159. package/dist/components/docs/figures/ActivityGrid.js.map +1 -0
  160. package/dist/components/docs/figures/BeforeAfter.js +64 -0
  161. package/dist/components/docs/figures/BeforeAfter.js.map +1 -0
  162. package/dist/components/docs/figures/ChangeSummary.js +74 -0
  163. package/dist/components/docs/figures/ChangeSummary.js.map +1 -0
  164. package/dist/components/docs/figures/Decision.js +34 -0
  165. package/dist/components/docs/figures/Decision.js.map +1 -0
  166. package/dist/components/docs/figures/DrawingSheet.js +37 -0
  167. package/dist/components/docs/figures/DrawingSheet.js.map +1 -0
  168. package/dist/components/docs/figures/FigureFrame.js +226 -0
  169. package/dist/components/docs/figures/FigureFrame.js.map +1 -0
  170. package/dist/components/docs/figures/FileChangeTree.js +134 -0
  171. package/dist/components/docs/figures/FileChangeTree.js.map +1 -0
  172. package/dist/components/docs/figures/FlowDiagram.js +82 -0
  173. package/dist/components/docs/figures/FlowDiagram.js.map +1 -0
  174. package/dist/components/docs/figures/GanttChart.js +79 -0
  175. package/dist/components/docs/figures/GanttChart.js.map +1 -0
  176. package/dist/components/docs/figures/IndexedSection.js +45 -0
  177. package/dist/components/docs/figures/IndexedSection.js.map +1 -0
  178. package/dist/components/docs/figures/MetricStrip.js +23 -0
  179. package/dist/components/docs/figures/MetricStrip.js.map +1 -0
  180. package/dist/components/docs/figures/Steps.js +58 -0
  181. package/dist/components/docs/figures/Steps.js.map +1 -0
  182. package/dist/components/docs/figures/SwatchCompare.js +42 -0
  183. package/dist/components/docs/figures/SwatchCompare.js.map +1 -0
  184. package/dist/components/docs/figures/TermGrid.js +22 -0
  185. package/dist/components/docs/figures/TermGrid.js.map +1 -0
  186. package/dist/components/docs/figures/Terminal.js +37 -0
  187. package/dist/components/docs/figures/Terminal.js.map +1 -0
  188. package/dist/components/docs/figures/Timeline.js +61 -0
  189. package/dist/components/docs/figures/Timeline.js.map +1 -0
  190. package/dist/components/docs/figures/TokenTable.js +42 -0
  191. package/dist/components/docs/figures/TokenTable.js.map +1 -0
  192. package/dist/components/docs/figures/TreeDiagram.js +76 -0
  193. package/dist/components/docs/figures/TreeDiagram.js.map +1 -0
  194. package/dist/components/docs/figures/UptimeStrip.js +68 -0
  195. package/dist/components/docs/figures/UptimeStrip.js.map +1 -0
  196. package/dist/components/docs/figures/index.js +24 -0
  197. package/dist/components/docs/figures/index.js.map +1 -0
  198. package/dist/components/docs/index.js +15 -0
  199. package/dist/components/docs/index.js.map +1 -0
  200. package/dist/components/docs/mdxComponents.js +108 -0
  201. package/dist/components/docs/mdxComponents.js.map +1 -0
  202. package/dist/components/experiments/DesignSandbox.js +206 -0
  203. package/dist/components/experiments/DesignSandbox.js.map +1 -0
  204. package/dist/components/experiments/ExperimentsView.js +138 -0
  205. package/dist/components/experiments/ExperimentsView.js.map +1 -0
  206. package/dist/components/fieldFrame.js +200 -0
  207. package/dist/components/fieldFrame.js.map +1 -0
  208. package/dist/components/floatingSurface.js +35 -0
  209. package/dist/components/floatingSurface.js.map +1 -0
  210. package/dist/components/marketing/CTASection.js +47 -0
  211. package/dist/components/marketing/CTASection.js.map +1 -0
  212. package/dist/components/marketing/FeatureGrid.js +49 -0
  213. package/dist/components/marketing/FeatureGrid.js.map +1 -0
  214. package/dist/components/marketing/Hero.js +44 -0
  215. package/dist/components/marketing/Hero.js.map +1 -0
  216. package/dist/components/marketing/PricingGrid.js +65 -0
  217. package/dist/components/marketing/PricingGrid.js.map +1 -0
  218. package/dist/components/marketing/SectionGrid.js +51 -0
  219. package/dist/components/marketing/SectionGrid.js.map +1 -0
  220. package/dist/components/paginationRange.js +28 -0
  221. package/dist/components/paginationRange.js.map +1 -0
  222. package/dist/components/portalTheme.js +14 -0
  223. package/dist/components/portalTheme.js.map +1 -0
  224. package/dist/components/saas/SaasLandingPage.js +201 -0
  225. package/dist/components/saas/SaasLandingPage.js.map +1 -0
  226. package/dist/components/siteNavContext.js +24 -0
  227. package/dist/components/siteNavContext.js.map +1 -0
  228. package/dist/components/slides/Slide.js +84 -0
  229. package/dist/components/slides/Slide.js.map +1 -0
  230. package/dist/components/slides/SlideDeck.js +228 -0
  231. package/dist/components/slides/SlideDeck.js.map +1 -0
  232. package/dist/components/themeInitScript.js +16 -0
  233. package/dist/components/themeInitScript.js.map +1 -0
  234. package/dist/components/themeScope.js +9 -0
  235. package/dist/components/themeScope.js.map +1 -0
  236. package/dist/components/toastLifetime.js +21 -0
  237. package/dist/components/toastLifetime.js.map +1 -0
  238. package/dist/fonts/DSSymbols-OFL.txt +98 -0
  239. package/dist/fonts/DSSymbols-Regular.woff2 +0 -0
  240. package/dist/fonts/SymbolsNerdFontMono-Regular.woff2 +0 -0
  241. package/dist/hooks/useActiveHeading.js +59 -0
  242. package/dist/hooks/useActiveHeading.js.map +1 -0
  243. package/dist/hooks/useCopyToClipboard.js +58 -0
  244. package/dist/hooks/useCopyToClipboard.js.map +1 -0
  245. package/dist/index.d.ts +6394 -0
  246. package/dist/index.js +117 -0
  247. package/dist/index.js.map +1 -0
  248. package/dist/lib/accentClasses.js +87 -0
  249. package/dist/lib/accentClasses.js.map +1 -0
  250. package/dist/lib/recipe.js +33 -0
  251. package/dist/lib/recipe.js.map +1 -0
  252. package/dist/lib/slug.js +39 -0
  253. package/dist/lib/slug.js.map +1 -0
  254. package/dist/lib/theme.js +76 -0
  255. package/dist/lib/theme.js.map +1 -0
  256. package/dist/lib/tokenRules.js +51 -0
  257. package/dist/lib/tokenRules.js.map +1 -0
  258. package/dist/prose.css +766 -0
  259. package/dist/styles.css +203 -0
  260. package/dist/theme/ansi.js +77 -0
  261. package/dist/theme/ansi.js.map +1 -0
  262. package/dist/theme/contrast.js +342 -0
  263. package/dist/theme/contrast.js.map +1 -0
  264. package/dist/theme/levels.js +234 -0
  265. package/dist/theme/levels.js.map +1 -0
  266. package/dist/theme/media.js +115 -0
  267. package/dist/theme/media.js.map +1 -0
  268. package/dist/theme/recommended.js +105 -0
  269. package/dist/theme/recommended.js.map +1 -0
  270. package/dist/theme.css +538 -0
  271. package/dist/tokens.js +1 -0
  272. package/dist/tokens.js.map +1 -0
  273. package/package.json +209 -6
  274. package/skills/design-system-usage/SKILL.md +75 -0
  275. package/terminal/rtk-midnight.alacritty.toml +33 -0
  276. package/terminal/rtk-midnight.ghostty.conf +24 -0
  277. package/terminal/rtk-midnight.itermcolors +167 -0
  278. package/terminal/rtk-midnight.windows-terminal.json +23 -0
  279. package/terminal/rtk-sketch.alacritty.toml +33 -0
  280. package/terminal/rtk-sketch.ghostty.conf +24 -0
  281. package/terminal/rtk-sketch.itermcolors +167 -0
  282. package/terminal/rtk-sketch.windows-terminal.json +23 -0
  283. package/tokens/palette.midnight.tokens.json +477 -0
  284. package/tokens/palette.sketch.tokens.json +477 -0
package/package.json CHANGED
@@ -1,13 +1,216 @@
1
1
  {
2
2
  "name": "@rtkelly-labs/design-system",
3
- "version": "0.0.0-bootstrap.0",
4
- "description": "Placeholder that reserves the name so npm trusted publishing can be configured. Install a real version instead.",
5
- "license": "MIT",
6
- "repository": {
7
- "type": "git",
8
- "url": "git+https://github.com/rtkelly-labs/design-system.git"
3
+ "version": "0.16.0-dev.0.37dedac",
4
+ "description": "Brutalist design system for Ryan Kelly websites: a two-level theme ladder, role-addressed tokens, and Base UI-backed components",
5
+ "type": "module",
6
+ "types": "./dist/index.d.ts",
7
+ "style": "./dist/styles.css",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "default": "./dist/index.js"
12
+ },
13
+ "./styles.css": "./dist/styles.css",
14
+ "./theme.css": "./dist/theme.css",
15
+ "./prose.css": "./dist/prose.css",
16
+ "./tokens/midnight.tokens.json": "./tokens/palette.midnight.tokens.json",
17
+ "./tokens/sketch.tokens.json": "./tokens/palette.sketch.tokens.json",
18
+ "./terminal/midnight.itermcolors": "./terminal/rtk-midnight.itermcolors",
19
+ "./terminal/midnight.windows-terminal.json": "./terminal/rtk-midnight.windows-terminal.json",
20
+ "./terminal/midnight.alacritty.toml": "./terminal/rtk-midnight.alacritty.toml",
21
+ "./terminal/midnight.ghostty.conf": "./terminal/rtk-midnight.ghostty.conf",
22
+ "./terminal/sketch.itermcolors": "./terminal/rtk-sketch.itermcolors",
23
+ "./terminal/sketch.windows-terminal.json": "./terminal/rtk-sketch.windows-terminal.json",
24
+ "./terminal/sketch.alacritty.toml": "./terminal/rtk-sketch.alacritty.toml",
25
+ "./terminal/sketch.ghostty.conf": "./terminal/rtk-sketch.ghostty.conf"
26
+ },
27
+ "files": [
28
+ "dist",
29
+ "tokens",
30
+ "terminal",
31
+ "CHANGELOG.md",
32
+ "README.md",
33
+ "LICENSE",
34
+ "skills",
35
+ "!skills/_artifacts"
36
+ ],
37
+ "sideEffects": [
38
+ "**/*.css"
39
+ ],
40
+ "engines": {
41
+ "node": ">=22"
42
+ },
43
+ "scripts": {
44
+ "build": "pnpm tokens:build && tsup",
45
+ "tokens:build": "node scripts/build-tokens.mjs",
46
+ "tokens:check": "node scripts/build-tokens.mjs --check",
47
+ "tokens:design": "node scripts/build-design-tokens.mjs",
48
+ "tokens:design:check": "node scripts/build-design-tokens.mjs --check",
49
+ "check:contrast": "node scripts/check-contrast.mjs",
50
+ "contrast:report": "node scripts/check-contrast.mjs --report",
51
+ "lint": "eslint src",
52
+ "lint:fix": "eslint src --fix",
53
+ "check:css": "node scripts/check-css.mjs",
54
+ "check:css:list": "node scripts/check-css.mjs --list",
55
+ "check:lint-budget": "node scripts/check-lint-budget.mjs",
56
+ "check:lint-budget:list": "node scripts/check-lint-budget.mjs --list",
57
+ "check:licences": "node scripts/check-licences.mjs",
58
+ "check:reference-material": "node scripts/check-reference-material.mjs",
59
+ "check:reference-material:list": "node scripts/check-reference-material.mjs --list",
60
+ "check:licences:list": "node scripts/check-licences.mjs --list",
61
+ "licences:update": "node scripts/check-licences.mjs --update",
62
+ "check:component-docs": "node scripts/check-component-docs.mjs",
63
+ "check:component-docs:list": "node scripts/check-component-docs.mjs --list",
64
+ "check:doc-snippets": "node scripts/check-doc-snippets.mjs",
65
+ "check:doc-snippets:list": "node scripts/check-doc-snippets.mjs --list",
66
+ "check:skills": "intent validate skills",
67
+ "check:docs": "node scripts/check-docs.mjs",
68
+ "check:docs:list": "node scripts/check-docs.mjs --list",
69
+ "check:governance": "node scripts/check-governance.mjs",
70
+ "check:governance:list": "node scripts/check-governance.mjs --list",
71
+ "check:slots": "node scripts/check-slots.mjs",
72
+ "slots:update": "UPDATE_SLOTS=1 vitest run src/slots",
73
+ "check:component-contract": "node scripts/check-component-contract.mjs",
74
+ "check:component-contract:list": "node scripts/check-component-contract.mjs --list",
75
+ "check:deployed": "node scripts/check-deployed.mjs",
76
+ "release:train": "node scripts/release-train.mjs",
77
+ "ci:history": "node scripts/ci-telemetry.mjs history",
78
+ "stories:replay": "node scripts/select-stories.mjs replay",
79
+ "check:story-conventions": "node scripts/check-story-conventions.mjs",
80
+ "check:story-docs": "node scripts/check-story-docs.mjs",
81
+ "check:story-docs:list": "node scripts/check-story-docs.mjs --list",
82
+ "check:story-conventions:list": "node scripts/check-story-conventions.mjs --list",
83
+ "check:docgen-props": "node scripts/check-docgen-props.mjs",
84
+ "check:docgen-props:list": "node scripts/check-docgen-props.mjs --list",
85
+ "check:visual-coverage": "node scripts/check-visual-coverage.mjs",
86
+ "check:visual-coverage:list": "node scripts/check-visual-coverage.mjs --list",
87
+ "check:lockfile": "node scripts/check-lockfile.mjs",
88
+ "check:deps": "node scripts/check-deps.mjs && knip --no-progress --include dependencies,unlisted,unresolved,duplicates",
89
+ "check:dep-cost": "node scripts/analyse-dep-cost.mjs",
90
+ "check:dep-cost:list": "node scripts/analyse-dep-cost.mjs --list",
91
+ "deps:cost:update": "node scripts/analyse-dep-cost.mjs --update",
92
+ "deps:list": "node scripts/check-deps.mjs --list",
93
+ "knip": "knip --no-progress",
94
+ "dev": "tsup --watch",
95
+ "typecheck": "tsc --noEmit",
96
+ "test": "vitest run",
97
+ "test:watch": "vitest",
98
+ "test:coverage": "vitest run --coverage",
99
+ "test:leaks": "node --disable-warning=MODULE_TYPELESS_PACKAGE_JSON scripts/vitest-leaks.mjs",
100
+ "storybook": "storybook dev -p 6006",
101
+ "build-storybook": "storybook build -o storybook-static",
102
+ "test:a11y": "playwright test tests/a11y.spec.ts",
103
+ "test:visual": "playwright test tests/visual.spec.ts",
104
+ "test:visual:missing": "playwright test tests/visual.spec.ts --update-snapshots=missing",
105
+ "test:visual:update": "playwright test tests/visual.spec.ts --update-snapshots=all",
106
+ "prepublishOnly": "pnpm tokens:build && pnpm build",
107
+ "walkthrough": "playwright test --config=playwright.walkthrough.config.ts",
108
+ "walkthrough:show": "playwright show-report walkthrough-report",
109
+ "check:api": "node scripts/check-api.mjs",
110
+ "check:bundle-size": "node scripts/check-bundle-size.mjs",
111
+ "check:bundle-size:list": "node scripts/check-bundle-size.mjs --list",
112
+ "check:import-cost": "node scripts/check-import-cost.mjs",
113
+ "check:import-cost:list": "node scripts/check-import-cost.mjs --list",
114
+ "api:update": "pnpm build && node scripts/check-api.mjs --update",
115
+ "check:fonts": "node scripts/check-fonts.mjs",
116
+ "check:fonts:list": "node scripts/check-fonts.mjs --list",
117
+ "check:tokens": "node scripts/check-tokens.mjs",
118
+ "check:tokens:list": "node scripts/check-tokens.mjs --list",
119
+ "ansi:build": "node scripts/build-ansi.mjs",
120
+ "ansi:check": "node scripts/build-ansi.mjs --check"
9
121
  },
10
122
  "publishConfig": {
11
123
  "access": "public"
124
+ },
125
+ "repository": {
126
+ "type": "git",
127
+ "url": "https://github.com/rtkelly-labs/design-system.git"
128
+ },
129
+ "keywords": [
130
+ "design-system",
131
+ "brutalist",
132
+ "react",
133
+ "tailwind",
134
+ "storybook",
135
+ "visual-regression",
136
+ "playwright",
137
+ "slides",
138
+ "deck",
139
+ "experiments",
140
+ "theme-ladder",
141
+ "design-tokens",
142
+ "tanstack-intent"
143
+ ],
144
+ "author": "Ryan Kelly",
145
+ "license": "MIT",
146
+ "peerDependencies": {
147
+ "@tailwindcss/typography": "^0.5.16",
148
+ "react": "^18.0.0 || ^19.0.0",
149
+ "react-dom": "^18.0.0 || ^19.0.0",
150
+ "tailwindcss": "^4.0.0"
151
+ },
152
+ "dependencies": {
153
+ "@base-ui/react": "^1.8.0",
154
+ "@fontsource-variable/inter": "^5.3.0",
155
+ "@fontsource-variable/space-grotesk": "^5.3.0",
156
+ "@fontsource/ibm-plex-mono": "^5.3.0",
157
+ "@fontsource/vt323": "^5.3.0",
158
+ "@microcharts/react": "^0.19.1",
159
+ "@tanstack/react-hotkeys": "^0.10.0",
160
+ "@tanstack/react-table": "^8.21.3",
161
+ "@tanstack/react-virtual": "^3.14.12",
162
+ "@visx/axis": "^4.0.0",
163
+ "@visx/grid": "^4.0.0",
164
+ "@visx/group": "^4.0.0",
165
+ "@visx/responsive": "^4.0.0",
166
+ "@visx/scale": "^4.0.0",
167
+ "@visx/shape": "^4.0.0",
168
+ "@visx/tooltip": "^4.0.0",
169
+ "lucide-react": "^1.28.0",
170
+ "tailwind-variants": "^3.3.1"
171
+ },
172
+ "devDependencies": {
173
+ "@axe-core/playwright": "^4.13.0",
174
+ "@playwright/test": "^1.62.1",
175
+ "@storybook/addon-docs": "^10.5.5",
176
+ "@storybook/react": "^10.5.5",
177
+ "@storybook/react-vite": "^10.5.5",
178
+ "@tailwindcss/typography": "^0.5.20",
179
+ "@tailwindcss/vite": "^4.3.3",
180
+ "@tanstack/intent": "^0.4.0",
181
+ "@testing-library/react": "^16.3.2",
182
+ "@types/node": "^26.2.0",
183
+ "@types/react": "^19.2.18",
184
+ "@types/react-dom": "^19.2.4",
185
+ "@vitest/coverage-v8": "^4.1.10",
186
+ "esbuild": "0.27.7",
187
+ "eslint": "^10.8.1",
188
+ "eslint-plugin-jsx-a11y": "^6.10.2",
189
+ "eslint-plugin-react-hooks": "^7.1.1",
190
+ "eslint-plugin-tailwindcss": "4.3.0",
191
+ "jsdom": "^30.0.1",
192
+ "knip": "^6.32.2",
193
+ "react": "^19.2.8",
194
+ "react-dom": "^19.2.8",
195
+ "storybook": "^10.5.5",
196
+ "tailwindcss": "^4.3.3",
197
+ "tsup": "^8.5.1",
198
+ "typescript": "^6.0.3",
199
+ "typescript-eslint": "^8.67.0",
200
+ "vite": "^8.2.0",
201
+ "vitest": "^4.1.10"
202
+ },
203
+ "peerDependenciesMeta": {
204
+ "@tailwindcss/typography": {
205
+ "optional": true
206
+ },
207
+ "tailwindcss": {
208
+ "optional": true
209
+ }
210
+ },
211
+ "intent": {
212
+ "skills": [
213
+ "skills"
214
+ ]
12
215
  }
13
216
  }
@@ -0,0 +1,75 @@
1
+ ---
2
+ name: design-system-usage
3
+ description: >
4
+ Build pages and components against @rtkelly-labs/design-system (brutalist React
5
+ + Tailwind 4 system). Activate when importing from @rtkelly-labs/design-system,
6
+ theming with its Level ladder, or using DataTable, SlideDeck, ThemeProvider.
7
+ Covers the token rules, the single-primitive-library rule, and the component
8
+ surfaces an agent cannot discover from code alone.
9
+ metadata:
10
+ type: core
11
+ version: '1.0'
12
+ ---
13
+
14
+ # Using @rtkelly-labs/design-system
15
+
16
+ React-only. Import components and the `cn`/`recipe` helpers from the package
17
+ root; styles ship as one stylesheet you must import once:
18
+
19
+ ```tsx
20
+ import '@rtkelly-labs/design-system/styles.css';
21
+ import { Button, DataTable, ThemeProvider } from '@rtkelly-labs/design-system';
22
+ ```
23
+
24
+ ## Non-negotiables
25
+
26
+ 1. **Never hardcode colours.** Colours are addressed by role via Tailwind
27
+ utilities generated from the token ladder: `bg-surface-raised`,
28
+ `text-content-primary`, `border-edge-strong`, `text-intent-danger`. Hue
29
+ names (`cyan`, `zinc-500`, hex literals) fail the repo's own lint gate.
30
+ 2. **Theme via `ThemeProvider` + `data-theme`.** The system ships Levels
31
+ (theme rungs); a page declares one Level and components inherit. Do not
32
+ write CSS custom properties that start with `--ds-` by hand.
33
+ 3. **One primitive library.** Interaction primitives come from Base UI; the
34
+ only other runtime engines permitted are TanStack headless engines
35
+ (table/virtual/hotkeys). Do not add Radix, shadcn, MUI, or Chakra
36
+ alongside — focus-management collisions are the reason.
37
+
38
+ ## DataTable
39
+
40
+ `columns` + `data` (legacy `Column<T>[]` or TanStack `ColumnDef<T>[]`), or pass
41
+ a fully controlled `table` from `useReactTable` — never both. `pageSize`
42
+ attaches pagination; `virtualize` windows the body instead; without either,
43
+ every row is mounted.
44
+
45
+ The semantics are the component's, not TanStack's: every header has
46
+ `scope="col"`, the sorted column's header has `aria-sort`, each sortable
47
+ header is a native `<button>`, a `rowHeader` column (`meta.rowHeader` on a
48
+ `ColumnDef`) renders `<th scope="row">`, and a windowed body reports the full
49
+ dataset through `aria-rowcount` / `aria-rowindex`. Pass `caption` to say what
50
+ the table is a table of — it becomes the table's accessible name. Row
51
+ selection and a sticky header are deliberately not built: no consumer needs
52
+ them yet (#245).
53
+
54
+ ## SlideDeck keyboard
55
+
56
+ Deck bindings live in the exported `SLIDE_DECK_HOTKEYS` table (←/→/Space page,
57
+ F fullscreen, N notes when any slide has them). `chrome={false}` disables the
58
+ bindings entirely — a page owning its keyboard should pass it.
59
+
60
+ ## Common mistakes
61
+
62
+ - **Wrong:** styling components with a second CSS-in-JS layer or Tailwind
63
+ config overrides. **Correct:** compose classes with the exported `cn`
64
+ (tailwind-variants based); variants go through `recipe`.
65
+ - **Wrong:** rendering `DataTable` with thousands of rows and no `pageSize`.
66
+ **Correct:** paginate or `virtualize` — the default mounts every row.
67
+ - **Wrong:** assuming the package themes itself. **Correct:** wrap the app in
68
+ `ThemeProvider` (or set `data-theme` on a root element) — unstyled
69
+ tokens resolve to nothing.
70
+
71
+ ## API discovery
72
+
73
+ The published type surface is the package's `dist/index.d.ts` — every export,
74
+ prop and token type. Do not invent props; if it is not in the `.d.ts`, it does
75
+ not exist.
@@ -0,0 +1,33 @@
1
+ # GENERATED from src/theme/ansi.ts — do not edit. Regenerate: pnpm ansi:build
2
+
3
+ [colors.primary]
4
+ background = "#0a0a1a"
5
+ foreground = "#ffffff"
6
+
7
+ [colors.cursor]
8
+ text = "#0a0a1a"
9
+ cursor = "#22d3ee"
10
+
11
+ [colors.selection]
12
+ text = "#ffffff"
13
+ background = "#14142a"
14
+
15
+ [colors.normal]
16
+ black = "#050510"
17
+ red = "#ff586e"
18
+ green = "#39ff14"
19
+ yellow = "#facc15"
20
+ blue = "#38bdf8"
21
+ magenta = "#ff1cff"
22
+ cyan = "#22d3ee"
23
+ white = "#c3c3d4"
24
+
25
+ [colors.bright]
26
+ black = "#14142a"
27
+ red = "#ff939b"
28
+ green = "#c0ffb8"
29
+ yellow = "#ffeaab"
30
+ blue = "#8cd7ff"
31
+ magenta = "#ff88fd"
32
+ cyan = "#88ebff"
33
+ white = "#ffffff"
@@ -0,0 +1,24 @@
1
+ # GENERATED from src/theme/ansi.ts — do not edit. Regenerate: pnpm ansi:build
2
+
3
+ palette = 0=#050510
4
+ palette = 1=#ff586e
5
+ palette = 2=#39ff14
6
+ palette = 3=#facc15
7
+ palette = 4=#38bdf8
8
+ palette = 5=#ff1cff
9
+ palette = 6=#22d3ee
10
+ palette = 7=#c3c3d4
11
+ palette = 8=#14142a
12
+ palette = 9=#ff939b
13
+ palette = 10=#c0ffb8
14
+ palette = 11=#ffeaab
15
+ palette = 12=#8cd7ff
16
+ palette = 13=#ff88fd
17
+ palette = 14=#88ebff
18
+ palette = 15=#ffffff
19
+
20
+ background = #0a0a1a
21
+ foreground = #ffffff
22
+ cursor-color = #22d3ee
23
+ selection-background = #14142a
24
+ selection-foreground = #ffffff
@@ -0,0 +1,167 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <!-- GENERATED from src/theme/ansi.ts — do not edit. Regenerate: pnpm ansi:build -->
3
+ <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
4
+ <plist version="1.0">
5
+ <dict>
6
+ <key>Ansi 0 Color</key>
7
+ <dict>
8
+ <key>Alpha Component</key><real>1</real>
9
+ <key>Blue Component</key><real>0.062745098</real>
10
+ <key>Color Space</key><string>sRGB</string>
11
+ <key>Green Component</key><real>0.019607843</real>
12
+ <key>Red Component</key><real>0.019607843</real>
13
+ </dict>
14
+ <key>Ansi 1 Color</key>
15
+ <dict>
16
+ <key>Alpha Component</key><real>1</real>
17
+ <key>Blue Component</key><real>0.431372549</real>
18
+ <key>Color Space</key><string>sRGB</string>
19
+ <key>Green Component</key><real>0.345098039</real>
20
+ <key>Red Component</key><real>1.000000000</real>
21
+ </dict>
22
+ <key>Ansi 2 Color</key>
23
+ <dict>
24
+ <key>Alpha Component</key><real>1</real>
25
+ <key>Blue Component</key><real>0.078431373</real>
26
+ <key>Color Space</key><string>sRGB</string>
27
+ <key>Green Component</key><real>1.000000000</real>
28
+ <key>Red Component</key><real>0.223529412</real>
29
+ </dict>
30
+ <key>Ansi 3 Color</key>
31
+ <dict>
32
+ <key>Alpha Component</key><real>1</real>
33
+ <key>Blue Component</key><real>0.082352941</real>
34
+ <key>Color Space</key><string>sRGB</string>
35
+ <key>Green Component</key><real>0.800000000</real>
36
+ <key>Red Component</key><real>0.980392157</real>
37
+ </dict>
38
+ <key>Ansi 4 Color</key>
39
+ <dict>
40
+ <key>Alpha Component</key><real>1</real>
41
+ <key>Blue Component</key><real>0.972549020</real>
42
+ <key>Color Space</key><string>sRGB</string>
43
+ <key>Green Component</key><real>0.741176471</real>
44
+ <key>Red Component</key><real>0.219607843</real>
45
+ </dict>
46
+ <key>Ansi 5 Color</key>
47
+ <dict>
48
+ <key>Alpha Component</key><real>1</real>
49
+ <key>Blue Component</key><real>1.000000000</real>
50
+ <key>Color Space</key><string>sRGB</string>
51
+ <key>Green Component</key><real>0.109803922</real>
52
+ <key>Red Component</key><real>1.000000000</real>
53
+ </dict>
54
+ <key>Ansi 6 Color</key>
55
+ <dict>
56
+ <key>Alpha Component</key><real>1</real>
57
+ <key>Blue Component</key><real>0.933333333</real>
58
+ <key>Color Space</key><string>sRGB</string>
59
+ <key>Green Component</key><real>0.827450980</real>
60
+ <key>Red Component</key><real>0.133333333</real>
61
+ </dict>
62
+ <key>Ansi 7 Color</key>
63
+ <dict>
64
+ <key>Alpha Component</key><real>1</real>
65
+ <key>Blue Component</key><real>0.831372549</real>
66
+ <key>Color Space</key><string>sRGB</string>
67
+ <key>Green Component</key><real>0.764705882</real>
68
+ <key>Red Component</key><real>0.764705882</real>
69
+ </dict>
70
+ <key>Ansi 8 Color</key>
71
+ <dict>
72
+ <key>Alpha Component</key><real>1</real>
73
+ <key>Blue Component</key><real>0.164705882</real>
74
+ <key>Color Space</key><string>sRGB</string>
75
+ <key>Green Component</key><real>0.078431373</real>
76
+ <key>Red Component</key><real>0.078431373</real>
77
+ </dict>
78
+ <key>Ansi 9 Color</key>
79
+ <dict>
80
+ <key>Alpha Component</key><real>1</real>
81
+ <key>Blue Component</key><real>0.607843137</real>
82
+ <key>Color Space</key><string>sRGB</string>
83
+ <key>Green Component</key><real>0.576470588</real>
84
+ <key>Red Component</key><real>1.000000000</real>
85
+ </dict>
86
+ <key>Ansi 10 Color</key>
87
+ <dict>
88
+ <key>Alpha Component</key><real>1</real>
89
+ <key>Blue Component</key><real>0.721568627</real>
90
+ <key>Color Space</key><string>sRGB</string>
91
+ <key>Green Component</key><real>1.000000000</real>
92
+ <key>Red Component</key><real>0.752941176</real>
93
+ </dict>
94
+ <key>Ansi 11 Color</key>
95
+ <dict>
96
+ <key>Alpha Component</key><real>1</real>
97
+ <key>Blue Component</key><real>0.670588235</real>
98
+ <key>Color Space</key><string>sRGB</string>
99
+ <key>Green Component</key><real>0.917647059</real>
100
+ <key>Red Component</key><real>1.000000000</real>
101
+ </dict>
102
+ <key>Ansi 12 Color</key>
103
+ <dict>
104
+ <key>Alpha Component</key><real>1</real>
105
+ <key>Blue Component</key><real>1.000000000</real>
106
+ <key>Color Space</key><string>sRGB</string>
107
+ <key>Green Component</key><real>0.843137255</real>
108
+ <key>Red Component</key><real>0.549019608</real>
109
+ </dict>
110
+ <key>Ansi 13 Color</key>
111
+ <dict>
112
+ <key>Alpha Component</key><real>1</real>
113
+ <key>Blue Component</key><real>0.992156863</real>
114
+ <key>Color Space</key><string>sRGB</string>
115
+ <key>Green Component</key><real>0.533333333</real>
116
+ <key>Red Component</key><real>1.000000000</real>
117
+ </dict>
118
+ <key>Ansi 14 Color</key>
119
+ <dict>
120
+ <key>Alpha Component</key><real>1</real>
121
+ <key>Blue Component</key><real>1.000000000</real>
122
+ <key>Color Space</key><string>sRGB</string>
123
+ <key>Green Component</key><real>0.921568627</real>
124
+ <key>Red Component</key><real>0.533333333</real>
125
+ </dict>
126
+ <key>Ansi 15 Color</key>
127
+ <dict>
128
+ <key>Alpha Component</key><real>1</real>
129
+ <key>Blue Component</key><real>1.000000000</real>
130
+ <key>Color Space</key><string>sRGB</string>
131
+ <key>Green Component</key><real>1.000000000</real>
132
+ <key>Red Component</key><real>1.000000000</real>
133
+ </dict>
134
+ <key>Background Color</key>
135
+ <dict>
136
+ <key>Alpha Component</key><real>1</real>
137
+ <key>Blue Component</key><real>0.101960784</real>
138
+ <key>Color Space</key><string>sRGB</string>
139
+ <key>Green Component</key><real>0.039215686</real>
140
+ <key>Red Component</key><real>0.039215686</real>
141
+ </dict>
142
+ <key>Foreground Color</key>
143
+ <dict>
144
+ <key>Alpha Component</key><real>1</real>
145
+ <key>Blue Component</key><real>1.000000000</real>
146
+ <key>Color Space</key><string>sRGB</string>
147
+ <key>Green Component</key><real>1.000000000</real>
148
+ <key>Red Component</key><real>1.000000000</real>
149
+ </dict>
150
+ <key>Cursor Color</key>
151
+ <dict>
152
+ <key>Alpha Component</key><real>1</real>
153
+ <key>Blue Component</key><real>0.933333333</real>
154
+ <key>Color Space</key><string>sRGB</string>
155
+ <key>Green Component</key><real>0.827450980</real>
156
+ <key>Red Component</key><real>0.133333333</real>
157
+ </dict>
158
+ <key>Selection Color</key>
159
+ <dict>
160
+ <key>Alpha Component</key><real>1</real>
161
+ <key>Blue Component</key><real>0.164705882</real>
162
+ <key>Color Space</key><string>sRGB</string>
163
+ <key>Green Component</key><real>0.078431373</real>
164
+ <key>Red Component</key><real>0.078431373</real>
165
+ </dict>
166
+ </dict>
167
+ </plist>
@@ -0,0 +1,23 @@
1
+ {
2
+ "name": "RTK Midnight",
3
+ "background": "#0a0a1a",
4
+ "foreground": "#ffffff",
5
+ "cursorColor": "#22d3ee",
6
+ "selectionBackground": "#14142a",
7
+ "black": "#050510",
8
+ "red": "#ff586e",
9
+ "green": "#39ff14",
10
+ "yellow": "#facc15",
11
+ "blue": "#38bdf8",
12
+ "magenta": "#ff1cff",
13
+ "cyan": "#22d3ee",
14
+ "white": "#c3c3d4",
15
+ "brightBlack": "#14142a",
16
+ "brightRed": "#ff939b",
17
+ "brightGreen": "#c0ffb8",
18
+ "brightYellow": "#ffeaab",
19
+ "brightBlue": "#8cd7ff",
20
+ "brightMagenta": "#ff88fd",
21
+ "brightCyan": "#88ebff",
22
+ "brightWhite": "#ffffff"
23
+ }
@@ -0,0 +1,33 @@
1
+ # GENERATED from src/theme/ansi.ts — do not edit. Regenerate: pnpm ansi:build
2
+
3
+ [colors.primary]
4
+ background = "#f5f3ec"
5
+ foreground = "#23262e"
6
+
7
+ [colors.cursor]
8
+ text = "#f5f3ec"
9
+ cursor = "#1450d7"
10
+
11
+ [colors.selection]
12
+ text = "#23262e"
13
+ background = "#ffffff"
14
+
15
+ [colors.normal]
16
+ black = "#23262e"
17
+ red = "#bd0010"
18
+ green = "#006b2e"
19
+ yellow = "#705a00"
20
+ blue = "#1450d7"
21
+ magenta = "#a300ad"
22
+ cyan = "#006675"
23
+ white = "#efeadf"
24
+
25
+ [colors.bright]
26
+ black = "#33373f"
27
+ red = "#8f002a"
28
+ green = "#024f00"
29
+ yellow = "#534200"
30
+ blue = "#004e6d"
31
+ magenta = "#7f0080"
32
+ cyan = "#004b56"
33
+ white = "#ffffff"
@@ -0,0 +1,24 @@
1
+ # GENERATED from src/theme/ansi.ts — do not edit. Regenerate: pnpm ansi:build
2
+
3
+ palette = 0=#23262e
4
+ palette = 1=#bd0010
5
+ palette = 2=#006b2e
6
+ palette = 3=#705a00
7
+ palette = 4=#1450d7
8
+ palette = 5=#a300ad
9
+ palette = 6=#006675
10
+ palette = 7=#efeadf
11
+ palette = 8=#33373f
12
+ palette = 9=#8f002a
13
+ palette = 10=#024f00
14
+ palette = 11=#534200
15
+ palette = 12=#004e6d
16
+ palette = 13=#7f0080
17
+ palette = 14=#004b56
18
+ palette = 15=#ffffff
19
+
20
+ background = #f5f3ec
21
+ foreground = #23262e
22
+ cursor-color = #1450d7
23
+ selection-background = #ffffff
24
+ selection-foreground = #23262e