@sixthshift/design-system 0.2.1 → 0.4.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 (604) hide show
  1. package/README.md +242 -33
  2. package/dist/components/Badge/Badge.d.ts +65 -7
  3. package/dist/components/Badge/Badge.d.ts.map +1 -1
  4. package/dist/components/Badge/Badge.js +56 -46
  5. package/dist/components/Badge/Badge.js.map +1 -1
  6. package/dist/components/Badge/index.d.ts +1 -1
  7. package/dist/components/Badge/index.d.ts.map +1 -1
  8. package/dist/components/Badge/index.js +1 -1
  9. package/dist/components/Badge/index.js.map +1 -1
  10. package/dist/components/BarChart/BarChart.d.ts +20 -2
  11. package/dist/components/BarChart/BarChart.d.ts.map +1 -1
  12. package/dist/components/BarChart/BarChart.js +17 -3
  13. package/dist/components/BarChart/BarChart.js.map +1 -1
  14. package/dist/components/Button/Button.d.ts +85 -6
  15. package/dist/components/Button/Button.d.ts.map +1 -1
  16. package/dist/components/Button/Button.js +97 -106
  17. package/dist/components/Button/Button.js.map +1 -1
  18. package/dist/components/Button/index.d.ts +1 -1
  19. package/dist/components/Button/index.d.ts.map +1 -1
  20. package/dist/components/Button/index.js +1 -1
  21. package/dist/components/Button/index.js.map +1 -1
  22. package/dist/components/Calendar/Calendar.d.ts +31 -1
  23. package/dist/components/Calendar/Calendar.d.ts.map +1 -1
  24. package/dist/components/Calendar/Calendar.js +94 -225
  25. package/dist/components/Calendar/Calendar.js.map +1 -1
  26. package/dist/components/Calendar/CalendarView.d.ts +15 -0
  27. package/dist/components/Calendar/CalendarView.d.ts.map +1 -0
  28. package/dist/components/Calendar/CalendarView.js +263 -0
  29. package/dist/components/Calendar/CalendarView.js.map +1 -0
  30. package/dist/components/Calendar/calendar.types.d.ts +87 -27
  31. package/dist/components/Calendar/calendar.types.d.ts.map +1 -1
  32. package/dist/components/Calendar/calendar.types.js +10 -3
  33. package/dist/components/Calendar/calendar.types.js.map +1 -1
  34. package/dist/components/Calendar/index.d.ts +16 -2
  35. package/dist/components/Calendar/index.d.ts.map +1 -1
  36. package/dist/components/Calendar/index.js +15 -1
  37. package/dist/components/Calendar/index.js.map +1 -1
  38. package/dist/components/Card/Card.d.ts +13 -0
  39. package/dist/components/Card/Card.d.ts.map +1 -1
  40. package/dist/components/Card/Card.js +15 -2
  41. package/dist/components/Card/Card.js.map +1 -1
  42. package/dist/components/Checkbox/Checkbox.d.ts +21 -0
  43. package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
  44. package/dist/components/Checkbox/Checkbox.js +22 -1
  45. package/dist/components/Checkbox/Checkbox.js.map +1 -1
  46. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +22 -0
  47. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
  48. package/dist/components/CheckboxGroup/CheckboxGroup.js +22 -0
  49. package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
  50. package/dist/components/Code/Editor/Editor.js +2 -2
  51. package/dist/components/Code/Editor/Editor.js.map +1 -1
  52. package/dist/components/Code/Editor/themes.d.ts +2 -2
  53. package/dist/components/Code/Editor/themes.d.ts.map +1 -1
  54. package/dist/components/Code/Editor/themes.js +50 -32
  55. package/dist/components/Code/Editor/themes.js.map +1 -1
  56. package/dist/components/Code/ValidationStatus/ValidationStatus.d.ts.map +1 -1
  57. package/dist/components/Code/ValidationStatus/ValidationStatus.js.map +1 -1
  58. package/dist/components/DatePicker/DatePicker.d.ts +45 -2
  59. package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
  60. package/dist/components/DatePicker/DatePicker.js +228 -11
  61. package/dist/components/DatePicker/DatePicker.js.map +1 -1
  62. package/dist/components/DatePicker/DateSegments.d.ts +60 -0
  63. package/dist/components/DatePicker/DateSegments.d.ts.map +1 -0
  64. package/dist/components/DatePicker/DateSegments.js +80 -0
  65. package/dist/components/DatePicker/DateSegments.js.map +1 -0
  66. package/dist/components/DatePicker/datepicker.types.d.ts +53 -37
  67. package/dist/components/DatePicker/datepicker.types.d.ts.map +1 -1
  68. package/dist/components/DatePicker/datepicker.types.js +5 -3
  69. package/dist/components/DatePicker/datepicker.types.js.map +1 -1
  70. package/dist/components/DatePicker/index.d.ts +10 -1
  71. package/dist/components/DatePicker/index.d.ts.map +1 -1
  72. package/dist/components/DatePicker/index.js +8 -0
  73. package/dist/components/DatePicker/index.js.map +1 -1
  74. package/dist/components/DateRangePicker/DateRangePicker.d.ts +22 -3
  75. package/dist/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
  76. package/dist/components/DateRangePicker/DateRangePicker.js +38 -24
  77. package/dist/components/DateRangePicker/DateRangePicker.js.map +1 -1
  78. package/dist/components/DateRangePicker/daterangepicker.types.d.ts +26 -21
  79. package/dist/components/DateRangePicker/daterangepicker.types.d.ts.map +1 -1
  80. package/dist/components/DateRangePicker/daterangepicker.types.js +6 -0
  81. package/dist/components/DateRangePicker/daterangepicker.types.js.map +1 -1
  82. package/dist/components/DateRangePicker/index.d.ts +8 -1
  83. package/dist/components/DateRangePicker/index.d.ts.map +1 -1
  84. package/dist/components/DateRangePicker/index.js +6 -0
  85. package/dist/components/DateRangePicker/index.js.map +1 -1
  86. package/dist/components/DateTimePicker/DateTimePicker.d.ts +32 -4
  87. package/dist/components/DateTimePicker/DateTimePicker.d.ts.map +1 -1
  88. package/dist/components/DateTimePicker/DateTimePicker.js +133 -42
  89. package/dist/components/DateTimePicker/DateTimePicker.js.map +1 -1
  90. package/dist/components/DateTimePicker/DateTimeSegments.d.ts +41 -0
  91. package/dist/components/DateTimePicker/DateTimeSegments.d.ts.map +1 -0
  92. package/dist/components/DateTimePicker/DateTimeSegments.js +67 -0
  93. package/dist/components/DateTimePicker/DateTimeSegments.js.map +1 -0
  94. package/dist/components/DateTimePicker/datetimepicker.types.d.ts +26 -18
  95. package/dist/components/DateTimePicker/datetimepicker.types.d.ts.map +1 -1
  96. package/dist/components/DateTimePicker/datetimepicker.types.js +10 -0
  97. package/dist/components/DateTimePicker/datetimepicker.types.js.map +1 -1
  98. package/dist/components/DateTimePicker/index.d.ts +8 -1
  99. package/dist/components/DateTimePicker/index.d.ts.map +1 -1
  100. package/dist/components/DateTimePicker/index.js +6 -0
  101. package/dist/components/DateTimePicker/index.js.map +1 -1
  102. package/dist/components/DateTimeRangePicker/DateTimeRangePicker.d.ts +30 -4
  103. package/dist/components/DateTimeRangePicker/DateTimeRangePicker.d.ts.map +1 -1
  104. package/dist/components/DateTimeRangePicker/DateTimeRangePicker.js +171 -72
  105. package/dist/components/DateTimeRangePicker/DateTimeRangePicker.js.map +1 -1
  106. package/dist/components/DateTimeRangePicker/datetimerangepicker.types.d.ts +28 -19
  107. package/dist/components/DateTimeRangePicker/datetimerangepicker.types.d.ts.map +1 -1
  108. package/dist/components/DateTimeRangePicker/datetimerangepicker.types.js +8 -0
  109. package/dist/components/DateTimeRangePicker/datetimerangepicker.types.js.map +1 -1
  110. package/dist/components/DateTimeRangePicker/index.d.ts +8 -0
  111. package/dist/components/DateTimeRangePicker/index.d.ts.map +1 -1
  112. package/dist/components/DateTimeRangePicker/index.js +7 -0
  113. package/dist/components/DateTimeRangePicker/index.js.map +1 -1
  114. package/dist/components/Field/Field.d.ts +18 -20
  115. package/dist/components/Field/Field.d.ts.map +1 -1
  116. package/dist/components/Field/Field.js +22 -5
  117. package/dist/components/Field/Field.js.map +1 -1
  118. package/dist/components/FormField/FormField.d.ts +15 -0
  119. package/dist/components/FormField/FormField.d.ts.map +1 -1
  120. package/dist/components/FormField/FormField.js +15 -0
  121. package/dist/components/FormField/FormField.js.map +1 -1
  122. package/dist/components/HoverCard/HoverCard.d.ts +6 -0
  123. package/dist/components/HoverCard/HoverCard.d.ts.map +1 -1
  124. package/dist/components/HoverCard/HoverCard.js +6 -0
  125. package/dist/components/HoverCard/HoverCard.js.map +1 -1
  126. package/dist/components/Input/Input.d.ts +15 -0
  127. package/dist/components/Input/Input.d.ts.map +1 -1
  128. package/dist/components/Input/Input.js +18 -3
  129. package/dist/components/Input/Input.js.map +1 -1
  130. package/dist/components/LineChart/LineChart.d.ts +35 -2
  131. package/dist/components/LineChart/LineChart.d.ts.map +1 -1
  132. package/dist/components/LineChart/LineChart.js +22 -3
  133. package/dist/components/LineChart/LineChart.js.map +1 -1
  134. package/dist/components/Markdown/Markdown.d.ts +19 -4
  135. package/dist/components/Markdown/Markdown.d.ts.map +1 -1
  136. package/dist/components/Markdown/Markdown.js +20 -2
  137. package/dist/components/Markdown/Markdown.js.map +1 -1
  138. package/dist/components/Message/Message.d.ts +49 -4
  139. package/dist/components/Message/Message.d.ts.map +1 -1
  140. package/dist/components/Message/Message.js +62 -11
  141. package/dist/components/Message/Message.js.map +1 -1
  142. package/dist/components/Message/index.d.ts +1 -1
  143. package/dist/components/Message/index.d.ts.map +1 -1
  144. package/dist/components/Modal/Modal.d.ts +60 -5
  145. package/dist/components/Modal/Modal.d.ts.map +1 -1
  146. package/dist/components/Modal/Modal.js +52 -6
  147. package/dist/components/Modal/Modal.js.map +1 -1
  148. package/dist/components/Modal/components/ModalContext.d.ts +14 -0
  149. package/dist/components/Modal/components/ModalContext.d.ts.map +1 -1
  150. package/dist/components/Modal/components/ModalContext.js.map +1 -1
  151. package/dist/components/Modal/components/ModalHeader.d.ts.map +1 -1
  152. package/dist/components/Modal/components/ModalHeader.js +13 -2
  153. package/dist/components/Modal/components/ModalHeader.js.map +1 -1
  154. package/dist/components/Popover/Popover.d.ts +29 -0
  155. package/dist/components/Popover/Popover.d.ts.map +1 -1
  156. package/dist/components/Popover/Popover.js +36 -0
  157. package/dist/components/Popover/Popover.js.map +1 -1
  158. package/dist/components/Popover/components/PopoverBody.d.ts.map +1 -1
  159. package/dist/components/Popover/components/PopoverBody.js +5 -2
  160. package/dist/components/Popover/components/PopoverBody.js.map +1 -1
  161. package/dist/components/Popover/components/PopoverContext.d.ts +1 -0
  162. package/dist/components/Popover/components/PopoverContext.d.ts.map +1 -1
  163. package/dist/components/Popover/components/PopoverContext.js.map +1 -1
  164. package/dist/components/Popover/components/PopoverTrigger.d.ts.map +1 -1
  165. package/dist/components/Popover/components/PopoverTrigger.js +2 -2
  166. package/dist/components/Popover/components/PopoverTrigger.js.map +1 -1
  167. package/dist/components/ProgressBar/ProgressBar.d.ts +16 -1
  168. package/dist/components/ProgressBar/ProgressBar.d.ts.map +1 -1
  169. package/dist/components/ProgressBar/ProgressBar.js +19 -3
  170. package/dist/components/ProgressBar/ProgressBar.js.map +1 -1
  171. package/dist/components/RadioButton/RadioButton.d.ts +26 -0
  172. package/dist/components/RadioButton/RadioButton.d.ts.map +1 -1
  173. package/dist/components/RadioButton/RadioButton.js +35 -1
  174. package/dist/components/RadioButton/RadioButton.js.map +1 -1
  175. package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts +26 -0
  176. package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts.map +1 -1
  177. package/dist/components/RadioButtonGroup/RadioButtonGroup.js +33 -0
  178. package/dist/components/RadioButtonGroup/RadioButtonGroup.js.map +1 -1
  179. package/dist/components/SearchInput/SearchInput.d.ts +10 -0
  180. package/dist/components/SearchInput/SearchInput.d.ts.map +1 -1
  181. package/dist/components/SearchInput/SearchInput.js +12 -1
  182. package/dist/components/SearchInput/SearchInput.js.map +1 -1
  183. package/dist/components/Select/Select.d.ts +10 -2
  184. package/dist/components/Select/Select.d.ts.map +1 -1
  185. package/dist/components/Select/Select.js +63 -18
  186. package/dist/components/Select/Select.js.map +1 -1
  187. package/dist/components/Select/SelectDropdown.d.ts +14 -2
  188. package/dist/components/Select/SelectDropdown.d.ts.map +1 -1
  189. package/dist/components/Select/SelectDropdown.js +20 -4
  190. package/dist/components/Select/SelectDropdown.js.map +1 -1
  191. package/dist/components/Select/SelectTrigger.d.ts +10 -3
  192. package/dist/components/Select/SelectTrigger.d.ts.map +1 -1
  193. package/dist/components/Select/SelectTrigger.js +12 -3
  194. package/dist/components/Select/SelectTrigger.js.map +1 -1
  195. package/dist/components/Select/useSelectKeyboard.d.ts +15 -1
  196. package/dist/components/Select/useSelectKeyboard.d.ts.map +1 -1
  197. package/dist/components/Select/useSelectKeyboard.js +73 -65
  198. package/dist/components/Select/useSelectKeyboard.js.map +1 -1
  199. package/dist/components/Separator/Separator.d.ts +10 -0
  200. package/dist/components/Separator/Separator.d.ts.map +1 -1
  201. package/dist/components/Separator/Separator.js +10 -0
  202. package/dist/components/Separator/Separator.js.map +1 -1
  203. package/dist/components/Sheet/Sheet.d.ts +25 -5
  204. package/dist/components/Sheet/Sheet.d.ts.map +1 -1
  205. package/dist/components/Sheet/Sheet.js +24 -6
  206. package/dist/components/Sheet/Sheet.js.map +1 -1
  207. package/dist/components/Sheet/components/SheetContext.d.ts +10 -0
  208. package/dist/components/Sheet/components/SheetContext.d.ts.map +1 -1
  209. package/dist/components/Sheet/components/SheetContext.js.map +1 -1
  210. package/dist/components/Sheet/components/SheetFooter.js +1 -1
  211. package/dist/components/Sheet/components/SheetFooter.js.map +1 -1
  212. package/dist/components/Sheet/components/SheetHeader.d.ts.map +1 -1
  213. package/dist/components/Sheet/components/SheetHeader.js +11 -2
  214. package/dist/components/Sheet/components/SheetHeader.js.map +1 -1
  215. package/dist/components/Sparkline/Sparkline.d.ts +21 -2
  216. package/dist/components/Sparkline/Sparkline.d.ts.map +1 -1
  217. package/dist/components/Sparkline/Sparkline.js +16 -3
  218. package/dist/components/Sparkline/Sparkline.js.map +1 -1
  219. package/dist/components/Spinner/Spinner.d.ts +27 -2
  220. package/dist/components/Spinner/Spinner.d.ts.map +1 -1
  221. package/dist/components/Spinner/Spinner.js +28 -3
  222. package/dist/components/Spinner/Spinner.js.map +1 -1
  223. package/dist/components/Switch/Switch.d.ts +18 -0
  224. package/dist/components/Switch/Switch.d.ts.map +1 -1
  225. package/dist/components/Switch/Switch.js +19 -1
  226. package/dist/components/Switch/Switch.js.map +1 -1
  227. package/dist/components/Tabs/Tabs.d.ts +8 -2
  228. package/dist/components/Tabs/Tabs.d.ts.map +1 -1
  229. package/dist/components/Tabs/Tabs.js +6 -0
  230. package/dist/components/Tabs/Tabs.js.map +1 -1
  231. package/dist/components/Tabs/components/TabsList.d.ts +1 -1
  232. package/dist/components/Tabs/components/TabsList.d.ts.map +1 -1
  233. package/dist/components/Tabs/components/TabsList.js +5 -4
  234. package/dist/components/Tabs/components/TabsList.js.map +1 -1
  235. package/dist/components/Tabs/components/TabsPanels.d.ts +1 -1
  236. package/dist/components/Tabs/components/TabsPanels.d.ts.map +1 -1
  237. package/dist/components/Tabs/components/TabsPanels.js +5 -3
  238. package/dist/components/Tabs/components/TabsPanels.js.map +1 -1
  239. package/dist/components/Tabs/components/TabsTrigger.d.ts.map +1 -1
  240. package/dist/components/Tabs/components/TabsTrigger.js +22 -6
  241. package/dist/components/Tabs/components/TabsTrigger.js.map +1 -1
  242. package/dist/components/TagChip/TagChip.d.ts +16 -13
  243. package/dist/components/TagChip/TagChip.d.ts.map +1 -1
  244. package/dist/components/TagChip/TagChip.js +18 -3
  245. package/dist/components/TagChip/TagChip.js.map +1 -1
  246. package/dist/components/TagInput/TagInput.d.ts +12 -9
  247. package/dist/components/TagInput/TagInput.d.ts.map +1 -1
  248. package/dist/components/TagInput/TagInput.js +16 -4
  249. package/dist/components/TagInput/TagInput.js.map +1 -1
  250. package/dist/components/Text/Text.d.ts +9 -0
  251. package/dist/components/Text/Text.d.ts.map +1 -1
  252. package/dist/components/Text/Text.js +9 -0
  253. package/dist/components/Text/Text.js.map +1 -1
  254. package/dist/components/TextInline/TextInline.d.ts +15 -4
  255. package/dist/components/TextInline/TextInline.d.ts.map +1 -1
  256. package/dist/components/TextInline/TextInline.js +11 -0
  257. package/dist/components/TextInline/TextInline.js.map +1 -1
  258. package/dist/components/Textarea/Textarea.d.ts +12 -0
  259. package/dist/components/Textarea/Textarea.d.ts.map +1 -1
  260. package/dist/components/Textarea/Textarea.js +13 -1
  261. package/dist/components/Textarea/Textarea.js.map +1 -1
  262. package/dist/components/TimePicker/TimeColumn.d.ts +10 -1
  263. package/dist/components/TimePicker/TimeColumn.d.ts.map +1 -1
  264. package/dist/components/TimePicker/TimeColumn.js +8 -1
  265. package/dist/components/TimePicker/TimeColumn.js.map +1 -1
  266. package/dist/components/TimePicker/TimePicker.d.ts +34 -2
  267. package/dist/components/TimePicker/TimePicker.d.ts.map +1 -1
  268. package/dist/components/TimePicker/TimePicker.js +118 -15
  269. package/dist/components/TimePicker/TimePicker.js.map +1 -1
  270. package/dist/components/TimePicker/TimeSegments.d.ts +50 -0
  271. package/dist/components/TimePicker/TimeSegments.d.ts.map +1 -0
  272. package/dist/components/TimePicker/TimeSegments.js +93 -0
  273. package/dist/components/TimePicker/TimeSegments.js.map +1 -0
  274. package/dist/components/TimePicker/timepicker.hooks.d.ts +0 -4
  275. package/dist/components/TimePicker/timepicker.hooks.d.ts.map +1 -1
  276. package/dist/components/TimePicker/timepicker.hooks.js +1 -23
  277. package/dist/components/TimePicker/timepicker.hooks.js.map +1 -1
  278. package/dist/components/TimePicker/timepicker.types.d.ts +14 -15
  279. package/dist/components/TimePicker/timepicker.types.d.ts.map +1 -1
  280. package/dist/components/TimePicker/timepicker.types.js +4 -3
  281. package/dist/components/TimePicker/timepicker.types.js.map +1 -1
  282. package/dist/components/Toast/Toast.d.ts +27 -0
  283. package/dist/components/Toast/Toast.d.ts.map +1 -1
  284. package/dist/components/Toast/Toast.js +28 -1
  285. package/dist/components/Toast/Toast.js.map +1 -1
  286. package/dist/components/Toggle/Toggle.d.ts +31 -12
  287. package/dist/components/Toggle/Toggle.d.ts.map +1 -1
  288. package/dist/components/Toggle/Toggle.js +19 -31
  289. package/dist/components/Toggle/Toggle.js.map +1 -1
  290. package/dist/components/Toggle/index.d.ts +1 -1
  291. package/dist/components/Toggle/index.d.ts.map +1 -1
  292. package/dist/components/Toggle/index.js +1 -1
  293. package/dist/components/Toggle/index.js.map +1 -1
  294. package/dist/components/ToggleGroup/ToggleGroup.d.ts +17 -0
  295. package/dist/components/ToggleGroup/ToggleGroup.d.ts.map +1 -1
  296. package/dist/components/ToggleGroup/ToggleGroup.js +17 -0
  297. package/dist/components/ToggleGroup/ToggleGroup.js.map +1 -1
  298. package/dist/components/ToggleGroup/ToggleGroupItem.d.ts +1 -1
  299. package/dist/components/ToggleGroup/ToggleGroupItem.d.ts.map +1 -1
  300. package/dist/components/ToggleGroup/ToggleGroupItem.js +7 -6
  301. package/dist/components/ToggleGroup/ToggleGroupItem.js.map +1 -1
  302. package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts +4 -3
  303. package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts.map +1 -1
  304. package/dist/components/ToggleGroup/ToggleGroupMultiple.js +2 -2
  305. package/dist/components/ToggleGroup/ToggleGroupMultiple.js.map +1 -1
  306. package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts +4 -3
  307. package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts.map +1 -1
  308. package/dist/components/ToggleGroup/ToggleGroupSingle.js +2 -2
  309. package/dist/components/ToggleGroup/ToggleGroupSingle.js.map +1 -1
  310. package/dist/components/ToggleGroup/toggleGroup.types.d.ts +12 -3
  311. package/dist/components/ToggleGroup/toggleGroup.types.d.ts.map +1 -1
  312. package/dist/components/Tooltip/Tooltip.d.ts +6 -0
  313. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
  314. package/dist/components/Tooltip/Tooltip.js +6 -0
  315. package/dist/components/Tooltip/Tooltip.js.map +1 -1
  316. package/dist/date-time/index.d.ts +2 -0
  317. package/dist/date-time/index.d.ts.map +1 -1
  318. package/dist/date-time/index.js +9 -1
  319. package/dist/date-time/index.js.map +1 -1
  320. package/dist/date-time/iso.d.ts +261 -0
  321. package/dist/date-time/iso.d.ts.map +1 -0
  322. package/dist/date-time/iso.js +358 -0
  323. package/dist/date-time/iso.js.map +1 -0
  324. package/dist/date-time/now.d.ts +7 -6
  325. package/dist/date-time/now.d.ts.map +1 -1
  326. package/dist/date-time/now.js +3 -3
  327. package/dist/date-time/now.js.map +1 -1
  328. package/dist/internal/PickerField.d.ts +45 -0
  329. package/dist/internal/PickerField.d.ts.map +1 -0
  330. package/dist/internal/PickerField.js +24 -0
  331. package/dist/internal/PickerField.js.map +1 -0
  332. package/dist/internal/SegmentedField.d.ts +98 -0
  333. package/dist/internal/SegmentedField.d.ts.map +1 -0
  334. package/dist/internal/SegmentedField.js +315 -0
  335. package/dist/internal/SegmentedField.js.map +1 -0
  336. package/dist/internal/index.d.ts +2 -0
  337. package/dist/internal/index.d.ts.map +1 -1
  338. package/dist/internal/index.js +2 -0
  339. package/dist/internal/index.js.map +1 -1
  340. package/dist/theme/index.d.ts +4 -3
  341. package/dist/theme/index.d.ts.map +1 -1
  342. package/dist/theme/index.js +3 -2
  343. package/dist/theme/index.js.map +1 -1
  344. package/dist/theme/schema.d.ts +49 -33
  345. package/dist/theme/schema.d.ts.map +1 -1
  346. package/dist/theme/schema.js +30 -21
  347. package/dist/theme/schema.js.map +1 -1
  348. package/package.json +11 -59
  349. package/src/components/Badge/Badge.tsx +87 -49
  350. package/src/components/Badge/index.ts +10 -1
  351. package/src/components/BarChart/BarChart.tsx +37 -30
  352. package/src/components/Button/Button.tsx +129 -106
  353. package/src/components/Button/index.ts +10 -1
  354. package/src/components/Calendar/Calendar.tsx +104 -401
  355. package/src/components/Calendar/CalendarView.tsx +454 -0
  356. package/src/components/Calendar/calendar.types.ts +104 -29
  357. package/src/components/Calendar/index.ts +16 -17
  358. package/src/components/Card/Card.tsx +15 -2
  359. package/src/components/Checkbox/Checkbox.tsx +22 -2
  360. package/src/components/CheckboxGroup/CheckboxGroup.tsx +22 -0
  361. package/src/components/Code/Editor/Editor.tsx +2 -2
  362. package/src/components/Code/Editor/themes.ts +50 -32
  363. package/src/components/Code/ValidationStatus/ValidationStatus.tsx +6 -3
  364. package/src/components/DatePicker/DatePicker.tsx +369 -42
  365. package/src/components/DatePicker/DateSegments.tsx +125 -0
  366. package/src/components/DatePicker/datepicker.types.ts +58 -39
  367. package/src/components/DatePicker/index.ts +11 -3
  368. package/src/components/DateRangePicker/DateRangePicker.tsx +38 -24
  369. package/src/components/DateRangePicker/daterangepicker.types.ts +29 -23
  370. package/src/components/DateRangePicker/index.ts +9 -1
  371. package/src/components/DateTimePicker/DateTimePicker.tsx +189 -88
  372. package/src/components/DateTimePicker/DateTimeSegments.tsx +113 -0
  373. package/src/components/DateTimePicker/datetimepicker.types.ts +29 -19
  374. package/src/components/DateTimePicker/index.ts +9 -1
  375. package/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx +251 -126
  376. package/src/components/DateTimeRangePicker/datetimerangepicker.types.ts +31 -20
  377. package/src/components/DateTimeRangePicker/index.ts +9 -0
  378. package/src/components/Field/Field.tsx +25 -26
  379. package/src/components/FormField/FormField.tsx +15 -0
  380. package/src/components/HoverCard/HoverCard.tsx +6 -0
  381. package/src/components/Input/Input.tsx +19 -4
  382. package/src/components/LineChart/LineChart.tsx +164 -141
  383. package/src/components/Markdown/Markdown.tsx +21 -3
  384. package/src/components/Message/Message.tsx +83 -17
  385. package/src/components/Message/index.ts +1 -1
  386. package/src/components/Modal/Modal.tsx +157 -86
  387. package/src/components/Modal/components/ModalContext.tsx +14 -0
  388. package/src/components/Modal/components/ModalHeader.tsx +15 -3
  389. package/src/components/Popover/Popover.tsx +36 -0
  390. package/src/components/Popover/components/PopoverBody.tsx +6 -1
  391. package/src/components/Popover/components/PopoverContext.tsx +1 -0
  392. package/src/components/Popover/components/PopoverTrigger.tsx +2 -1
  393. package/src/components/ProgressBar/ProgressBar.tsx +46 -28
  394. package/src/components/RadioButton/RadioButton.tsx +34 -3
  395. package/src/components/RadioButtonGroup/RadioButtonGroup.tsx +32 -0
  396. package/src/components/SearchInput/SearchInput.tsx +13 -2
  397. package/src/components/Select/Select.tsx +75 -19
  398. package/src/components/Select/SelectDropdown.tsx +45 -12
  399. package/src/components/Select/SelectTrigger.tsx +31 -8
  400. package/src/components/Select/useSelectKeyboard.ts +20 -10
  401. package/src/components/Separator/Separator.tsx +10 -0
  402. package/src/components/Sheet/Sheet.tsx +114 -83
  403. package/src/components/Sheet/components/SheetContext.tsx +10 -0
  404. package/src/components/Sheet/components/SheetFooter.tsx +1 -1
  405. package/src/components/Sheet/components/SheetHeader.tsx +18 -3
  406. package/src/components/Sparkline/Sparkline.tsx +40 -36
  407. package/src/components/Spinner/Spinner.tsx +28 -3
  408. package/src/components/Switch/Switch.tsx +27 -4
  409. package/src/components/Tabs/Tabs.tsx +6 -0
  410. package/src/components/Tabs/components/TabsList.tsx +5 -3
  411. package/src/components/Tabs/components/TabsPanels.tsx +5 -3
  412. package/src/components/Tabs/components/TabsTrigger.tsx +22 -5
  413. package/src/components/TagChip/TagChip.tsx +27 -18
  414. package/src/components/TagInput/TagInput.tsx +16 -11
  415. package/src/components/Text/Text.tsx +9 -0
  416. package/src/components/TextInline/TextInline.tsx +11 -0
  417. package/src/components/Textarea/Textarea.tsx +13 -1
  418. package/src/components/TimePicker/TimeColumn.tsx +24 -1
  419. package/src/components/TimePicker/TimePicker.tsx +157 -51
  420. package/src/components/TimePicker/TimeSegments.tsx +131 -0
  421. package/src/components/TimePicker/timepicker.hooks.ts +1 -24
  422. package/src/components/TimePicker/timepicker.types.ts +14 -16
  423. package/src/components/Toast/Toast.tsx +28 -1
  424. package/src/components/Toggle/Toggle.tsx +34 -32
  425. package/src/components/Toggle/index.ts +1 -1
  426. package/src/components/ToggleGroup/ToggleGroup.tsx +17 -0
  427. package/src/components/ToggleGroup/ToggleGroupItem.tsx +13 -8
  428. package/src/components/ToggleGroup/ToggleGroupMultiple.tsx +3 -1
  429. package/src/components/ToggleGroup/ToggleGroupSingle.tsx +3 -1
  430. package/src/components/ToggleGroup/toggleGroup.types.ts +12 -3
  431. package/src/components/Tooltip/Tooltip.tsx +6 -0
  432. package/src/date-time/index.ts +61 -1
  433. package/src/date-time/iso.ts +511 -0
  434. package/src/date-time/now.ts +10 -9
  435. package/src/internal/PickerField.tsx +90 -0
  436. package/src/internal/SegmentedField.tsx +445 -0
  437. package/src/internal/index.ts +2 -0
  438. package/src/theme/index.ts +11 -9
  439. package/src/theme/recipes/badge.css +140 -0
  440. package/src/theme/recipes/button.css +167 -0
  441. package/src/theme/recipes/card.css +26 -0
  442. package/src/theme/recipes/checkbox.css +44 -0
  443. package/src/theme/recipes/field.css +14 -0
  444. package/src/theme/recipes/index.css +28 -0
  445. package/src/theme/recipes/input.css +29 -0
  446. package/src/theme/recipes/message.css +47 -0
  447. package/src/theme/recipes/modal.css +31 -0
  448. package/src/theme/recipes/radio-button.css +42 -0
  449. package/src/theme/recipes/search-input.css +16 -0
  450. package/src/theme/recipes/select.css +105 -0
  451. package/src/theme/recipes/sheet.css +34 -0
  452. package/src/theme/recipes/spinner.css +17 -0
  453. package/src/theme/recipes/switch.css +39 -0
  454. package/src/theme/recipes/tabs.css +41 -0
  455. package/src/theme/recipes/tag-chip.css +27 -0
  456. package/src/theme/recipes/textarea.css +20 -0
  457. package/src/theme/recipes/toggle.css +92 -0
  458. package/src/theme/schema.ts +59 -58
  459. package/src/theme/tokens.css +824 -0
  460. package/dist/components/Avatar/Avatar.d.ts +0 -6
  461. package/dist/components/Avatar/Avatar.d.ts.map +0 -1
  462. package/dist/components/Avatar/Avatar.js +0 -11
  463. package/dist/components/Avatar/Avatar.js.map +0 -1
  464. package/dist/components/Avatar/index.d.ts +0 -2
  465. package/dist/components/Avatar/index.d.ts.map +0 -1
  466. package/dist/components/Avatar/index.js +0 -2
  467. package/dist/components/Avatar/index.js.map +0 -1
  468. package/dist/components/Breadcrumb/Breadcrumb.d.ts +0 -12
  469. package/dist/components/Breadcrumb/Breadcrumb.d.ts.map +0 -1
  470. package/dist/components/Breadcrumb/Breadcrumb.js +0 -19
  471. package/dist/components/Breadcrumb/Breadcrumb.js.map +0 -1
  472. package/dist/components/Breadcrumb/index.d.ts +0 -2
  473. package/dist/components/Breadcrumb/index.d.ts.map +0 -1
  474. package/dist/components/Breadcrumb/index.js +0 -2
  475. package/dist/components/Breadcrumb/index.js.map +0 -1
  476. package/dist/components/ColorDot/ColorDot.d.ts +0 -13
  477. package/dist/components/ColorDot/ColorDot.d.ts.map +0 -1
  478. package/dist/components/ColorDot/ColorDot.js +0 -34
  479. package/dist/components/ColorDot/ColorDot.js.map +0 -1
  480. package/dist/components/ColorDot/index.d.ts +0 -2
  481. package/dist/components/ColorDot/index.d.ts.map +0 -1
  482. package/dist/components/ColorDot/index.js +0 -2
  483. package/dist/components/ColorDot/index.js.map +0 -1
  484. package/dist/components/EmptyState/EmptyState.d.ts +0 -15
  485. package/dist/components/EmptyState/EmptyState.d.ts.map +0 -1
  486. package/dist/components/EmptyState/EmptyState.js +0 -7
  487. package/dist/components/EmptyState/EmptyState.js.map +0 -1
  488. package/dist/components/EmptyState/index.d.ts +0 -2
  489. package/dist/components/EmptyState/index.d.ts.map +0 -1
  490. package/dist/components/EmptyState/index.js +0 -2
  491. package/dist/components/EmptyState/index.js.map +0 -1
  492. package/dist/components/HeatMap/HeatMapCalendar.d.ts +0 -11
  493. package/dist/components/HeatMap/HeatMapCalendar.d.ts.map +0 -1
  494. package/dist/components/HeatMap/HeatMapCalendar.js +0 -68
  495. package/dist/components/HeatMap/HeatMapCalendar.js.map +0 -1
  496. package/dist/components/HeatMap/HeatMapMatrix.d.ts +0 -12
  497. package/dist/components/HeatMap/HeatMapMatrix.d.ts.map +0 -1
  498. package/dist/components/HeatMap/HeatMapMatrix.js +0 -35
  499. package/dist/components/HeatMap/HeatMapMatrix.js.map +0 -1
  500. package/dist/components/HeatMap/heat-map.utils.d.ts +0 -10
  501. package/dist/components/HeatMap/heat-map.utils.d.ts.map +0 -1
  502. package/dist/components/HeatMap/heat-map.utils.js +0 -10
  503. package/dist/components/HeatMap/heat-map.utils.js.map +0 -1
  504. package/dist/components/HeatMap/index.d.ts +0 -4
  505. package/dist/components/HeatMap/index.d.ts.map +0 -1
  506. package/dist/components/HeatMap/index.js +0 -3
  507. package/dist/components/HeatMap/index.js.map +0 -1
  508. package/dist/components/MetricList/MetricList.d.ts +0 -9
  509. package/dist/components/MetricList/MetricList.d.ts.map +0 -1
  510. package/dist/components/MetricList/MetricList.js +0 -6
  511. package/dist/components/MetricList/MetricList.js.map +0 -1
  512. package/dist/components/MetricList/MetricRow.d.ts +0 -13
  513. package/dist/components/MetricList/MetricRow.d.ts.map +0 -1
  514. package/dist/components/MetricList/MetricRow.js +0 -13
  515. package/dist/components/MetricList/MetricRow.js.map +0 -1
  516. package/dist/components/MetricList/index.d.ts +0 -3
  517. package/dist/components/MetricList/index.d.ts.map +0 -1
  518. package/dist/components/MetricList/index.js +0 -3
  519. package/dist/components/MetricList/index.js.map +0 -1
  520. package/dist/components/NavBottom/NavBottom.d.ts +0 -15
  521. package/dist/components/NavBottom/NavBottom.d.ts.map +0 -1
  522. package/dist/components/NavBottom/NavBottom.js +0 -19
  523. package/dist/components/NavBottom/NavBottom.js.map +0 -1
  524. package/dist/components/NavBottom/index.d.ts +0 -3
  525. package/dist/components/NavBottom/index.d.ts.map +0 -1
  526. package/dist/components/NavBottom/index.js +0 -2
  527. package/dist/components/NavBottom/index.js.map +0 -1
  528. package/dist/components/NavSide/NavItem.d.ts +0 -9
  529. package/dist/components/NavSide/NavItem.d.ts.map +0 -1
  530. package/dist/components/NavSide/NavItem.js +0 -13
  531. package/dist/components/NavSide/NavItem.js.map +0 -1
  532. package/dist/components/NavSide/NavSide.d.ts +0 -15
  533. package/dist/components/NavSide/NavSide.d.ts.map +0 -1
  534. package/dist/components/NavSide/NavSide.js +0 -10
  535. package/dist/components/NavSide/NavSide.js.map +0 -1
  536. package/dist/components/NavSide/index.d.ts +0 -3
  537. package/dist/components/NavSide/index.d.ts.map +0 -1
  538. package/dist/components/NavSide/index.js +0 -2
  539. package/dist/components/NavSide/index.js.map +0 -1
  540. package/dist/components/NavSide/types.d.ts +0 -38
  541. package/dist/components/NavSide/types.d.ts.map +0 -1
  542. package/dist/components/NavSide/types.js +0 -2
  543. package/dist/components/NavSide/types.js.map +0 -1
  544. package/dist/components/Pagination/Pagination.d.ts +0 -35
  545. package/dist/components/Pagination/Pagination.d.ts.map +0 -1
  546. package/dist/components/Pagination/Pagination.js +0 -26
  547. package/dist/components/Pagination/Pagination.js.map +0 -1
  548. package/dist/components/Pagination/index.d.ts +0 -3
  549. package/dist/components/Pagination/index.d.ts.map +0 -1
  550. package/dist/components/Pagination/index.js +0 -2
  551. package/dist/components/Pagination/index.js.map +0 -1
  552. package/dist/components/Skeleton/Skeleton.d.ts +0 -3
  553. package/dist/components/Skeleton/Skeleton.d.ts.map +0 -1
  554. package/dist/components/Skeleton/Skeleton.js +0 -7
  555. package/dist/components/Skeleton/Skeleton.js.map +0 -1
  556. package/dist/components/Skeleton/index.d.ts +0 -2
  557. package/dist/components/Skeleton/index.d.ts.map +0 -1
  558. package/dist/components/Skeleton/index.js +0 -2
  559. package/dist/components/Skeleton/index.js.map +0 -1
  560. package/dist/components/StatsCard/StatsCard.d.ts +0 -17
  561. package/dist/components/StatsCard/StatsCard.d.ts.map +0 -1
  562. package/dist/components/StatsCard/StatsCard.js +0 -13
  563. package/dist/components/StatsCard/StatsCard.js.map +0 -1
  564. package/dist/components/StatsCard/index.d.ts +0 -2
  565. package/dist/components/StatsCard/index.d.ts.map +0 -1
  566. package/dist/components/StatsCard/index.js +0 -2
  567. package/dist/components/StatsCard/index.js.map +0 -1
  568. package/dist/styles.css +0 -2
  569. package/dist/theme.generated.css +0 -438
  570. package/src/components/Avatar/Avatar.tsx +0 -19
  571. package/src/components/Avatar/index.ts +0 -1
  572. package/src/components/Breadcrumb/Breadcrumb.tsx +0 -47
  573. package/src/components/Breadcrumb/index.ts +0 -5
  574. package/src/components/ColorDot/ColorDot.tsx +0 -50
  575. package/src/components/ColorDot/index.ts +0 -1
  576. package/src/components/EmptyState/EmptyState.tsx +0 -29
  577. package/src/components/EmptyState/index.ts +0 -1
  578. package/src/components/HeatMap/HeatMapCalendar.tsx +0 -127
  579. package/src/components/HeatMap/HeatMapMatrix.tsx +0 -75
  580. package/src/components/HeatMap/heat-map.utils.ts +0 -15
  581. package/src/components/HeatMap/index.ts +0 -3
  582. package/src/components/MetricList/MetricList.tsx +0 -13
  583. package/src/components/MetricList/MetricRow.tsx +0 -30
  584. package/src/components/MetricList/index.ts +0 -2
  585. package/src/components/NavBottom/NavBottom.tsx +0 -53
  586. package/src/components/NavBottom/index.ts +0 -3
  587. package/src/components/NavSide/NavItem.tsx +0 -39
  588. package/src/components/NavSide/NavSide.tsx +0 -40
  589. package/src/components/NavSide/index.ts +0 -2
  590. package/src/components/NavSide/types.ts +0 -36
  591. package/src/components/Pagination/Pagination.tsx +0 -86
  592. package/src/components/Pagination/index.ts +0 -2
  593. package/src/components/Skeleton/Skeleton.tsx +0 -7
  594. package/src/components/Skeleton/index.ts +0 -1
  595. package/src/components/StatsCard/StatsCard.tsx +0 -40
  596. package/src/components/StatsCard/index.ts +0 -1
  597. package/src/styles/base.css +0 -41
  598. package/src/theme/palette.json +0 -100
  599. package/src/theme/palette.schema.json +0 -40
  600. package/src/theme/theme.json +0 -349
  601. package/src/theme/theme.schema.json +0 -876
  602. package/src/theme/typography.json +0 -7
  603. package/src/theme/typography.schema.json +0 -36
  604. package/tailwind.config.ts +0 -261
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # design-system
2
2
 
