@robr0/design-system 0.8.0 → 0.10.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 (109) hide show
  1. package/README.md +12 -7
  2. package/components/Accordion/Accordion.js +1 -0
  3. package/components/AgentPlan/AgentPlan.css +2 -2
  4. package/components/AgentPlan/AgentPlan.js +1 -0
  5. package/components/AgentStatus/AgentStatus.js +1 -0
  6. package/components/AiButton/AiButton.js +1 -0
  7. package/components/AlertDialog/AlertDialog.js +1 -0
  8. package/components/AnchorNav/AnchorNav.css +63 -0
  9. package/components/AnchorNav/AnchorNav.d.ts +33 -0
  10. package/components/AnchorNav/AnchorNav.js +82 -0
  11. package/components/AppLayout/AppLayout.js +1 -0
  12. package/components/AppSidebar/AppSidebar.css +13 -3
  13. package/components/AppSidebar/AppSidebar.d.ts +6 -2
  14. package/components/AppSidebar/AppSidebar.js +68 -36
  15. package/components/Avatar/Avatar.js +1 -0
  16. package/components/Button/Button.js +1 -0
  17. package/components/Card/Card.js +1 -0
  18. package/components/Carousel/Carousel.js +1 -0
  19. package/components/Chart/AreaChart.js +1 -1
  20. package/components/Chart/BarChart.js +1 -1
  21. package/components/Chart/LineChart.js +1 -1
  22. package/components/Chart/PieChart.js +2 -2
  23. package/components/Chart/RadarChart.js +1 -1
  24. package/components/Chart/RadialChart.js +2 -2
  25. package/components/Chart/StackedBarChart.js +2 -2
  26. package/components/ChatThread/ChatThread.js +1 -0
  27. package/components/Checkbox/Checkbox.js +1 -0
  28. package/components/CodeBlock/CodeBlock.js +1 -0
  29. package/components/CodeDiff/CodeDiff.css +175 -0
  30. package/components/CodeDiff/CodeDiff.d.ts +58 -0
  31. package/components/CodeDiff/CodeDiff.js +114 -0
  32. package/components/ColorPicker/ColorPicker.js +1 -0
  33. package/components/Combobox/Combobox.js +1 -0
  34. package/components/CommandPalette/CommandPalette.js +1 -0
  35. package/components/Composer/Composer.js +1 -0
  36. package/components/ContactCard/ContactCard.js +1 -0
  37. package/components/ContextMenu/ContextMenu.js +1 -0
  38. package/components/DataTable/DataTable.js +1 -0
  39. package/components/DateInput/DateInput.js +1 -0
  40. package/components/DatePicker/DatePicker.js +1 -0
  41. package/components/Dialog/Dialog.js +1 -0
  42. package/components/Drawer/Drawer.js +1 -0
  43. package/components/Dropdown/Dropdown.js +1 -0
  44. package/components/DropdownMenu/DropdownMenu.css +1 -1
  45. package/components/DropdownMenu/DropdownMenu.js +1 -0
  46. package/components/EventCalendar/EventCalendar.js +1 -0
  47. package/components/Field/Field.js +1 -0
  48. package/components/Field/FieldContext.js +1 -0
  49. package/components/FileInput/FileInput.js +1 -0
  50. package/components/Input/Input.js +1 -0
  51. package/components/InterruptCard/InterruptCard.css +11 -21
  52. package/components/InterruptCard/InterruptCard.d.ts +5 -6
  53. package/components/MessageCard/MessageCard.css +1 -2
  54. package/components/ModelPicker/ModelPicker.css +3 -1
  55. package/components/ModelPicker/ModelPicker.js +1 -0
  56. package/components/NavList/NavList.js +1 -0
  57. package/components/NotificationCenter/NotificationCenter.js +1 -0
  58. package/components/NumberInput/NumberInput.css +154 -0
  59. package/components/NumberInput/NumberInput.d.ts +44 -0
  60. package/components/NumberInput/NumberInput.js +147 -0
  61. package/components/Pagination/Pagination.js +1 -0
  62. package/components/PinInput/PinInput.css +92 -0
  63. package/components/PinInput/PinInput.d.ts +46 -0
  64. package/components/PinInput/PinInput.js +161 -0
  65. package/components/Popover/Popover.css +5 -6
  66. package/components/Popover/Popover.js +1 -0
  67. package/components/RadioButton/RadioButton.js +1 -0
  68. package/components/Reasoning/Reasoning.js +1 -0
  69. package/components/SectionTitle/SectionTitle.css +8 -0
  70. package/components/SectionTitle/SectionTitle.d.ts +3 -1
  71. package/components/SectionTitle/SectionTitle.js +6 -1
  72. package/components/SegmentedControl/SegmentedControl.js +1 -0
  73. package/components/SelectionCard/SelectionCard.js +1 -0
  74. package/components/ShaderField/ShaderField.js +1 -0
  75. package/components/ShaderField/useShaderField.js +1 -0
  76. package/components/Slider/Slider.js +1 -0
  77. package/components/Sparkline/Sparkline.css +52 -0
  78. package/components/Sparkline/Sparkline.d.ts +49 -0
  79. package/components/Sparkline/Sparkline.js +86 -0
  80. package/components/Stepper/Stepper.css +207 -0
  81. package/components/Stepper/Stepper.d.ts +41 -0
  82. package/components/Stepper/Stepper.js +61 -0
  83. package/components/Tabs/Tabs.js +1 -0
  84. package/components/TagInput/TagInput.css +160 -0
  85. package/components/TagInput/TagInput.d.ts +43 -0
  86. package/components/TagInput/TagInput.js +137 -0
  87. package/components/Textarea/Textarea.js +1 -0
  88. package/components/TimePicker/TimePicker.css +230 -0
  89. package/components/TimePicker/TimePicker.d.ts +46 -0
  90. package/components/TimePicker/TimePicker.js +246 -0
  91. package/components/Toast/Toast.js +1 -0
  92. package/components/ToggleGroup/ToggleGroup.js +1 -0
  93. package/components/ToggleSwitch/ToggleSwitch.js +1 -0
  94. package/components/ToolCall/ToolCall.css +7 -11
  95. package/components/ToolCall/ToolCall.js +1 -0
  96. package/components/Tooltip/Tooltip.js +1 -0
  97. package/components/TreeView/TreeView.css +119 -0
  98. package/components/TreeView/TreeView.d.ts +45 -0
  99. package/components/TreeView/TreeView.js +232 -0
  100. package/components/registry.d.ts +22 -6
  101. package/components/registry.js +3 -1
  102. package/components/registry.json +206 -20
  103. package/components/registry.json.d.ts +206 -20
  104. package/components/registry.json.js +2 -2
  105. package/index.d.ts +11 -2
  106. package/index.js +21 -1
  107. package/package.json +1 -1
  108. package/tokens/tokens-dark.css +17 -13
  109. package/tokens/tokens-light.css +15 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@robr0/design-system",
