@keyfunc/keybricks-ds 1.0.0

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 (418) hide show
  1. package/DEPLOY.md +204 -0
  2. package/DESIGN.md +269 -0
  3. package/INTEGRATION.md +417 -0
  4. package/SKILL.md +32 -0
  5. package/_adherence.oxlintrc.json +1469 -0
  6. package/_scripts/build-index.mjs +80 -0
  7. package/_scripts/build-tokens.mjs +135 -0
  8. package/assets/icons/icon-index.js +1 -0
  9. package/assets/icons/icon-index.json +1 -0
  10. package/assets/icons/unicons-index.js +1 -0
  11. package/assets/icons/unicons-index.json +1 -0
  12. package/assets/keybricks-logo.png +0 -0
  13. package/components/_cards/accordion.card.html +32 -0
  14. package/components/_cards/action-chip.card.html +22 -0
  15. package/components/_cards/activity.card.html +34 -0
  16. package/components/_cards/alert.card.html +32 -0
  17. package/components/_cards/app-chrome.card.html +36 -0
  18. package/components/_cards/banner.card.html +21 -0
  19. package/components/_cards/brand-visual.card.html +43 -0
  20. package/components/_cards/breadcrumb.card.html +23 -0
  21. package/components/_cards/button-1-base.card.html +39 -0
  22. package/components/_cards/button-2-states.card.html +56 -0
  23. package/components/_cards/button-3-sizes-icons.card.html +32 -0
  24. package/components/_cards/button-4-group.card.html +47 -0
  25. package/components/_cards/canvas-zoom-controls.card.html +19 -0
  26. package/components/_cards/cards-indicators.card.html +59 -0
  27. package/components/_cards/charts-1-sparkline.card.html +55 -0
  28. package/components/_cards/charts-10-gauge.card.html +31 -0
  29. package/components/_cards/charts-11-funnel.card.html +28 -0
  30. package/components/_cards/charts-12-treemap.card.html +23 -0
  31. package/components/_cards/charts-14-radar.card.html +31 -0
  32. package/components/_cards/charts-15-distribution.card.html +32 -0
  33. package/components/_cards/charts-16-pareto.card.html +25 -0
  34. package/components/_cards/charts-17-candlestick.card.html +34 -0
  35. package/components/_cards/charts-18-sankey.card.html +29 -0
  36. package/components/_cards/charts-19-chord.card.html +31 -0
  37. package/components/_cards/charts-2-line.card.html +46 -0
  38. package/components/_cards/charts-20-sunburst.card.html +38 -0
  39. package/components/_cards/charts-21-worldmap.card.html +33 -0
  40. package/components/_cards/charts-22-gantt.card.html +37 -0
  41. package/components/_cards/charts-23-bar3d.card.html +26 -0
  42. package/components/_cards/charts-24-pie3d.card.html +32 -0
  43. package/components/_cards/charts-25-surface3d.card.html +24 -0
  44. package/components/_cards/charts-26-scatter3d.card.html +24 -0
  45. package/components/_cards/charts-27-ribbon3d.card.html +23 -0
  46. package/components/_cards/charts-3-bar.card.html +71 -0
  47. package/components/_cards/charts-4-barlist.card.html +30 -0
  48. package/components/_cards/charts-5-donut.card.html +35 -0
  49. package/components/_cards/charts-6-scatter.card.html +26 -0
  50. package/components/_cards/charts-7-heatmap.card.html +28 -0
  51. package/components/_cards/charts-8-waterfall.card.html +25 -0
  52. package/components/_cards/charts-9-bullet.card.html +31 -0
  53. package/components/_cards/charts-99-fullpage.card.html +194 -0
  54. package/components/_cards/checkbox.card.html +34 -0
  55. package/components/_cards/codeblock.card.html +19 -0
  56. package/components/_cards/combobox.card.html +25 -0
  57. package/components/_cards/context-menu.card.html +21 -0
  58. package/components/_cards/datatable.card.html +48 -0
  59. package/components/_cards/date-picker.card.html +31 -0
  60. package/components/_cards/diffvalue.card.html +21 -0
  61. package/components/_cards/divider.card.html +24 -0
  62. package/components/_cards/drawer.card.html +30 -0
  63. package/components/_cards/dropdown-menu.card.html +38 -0
  64. package/components/_cards/dropzone.card.html +22 -0
  65. package/components/_cards/empty-state.card.html +29 -0
  66. package/components/_cards/filter-bar.card.html +34 -0
  67. package/components/_cards/icon-button.card.html +27 -0
  68. package/components/_cards/icons-1-core.card.html +49 -0
  69. package/components/_cards/icons-2-feather.card.html +39 -0
  70. package/components/_cards/icons-3-unicons.card.html +44 -0
  71. package/components/_cards/input.card.html +25 -0
  72. package/components/_cards/kbd.card.html +20 -0
  73. package/components/_cards/keyvalue.card.html +23 -0
  74. package/components/_cards/listrow.card.html +30 -0
  75. package/components/_cards/loading.card.html +33 -0
  76. package/components/_cards/log-viewer.card.html +23 -0
  77. package/components/_cards/modal.card.html +35 -0
  78. package/components/_cards/multi-select.card.html +26 -0
  79. package/components/_cards/number-stepper.card.html +24 -0
  80. package/components/_cards/pagination.card.html +25 -0
  81. package/components/_cards/people.card.html +46 -0
  82. package/components/_cards/pipeline-node.card.html +76 -0
  83. package/components/_cards/pipeline-palette.card.html +54 -0
  84. package/components/_cards/search.card.html +23 -0
  85. package/components/_cards/select.card.html +23 -0
  86. package/components/_cards/slider.card.html +25 -0
  87. package/components/_cards/smart-table.card.html +37 -0
  88. package/components/_cards/spreadsheet.card.html +31 -0
  89. package/components/_cards/stepper.card.html +25 -0
  90. package/components/_cards/tabs.card.html +25 -0
  91. package/components/_cards/tag.card.html +26 -0
  92. package/components/_cards/textarea.card.html +27 -0
  93. package/components/_cards/timeline.card.html +32 -0
  94. package/components/_cards/toast.card.html +33 -0
  95. package/components/_cards/toggles.card.html +68 -0
  96. package/components/_cards/tooltip.card.html +22 -0
  97. package/components/_cards/tree.card.html +150 -0
  98. package/components/_shared/frame-theme.js +16 -0
  99. package/components/_shared/src-brand.js +1 -0
  100. package/components/_shared/src-buttons.js +1 -0
  101. package/components/_shared/src-charts.js +1 -0
  102. package/components/_shared/src-data.js +1 -0
  103. package/components/_shared/src-display.js +1 -0
  104. package/components/_shared/src-feedback.js +1 -0
  105. package/components/_shared/src-forms.js +1 -0
  106. package/components/_shared/src-icons.js +1 -0
  107. package/components/_shared/src-navigation.js +1 -0
  108. package/components/_shared/src-pipeline.js +1 -0
  109. package/components/_shared/src-tabs.js +1 -0
  110. package/components/_shared/svg-download.js +19 -0
  111. package/components/_shared/view-source.js +185 -0
  112. package/components/_vue/index.mjs +114 -0
  113. package/components/brand/BrandVisual.d.ts +17 -0
  114. package/components/brand/BrandVisual.jsx +29 -0
  115. package/components/brand/BrandVisual.vue +34 -0
  116. package/components/brand/_dir.card.html +13 -0
  117. package/components/brand/brandMotifs.js +210 -0
  118. package/components/buttons/ActionChip.d.ts +10 -0
  119. package/components/buttons/ActionChip.jsx +20 -0
  120. package/components/buttons/ActionChip.vue +18 -0
  121. package/components/buttons/Button.d.ts +40 -0
  122. package/components/buttons/Button.jsx +101 -0
  123. package/components/buttons/Button.vue +87 -0
  124. package/components/buttons/IconButton.d.ts +26 -0
  125. package/components/buttons/IconButton.jsx +28 -0
  126. package/components/buttons/IconButton.vue +21 -0
  127. package/components/buttons/_dir.card.html +13 -0
  128. package/components/buttons/buttons.prompt.md +19 -0
  129. package/components/charts/Bar3D.d.ts +15 -0
  130. package/components/charts/Bar3D.jsx +93 -0
  131. package/components/charts/Bar3D.vue +79 -0
  132. package/components/charts/BarChart.d.ts +23 -0
  133. package/components/charts/BarChart.jsx +135 -0
  134. package/components/charts/BarChart.vue +139 -0
  135. package/components/charts/BarList.d.ts +13 -0
  136. package/components/charts/BarList.jsx +31 -0
  137. package/components/charts/BarList.vue +25 -0
  138. package/components/charts/BoxPlot.d.ts +18 -0
  139. package/components/charts/BoxPlot.jsx +62 -0
  140. package/components/charts/BoxPlot.vue +58 -0
  141. package/components/charts/BulletChart.d.ts +12 -0
  142. package/components/charts/BulletChart.jsx +41 -0
  143. package/components/charts/BulletChart.vue +33 -0
  144. package/components/charts/CandlestickChart.d.ts +15 -0
  145. package/components/charts/CandlestickChart.jsx +63 -0
  146. package/components/charts/CandlestickChart.vue +62 -0
  147. package/components/charts/ChartKit.d.ts +8 -0
  148. package/components/charts/ChartKit.jsx +76 -0
  149. package/components/charts/ChartKit.vue +47 -0
  150. package/components/charts/ChordChart.d.ts +13 -0
  151. package/components/charts/ChordChart.jsx +55 -0
  152. package/components/charts/ChordChart.vue +54 -0
  153. package/components/charts/DonutChart.d.ts +15 -0
  154. package/components/charts/DonutChart.jsx +73 -0
  155. package/components/charts/DonutChart.vue +61 -0
  156. package/components/charts/FunnelChart.d.ts +11 -0
  157. package/components/charts/FunnelChart.jsx +37 -0
  158. package/components/charts/FunnelChart.vue +29 -0
  159. package/components/charts/GanttChart.d.ts +20 -0
  160. package/components/charts/GanttChart.jsx +80 -0
  161. package/components/charts/GanttChart.vue +60 -0
  162. package/components/charts/GaugeChart.d.ts +13 -0
  163. package/components/charts/GaugeChart.jsx +33 -0
  164. package/components/charts/GaugeChart.vue +29 -0
  165. package/components/charts/HeatmapChart.d.ts +13 -0
  166. package/components/charts/HeatmapChart.jsx +62 -0
  167. package/components/charts/HeatmapChart.vue +38 -0
  168. package/components/charts/Histogram.d.ts +16 -0
  169. package/components/charts/Histogram.jsx +56 -0
  170. package/components/charts/Histogram.vue +53 -0
  171. package/components/charts/LineChart.d.ts +17 -0
  172. package/components/charts/LineChart.jsx +84 -0
  173. package/components/charts/LineChart.vue +86 -0
  174. package/components/charts/ParetoChart.d.ts +13 -0
  175. package/components/charts/ParetoChart.jsx +54 -0
  176. package/components/charts/ParetoChart.vue +55 -0
  177. package/components/charts/Pie3D.d.ts +17 -0
  178. package/components/charts/Pie3D.jsx +145 -0
  179. package/components/charts/Pie3D.vue +115 -0
  180. package/components/charts/RadarChart.d.ts +14 -0
  181. package/components/charts/RadarChart.jsx +79 -0
  182. package/components/charts/RadarChart.vue +73 -0
  183. package/components/charts/Ribbon3D.d.ts +13 -0
  184. package/components/charts/Ribbon3D.jsx +89 -0
  185. package/components/charts/Ribbon3D.vue +79 -0
  186. package/components/charts/SankeyChart.d.ts +15 -0
  187. package/components/charts/SankeyChart.jsx +59 -0
  188. package/components/charts/SankeyChart.vue +53 -0
  189. package/components/charts/Scatter3D.d.ts +12 -0
  190. package/components/charts/Scatter3D.jsx +69 -0
  191. package/components/charts/Scatter3D.vue +59 -0
  192. package/components/charts/ScatterChart.d.ts +12 -0
  193. package/components/charts/ScatterChart.jsx +53 -0
  194. package/components/charts/ScatterChart.vue +57 -0
  195. package/components/charts/Sparkline.d.ts +19 -0
  196. package/components/charts/Sparkline.jsx +63 -0
  197. package/components/charts/Sparkline.vue +54 -0
  198. package/components/charts/SunburstChart.d.ts +12 -0
  199. package/components/charts/SunburstChart.jsx +61 -0
  200. package/components/charts/SunburstChart.vue +60 -0
  201. package/components/charts/Surface3D.d.ts +13 -0
  202. package/components/charts/Surface3D.jsx +70 -0
  203. package/components/charts/Surface3D.vue +63 -0
  204. package/components/charts/TreemapChart.d.ts +11 -0
  205. package/components/charts/TreemapChart.jsx +35 -0
  206. package/components/charts/TreemapChart.vue +27 -0
  207. package/components/charts/WaterfallChart.d.ts +11 -0
  208. package/components/charts/WaterfallChart.jsx +59 -0
  209. package/components/charts/WaterfallChart.vue +46 -0
  210. package/components/charts/WorldMap.d.ts +21 -0
  211. package/components/charts/WorldMap.jsx +107 -0
  212. package/components/charts/WorldMap.vue +73 -0
  213. package/components/charts/_dir.card.html +7 -0
  214. package/components/charts/chart-3d.js +84 -0
  215. package/components/charts/chart-geometry.js +223 -0
  216. package/components/charts/charts.prompt.md +24 -0
  217. package/components/data/CodeBlock.d.ts +9 -0
  218. package/components/data/CodeBlock.jsx +19 -0
  219. package/components/data/CodeBlock.vue +22 -0
  220. package/components/data/DataTable.d.ts +28 -0
  221. package/components/data/DataTable.jsx +32 -0
  222. package/components/data/DataTable.vue +25 -0
  223. package/components/data/DiffValue.d.ts +11 -0
  224. package/components/data/DiffValue.jsx +15 -0
  225. package/components/data/DiffValue.vue +13 -0
  226. package/components/data/FilterBar.d.ts +16 -0
  227. package/components/data/FilterBar.jsx +22 -0
  228. package/components/data/FilterBar.vue +23 -0
  229. package/components/data/KeyValue.d.ts +16 -0
  230. package/components/data/KeyValue.jsx +25 -0
  231. package/components/data/KeyValue.vue +26 -0
  232. package/components/data/ListRow.d.ts +14 -0
  233. package/components/data/ListRow.jsx +25 -0
  234. package/components/data/ListRow.vue +25 -0
  235. package/components/data/Pagination.d.ts +12 -0
  236. package/components/data/Pagination.jsx +27 -0
  237. package/components/data/Pagination.vue +24 -0
  238. package/components/data/SmartTable.d.ts +30 -0
  239. package/components/data/SmartTable.jsx +73 -0
  240. package/components/data/SmartTable.vue +74 -0
  241. package/components/data/Spreadsheet.d.ts +33 -0
  242. package/components/data/Spreadsheet.jsx +110 -0
  243. package/components/data/Spreadsheet.vue +95 -0
  244. package/components/data/_dir.card.html +13 -0
  245. package/components/data/data.prompt.md +33 -0
  246. package/components/display/Avatar.d.ts +21 -0
  247. package/components/display/Avatar.jsx +31 -0
  248. package/components/display/Avatar.vue +34 -0
  249. package/components/display/Badge.d.ts +27 -0
  250. package/components/display/Badge.jsx +40 -0
  251. package/components/display/Badge.vue +47 -0
  252. package/components/display/Card.d.ts +27 -0
  253. package/components/display/Card.jsx +27 -0
  254. package/components/display/Card.vue +28 -0
  255. package/components/display/Divider.d.ts +8 -0
  256. package/components/display/Divider.jsx +14 -0
  257. package/components/display/Divider.vue +13 -0
  258. package/components/display/Kbd.d.ts +7 -0
  259. package/components/display/Kbd.jsx +12 -0
  260. package/components/display/Kbd.vue +9 -0
  261. package/components/display/ProgressBar.d.ts +42 -0
  262. package/components/display/ProgressBar.jsx +70 -0
  263. package/components/display/ProgressBar.vue +69 -0
  264. package/components/display/Tag.d.ts +9 -0
  265. package/components/display/Tag.jsx +15 -0
  266. package/components/display/Tag.vue +15 -0
  267. package/components/display/_dir.card.html +13 -0
  268. package/components/display/display.prompt.md +30 -0
  269. package/components/feedback/Accordion.d.ts +13 -0
  270. package/components/feedback/Accordion.jsx +21 -0
  271. package/components/feedback/Accordion.vue +22 -0
  272. package/components/feedback/ActivityItem.d.ts +25 -0
  273. package/components/feedback/ActivityItem.jsx +39 -0
  274. package/components/feedback/ActivityItem.vue +46 -0
  275. package/components/feedback/Alert.d.ts +36 -0
  276. package/components/feedback/Alert.jsx +48 -0
  277. package/components/feedback/Alert.vue +59 -0
  278. package/components/feedback/Banner.d.ts +15 -0
  279. package/components/feedback/Banner.jsx +25 -0
  280. package/components/feedback/Banner.vue +25 -0
  281. package/components/feedback/ContextMenu.d.ts +8 -0
  282. package/components/feedback/ContextMenu.jsx +18 -0
  283. package/components/feedback/ContextMenu.vue +19 -0
  284. package/components/feedback/Drawer.d.ts +18 -0
  285. package/components/feedback/Drawer.jsx +26 -0
  286. package/components/feedback/Drawer.vue +24 -0
  287. package/components/feedback/Menu.d.ts +10 -0
  288. package/components/feedback/Menu.jsx +24 -0
  289. package/components/feedback/Menu.vue +21 -0
  290. package/components/feedback/Modal.d.ts +38 -0
  291. package/components/feedback/Modal.jsx +69 -0
  292. package/components/feedback/Modal.vue +65 -0
  293. package/components/feedback/Stepper.d.ts +9 -0
  294. package/components/feedback/Stepper.jsx +24 -0
  295. package/components/feedback/Stepper.vue +18 -0
  296. package/components/feedback/Timeline.d.ts +15 -0
  297. package/components/feedback/Timeline.jsx +27 -0
  298. package/components/feedback/Timeline.vue +21 -0
  299. package/components/feedback/_dir.card.html +13 -0
  300. package/components/feedback/feedback.prompt.md +35 -0
  301. package/components/forms/Checkbox.d.ts +13 -0
  302. package/components/forms/Checkbox.jsx +17 -0
  303. package/components/forms/Checkbox.vue +18 -0
  304. package/components/forms/Combobox.d.ts +13 -0
  305. package/components/forms/Combobox.jsx +34 -0
  306. package/components/forms/Combobox.vue +35 -0
  307. package/components/forms/DatePicker.d.ts +12 -0
  308. package/components/forms/DatePicker.jsx +48 -0
  309. package/components/forms/DatePicker.vue +46 -0
  310. package/components/forms/Dropzone.d.ts +20 -0
  311. package/components/forms/Dropzone.jsx +36 -0
  312. package/components/forms/Dropzone.vue +28 -0
  313. package/components/forms/Field.d.ts +13 -0
  314. package/components/forms/Field.jsx +13 -0
  315. package/components/forms/Field.vue +12 -0
  316. package/components/forms/Input.d.ts +18 -0
  317. package/components/forms/Input.jsx +35 -0
  318. package/components/forms/Input.vue +38 -0
  319. package/components/forms/MultiSelect.d.ts +14 -0
  320. package/components/forms/MultiSelect.jsx +33 -0
  321. package/components/forms/MultiSelect.vue +36 -0
  322. package/components/forms/NumberStepper.d.ts +13 -0
  323. package/components/forms/NumberStepper.jsx +15 -0
  324. package/components/forms/NumberStepper.vue +17 -0
  325. package/components/forms/Radio.vue +16 -0
  326. package/components/forms/RadioGroup.vue +11 -0
  327. package/components/forms/SearchInput.d.ts +12 -0
  328. package/components/forms/SearchInput.jsx +17 -0
  329. package/components/forms/SearchInput.vue +14 -0
  330. package/components/forms/Select.d.ts +14 -0
  331. package/components/forms/Select.jsx +17 -0
  332. package/components/forms/Select.vue +16 -0
  333. package/components/forms/Slider.d.ts +15 -0
  334. package/components/forms/Slider.jsx +21 -0
  335. package/components/forms/Slider.vue +23 -0
  336. package/components/forms/Switch.d.ts +31 -0
  337. package/components/forms/Switch.jsx +40 -0
  338. package/components/forms/Switch.vue +16 -0
  339. package/components/forms/_dir.card.html +13 -0
  340. package/components/forms/forms.prompt.md +23 -0
  341. package/components/icons/Icon.d.ts +19 -0
  342. package/components/icons/Icon.jsx +93 -0
  343. package/components/icons/Icon.prompt.md +8 -0
  344. package/components/icons/Icon.vue +12 -0
  345. package/components/icons/Unicon.d.ts +12 -0
  346. package/components/icons/Unicon.jsx +16 -0
  347. package/components/icons/Unicon.vue +15 -0
  348. package/components/icons/_dir.card.html +13 -0
  349. package/components/icons/feather-paths.js +2 -0
  350. package/components/icons/icon-paths.js +73 -0
  351. package/components/index.d.ts +87 -0
  352. package/components/index.js +110 -0
  353. package/components/navigation/Breadcrumb.d.ts +24 -0
  354. package/components/navigation/Breadcrumb.jsx +120 -0
  355. package/components/navigation/Breadcrumb.vue +94 -0
  356. package/components/navigation/DocTree.d.ts +18 -0
  357. package/components/navigation/DocTree.jsx +37 -0
  358. package/components/navigation/DocTree.vue +25 -0
  359. package/components/navigation/Sidebar.d.ts +29 -0
  360. package/components/navigation/Sidebar.jsx +75 -0
  361. package/components/navigation/Sidebar.vue +54 -0
  362. package/components/navigation/TopBar.d.ts +27 -0
  363. package/components/navigation/TopBar.jsx +44 -0
  364. package/components/navigation/TopBar.vue +51 -0
  365. package/components/navigation/Tree.d.ts +83 -0
  366. package/components/navigation/Tree.jsx +347 -0
  367. package/components/navigation/Tree.vue +258 -0
  368. package/components/navigation/_dir.card.html +13 -0
  369. package/components/navigation/navigation.prompt.md +22 -0
  370. package/components/pipeline/ConfigPanel.d.ts +18 -0
  371. package/components/pipeline/ConfigPanel.jsx +30 -0
  372. package/components/pipeline/ConfigPanel.vue +32 -0
  373. package/components/pipeline/DataPreview.d.ts +14 -0
  374. package/components/pipeline/DataPreview.jsx +24 -0
  375. package/components/pipeline/DataPreview.vue +21 -0
  376. package/components/pipeline/NodeCard.d.ts +47 -0
  377. package/components/pipeline/NodeCard.jsx +97 -0
  378. package/components/pipeline/NodeCard.vue +75 -0
  379. package/components/pipeline/PaletteItem.vue +15 -0
  380. package/components/pipeline/PaletteListItem.vue +15 -0
  381. package/components/pipeline/PalettePanel.d.ts +20 -0
  382. package/components/pipeline/PalettePanel.jsx +74 -0
  383. package/components/pipeline/PalettePanel.vue +45 -0
  384. package/components/pipeline/PipelineCanvas.d.ts +25 -0
  385. package/components/pipeline/PipelineCanvas.jsx +94 -0
  386. package/components/pipeline/PipelineCanvas.vue +73 -0
  387. package/components/pipeline/ZoomControls.d.ts +9 -0
  388. package/components/pipeline/ZoomControls.jsx +15 -0
  389. package/components/pipeline/ZoomControls.vue +15 -0
  390. package/components/pipeline/_dir.card.html +13 -0
  391. package/components/pipeline/pipeline.prompt.md +22 -0
  392. package/components/tabs/SegmentedControl.d.ts +11 -0
  393. package/components/tabs/SegmentedControl.jsx +21 -0
  394. package/components/tabs/SegmentedControl.vue +15 -0
  395. package/components/tabs/Tabs.d.ts +13 -0
  396. package/components/tabs/Tabs.jsx +52 -0
  397. package/components/tabs/Tabs.vue +39 -0
  398. package/components/tabs/ViewToggle.d.ts +8 -0
  399. package/components/tabs/ViewToggle.jsx +12 -0
  400. package/components/tabs/ViewToggle.vue +12 -0
  401. package/components/tabs/_dir.card.html +13 -0
  402. package/components/tabs/tabs.prompt.md +14 -0
  403. package/package.json +76 -0
  404. package/readme.md +150 -0
  405. package/styles.css +10 -0
  406. package/tokens/alpha.css +27 -0
  407. package/tokens/charts.css +55 -0
  408. package/tokens/colors-extended.css +40 -0
  409. package/tokens/colors.css +39 -0
  410. package/tokens/dark.css +96 -0
  411. package/tokens/fonts.css +4 -0
  412. package/tokens/interaction.css +48 -0
  413. package/tokens/layout.css +30 -0
  414. package/tokens/motion.css +22 -0
  415. package/tokens/tokens.d.ts +680 -0
  416. package/tokens/tokens.js +1018 -0
  417. package/tokens/tokens.json +2928 -0
  418. package/tokens/typography.css +22 -0