3
- Personal design system: design tokens, theme pipeline, and a React component library. Harvested from the Personal Assistant project; consumed as a versioned dependency (MUI-style), configured through the theme surface — never by editing component source in the consumer.
3
+ Personal design system: design tokens, theme pipeline, and a React component library. Consumed as a versioned dependency (MUI-style), configured through the theme surface — never by editing component source in the consumer.
4
4
 
5
5
  A single package, `@sixthshift/design-system`: ~80 components (primitives, overlays, forms, pickers, charts, typography) + a JSON-driven token/theme pipeline + Tailwind config. Built on [shadcn/ui](https://ui.shadcn.com) patterns.
6
6
 
@@ -8,7 +8,7 @@ A single package, `@sixthshift/design-system`: ~80 components (primitives, overl
8
8
 
9
9
  **Owns:** The component library — 80+ exports via subpath imports, design tokens, theme system (JSON-driven CSS generation), Tailwind config, and Storybook stories. Components span primitives, composites, typography, charts, and overlays.
10
10
 
11
- **Boundaries:** Bundles a `./date-time` module (`@sixthshift/design-system/date-time`, wrapping `@js-temporal/polyfill`) used by the date/time components, Floating UI (popover/tooltip positioning), and CVA (variant styling). Peer-depends on React 18 or 19. No app/domain coupling — domain-specific components live in consuming apps.
11
+ **Boundaries:** Bundles a `./date-time` module (`@sixthshift/design-system/date-time`, wrapping `@js-temporal/polyfill`) used internally by the date/time components — those components exchange ISO 8601 strings, so consuming one does not require adopting Temporal. Also Floating UI (popover/tooltip positioning) and CVA (variant styling). Peer-depends on React 18 or 19. No app/domain coupling — domain-specific components live in consuming apps.
12
12
 
13
13
  **Surprise:** All components are imported via subpath exports (`@sixthshift/design-system/button`), never from a barrel root — there is no main export. Positioning uses Floating UI, not Radix. Variants use the `variant` (visual) + `intent` (semantic) orthogonal prop pattern via CVA, not className-based styling. Compound components (e.g. Tabs) use `Object.assign` to attach sub-components. Check `src/components/` before creating any new UI element.
14
14
 
@@ -18,22 +18,31 @@ A single package, `@sixthshift/design-system`: ~80 components (primitives, overl
18
18
  npm install @sixthshift/design-system
19
19
  ```
20
20
 
21
- ```tsx
22
- // app entry — styles once
23
- import "@sixthshift/design-system/theme.css"; // CSS variables (light/dark via data-theme on <html>)
24
- import "@sixthshift/design-system/styles.css"; // compiled Tailwind + base styles
21
+ ```css
22
+ /* your CSS entry — Tailwind 4 is a required peer */
23
+ @import "tailwindcss";
24
+ @import "@sixthshift/design-system/theme.css";
25
+ @source "../node_modules/@sixthshift/design-system";
26
+ ```
25
27
 
28
+ That second line is opinionated: it replaces Tailwind's default palette with this
29
+ system's tokens and takes over a few globals. See
30
+ [what the theme takes over](#what-the-theme-takes-over) before adopting it.
31
+
32
+ ```tsx
26
33
  // anywhere — components via subpath exports (no barrel root)
27
34
  import { Button } from "@sixthshift/design-system/button";
28
35
  ```
29
36
 
30
- **What ships:** compiled ESM (`.js`) plus type declarations (`.d.ts`) in `dist/`, alongside the prebuilt CSS — every export subpath resolves to build output, so no build runs on install and no consumer toolchain needs to transpile this package. The module tree is preserved rather than bundled, so subpath imports still tree-shake.
37
+ **What ships:** compiled ESM (`.js`) plus type declarations (`.d.ts`) in `dist/`, and the tokens as CSS. No prebuilt stylesheet: the components are Tailwind classes, so your build compiles them from the `@theme` block `theme.css` brings with it. Nothing runs on install and no consumer toolchain has to transpile this package. The module tree is preserved rather than bundled, so subpath imports still tree-shake.
31
38
 
32
39
  TypeScript sources are published too, but only as the target of the declaration and source maps — nothing resolves to them. Go-to-definition lands on real `.tsx`, and stack traces map back to it.
33
40
 
41
+ **Module resolution:** subpath types only resolve under `"moduleResolution": "bundler"`, `"node16"`, or `"nodenext"` in `tsconfig.json`. The older `"node"` setting ignores the `exports` map entirely and fails with `TS2307` on every subpath. The package is also ESM-only — every `exports` entry has an `"import"` condition and nothing else, so `require("@sixthshift/design-system/button")` fails with `ERR_PACKAGE_PATH_NOT_EXPORTED`. A CJS test runner (e.g. Jest without ESM configured) needs to be set up for ESM before it can import this package.
42
+
34
43
  ### Peer dependencies
35
44
 
36
- `react` and `react-dom` are the only required peers, at **18 or 19**. CI runs the type-check and the full unit suite against both on every change, so the range is verified rather than merely declared.
45
+ `react`, `react-dom` and `tailwindcss` are the required peers — React at **18 or 19**, Tailwind at **4**. CI runs the type-check and the full unit suite against both React versions on every change, so that range is verified rather than merely declared.
37
46
 
38
47
  Everything else is an **optional** peer — install it only if you import the entry point that needs it. Nothing else in the library imports them, and package managers do not warn about a missing optional peer.
39
48
 
@@ -68,17 +77,18 @@ Skip this and text falls back to the next family in the stack (`ui-sans-serif` /
68
77
  ## Available exports
69
78
 
70
79
  ```tsx
71
- // Primitives (Button, Badge, Card, Input, Textarea, Checkbox, Switch, Avatar, ...)
80
+ // Primitives (Button, Badge, Card, Input, Textarea, Checkbox, Switch, ...)
72
81
  import { Button } from "@sixthshift/design-system/button";
73
82
  import { Input } from "@sixthshift/design-system/input";
74
83
 
75
- // Composites (FormField, NavSide, Tabs, Pagination, ...)
84
+ // Composites (FormField, Tabs, ...)
76
85
  import { FormField } from "@sixthshift/design-system/form-field";
77
86
 
78
- // Charts (LineChart, BarChart, Sparkline, HeatMap)
87
+ // Charts (LineChart, BarChart, Sparkline)
79
88
  import { LineChart } from "@sixthshift/design-system/line-chart";
80
89
 
81
- // Pickers (Calendar, DatePicker, TimePicker, DateTimePicker, DateTimeRangePicker)
90
+ // Pickers (Calendar, DatePicker, TimePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker)
91
+ // — all values are ISO 8601 strings, never date objects
82
92
  import { DatePicker } from "@sixthshift/design-system/date-picker";
83
93
 
84
94
  // Overlays (Modal, Sheet, Toast, Tooltip, Popover, HoverCard)
@@ -107,30 +117,226 @@ Components use two orthogonal props:
107
117
  <Badge variant="soft" intent="warning">Pending</Badge>
108
118
  ```
109
119
 
120
+ ## Dates and times
121
+
122
+ Every date/time component takes and returns canonical ISO 8601 strings. There is no
123
+ date library to adopt, and the engine behind the components stays an implementation
124
+ detail.
125
+
126
+ ```tsx
127
+ <DatePicker value="2026-08-26" onChange={(date) => save(date)} />
128
+ <TimePicker value="09:30" onChange={(time) => save(time)} />
129
+ <DateTimePicker value="2026-08-26T00:30:00Z" onChange={(instant) => save(instant)} />
130
+ <DatePicker mode="range" value={{ from: "2026-08-01", to: "2026-08-07" }} onChange={setRange} />
131
+ ```
132
+
133
+ | Type | Shape | Notes |
134
+ | --- | --- | --- |
135
+ | `ISODate` | `"2026-08-26"` | |
136
+ | `ISOTime` | `"09:30"` or `"09:30:00"` | callbacks emit `HH:MM:SS` |
137
+ | `ISOInstant` | `"2026-08-26T00:30:00Z"` | always UTC; an offset like `+10:00` is accepted and normalised |
138
+
139
+ The types are template literals, so a literal in the wrong shape is a compile error
140
+ — a datetime passed to a `DatePicker`, an offset where `Z` is required. Values
141
+ arriving as `string` from an API are checked at runtime instead, and a value
142
+ carrying a time where a date belongs throws rather than being silently truncated.
143
+
144
+ Disabling dates is declarative, so the common cases need no date arithmetic:
145
+
146
+ ```tsx
147
+ <DatePicker disabled={{ dayOfWeek: ["sat", "sun"] }} />
148
+ <DatePicker disabled={[{ before: "2026-01-01" }, "2026-12-25"]} />
149
+ ```
150
+
151
+ For building `presets` and bounds, `@sixthshift/design-system/date-time` carries
152
+ ISO-native helpers (`todayISO`, `addDaysISO`, `startOfMonthISO`, `isWeekendISO`,
153
+ `compareISO`, …) so you never need Temporal at a call site. It also still exports
154
+ Temporal itself, for arithmetic the ISO surface deliberately does not carry —
155
+ widen with `fromISODate`, compute, narrow back with `toISODate`.
156
+
157
+ See [docs/component-catalog.md](docs/component-catalog.md#datetime-pickers) for the
158
+ full prop tables.
159
+
160
+ ### Upgrading from 0.2.x
161
+
162
+ The pickers previously took and returned `Temporal` objects. At a call site, wrap
163
+ existing values with `serialize()` and parse what comes back, or — better — drop
164
+ Temporal from your own code entirely:
165
+
166
+ ```tsx
167
+ // before
168
+ <DatePicker value={Temporal.PlainDate.from(dueDate)} onChange={(d) => save(d?.toString())} />
169
+
170
+ // after
171
+ <DatePicker value={dueDate} onChange={(d) => save(d)} />
172
+ ```
173
+
174
+ `DateRangeValue` and `DisabledDateMatcher` are no longer exported; use
175
+ `ISODateRange` and `DisabledDates`. `DateTimeRangeValue` survives as an alias of
176
+ `ISOInstantRange`. The Temporal-typed helpers that `@sixthshift/design-system/calendar`
177
+ re-exported (`isDateDisabled`, `temporalToISO`, and friends) are now internal — the
178
+ ISO helpers above cover what they were reachable for.
179
+
110
180
  ## Theming
111
181
 
112
- Tokens are JSON (`src/theme/{palette,theme,typography}.json`) compiled to CSS variables (`theme.css`). Light/dark switch via `data-theme` attribute on the root element. Consumers restyle by overriding CSS variables at runtime — component source stays untouched. See [docs/design-tokens.md](docs/design-tokens.md) for the full token reference.
182
+ Tokens are CSS (`src/theme/tokens.css`), published as `theme.css`. That one file
183
+ holds the palette, the semantic tokens for each mode, and the `@theme` block that
184
+ tells Tailwind which utilities exist — so a token and its utility can never
185
+ disagree.
186
+
187
+ Light/dark switch via the `data-theme` attribute on the root element. Consumers
188
+ restyle by overriding CSS variables at runtime — component source stays
189
+ untouched. See [docs/design-tokens.md](docs/design-tokens.md) for the full token
190
+ reference.
191
+
192
+ Tokens come in three tiers, and the one you reach for depends on the *kind* of
193
+ change you are making:
194
+
195
+ | Tier | Example | Change it to | Scope |
196
+ | --- | --- | --- | --- |
197
+ | Palette | `--color-ocean-600` | add or alter a hue | everything downstream |
198
+ | Semantic | `--bg-brand` | **re-skin** — brand is now purple | every surface that means "brand" |
199
+ | Component | `--button-bg` | **re-wire** — *this* part uses a different meaning | one component, or one subtree |
200
+
201
+ Re-skinning is a token *value* change and it is global by design. Re-wiring is a
202
+ recipe change, and it is the one that used to be impossible.
113
203
 
114
204
  ### Tailwind integration
115
205
 
116
- If your app uses Tailwind and you want to extend the theme:
206
+ The three lines above are the whole integration. The theme import carries the
207
+ token variables *and* the `@theme` block declaring the library's utilities, so
208
+ `bg-bg-brand`, `z-modal`, `animate-fade-in` and `dark:*` compile in your build
209
+ alongside your own classes — same pass, same tree-shaking, and
210
+ `className="mt-8"` on a library component works like any other Tailwind class.
211
+
212
+ **The `@source` line is required.** Tailwind 4's automatic content detection
213
+ never scans `node_modules`, so without it none of this library's classes are
214
+ found and every component renders unstyled.
215
+
216
+ The path is a filesystem path resolved relative to the CSS file that declares
217
+ it — not a package specifier, so a bare `"@sixthshift/design-system"` silently
218
+ matches nothing. Adjust the depth to wherever your CSS entry lives; in a
219
+ monorepo with hoisted dependencies that is often `"../../node_modules/…"`. A
220
+ symlinked install (pnpm) needs no special handling: `@source` follows the link
221
+ into the store.
222
+
223
+ Beyond that there is no preset, no `@config`, and no prebuilt stylesheet to
224
+ import.
225
+
226
+ **Tailwind 4 is required, not optional.** Every component is a set of Tailwind
227
+ classes, so without it they render unstyled. That is why `tailwindcss` is a
228
+ non-optional peer dependency.
229
+
230
+ ### Restyling a component
231
+
232
+ Every component reads its colours from its own tokens rather than naming a
233
+ semantic token directly. `Button` resolves `--button-bg`, whose value is decided
234
+ by a recipe in the published stylesheet:
235
+
236
+ ```css
237
+ /* what ships, in @layer components */
238
+ .btn[data-variant="solid"][data-intent="neutral"] {
239
+ --button-bg: var(--bg-brand);
240
+ --button-bg-hovered: var(--bg-brand-hovered);
241
+ --button-fg: var(--fg-on-brand);
242
+ }
243
+ ```
244
+
245
+ That recipe is data, not compiled-in class names, so you can re-point any cell.
246
+ Four granularities, narrowest to broadest:
247
+
248
+ ```tsx
249
+ // one instance — inline styles outrank layers and specificity both
250
+ <Button style={{ "--button-bg": "var(--bg-strong)" } as React.CSSProperties} />
251
+ ```
252
+
253
+ ```css
254
+ /* one subtree — impossible with token values, which are global */
255
+ .checkout .btn[data-intent="neutral"] { --button-bg: var(--bg-success); }
256
+
257
+ /* one cell, app-wide — reject a house opinion */
258
+ .btn[data-variant="link"][data-intent="neutral"] { --button-fg: var(--fg-normal); }
259
+
260
+ /* every button */
261
+ .btn { --button-bg-hovered: var(--button-bg); } /* no hover shift, anywhere */
262
+ ```
263
+
264
+ **Write your overrides unlayered.** The cascade compares layers *before*
265
+ specificity, and unlayered author CSS outranks any layered author CSS — which is
266
+ why a bare `.btn { … }` beats the library's three-attribute selector without an
267
+ `!important`. The corollary is the trap: wrap the same rule in
268
+ `@layer components` (a Tailwind 3 habit) and it lands in the library's own layer,
269
+ where specificity decides again and your override silently loses on every cell
270
+ the library ships.
271
+
272
+ #### Adding an intent the library never shipped
273
+
274
+ ```css
275
+ /* 1. the semantic tokens — both modes, mirroring the library's own selectors */
276
+ :root:not([data-theme]),
277
+ :root[data-theme="light"] { --bg-info: var(--color-ocean-700); --fg-on-info: #fff; }
278
+ :root[data-theme="dark"] { --bg-info: var(--color-ocean-400); --fg-on-info: #06121f; }
279
+
280
+ /* 2. the recipe cell */
281
+ .btn[data-variant="solid"][data-intent="info"] {
282
+ --button-bg: var(--bg-info);
283
+ --button-fg: var(--fg-on-info);
284
+ }
285
+ ```
286
+
287
+ ```tsx
288
+ <Button intent="info">Details</Button> // type-checks; no library release needed
289
+ ```
290
+
291
+ `variant` and `intent` are typed as the shipped union *plus* `string`, so a value
292
+ you invent is accepted while the built-ins still autocomplete. Note that no
293
+ `@theme` entry is needed: recipes read `var(--bg-info)` as plain CSS, never
294
+ through a Tailwind utility. You own the contrast of tokens you add —
295
+ `bun run check:contrast` only sees the library's own.
296
+
297
+ #### Finding the token names
298
+
299
+ `bun run check:recipes --list` prints every component token grouped by
300
+ component. The names follow `--{component}[-{part}]-{context}[-{state}]`, where
301
+ context is `bg`/`fg`/`border`/`ring` and state is `hovered`/`pressed`/`disabled`
302
+ — e.g. `--modal-overlay-bg`, `--input-placeholder-fg`, `--card-border-hovered`.
117
303
 
118
- ```ts
119
- // tailwind.config.ts
120
- import uiConfig from "@sixthshift/design-system/tailwind.config";
304
+ Intent and variant never appear in a token *name*; they select via the `data-*`
305
+ attributes. That is what lets you add one.
121
306
 
122
- export default {
123
- presets: [uiConfig],
124
- content: ["./src/**/*.{ts,tsx}", "./node_modules/@sixthshift/design-system/dist/**/*.js"],
125
- };
307
+ **These names are public API** and change only under semver, like any export.
308
+
309
+ ### What the theme takes over
310
+
311
+ This is a design system, not a component grab-bag: importing `theme.css` adopts
312
+ its opinions across your whole app, not just inside its components. All of it is
313
+ deliberate, and all of it is worth knowing before you commit.
314
+
315
+ | What | Effect on your app |
316
+ | --- | --- |
317
+ | **Tailwind's default palette is removed** | `bg-red-500`, `text-gray-700`, `border-gray-200` and the rest stop compiling — in your own markup too. What remains is this system's tokens (`bg-bg-brand`, `text-fg-subtle`, `border-border-normal`, …) plus `white`, `black`, `transparent` and `current`. A colour that was never designed should not be one class away. |
318
+ | **`dark:` means `[data-theme="dark"]`** | Not `prefers-color-scheme`. Theming here is a runtime attribute swap, so every `dark:` utility in your app follows the attribute instead of the OS setting. |
319
+ | **`font-sans` and `font-mono`** | Resolve to Inter Variable and JetBrains Mono. Install the [font peers](#fonts) or the stacks fall through to the system defaults. |
320
+ | **Three global rules** | `*` gets `border-color: var(--border-normal)`, so a bare `border` is the token colour rather than `currentColor`; `:focus-visible` gets the system focus ring; and under `prefers-reduced-motion` every animation and transition is pinned to `0.01ms`. These apply to your elements as well as ours. |
321
+ | **`--color-{emerald,sky,slate}-*`** | 33 variable names shared with Tailwind's palette hold this system's values. Only reachable if you read the variables directly in your own CSS. |
322
+
323
+ If you want a specific stock colour back, re-declare it in your own `@theme`
324
+ block after the import — everything you do not name stays gone:
325
+
326
+ ```css
327
+ @import "tailwindcss";
328
+ @import "@sixthshift/design-system/theme.css";
329
+
330
+ @theme {
331
+ --color-red-500: oklch(63.7% 0.237 25.331);
332
+ }
126
333
  ```
127
334
 
128
335
  ## Development
129
336
 
130
337
  ```bash
131
- bun install # `prepare` builds JS, types, theme and styles into dist/
132
- bun run storybook # component workbench on :6006
133
- bun run dev # watch-rebuild theme + Tailwind CSS
338
+ bun install # `prepare` builds JS, types and styles into dist/
339
+ bun run dev # component workbench on :6006
134
340
  bun run test # unit + date-time tests
135
341
  bun run type-check # tsc --noEmit (src and tests)
136
342
  bun run check # biome lint + format
@@ -195,9 +401,9 @@ bun run scripts/next-version.ts --explain
195
401
  The line between the two halves of that table is **whether the commit can reach
196
402
  the published tarball**, not whether it feels important. Every code subpath is
197
403
  compiled from `src/` into the tarball, so a `refactor:` still changes the bytes
198
- a consumer receives; `build:` changes what lands in `dist/`, and
199
- `tailwind.config.ts` is itself an exported subpath. Tests, workflows, formatting
200
- and prose either do not ship or are not user-visible, so they release nothing.
404
+ a consumer receives, and `build:` changes what lands in `dist/`. Tests,
405
+ workflows, formatting and prose either do not ship or are not user-visible, so
406
+ they release nothing.
201
407
 
202
408
  Two consequences worth knowing:
203
409
 
@@ -206,11 +412,14 @@ Two consequences worth knowing:
206
412
  - A renamed or removed export needs `feat!:` or a `BREAKING CHANGE:` footer.
207
413
  Filed as `refactor:` it cuts a patch, which understates it.
208
414
 
209
- One repository secret is required:
210
-
211
- | Secret | Why |
212
- | --- | --- |
213
- | `NPM_TOKEN` | Publishing. Must be an npm **automation** token, so it works with 2FA. |
415
+ No repository secret is required. Publishing goes through npm trusted
416
+ publishing (OIDC): GitHub Actions mints a short-lived token scoped to the run,
417
+ npm exchanges it against the trusted publisher configured on the package, and
418
+ provenance is attached automatically. There is nothing to leak and nothing to
419
+ rotate. npm authorises the *calling* workflow rather than the one containing
420
+ the publish step, so `version.yml` has to stay the sole entry point — see
421
+ [`.github/workflows/release.yml`](.github/workflows/release.yml) for the
422
+ detail.
214
423
 
215
424
  Tagging by hand still works and goes through the same publish path:
216
425
 
@@ -220,4 +429,4 @@ git tag v0.2.0 && git push origin v0.2.0
220
429
 
221
430
  ## Docs
222
431
 
223
- Design-system knowledge lives in [`docs/`](docs/): [design tokens](docs/design-tokens.md), [component catalog](docs/component-catalog.md), [component authoring](docs/component-authoring.md), [component API design](docs/component-api-design.md), [composition](docs/composition.md), [visual hierarchy](docs/visual-hierarchy.md), [spacing](docs/spacing.md), [motion](docs/motion.md), [states](docs/states.md), [overlays](docs/overlay-primitives.md), [forms](docs/forms.md), [modals](docs/modals.md), [responsive](docs/responsive.md), [density](docs/density.md), [copy](docs/copy-conventions.md), [time formatting](docs/time-formatting.md), [UX principles](docs/ux-principles.md), [design philosophy](docs/design-philosophy.md).
432
+ Design-system knowledge lives in [`docs/`](docs/): [design tokens](docs/design-tokens.md), [component catalog](docs/component-catalog.md), [component authoring](docs/component-authoring.md), [component API design](docs/component-api-design.md), [composition](docs/composition.md), [visual hierarchy](docs/visual-hierarchy.md), [spacing](docs/spacing.md), [motion](docs/motion.md), [states](docs/states.md), [overlays](docs/overlay-primitives.md), [forms](docs/forms.md), [modals](docs/modals.md), [responsive](docs/responsive.md), [density](docs/density.md), [copy](docs/copy-conventions.md), [time formatting](docs/time-formatting.md), [design philosophy](docs/design-philosophy.md).
package/dist/components/Badge/Badge.d.ts CHANGED
@@ -1,10 +1,68 @@
1
1
  import { type VariantProps } from "class-variance-authority";
2
- import type * as React from "react";
3
- declare const badgeVariants: (props?: ({
4
- variant?: "solid" | "soft" | "outline" | null | undefined;
5
- intent?: "neutral" | "primary" | "danger" | "success" | "warning" | "muted" | null | undefined;
6
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
- export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
8
- export declare const Badge: ({ className, variant, intent, ...props }: BadgeProps) => React.JSX.Element;
2
+ import * as React from "react";
3
+ /**
4
+ * Geometry and behaviour only.
5
+ *
6
+ * Every colour reads a `--badge-*` component token whose value is decided by
7
+ * src/theme/recipes/badge.css. That file is the mapping from
8
+ * `(variant, intent)` to a semantic token — the layer that used to be
9
+ * `compoundVariants` here, where it was compiled into class-name literals and
10
+ * unreachable from outside. Nothing in this file names a colour, which is the
11
+ * point: the semantics are now configurable without a release.
12
+ */
13
+ declare const badgeVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
14
+ /**
15
+ * Widened deliberately. Adding a variant or an intent is a CSS change in the
16
+ * consuming app, not a release here — so the type has to admit values this
17
+ * file has never heard of, while still autocompleting the ones it ships.
18
+ */
19
+ type Loose<T extends string> = T | (string & {});
20
+ export type BadgeVariantName = "solid" | "soft" | "outline";
21
+ /**
22
+ * `primary` was this component's name for the brand colour, and nothing else in
23
+ * the system used it — the token is `--bg-brand`, and
24
+ * docs/modals.md already told callers to write `intent="brand"`. It is off the
25
+ * closed union as of this release but still resolves, via an aliased selector in
26
+ * badge.css; `BadgeIntent` is widened, so it also still type-checks.
27
+ */
28
+ export type BadgeIntentName = "neutral" | "brand" | "danger" | "success" | "warning" | "muted";
29
+ export type BadgeVariant = Loose<BadgeVariantName>;
30
+ export type BadgeIntent = Loose<BadgeIntentName>;
31
+ export type BadgeRecipeProps = VariantProps<typeof badgeVariants> & {
32
+ variant?: BadgeVariant | undefined;
33
+ intent?: BadgeIntent | undefined;
34
+ className?: string | undefined;
35
+ };
36
+ /**
37
+ * The class string plus the two attributes the recipe selects on.
38
+ */
39
+ export declare function badgeRecipe({ variant, intent, className }: BadgeRecipeProps): {
40
+ className: string;
41
+ "data-variant": BadgeVariant;
42
+ "data-intent": BadgeIntent;
43
+ };
44
+ export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
45
+ variant?: BadgeVariant | undefined;
46
+ intent?: BadgeIntent | undefined;
47
+ };
48
+ /**
49
+ * Small label for status, category, or count.
50
+ *
51
+ * Two independent axes, same split as Button: `variant` is the fill
52
+ * (`solid`, `soft`, `outline`), `intent` is what it signals (`neutral`,
53
+ * `brand`, `danger`, `success`, `warning`, `muted`) — `muted` has no
54
+ * Button equivalent, for de-emphasized metadata rather than a status.
55
+ * Renders a `<span>`; purely presentational, so give it visible text — it
56
+ * does not manage an accessible name of its own.
57
+ *
58
+ * Colour is not decided here: each `(variant, intent)` pairing resolves
59
+ * through a `--badge-*` component token (src/theme/recipes/badge.css), the
60
+ * same seam Button uses, so a consumer can re-point a cell without a
61
+ * release.
62
+ */
63
+ export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
64
+ variant?: BadgeVariant | undefined;
65
+ intent?: BadgeIntent | undefined;
66
+ } & React.RefAttributes<HTMLSpanElement>>;
9
67
  export { badgeVariants };
10
68
  //# sourceMappingURL=Badge.d.ts.map
package/dist/components/Badge/Badge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,QAAA,MAAM,aAAa;;;8EA8ClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAEpG,eAAO,MAAM,KAAK,6CAA8C,UAAU,sBAEzE,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,2FAOlB,CAAC;AAcF;;;;GAIG;AACH,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAC5D;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC/F,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAiB,EAAE,MAAgB,EAAE,SAAS,EAAE,EAAE,gBAAgB;;;;EAM/F;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IAC/D,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;cAnBN,YAAY,GAAG,SAAS;aACzB,WAAW,GAAG,SAAS;yCAoBhC,CAAC;AAGH,OAAO,EAAE,aAAa,EAAE,CAAC"}
package/dist/components/Badge/Badge.js CHANGED
@@ -1,52 +1,62 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { cn } from "@sixthshift/design-system/utils";
3
3
  import { cva } from "class-variance-authority";
4
- const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-border-brand focus:ring-offset-2", {
5
- variants: {
6
- variant: {
7
- solid: "border-transparent shadow",
8
- soft: "border-transparent",
9
- outline: "",
10
- },
11
- intent: {
12
- neutral: "",
13
- primary: "",
14
- danger: "",
15
- success: "",
16
- warning: "",
17
- muted: "",
18
- },
19
- },
20
- compoundVariants: [
21
- // Solid variants
22
- { variant: "solid", intent: "neutral", className: "bg-bg-strong text-fg-on-strong" },
23
- { variant: "solid", intent: "primary", className: "bg-bg-brand text-fg-on-brand" },
24
- { variant: "solid", intent: "danger", className: "bg-bg-danger text-fg-on-danger" },
25
- { variant: "solid", intent: "success", className: "bg-bg-success text-fg-on-success" },
26
- { variant: "solid", intent: "warning", className: "bg-bg-warning text-fg-on-warning" },
27
- { variant: "solid", intent: "muted", className: "bg-bg-subtle text-fg-subtle" },
28
- // Soft variants
29
- { variant: "soft", intent: "neutral", className: "bg-bg-subtle text-fg-normal" },
30
- { variant: "soft", intent: "primary", className: "bg-bg-brand-subtle text-fg-on-brand-subtle" },
31
- { variant: "soft", intent: "danger", className: "bg-bg-danger-subtle text-fg-on-danger-subtle" },
32
- { variant: "soft", intent: "success", className: "bg-bg-success-subtle text-fg-on-success-subtle" },
33
- { variant: "soft", intent: "warning", className: "bg-bg-warning-subtle text-fg-on-warning-subtle" },
34
- { variant: "soft", intent: "muted", className: "bg-bg-subtle text-fg-subtle" },
35
- // Outline variants
36
- { variant: "outline", intent: "neutral", className: "border-border-normal bg-bg-normal text-fg-normal" },
37
- { variant: "outline", intent: "primary", className: "border-border-brand bg-bg-normal text-fg-brand" },
38
- { variant: "outline", intent: "danger", className: "border-border-danger bg-bg-normal text-fg-danger" },
39
- { variant: "outline", intent: "success", className: "border-border-success bg-bg-normal text-fg-success" },
40
- { variant: "outline", intent: "warning", className: "border-border-warning bg-bg-normal text-fg-warning" },
41
- { variant: "outline", intent: "muted", className: "border-border-normal bg-bg-normal text-fg-subtle" },
42
- ],
43
- defaultVariants: {
44
- variant: "solid",
45
- intent: "primary",
46
- },
47
- });
48
- export const Badge = ({ className, variant, intent, ...props }) => {
49
- return _jsx("span", { className: cn(badgeVariants({ variant, intent }), className), ...props });
4
+ import * as React from "react";
5
+ /**
6
+ * Geometry and behaviour only.
7
+ *
8
+ * Every colour reads a `--badge-*` component token whose value is decided by
9
+ * src/theme/recipes/badge.css. That file is the mapping from
10
+ * `(variant, intent)` to a semantic token — the layer that used to be
11
+ * `compoundVariants` here, where it was compiled into class-name literals and
12
+ * unreachable from outside. Nothing in this file names a colour, which is the
13
+ * point: the semantics are now configurable without a release.
14
+ */
15
+ const badgeVariants = cva(
16
+ // One literal, deliberately: `useSortedClasses --unsafe` strips the trailing
17
+ // space before a `+`, silently welding the last class of one fragment to the
18
+ // first of the next. The screenshots catch it, but a single string means the
19
+ // sorter has nothing to break.
20
+ "badge border-(color:--badge-border) focus:ring-(color:--badge-ring) inline-flex items-center rounded-md border bg-(--badge-bg) px-2.5 py-0.5 font-semibold text-(--badge-fg) text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", { variants: {} });
21
+ /**
22
+ * The non-colour half of `variant` — elevation only, for Badge. A plain
23
+ * lookup rather than a CVA variant so an unrecognised variant stays a legal
24
+ * value that contributes no structure, leaving a consumer's CSS free to
25
+ * define it. `intent` needs no equivalent: it was never anything but colour.
26
+ */
27
+ const variantStructure = {
28
+ solid: "shadow",
29
+ soft: "",
30
+ outline: "",
50
31
  };
32
+ /**
33
+ * The class string plus the two attributes the recipe selects on.
34
+ */
35
+ export function badgeRecipe({ variant = "solid", intent = "brand", className }) {
36
+ return {
37
+ className: cn(variantStructure[variant], badgeVariants({ className })),
38
+ "data-variant": variant,
39
+ "data-intent": intent,
40
+ };
41
+ }
42
+ /**
43
+ * Small label for status, category, or count.
44
+ *
45
+ * Two independent axes, same split as Button: `variant` is the fill
46
+ * (`solid`, `soft`, `outline`), `intent` is what it signals (`neutral`,
47
+ * `brand`, `danger`, `success`, `warning`, `muted`) — `muted` has no
48
+ * Button equivalent, for de-emphasized metadata rather than a status.
49
+ * Renders a `<span>`; purely presentational, so give it visible text — it
50
+ * does not manage an accessible name of its own.
51
+ *
52
+ * Colour is not decided here: each `(variant, intent)` pairing resolves
53
+ * through a `--badge-*` component token (src/theme/recipes/badge.css), the
54
+ * same seam Button uses, so a consumer can re-point a cell without a
55
+ * release.
56
+ */
57
+ export const Badge = React.forwardRef(({ className, variant = "solid", intent = "brand", ...props }, ref) => {
58
+ return _jsx("span", { ref: ref, ...badgeRecipe({ variant, intent, className }), ...props });
59
+ });
60
+ Badge.displayName = "Badge";
51
61
  export { badgeVariants };
52
62
  //# sourceMappingURL=Badge.js.map
package/dist/components/Badge/Badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAGlE,MAAM,aAAa,GAAG,GAAG,CACvB,gLAAgL,EAChL;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,KAAK,EAAE,2BAA2B;YAClC,IAAI,EAAE,oBAAoB;YAC1B,OAAO,EAAE,EAAE;SACZ;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,EAAE;YACX,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,EAAE;SACV;KACF;IACD,gBAAgB,EAAE;QAChB,iBAAiB;QACjB,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,gCAAgC,EAAE;QACpF,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,8BAA8B,EAAE;QAClF,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,gCAAgC,EAAE;QACnF,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,kCAAkC,EAAE;QACtF,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,kCAAkC,EAAE;QACtF,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,6BAA6B,EAAE;QAC/E,gBAAgB;QAChB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,6BAA6B,EAAE;QAChF,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,4CAA4C,EAAE;QAC/F,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,8CAA8C,EAAE;QAChG,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,gDAAgD,EAAE;QACnG,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,gDAAgD,EAAE;QACnG,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,6BAA6B,EAAE;QAC9E,mBAAmB;QACnB,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,kDAAkD,EAAE;QACxG,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,gDAAgD,EAAE;QACtG,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,kDAAkD,EAAE;QACvG,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,oDAAoD,EAAE;QAC1G,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,oDAAoD,EAAE;QAC1G,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,kDAAkD,EAAE;KACvG;IACD,eAAe,EAAE;QACf,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,SAAS;KAClB;CACF,CACF,CAAC;AAIF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE;IAC5E,OAAO,eAAM,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAC3F,CAAC,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,MAAM,aAAa,GAAG,GAAG;AACvB,6EAA6E;AAC7E,6EAA6E;AAC7E,6EAA6E;AAC7E,+BAA+B;AAC/B,8PAA8P,EAC9P,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,EAAE;CACZ,CAAC;AA2BF;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,SAAS,EAAoB;IAC9F,OAAO;QACL,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;QACtE,cAAc,EAAE,OAAO;QACvB,aAAa,EAAE,MAAM;KACtB,CAAC;AACJ,CAAC;AAOD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAA8B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACvI,OAAO,eAAM,GAAG,EAAE,GAAG,KAAM,WAAW,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,GAAI,CAAC;AACxF,CAAC,CAAC,CAAC;AACH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,CAAC"}
package/dist/components/Badge/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { Badge, type BadgeProps, badgeVariants } from "./Badge.js";
1
+ export { Badge, type BadgeIntent, type BadgeIntentName, type BadgeProps, type BadgeVariant, type BadgeVariantName, badgeRecipe, badgeVariants, } from "./Badge.js";
2
2
  //# sourceMappingURL=index.d.ts.map
package/dist/components/Badge/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC"}
package/dist/components/Badge/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { Badge, badgeVariants } from "./Badge.js";
1
+ export { Badge, badgeRecipe, badgeVariants, } from "./Badge.js";
2
2
  //# sourceMappingURL=index.js.map
package/dist/components/Badge/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,aAAa,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAML,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC"}
package/dist/components/BarChart/BarChart.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type * as React from "react";
1
+ import * as React from "react";
2
2
  export type BarChartItem = {
3
3
  label: string;
4
4
  value: number;
@@ -11,5 +11,23 @@ export type BarChartProps = React.HTMLAttributes<HTMLDivElement> & {
11
11
  formatValue?: (value: number) => string;
12
12
  barHeight?: number;
13
13
  };
14
- export declare const BarChart: ({ data, showValues, maxValue: maxValueProp, formatValue, barHeight, className, ...rest }: BarChartProps) => React.JSX.Element;
14
+ /**
15
+ * Horizontal bar chart, rendered as plain `<div>` bars rather than SVG — each
16
+ * row is a label, a track, and a colored fill sized to the item's percentage
17
+ * of `maxValue` (auto-detected from the data when omitted).
18
+ *
19
+ * Colour is per-item: pass a CSS color string via `color` on a
20
+ * `BarChartItem` (typically a `var(--fg-*)` token), or omit it to cycle
21
+ * through the built-in `DEFAULT_COLORS` list by index. There is no
22
+ * chart-level accessible name — the only text exposed to assistive tech is
23
+ * the visible label and, when `showValues` is true (the default), the
24
+ * formatted value next to each bar.
25
+ */
26
+ export declare const BarChart: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
27
+ data: BarChartItem[];
28
+ showValues?: boolean;
29
+ maxValue?: number;
30
+ formatValue?: (value: number) => string;
31
+ barHeight?: number;
32
+ } & React.RefAttributes<HTMLDivElement>>;
15
33
  //# sourceMappingURL=BarChart.d.ts.map
package/dist/components/BarChart/BarChart.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,QAAQ,6FAQlB,aAAa,sBAuBf,CAAC"}
1
+ {"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ;UArBb,YAAY,EAAE;iBACP,OAAO;eACT,MAAM;kBACH,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;gBAC3B,MAAM;wCA0CnB,CAAC"}