3
- "version": "0.8.0",
3
+ "version": "0.10.0",
4
4
  "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/tokens-dark.css CHANGED
@@ -48,21 +48,25 @@
48
48
  --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.55);
49
49
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.6);
50
50
 
51
- /* Action - Primary */
52
- --color-action-primary-bg: var(--primitive-teal-07);
53
- --color-action-primary-bg-hover: var(--primitive-teal-08);
54
- --color-action-primary-bg-active: var(--primitive-teal-09);
55
- --color-action-primary-text: var(--primitive-teal-02);
56
- --color-action-primary-text-active: var(--primitive-neutral-01);
51
+ /* Action - Primary. Inverted from light: the fill is the light half of
52
+ the teal ramp under a dark label, because a dark fill cannot clear 3:1
53
+ against the near-black page. Hover and active brighten rather than
54
+ deepen, so the fill walks toward the page's opposite, not into it. */
55
+ --color-action-primary-bg: var(--primitive-teal-05);
56
+ --color-action-primary-bg-hover: var(--primitive-teal-04);
57
+ --color-action-primary-bg-active: var(--primitive-teal-03);
58
+ --color-action-primary-text: var(--primitive-teal-10);
59
+ --color-action-primary-text-active: var(--primitive-teal-10);
57
60
  --color-action-primary-text-secondary: var(--primitive-teal-10);
58
- --color-action-primary-text-tertiary: var(--primitive-teal-07);
59
- --color-action-primary-border: var(--primitive-teal-09);
61
+ --color-action-primary-text-tertiary: var(--primitive-teal-04);
62
+ --color-action-primary-border: var(--primitive-teal-05);
60
63
  --color-action-primary-border-secondary: var(--primitive-teal-06);
61
64
  --color-action-primary-border-tertiary: var(--primitive-teal-04);
62
65
 
63
- /* Action - Icon */
66
+ /* Action - Icon. The active icon sits on the hover/active fills, which
67
+ are the light half of the ramp here — so it inverts with the label. */
64
68
  --color-action-icon-default: var(--primitive-neutral-01);
65
- --color-action-icon-active: var(--primitive-neutral-01);
69
+ --color-action-icon-active: var(--primitive-teal-10);
66
70
 
67
71
  /* Action - Passive (Secondary button) */
68
72
  --color-action-passive-text: var(--primitive-neutral-01);
@@ -99,7 +103,7 @@
99
103
  stays luminous on dark surfaces. */
100
104
  --color-ai-gradient-start: var(--primitive-red-05);
101
105
  --color-ai-gradient-mid: var(--primitive-blue-05);
102
- --color-ai-gradient-end: var(--primitive-teal-05);
106
+ --color-ai-gradient-end: var(--primitive-teal-07);
103
107
 
104
108
  /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