package/components/_cards/checkbox.card.html ADDED
@@ -0,0 +1,34 @@
1
+ <!-- @dsCard group="Components" viewport="700x280" name="Checkbox" subtitle="Checked · unchecked · indeterminate · disabled · sizes" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Checkbox } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [a,setA]=React.useState(true),[b,setB]=React.useState(false);
15
+ const [sm,setSm]=React.useState(true),[bare,setBare]=React.useState(false);
16
+ // Select-all: 7 rows, 3 initially picked — the header box reads checked / indeterminate / empty
17
+ const [picked,setPicked]=React.useState(3);
18
+ const all=picked===7, none=picked===0;
19
+ const [smPicked,setSmPicked]=React.useState(2);
20
+ const smAll=smPicked===5, smNone=smPicked===0;
21
+ return <div className="g">
22
+ <div><span className="lbl">Unchecked</span><Checkbox label="Include metadata" checked={b} onChange={setB}/></div>
23
+ <div><span className="lbl">Checked</span><Checkbox label="Debug Mode" checked={a} onChange={setA}/></div>
24
+ <div><span className="lbl">Indeterminate — md (select-all)</span><Checkbox label={all?"All 7 selected":none?"None selected":picked+" of 7 selected"} checked={all} indeterminate={!all&&!none} onChange={()=>setPicked(none?7:0)}/></div>
25
+ <div><span className="lbl">Indeterminate — sm (table header)</span><Checkbox size="sm" label={smAll?"All 5 rows":smNone?"No rows":smPicked+" of 5 rows"} checked={smAll} indeterminate={!smAll&&!smNone} onChange={()=>setSmPicked(smNone?5:0)}/></div>
26
+ <div><span className="lbl">Disabled, unchecked</span><Checkbox label="Locked by admin" disabled/></div>
27
+ <div><span className="lbl">Disabled, checked</span><Checkbox label="Always included" checked disabled/></div>
28
+ <div><span className="lbl">Small (table row)</span><Checkbox label="Row selected" size="sm" checked={sm} onChange={setSm}/></div>
29
+ <div><span className="lbl">No label (table header)</span><Checkbox checked={bare} onChange={setBare}/></div>
30
+ </div>;
31
+ }
32
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
33
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Checkbox.jsx","path":"../forms/Checkbox.jsx"}]); }, 0);
34
+ </script></body></html>
package/components/_cards/codeblock.card.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Components" viewport="700x330" name="Code Block" subtitle="SQL Preview / JSON export — mono with copy button" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);display:flex;gap:14px;box-sizing:border-box}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { CodeBlock } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div style={{display:"flex",gap:14,width:"100%"}}>
14
+ <CodeBlock language="sql" height={140} style={{flex:1,minWidth:0}} code={"SELECT so.id, so.entity, so.qty\nFROM sales_orders so\nJOIN product_dim pd\n ON so.product_id = pd.id\nWHERE so.status = 'ACTIVE'"}/>
15
+ <CodeBlock language="json" height={140} style={{flex:1,minWidth:0}} code={'{\n "FIN_CURRENCY_DEFAULT": "EUR",\n "FIN_FISCAL_YEAR_START": "04-01",\n "USER_SESSION_TIMEOUT": 60\n}'}/>
16
+ </div>;}
17
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
18
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"CodeBlock.jsx","path":"../data/CodeBlock.jsx"}]); }, 0);
19
+ </script></body></html>
package/components/_cards/combobox.card.html ADDED
@@ -0,0 +1,25 @@
1
+ <!-- @dsCard group="Components" viewport="700x330" name="Combobox" subtitle="Typeahead single-select — type to filter · keyboard nav · no-results" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px;align-items:start}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:6px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Combobox, Field } = window.KeybricksDesignSystem_71231a;
13
+ const SYSTEMS = ["SAP S/4HANA","Oracle NetSuite","Microsoft Dynamics 365","Workday Financials","Sage Intacct","QuickBooks Enterprise","Xero","Odoo ERP"];
14
+ function Sheet(){
15
+ const [a,setA]=React.useState(""); const [b,setB]=React.useState("SAP S/4HANA");
16
+ return <div className="g">
17
+ <div><span className="lbl">Empty — type "sap" to filter</span><Combobox options={SYSTEMS} value={a} onChange={setA} placeholder="Select source system..."/></div>
18
+ <div><span className="lbl">With value</span><Combobox options={SYSTEMS} value={b} onChange={setB}/></div>
19
+ <div><span className="lbl">In a Field</span><Field label="Target system" required><Combobox options={SYSTEMS} value={a} onChange={setA} placeholder="Select..."/></Field></div>
20
+ <div><span className="lbl">Disabled</span><Combobox options={SYSTEMS} value="Oracle NetSuite" disabled/></div>
21
+ </div>;
22
+ }
23
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
24
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Combobox.jsx","path":"../forms/Combobox.jsx"}]); }, 0);
25
+ </script></body></html>
package/components/_cards/context-menu.card.html ADDED
@@ -0,0 +1,21 @@
1
+ <!-- @dsCard group="Components" viewport="700x260" name="Context Menu" subtitle="Icons · plain text · danger item · long list" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:8px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { ContextMenu } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div className="grid">
14
+ <div className="col"><span className="lbl">With icons</span><ContextMenu items={[{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{divider:true},{label:"Delete",icon:"trash-2",danger:true}]}/></div>
15
+ <div className="col"><span className="lbl">Plain text, no icons</span><ContextMenu items={[{label:"Rename"},{label:"Move to..."},{label:"Archive"}]}/></div>
16
+ <div className="col"><span className="lbl">Danger only</span><ContextMenu items={[{label:"Remove from workflow",icon:"x",danger:true}]}/></div>
17
+ <div className="col"><span className="lbl">Longer list</span><ContextMenu items={[{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{label:"Export",icon:"download"},{label:"Run Test",icon:"play"},{divider:true},{label:"Move to Folder",icon:"folder"},{divider:true},{label:"Delete",icon:"trash-2",danger:true}]}/></div>
18
+ </div>;}
19
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
20
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"ContextMenu.jsx","path":"../feedback/ContextMenu.jsx"}]); }, 0);
21
+ </script></body></html>
package/components/_cards/datatable.card.html ADDED
@@ -0,0 +1,48 @@
1
+ <!-- @dsCard group="Components" viewport="700x460" name="Data Table" subtitle="Selectable comparison table · dense preview mode" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { DataTable, Select, Card } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [sel,setSel]=React.useState([0]);
15
+ const toggle=(w,v)=>{ if(w==="all") setSel(v?[0,1,2]:[]); else setSel(v?[...sel,w]:sel.filter(i=>i!==w)); };
16
+ return <div style={{display:"flex",flexDirection:"column",gap:20}}>
17
+ <div><span className="lbl">Default — selectable, with row actions</span>
18
+ <DataTable selectable selected={sel} onToggle={toggle} columns={[
19
+ {key:"module",label:"Module"},
20
+ {key:"code",label:"Code",mono:true},
21
+ {key:"cur",label:"Current Value"},
22
+ {key:"next",label:"New Value"},
23
+ {key:"action",label:"Action",render:()=> <Select size="sm" options={["New","Overwrite","Skip"]}/>},
24
+ ]} rows={[
25
+ {module:"Financial Settings",code:"FIN_CURRENCY_DEFAULT",cur:"USD",next:"EUR"},
26
+ {module:"Financial Settings",code:"FIN_DECIMAL_PLACES",cur:"2",next:"2"},
27
+ {module:"User Management",code:"USER_SESSION_TIMEOUT",cur:"30",next:"60"},
28
+ ]}/>
29
+ </div>
30
+ <div><span className="lbl">Dense — data-preview drawer style</span>
31
+ <DataTable dense columns={[
32
+ {key:"id",label:"ID",mono:true},{key:"entity",label:"Entity",mono:true},{key:"customer",label:"Customer",mono:true},{key:"batch",label:"Batch Code",mono:true},{key:"qty",label:"Qty",mono:true},
33
+ ]} rows={[
34
+ {id:"528563",entity:"HK",customer:"A",batch:"HYSTK-1",qty:"4100"},
35
+ {id:"528564",entity:"SG",customer:"B",batch:"HYSTK-4",qty:"1610"},
36
+ {id:"528565",entity:"HK",customer:"C",batch:"HYSTK-5",qty:"3200"},
37
+ ]}/>
38
+ </div>
39
+ <div><span className="lbl">Empty state</span>
40
+ <Card pad={false}><DataTable columns={[{key:"module",label:"Module"},{key:"code",label:"Code",mono:true},{key:"cur",label:"Current Value"}]} rows={[]}/>
41
+ <div style={{padding:"28px 0",textAlign:"center",fontSize:13,color:"var(--text-muted)"}}>No rows to display</div>
42
+ </Card>
43
+ </div>
44
+ </div>;
45
+ }
46
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
47
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"DataTable.jsx","path":"../data/DataTable.jsx"},{"name":"Select.jsx","path":"../forms/Select.jsx"},{"name":"Card.jsx","path":"../display/Card.jsx"}]); }, 0);
48
+ </script></body></html>
package/components/_cards/date-picker.card.html ADDED
@@ -0,0 +1,31 @@
1
+ <!-- @dsCard group="Components" viewport="700x430" name="Date Picker" subtitle="Input + month-grid popover — today outlined · selected filled" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:6px}.hint{font-size:11px;color:var(--text-secondary);padding-top:12px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { DatePicker, Field } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [d,setD]=React.useState("2026-08-14"); const [e,setE]=React.useState("");
15
+ return <div>
16
+ <div className="row">
17
+ <div><span className="lbl">With value — click to open</span><DatePicker value={d} onChange={setD}/></div>
18
+ <div><span className="lbl">Empty</span><DatePicker value={e} onChange={setE}/></div>
19
+ <div><span className="lbl">Error</span><DatePicker value="" error/></div>
20
+ <div><span className="lbl">Disabled</span><DatePicker value="2026-08-01" disabled/></div>
21
+ </div>
22
+ <div className="row" style={{paddingTop:16}}>
23
+ <Field label="Period start" required><DatePicker value={d} onChange={setD}/></Field>
24
+ <Field label="Period end" hint="Defaults to fiscal year end"><DatePicker value={e} onChange={setE}/></Field>
25
+ </div>
26
+ <div className="hint">Month-grid popover: chevron month nav, Monday-first week, today outlined in blue, selected day filled.</div>
27
+ </div>;
28
+ }
29
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
30
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"DatePicker.jsx","path":"../forms/DatePicker.jsx"}]); }, 0);
31
+ </script></body></html>
package/components/_cards/diffvalue.card.html ADDED
@@ -0,0 +1,21 @@
1
+ <!-- @dsCard group="Components" viewport="700x180" name="Diff Value" subtitle="Before → after change display (config migration)" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-subtle)}.code{font-family:var(--font-mono);font-size:12px;color:var(--text-primary)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { DiffValue } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div>
14
+ <div className="row"><span className="code">FIN_CURRENCY_DEFAULT</span><DiffValue from="USD" to="EUR" tone="warning"/></div>
15
+ <div className="row"><span className="code">USER_SESSION_TIMEOUT</span><DiffValue from="30" to="60" tone="warning"/></div>
16
+ <div className="row"><span className="code">USER_PASSWORD_MIN_LENGTH</span><DiffValue to="8" tone="success"/></div>
17
+ <div className="row" style={{borderBottom:"none"}}><span className="code">SYS_LOCALE_DEFAULT</span><DiffValue from="en-US" to="en-US" tone="neutral"/></div>
18
+ </div>;}
19
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
20
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"DiffValue.jsx","path":"../data/DiffValue.jsx"}]); }, 0);
21
+ </script></body></html>
package/components/_cards/divider.card.html ADDED
@@ -0,0 +1,24 @@
1
+ <!-- @dsCard group="Components" viewport="700x180" name="Divider" subtitle="Plain · labeled · vertical" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Divider, Button } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div style={{display:"flex",flexDirection:"column",gap:16}}>
14
+ <div><span className="lbl">Plain</span><Divider/></div>
15
+ <div><span className="lbl">Labeled</span><Divider label="OR"/></div>
16
+ <div><span className="lbl">Vertical, between actions</span>
17
+ <div style={{display:"flex",alignItems:"center",gap:10,height:32}}>
18
+ <Button variant="ghost" size="sm">Cancel</Button><Divider vertical/><Button size="sm">Save Settings</Button>
19
+ </div>
20
+ </div>
21
+ </div>;}
22
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
23
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Divider.jsx","path":"../display/Divider.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"}]); }, 0);
24
+ </script></body></html>
package/components/_cards/drawer.card.html ADDED
@@ -0,0 +1,30 @@
1
+ <!-- @dsCard group="Components" viewport="700x520" name="Drawer" subtitle="Slide-out detail panel — header · scrollable body · footer actions" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-app);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Drawer, Button, Field, Input, Select, KeyValueList, Divider } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [v,setV]=React.useState("EUR – Euro");
15
+ return <div>
16
+ <span className="lbl">Inline preview (overlay mode slides over the app with a scrim)</span>
17
+ <Drawer inline title="Reconciliation Rule" subtitle="RULE-2041 · Modified 2 hours ago" height={440}
18
+ footer={<React.Fragment><Button variant="outline">Cancel</Button><Button>Save Rule</Button></React.Fragment>}>
19
+ <div style={{display:"flex",flexDirection:"column",gap:14}}>
20
+ <Field label="Rule name" required><Input value="Intercompany balance match" onChange={()=>{}}/></Field>
21
+ <Field label="Base currency"><Select options={["EUR – Euro","USD – US Dollar","GBP – Pound Sterling"]} value={v} onChange={setV}/></Field>
22
+ <Divider label="Match summary"/>
23
+ <KeyValueList rows={[{label:"Tolerance",value:"±0.5%",mono:true},{label:"Matched pairs",value:"1,204",mono:true},{label:"Open items",value:"37",mono:true},{label:"Last run",value:"Today 09:41"}]}/>
24
+ </div>
25
+ </Drawer>
26
+ </div>;
27
+ }
28
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
29
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Drawer.jsx","path":"../feedback/Drawer.jsx"}]); }, 0);
30
+ </script></body></html>
package/components/_cards/dropdown-menu.card.html ADDED
@@ -0,0 +1,38 @@
1
+ <!-- @dsCard group="Components" viewport="700x420" name="Dropdown Menu" subtitle="Button · icon-only · ghost text · avatar triggers — icon items & plain-text items" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 16px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Menu, Button, IconButton, Avatar } = window.KeybricksDesignSystem_71231a;
13
+ const withIcons = [{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{divider:true},{label:"Delete",icon:"trash-2",danger:true}];
14
+ const plainText = [{label:"Name"},{label:"Date modified"},{label:"Size"},{divider:true},{label:"Custom order"}];
15
+ function Sheet(){return <div className="g">
16
+ <div><span className="lbl">Dark button trigger</span>
17
+ <Menu trigger={<Button variant="dark" icon="chevron-down" medium size="sm">Show</Button>} items={withIcons}/>
18
+ </div>
19
+ <div><span className="lbl">Outline button trigger</span>
20
+ <Menu trigger={<Button variant="outline" icon="chevron-down" iconPosition="right" size="sm">Sort by</Button>} items={plainText}/>
21
+ </div>
22
+ <div><span className="lbl">Ghost text trigger</span>
23
+ <Menu trigger={<Button variant="ghost" icon="chevron-down" iconPosition="right" size="sm" style={{padding:"0 4px",color:"var(--text-secondary)"}}>More options</Button>} items={withIcons}/>
24
+ </div>
25
+ <div><span className="lbl">Icon-only (kebab) trigger</span>
26
+ <Menu trigger={<IconButton icon="ellipsis" size="md" label="More"/>} items={withIcons}/>
27
+ </div>
28
+ <div><span className="lbl">Avatar trigger, right-aligned</span>
29
+ <Menu align="end" trigger={<Avatar name="Felix Chen" size={32}/>}
30
+ items={[{label:"Profile",icon:"circle-help"},{label:"Settings",icon:"settings"},{divider:true},{label:"Sign out",icon:"x",danger:true}]}/>
31
+ </div>
32
+ <div><span className="lbl">Plain-text items, no icons</span>
33
+ <Menu trigger={<Button variant="outline" icon="filter" iconPosition="right" size="sm">Filter</Button>} items={[{label:"All"},{label:"Active only"},{label:"Archived only"}]}/>
34
+ </div>
35
+ </div>;}
36
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
37
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Menu.jsx","path":"../feedback/Menu.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"},{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"},{"name":"Avatar.jsx","path":"../display/Avatar.jsx"}]); }, 0);
38
+ </script></body></html>
package/components/_cards/dropzone.card.html ADDED
@@ -0,0 +1,22 @@
1
+ <!-- @dsCard group="Components" viewport="924x588" name="Dropzone" subtitle="Empty · drag-over · uploaded · error · disabled" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Dropzone } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div className="g">
14
+ <div><span className="lbl">Empty</span><Dropzone height={140}/></div>
15
+ <div><span className="lbl">Drag over (drop a file to try)</span><Dropzone height={140} dragOver/></div>
16
+ <div><span className="lbl">Uploaded</span><Dropzone height={140} file="migration-config.json" onRemove={()=>{}}/></div>
17
+ <div><span className="lbl">Error</span><Dropzone height={140} error="File must be under 5MB"/></div>
18
+ <div><span className="lbl">Disabled</span><Dropzone height={140} disabled title="Upload unavailable" hint="Complete the previous step first"/></div>
19
+ </div>;}
20
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
21
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Dropzone.jsx","path":"../forms/Dropzone.jsx"}]); }, 0);
22
+ </script></body></html>
package/components/_cards/empty-state.card.html ADDED
@@ -0,0 +1,29 @@
1
+ <!-- @dsCard group="Components" viewport="924x547" name="Empty State" subtitle="First-run · no results · error — with and without action" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { EmptyState, Button, Card } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,alignItems:"start"}}>
14
+ <div><span className="lbl">First run — with action</span>
15
+ <Card pad={false}><EmptyState icon="file-text" title="No documents yet" hint="Documents you create or import will appear here." action={<Button icon="plus" size="sm">New Document</Button>}/></Card>
16
+ </div>
17
+ <div><span className="lbl">No search results</span>
18
+ <Card pad={false}><EmptyState icon="search" title="No matches for “FIN_04”" hint="Try a different keyword or clear the filters."/></Card>
19
+ </div>
20
+ <div><span className="lbl">Error — with retry</span>
21
+ <Card pad={false}><EmptyState icon="triangle-alert" title="Couldn’t load the run history" hint="The reconciliation service is unreachable." action={<Button variant="outline" size="sm" icon="refresh-cw">Retry</Button>}/></Card>
22
+ </div>
23
+ <div><span className="lbl">Filtered-out list</span>
24
+ <Card pad={false}><EmptyState icon="funnel" title="Nothing matches these filters" hint="3 filters active." action={<Button variant="text" size="sm">Clear filters</Button>}/></Card>
25
+ </div>
26
+ </div>;}
27
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
28
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Alert.jsx","path":"../feedback/Alert.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"}]); }, 0);
29
+ </script></body></html>
package/components/_cards/filter-bar.card.html ADDED
@@ -0,0 +1,34 @@
1
+ <!-- @dsCard group="Components" viewport="1000x620" name="Filter Bar (List Report)" subtitle="Fiori-style filter bar composed with a table — Adapt Filters · Go" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-app);padding:16px;font-family:var(--font-sans);box-sizing:border-box}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { FilterBar, Field, Select, MultiSelect, DatePicker, SearchInput, DataTable, Badge, Pagination, Card } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [status,setStatus]=React.useState(["Completed","Failed"]);
15
+ const [type,setType]=React.useState("All Types");
16
+ const [from,setFrom]=React.useState("2026-08-01");
17
+ const cols=[{key:"id",label:"Run ID",mono:true,width:110},{key:"doc",label:"Document"},{key:"status",label:"Status",render:(v)=><Badge tone={v==="Completed"?"success":v==="Failed"?"danger":"warning"}>{v}</Badge>},{key:"rows",label:"Rows",mono:true,align:"right"}];
18
+ const rows=[{id:"RUN-1892",doc:"August Close – Journal Import",status:"Completed",rows:"12,401"},{id:"RUN-1891",doc:"Vendor Master Sync",status:"Failed",rows:"—"},{id:"RUN-1890",doc:"FX Rates Refresh",status:"Completed",rows:"312"},{id:"RUN-1889",doc:"Intercompany Match",status:"Partial",rows:"8,204"}];
19
+ return <div style={{display:"flex",flexDirection:"column",gap:12}}>
20
+ <FilterBar variant="Standard" modified adaptCount={3} onGo={()=>{}}>
21
+ <Field label="Search"><SearchInput placeholder="Search runs..." style={{width:180}}/></Field>
22
+ <Field label="Status"><MultiSelect options={["Completed","Failed","Partial","Queued"]} value={status} onChange={setStatus} width={210}/></Field>
23
+ <Field label="Document type"><Select options={["All Types","Journal","Master Data","Rates"]} value={type} onChange={setType} style={{width:150}}/></Field>
24
+ <Field label="From date"><DatePicker value={from} onChange={setFrom} width={160}/></Field>
25
+ </FilterBar>
26
+ <Card pad={false}>
27
+ <DataTable columns={cols} rows={rows}/>
28
+ <div style={{padding:"10px 16px"}}><Pagination page={1} pageCount={12} total={224} pageSize={20}/></div>
29
+ </Card>
30
+ </div>;
31
+ }
32
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
33
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"FilterBar.jsx","path":"../data/FilterBar.jsx"},{"name":"MultiSelect.jsx","path":"../forms/MultiSelect.jsx"},{"name":"DatePicker.jsx","path":"../forms/DatePicker.jsx"}]); }, 0);
34
+ </script></body></html>
package/components/_cards/icon-button.card.html ADDED
@@ -0,0 +1,27 @@
1
+ <!-- @dsCard group="Components" viewport="700x220" name="Icon Button" subtitle="Sizes · active · muted · danger · loading · disabled" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;gap:10px;align-items:center;margin-bottom:14px}.lbl{width:76px;flex-shrink:0;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { IconButton } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div>
14
+ <div className="row"><span className="lbl">Sizes</span>
15
+ <IconButton icon="bell" size="lg"/><IconButton icon="arrow-left" size="md"/><IconButton icon="list" size="sm"/><IconButton icon="ellipsis" size="xs"/>
16
+ </div>
17
+ <div className="row"><span className="lbl">States</span>
18
+ <IconButton icon="layout-grid" size="md" active label="Active"/>
19
+ <IconButton icon="settings" size="md" muted label="Muted"/>
20
+ <IconButton icon="trash-2" size="md" danger label="Delete"/>
21
+ <IconButton icon="refresh-cw" size="md" loading label="Loading"/>
22
+ <IconButton icon="trash-2" size="md" disabled label="Disabled"/>
23
+ </div>
24
+ </div>;}
25
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
26
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"}]); }, 0);
27
+ </script></body></html>
package/components/_cards/icons-1-core.card.html ADDED
@@ -0,0 +1,49 @@
1
+ <!-- @dsCard group="Icons" viewport="700x560" name="Core Set" subtitle="The 70 stroke glyphs the product itself uses — keyword search · click to download the SVG" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/svg-download.js"></script>
9
+ <script src="../../assets/icons/icon-index.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:14px 16px;box-sizing:border-box}</style></head>
11
+ <body><div id="root"></div>
12
+ <script type="text/babel">
13
+ const { Icon, ICON_PATHS, SearchInput, Tag } = window.KeybricksDesignSystem_71231a;
14
+ function Sheet(){
15
+ const [all,setAll]=React.useState([]);
16
+ const [q,setQ]=React.useState("");
17
+ const [copied,setCopied]=React.useState("");
18
+ React.useEffect(()=>{
19
+ const build = function(d){
20
+ const byName = {}; (d||[]).forEach(function(x){ byName[x.name]=x; });
21
+ setAll(Object.keys(ICON_PATHS).map(function(n){ return byName[n] || {name:n, tags:[n.replace(/-/g," ")]}; }));
22
+ };
23
+ if (window.KB_ICON_INDEX) build(window.KB_ICON_INDEX);
24
+ else fetch("../../assets/icons/icon-index.json").then(r=>r.json()).then(build).catch(function(){ build([]); });
25
+ },[]);
26
+ const needle=q.trim().toLowerCase();
27
+ const shown=needle?all.filter(i=>i.name.includes(needle)||i.tags.some(t=>t.toLowerCase().includes(needle))):all;
28
+ const grab=(n)=>{ const inner=(ICON_PATHS&&ICON_PATHS[n])||(window.KeybricksDesignSystem_71231a.FEATHER_PATHS||{})[n]; if(inner&&window.KBSaveSVG)KBSaveSVG(n,inner); setCopied(n); setTimeout(()=>setCopied(""),1200); };
29
+ return <div>
30
+ <div style={{display:"flex",alignItems:"center",gap:12}}>
31
+ <SearchInput value={q} onChange={(v)=>setQ(typeof v==="string"?v:(v&&v.target?v.target.value:""))} placeholder="Search the core set — try “delete”, “run”, “export”..." style={{flex:1}}/>
32
+ <Tag tone="info">{shown.length} / {all.length}</Tag>
33
+ </div>
34
+ <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(74px,1fr))",gap:2,paddingTop:12}}>
35
+ {shown.map(function(i){
36
+ return <button key={i.name} type="button" onClick={()=>grab(i.name)} title={i.name+" — "+i.tags.join(", ")}
37
+ style={{display:"flex",flexDirection:"column",alignItems:"center",gap:6,padding:"10px 2px 8px",border:"1px solid transparent",borderRadius:8,background:copied===i.name?"var(--soft-bg)":"transparent",cursor:"pointer",color:"var(--text-body)",overflow:"hidden"}}
38
+ onMouseEnter={(e)=>{e.currentTarget.style.background="var(--bg-hover)";e.currentTarget.style.borderColor="var(--border-subtle)";}}
39
+ onMouseLeave={(e)=>{e.currentTarget.style.background=copied===i.name?"var(--soft-bg)":"transparent";e.currentTarget.style.borderColor="transparent";}}>
40
+ <Icon name={i.name} size={18}/>
41
+ <span style={{fontFamily:"var(--font-sans)",fontSize:9,lineHeight:1.25,color:copied===i.name?"var(--action-primary)":"var(--text-muted)",textAlign:"center",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{copied===i.name?"saved":i.name}</span>
42
+ </button>;
43
+ })}
44
+ </div>
45
+ {shown.length===0 ? <div style={{padding:"28px 0",textAlign:"center",fontFamily:"var(--font-sans)",fontSize:12,color:"var(--text-muted)"}}>No icon matches “{q}”</div> : null}
46
+ </div>;
47
+ }
48
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
49
+ </script></body></html>
package/components/_cards/icons-2-feather.card.html ADDED
@@ -0,0 +1,39 @@
1
+ <!-- @dsCard group="Icons" viewport="700x560" name="Feather Library" subtitle="318 stroke icons (core + all of Feather) · keyword search · click to download the SVG" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/svg-download.js"></script>
9
+ <script src="../../assets/icons/icon-index.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:9px;color:var(--text-secondary);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta{font-size:11px;color:var(--text-muted);padding-top:8px}</style></head>
11
+ <body><div id="root"></div>
12
+ <script type="text/babel">
13
+ const { Icon, SearchInput, Tag, ICON_PATHS, FEATHER_PATHS } = window.KeybricksDesignSystem_71231a;
14
+ function Gallery(){
15
+ const [all,setAll]=React.useState([]);
16
+ const [q,setQ]=React.useState("");
17
+ const [copied,setCopied]=React.useState("");
18
+ React.useEffect(()=>{
19
+ if (window.KB_ICON_INDEX) setAll(window.KB_ICON_INDEX);
20
+ else fetch("../../assets/icons/icon-index.json").then(r=>r.json()).then(setAll).catch(function(){});
21
+ },[]);
22
+ const needle=q.trim().toLowerCase();
23
+ const shown=needle?all.filter(i=>i.name.includes(needle)||i.tags.some(t=>t.toLowerCase().includes(needle))):all;
24
+ const grab=(n)=>{ const inner=(ICON_PATHS&&ICON_PATHS[n])||(FEATHER_PATHS&&FEATHER_PATHS[n]); if(inner&&window.KBSaveSVG)KBSaveSVG(n,inner); setCopied(n); setTimeout(()=>setCopied(""),1200); };
25
+ return <div>
26
+ <div style={{display:"flex",alignItems:"center",gap:12}}>
27
+ <SearchInput value={q} onChange={(v)=>setQ(typeof v==="string"?v:(v&&v.target?v.target.value:""))} placeholder="Search 318 icons — try “money”, “arrow”, “video”..." style={{flex:1}}/>
28
+ <Tag tone="info">{shown.length} / {all.length}</Tag>
29
+ </div>
30
+ <div className="grid">
31
+ {shown.map(i=><div key={i.name} className="tile" title={i.name+" — "+i.tags.join(", ")} onClick={()=>grab(i.name)} style={copied===i.name?{borderColor:"var(--focus-border)",background:"var(--soft-bg)"}:null}>
32
+ <Icon name={i.name} size={18}/><span>{copied===i.name?"saved":i.name}</span>
33
+ </div>)}
34
+ </div>
35
+ <div className="meta">Core set (extracted from the source file) + full Feather set in the same 24-grid stroke-2 style — both render through <code>&lt;Icon name="…"/&gt;</code>. Hover a tile for its keywords; click to download that glyph as a 24×24 SVG file.</div>
36
+ </div>;
37
+ }
38
+ ReactDOM.createRoot(document.getElementById("root")).render(<Gallery/>);
39
+ </script></body></html>