@orcestr/ui 0.0.1 → 0.1.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 (179) hide show
  1. package/README.md +4 -0
  2. package/README.ru.md +4 -0
  3. package/dist/components/Alert/Alert.d.ts +5 -4
  4. package/dist/components/Alert/Alert.d.ts.map +1 -1
  5. package/dist/components/Alert/Alert.js +5 -2
  6. package/dist/components/AppShell/AppShell.d.ts +2 -0
  7. package/dist/components/AppShell/AppShell.d.ts.map +1 -1
  8. package/dist/components/AppShell/AppShell.js +9 -6
  9. package/dist/components/AppSidebar/AppSidebar.d.ts +36 -0
  10. package/dist/components/AppSidebar/AppSidebar.d.ts.map +1 -0
  11. package/dist/components/AppSidebar/AppSidebar.js +53 -0
  12. package/dist/components/Badge/Badge.d.ts +8 -6
  13. package/dist/components/Badge/Badge.d.ts.map +1 -1
  14. package/dist/components/Badge/Badge.js +4 -4
  15. package/dist/components/BadgeSelectMenu/BadgeSelectMenu.d.ts +22 -0
  16. package/dist/components/BadgeSelectMenu/BadgeSelectMenu.d.ts.map +1 -0
  17. package/dist/components/BadgeSelectMenu/BadgeSelectMenu.js +50 -0
  18. package/dist/components/Box/Box.d.ts +2 -0
  19. package/dist/components/Box/Box.d.ts.map +1 -1
  20. package/dist/components/Box/Box.js +15 -2
  21. package/dist/components/Button/Button.d.ts +7 -3
  22. package/dist/components/Button/Button.d.ts.map +1 -1
  23. package/dist/components/Button/Button.js +23 -3
  24. package/dist/components/Card/Card.d.ts +26 -0
  25. package/dist/components/Card/Card.d.ts.map +1 -0
  26. package/dist/components/Card/Card.js +25 -0
  27. package/dist/components/Checkbox/Checkbox.d.ts +6 -2
  28. package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
  29. package/dist/components/Checkbox/Checkbox.js +13 -4
  30. package/dist/components/CommandPalette/CommandPalette.d.ts.map +1 -1
  31. package/dist/components/CommandPalette/CommandPalette.js +10 -9
  32. package/dist/components/ConfirmDialog/ConfirmDialog.d.ts.map +1 -1
  33. package/dist/components/ConfirmDialog/ConfirmDialog.js +5 -2
  34. package/dist/components/ContextMenu/ContextMenu.d.ts.map +1 -1
  35. package/dist/components/ContextMenu/ContextMenu.js +2 -2
  36. package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
  37. package/dist/components/DatePicker/DatePicker.js +9 -1
  38. package/dist/components/Dialog/Dialog.d.ts +69 -1
  39. package/dist/components/Dialog/Dialog.d.ts.map +1 -1
  40. package/dist/components/Dialog/Dialog.js +48 -1
  41. package/dist/components/Drawer/Drawer.d.ts.map +1 -1
  42. package/dist/components/Drawer/Drawer.js +2 -2
  43. package/dist/components/EntityPicker/EntityPicker.d.ts +2 -1
  44. package/dist/components/EntityPicker/EntityPicker.d.ts.map +1 -1
  45. package/dist/components/EntityPicker/EntityPicker.js +2 -2
  46. package/dist/components/Flex/Flex.d.ts +5 -1
  47. package/dist/components/Flex/Flex.d.ts.map +1 -1
  48. package/dist/components/Flex/Flex.js +16 -3
  49. package/dist/components/Grid/Grid.d.ts +9 -2
  50. package/dist/components/Grid/Grid.d.ts.map +1 -1
  51. package/dist/components/Grid/Grid.js +22 -1
  52. package/dist/components/IconButton/IconButton.d.ts +19 -7
  53. package/dist/components/IconButton/IconButton.d.ts.map +1 -1
  54. package/dist/components/IconButton/IconButton.js +40 -5
  55. package/dist/components/IconTextButton/IconTextButton.d.ts +20 -0
  56. package/dist/components/IconTextButton/IconTextButton.d.ts.map +1 -0
  57. package/dist/components/IconTextButton/IconTextButton.js +24 -0
  58. package/dist/components/InlineEdit/InlineEdit.d.ts +63 -0
  59. package/dist/components/InlineEdit/InlineEdit.d.ts.map +1 -0
  60. package/dist/components/InlineEdit/InlineEdit.js +98 -0
  61. package/dist/components/LinkButton/LinkButton.d.ts +25 -0
  62. package/dist/components/LinkButton/LinkButton.d.ts.map +1 -0
  63. package/dist/components/LinkButton/LinkButton.js +12 -0
  64. package/dist/components/Modal/Modal.d.ts +29 -6
  65. package/dist/components/Modal/Modal.d.ts.map +1 -1
  66. package/dist/components/Modal/Modal.js +37 -13
  67. package/dist/components/Overlay/OverlayProvider.d.ts +1 -0
  68. package/dist/components/Overlay/OverlayProvider.d.ts.map +1 -1
  69. package/dist/components/Overlay/OverlayProvider.js +18 -1
  70. package/dist/components/PaginatedCombobox/PaginatedCombobox.d.ts +2 -1
  71. package/dist/components/PaginatedCombobox/PaginatedCombobox.d.ts.map +1 -1
  72. package/dist/components/PaginatedCombobox/PaginatedCombobox.js +3 -3
  73. package/dist/components/Popover/Popover.d.ts +37 -3
  74. package/dist/components/Popover/Popover.d.ts.map +1 -1
  75. package/dist/components/Popover/Popover.js +56 -9
  76. package/dist/components/ScrollArea/ScrollArea.d.ts +4 -0
  77. package/dist/components/ScrollArea/ScrollArea.d.ts.map +1 -1
  78. package/dist/components/ScrollArea/ScrollArea.js +30 -4
  79. package/dist/components/Section/Section.d.ts +2 -0
  80. package/dist/components/Section/Section.d.ts.map +1 -1
  81. package/dist/components/SegmentedControl/SegmentedControl.d.ts +24 -1
  82. package/dist/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  83. package/dist/components/SegmentedControl/SegmentedControl.js +28 -2
  84. package/dist/components/Select/Select.d.ts +36 -4
  85. package/dist/components/Select/Select.d.ts.map +1 -1
  86. package/dist/components/Select/Select.js +70 -3
  87. package/dist/components/Separator/Separator.d.ts +3 -1
  88. package/dist/components/Separator/Separator.d.ts.map +1 -1
  89. package/dist/components/Separator/Separator.js +4 -2
  90. package/dist/components/SpecialModal/SpecialModal.d.ts +43 -0
  91. package/dist/components/SpecialModal/SpecialModal.d.ts.map +1 -0
  92. package/dist/components/SpecialModal/SpecialModal.js +34 -0
  93. package/dist/components/Spinner/Spinner.d.ts +3 -1
  94. package/dist/components/Spinner/Spinner.d.ts.map +1 -1
  95. package/dist/components/Spinner/Spinner.js +2 -2
  96. package/dist/components/State/State.d.ts +8 -1
  97. package/dist/components/State/State.d.ts.map +1 -1
  98. package/dist/components/State/State.js +2 -2
  99. package/dist/components/Switch/Switch.d.ts +2 -0
  100. package/dist/components/Switch/Switch.d.ts.map +1 -1
  101. package/dist/components/Switch/Switch.js +2 -1
  102. package/dist/components/Table/Table.d.ts +64 -0
  103. package/dist/components/Table/Table.d.ts.map +1 -0
  104. package/dist/components/Table/Table.js +38 -0
  105. package/dist/components/Tabs/Tabs.d.ts +33 -2
  106. package/dist/components/Tabs/Tabs.d.ts.map +1 -1
  107. package/dist/components/Tabs/Tabs.js +189 -4
  108. package/dist/components/Text/Text.d.ts +13 -3
  109. package/dist/components/Text/Text.d.ts.map +1 -1
  110. package/dist/components/Text/Text.js +16 -3
  111. package/dist/components/TextArea/TextArea.d.ts.map +1 -1
  112. package/dist/components/TextArea/TextArea.js +1 -1
  113. package/dist/components/TextField/TextField.d.ts.map +1 -1
  114. package/dist/components/TextField/TextField.js +1 -1
  115. package/dist/components/Toast/Toast.d.ts +1 -0
  116. package/dist/components/Toast/Toast.d.ts.map +1 -1
  117. package/dist/components/Toast/Toast.js +19 -8
  118. package/dist/components/Tooltip/Tooltip.d.ts +11 -3
  119. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
  120. package/dist/components/Tooltip/Tooltip.js +58 -9
  121. package/dist/example/CodePreview.d.ts.map +1 -1
  122. package/dist/example/CodePreview.js +3 -3
  123. package/dist/example/ExampleActionsSection.d.ts.map +1 -1
  124. package/dist/example/ExampleActionsSection.js +3 -3
  125. package/dist/example/ExampleApplicationSection.d.ts +7 -0
  126. package/dist/example/ExampleApplicationSection.d.ts.map +1 -0
  127. package/dist/example/ExampleApplicationSection.js +68 -0
  128. package/dist/example/ExampleBasicsSections.d.ts.map +1 -1
  129. package/dist/example/ExampleBasicsSections.js +5 -9
  130. package/dist/example/ExampleDataSection.d.ts.map +1 -1
  131. package/dist/example/ExampleDataSection.js +31 -30
  132. package/dist/example/ExampleFieldsSection.d.ts.map +1 -1
  133. package/dist/example/ExampleFieldsSection.js +51 -3
  134. package/dist/example/ExampleFoundationsSection.js +1 -1
  135. package/dist/example/ExampleOverlays.d.ts.map +1 -1
  136. package/dist/example/ExampleOverlays.js +7 -2
  137. package/dist/example/ExampleOverlaysSection.d.ts.map +1 -1
  138. package/dist/example/ExampleOverlaysSection.js +5 -2
  139. package/dist/example/ExampleSelectionSection.d.ts +3 -1
  140. package/dist/example/ExampleSelectionSection.d.ts.map +1 -1
  141. package/dist/example/ExampleSelectionSection.js +10 -3
  142. package/dist/example/ExampleStateSection.d.ts +3 -0
  143. package/dist/example/ExampleStateSection.d.ts.map +1 -1
  144. package/dist/example/ExampleStateSection.js +58 -3
  145. package/dist/example/ExampleThemePlayground.d.ts +101 -71
  146. package/dist/example/ExampleThemePlayground.d.ts.map +1 -1
  147. package/dist/example/ExampleThemePlayground.js +137 -74
  148. package/dist/example/UiExamplePage.d.ts +7 -1
  149. package/dist/example/UiExamplePage.d.ts.map +1 -1
  150. package/dist/example/UiExamplePage.js +72 -27
  151. package/dist/example/codeSamples.d.ts +7 -0
  152. package/dist/example/codeSamples.d.ts.map +1 -1
  153. package/dist/example/codeSamples.js +429 -60
  154. package/dist/example/exampleData.d.ts.map +1 -1
  155. package/dist/example/exampleData.js +16 -2
  156. package/dist/example/styles.css +245 -74
  157. package/dist/hooks/useFloatingPosition.js +1 -1
  158. package/dist/hooks/usePresence.d.ts.map +1 -1
  159. package/dist/hooks/usePresence.js +9 -7
  160. package/dist/index.d.ts +8 -1
  161. package/dist/index.d.ts.map +1 -1
  162. package/dist/index.js +8 -1
  163. package/dist/styles/orcestr-ui.css +2545 -672
  164. package/dist/theme/ThemeProvider.d.ts.map +1 -1
  165. package/dist/theme/ThemeProvider.js +90 -36
  166. package/dist/theme/defaultTheme.d.ts.map +1 -1
  167. package/dist/theme/defaultTheme.js +322 -194
  168. package/dist/theme/systemProps.d.ts +48 -28
  169. package/dist/theme/systemProps.d.ts.map +1 -1
  170. package/dist/theme/systemProps.js +103 -1
  171. package/dist/theme/themeTypes.d.ts +21 -17
  172. package/dist/theme/themeTypes.d.ts.map +1 -1
  173. package/dist/utils/slot.d.ts +11 -0
  174. package/dist/utils/slot.d.ts.map +1 -0
  175. package/dist/utils/slot.js +18 -0
  176. package/package.json +2 -2
  177. package/dist/components/Workflow/Workflow.d.ts +0 -82
  178. package/dist/components/Workflow/Workflow.d.ts.map +0 -1
  179. package/dist/components/Workflow/Workflow.js +0 -73