105
109
  --color-chart-contribution-0: var(--primitive-neutral-08);
@@ -114,14 +118,14 @@
114
118
  --color-input-text-disabled: var(--primitive-neutral-07);
115
119
  --color-input-text-inverse: var(--primitive-neutral-07);
116
120
  --color-input-border-primary: var(--primitive-neutral-08);
117
- --color-input-border-hover: var(--primitive-teal-09);
121
+ --color-input-border-hover: var(--primitive-teal-07);
118
122
  --color-input-border-selected: var(--primitive-teal-06);
119
123
  --color-input-border-disabled: var(--primitive-neutral-08);
120
124
  --color-input-bg-primary: var(--primitive-neutral-10);
121
125
  --color-input-bg-disabled: var(--primitive-neutral-09);
122
126
 
123
127
  /* Core colours */
124
- --color-core-ui-primary: var(--primitive-teal-07);
128
+ --color-core-ui-primary: var(--primitive-teal-05);
125
129
  --color-core-ui-secondary: var(--primitive-teal-09);
126
130
  --color-core-accent-coral: var(--primitive-red-07);
127
131
  --color-core-accent-violet: var(--primitive-purple-07);
package/tokens/tokens-light.css CHANGED
@@ -51,17 +51,20 @@
51
51
  --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.12);
52
52
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);
53
53
 
54
- /* Action - Primary */
55
- --color-action-primary-bg: var(--primitive-teal-07);
56
- --color-action-primary-bg-hover: var(--primitive-teal-08);
57
- --color-action-primary-bg-active: var(--primitive-teal-09);
54
+ /* Action - Primary. The action colour is theme-dependent: one teal step
55
+ cannot clear 3:1 against both a white page and a near-black one while
56
+ also carrying a 4.5:1 label, so light takes a deep fill under a light
57
+ label and the dark theme inverts it (see tokens-dark.css). */
58
+ --color-action-primary-bg: var(--primitive-teal-08);
59
+ --color-action-primary-bg-hover: var(--primitive-teal-09);
60
+ --color-action-primary-bg-active: var(--primitive-teal-10);
58
61
  --color-action-primary-text: var(--primitive-teal-02);
59
62
  --color-action-primary-text-active: var(--primitive-neutral-01);
60
63
  --color-action-primary-text-secondary: var(--primitive-teal-10);
61
- --color-action-primary-text-tertiary: var(--primitive-teal-07);
62
- --color-action-primary-border: var(--primitive-teal-09);
63
- --color-action-primary-border-secondary: var(--primitive-teal-06);
64
- --color-action-primary-border-tertiary: var(--primitive-teal-04);
64
+ --color-action-primary-text-tertiary: var(--primitive-teal-09);
65
+ --color-action-primary-border: var(--primitive-teal-10);
66
+ --color-action-primary-border-secondary: var(--primitive-teal-08);
67
+ --color-action-primary-border-tertiary: var(--primitive-teal-08);
65
68
 
66
69
  /* Action - Icon */
67
70
  --color-action-icon-default: var(--primitive-neutral-10);
@@ -74,7 +77,7 @@
74
77
  --color-action-passive-bg-active: var(--primitive-neutral-03-semi);
75
78
 
76
79
  /* Core colours */
77
- --color-core-ui-primary: var(--primitive-teal-07);
80
+ --color-core-ui-primary: var(--primitive-teal-08);
78
81
  --color-core-ui-secondary: var(--primitive-teal-10);
79
82
  --color-core-accent-coral: var(--primitive-red-07);
80
83
  --color-core-accent-violet: var(--primitive-purple-07);
@@ -114,7 +117,7 @@
114
117
  (AiButton's ring and glow), never as fills for ordinary chrome. */
115
118
  --color-ai-gradient-start: var(--primitive-red-06);
116
119
  --color-ai-gradient-mid: var(--primitive-blue-06);
117
- --color-ai-gradient-end: var(--primitive-teal-06);
120
+ --color-ai-gradient-end: var(--primitive-teal-08);
118
121
 
119
122
  /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
120
123
  --color-chart-contribution-0: var(--color-bg-container-primary);
@@ -129,8 +132,8 @@
129
132
  --color-input-text-disabled: var(--primitive-neutral-04);
130
133
  --color-input-text-inverse: var(--primitive-neutral-04);
131
134
  --color-input-border-primary: var(--primitive-neutral-02);
132
- --color-input-border-hover: var(--primitive-teal-04);
133
- --color-input-border-selected: var(--primitive-teal-06);
135
+ --color-input-border-hover: var(--primitive-teal-06);
136
+ --color-input-border-selected: var(--primitive-teal-08);
134
137
  --color-input-border-disabled: var(--primitive-neutral-03);
135
138
  --color-input-bg-primary: var(--primitive-neutral-00);
136
139
  --color-input-bg-disabled: var(--primitive-neutral-02);