@@ -15,10 +15,10 @@ export const navGroups = [
15
15
  key: 'layout',
16
16
  label: 'Layout',
17
17
  items: [
18
- { id: 'app-shell-example', label: 'AppShell' },
19
18
  { id: 'flex-example', label: 'Flex' },
20
19
  { id: 'stack-example', label: 'Stack' },
21
20
  { id: 'collapse-example', label: 'Collapse' },
21
+ { id: 'surfaces-example', label: 'Surfaces' },
22
22
  { id: 'grid-example', label: 'Grid' },
23
23
  { id: 'highlight-primitives-example', label: 'Highlights' },
24
24
  { id: 'scroll-area-example', label: 'ScrollArea' },
@@ -30,7 +30,9 @@ export const navGroups = [
30
30
  label: 'Actions',
31
31
  items: [
32
32
  { id: 'buttons-example', label: 'Buttons' },
33
+ { id: 'icon-text-buttons-example', label: 'Icon text buttons' },
33
34
  { id: 'icon-buttons-example', label: 'Icon buttons' },
35
+ { id: 'context-menu-example', label: 'Context menu' },
34
36
  ],
35
37
  },
36
38
  {
@@ -39,6 +41,7 @@ export const navGroups = [
39
41
  items: [
40
42
  { id: 'text-fields-example', label: 'Text fields' },
41
43
  { id: 'grouped-fields-example', label: 'Grouped fields' },
44
+ { id: 'inline-edit-example', label: 'Inline edit' },
42
45
  { id: 'number-date-fields-example', label: 'Number and date' },
43
46
  { id: 'date-range-example', label: 'Date range' },
44
47
  ],
@@ -57,6 +60,7 @@ export const navGroups = [
57
60
  label: 'States',
58
61
  items: [
59
62
  { id: 'state-card-example', label: 'StateCard' },
63
+ { id: 'badges-example', label: 'Badge' },
60
64
  ],
61
65
  },
62
66
  {
@@ -64,6 +68,7 @@ export const navGroups = [
64
68
  label: 'Data',
65
69
  items: [
66
70
  { id: 'data-table-example', label: 'DataTable' },
71
+ { id: 'table-primitives-example', label: 'Table and pagination' },
67
72
  ],
68
73
  },
69
74
  {
@@ -75,6 +80,15 @@ export const navGroups = [
75
80
  { id: 'overlay-settings-example', label: 'Overlay settings' },
76
81
  ],
77
82
  },
83
+ {
84
+ key: 'application',
85
+ label: 'Application',
86
+ items: [
87
+ { id: 'app-shell-example', label: 'AppShell' },
88
+ { id: 'app-sidebar-example', label: 'AppSidebar' },
89
+ { id: 'special-modal-example', label: 'SpecialModal' },
90
+ ],
91
+ },
78
92
  ];
79
93
  export const navItems = navGroups.flatMap((group) => group.items);
80
94
  export const navItemLabels = navItems.map((item) => [item.id, item.label]);
@@ -131,7 +145,7 @@ const enCommandItems = [
131
145
  {
132
146
  key: 'create-record',
133
147
  label: 'Create record',
134
- description: 'Start a new workflow.',
148
+ description: 'Start a new record.',
135
149
  shortcut: 'C',
136
150
  group: 'Create',
137
151
  },
@@ -53,20 +53,15 @@ body.oui-ui-document-lock {
53
53
  min-height: 0;
54
54
  }
55
55
 
56
- .oui-ui-topbar {
57
- display: flex;
58
- min-width: 0;
59
- flex: 0 0 auto;
60
- align-items: center;
61
- justify-content: space-between;
62
- gap: 14px;
63
- border-radius: var(--oui-radius);
64
- background: var(--oui-section-surface-bg, var(--oui-panel));
65
- box-shadow: var(--oui-section-shadow, none);
66
- margin: 0 28px 10px 22px;
67
- padding: 14px 16px;
56
+ .oui-ui-workspace-main > .oui-app-shell-content-scroll > .oui-scroll-area-viewport {
57
+ scroll-behavior: smooth;
68
58
  }
69
59
 
60
+ @media (prefers-reduced-motion: reduce) {
61
+ .oui-ui-workspace-main > .oui-app-shell-content-scroll > .oui-scroll-area-viewport {
62
+ scroll-behavior: auto;
63
+ }
64
+ }
70
65
  .oui-ui-brand {
71
66
  display: inline-flex;
72
67
  min-width: 0;
@@ -117,31 +112,23 @@ body.oui-ui-document-lock {
117
112
  white-space: nowrap;
118
113
  }
119
114
 
120
- .oui-app-shell-sidebar-title .oui-ui-brand {
115
+ .oui-ui-main-sidebar .oui-ui-brand {
121
116
  width: 100%;
122
117
  }
123
118
 
124
- .oui-app-shell-sidebar-title .oui-ui-brand-text {
119
+ .oui-ui-main-sidebar .oui-ui-brand-text {
125
120
  flex: 1 1 auto;
126
121
  }
127
122
 
128
- .oui-ui-topbar-actions {
129
- display: inline-flex;
130
- min-width: 0;
131
- flex: 0 0 auto;
132
- align-items: center;
133
- justify-content: flex-end;
134
- gap: 8px;
135
- }
136
-
137
- .oui-ui-topbar-slogan {
123
+ .oui-ui-header-title {
138
124
  display: flex;
139
125
  min-width: 0;
126
+ flex: 1 1 auto;
140
127
  flex-direction: column;
141
128
  gap: 2px;
142
129
  }
143
130
 
144
- .oui-ui-topbar-slogan strong {
131
+ .oui-ui-header-title strong {
145
132
  overflow: hidden;
146
133
  color: var(--oui-text);
147
134
  font-size: 14px;
@@ -151,7 +138,7 @@ body.oui-ui-document-lock {
151
138
  white-space: nowrap;
152
139
  }
153
140
 
154
- .oui-ui-topbar-slogan span {
141
+ .oui-ui-header-title span {
155
142
  overflow: hidden;
156
143
  color: var(--oui-muted);
157
144
  font-size: 12px;
@@ -160,7 +147,16 @@ body.oui-ui-document-lock {
160
147
  white-space: nowrap;
161
148
  }
162
149
 
163
- .oui-ui-topbar-link {
150
+ .oui-ui-header-actions {
151
+ display: inline-flex;
152
+ min-width: 0;
153
+ flex: 0 0 auto;
154
+ align-items: center;
155
+ justify-content: flex-end;
156
+ gap: 8px;
157
+ }
158
+
159
+ .oui-ui-header-link {
164
160
  display: inline-flex;
165
161
  min-height: 30px;
166
162
  align-items: center;
@@ -178,7 +174,7 @@ body.oui-ui-document-lock {
178
174
  font-family: inherit;
179
175
  }
180
176
 
181
- .oui-ui-topbar-link {
177
+ .oui-ui-header-link {
182
178
  background: var(--oui-pad-bg);
183
179
  padding: 0 9px;
184
180
  }
@@ -227,15 +223,15 @@ body.oui-ui-document-lock {
227
223
  }
228
224
 
229
225
  .oui-ui-language-option[data-active=true] {
230
- background: var(--oui-brand-soft);
231
- color: var(--oui-brand-strong);
226
+ background: var(--oui-primary-surface);
227
+ color: var(--oui-primary-text);
232
228
  }
233
229
 
234
- .oui-ui-topbar-link:hover {
230
+ .oui-ui-header-link:hover {
235
231
  background: var(--oui-pad-hover-bg);
236
232
  }
237
233
 
238
- .oui-ui-topbar-link:focus-visible {
234
+ .oui-ui-header-link:focus-visible {
239
235
  outline: none;
240
236
  box-shadow: var(--oui-ring);
241
237
  }
@@ -347,55 +343,216 @@ body.oui-ui-document-lock {
347
343
  flex: 0 0 auto;
348
344
  }
349
345
 
350
- .oui-ui-sidebar-groups {
346
+ .oui-ui-context-menu-demo {
351
347
  display: flex;
352
348
  min-width: 0;
353
349
  flex-direction: column;
354
- gap: 10px;
350
+ gap: 3px;
351
+ border: 1px dashed var(--oui-border);
352
+ border-radius: var(--oui-radius-sm);
353
+ background: var(--oui-pad-bg);
354
+ cursor: context-menu;
355
+ padding: 12px;
356
+ }
357
+
358
+ .oui-ui-inline-edit-popover {
359
+ width: 280px;
360
+ }
361
+
362
+ .oui-ui-inline-edit-option {
363
+ min-height: 34px;
364
+ padding: 6px 8px;
365
+ }
366
+
367
+ .oui-ui-inline-edit-option .oui-combobox-option-main {
368
+ align-self: auto;
369
+ padding: 0;
370
+ }
371
+
372
+ .oui-ui-app-sidebar-demo {
373
+ width: min(100%, 300px);
374
+ height: 440px;
375
+ overflow: hidden;
376
+ border: 1px solid var(--oui-border);
377
+ border-radius: var(--oui-radius);
378
+ background: var(--oui-bg);
355
379
  }
356
380
 
357
- .oui-ui-sidebar-group {
381
+ .oui-ui-app-sidebar-demo .oui-app-sidebar {
382
+ width: 100%;
383
+ height: 100%;
384
+ }
385
+
386
+ .oui-ui-app-shell-modal {
358
387
  display: flex;
359
- min-width: 0;
388
+ width: min(100vw - 32px, 1720px) !important;
389
+ height: min(100vh - 32px, 940px);
390
+ max-height: calc(100vh - 32px);
360
391
  flex-direction: column;
361
- gap: 5px;
362
392
  }
363
393
 
364
- .oui-ui-sidebar-group-label {
394
+ .oui-ui-app-shell-modal-header {
395
+ border-bottom: 1px solid var(--oui-border);
396
+ padding: 10px 12px;
397
+ }
398
+
399
+ .oui-ui-app-shell-modal-body {
365
400
  display: flex;
401
+ min-height: 0;
402
+ flex: 1 1 auto;
403
+ align-items: stretch;
404
+ justify-content: center;
405
+ overflow: hidden;
406
+ padding: 12px;
407
+ }
408
+
409
+ .oui-special-modal-scroll-body .oui-ui-app-shell-modal-body {
410
+ overflow: hidden;
411
+ }
412
+
413
+ .oui-ui-app-shell-preview-stage {
414
+ width: 100%;
415
+ height: 100%;
366
416
  min-width: 0;
367
- align-items: center;
368
- gap: 8px;
369
- color: var(--oui-muted);
370
- font-size: 11px;
371
- font-weight: 800;
372
- letter-spacing: 0.04em;
373
- line-height: 1;
374
- text-transform: uppercase;
417
+ min-height: 520px;
418
+ overflow: hidden;
419
+ border: 1px solid var(--oui-border);
420
+ border-radius: var(--oui-radius);
421
+ background: var(--oui-bg);
375
422
  }
376
423
 
377
- .oui-ui-sidebar-group-label::after {
378
- content: "";
379
- display: block;
424
+ .oui-ui-app-shell-preview-stage[data-mode=phone] {
425
+ width: min(100%, 410px);
426
+ min-height: 0;
427
+ border-radius: 24px;
428
+ }
429
+
430
+ .oui-ui-app-shell-preview-stage .oui-app-shell {
431
+ height: 100%;
432
+ min-height: 0;
433
+ overflow: hidden;
434
+ background: var(--oui-bg);
435
+ padding: 0;
436
+ }
437
+
438
+ .oui-ui-app-shell-preview-stage .oui-app-shell-frame {
439
+ height: calc(100% - 56px);
440
+ max-width: 100%;
441
+ margin: 0;
442
+ }
443
+
444
+ .oui-ui-app-shell-preview-stage[data-mode=phone] .oui-app-shell-frame {
445
+ grid-template-columns: minmax(0, 1fr);
446
+ }
447
+
448
+ .oui-ui-app-shell-preview-stage .oui-app-shell-header {
449
+ min-height: 56px;
450
+ padding: 8px 12px;
451
+ }
452
+
453
+ .oui-ui-app-shell-header-main {
380
454
  min-width: 0;
381
- height: 1px;
382
455
  flex: 1 1 auto;
383
- background: var(--oui-border);
384
456
  }
385
457
 
386
- .oui-ui-sidebar-nav {
458
+ .oui-ui-app-shell-header-actions-demo {
459
+ min-width: 0;
460
+ }
461
+
462
+ .oui-ui-app-shell-preview-stage[data-mode=phone] .oui-ui-app-shell-quick-jump .oui-icon-text-button-label,
463
+ .oui-ui-app-shell-preview-stage[data-mode=phone] .oui-ui-app-shell-header-actions-demo > .oui-icon-button:nth-last-child(-n+3) {
464
+ display: none;
465
+ }
466
+
467
+ .oui-ui-app-shell-preview-stage .oui-app-shell-content {
468
+ display: flex;
469
+ flex-direction: column;
470
+ gap: 14px;
471
+ padding: 18px 18px 22px;
472
+ }
473
+
474
+ .oui-ui-app-shell-preview-stage .oui-app-sidebar {
475
+ border-right: 1px solid var(--oui-border);
476
+ }
477
+
478
+ @media (max-width: 980px) {
479
+ .oui-ui-app-shell-mode-toggle {
480
+ display: none;
481
+ }
482
+ .oui-ui-app-shell-modal {
483
+ width: 100dvw !important;
484
+ height: 100dvh;
485
+ max-height: 100dvh;
486
+ }
487
+ .oui-ui-app-shell-modal-body {
488
+ padding: 8px;
489
+ }
490
+ }
491
+ .oui-ui-main-sidebar {
492
+ height: 100%;
493
+ border-radius: var(--oui-radius);
494
+ background: var(--oui-section-surface-bg, var(--oui-panel));
495
+ box-shadow: var(--oui-section-shadow, none);
496
+ }
497
+
498
+ .oui-ui-sidebar-footer-action {
499
+ display: inline-flex;
387
500
  width: 100%;
388
- gap: 4px;
501
+ min-height: 30px;
502
+ align-items: center;
503
+ justify-content: flex-start;
504
+ gap: 8px;
505
+ border: 0;
506
+ border-radius: var(--oui-radius-sm);
507
+ background: transparent;
508
+ color: var(--oui-muted);
509
+ cursor: pointer;
510
+ font: inherit;
511
+ font-size: 12px;
512
+ font-weight: 720;
513
+ line-height: 1;
514
+ padding: 0 8px;
515
+ text-align: left;
389
516
  }
390
517
 
391
- .oui-ui-sidebar-nav .oui-app-shell-nav-item {
392
- min-height: 34px;
393
- padding: 7px 9px;
518
+ .oui-ui-sidebar-footer-action:hover,
519
+ .oui-ui-sidebar-footer-action:focus-visible {
520
+ background: var(--oui-pad-hover-bg);
521
+ color: var(--oui-text);
522
+ outline: none;
394
523
  }
395
524
 
396
- .oui-ui-sidebar-nav .oui-app-shell-nav-label {
525
+ .oui-ui-demo-logo {
526
+ display: inline-flex;
527
+ width: 28px;
528
+ height: 28px;
529
+ align-items: center;
530
+ justify-content: center;
531
+ border-radius: 7px;
532
+ background: var(--oui-primary-surface);
533
+ color: var(--oui-primary-text);
397
534
  font-size: 14px;
398
- font-weight: 760;
535
+ font-weight: 820;
536
+ line-height: 1;
537
+ }
538
+
539
+ .oui-ui-application-table-preview {
540
+ display: grid;
541
+ min-width: 0;
542
+ grid-template-columns: 1fr 1.4fr 1fr 0.6fr 0.7fr;
543
+ overflow: hidden;
544
+ border: 1px solid var(--oui-border);
545
+ border-radius: var(--oui-radius-sm);
546
+ }
547
+
548
+ .oui-ui-application-table-preview > * {
549
+ min-width: 0;
550
+ border-bottom: 1px solid var(--oui-border);
551
+ padding: 9px 10px;
552
+ }
553
+
554
+ .oui-ui-application-table-preview > :nth-last-child(-n+5) {
555
+ border-bottom: 0;
399
556
  }
400
557
 
401
558
  .oui-ui-theme-rail {
@@ -465,8 +622,8 @@ body.oui-ui-document-lock {
465
622
  }
466
623
 
467
624
  .oui-ui-theme-rail-item[data-active=true] {
468
- background: var(--oui-brand-soft);
469
- color: var(--oui-brand-strong);
625
+ background: var(--oui-primary-surface);
626
+ color: var(--oui-primary-text);
470
627
  }
471
628
 
472
629
  .oui-ui-theme-rail-preview {
@@ -586,7 +743,7 @@ body.oui-ui-document-lock {
586
743
  }
587
744
 
588
745
  .oui-theme-preset-card[data-active=true] {
589
- background: var(--oui-brand-soft);
746
+ background: var(--oui-primary-surface);
590
747
  }
591
748
 
592
749
  .oui-theme-preset-preview {
@@ -673,8 +830,8 @@ body.oui-ui-document-lock {
673
830
  }
674
831
 
675
832
  .oui-theme-surface-button[data-active=true] {
676
- border-color: color-mix(in srgb, var(--oui-brand) 68%, var(--oui-border));
677
- background: var(--oui-brand-soft);
833
+ border-color: color-mix(in srgb, var(--oui-primary-base) 68%, var(--oui-border));
834
+ background: var(--oui-primary-surface);
678
835
  }
679
836
 
680
837
  .oui-theme-surface-label {
@@ -802,8 +959,8 @@ body.oui-ui-document-lock {
802
959
  display: inline-flex;
803
960
  align-items: center;
804
961
  justify-content: center;
805
- background: var(--oui-brand-soft);
806
- color: var(--oui-brand-strong);
962
+ background: var(--oui-primary-surface);
963
+ color: var(--oui-primary-text);
807
964
  font-size: 11px;
808
965
  font-weight: 760;
809
966
  }
@@ -845,6 +1002,14 @@ body.oui-ui-document-lock {
845
1002
  gap: 8px;
846
1003
  }
847
1004
 
1005
+ .oui-ui-badge-demo {
1006
+ display: flex;
1007
+ min-width: 0;
1008
+ flex-wrap: wrap;
1009
+ align-items: center;
1010
+ gap: 8px;
1011
+ }
1012
+
848
1013
  .oui-ui-icon-text-list {
849
1014
  display: flex;
850
1015
  min-width: 0;
@@ -861,7 +1026,7 @@ body.oui-ui-document-lock {
861
1026
  .oui-code-info-button {
862
1027
  display: none;
863
1028
  flex: 0 0 auto;
864
- color: var(--oui-info);
1029
+ color: var(--oui-info-base);
865
1030
  }
866
1031
 
867
1032
  .oui-code-inline-panel {
@@ -969,17 +1134,17 @@ body.oui-ui-document-lock {
969
1134
  }
970
1135
 
971
1136
  .oui-code-keyword {
972
- color: var(--oui-brand-strong);
1137
+ color: var(--oui-primary-text);
973
1138
  font-weight: 650;
974
1139
  }
975
1140
 
976
1141
  .oui-code-component {
977
- color: var(--oui-info);
1142
+ color: var(--oui-info-base);
978
1143
  font-weight: 650;
979
1144
  }
980
1145
 
981
1146
  .oui-code-string {
982
- color: var(--oui-success);
1147
+ color: var(--oui-success-base);
983
1148
  }
984
1149
 
985
1150
  .oui-code-comment {
@@ -1002,9 +1167,6 @@ body.oui-ui-document-lock {
1002
1167
  }
1003
1168
  }
1004
1169
  @media (max-width: 860px) {
1005
- .oui-ui-topbar {
1006
- display: none;
1007
- }
1008
1170
  .oui-ui-workspace {
1009
1171
  display: flex;
1010
1172
  flex-direction: column;
@@ -1020,10 +1182,19 @@ body.oui-ui-document-lock {
1020
1182
  .oui-ui-brand[data-compact=true] .oui-ui-brand-text span {
1021
1183
  display: none;
1022
1184
  }
1023
- .oui-ui-topbar-actions[data-compact=true] .oui-ui-topbar-link span {
1185
+ .oui-ui-header-title {
1186
+ gap: 0;
1187
+ }
1188
+ .oui-ui-header-title strong {
1189
+ font-size: 14px;
1190
+ }
1191
+ .oui-ui-header-title span {
1192
+ display: none;
1193
+ }
1194
+ .oui-ui-header-actions[data-compact=true] .oui-ui-header-link span {
1024
1195
  display: none;
1025
1196
  }
1026
- .oui-ui-topbar-actions[data-compact=true] .oui-ui-topbar-link {
1197
+ .oui-ui-header-actions[data-compact=true] .oui-ui-header-link {
1027
1198
  width: 30px;
1028
1199
  min-height: 30px;
1029
1200
  padding: 0;
@@ -69,7 +69,7 @@ export function useFloatingPosition({ triggerRef, contentRef, open, side = 'bott
69
69
  position: 'fixed',
70
70
  left,
71
71
  top,
72
- minWidth: matchTriggerWidth ? triggerRect.width : undefined,
72
+ minWidth: matchTriggerWidth ? contentWidth : undefined,
73
73
  maxWidth: `calc(100vw - ${collisionPadding * 2}px)`,
74
74
  maxHeight: `calc(100vh - ${collisionPadding * 2}px)`,
75
75
  visibility: 'visible',
@@ -1 +1 @@
1
- {"version":3,"file":"usePresence.d.ts","sourceRoot":"","sources":["../../src/hooks/usePresence.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,SAAM;;;EAsC1D"}
1
+ {"version":3,"file":"usePresence.d.ts","sourceRoot":"","sources":["../../src/hooks/usePresence.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,SAAM;;;EAwC1D"}
@@ -1,15 +1,19 @@
1
1
  'use client';
2
- import { useEffect, useState } from 'react';
2
+ import { useEffect, useRef, useState } from 'react';
3
3
  export function usePresence(open, durationMs = 220) {
4
4
  const [present, setPresent] = useState(open);
5
5
  const [state, setState] = useState(open ? 'open' : 'closed');
6
+ const previousOpenRef = useRef(open);
6
7
  useEffect(() => {
8
+ if (previousOpenRef.current === open)
9
+ return;
10
+ previousOpenRef.current = open;
7
11
  let frame = 0;
8
12
  let timer = 0;
9
13
  if (open) {
14
+ setState('opening');
15
+ setPresent(true);
10
16
  frame = window.requestAnimationFrame(() => {
11
- setPresent(true);
12
- setState('opening');
13
17
  timer = window.setTimeout(() => setState('open'), durationMs);
14
18
  });
15
19
  return () => {
@@ -17,10 +21,8 @@ export function usePresence(open, durationMs = 220) {
17
21
  window.clearTimeout(timer);
18
22
  };
19
23
  }
20
- if (!present)
21
- return;
24
+ setState('closing');
22
25
  frame = window.requestAnimationFrame(() => {
23
- setState('closing');
24
26
  timer = window.setTimeout(() => {
25
27
  setPresent(false);
26
28
  setState('closed');
@@ -30,6 +32,6 @@ export function usePresence(open, durationMs = 220) {
30
32
  window.cancelAnimationFrame(frame);
31
33
  window.clearTimeout(timer);
32
34
  };
33
- }, [durationMs, open, present]);
35
+ }, [durationMs, open]);
34
36
  return { present, state };
35
37
  }
package/dist/index.d.ts CHANGED
@@ -2,9 +2,12 @@ export * from './components/Action/ActionTypes';
2
2
  export * from './components/ActionMenu/ActionMenu';
3
3
  export * from './components/Alert/Alert';
4
4
  export * from './components/AppShell/AppShell';
5
+ export * from './components/AppSidebar/AppSidebar';
5
6
  export * from './components/Badge/Badge';
7
+ export * from './components/BadgeSelectMenu/BadgeSelectMenu';
6
8
  export * from './components/Box/Box';
7
9
  export * from './components/Button/Button';
10
+ export * from './components/Card/Card';
8
11
  export * from './components/Checkbox/Checkbox';
9
12
  export * from './components/Collapse/Collapse';
10
13
  export * from './components/Combobox/Combobox';
@@ -26,6 +29,9 @@ export * from './components/Grid/Grid';
26
29
  export * from './components/Highlight/Highlight';
27
30
  export * from './components/IconButton/IconButton';
28
31
  export * from './components/IconText/IconText';
32
+ export * from './components/IconTextButton/IconTextButton';
33
+ export * from './components/InlineEdit/InlineEdit';
34
+ export * from './components/LinkButton/LinkButton';
29
35
  export * from './components/Listbox/Listbox';
30
36
  export * from './components/Menu/Menu';
31
37
  export * from './components/Modal/Modal';
@@ -45,15 +51,16 @@ export * from './components/Skeleton/Skeleton';
45
51
  export * from './components/Spinner/Spinner';
46
52
  export * from './components/Stack/Stack';
47
53
  export * from './components/StepperInput/StepperInput';
54
+ export * from './components/SpecialModal/SpecialModal';
48
55
  export * from './components/Switch/Switch';
49
56
  export * from './components/Tabs/Tabs';
57
+ export * from './components/Table/Table';
50
58
  export * from './components/Text/Text';
51
59
  export * from './components/TextArea/TextArea';
52
60
  export * from './components/TextField/TextField';
53
61
  export * from './components/Toast/Toast';
54
62
  export * from './components/Tooltip/Tooltip';
55
63
  export * from './components/VisuallyHidden/VisuallyHidden';
56
- export * from './components/Workflow/Workflow';
57
64
  export * from './locale/LocaleProvider';
58
65
  export * from './provider/OrcestrUiProvider';
59
66
  export * from './theme/defaultTheme';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,0CAA0C,CAAC;AACzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,oCAAoC,CAAC;AACnD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0DAA0D,CAAC;AACzE,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kDAAkD,CAAC;AACjE,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wCAAwC,CAAC;AACvD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8CAA8C,CAAC;AAC7D,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,0CAA0C,CAAC;AACzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,oCAAoC,CAAC;AACnD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0DAA0D,CAAC;AACzE,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kDAAkD,CAAC;AACjE,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}
package/dist/index.js CHANGED
@@ -3,9 +3,12 @@ export * from './components/Action/ActionTypes';
3
3
  export * from './components/ActionMenu/ActionMenu';
4
4
  export * from './components/Alert/Alert';
5
5
  export * from './components/AppShell/AppShell';
6
+ export * from './components/AppSidebar/AppSidebar';
6
7
  export * from './components/Badge/Badge';
8
+ export * from './components/BadgeSelectMenu/BadgeSelectMenu';
7
9
  export * from './components/Box/Box';
8
10
  export * from './components/Button/Button';
11
+ export * from './components/Card/Card';
9
12
  export * from './components/Checkbox/Checkbox';
10
13
  export * from './components/Collapse/Collapse';
11
14
  export * from './components/Combobox/Combobox';
@@ -27,6 +30,9 @@ export * from './components/Grid/Grid';
27
30
  export * from './components/Highlight/Highlight';
28
31
  export * from './components/IconButton/IconButton';
29
32
  export * from './components/IconText/IconText';
33
+ export * from './components/IconTextButton/IconTextButton';
34
+ export * from './components/InlineEdit/InlineEdit';
35
+ export * from './components/LinkButton/LinkButton';
30
36
  export * from './components/Listbox/Listbox';
31
37
  export * from './components/Menu/Menu';
32
38
  export * from './components/Modal/Modal';
@@ -46,15 +52,16 @@ export * from './components/Skeleton/Skeleton';
46
52
  export * from './components/Spinner/Spinner';
47
53
  export * from './components/Stack/Stack';
48
54
  export * from './components/StepperInput/StepperInput';
55
+ export * from './components/SpecialModal/SpecialModal';
49
56
  export * from './components/Switch/Switch';
50
57
  export * from './components/Tabs/Tabs';
58
+ export * from './components/Table/Table';
51
59
  export * from './components/Text/Text';
52
60
  export * from './components/TextArea/TextArea';
53
61
  export * from './components/TextField/TextField';
54
62
  export * from './components/Toast/Toast';
55
63
  export * from './components/Tooltip/Tooltip';
56
64
  export * from './components/VisuallyHidden/VisuallyHidden';
57
- export * from './components/Workflow/Workflow';
58
65
  export * from './locale/LocaleProvider';
59
66
  export * from './provider/OrcestrUiProvider';
60
67
  export * from './theme/defaultTheme';