@dxos/react-ui 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

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 (57) hide show
  1. package/dist/lib/browser/chunk-5Y5JI6KC.mjs +4355 -0
  2. package/dist/lib/browser/chunk-5Y5JI6KC.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +73 -3519
  4. package/dist/lib/browser/index.mjs.map +4 -4
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/testing/index.mjs +85 -0
  7. package/dist/lib/browser/testing/index.mjs.map +7 -0
  8. package/dist/lib/node/chunk-KMS7RFL7.cjs +4340 -0
  9. package/dist/lib/node/chunk-KMS7RFL7.cjs.map +7 -0
  10. package/dist/lib/node/index.cjs +69 -3481
  11. package/dist/lib/node/index.cjs.map +4 -4
  12. package/dist/lib/node/meta.json +1 -1
  13. package/dist/lib/node/testing/index.cjs +114 -0
  14. package/dist/lib/node/testing/index.cjs.map +7 -0
  15. package/dist/lib/node-esm/chunk-ANVE7WX5.mjs +4357 -0
  16. package/dist/lib/node-esm/chunk-ANVE7WX5.mjs.map +7 -0
  17. package/dist/lib/node-esm/index.mjs +72 -3519
  18. package/dist/lib/node-esm/index.mjs.map +4 -4
  19. package/dist/lib/node-esm/meta.json +1 -1
  20. package/dist/lib/node-esm/testing/index.mjs +86 -0
  21. package/dist/lib/node-esm/testing/index.mjs.map +7 -0
  22. package/dist/types/src/components/Avatars/Avatar.d.ts +2 -2
  23. package/dist/types/src/components/Avatars/Avatar.d.ts.map +1 -1
  24. package/dist/types/src/components/Buttons/IconButton.d.ts +1 -2
  25. package/dist/types/src/components/Buttons/IconButton.d.ts.map +1 -1
  26. package/dist/types/src/components/Dialogs/AlertDialog.stories.d.ts +2 -2
  27. package/dist/types/src/components/Dialogs/AlertDialog.stories.d.ts.map +1 -1
  28. package/dist/types/src/components/Dialogs/Dialog.stories.d.ts +2 -2
  29. package/dist/types/src/components/Dialogs/Dialog.stories.d.ts.map +1 -1
  30. package/dist/types/src/components/Main/Main.d.ts.map +1 -1
  31. package/dist/types/src/components/Message/Message.stories.d.ts +6 -0
  32. package/dist/types/src/components/Message/Message.stories.d.ts.map +1 -1
  33. package/dist/types/src/components/Tooltip/Tooltip.d.ts +0 -2
  34. package/dist/types/src/components/Tooltip/Tooltip.d.ts.map +1 -1
  35. package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts +0 -1
  36. package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts.map +1 -1
  37. package/dist/types/src/testing/decorators/index.d.ts +1 -1
  38. package/dist/types/src/testing/decorators/index.d.ts.map +1 -1
  39. package/dist/types/src/testing/decorators/{withVariants.d.ts → withSurfaceVariantsLayout.d.ts} +2 -3
  40. package/dist/types/src/testing/decorators/withSurfaceVariantsLayout.d.ts.map +1 -0
  41. package/package.json +24 -15
  42. package/src/components/Avatars/Avatar.tsx +7 -8
  43. package/src/components/Buttons/Button.stories.tsx +2 -2
  44. package/src/components/Buttons/IconButton.tsx +4 -8
  45. package/src/components/Dialogs/AlertDialog.stories.tsx +2 -2
  46. package/src/components/Dialogs/Dialog.stories.tsx +2 -2
  47. package/src/components/Input/Input.stories.tsx +2 -2
  48. package/src/components/Main/Main.tsx +1 -0
  49. package/src/components/Message/Message.stories.tsx +7 -1
  50. package/src/components/ScrollArea/ScrollArea.stories.tsx +2 -2
  51. package/src/components/Select/Select.stories.tsx +2 -2
  52. package/src/components/Tooltip/Tooltip.tsx +1 -16
  53. package/src/playground/Controls.stories.tsx +2 -2
  54. package/src/testing/decorators/index.ts +1 -1
  55. package/src/testing/decorators/withSurfaceVariantsLayout.tsx +53 -0
  56. package/dist/types/src/testing/decorators/withVariants.d.ts.map +0 -1
  57. package/src/testing/decorators/withVariants.tsx +0 -45
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
- var __create = Object.create;
3
2
  var __defProp = Object.defineProperty;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
6
  var __export = (target, all) => {
9
7
  for (var name in all)
@@ -18,3494 +16,84 @@ var __copyProps = (to, from, except, desc) => {
18
16
  return to;
19
17
  };
20
18
  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
21
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
- // If the importer is in node compatibility mode or this is not an ESM
23
- // file that has been converted to a CommonJS file using a Babel-
24
- // compatible transform (i.e. "__esModule" has not been set), then set
25
- // "default" to the CommonJS "module.exports" for node compatibility.
26
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
- mod
28
- ));
29
19
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
20
  var node_exports = {};
31
21
  __export(node_exports, {
32
- AlertDialog: () => AlertDialog,
33
- AnchoredOverflow: () => AnchoredOverflow,
34
- Avatar: () => Avatar,
35
- BUTTON_GROUP_NAME: () => BUTTON_GROUP_NAME,
36
- Breadcrumb: () => Breadcrumb,
37
- Button: () => Button,
38
- ButtonGroup: () => ButtonGroup,
39
- Clipboard: () => Clipboard,
40
- ContextMenu: () => ContextMenu2,
41
- DensityContext: () => DensityContext,
42
- DensityProvider: () => DensityProvider,
43
- Dialog: () => Dialog,
44
- DropdownMenu: () => DropdownMenu,
45
- ElevationContext: () => ElevationContext,
46
- ElevationProvider: () => ElevationProvider,
47
- Icon: () => Icon,
48
- IconButton: () => IconButton,
49
- Input: () => Input,
50
- LIST_ITEM_NAME: () => import_react_list.LIST_ITEM_NAME,
51
- LIST_NAME: () => import_react_list.LIST_NAME,
52
- Link: () => Link,
53
- List: () => List,
54
- ListItem: () => ListItem,
55
- Main: () => Main,
56
- Message: () => Message,
57
- Popover: () => Popover,
58
- ScrollArea: () => ScrollArea,
59
- Select: () => Select,
60
- Separator: () => Separator4,
61
- Status: () => Status,
62
- Tag: () => Tag,
63
- ThemeContext: () => ThemeContext,
64
- ThemeProvider: () => ThemeProvider,
65
- Toast: () => Toast,
66
- Toggle: () => Toggle,
67
- ToggleGroup: () => ToggleGroup,
68
- ToggleGroupItem: () => ToggleGroupItem,
69
- Toolbar: () => Toolbar,
70
- Tooltip: () => Tooltip,
22
+ AlertDialog: () => import_chunk_KMS7RFL7.AlertDialog,
23
+ AnchoredOverflow: () => import_chunk_KMS7RFL7.AnchoredOverflow,
24
+ Avatar: () => import_chunk_KMS7RFL7.Avatar,
25
+ BUTTON_GROUP_NAME: () => import_chunk_KMS7RFL7.BUTTON_GROUP_NAME,
26
+ Breadcrumb: () => import_chunk_KMS7RFL7.Breadcrumb,
27
+ Button: () => import_chunk_KMS7RFL7.Button,
28
+ ButtonGroup: () => import_chunk_KMS7RFL7.ButtonGroup,
29
+ Clipboard: () => import_chunk_KMS7RFL7.Clipboard,
30
+ ContextMenu: () => import_chunk_KMS7RFL7.ContextMenu,
31
+ DensityContext: () => import_chunk_KMS7RFL7.DensityContext,
32
+ DensityProvider: () => import_chunk_KMS7RFL7.DensityProvider,
33
+ Dialog: () => import_chunk_KMS7RFL7.Dialog,
34
+ DropdownMenu: () => import_chunk_KMS7RFL7.DropdownMenu,
35
+ ElevationContext: () => import_chunk_KMS7RFL7.ElevationContext,
36
+ ElevationProvider: () => import_chunk_KMS7RFL7.ElevationProvider,
37
+ Icon: () => import_chunk_KMS7RFL7.Icon,
38
+ IconButton: () => import_chunk_KMS7RFL7.IconButton,
39
+ Input: () => import_chunk_KMS7RFL7.Input,
40
+ LIST_ITEM_NAME: () => import_chunk_KMS7RFL7.LIST_ITEM_NAME,
41
+ LIST_NAME: () => import_chunk_KMS7RFL7.LIST_NAME,
42
+ Link: () => import_chunk_KMS7RFL7.Link,
43
+ List: () => import_chunk_KMS7RFL7.List,
44
+ ListItem: () => import_chunk_KMS7RFL7.ListItem,
45
+ Main: () => import_chunk_KMS7RFL7.Main,
46
+ Message: () => import_chunk_KMS7RFL7.Message,
47
+ Popover: () => import_chunk_KMS7RFL7.Popover,
48
+ ScrollArea: () => import_chunk_KMS7RFL7.ScrollArea,
49
+ Select: () => import_chunk_KMS7RFL7.Select,
50
+ Separator: () => import_chunk_KMS7RFL7.Separator,
51
+ Status: () => import_chunk_KMS7RFL7.Status,
52
+ Tag: () => import_chunk_KMS7RFL7.Tag,
53
+ ThemeContext: () => import_chunk_KMS7RFL7.ThemeContext,
54
+ ThemeProvider: () => import_chunk_KMS7RFL7.ThemeProvider,
55
+ Toast: () => import_chunk_KMS7RFL7.Toast,
56
+ Toggle: () => import_chunk_KMS7RFL7.Toggle,
57
+ ToggleGroup: () => import_chunk_KMS7RFL7.ToggleGroup,
58
+ ToggleGroupItem: () => import_chunk_KMS7RFL7.ToggleGroupItem,
59
+ Toolbar: () => import_chunk_KMS7RFL7.Toolbar,
60
+ Tooltip: () => import_chunk_KMS7RFL7.Tooltip,
71
61
  Trans: () => import_react_i18next.Trans,
72
- Tree: () => Tree,
73
- TreeItem: () => TreeItem,
74
- Treegrid: () => Treegrid,
75
- createDropdownMenuScope: () => createDropdownMenuScope,
76
- createPopoverScope: () => createPopoverScope,
77
- createTooltipScope: () => createTooltipScope,
78
- hasIosKeyboard: () => hasIosKeyboard,
79
- initialSafeArea: () => initialSafeArea,
80
- isLabel: () => isLabel,
81
- toLocalizedString: () => toLocalizedString,
82
- useAvatarContext: () => useAvatarContext,
83
- useButtonGroupContext: () => useButtonGroupContext,
84
- useClipboard: () => useClipboard,
85
- useDensityContext: () => useDensityContext,
86
- useDropdownMenuContext: () => useDropdownMenuContext,
87
- useDropdownMenuMenuScope: () => useDropdownMenuMenuScope,
88
- useElevationContext: () => useElevationContext,
89
- useIconHref: () => useIconHref,
90
- useLandmarkMover: () => useLandmarkMover,
91
- useListContext: () => import_react_list.useListContext,
92
- useListItemContext: () => import_react_list.useListItemContext,
93
- useMainContext: () => useMainContext,
94
- useSafeArea: () => useSafeArea,
95
- useSidebars: () => useSidebars,
96
- useThemeContext: () => useThemeContext,
97
- useTooltipContext: () => useTooltipContext,
98
- useTranslation: () => useTranslation,
99
- useTranslationsContext: () => useTranslationsContext,
100
- useVisualViewport: () => useVisualViewport
62
+ Tree: () => import_chunk_KMS7RFL7.Tree,
63
+ TreeItem: () => import_chunk_KMS7RFL7.TreeItem,
64
+ Treegrid: () => import_chunk_KMS7RFL7.Treegrid,
65
+ createDropdownMenuScope: () => import_chunk_KMS7RFL7.createDropdownMenuScope,
66
+ createPopoverScope: () => import_chunk_KMS7RFL7.createPopoverScope,
67
+ createTooltipScope: () => import_chunk_KMS7RFL7.createTooltipScope,
68
+ hasIosKeyboard: () => import_chunk_KMS7RFL7.hasIosKeyboard,
69
+ initialSafeArea: () => import_chunk_KMS7RFL7.initialSafeArea,
70
+ isLabel: () => import_chunk_KMS7RFL7.isLabel,
71
+ toLocalizedString: () => import_chunk_KMS7RFL7.toLocalizedString,
72
+ useAvatarContext: () => import_chunk_KMS7RFL7.useAvatarContext,
73
+ useButtonGroupContext: () => import_chunk_KMS7RFL7.useButtonGroupContext,
74
+ useClipboard: () => import_chunk_KMS7RFL7.useClipboard,
75
+ useDensityContext: () => import_chunk_KMS7RFL7.useDensityContext,
76
+ useDropdownMenuContext: () => import_chunk_KMS7RFL7.useDropdownMenuContext,
77
+ useDropdownMenuMenuScope: () => import_chunk_KMS7RFL7.useDropdownMenuMenuScope,
78
+ useElevationContext: () => import_chunk_KMS7RFL7.useElevationContext,
79
+ useIconHref: () => import_chunk_KMS7RFL7.useIconHref,
80
+ useLandmarkMover: () => import_chunk_KMS7RFL7.useLandmarkMover,
81
+ useListContext: () => import_chunk_KMS7RFL7.useListContext,
82
+ useListItemContext: () => import_chunk_KMS7RFL7.useListItemContext,
83
+ useMainContext: () => import_chunk_KMS7RFL7.useMainContext,
84
+ useSafeArea: () => import_chunk_KMS7RFL7.useSafeArea,
85
+ useSidebars: () => import_chunk_KMS7RFL7.useSidebars,
86
+ useThemeContext: () => import_chunk_KMS7RFL7.useThemeContext,
87
+ useTooltipContext: () => import_chunk_KMS7RFL7.useTooltipContext,
88
+ useTranslation: () => import_chunk_KMS7RFL7.useTranslation,
89
+ useTranslationsContext: () => import_chunk_KMS7RFL7.useTranslationsContext,
90
+ useVisualViewport: () => import_chunk_KMS7RFL7.useVisualViewport
101
91
  });
102
92
  module.exports = __toCommonJS(node_exports);
93
+ var import_chunk_KMS7RFL7 = require("./chunk-KMS7RFL7.cjs");
103
94
  var import_react_i18next = require("react-i18next");
104
95
  __reExport(node_exports, require("@dxos/react-hooks"), module.exports);
105
96
  __reExport(node_exports, require("@dxos/react-ui-types"), module.exports);
106
- var import_react_primitive = require("@radix-ui/react-primitive");
107
- var import_react_slot = require("@radix-ui/react-slot");
108
- var import_react = __toESM(require("react"));
109
- var import_react2 = require("react");
110
- var import_react3 = require("react");
111
- var import_react4 = require("react");
112
- var import_debug = require("@dxos/debug");
113
- var import_react5 = require("react");
114
- var import_react_hooks = require("@dxos/react-hooks");
115
- var import_react6 = require("react");
116
- var import_locale = require("date-fns/locale");
117
- var import_i18next = __toESM(require("i18next"));
118
- var import_react7 = __toESM(require("react"));
119
- var import_react_i18next2 = require("react-i18next");
120
- var import_react8 = require("react");
121
- var import_react_hooks2 = require("@dxos/react-hooks");
122
- var import_dx_avatar = require("@dxos/lit-ui/dx-avatar.pcss");
123
- var import_react9 = require("@lit/react");
124
- var import_react_context = require("@radix-ui/react-context");
125
- var import_react_primitive2 = require("@radix-ui/react-primitive");
126
- var import_react_slot2 = require("@radix-ui/react-slot");
127
- var import_react10 = __toESM(require("react"));
128
- var import_lit_ui = require("@dxos/lit-ui");
129
- var import_react_hooks3 = require("@dxos/react-hooks");
130
- var import_react_ui_theme = require("@dxos/react-ui-theme");
131
- var import_react11 = require("@phosphor-icons/react");
132
- var import_react_primitive3 = require("@radix-ui/react-primitive");
133
- var import_react_slot3 = require("@radix-ui/react-slot");
134
- var import_react12 = __toESM(require("react"));
135
- var import_react_primitive4 = require("@radix-ui/react-primitive");
136
- var import_react_slot4 = require("@radix-ui/react-slot");
137
- var import_react13 = __toESM(require("react"));
138
- var import_react_context2 = require("@radix-ui/react-context");
139
- var import_react_primitive5 = require("@radix-ui/react-primitive");
140
- var import_react_slot5 = require("@radix-ui/react-slot");
141
- var import_react14 = __toESM(require("react"));
142
- var import_react15 = __toESM(require("react"));
143
- var import_react16 = __toESM(require("react"));
144
- var import_primitive = require("@radix-ui/primitive");
145
- var import_react_compose_refs = require("@radix-ui/react-compose-refs");
146
- var import_react_context3 = require("@radix-ui/react-context");
147
- var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
148
- var import_react_id = require("@radix-ui/react-id");
149
- var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
150
- var import_react_popper = require("@radix-ui/react-popper");
151
- var import_react_portal = require("@radix-ui/react-portal");
152
- var import_react_presence = require("@radix-ui/react-presence");
153
- var import_react_primitive6 = require("@radix-ui/react-primitive");
154
- var import_react_slot6 = require("@radix-ui/react-slot");
155
- var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
156
- var VisuallyHiddenPrimitive = __toESM(require("@radix-ui/react-visually-hidden"));
157
- var import_react17 = __toESM(require("react"));
158
- var import_react_toggle = require("@radix-ui/react-toggle");
159
- var import_react18 = __toESM(require("react"));
160
- var import_react_toggle_group = require("@radix-ui/react-toggle-group");
161
- var import_react19 = __toESM(require("react"));
162
- var import_react20 = __toESM(require("react"));
163
- var import_react21 = __toESM(require("react"));
164
- var import_react_ui_theme2 = require("@dxos/react-ui-theme");
165
- var import_keyborg = require("keyborg");
166
- var import_react22 = __toESM(require("react"));
167
- var import_react23 = __toESM(require("react"));
168
- var import_react24 = __toESM(require("react"));
169
- var import_react_context4 = require("@radix-ui/react-context");
170
- var import_react_dialog = require("@radix-ui/react-dialog");
171
- var import_react25 = __toESM(require("react"));
172
- var import_react_alert_dialog = require("@radix-ui/react-alert-dialog");
173
- var import_react_context5 = require("@radix-ui/react-context");
174
- var import_react26 = __toESM(require("react"));
175
- var import_react_checkbox = require("@radix-ui/react-checkbox");
176
- var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
177
- var import_react27 = __toESM(require("react"));
178
- var import_react_input = require("@dxos/react-input");
179
- var import_react_ui_theme3 = require("@dxos/react-ui-theme");
180
- var import_react28 = require("@phosphor-icons/react");
181
- var import_react_slot7 = require("@radix-ui/react-slot");
182
- var import_react29 = __toESM(require("react"));
183
- var import_react_list = require("@dxos/react-list");
184
- var import_react30 = __toESM(require("react"));
185
- var import_react31 = __toESM(require("react"));
186
- var import_react32 = __toESM(require("react"));
187
- var import_react_tabster = require("@fluentui/react-tabster");
188
- var import_react_context6 = require("@radix-ui/react-context");
189
- var import_react_primitive7 = require("@radix-ui/react-primitive");
190
- var import_react_slot8 = require("@radix-ui/react-slot");
191
- var import_react_use_controllable_state3 = require("@radix-ui/react-use-controllable-state");
192
- var import_react33 = __toESM(require("react"));
193
- var import_react_context7 = require("@radix-ui/react-context");
194
- var import_react_dialog2 = require("@radix-ui/react-dialog");
195
- var import_react_primitive8 = require("@radix-ui/react-primitive");
196
- var import_react_slot9 = require("@radix-ui/react-slot");
197
- var import_react_use_controllable_state4 = require("@radix-ui/react-use-controllable-state");
198
- var import_react34 = __toESM(require("react"));
199
- var import_log = require("@dxos/log");
200
- var import_react_hooks4 = require("@dxos/react-hooks");
201
- var import_react35 = require("react");
202
- var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"));
203
- var import_react_primitive9 = require("@radix-ui/react-primitive");
204
- var import_react_slot10 = require("@radix-ui/react-slot");
205
- var import_react36 = __toESM(require("react"));
206
- var import_react37 = require("react");
207
- var import_primitive2 = require("@radix-ui/primitive");
208
- var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
209
- var import_react_context8 = require("@radix-ui/react-context");
210
- var import_react_id2 = require("@radix-ui/react-id");
211
- var MenuPrimitive = __toESM(require("@radix-ui/react-menu"));
212
- var import_react_menu = require("@radix-ui/react-menu");
213
- var import_react_primitive10 = require("@radix-ui/react-primitive");
214
- var import_react_slot11 = require("@radix-ui/react-slot");
215
- var import_react_use_controllable_state5 = require("@radix-ui/react-use-controllable-state");
216
- var import_react38 = __toESM(require("react"));
217
- var import_react_context9 = require("@radix-ui/react-context");
218
- var import_react_primitive11 = require("@radix-ui/react-primitive");
219
- var import_react_slot12 = require("@radix-ui/react-slot");
220
- var import_react39 = __toESM(require("react"));
221
- var import_react_hooks5 = require("@dxos/react-hooks");
222
- var import_primitive3 = require("@radix-ui/primitive");
223
- var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
224
- var import_react_context10 = require("@radix-ui/react-context");
225
- var import_react_dismissable_layer2 = require("@radix-ui/react-dismissable-layer");
226
- var import_react_focus_guards = require("@radix-ui/react-focus-guards");
227
- var import_react_focus_scope = require("@radix-ui/react-focus-scope");
228
- var import_react_id3 = require("@radix-ui/react-id");
229
- var PopperPrimitive2 = __toESM(require("@radix-ui/react-popper"));
230
- var import_react_popper2 = require("@radix-ui/react-popper");
231
- var import_react_portal2 = require("@radix-ui/react-portal");
232
- var import_react_presence2 = require("@radix-ui/react-presence");
233
- var import_react_primitive12 = require("@radix-ui/react-primitive");
234
- var import_react_slot13 = require("@radix-ui/react-slot");
235
- var import_react_use_controllable_state6 = require("@radix-ui/react-use-controllable-state");
236
- var import_aria_hidden = require("aria-hidden");
237
- var import_react40 = __toESM(require("react"));
238
- var import_react_remove_scroll = require("react-remove-scroll");
239
- var import_react41 = __toESM(require("react"));
240
- var import_react_scroll_area = require("@radix-ui/react-scroll-area");
241
- var import_react42 = __toESM(require("react"));
242
- var import_react43 = require("@phosphor-icons/react");
243
- var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
244
- var import_react44 = __toESM(require("react"));
245
- var import_react_separator = require("@radix-ui/react-separator");
246
- var import_react45 = __toESM(require("react"));
247
- var import_react_primitive13 = require("@radix-ui/react-primitive");
248
- var import_react_slot14 = require("@radix-ui/react-slot");
249
- var import_react46 = __toESM(require("react"));
250
- var import_react_primitive14 = require("@radix-ui/react-primitive");
251
- var import_react_slot15 = require("@radix-ui/react-slot");
252
- var import_react_toast = require("@radix-ui/react-toast");
253
- var import_react47 = __toESM(require("react"));
254
- var ToolbarPrimitive = __toESM(require("@radix-ui/react-toolbar"));
255
- var import_react48 = __toESM(require("react"));
256
- var useDensityContext = (propsDensity) => {
257
- const { density } = (0, import_react2.useContext)(DensityContext);
258
- return propsDensity ?? density;
259
- };
260
- var useElevationContext = (propsElevation) => {
261
- const { elevation } = (0, import_react3.useContext)(ElevationContext);
262
- return propsElevation ?? elevation;
263
- };
264
- var useThemeContext = () => (0, import_react4.useContext)(ThemeContext) ?? (0, import_debug.raise)(new Error("Missing ThemeContext"));
265
- var ICONS_URL = "/icons.svg";
266
- var useIconHref = (icon) => {
267
- const { noCache } = useThemeContext();
268
- const url = noCache ? `${ICONS_URL}?nocache=${(/* @__PURE__ */ new Date()).getMinutes()}` : ICONS_URL;
269
- return icon ? `${url}#${icon}` : void 0;
270
- };
271
- var initialSafeArea = {
272
- top: NaN,
273
- right: NaN,
274
- bottom: NaN,
275
- left: NaN
276
- };
277
- var useSafeArea = () => {
278
- const [padding, setPadding] = (0, import_react5.useState)(initialSafeArea);
279
- const handleResize = (0, import_react5.useCallback)(() => {
280
- setPadding({
281
- top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
282
- right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
283
- bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")),
284
- left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
285
- });
286
- }, []);
287
- (0, import_react_hooks.useResize)(handleResize);
288
- return padding;
289
- };
290
- var initialLng = "en-US";
291
- var initialNs = "dxos-common";
292
- var initialDtLocale = import_locale.enUS;
293
- var isLabel = (o) => typeof o === "string" || Array.isArray(o) && o.length === 2 && typeof o[0] === "string" && !!o[1] && typeof o[1] === "object" && "ns" in o[1] && typeof o[1].ns === "string";
294
- var toLocalizedString = (label, t) => Array.isArray(label) ? t(...label) : label;
295
- var resources = {
296
- [initialLng]: {
297
- [initialNs]: {
298
- "loading translations": "Loading translations\u2026"
299
- }
300
- }
301
- };
302
- void import_i18next.default.use(import_react_i18next2.initReactI18next).init({
303
- resources,
304
- lng: initialLng,
305
- defaultNS: initialNs,
306
- interpolation: {
307
- escapeValue: false
308
- }
309
- });
310
- var TranslationsContext = /* @__PURE__ */ (0, import_react7.createContext)({
311
- appNs: initialNs,
312
- dtLocale: initialDtLocale
313
- });
314
- var useTranslation = (...args) => {
315
- const result = (0, import_react_i18next2.useTranslation)(...args);
316
- const { dtLocale } = (0, import_react7.useContext)(TranslationsContext);
317
- return {
318
- ...result,
319
- dtLocale
320
- };
321
- };
322
- var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
323
- const [loaded, setLoaded] = (0, import_react7.useState)(false);
324
- (0, import_react7.useEffect)(() => {
325
- setLoaded(false);
326
- if (resourceExtensions && resourceExtensions.length) {
327
- resourceExtensions.forEach((resource) => {
328
- Object.keys(resource).forEach((language) => {
329
- Object.keys(resource[language]).forEach((ns) => {
330
- import_i18next.default.addResourceBundle(language, ns, resource[language][ns]);
331
- });
332
- });
333
- });
334
- }
335
- setLoaded(true);
336
- }, [
337
- resourceExtensions
338
- ]);
339
- return /* @__PURE__ */ import_react7.default.createElement(TranslationsContext.Provider, {
340
- value: {
341
- appNs: appNs ?? initialNs,
342
- dtLocale: dtLocale ?? initialDtLocale
343
- }
344
- }, /* @__PURE__ */ import_react7.default.createElement(import_react7.Suspense, {
345
- fallback
346
- }, loaded ? children : fallback));
347
- };
348
- var useTranslationsContext = () => (0, import_react6.useContext)(TranslationsContext);
349
- var useVisualViewport = (deps) => {
350
- const [width, setWidth] = (0, import_react8.useState)(null);
351
- const [height, setHeight] = (0, import_react8.useState)(null);
352
- const handleResize = (0, import_react8.useCallback)(() => {
353
- if (window.visualViewport) {
354
- setWidth(window.visualViewport.width);
355
- setHeight(window.visualViewport.height);
356
- }
357
- }, []);
358
- (0, import_react_hooks2.useResize)(handleResize);
359
- return {
360
- width,
361
- height
362
- };
363
- };
364
- var AnchoredOverflowRoot = /* @__PURE__ */ (0, import_react.forwardRef)(({ asChild, classNames, children, ...props }, forwardedRef) => {
365
- const { tx } = useThemeContext();
366
- const Root7 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
367
- return /* @__PURE__ */ import_react.default.createElement(Root7, {
368
- role: "none",
369
- ...props,
370
- className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
371
- ref: forwardedRef
372
- }, children);
373
- });
374
- var AnchoredOverflowAnchor = /* @__PURE__ */ (0, import_react.forwardRef)(({ asChild, classNames, children, ...props }, forwardedRef) => {
375
- const { tx } = useThemeContext();
376
- const Root7 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
377
- return /* @__PURE__ */ import_react.default.createElement(Root7, {
378
- role: "none",
379
- ...props,
380
- className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
381
- ref: forwardedRef
382
- }, children);
383
- });
384
- var AnchoredOverflow = {
385
- Root: AnchoredOverflowRoot,
386
- Anchor: AnchoredOverflowAnchor
387
- };
388
- var AVATAR_NAME = "Avatar";
389
- var [AvatarProvider, useAvatarContext] = (0, import_react_context.createContext)(AVATAR_NAME);
390
- var AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescriptionId }) => {
391
- const labelId = (0, import_react_hooks3.useId)("avatar__label", propsLabelId);
392
- const descriptionId = (0, import_react_hooks3.useId)("avatar__description", propsDescriptionId);
393
- return /* @__PURE__ */ import_react10.default.createElement(AvatarProvider, {
394
- labelId,
395
- descriptionId
396
- }, children);
397
- };
398
- var DxAvatar = (0, import_react9.createComponent)({
399
- tagName: "dx-avatar",
400
- elementClass: import_lit_ui.DxAvatar,
401
- react: import_react10.default
402
- });
403
- var AvatarContent = /* @__PURE__ */ (0, import_react10.forwardRef)(({ icon, classNames, ...props }, forwardedRef) => {
404
- const href = useIconHref(icon);
405
- const { labelId, descriptionId } = useAvatarContext("AvatarContent");
406
- return /* @__PURE__ */ import_react10.default.createElement(DxAvatar, {
407
- ...props,
408
- icon: href,
409
- "aria-labelledby": labelId,
410
- "aria-describedby": descriptionId,
411
- rootClassName: (0, import_react_ui_theme.mx)(classNames),
412
- ref: forwardedRef
413
- });
414
- });
415
- var AvatarLabel = /* @__PURE__ */ (0, import_react10.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
416
- const Root7 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
417
- const { tx } = useThemeContext();
418
- const { labelId } = useAvatarContext("AvatarLabel");
419
- return /* @__PURE__ */ import_react10.default.createElement(Root7, {
420
- ...props,
421
- id: labelId,
422
- ref: forwardedRef,
423
- className: tx("avatar.label", "avatar__label", {
424
- srOnly
425
- }, classNames)
426
- });
427
- });
428
- var AvatarDescription = /* @__PURE__ */ (0, import_react10.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
429
- const Root7 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
430
- const { tx } = useThemeContext();
431
- const { descriptionId } = useAvatarContext("AvatarDescription");
432
- return /* @__PURE__ */ import_react10.default.createElement(Root7, {
433
- ...props,
434
- id: descriptionId,
435
- ref: forwardedRef,
436
- className: tx("avatar.description", "avatar__description", {
437
- srOnly
438
- }, classNames)
439
- });
440
- });
441
- var Avatar = {
442
- Root: AvatarRoot,
443
- Content: AvatarContent,
444
- Label: AvatarLabel,
445
- Description: AvatarDescription
446
- };
447
- var Link = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, variant, classNames, ...props }, forwardedRef) => {
448
- const { tx } = useThemeContext();
449
- const Root7 = asChild ? import_react_slot4.Slot : import_react_primitive4.Primitive.a;
450
- return /* @__PURE__ */ import_react13.default.createElement(Root7, {
451
- ...props,
452
- className: tx("link.root", "link", {
453
- variant
454
- }, classNames),
455
- ref: forwardedRef
456
- });
457
- });
458
- var BreadcrumbRoot = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
459
- const { tx } = useThemeContext();
460
- const Root7 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.div;
461
- return /* @__PURE__ */ import_react12.default.createElement(Root7, {
462
- role: "navigation",
463
- ...props,
464
- className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
465
- ref: forwardedRef
466
- });
467
- });
468
- var BreadcrumbList = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
469
- const { tx } = useThemeContext();
470
- const Root7 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.ol;
471
- return /* @__PURE__ */ import_react12.default.createElement(Root7, {
472
- role: "list",
473
- ...props,
474
- className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
475
- ref: forwardedRef
476
- });
477
- });
478
- var BreadcrumbListItem = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
479
- const { tx } = useThemeContext();
480
- const Root7 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.li;
481
- return /* @__PURE__ */ import_react12.default.createElement(Root7, {
482
- role: "listitem",
483
- ...props,
484
- className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
485
- ref: forwardedRef
486
- });
487
- });
488
- var BreadcrumbLink = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, ...props }, forwardedRef) => {
489
- const Root7 = asChild ? import_react_slot3.Slot : Link;
490
- return /* @__PURE__ */ import_react12.default.createElement(Root7, {
491
- ...props,
492
- ref: forwardedRef
493
- });
494
- });
495
- var BreadcrumbCurrent = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
496
- const { tx } = useThemeContext();
497
- const Root7 = asChild ? import_react_slot3.Slot : "h1";
498
- return /* @__PURE__ */ import_react12.default.createElement(Root7, {
499
- ...props,
500
- "aria-current": "page",
501
- className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
502
- ref: forwardedRef
503
- });
504
- });
505
- var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
506
- const { tx } = useThemeContext();
507
- return /* @__PURE__ */ import_react12.default.createElement(import_react_primitive3.Primitive.span, {
508
- role: "separator",
509
- "aria-hidden": "true",
510
- ...props,
511
- className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
512
- }, children ?? /* @__PURE__ */ import_react12.default.createElement(import_react11.Dot, {
513
- weight: "bold"
514
- }));
515
- };
516
- var Breadcrumb = {
517
- Root: BreadcrumbRoot,
518
- List: BreadcrumbList,
519
- ListItem: BreadcrumbListItem,
520
- Link: BreadcrumbLink,
521
- Current: BreadcrumbCurrent,
522
- Separator: BreadcrumbSeparator
523
- };
524
- var BUTTON_GROUP_NAME = "ButtonGroup";
525
- var BUTTON_NAME = "Button";
526
- var [ButtonGroupProvider, useButtonGroupContext] = (0, import_react_context2.createContext)(BUTTON_GROUP_NAME, {
527
- inGroup: false
528
- });
529
- var Button = /* @__PURE__ */ (0, import_react14.memo)(/* @__PURE__ */ (0, import_react14.forwardRef)(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
530
- const { inGroup } = useButtonGroupContext(BUTTON_NAME);
531
- const { tx } = useThemeContext();
532
- const elevation = useElevationContext(propsElevation);
533
- const density = useDensityContext(propsDensity);
534
- const Root7 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.button;
535
- return /* @__PURE__ */ import_react14.default.createElement(Root7, {
536
- ref,
537
- ...props,
538
- "data-variant": variant,
539
- "data-density": density,
540
- "data-props": inGroup ? "grouped" : "",
541
- className: tx("button.root", "button", {
542
- variant,
543
- inGroup,
544
- disabled: props.disabled,
545
- density,
546
- elevation
547
- }, classNames),
548
- ...props.disabled && {
549
- disabled: true
550
- }
551
- }, children);
552
- }));
553
- Button.displayName = BUTTON_NAME;
554
- var ButtonGroup = /* @__PURE__ */ (0, import_react14.forwardRef)(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
555
- const { tx } = useThemeContext();
556
- const elevation = useElevationContext(propsElevation);
557
- const Root7 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.div;
558
- return /* @__PURE__ */ import_react14.default.createElement(Root7, {
559
- role: "none",
560
- ...props,
561
- className: tx("button.group", "button-group", {
562
- elevation
563
- }, classNames),
564
- ref: forwardedRef
565
- }, /* @__PURE__ */ import_react14.default.createElement(ButtonGroupProvider, {
566
- inGroup: true
567
- }, children));
568
- });
569
- ButtonGroup.displayName = BUTTON_GROUP_NAME;
570
- var Icon = /* @__PURE__ */ (0, import_react16.memo)(/* @__PURE__ */ (0, import_react16.forwardRef)(({ icon, classNames, size, ...props }, forwardedRef) => {
571
- const { tx } = useThemeContext();
572
- const href = useIconHref(icon);
573
- return /* @__PURE__ */ import_react16.default.createElement("svg", {
574
- ...props,
575
- className: tx("icon.root", "icon", {
576
- size
577
- }, classNames),
578
- ref: forwardedRef
579
- }, /* @__PURE__ */ import_react16.default.createElement("use", {
580
- href
581
- }));
582
- }));
583
- var [createTooltipContext, createTooltipScope] = (0, import_react_context3.createContextScope)("Tooltip", [
584
- import_react_popper.createPopperScope
585
- ]);
586
- var usePopperScope = (0, import_react_popper.createPopperScope)();
587
- var DEFAULT_DELAY_DURATION = 700;
588
- var TOOLTIP_OPEN = "tooltip.open";
589
- var TOOLTIP_NAME = "Tooltip";
590
- var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
591
- var TooltipProvider = (props) => {
592
- const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = DEFAULT_DELAY_DURATION, skipDelayDuration = 300 } = props;
593
- const isOpenDelayedRef = (0, import_react17.useRef)(true);
594
- const isPointerInTransitRef = (0, import_react17.useRef)(false);
595
- const skipDelayTimerRef = (0, import_react17.useRef)(0);
596
- (0, import_react17.useEffect)(() => {
597
- const skipDelayTimer = skipDelayTimerRef.current;
598
- return () => window.clearTimeout(skipDelayTimer);
599
- }, []);
600
- const popperScope = usePopperScope(__scopeTooltip);
601
- const [trigger, setTrigger] = (0, import_react17.useState)(null);
602
- const [content, setContent] = (0, import_react17.useState)("");
603
- const [side, setSide] = (0, import_react17.useState)(void 0);
604
- const triggerRef = (0, import_react17.useRef)(trigger);
605
- const handleTriggerChange = (0, import_react17.useCallback)((nextTrigger) => {
606
- setTrigger(nextTrigger);
607
- triggerRef.current = nextTrigger;
608
- setContent(nextTrigger?.getAttribute("data-tooltip-content") ?? "");
609
- setSide(nextTrigger?.getAttribute("data-tooltip-side") ?? void 0);
610
- }, []);
611
- const contentId = (0, import_react_id.useId)();
612
- const openTimerRef = (0, import_react17.useRef)(0);
613
- const wasOpenDelayedRef = (0, import_react17.useRef)(false);
614
- const handleOpenChange = (0, import_react17.useCallback)((open2) => {
615
- if (open2) {
616
- window.clearTimeout(skipDelayTimerRef.current);
617
- isOpenDelayedRef.current = false;
618
- document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
619
- } else {
620
- window.clearTimeout(skipDelayTimerRef.current);
621
- skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
622
- }
623
- onOpenChange?.(open2);
624
- }, [
625
- skipDelayDuration,
626
- onOpenChange
627
- ]);
628
- const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
629
- prop: openProp,
630
- defaultProp: defaultOpen,
631
- onChange: handleOpenChange
632
- });
633
- const stateAttribute = (0, import_react17.useMemo)(() => {
634
- return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
635
- }, [
636
- open
637
- ]);
638
- const handleOpen = (0, import_react17.useCallback)(() => {
639
- window.clearTimeout(openTimerRef.current);
640
- openTimerRef.current = 0;
641
- wasOpenDelayedRef.current = false;
642
- setOpen(true);
643
- }, [
644
- setOpen
645
- ]);
646
- const handleClose = (0, import_react17.useCallback)(() => {
647
- window.clearTimeout(openTimerRef.current);
648
- openTimerRef.current = 0;
649
- setOpen(false);
650
- }, [
651
- setOpen
652
- ]);
653
- const handleDelayedOpen = (0, import_react17.useCallback)(() => {
654
- window.clearTimeout(openTimerRef.current);
655
- openTimerRef.current = window.setTimeout(() => {
656
- wasOpenDelayedRef.current = true;
657
- setOpen(true);
658
- openTimerRef.current = 0;
659
- }, delayDuration);
660
- }, [
661
- delayDuration,
662
- setOpen
663
- ]);
664
- (0, import_react17.useEffect)(() => {
665
- return () => {
666
- if (openTimerRef.current) {
667
- window.clearTimeout(openTimerRef.current);
668
- openTimerRef.current = 0;
669
- }
670
- };
671
- }, []);
672
- const { tx } = useThemeContext();
673
- const elevation = useElevationContext();
674
- return /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ import_react17.default.createElement(TooltipContextProvider, {
675
- scope: __scopeTooltip,
676
- contentId,
677
- open,
678
- stateAttribute,
679
- trigger,
680
- onTriggerChange: handleTriggerChange,
681
- onTriggerEnter: (0, import_react17.useCallback)(() => {
682
- if (isOpenDelayedRef.current) {
683
- handleDelayedOpen();
684
- } else {
685
- handleOpen();
686
- }
687
- }, [
688
- isOpenDelayedRef,
689
- handleDelayedOpen,
690
- handleOpen
691
- ]),
692
- onTriggerLeave: (0, import_react17.useCallback)(() => {
693
- if (disableHoverableContent) {
694
- handleClose();
695
- } else {
696
- window.clearTimeout(openTimerRef.current);
697
- openTimerRef.current = 0;
698
- }
699
- }, [
700
- handleClose,
701
- disableHoverableContent
702
- ]),
703
- onOpen: handleOpen,
704
- onClose: handleClose,
705
- disableHoverableContent,
706
- isPointerInTransitRef,
707
- onPointerInTransitChange: (0, import_react17.useCallback)((inTransit) => {
708
- isPointerInTransitRef.current = inTransit;
709
- }, [])
710
- }, /* @__PURE__ */ import_react17.default.createElement(TooltipContent, {
711
- side,
712
- className: tx("tooltip.content", "tooltip", {
713
- elevation
714
- })
715
- }, content, /* @__PURE__ */ import_react17.default.createElement(TooltipArrow, {
716
- className: tx("tooltip.arrow", "tooltip__arrow")
717
- })), /* @__PURE__ */ import_react17.default.createElement(TooltipVirtualTrigger, {
718
- virtualRef: triggerRef
719
- }), children));
720
- };
721
- TooltipProvider.displayName = TOOLTIP_NAME;
722
- var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
723
- const popperScope = usePopperScope(__scopeTooltip);
724
- return /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Anchor, {
725
- asChild: true,
726
- ...popperScope,
727
- virtualRef
728
- });
729
- };
730
- var TRIGGER_NAME = "TooltipTrigger";
731
- var TooltipTrigger = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
732
- const {
733
- __scopeTooltip,
734
- onInteract,
735
- // TODO(thure): Pass `delayDuration` into the context.
736
- delayDuration: _delayDuration,
737
- suppressNextTooltip,
738
- side,
739
- content,
740
- ...triggerProps
741
- } = props;
742
- const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
743
- const ref = (0, import_react17.useRef)(null);
744
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
745
- const isPointerDownRef = (0, import_react17.useRef)(false);
746
- const hasPointerMoveOpenedRef = (0, import_react17.useRef)(false);
747
- const handlePointerUp = (0, import_react17.useCallback)(() => isPointerDownRef.current = false, []);
748
- (0, import_react17.useEffect)(() => {
749
- return () => document.removeEventListener("pointerup", handlePointerUp);
750
- }, [
751
- handlePointerUp
752
- ]);
753
- return /* @__PURE__ */ import_react17.default.createElement(import_react_primitive6.Primitive.button, {
754
- // We purposefully avoid adding `type=button` here because tooltip triggers are also
755
- // commonly anchors and the anchor `type` attribute signifies MIME type.
756
- "aria-describedby": context.open ? context.contentId : void 0,
757
- "data-state": context.stateAttribute,
758
- "data-tooltip-content": content,
759
- "data-tooltip-side": side,
760
- ...triggerProps,
761
- ref: composedRefs,
762
- onPointerMove: (0, import_primitive.composeEventHandlers)(props.onPointerMove, (event) => {
763
- if (event.pointerType === "touch") {
764
- return;
765
- }
766
- if (!hasPointerMoveOpenedRef.current && !context.isPointerInTransitRef.current) {
767
- onInteract?.(event);
768
- if (event.defaultPrevented) {
769
- return;
770
- }
771
- context.onTriggerChange(ref.current);
772
- context.onTriggerEnter();
773
- hasPointerMoveOpenedRef.current = true;
774
- }
775
- }),
776
- onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, () => {
777
- context.onTriggerLeave();
778
- hasPointerMoveOpenedRef.current = false;
779
- }),
780
- onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, () => {
781
- if (context.open) {
782
- context.onClose();
783
- }
784
- isPointerDownRef.current = true;
785
- document.addEventListener("pointerup", handlePointerUp, {
786
- once: true
787
- });
788
- }),
789
- onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, (event) => {
790
- if (!isPointerDownRef.current) {
791
- onInteract?.(event);
792
- if (event.defaultPrevented) {
793
- return;
794
- }
795
- if (suppressNextTooltip?.current) {
796
- suppressNextTooltip.current = false;
797
- } else {
798
- context.onTriggerChange(ref.current);
799
- context.onOpen();
800
- }
801
- }
802
- }),
803
- onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, context.onClose),
804
- onClick: (0, import_primitive.composeEventHandlers)(props.onClick, context.onClose)
805
- });
806
- });
807
- TooltipTrigger.displayName = TRIGGER_NAME;
808
- var PORTAL_NAME = "TooltipPortal";
809
- var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
810
- forceMount: void 0
811
- });
812
- var TooltipPortal = (props) => {
813
- const { __scopeTooltip, forceMount, children, container } = props;
814
- const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
815
- return /* @__PURE__ */ import_react17.default.createElement(PortalProvider, {
816
- scope: __scopeTooltip,
817
- forceMount
818
- }, /* @__PURE__ */ import_react17.default.createElement(import_react_presence.Presence, {
819
- present: forceMount || context.open
820
- }, /* @__PURE__ */ import_react17.default.createElement(import_react_portal.Portal, {
821
- asChild: true,
822
- container
823
- }, children)));
824
- };
825
- TooltipPortal.displayName = PORTAL_NAME;
826
- var CONTENT_NAME = "TooltipContent";
827
- var TooltipContent = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
828
- const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
829
- const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
830
- const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
831
- return /* @__PURE__ */ import_react17.default.createElement(import_react_presence.Presence, {
832
- present: forceMount || context.open
833
- }, context.disableHoverableContent ? /* @__PURE__ */ import_react17.default.createElement(TooltipContentImpl, {
834
- side,
835
- ...contentProps,
836
- ref: forwardedRef
837
- }) : /* @__PURE__ */ import_react17.default.createElement(TooltipContentHoverable, {
838
- side,
839
- ...contentProps,
840
- ref: forwardedRef
841
- }));
842
- });
843
- var TooltipContentHoverable = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
844
- const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
845
- const ref = (0, import_react17.useRef)(null);
846
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
847
- const [pointerGraceArea, setPointerGraceArea] = (0, import_react17.useState)(null);
848
- const { trigger, onClose } = context;
849
- const content = ref.current;
850
- const { onPointerInTransitChange } = context;
851
- const handleRemoveGraceArea = (0, import_react17.useCallback)(() => {
852
- setPointerGraceArea(null);
853
- onPointerInTransitChange(false);
854
- }, [
855
- onPointerInTransitChange
856
- ]);
857
- const handleCreateGraceArea = (0, import_react17.useCallback)((event, hoverTarget) => {
858
- const currentTarget = event.currentTarget;
859
- const exitPoint = {
860
- x: event.clientX,
861
- y: event.clientY
862
- };
863
- const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
864
- const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
865
- const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
866
- const graceArea = getHull([
867
- ...paddedExitPoints,
868
- ...hoverTargetPoints
869
- ]);
870
- setPointerGraceArea(graceArea);
871
- onPointerInTransitChange(true);
872
- }, [
873
- onPointerInTransitChange
874
- ]);
875
- (0, import_react17.useEffect)(() => {
876
- return () => handleRemoveGraceArea();
877
- }, [
878
- handleRemoveGraceArea
879
- ]);
880
- (0, import_react17.useEffect)(() => {
881
- if (trigger && content) {
882
- const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
883
- const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
884
- trigger.addEventListener("pointerleave", handleTriggerLeave);
885
- content.addEventListener("pointerleave", handleContentLeave);
886
- return () => {
887
- trigger.removeEventListener("pointerleave", handleTriggerLeave);
888
- content.removeEventListener("pointerleave", handleContentLeave);
889
- };
890
- }
891
- }, [
892
- trigger,
893
- content,
894
- handleCreateGraceArea,
895
- handleRemoveGraceArea
896
- ]);
897
- (0, import_react17.useEffect)(() => {
898
- if (pointerGraceArea) {
899
- const handleTrackPointerGrace = (event) => {
900
- const target = event.target;
901
- const pointerPosition = {
902
- x: event.clientX,
903
- y: event.clientY
904
- };
905
- const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
906
- const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
907
- if (hasEnteredTarget) {
908
- handleRemoveGraceArea();
909
- } else if (isPointerOutsideGraceArea) {
910
- handleRemoveGraceArea();
911
- onClose();
912
- }
913
- };
914
- document.addEventListener("pointermove", handleTrackPointerGrace);
915
- return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
916
- }
917
- }, [
918
- trigger,
919
- content,
920
- pointerGraceArea,
921
- onClose,
922
- handleRemoveGraceArea
923
- ]);
924
- return /* @__PURE__ */ import_react17.default.createElement(TooltipContentImpl, {
925
- ...props,
926
- ref: composedRefs
927
- });
928
- });
929
- var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, {
930
- isInside: false
931
- });
932
- var TooltipContentImpl = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
933
- const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
934
- const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
935
- const popperScope = usePopperScope(__scopeTooltip);
936
- const { onClose } = context;
937
- (0, import_react17.useEffect)(() => {
938
- document.addEventListener(TOOLTIP_OPEN, onClose);
939
- return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
940
- }, [
941
- onClose
942
- ]);
943
- (0, import_react17.useEffect)(() => {
944
- if (context.trigger) {
945
- const handleScroll = (event) => {
946
- const target = event.target;
947
- if (target?.contains(context.trigger)) {
948
- onClose();
949
- }
950
- };
951
- window.addEventListener("scroll", handleScroll, {
952
- capture: true
953
- });
954
- return () => window.removeEventListener("scroll", handleScroll, {
955
- capture: true
956
- });
957
- }
958
- }, [
959
- context.trigger,
960
- onClose
961
- ]);
962
- return /* @__PURE__ */ import_react17.default.createElement(import_react_dismissable_layer.DismissableLayer, {
963
- asChild: true,
964
- disableOutsidePointerEvents: false,
965
- onEscapeKeyDown,
966
- onPointerDownOutside,
967
- onFocusOutside: (event) => event.preventDefault(),
968
- onDismiss: onClose
969
- }, /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Content, {
970
- "data-state": context.stateAttribute,
971
- ...popperScope,
972
- ...contentProps,
973
- ref: forwardedRef,
974
- style: {
975
- ...contentProps.style,
976
- // re-namespace exposed content custom properties
977
- ...{
978
- "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
979
- "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
980
- "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
981
- "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
982
- "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
983
- }
984
- }
985
- }, /* @__PURE__ */ import_react17.default.createElement(import_react_slot6.Slottable, null, children), /* @__PURE__ */ import_react17.default.createElement(VisuallyHiddenContentContextProvider, {
986
- scope: __scopeTooltip,
987
- isInside: true
988
- }, /* @__PURE__ */ import_react17.default.createElement(VisuallyHiddenPrimitive.Root, {
989
- id: context.contentId,
990
- role: "tooltip"
991
- }, ariaLabel || children))));
992
- });
993
- TooltipContent.displayName = CONTENT_NAME;
994
- var ARROW_NAME = "TooltipArrow";
995
- var TooltipArrow = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
996
- const { __scopeTooltip, ...arrowProps } = props;
997
- const popperScope = usePopperScope(__scopeTooltip);
998
- const visuallyHiddenContentContext = useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip);
999
- return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Arrow, {
1000
- ...popperScope,
1001
- ...arrowProps,
1002
- ref: forwardedRef
1003
- });
1004
- });
1005
- TooltipArrow.displayName = ARROW_NAME;
1006
- var getExitSideFromRect = (point, rect) => {
1007
- const top = Math.abs(rect.top - point.y);
1008
- const bottom = Math.abs(rect.bottom - point.y);
1009
- const right = Math.abs(rect.right - point.x);
1010
- const left = Math.abs(rect.left - point.x);
1011
- switch (Math.min(top, bottom, right, left)) {
1012
- case left:
1013
- return "left";
1014
- case right:
1015
- return "right";
1016
- case top:
1017
- return "top";
1018
- case bottom:
1019
- return "bottom";
1020
- default:
1021
- throw new Error("unreachable");
1022
- }
1023
- };
1024
- var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
1025
- const paddedExitPoints = [];
1026
- switch (exitSide) {
1027
- case "top":
1028
- paddedExitPoints.push({
1029
- x: exitPoint.x - padding,
1030
- y: exitPoint.y + padding
1031
- }, {
1032
- x: exitPoint.x + padding,
1033
- y: exitPoint.y + padding
1034
- });
1035
- break;
1036
- case "bottom":
1037
- paddedExitPoints.push({
1038
- x: exitPoint.x - padding,
1039
- y: exitPoint.y - padding
1040
- }, {
1041
- x: exitPoint.x + padding,
1042
- y: exitPoint.y - padding
1043
- });
1044
- break;
1045
- case "left":
1046
- paddedExitPoints.push({
1047
- x: exitPoint.x + padding,
1048
- y: exitPoint.y - padding
1049
- }, {
1050
- x: exitPoint.x + padding,
1051
- y: exitPoint.y + padding
1052
- });
1053
- break;
1054
- case "right":
1055
- paddedExitPoints.push({
1056
- x: exitPoint.x - padding,
1057
- y: exitPoint.y - padding
1058
- }, {
1059
- x: exitPoint.x - padding,
1060
- y: exitPoint.y + padding
1061
- });
1062
- break;
1063
- }
1064
- return paddedExitPoints;
1065
- };
1066
- var getPointsFromRect = (rect) => {
1067
- const { top, right, bottom, left } = rect;
1068
- return [
1069
- {
1070
- x: left,
1071
- y: top
1072
- },
1073
- {
1074
- x: right,
1075
- y: top
1076
- },
1077
- {
1078
- x: right,
1079
- y: bottom
1080
- },
1081
- {
1082
- x: left,
1083
- y: bottom
1084
- }
1085
- ];
1086
- };
1087
- var isPointInPolygon = (point, polygon) => {
1088
- const { x, y } = point;
1089
- let inside = false;
1090
- for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
1091
- const xi = polygon[i].x;
1092
- const yi = polygon[i].y;
1093
- const xj = polygon[j].x;
1094
- const yj = polygon[j].y;
1095
- const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
1096
- if (intersect) {
1097
- inside = !inside;
1098
- }
1099
- }
1100
- return inside;
1101
- };
1102
- var getHull = (points) => {
1103
- const newPoints = points.slice();
1104
- newPoints.sort((a, b) => {
1105
- if (a.x < b.x) {
1106
- return -1;
1107
- } else if (a.x > b.x) {
1108
- return 1;
1109
- } else if (a.y < b.y) {
1110
- return -1;
1111
- } else if (a.y > b.y) {
1112
- return 1;
1113
- } else {
1114
- return 0;
1115
- }
1116
- });
1117
- return getHullPresorted(newPoints);
1118
- };
1119
- var getHullPresorted = (points) => {
1120
- if (points.length <= 1) {
1121
- return points.slice();
1122
- }
1123
- const upperHull = [];
1124
- for (let i = 0; i < points.length; i++) {
1125
- const p = points[i];
1126
- while (upperHull.length >= 2) {
1127
- const q = upperHull[upperHull.length - 1];
1128
- const r = upperHull[upperHull.length - 2];
1129
- if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
1130
- upperHull.pop();
1131
- } else {
1132
- break;
1133
- }
1134
- }
1135
- upperHull.push(p);
1136
- }
1137
- upperHull.pop();
1138
- const lowerHull = [];
1139
- for (let i = points.length - 1; i >= 0; i--) {
1140
- const p = points[i];
1141
- while (lowerHull.length >= 2) {
1142
- const q = lowerHull[lowerHull.length - 1];
1143
- const r = lowerHull[lowerHull.length - 2];
1144
- if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
1145
- lowerHull.pop();
1146
- } else {
1147
- break;
1148
- }
1149
- }
1150
- lowerHull.push(p);
1151
- }
1152
- lowerHull.pop();
1153
- if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
1154
- return upperHull;
1155
- } else {
1156
- return upperHull.concat(lowerHull);
1157
- }
1158
- };
1159
- var Tooltip = {
1160
- Provider: TooltipProvider,
1161
- Trigger: TooltipTrigger
1162
- };
1163
- var IconOnlyButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ noTooltip, tooltipPortal = true, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
1164
- if (noTooltip) {
1165
- return /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
1166
- ...props,
1167
- ref: forwardedRef
1168
- });
1169
- }
1170
- return /* @__PURE__ */ import_react15.default.createElement(Tooltip.Trigger, {
1171
- asChild: true,
1172
- content: props.label,
1173
- side: tooltipSide,
1174
- suppressNextTooltip
1175
- }, /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
1176
- ...props,
1177
- ref: forwardedRef
1178
- }));
1179
- });
1180
- var LabelledIconButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props }, forwardedRef) => {
1181
- const { tx } = useThemeContext();
1182
- return /* @__PURE__ */ import_react15.default.createElement(Button, {
1183
- ...props,
1184
- classNames: tx("iconButton.root", "iconButton", {}, classNames),
1185
- ref: forwardedRef
1186
- }, /* @__PURE__ */ import_react15.default.createElement(Icon, {
1187
- icon,
1188
- size,
1189
- classNames: iconClassNames
1190
- }), /* @__PURE__ */ import_react15.default.createElement("span", {
1191
- className: iconOnly ? "sr-only" : void 0
1192
- }, label), caretDown && /* @__PURE__ */ import_react15.default.createElement(Icon, {
1193
- size: 3,
1194
- icon: "ph--caret-down--bold"
1195
- }));
1196
- });
1197
- var IconButton = /* @__PURE__ */ (0, import_react15.forwardRef)((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ import_react15.default.createElement(IconOnlyButton, {
1198
- ...props,
1199
- ref: forwardedRef
1200
- }) : /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
1201
- ...props,
1202
- ref: forwardedRef
1203
- }));
1204
- var Toggle = /* @__PURE__ */ (0, import_react18.forwardRef)(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
1205
- return /* @__PURE__ */ import_react18.default.createElement(import_react_toggle.Toggle, {
1206
- defaultPressed,
1207
- pressed,
1208
- onPressedChange,
1209
- asChild: true
1210
- }, /* @__PURE__ */ import_react18.default.createElement(Button, {
1211
- ...props,
1212
- ref: forwardedRef
1213
- }));
1214
- });
1215
- var ToggleGroup = /* @__PURE__ */ (0, import_react19.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
1216
- return /* @__PURE__ */ import_react19.default.createElement(import_react_toggle_group.ToggleGroup, {
1217
- ...props,
1218
- asChild: true
1219
- }, /* @__PURE__ */ import_react19.default.createElement(ButtonGroup, {
1220
- classNames,
1221
- children,
1222
- ref: forwardedRef
1223
- }));
1224
- });
1225
- var ToggleGroupItem = /* @__PURE__ */ (0, import_react19.forwardRef)(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
1226
- return /* @__PURE__ */ import_react19.default.createElement(import_react_toggle_group.ToggleGroupItem, {
1227
- ...props,
1228
- asChild: true
1229
- }, /* @__PURE__ */ import_react19.default.createElement(Button, {
1230
- variant,
1231
- elevation,
1232
- density,
1233
- classNames,
1234
- children,
1235
- ref: forwardedRef
1236
- }));
1237
- });
1238
- var ClipboardContext = /* @__PURE__ */ (0, import_react20.createContext)({
1239
- textValue: "",
1240
- setTextValue: async (_) => {
1241
- }
1242
- });
1243
- var useClipboard = () => (0, import_react20.useContext)(ClipboardContext);
1244
- var ClipboardProvider = ({ children }) => {
1245
- const [textValue, setInternalTextValue] = (0, import_react20.useState)("");
1246
- const setTextValue = (0, import_react20.useCallback)(async (nextValue) => {
1247
- await navigator.clipboard.writeText(nextValue);
1248
- return setInternalTextValue(nextValue);
1249
- }, []);
1250
- return /* @__PURE__ */ import_react20.default.createElement(ClipboardContext.Provider, {
1251
- value: {
1252
- textValue,
1253
- setTextValue
1254
- }
1255
- }, children);
1256
- };
1257
- var hasIosKeyboard = () => {
1258
- return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
1259
- };
1260
- var DensityContext = /* @__PURE__ */ (0, import_react23.createContext)({
1261
- density: "fine"
1262
- });
1263
- var DensityProvider = ({ density, children }) => /* @__PURE__ */ import_react23.default.createElement(DensityContext.Provider, {
1264
- value: {
1265
- density
1266
- }
1267
- }, children);
1268
- var ElevationContext = /* @__PURE__ */ (0, import_react24.createContext)({
1269
- elevation: "base"
1270
- });
1271
- var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ import_react24.default.createElement(ElevationContext.Provider, {
1272
- value: {
1273
- elevation
1274
- }
1275
- }, children);
1276
- var ThemeContext = /* @__PURE__ */ (0, import_react22.createContext)(void 0);
1277
- var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
1278
- (0, import_react22.useEffect)(() => {
1279
- if (document.defaultView) {
1280
- const kb = (0, import_keyborg.createKeyborg)(document.defaultView);
1281
- kb.subscribe(handleInputModalityChange);
1282
- return () => kb.unsubscribe(handleInputModalityChange);
1283
- }
1284
- }, []);
1285
- const safeAreaPadding = useSafeArea();
1286
- const contextValue = (0, import_react22.useMemo)(() => ({
1287
- tx,
1288
- themeMode,
1289
- hasIosKeyboard: hasIosKeyboard(),
1290
- safeAreaPadding,
1291
- ...rest
1292
- }), [
1293
- tx,
1294
- themeMode,
1295
- safeAreaPadding,
1296
- rest
1297
- ]);
1298
- return /* @__PURE__ */ import_react22.default.createElement(ThemeContext.Provider, {
1299
- value: contextValue
1300
- }, /* @__PURE__ */ import_react22.default.createElement(TranslationsProvider, {
1301
- fallback,
1302
- resourceExtensions,
1303
- appNs
1304
- }, /* @__PURE__ */ import_react22.default.createElement(ElevationProvider, {
1305
- elevation: "base"
1306
- }, /* @__PURE__ */ import_react22.default.createElement(DensityProvider, {
1307
- density: rootDensity
1308
- }, children))));
1309
- };
1310
- var handleInputModalityChange = (isUsingKeyboard) => {
1311
- if (isUsingKeyboard) {
1312
- document.body.setAttribute("data-is-keyboard", "true");
1313
- } else {
1314
- document.body.removeAttribute("data-is-keyboard");
1315
- }
1316
- };
1317
- var inactiveLabelStyles = "invisible bs-px -mbe-px overflow-hidden";
1318
- var CopyButton = ({ value, classNames, iconProps, ...props }) => {
1319
- const { t } = useTranslation("os");
1320
- const { textValue, setTextValue } = useClipboard();
1321
- const isCopied = textValue === value;
1322
- return /* @__PURE__ */ import_react21.default.createElement(Button, {
1323
- ...props,
1324
- classNames: [
1325
- "inline-flex flex-col justify-center",
1326
- classNames
1327
- ],
1328
- onClick: () => setTextValue(value),
1329
- "data-testid": "copy-invitation"
1330
- }, /* @__PURE__ */ import_react21.default.createElement("div", {
1331
- role: "none",
1332
- className: (0, import_react_ui_theme2.mx)("flex gap-1 items-center", isCopied && inactiveLabelStyles)
1333
- }, /* @__PURE__ */ import_react21.default.createElement("span", {
1334
- className: "pli-1"
1335
- }, t("copy label")), /* @__PURE__ */ import_react21.default.createElement(Icon, {
1336
- icon: "ph--copy--regular",
1337
- size: 5,
1338
- ...iconProps
1339
- })), /* @__PURE__ */ import_react21.default.createElement("div", {
1340
- role: "none",
1341
- className: (0, import_react_ui_theme2.mx)("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
1342
- }, /* @__PURE__ */ import_react21.default.createElement("span", {
1343
- className: "pli-1"
1344
- }, t("copy success label")), /* @__PURE__ */ import_react21.default.createElement(Icon, {
1345
- icon: "ph--check--regular",
1346
- size: 5,
1347
- ...iconProps
1348
- })));
1349
- };
1350
- var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, iconProps, variant, ...props }) => {
1351
- const { t } = useTranslation("os");
1352
- const { textValue, setTextValue } = useClipboard();
1353
- const isCopied = textValue === value;
1354
- const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
1355
- const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
1356
- return /* @__PURE__ */ import_react21.default.createElement(IconButton, {
1357
- iconOnly: true,
1358
- label,
1359
- icon: "ph--copy--regular",
1360
- size: 5,
1361
- variant,
1362
- classNames: [
1363
- "inline-flex flex-col justify-center",
1364
- classNames
1365
- ],
1366
- onClick: () => setTextValue(value).then(onOpen),
1367
- "data-testid": "copy-invitation"
1368
- });
1369
- };
1370
- var Clipboard = {
1371
- Button: CopyButton,
1372
- IconButton: CopyButtonIconOnly,
1373
- Provider: ClipboardProvider
1374
- };
1375
- var DialogRoot = (props) => /* @__PURE__ */ import_react25.default.createElement(ElevationProvider, {
1376
- elevation: "dialog"
1377
- }, /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.Root, props));
1378
- var DialogTrigger = import_react_dialog.DialogTrigger;
1379
- var DialogPortal = import_react_dialog.DialogPortal;
1380
- var DialogTitle = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
1381
- const { tx } = useThemeContext();
1382
- return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogTitle, {
1383
- ...props,
1384
- className: tx("dialog.title", "dialog__title", {
1385
- srOnly
1386
- }, classNames),
1387
- ref: forwardedRef
1388
- });
1389
- });
1390
- var DialogDescription = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
1391
- const { tx } = useThemeContext();
1392
- return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogDescription, {
1393
- ...props,
1394
- className: tx("dialog.description", "dialog__description", {
1395
- srOnly
1396
- }, classNames),
1397
- ref: forwardedRef
1398
- });
1399
- });
1400
- var DialogClose = import_react_dialog.DialogClose;
1401
- var DIALOG_OVERLAY_NAME = "DialogOverlay";
1402
- var DIALOG_CONTENT_NAME = "DialogContent";
1403
- var [OverlayLayoutProvider, useOverlayLayoutContext] = (0, import_react_context4.createContext)(DIALOG_OVERLAY_NAME, {});
1404
- var DialogOverlay = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
1405
- const { tx } = useThemeContext();
1406
- return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogOverlay, {
1407
- ...props,
1408
- className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
1409
- ref: forwardedRef,
1410
- "data-block-align": blockAlign
1411
- }, /* @__PURE__ */ import_react25.default.createElement(OverlayLayoutProvider, {
1412
- inOverlayLayout: true
1413
- }, children));
1414
- });
1415
- DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
1416
- var DialogContent = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
1417
- const { tx } = useThemeContext();
1418
- const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
1419
- return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogContent, {
1420
- // NOTE: Radix warning unless set to undefined.
1421
- // https://www.radix-ui.com/primitives/docs/components/dialog#description
1422
- "aria-describedby": void 0,
1423
- ...props,
1424
- className: tx("dialog.content", "dialog", {
1425
- inOverlayLayout: propsInOverlayLayout || inOverlayLayout
1426
- }, classNames),
1427
- ref: forwardedRef
1428
- }, children);
1429
- });
1430
- DialogContent.displayName = DIALOG_CONTENT_NAME;
1431
- var Dialog = {
1432
- Root: DialogRoot,
1433
- Trigger: DialogTrigger,
1434
- Portal: DialogPortal,
1435
- Overlay: DialogOverlay,
1436
- Content: DialogContent,
1437
- Title: DialogTitle,
1438
- Description: DialogDescription,
1439
- Close: DialogClose
1440
- };
1441
- var AlertDialogRoot = (props) => /* @__PURE__ */ import_react26.default.createElement(ElevationProvider, {
1442
- elevation: "dialog"
1443
- }, /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.Root, props));
1444
- var AlertDialogTrigger = import_react_alert_dialog.AlertDialogTrigger;
1445
- var AlertDialogPortal = import_react_alert_dialog.AlertDialogPortal;
1446
- var AlertDialogCancel = import_react_alert_dialog.AlertDialogCancel;
1447
- var AlertDialogAction = import_react_alert_dialog.AlertDialogAction;
1448
- var AlertDialogTitle = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
1449
- const { tx } = useThemeContext();
1450
- return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogTitle, {
1451
- ...props,
1452
- className: tx("dialog.title", "dialog--alert__title", {
1453
- srOnly
1454
- }, classNames),
1455
- ref: forwardedRef
1456
- });
1457
- });
1458
- var AlertDialogDescription = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
1459
- const { tx } = useThemeContext();
1460
- return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogDescription, {
1461
- ...props,
1462
- className: tx("dialog.description", "dialog--alert__description", {
1463
- srOnly
1464
- }, classNames),
1465
- ref: forwardedRef
1466
- });
1467
- });
1468
- var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
1469
- var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
1470
- var [OverlayLayoutProvider2, useOverlayLayoutContext2] = (0, import_react_context5.createContext)(ALERT_DIALOG_OVERLAY_NAME, {
1471
- inOverlayLayout: false
1472
- });
1473
- var AlertDialogOverlay = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
1474
- const { tx } = useThemeContext();
1475
- return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogOverlay, {
1476
- ...props,
1477
- className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
1478
- ref: forwardedRef,
1479
- "data-block-align": blockAlign
1480
- }, /* @__PURE__ */ import_react26.default.createElement(OverlayLayoutProvider2, {
1481
- inOverlayLayout: true
1482
- }, children));
1483
- });
1484
- AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
1485
- var AlertDialogContent = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
1486
- const { tx } = useThemeContext();
1487
- const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
1488
- return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogContent, {
1489
- ...props,
1490
- className: tx("dialog.content", "dialog--alert", {
1491
- inOverlayLayout
1492
- }, classNames),
1493
- ref: forwardedRef
1494
- }, children);
1495
- });
1496
- AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
1497
- var AlertDialog = {
1498
- Root: AlertDialogRoot,
1499
- Trigger: AlertDialogTrigger,
1500
- Portal: AlertDialogPortal,
1501
- Overlay: AlertDialogOverlay,
1502
- Content: AlertDialogContent,
1503
- Title: AlertDialogTitle,
1504
- Description: AlertDialogDescription,
1505
- Cancel: AlertDialogCancel,
1506
- Action: AlertDialogAction
1507
- };
1508
- var Label = /* @__PURE__ */ (0, import_react27.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
1509
- const { tx } = useThemeContext();
1510
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.Label, {
1511
- ...props,
1512
- className: tx("input.label", "input__label", {
1513
- srOnly
1514
- }, classNames),
1515
- ref: forwardedRef
1516
- }, children);
1517
- });
1518
- var Description = /* @__PURE__ */ (0, import_react27.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
1519
- const { tx } = useThemeContext();
1520
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.Description, {
1521
- ...props,
1522
- className: tx("input.description", "input__description", {
1523
- srOnly
1524
- }, classNames),
1525
- ref: forwardedRef
1526
- }, children);
1527
- });
1528
- var Validation = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
1529
- const { tx } = useThemeContext();
1530
- const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
1531
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.Validation, {
1532
- ...props,
1533
- className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
1534
- srOnly,
1535
- validationValence
1536
- }, classNames),
1537
- ref: forwardedRef
1538
- }, children);
1539
- });
1540
- var DescriptionAndValidation = /* @__PURE__ */ (0, import_react27.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
1541
- const { tx } = useThemeContext();
1542
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.DescriptionAndValidation, {
1543
- ...props,
1544
- className: tx("input.descriptionAndValidation", "input__description-and-validation", {
1545
- srOnly
1546
- }, classNames),
1547
- ref: forwardedRef
1548
- }, children);
1549
- });
1550
- var PinInput = /* @__PURE__ */ (0, import_react27.forwardRef)(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
1551
- const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
1552
- const { tx } = useThemeContext();
1553
- const density = useDensityContext(propsDensity);
1554
- const elevation = useElevationContext(propsElevation);
1555
- const segmentClassName = (0, import_react27.useCallback)(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
1556
- variant: "static",
1557
- focused,
1558
- disabled: props.disabled,
1559
- density,
1560
- elevation,
1561
- validationValence
1562
- }, propsSegmentClassName), [
1563
- tx,
1564
- props.disabled,
1565
- elevation,
1566
- propsElevation,
1567
- density
1568
- ]);
1569
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.PinInput, {
1570
- ...props,
1571
- segmentClassName,
1572
- ...props.autoFocus && !hasIosKeyboard2 && {
1573
- autoFocus: true
1574
- },
1575
- inputClassName: tx("input.inputWithSegments", "input input--pin", {
1576
- disabled: props.disabled
1577
- }, inputClassName),
1578
- ref: forwardedRef
1579
- });
1580
- });
1581
- var TextInput = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
1582
- const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
1583
- const themeContextValue = useThemeContext();
1584
- const density = useDensityContext(propsDensity);
1585
- const elevation = useElevationContext(propsElevation);
1586
- const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
1587
- const { tx } = themeContextValue;
1588
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.TextInput, {
1589
- ...props,
1590
- className: tx("input.input", "input", {
1591
- variant,
1592
- disabled: props.disabled,
1593
- density,
1594
- elevation,
1595
- validationValence
1596
- }, classNames),
1597
- ...props.autoFocus && !hasIosKeyboard2 && {
1598
- autoFocus: true
1599
- },
1600
- ref: forwardedRef
1601
- });
1602
- });
1603
- var TextArea = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
1604
- const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
1605
- const { tx } = useThemeContext();
1606
- const density = useDensityContext(propsDensity);
1607
- const elevation = useElevationContext(propsElevation);
1608
- const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
1609
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.TextArea, {
1610
- ...props,
1611
- className: tx("input.input", "input--text-area", {
1612
- variant,
1613
- disabled: props.disabled,
1614
- density,
1615
- elevation,
1616
- validationValence
1617
- }, classNames),
1618
- ...props.autoFocus && !hasIosKeyboard2 && {
1619
- autoFocus: true
1620
- },
1621
- ref: forwardedRef
1622
- });
1623
- });
1624
- var Checkbox = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
1625
- const [checked, onCheckedChange] = (0, import_react_use_controllable_state2.useControllableState)({
1626
- prop: propsChecked,
1627
- defaultProp: propsDefaultChecked,
1628
- onChange: propsOnCheckedChange
1629
- });
1630
- const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
1631
- const { tx } = useThemeContext();
1632
- return /* @__PURE__ */ import_react27.default.createElement(import_react_checkbox.Root, {
1633
- ...props,
1634
- checked,
1635
- onCheckedChange,
1636
- id,
1637
- "aria-describedby": descriptionId,
1638
- ...validationValence === "error" && {
1639
- "aria-invalid": "true",
1640
- "aria-errormessage": errorMessageId
1641
- },
1642
- className: tx("input.checkbox", "input--checkbox", {
1643
- size
1644
- }, "shrink-0", classNames),
1645
- ref: forwardedRef
1646
- }, /* @__PURE__ */ import_react27.default.createElement(Icon, {
1647
- icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
1648
- classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
1649
- size,
1650
- checked
1651
- })
1652
- }));
1653
- });
1654
- var Switch = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
1655
- const [checked, onCheckedChange] = (0, import_react_use_controllable_state2.useControllableState)({
1656
- prop: propsChecked,
1657
- defaultProp: propsDefaultChecked ?? false,
1658
- onChange: propsOnCheckedChange
1659
- });
1660
- const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
1661
- return /* @__PURE__ */ import_react27.default.createElement("input", {
1662
- type: "checkbox",
1663
- className: (0, import_react_ui_theme3.mx)("dx-checkbox--switch dx-focus-ring", classNames),
1664
- checked,
1665
- onChange: (event) => {
1666
- onCheckedChange(event.target.checked);
1667
- },
1668
- id,
1669
- "aria-describedby": descriptionId,
1670
- ...props,
1671
- ...validationValence === "error" && {
1672
- "aria-invalid": "true",
1673
- "aria-errormessage": errorMessageId
1674
- },
1675
- ref: forwardedRef
1676
- });
1677
- });
1678
- var Input = {
1679
- Root: import_react_input.InputRoot,
1680
- PinInput,
1681
- TextInput,
1682
- TextArea,
1683
- Checkbox,
1684
- Switch,
1685
- Label,
1686
- Description,
1687
- Validation,
1688
- DescriptionAndValidation
1689
- };
1690
- var edgeToOrientationMap = {
1691
- top: "horizontal",
1692
- bottom: "horizontal",
1693
- left: "vertical",
1694
- right: "vertical"
1695
- };
1696
- var orientationStyles = {
1697
- horizontal: "h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]",
1698
- vertical: "w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
1699
- };
1700
- var edgeStyles = {
1701
- top: "top-[--line-offset] before:top-[--offset-terminal]",
1702
- right: "right-[--line-offset] before:right-[--offset-terminal]",
1703
- bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
1704
- left: "left-[--line-offset] before:left-[--offset-terminal]"
1705
- };
1706
- var strokeSize = 2;
1707
- var terminalSize = 8;
1708
- var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
1709
- var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
1710
- const orientation = edgeToOrientationMap[edge];
1711
- return /* @__PURE__ */ import_react30.default.createElement("div", {
1712
- role: "none",
1713
- style: {
1714
- "--line-thickness": `${strokeSize}px`,
1715
- "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
1716
- "--line-inset": `${lineInset}px`,
1717
- "--terminal-size": `${terminalSize}px`,
1718
- "--terminal-radius": `${terminalSize / 2}px`,
1719
- "--terminal-inset": `${terminalInset}px`,
1720
- "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
1721
- },
1722
- className: `absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
1723
- });
1724
- };
1725
- var List = /* @__PURE__ */ (0, import_react29.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
1726
- const { tx } = useThemeContext();
1727
- const density = useDensityContext(props.density);
1728
- return /* @__PURE__ */ import_react29.default.createElement(DensityProvider, {
1729
- density
1730
- }, /* @__PURE__ */ import_react29.default.createElement(import_react_list.List, {
1731
- ...props,
1732
- className: tx("list.root", "list", {}, classNames),
1733
- ref: forwardedRef
1734
- }, children));
1735
- });
1736
- var ListItemEndcap = /* @__PURE__ */ (0, import_react29.forwardRef)(({ children, classNames, asChild, ...props }, forwardedRef) => {
1737
- const Root7 = asChild ? import_react_slot7.Slot : "div";
1738
- const density = useDensityContext();
1739
- const { tx } = useThemeContext();
1740
- return /* @__PURE__ */ import_react29.default.createElement(Root7, {
1741
- ...!asChild && {
1742
- role: "none"
1743
- },
1744
- ...props,
1745
- className: tx("list.item.endcap", "list__listItem__endcap", {
1746
- density
1747
- }, classNames),
1748
- ref: forwardedRef
1749
- }, children);
1750
- });
1751
- var MockListItemOpenTrigger = ({ classNames, ...props }) => {
1752
- const density = useDensityContext();
1753
- const { tx } = useThemeContext();
1754
- return /* @__PURE__ */ import_react29.default.createElement("div", {
1755
- role: "none",
1756
- ...props,
1757
- className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
1758
- density
1759
- }, classNames)
1760
- });
1761
- };
1762
- var ListItemHeading = /* @__PURE__ */ (0, import_react29.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
1763
- const { tx } = useThemeContext();
1764
- const density = useDensityContext();
1765
- return /* @__PURE__ */ import_react29.default.createElement(import_react_list.ListItemHeading, {
1766
- ...props,
1767
- className: tx("list.item.heading", "list__listItem__heading", {
1768
- density
1769
- }, classNames),
1770
- ref: forwardedRef
1771
- }, children);
1772
- });
1773
- var ListItemOpenTrigger = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
1774
- const { tx } = useThemeContext();
1775
- const density = useDensityContext();
1776
- const { open } = (0, import_react_list.useListItemContext)(import_react_list.LIST_ITEM_NAME, __listItemScope);
1777
- const Icon3 = open ? import_react28.CaretDown : import_react28.CaretRight;
1778
- return /* @__PURE__ */ import_react29.default.createElement(import_react_list.ListItemOpenTrigger, {
1779
- ...props,
1780
- className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
1781
- density
1782
- }, classNames),
1783
- ref: forwardedRef
1784
- }, children || /* @__PURE__ */ import_react29.default.createElement(Icon3, {
1785
- weight: "bold",
1786
- className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
1787
- }));
1788
- });
1789
- var ListItemRoot = /* @__PURE__ */ (0, import_react29.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
1790
- const { tx } = useThemeContext();
1791
- const density = useDensityContext();
1792
- return /* @__PURE__ */ import_react29.default.createElement(import_react_list.ListItem, {
1793
- ...props,
1794
- className: tx("list.item.root", "list__listItem", {
1795
- density,
1796
- collapsible: props.collapsible
1797
- }, classNames),
1798
- ref: forwardedRef
1799
- }, children);
1800
- });
1801
- var ListItem = {
1802
- Root: ListItemRoot,
1803
- Endcap: ListItemEndcap,
1804
- Heading: ListItemHeading,
1805
- OpenTrigger: ListItemOpenTrigger,
1806
- CollapsibleContent: import_react_list.ListItemCollapsibleContent,
1807
- MockOpenTrigger: MockListItemOpenTrigger,
1808
- DropIndicator: ListDropIndicator
1809
- };
1810
- var edgeToOrientationMap2 = {
1811
- "reorder-above": "sibling",
1812
- "reorder-below": "sibling",
1813
- "make-child": "child",
1814
- reparent: "child"
1815
- };
1816
- var orientationStyles2 = {
1817
- // TODO(wittjosiah): Stop using left/right here.
1818
- sibling: "bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]",
1819
- child: "is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible"
1820
- };
1821
- var instructionStyles = {
1822
- "reorder-above": "block-start-[--line-offset] before:block-start-[--offset-terminal]",
1823
- "reorder-below": "block-end-[--line-offset] before:block-end-[--offset-terminal]",
1824
- "make-child": "border-accentSurface",
1825
- // TODO(wittjosiah): This is not occurring in the current implementation.
1826
- reparent: ""
1827
- };
1828
- var strokeSize2 = 2;
1829
- var terminalSize2 = 8;
1830
- var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
1831
- var TreeDropIndicator = ({ instruction, gap = 0 }) => {
1832
- const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
1833
- const isBlocked = instruction.type === "instruction-blocked";
1834
- const desiredInstruction = isBlocked ? instruction.desired : instruction;
1835
- const orientation = edgeToOrientationMap2[desiredInstruction.type];
1836
- if (isBlocked) {
1837
- return null;
1838
- }
1839
- return /* @__PURE__ */ import_react32.default.createElement("div", {
1840
- style: {
1841
- "--line-thickness": `${strokeSize2}px`,
1842
- "--line-offset": `${lineOffset}`,
1843
- "--terminal-size": `${terminalSize2}px`,
1844
- "--terminal-radius": `${terminalSize2 / 2}px`,
1845
- "--negative-terminal-size": `-${terminalSize2}px`,
1846
- "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
1847
- "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
1848
- },
1849
- className: `absolute z-10 pointer-events-none before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
1850
- });
1851
- };
1852
- var TreeRoot = /* @__PURE__ */ (0, import_react31.forwardRef)((props, forwardedRef) => {
1853
- return /* @__PURE__ */ import_react31.default.createElement(List, {
1854
- ...props,
1855
- ref: forwardedRef
1856
- });
1857
- });
1858
- var TreeBranch = /* @__PURE__ */ (0, import_react31.forwardRef)(({ __listScope, ...props }, forwardedRef) => {
1859
- const { headingId } = (0, import_react_list.useListItemContext)(import_react_list.LIST_ITEM_NAME, __listScope);
1860
- return /* @__PURE__ */ import_react31.default.createElement(List, {
1861
- ...props,
1862
- "aria-labelledby": headingId,
1863
- ref: forwardedRef
1864
- });
1865
- });
1866
- var TreeItemRoot = /* @__PURE__ */ (0, import_react31.forwardRef)((props, forwardedRef) => {
1867
- return /* @__PURE__ */ import_react31.default.createElement(ListItem.Root, {
1868
- role: "treeitem",
1869
- ...props,
1870
- ref: forwardedRef
1871
- });
1872
- });
1873
- var TreeItemHeading = ListItem.Heading;
1874
- var TreeItemOpenTrigger = ListItem.OpenTrigger;
1875
- var MockTreeItemOpenTrigger = ListItem.MockOpenTrigger;
1876
- var TreeItemBody = ListItem.CollapsibleContent;
1877
- var Tree = {
1878
- Root: TreeRoot,
1879
- Branch: TreeBranch
1880
- };
1881
- var TreeItem = {
1882
- Root: TreeItemRoot,
1883
- Heading: TreeItemHeading,
1884
- Body: TreeItemBody,
1885
- OpenTrigger: TreeItemOpenTrigger,
1886
- MockOpenTrigger: MockTreeItemOpenTrigger,
1887
- DropIndicator: TreeDropIndicator
1888
- };
1889
- var TREEGRID_ROW_NAME = "TreegridRow";
1890
- var [createTreegridRowContext, createTreegridRowScope] = (0, import_react_context6.createContextScope)(TREEGRID_ROW_NAME, []);
1891
- var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
1892
- var PATH_SEPARATOR = "~";
1893
- var PARENT_OF_SEPARATOR = " ";
1894
- var TreegridRoot = /* @__PURE__ */ (0, import_react33.forwardRef)(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
1895
- const { tx } = useThemeContext();
1896
- const Root7 = asChild ? import_react_slot8.Slot : import_react_primitive7.Primitive.div;
1897
- const arrowNavigationAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
1898
- axis: "vertical",
1899
- tabbable: false,
1900
- circular: true
1901
- });
1902
- return /* @__PURE__ */ import_react33.default.createElement(Root7, {
1903
- role: "treegrid",
1904
- ...arrowNavigationAttrs,
1905
- ...props,
1906
- className: tx("treegrid.root", "treegrid", {}, classNames),
1907
- style: {
1908
- ...style,
1909
- gridTemplateColumns
1910
- },
1911
- ref: forwardedRef
1912
- }, children);
1913
- });
1914
- var TreegridRow = /* @__PURE__ */ (0, import_react33.forwardRef)(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
1915
- const { tx } = useThemeContext();
1916
- const Root7 = asChild ? import_react_slot8.Slot : import_react_primitive7.Primitive.div;
1917
- const pathParts = id.split(PATH_SEPARATOR);
1918
- const level = pathParts.length - 1;
1919
- const [open, onOpenChange] = (0, import_react_use_controllable_state3.useControllableState)({
1920
- prop: propsOpen,
1921
- onChange: propsOnOpenChange,
1922
- defaultProp: defaultOpen
1923
- });
1924
- const focusableGroupAttrs = (0, import_react_tabster.useFocusableGroup)({
1925
- tabBehavior: "limited"
1926
- });
1927
- const arrowGroupAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
1928
- axis: "horizontal",
1929
- tabbable: false,
1930
- circular: false,
1931
- memorizeCurrent: false
1932
- });
1933
- return /* @__PURE__ */ import_react33.default.createElement(TreegridRowProvider, {
1934
- open,
1935
- onOpenChange,
1936
- scope: __treegridRowScope
1937
- }, /* @__PURE__ */ import_react33.default.createElement(Root7, {
1938
- role: "row",
1939
- "aria-level": level,
1940
- className: tx("treegrid.row", "treegrid__row", {
1941
- level
1942
- }, classNames),
1943
- ...parentOf && {
1944
- "aria-expanded": open,
1945
- "aria-owns": parentOf
1946
- },
1947
- tabIndex: 0,
1948
- ...focusableGroupAttrs,
1949
- ...props,
1950
- id,
1951
- ref: forwardedRef
1952
- }, /* @__PURE__ */ import_react33.default.createElement("div", {
1953
- role: "none",
1954
- className: "contents",
1955
- ...arrowGroupAttrs
1956
- }, children)));
1957
- });
1958
- var TreegridCell = /* @__PURE__ */ (0, import_react33.forwardRef)(({ classNames, children, indent, ...props }, forwardedRef) => {
1959
- const { tx } = useThemeContext();
1960
- return /* @__PURE__ */ import_react33.default.createElement("div", {
1961
- role: "gridcell",
1962
- className: tx("treegrid.cell", "treegrid__cell", {
1963
- indent
1964
- }, classNames),
1965
- ...props,
1966
- ref: forwardedRef
1967
- }, children);
1968
- });
1969
- var Treegrid = {
1970
- Root: TreegridRoot,
1971
- Row: TreegridRow,
1972
- Cell: TreegridCell,
1973
- PARENT_OF_SEPARATOR,
1974
- PATH_SEPARATOR,
1975
- createTreegridRowScope,
1976
- useTreegridRowContext
1977
- };
1978
- var MotionState;
1979
- (function(MotionState2) {
1980
- MotionState2[MotionState2["IDLE"] = 0] = "IDLE";
1981
- MotionState2[MotionState2["DEBOUNCING"] = 1] = "DEBOUNCING";
1982
- MotionState2[MotionState2["FOLLOWING"] = 2] = "FOLLOWING";
1983
- })(MotionState || (MotionState = {}));
1984
- var useSwipeToDismiss = (ref, {
1985
- onDismiss,
1986
- dismissThreshold = 64,
1987
- debounceThreshold = 8,
1988
- offset = 0
1989
- /* side = 'inline-start' */
1990
- }) => {
1991
- const $root = ref.current;
1992
- const [motionState, setMotionState] = (0, import_react35.useState)(0);
1993
- const [gestureStartX, setGestureStartX] = (0, import_react35.useState)(0);
1994
- const setIdle = (0, import_react35.useCallback)(() => {
1995
- setMotionState(0);
1996
- $root?.style.removeProperty("inset-inline-start");
1997
- $root?.style.setProperty("transition-duration", "200ms");
1998
- }, [
1999
- $root
2000
- ]);
2001
- const setFollowing = (0, import_react35.useCallback)(() => {
2002
- setMotionState(2);
2003
- $root?.style.setProperty("transition-duration", "0ms");
2004
- }, [
2005
- $root
2006
- ]);
2007
- const handlePointerDown = (0, import_react35.useCallback)(({ screenX }) => {
2008
- if (motionState === 0) {
2009
- setMotionState(1);
2010
- setGestureStartX(screenX);
2011
- }
2012
- }, [
2013
- motionState
2014
- ]);
2015
- const handlePointerMove = (0, import_react35.useCallback)(({ screenX }) => {
2016
- if ($root) {
2017
- const delta = Math.min(screenX - gestureStartX, 0);
2018
- switch (motionState) {
2019
- case 2:
2020
- if (Math.abs(delta) > dismissThreshold) {
2021
- setIdle();
2022
- onDismiss?.();
2023
- } else {
2024
- $root.style.setProperty("inset-inline-start", `${offset + delta}px`);
2025
- }
2026
- break;
2027
- case 1:
2028
- if (Math.abs(delta) > debounceThreshold) {
2029
- setFollowing();
2030
- }
2031
- break;
2032
- }
2033
- }
2034
- }, [
2035
- $root,
2036
- motionState,
2037
- gestureStartX
2038
- ]);
2039
- const handlePointerUp = (0, import_react35.useCallback)(() => {
2040
- setIdle();
2041
- }, [
2042
- setIdle
2043
- ]);
2044
- (0, import_react35.useEffect)(() => {
2045
- $root?.addEventListener("pointerdown", handlePointerDown);
2046
- return () => {
2047
- $root?.removeEventListener("pointerdown", handlePointerDown);
2048
- };
2049
- }, [
2050
- $root,
2051
- handlePointerDown
2052
- ]);
2053
- (0, import_react35.useEffect)(() => {
2054
- $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
2055
- return () => {
2056
- document.documentElement.removeEventListener("pointermove", handlePointerMove);
2057
- };
2058
- }, [
2059
- $root,
2060
- handlePointerMove
2061
- ]);
2062
- (0, import_react35.useEffect)(() => {
2063
- $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
2064
- return () => {
2065
- document.documentElement.removeEventListener("pointerup", handlePointerUp);
2066
- };
2067
- }, [
2068
- $root,
2069
- handlePointerUp
2070
- ]);
2071
- };
2072
- var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui/src/components/Main/Main.tsx";
2073
- var MAIN_ROOT_NAME = "MainRoot";
2074
- var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
2075
- var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
2076
- var MAIN_NAME = "Main";
2077
- var GENERIC_CONSUMER_NAME = "GenericConsumer";
2078
- var landmarkAttr = "data-main-landmark";
2079
- var useLandmarkMover = (propsOnKeyDown, landmark) => {
2080
- const handleKeyDown = (0, import_react34.useCallback)((event) => {
2081
- const target = event.target;
2082
- if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
2083
- event.preventDefault();
2084
- const landmarks = Array.from(document.querySelectorAll(`[${landmarkAttr}]:not([inert])`)).map((el) => el.hasAttribute(landmarkAttr) ? parseInt(el.getAttribute(landmarkAttr)) : NaN).sort();
2085
- const l = landmarks.length;
2086
- const cursor = landmarks.indexOf(parseInt(target.getAttribute(landmarkAttr)));
2087
- const nextLandmark = landmarks[(cursor + l + (event.getModifierState("Shift") ? -1 : 1)) % l];
2088
- document.querySelector(`[${landmarkAttr}="${nextLandmark}"]`)?.focus();
2089
- }
2090
- propsOnKeyDown?.(event);
2091
- }, [
2092
- propsOnKeyDown
2093
- ]);
2094
- const focusableGroupAttrs = window ? {} : {
2095
- tabBehavior: "limited",
2096
- ignoreDefaultKeydown: {
2097
- Tab: true
2098
- }
2099
- };
2100
- return {
2101
- onKeyDown: handleKeyDown,
2102
- [landmarkAttr]: landmark,
2103
- tabIndex: 0,
2104
- ...focusableGroupAttrs
2105
- };
2106
- };
2107
- var [MainProvider, useMainContext] = (0, import_react_context7.createContext)(MAIN_NAME, {
2108
- resizing: false,
2109
- navigationSidebarState: "closed",
2110
- setNavigationSidebarState: (nextState) => {
2111
- import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
2112
- F: __dxlog_file,
2113
- L: 82,
2114
- S: void 0,
2115
- C: (f, a) => f(...a)
2116
- });
2117
- },
2118
- complementarySidebarState: "closed",
2119
- setComplementarySidebarState: (nextState) => {
2120
- import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
2121
- F: __dxlog_file,
2122
- L: 87,
2123
- S: void 0,
2124
- C: (f, a) => f(...a)
2125
- });
2126
- }
2127
- });
2128
- var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
2129
- const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
2130
- return {
2131
- navigationSidebarState,
2132
- setNavigationSidebarState,
2133
- toggleNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
2134
- navigationSidebarState,
2135
- setNavigationSidebarState
2136
- ]),
2137
- openNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState("expanded"), []),
2138
- collapseNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState("collapsed"), []),
2139
- closeNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState("closed"), []),
2140
- complementarySidebarState,
2141
- setComplementarySidebarState,
2142
- toggleComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
2143
- complementarySidebarState,
2144
- setComplementarySidebarState
2145
- ]),
2146
- openComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState("expanded"), []),
2147
- collapseComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState("collapsed"), []),
2148
- closeComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState("closed"), [])
2149
- };
2150
- };
2151
- var resizeDebounce = 3e3;
2152
- var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
2153
- const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
2154
- ssr: false
2155
- });
2156
- const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
2157
- prop: propsNavigationSidebarState,
2158
- defaultProp: defaultNavigationSidebarState,
2159
- onChange: onNavigationSidebarStateChange
2160
- });
2161
- const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
2162
- prop: propsComplementarySidebarState,
2163
- defaultProp: defaultComplementarySidebarState,
2164
- onChange: onComplementarySidebarStateChange
2165
- });
2166
- const [resizing, setResizing] = (0, import_react34.useState)(false);
2167
- const resizeInterval = (0, import_react34.useRef)(null);
2168
- const handleResize = (0, import_react34.useCallback)(() => {
2169
- setResizing(true);
2170
- if (resizeInterval.current) {
2171
- clearTimeout(resizeInterval.current);
2172
- }
2173
- resizeInterval.current = setTimeout(() => {
2174
- setResizing(false);
2175
- resizeInterval.current = null;
2176
- }, resizeDebounce);
2177
- }, []);
2178
- (0, import_react34.useEffect)(() => {
2179
- window.addEventListener("resize", handleResize);
2180
- return () => window.removeEventListener("resize", handleResize);
2181
- }, [
2182
- handleResize
2183
- ]);
2184
- return /* @__PURE__ */ import_react34.default.createElement(MainProvider, {
2185
- ...props,
2186
- navigationSidebarState,
2187
- setNavigationSidebarState,
2188
- complementarySidebarState,
2189
- setComplementarySidebarState,
2190
- resizing
2191
- }, children);
2192
- };
2193
- MainRoot.displayName = MAIN_ROOT_NAME;
2194
- var handleOpenAutoFocus = (event) => {
2195
- !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
2196
- };
2197
- var MainSidebar = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
2198
- const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
2199
- ssr: false
2200
- });
2201
- const { tx } = useThemeContext();
2202
- const { t } = useTranslation();
2203
- const ref = (0, import_react_hooks4.useForwardedRef)(forwardedRef);
2204
- const noopRef = (0, import_react34.useRef)(null);
2205
- useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
2206
- onDismiss: () => onStateChange?.("closed")
2207
- });
2208
- const handleKeyDown = (0, import_react34.useCallback)((event) => {
2209
- if (event.key === "Escape") {
2210
- event.target.closest("[data-tabster]")?.focus();
2211
- }
2212
- props.onKeyDown?.(event);
2213
- }, [
2214
- props.onKeyDown
2215
- ]);
2216
- const Root7 = isLg ? import_react_primitive8.Primitive.div : import_react_dialog2.DialogContent;
2217
- return /* @__PURE__ */ import_react34.default.createElement(import_react_dialog2.Root, {
2218
- open: state !== "closed",
2219
- "aria-label": toLocalizedString(label, t),
2220
- modal: false
2221
- }, !isLg && /* @__PURE__ */ import_react34.default.createElement(import_react_dialog2.DialogTitle, {
2222
- className: "sr-only"
2223
- }, toLocalizedString(label, t)), /* @__PURE__ */ import_react34.default.createElement(Root7, {
2224
- ...!isLg && {
2225
- forceMount: true,
2226
- tabIndex: -1,
2227
- onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
2228
- },
2229
- ...props,
2230
- "data-side": side === "inline-end" ? "ie" : "is",
2231
- "data-state": state,
2232
- "data-resizing": resizing ? "true" : "false",
2233
- className: tx("main.sidebar", "main__sidebar", {}, classNames),
2234
- onKeyDown: handleKeyDown,
2235
- ...state === "closed" && {
2236
- inert: "true"
2237
- },
2238
- ref
2239
- }, children));
2240
- });
2241
- var MainNavigationSidebar = /* @__PURE__ */ (0, import_react34.forwardRef)((props, forwardedRef) => {
2242
- const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
2243
- const mover = useLandmarkMover(props.onKeyDown, "0");
2244
- return /* @__PURE__ */ import_react34.default.createElement(MainSidebar, {
2245
- ...mover,
2246
- ...props,
2247
- state: navigationSidebarState,
2248
- onStateChange: setNavigationSidebarState,
2249
- resizing,
2250
- side: "inline-start",
2251
- ref: forwardedRef
2252
- });
2253
- });
2254
- MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
2255
- var MainComplementarySidebar = /* @__PURE__ */ (0, import_react34.forwardRef)((props, forwardedRef) => {
2256
- const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
2257
- const mover = useLandmarkMover(props.onKeyDown, "2");
2258
- return /* @__PURE__ */ import_react34.default.createElement(MainSidebar, {
2259
- ...mover,
2260
- ...props,
2261
- state: complementarySidebarState,
2262
- onStateChange: setComplementarySidebarState,
2263
- resizing,
2264
- side: "inline-end",
2265
- ref: forwardedRef
2266
- });
2267
- });
2268
- MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
2269
- var MainContent = /* @__PURE__ */ (0, import_react34.forwardRef)(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
2270
- const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
2271
- const { tx } = useThemeContext();
2272
- const Root7 = asChild ? import_react_slot9.Slot : role ? "div" : "main";
2273
- const mover = useLandmarkMover(props.onKeyDown, "1");
2274
- return /* @__PURE__ */ import_react34.default.createElement(Root7, {
2275
- role,
2276
- ...handlesFocus && {
2277
- ...mover
2278
- },
2279
- ...props,
2280
- "data-sidebar-inline-start-state": navigationSidebarState,
2281
- "data-sidebar-inline-end-state": complementarySidebarState,
2282
- className: tx("main.content", "main", {
2283
- bounce,
2284
- handlesFocus
2285
- }, classNames),
2286
- ref: forwardedRef
2287
- }, children);
2288
- });
2289
- MainContent.displayName = MAIN_NAME;
2290
- var MainOverlay = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2291
- const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
2292
- ssr: false
2293
- });
2294
- const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
2295
- const { tx } = useThemeContext();
2296
- return /* @__PURE__ */ import_react34.default.createElement("div", {
2297
- onClick: () => {
2298
- setNavigationSidebarState("collapsed");
2299
- setComplementarySidebarState("collapsed");
2300
- },
2301
- ...props,
2302
- className: tx("main.overlay", "main__overlay", {
2303
- isLg,
2304
- inlineStartSidebarOpen: navigationSidebarState,
2305
- inlineEndSidebarOpen: complementarySidebarState
2306
- }, classNames),
2307
- "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
2308
- "aria-hidden": "true",
2309
- ref: forwardedRef
2310
- });
2311
- });
2312
- var Main = {
2313
- Root: MainRoot,
2314
- Content: MainContent,
2315
- Overlay: MainOverlay,
2316
- NavigationSidebar: MainNavigationSidebar,
2317
- ComplementarySidebar: MainComplementarySidebar
2318
- };
2319
- var propIsNumber = (prop) => Number.isFinite(prop);
2320
- var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
2321
- var safePadding = (propsPadding, safePadding2, side) => {
2322
- return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
2323
- };
2324
- var useSafeCollisionPadding = (collisionPadding) => {
2325
- const { safeAreaPadding } = useThemeContext();
2326
- return (0, import_react37.useMemo)(() => ({
2327
- top: safePadding(collisionPadding, safeAreaPadding, "top"),
2328
- right: safePadding(collisionPadding, safeAreaPadding, "right"),
2329
- bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
2330
- left: safePadding(collisionPadding, safeAreaPadding, "left")
2331
- }), [
2332
- collisionPadding,
2333
- safeAreaPadding
2334
- ]);
2335
- };
2336
- var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
2337
- var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
2338
- var ContextMenuPortal = ContextMenuPrimitive.Portal;
2339
- var ContextMenuContent = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
2340
- const { tx } = useThemeContext();
2341
- const elevation = useElevationContext();
2342
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
2343
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Content, {
2344
- ...props,
2345
- collisionPadding: safeCollisionPadding,
2346
- className: tx("menu.content", "menu", {
2347
- elevation
2348
- }, classNames),
2349
- ref: forwardedRef
2350
- }, children);
2351
- });
2352
- var ContextMenuViewport = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
2353
- const { tx } = useThemeContext();
2354
- const Root7 = asChild ? import_react_slot10.Slot : import_react_primitive9.Primitive.div;
2355
- return /* @__PURE__ */ import_react36.default.createElement(Root7, {
2356
- ...props,
2357
- className: tx("menu.viewport", "menu__viewport", {}, classNames),
2358
- ref: forwardedRef
2359
- }, children);
2360
- });
2361
- var ContextMenuArrow = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2362
- const { tx } = useThemeContext();
2363
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Arrow, {
2364
- ...props,
2365
- className: tx("menu.arrow", "menu__arrow", {}, classNames),
2366
- ref: forwardedRef
2367
- });
2368
- });
2369
- var ContextMenuGroup = ContextMenuPrimitive.Group;
2370
- var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
2371
- var ContextMenuItem = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2372
- const { tx } = useThemeContext();
2373
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Item, {
2374
- ...props,
2375
- className: tx("menu.item", "menu__item", {}, classNames),
2376
- ref: forwardedRef
2377
- });
2378
- });
2379
- var ContextMenuCheckboxItem = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2380
- const { tx } = useThemeContext();
2381
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.CheckboxItem, {
2382
- ...props,
2383
- className: tx("menu.item", "menu__item--checkbox", {}, classNames),
2384
- ref: forwardedRef
2385
- });
2386
- });
2387
- var ContextMenuSeparator = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2388
- const { tx } = useThemeContext();
2389
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Separator, {
2390
- ...props,
2391
- className: tx("menu.separator", "menu__item", {}, classNames),
2392
- ref: forwardedRef
2393
- });
2394
- });
2395
- var ContextMenuGroupLabel = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2396
- const { tx } = useThemeContext();
2397
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Label, {
2398
- ...props,
2399
- className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
2400
- ref: forwardedRef
2401
- });
2402
- });
2403
- var ContextMenu2 = {
2404
- Root: ContextMenuRoot,
2405
- Trigger: ContextMenuTrigger,
2406
- Portal: ContextMenuPortal,
2407
- Content: ContextMenuContent,
2408
- Viewport: ContextMenuViewport,
2409
- Arrow: ContextMenuArrow,
2410
- Group: ContextMenuGroup,
2411
- Item: ContextMenuItem,
2412
- CheckboxItem: ContextMenuCheckboxItem,
2413
- ItemIndicator: ContextMenuItemIndicator,
2414
- Separator: ContextMenuSeparator,
2415
- GroupLabel: ContextMenuGroupLabel
2416
- };
2417
- var DROPDOWN_MENU_NAME = "DropdownMenu";
2418
- var [createDropdownMenuContext, createDropdownMenuScope] = (0, import_react_context8.createContextScope)(DROPDOWN_MENU_NAME, [
2419
- import_react_menu.createMenuScope
2420
- ]);
2421
- var useMenuScope = (0, import_react_menu.createMenuScope)();
2422
- var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
2423
- var DropdownMenuRoot = (props) => {
2424
- const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
2425
- const menuScope = useMenuScope(__scopeDropdownMenu);
2426
- const triggerRef = (0, import_react38.useRef)(null);
2427
- const [open = false, setOpen] = (0, import_react_use_controllable_state5.useControllableState)({
2428
- prop: openProp,
2429
- defaultProp: defaultOpen,
2430
- onChange: onOpenChange
2431
- });
2432
- return /* @__PURE__ */ import_react38.default.createElement(DropdownMenuProvider, {
2433
- scope: __scopeDropdownMenu,
2434
- triggerId: (0, import_react_id2.useId)(),
2435
- triggerRef,
2436
- contentId: (0, import_react_id2.useId)(),
2437
- open,
2438
- onOpenChange: setOpen,
2439
- onOpenToggle: (0, import_react38.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
2440
- setOpen
2441
- ]),
2442
- modal
2443
- }, /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Root, {
2444
- ...menuScope,
2445
- open,
2446
- onOpenChange: setOpen,
2447
- dir,
2448
- modal
2449
- }, children));
2450
- };
2451
- DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
2452
- var TRIGGER_NAME2 = "DropdownMenuTrigger";
2453
- var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2454
- const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
2455
- const context = useDropdownMenuContext(TRIGGER_NAME2, __scopeDropdownMenu);
2456
- const menuScope = useMenuScope(__scopeDropdownMenu);
2457
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Anchor, {
2458
- asChild: true,
2459
- ...menuScope
2460
- }, /* @__PURE__ */ import_react38.default.createElement(import_react_primitive10.Primitive.button, {
2461
- type: "button",
2462
- id: context.triggerId,
2463
- "aria-haspopup": "menu",
2464
- "aria-expanded": context.open,
2465
- "aria-controls": context.open ? context.contentId : void 0,
2466
- "data-state": context.open ? "open" : "closed",
2467
- "data-disabled": disabled ? "" : void 0,
2468
- disabled,
2469
- ...triggerProps,
2470
- ref: (0, import_react_compose_refs2.composeRefs)(forwardedRef, context.triggerRef),
2471
- onPointerDown: (0, import_primitive2.composeEventHandlers)(props.onPointerDown, (event) => {
2472
- if (!disabled && event.button === 0 && event.ctrlKey === false) {
2473
- context.onOpenToggle();
2474
- if (!context.open) {
2475
- event.preventDefault();
2476
- }
2477
- }
2478
- }),
2479
- onKeyDown: (0, import_primitive2.composeEventHandlers)(props.onKeyDown, (event) => {
2480
- if (disabled) {
2481
- return;
2482
- }
2483
- if ([
2484
- "Enter",
2485
- " "
2486
- ].includes(event.key)) {
2487
- context.onOpenToggle();
2488
- }
2489
- if (event.key === "ArrowDown") {
2490
- context.onOpenChange(true);
2491
- }
2492
- if ([
2493
- "Enter",
2494
- " ",
2495
- "ArrowDown"
2496
- ].includes(event.key)) {
2497
- event.preventDefault();
2498
- }
2499
- })
2500
- }));
2501
- });
2502
- DropdownMenuTrigger.displayName = TRIGGER_NAME2;
2503
- var VIRTUAL_TRIGGER_NAME = "DropdownMenuVirtualTrigger";
2504
- var DropdownMenuVirtualTrigger = (props) => {
2505
- const { __scopeDropdownMenu, virtualRef } = props;
2506
- const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
2507
- const menuScope = useMenuScope(__scopeDropdownMenu);
2508
- (0, import_react38.useEffect)(() => {
2509
- if (virtualRef.current) {
2510
- context.triggerRef.current = virtualRef.current;
2511
- }
2512
- });
2513
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Anchor, {
2514
- ...menuScope,
2515
- virtualRef
2516
- });
2517
- };
2518
- DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
2519
- var PORTAL_NAME2 = "DropdownMenuPortal";
2520
- var DropdownMenuPortal = (props) => {
2521
- const { __scopeDropdownMenu, ...portalProps } = props;
2522
- const menuScope = useMenuScope(__scopeDropdownMenu);
2523
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Portal, {
2524
- ...menuScope,
2525
- ...portalProps
2526
- });
2527
- };
2528
- DropdownMenuPortal.displayName = PORTAL_NAME2;
2529
- var DropdownMenuViewport = /* @__PURE__ */ (0, import_react38.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
2530
- const { tx } = useThemeContext();
2531
- const Root7 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.div;
2532
- return /* @__PURE__ */ import_react38.default.createElement(Root7, {
2533
- ...props,
2534
- className: tx("menu.viewport", "menu__viewport", {}, classNames),
2535
- ref: forwardedRef
2536
- }, children);
2537
- });
2538
- var CONTENT_NAME2 = "DropdownMenuContent";
2539
- var DropdownMenuContent = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2540
- const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
2541
- const { tx } = useThemeContext();
2542
- const context = useDropdownMenuContext(CONTENT_NAME2, __scopeDropdownMenu);
2543
- const elevation = useElevationContext();
2544
- const menuScope = useMenuScope(__scopeDropdownMenu);
2545
- const hasInteractedOutsideRef = (0, import_react38.useRef)(false);
2546
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
2547
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Content, {
2548
- id: context.contentId,
2549
- "aria-labelledby": context.triggerId,
2550
- ...menuScope,
2551
- ...contentProps,
2552
- collisionPadding: safeCollisionPadding,
2553
- ref: forwardedRef,
2554
- onCloseAutoFocus: (0, import_primitive2.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
2555
- if (!hasInteractedOutsideRef.current) {
2556
- context.triggerRef.current?.focus();
2557
- }
2558
- hasInteractedOutsideRef.current = false;
2559
- event.preventDefault();
2560
- }),
2561
- onInteractOutside: (0, import_primitive2.composeEventHandlers)(props.onInteractOutside, (event) => {
2562
- const originalEvent = event.detail.originalEvent;
2563
- const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
2564
- const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
2565
- if (!context.modal || isRightClick) {
2566
- hasInteractedOutsideRef.current = true;
2567
- }
2568
- }),
2569
- className: tx("menu.content", "menu", {
2570
- elevation
2571
- }, classNames),
2572
- style: {
2573
- ...props.style,
2574
- // re-namespace exposed content custom properties
2575
- ...{
2576
- "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
2577
- "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
2578
- "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
2579
- "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
2580
- "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
2581
- }
2582
- }
2583
- });
2584
- });
2585
- DropdownMenuContent.displayName = CONTENT_NAME2;
2586
- var GROUP_NAME = "DropdownMenuGroup";
2587
- var DropdownMenuGroup = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2588
- const { __scopeDropdownMenu, ...groupProps } = props;
2589
- const menuScope = useMenuScope(__scopeDropdownMenu);
2590
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Group, {
2591
- ...menuScope,
2592
- ...groupProps,
2593
- ref: forwardedRef
2594
- });
2595
- });
2596
- DropdownMenuGroup.displayName = GROUP_NAME;
2597
- var LABEL_NAME = "DropdownMenuLabel";
2598
- var DropdownMenuGroupLabel = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2599
- const { __scopeDropdownMenu, classNames, ...labelProps } = props;
2600
- const menuScope = useMenuScope(__scopeDropdownMenu);
2601
- const { tx } = useThemeContext();
2602
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Label, {
2603
- ...menuScope,
2604
- ...labelProps,
2605
- className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
2606
- ref: forwardedRef
2607
- });
2608
- });
2609
- DropdownMenuGroupLabel.displayName = LABEL_NAME;
2610
- var ITEM_NAME = "DropdownMenuItem";
2611
- var DropdownMenuItem = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2612
- const { __scopeDropdownMenu, classNames, ...itemProps } = props;
2613
- const menuScope = useMenuScope(__scopeDropdownMenu);
2614
- const { tx } = useThemeContext();
2615
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Item, {
2616
- ...menuScope,
2617
- ...itemProps,
2618
- className: tx("menu.item", "menu__item", {}, classNames),
2619
- ref: forwardedRef
2620
- });
2621
- });
2622
- DropdownMenuItem.displayName = ITEM_NAME;
2623
- var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
2624
- var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2625
- const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
2626
- const menuScope = useMenuScope(__scopeDropdownMenu);
2627
- const { tx } = useThemeContext();
2628
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.CheckboxItem, {
2629
- ...menuScope,
2630
- ...checkboxItemProps,
2631
- className: tx("menu.item", "menu__item--checkbox", {}, classNames),
2632
- ref: forwardedRef
2633
- });
2634
- });
2635
- DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
2636
- var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
2637
- var DropdownMenuRadioGroup = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2638
- const { __scopeDropdownMenu, ...radioGroupProps } = props;
2639
- const menuScope = useMenuScope(__scopeDropdownMenu);
2640
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.RadioGroup, {
2641
- ...menuScope,
2642
- ...radioGroupProps,
2643
- ref: forwardedRef
2644
- });
2645
- });
2646
- DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
2647
- var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
2648
- var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2649
- const { __scopeDropdownMenu, ...radioItemProps } = props;
2650
- const menuScope = useMenuScope(__scopeDropdownMenu);
2651
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.RadioItem, {
2652
- ...menuScope,
2653
- ...radioItemProps,
2654
- ref: forwardedRef
2655
- });
2656
- });
2657
- DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
2658
- var INDICATOR_NAME = "DropdownMenuItemIndicator";
2659
- var DropdownMenuItemIndicator = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2660
- const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
2661
- const menuScope = useMenuScope(__scopeDropdownMenu);
2662
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.ItemIndicator, {
2663
- ...menuScope,
2664
- ...itemIndicatorProps,
2665
- ref: forwardedRef
2666
- });
2667
- });
2668
- DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
2669
- var SEPARATOR_NAME = "DropdownMenuSeparator";
2670
- var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2671
- const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
2672
- const menuScope = useMenuScope(__scopeDropdownMenu);
2673
- const { tx } = useThemeContext();
2674
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Separator, {
2675
- ...menuScope,
2676
- ...separatorProps,
2677
- className: tx("menu.separator", "menu__item", {}, classNames),
2678
- ref: forwardedRef
2679
- });
2680
- });
2681
- DropdownMenuSeparator.displayName = SEPARATOR_NAME;
2682
- var ARROW_NAME2 = "DropdownMenuArrow";
2683
- var DropdownMenuArrow = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2684
- const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
2685
- const menuScope = useMenuScope(__scopeDropdownMenu);
2686
- const { tx } = useThemeContext();
2687
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Arrow, {
2688
- ...menuScope,
2689
- ...arrowProps,
2690
- className: tx("menu.arrow", "menu__arrow", {}, classNames),
2691
- ref: forwardedRef
2692
- });
2693
- });
2694
- DropdownMenuArrow.displayName = ARROW_NAME2;
2695
- var DropdownMenuSub = (props) => {
2696
- const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
2697
- const menuScope = useMenuScope(__scopeDropdownMenu);
2698
- const [open = false, setOpen] = (0, import_react_use_controllable_state5.useControllableState)({
2699
- prop: openProp,
2700
- defaultProp: defaultOpen,
2701
- onChange: onOpenChange
2702
- });
2703
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Sub, {
2704
- ...menuScope,
2705
- open,
2706
- onOpenChange: setOpen
2707
- }, children);
2708
- };
2709
- var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
2710
- var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2711
- const { __scopeDropdownMenu, ...subTriggerProps } = props;
2712
- const menuScope = useMenuScope(__scopeDropdownMenu);
2713
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.SubTrigger, {
2714
- ...menuScope,
2715
- ...subTriggerProps,
2716
- ref: forwardedRef
2717
- });
2718
- });
2719
- DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
2720
- var SUB_CONTENT_NAME = "DropdownMenuSubContent";
2721
- var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2722
- const { __scopeDropdownMenu, ...subContentProps } = props;
2723
- const menuScope = useMenuScope(__scopeDropdownMenu);
2724
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.SubContent, {
2725
- ...menuScope,
2726
- ...subContentProps,
2727
- ref: forwardedRef,
2728
- style: {
2729
- ...props.style,
2730
- // re-namespace exposed content custom properties
2731
- ...{
2732
- "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
2733
- "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
2734
- "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
2735
- "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
2736
- "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
2737
- }
2738
- }
2739
- });
2740
- });
2741
- DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
2742
- var DropdownMenu = {
2743
- Root: DropdownMenuRoot,
2744
- Trigger: DropdownMenuTrigger,
2745
- VirtualTrigger: DropdownMenuVirtualTrigger,
2746
- Portal: DropdownMenuPortal,
2747
- Content: DropdownMenuContent,
2748
- Viewport: DropdownMenuViewport,
2749
- Group: DropdownMenuGroup,
2750
- GroupLabel: DropdownMenuGroupLabel,
2751
- Item: DropdownMenuItem,
2752
- CheckboxItem: DropdownMenuCheckboxItem,
2753
- RadioGroup: DropdownMenuRadioGroup,
2754
- RadioItem: DropdownMenuRadioItem,
2755
- ItemIndicator: DropdownMenuItemIndicator,
2756
- Separator: DropdownMenuSeparator,
2757
- Arrow: DropdownMenuArrow,
2758
- Sub: DropdownMenuSub,
2759
- SubTrigger: DropdownMenuSubTrigger,
2760
- SubContent: DropdownMenuSubContent
2761
- };
2762
- var useDropdownMenuMenuScope = useMenuScope;
2763
- var MESSAGE_NAME = "Message";
2764
- var [MessageProvider, useMessageContext] = (0, import_react_context9.createContext)(MESSAGE_NAME);
2765
- var MessageRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
2766
- const { tx } = useThemeContext();
2767
- const titleId = (0, import_react_hooks5.useId)("message__title", propsTitleId);
2768
- const descriptionId = (0, import_react_hooks5.useId)("message__description", propsDescriptionId);
2769
- const elevation = useElevationContext(propsElevation);
2770
- const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.div;
2771
- return /* @__PURE__ */ import_react39.default.createElement(MessageProvider, {
2772
- titleId,
2773
- descriptionId
2774
- }, /* @__PURE__ */ import_react39.default.createElement(Root7, {
2775
- ...props,
2776
- className: tx("message.root", "message", {
2777
- valence,
2778
- elevation
2779
- }, className),
2780
- "aria-labelledby": titleId,
2781
- "aria-describedby": descriptionId,
2782
- ref: forwardedRef
2783
- }, children));
2784
- });
2785
- MessageRoot.displayName = MESSAGE_NAME;
2786
- var MESSAGE_TITLE_NAME = "MessageTitle";
2787
- var MessageTitle = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, className, children, ...props }, forwardedRef) => {
2788
- const { tx } = useThemeContext();
2789
- const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
2790
- const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.h2;
2791
- return /* @__PURE__ */ import_react39.default.createElement(Root7, {
2792
- ...props,
2793
- className: tx("message.title", "message__title", {}, className),
2794
- id: titleId,
2795
- ref: forwardedRef
2796
- }, children);
2797
- });
2798
- MessageTitle.displayName = MESSAGE_TITLE_NAME;
2799
- var MESSAGE_BODY_NAME = "MessageBody";
2800
- var MessageBody = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, className, children, ...props }, forwardedRef) => {
2801
- const { tx } = useThemeContext();
2802
- const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
2803
- const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.p;
2804
- return /* @__PURE__ */ import_react39.default.createElement(Root7, {
2805
- ...props,
2806
- className: tx("message.body", "message__body", {}, className),
2807
- id: descriptionId,
2808
- ref: forwardedRef
2809
- }, children);
2810
- });
2811
- MessageBody.displayName = MESSAGE_BODY_NAME;
2812
- var Message = {
2813
- Root: MessageRoot,
2814
- Title: MessageTitle,
2815
- Body: MessageBody
2816
- };
2817
- var POPOVER_NAME = "Popover";
2818
- var [createPopoverContext, createPopoverScope] = (0, import_react_context10.createContextScope)(POPOVER_NAME, [
2819
- import_react_popper2.createPopperScope
2820
- ]);
2821
- var usePopperScope2 = (0, import_react_popper2.createPopperScope)();
2822
- var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
2823
- var PopoverRoot = (props) => {
2824
- const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
2825
- const popperScope = usePopperScope2(__scopePopover);
2826
- const triggerRef = (0, import_react40.useRef)(null);
2827
- const [hasCustomAnchor, setHasCustomAnchor] = (0, import_react40.useState)(false);
2828
- const [open = false, setOpen] = (0, import_react_use_controllable_state6.useControllableState)({
2829
- prop: openProp,
2830
- defaultProp: defaultOpen,
2831
- onChange: onOpenChange
2832
- });
2833
- return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Root, popperScope, /* @__PURE__ */ import_react40.default.createElement(PopoverProvider, {
2834
- scope: __scopePopover,
2835
- contentId: (0, import_react_id3.useId)(),
2836
- triggerRef,
2837
- open,
2838
- onOpenChange: setOpen,
2839
- onOpenToggle: (0, import_react40.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
2840
- setOpen
2841
- ]),
2842
- hasCustomAnchor,
2843
- onCustomAnchorAdd: (0, import_react40.useCallback)(() => setHasCustomAnchor(true), []),
2844
- onCustomAnchorRemove: (0, import_react40.useCallback)(() => setHasCustomAnchor(false), []),
2845
- modal
2846
- }, children));
2847
- };
2848
- PopoverRoot.displayName = POPOVER_NAME;
2849
- var ANCHOR_NAME = "PopoverAnchor";
2850
- var PopoverAnchor = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
2851
- const { __scopePopover, ...anchorProps } = props;
2852
- const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
2853
- const popperScope = usePopperScope2(__scopePopover);
2854
- const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
2855
- (0, import_react40.useEffect)(() => {
2856
- onCustomAnchorAdd();
2857
- return () => onCustomAnchorRemove();
2858
- }, [
2859
- onCustomAnchorAdd,
2860
- onCustomAnchorRemove
2861
- ]);
2862
- return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Anchor, {
2863
- ...popperScope,
2864
- ...anchorProps,
2865
- ref: forwardedRef
2866
- });
2867
- });
2868
- PopoverAnchor.displayName = ANCHOR_NAME;
2869
- var TRIGGER_NAME3 = "PopoverTrigger";
2870
- var PopoverTrigger = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
2871
- const { __scopePopover, ...triggerProps } = props;
2872
- const context = usePopoverContext(TRIGGER_NAME3, __scopePopover);
2873
- const popperScope = usePopperScope2(__scopePopover);
2874
- const composedTriggerRef = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, context.triggerRef);
2875
- const trigger = /* @__PURE__ */ import_react40.default.createElement(import_react_primitive12.Primitive.button, {
2876
- type: "button",
2877
- "aria-haspopup": "dialog",
2878
- "aria-expanded": context.open,
2879
- "aria-controls": context.contentId,
2880
- "data-state": getState(context.open),
2881
- ...triggerProps,
2882
- ref: composedTriggerRef,
2883
- onClick: (0, import_primitive3.composeEventHandlers)(props.onClick, context.onOpenToggle)
2884
- });
2885
- return context.hasCustomAnchor ? trigger : /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Anchor, {
2886
- asChild: true,
2887
- ...popperScope
2888
- }, trigger);
2889
- });
2890
- PopoverTrigger.displayName = TRIGGER_NAME3;
2891
- var VIRTUAL_TRIGGER_NAME2 = "PopoverVirtualTrigger";
2892
- var PopoverVirtualTrigger = (props) => {
2893
- const { __scopePopover, virtualRef } = props;
2894
- const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
2895
- const popperScope = usePopperScope2(__scopePopover);
2896
- (0, import_react40.useEffect)(() => {
2897
- if (virtualRef.current) {
2898
- context.triggerRef.current = virtualRef.current;
2899
- }
2900
- });
2901
- return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Anchor, {
2902
- ...popperScope,
2903
- virtualRef
2904
- });
2905
- };
2906
- PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME2;
2907
- var PORTAL_NAME3 = "PopoverPortal";
2908
- var [PortalProvider2, usePortalContext2] = createPopoverContext(PORTAL_NAME3, {
2909
- forceMount: void 0
2910
- });
2911
- var PopoverPortal = (props) => {
2912
- const { __scopePopover, forceMount, children, container } = props;
2913
- const context = usePopoverContext(PORTAL_NAME3, __scopePopover);
2914
- return /* @__PURE__ */ import_react40.default.createElement(PortalProvider2, {
2915
- scope: __scopePopover,
2916
- forceMount
2917
- }, /* @__PURE__ */ import_react40.default.createElement(import_react_presence2.Presence, {
2918
- present: forceMount || context.open
2919
- }, /* @__PURE__ */ import_react40.default.createElement(import_react_portal2.Portal, {
2920
- asChild: true,
2921
- container
2922
- }, children)));
2923
- };
2924
- PopoverPortal.displayName = PORTAL_NAME3;
2925
- var CONTENT_NAME3 = "PopoverContent";
2926
- var PopoverContent = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
2927
- const portalContext = usePortalContext2(CONTENT_NAME3, props.__scopePopover);
2928
- const { forceMount = portalContext.forceMount, ...contentProps } = props;
2929
- const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
2930
- return /* @__PURE__ */ import_react40.default.createElement(import_react_presence2.Presence, {
2931
- present: forceMount || context.open
2932
- }, context.modal ? /* @__PURE__ */ import_react40.default.createElement(PopoverContentModal, {
2933
- ...contentProps,
2934
- ref: forwardedRef
2935
- }) : /* @__PURE__ */ import_react40.default.createElement(PopoverContentNonModal, {
2936
- ...contentProps,
2937
- ref: forwardedRef
2938
- }));
2939
- });
2940
- PopoverContent.displayName = CONTENT_NAME3;
2941
- var PopoverContentModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
2942
- const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
2943
- const contentRef = (0, import_react40.useRef)(null);
2944
- const composedRefs = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, contentRef);
2945
- const isRightClickOutsideRef = (0, import_react40.useRef)(false);
2946
- (0, import_react40.useEffect)(() => {
2947
- const content = contentRef.current;
2948
- if (content) {
2949
- return (0, import_aria_hidden.hideOthers)(content);
2950
- }
2951
- }, []);
2952
- return /* @__PURE__ */ import_react40.default.createElement(import_react_remove_scroll.RemoveScroll, {
2953
- as: import_react_slot13.Slot,
2954
- allowPinchZoom: true
2955
- }, /* @__PURE__ */ import_react40.default.createElement(PopoverContentImpl, {
2956
- ...props,
2957
- ref: composedRefs,
2958
- // we make sure we're not trapping once it's been closed
2959
- // (closed !== unmounted when animating out)
2960
- trapFocus: context.open,
2961
- disableOutsidePointerEvents: true,
2962
- onCloseAutoFocus: (0, import_primitive3.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
2963
- event.preventDefault();
2964
- if (!isRightClickOutsideRef.current) {
2965
- context.triggerRef.current?.focus();
2966
- }
2967
- }),
2968
- onPointerDownOutside: (0, import_primitive3.composeEventHandlers)(props.onPointerDownOutside, (event) => {
2969
- const originalEvent = event.detail.originalEvent;
2970
- const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
2971
- const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
2972
- isRightClickOutsideRef.current = isRightClick;
2973
- }, {
2974
- checkForDefaultPrevented: false
2975
- }),
2976
- // When focus is trapped, a `focusout` event may still happen.
2977
- // We make sure we don't trigger our `onDismiss` in such case.
2978
- onFocusOutside: (0, import_primitive3.composeEventHandlers)(props.onFocusOutside, (event) => event.preventDefault(), {
2979
- checkForDefaultPrevented: false
2980
- })
2981
- }));
2982
- });
2983
- var PopoverContentNonModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
2984
- const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
2985
- const hasInteractedOutsideRef = (0, import_react40.useRef)(false);
2986
- const hasPointerDownOutsideRef = (0, import_react40.useRef)(false);
2987
- return /* @__PURE__ */ import_react40.default.createElement(PopoverContentImpl, {
2988
- ...props,
2989
- ref: forwardedRef,
2990
- trapFocus: false,
2991
- disableOutsidePointerEvents: false,
2992
- onCloseAutoFocus: (event) => {
2993
- props.onCloseAutoFocus?.(event);
2994
- if (!event.defaultPrevented) {
2995
- if (!hasInteractedOutsideRef.current) {
2996
- context.triggerRef.current?.focus();
2997
- }
2998
- event.preventDefault();
2999
- }
3000
- hasInteractedOutsideRef.current = false;
3001
- hasPointerDownOutsideRef.current = false;
3002
- },
3003
- onInteractOutside: (event) => {
3004
- props.onInteractOutside?.(event);
3005
- if (!event.defaultPrevented) {
3006
- hasInteractedOutsideRef.current = true;
3007
- if (event.detail.originalEvent.type === "pointerdown") {
3008
- hasPointerDownOutsideRef.current = true;
3009
- }
3010
- }
3011
- const target = event.target;
3012
- const targetIsTrigger = context.triggerRef.current?.contains(target);
3013
- if (targetIsTrigger) {
3014
- event.preventDefault();
3015
- }
3016
- if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
3017
- event.preventDefault();
3018
- }
3019
- }
3020
- });
3021
- });
3022
- var PopoverContentImpl = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3023
- const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, classNames, ...contentProps } = props;
3024
- const context = usePopoverContext(CONTENT_NAME3, __scopePopover);
3025
- const popperScope = usePopperScope2(__scopePopover);
3026
- const { tx } = useThemeContext();
3027
- const elevation = useElevationContext();
3028
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
3029
- (0, import_react_focus_guards.useFocusGuards)();
3030
- return /* @__PURE__ */ import_react40.default.createElement(import_react_focus_scope.FocusScope, {
3031
- asChild: true,
3032
- loop: true,
3033
- trapped: trapFocus,
3034
- onMountAutoFocus: onOpenAutoFocus,
3035
- onUnmountAutoFocus: onCloseAutoFocus
3036
- }, /* @__PURE__ */ import_react40.default.createElement(import_react_dismissable_layer2.DismissableLayer, {
3037
- asChild: true,
3038
- disableOutsidePointerEvents,
3039
- onInteractOutside,
3040
- onEscapeKeyDown,
3041
- onPointerDownOutside,
3042
- onFocusOutside,
3043
- onDismiss: () => context.onOpenChange(false)
3044
- }, /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Content, {
3045
- "data-state": getState(context.open),
3046
- role: "dialog",
3047
- id: context.contentId,
3048
- ...popperScope,
3049
- ...contentProps,
3050
- collisionPadding: safeCollisionPadding,
3051
- className: tx("popover.content", "popover", {
3052
- elevation
3053
- }, classNames),
3054
- ref: forwardedRef,
3055
- style: {
3056
- ...contentProps.style,
3057
- // re-namespace exposed content custom properties
3058
- ...{
3059
- "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
3060
- "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
3061
- "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
3062
- "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
3063
- "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
3064
- }
3065
- }
3066
- })));
3067
- });
3068
- var CLOSE_NAME = "PopoverClose";
3069
- var PopoverClose = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3070
- const { __scopePopover, ...closeProps } = props;
3071
- const context = usePopoverContext(CLOSE_NAME, __scopePopover);
3072
- return /* @__PURE__ */ import_react40.default.createElement(import_react_primitive12.Primitive.button, {
3073
- type: "button",
3074
- ...closeProps,
3075
- ref: forwardedRef,
3076
- onClick: (0, import_primitive3.composeEventHandlers)(props.onClick, () => context.onOpenChange(false))
3077
- });
3078
- });
3079
- PopoverClose.displayName = CLOSE_NAME;
3080
- var ARROW_NAME3 = "PopoverArrow";
3081
- var PopoverArrow = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3082
- const { __scopePopover, classNames, ...arrowProps } = props;
3083
- const popperScope = usePopperScope2(__scopePopover);
3084
- const { tx } = useThemeContext();
3085
- return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Arrow, {
3086
- ...popperScope,
3087
- ...arrowProps,
3088
- className: tx("popover.arrow", "popover__arrow", {}, classNames),
3089
- ref: forwardedRef
3090
- });
3091
- });
3092
- PopoverArrow.displayName = ARROW_NAME3;
3093
- var PopoverViewport = /* @__PURE__ */ (0, import_react40.forwardRef)(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
3094
- const { tx } = useThemeContext();
3095
- const Root7 = asChild ? import_react_slot13.Slot : import_react_primitive12.Primitive.div;
3096
- return /* @__PURE__ */ import_react40.default.createElement(Root7, {
3097
- ...props,
3098
- className: tx("popover.viewport", "popover__viewport", {
3099
- constrainInline,
3100
- constrainBlock
3101
- }, classNames),
3102
- ref: forwardedRef
3103
- }, children);
3104
- });
3105
- var getState = (open) => open ? "open" : "closed";
3106
- var Popover = {
3107
- Root: PopoverRoot,
3108
- Anchor: PopoverAnchor,
3109
- Trigger: PopoverTrigger,
3110
- VirtualTrigger: PopoverVirtualTrigger,
3111
- Portal: PopoverPortal,
3112
- Content: PopoverContent,
3113
- Close: PopoverClose,
3114
- Arrow: PopoverArrow,
3115
- Viewport: PopoverViewport
3116
- };
3117
- var Status = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
3118
- const { tx } = useThemeContext();
3119
- return /* @__PURE__ */ import_react41.default.createElement("span", {
3120
- role: "status",
3121
- ...props,
3122
- className: tx("status.root", "status", {
3123
- indeterminate,
3124
- variant
3125
- }, classNames),
3126
- ref: forwardedRef
3127
- }, /* @__PURE__ */ import_react41.default.createElement("span", {
3128
- role: "none",
3129
- className: tx("status.bar", "status__bar", {
3130
- indeterminate,
3131
- variant
3132
- }, classNames),
3133
- ...!indeterminate && {
3134
- style: {
3135
- width: `${Math.round(progress * 100)}%`
3136
- }
3137
- }
3138
- }), children);
3139
- });
3140
- var ScrollAreaRoot = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3141
- const { tx } = useThemeContext();
3142
- return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Root, {
3143
- ...props,
3144
- className: tx("scrollArea.root", "scroll-area", {}, classNames),
3145
- ref: forwardedRef
3146
- });
3147
- });
3148
- var ScrollAreaViewport = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3149
- const { tx } = useThemeContext();
3150
- return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Viewport, {
3151
- ...props,
3152
- className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
3153
- ref: forwardedRef
3154
- });
3155
- });
3156
- var ScrollAreaScrollbar = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, variant = "fine", ...props }, forwardedRef) => {
3157
- const { tx } = useThemeContext();
3158
- return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Scrollbar, {
3159
- "data-variant": variant,
3160
- ...props,
3161
- className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
3162
- ref: forwardedRef
3163
- });
3164
- });
3165
- var ScrollAreaThumb = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3166
- const { tx } = useThemeContext();
3167
- return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Thumb, {
3168
- ...props,
3169
- className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
3170
- ref: forwardedRef
3171
- });
3172
- });
3173
- var ScrollAreaCorner = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3174
- const { tx } = useThemeContext();
3175
- return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Corner, {
3176
- ...props,
3177
- className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
3178
- ref: forwardedRef
3179
- });
3180
- });
3181
- var ScrollArea = {
3182
- Root: ScrollAreaRoot,
3183
- Viewport: ScrollAreaViewport,
3184
- Scrollbar: ScrollAreaScrollbar,
3185
- Thumb: ScrollAreaThumb,
3186
- Corner: ScrollAreaCorner
3187
- };
3188
- var SelectRoot = SelectPrimitive.Root;
3189
- var SelectTrigger = SelectPrimitive.Trigger;
3190
- var SelectValue = SelectPrimitive.Value;
3191
- var SelectIcon = SelectPrimitive.Icon;
3192
- var SelectPortal = SelectPrimitive.Portal;
3193
- var SelectTriggerButton = /* @__PURE__ */ (0, import_react44.forwardRef)(({ children, placeholder, ...props }, forwardedRef) => {
3194
- const { tx } = useThemeContext();
3195
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Trigger, {
3196
- asChild: true,
3197
- ref: forwardedRef
3198
- }, /* @__PURE__ */ import_react44.default.createElement(Button, props, /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Value, {
3199
- placeholder
3200
- }, children), /* @__PURE__ */ import_react44.default.createElement("span", {
3201
- className: "w-1 flex-1"
3202
- }), /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Icon, {
3203
- asChild: true
3204
- }, /* @__PURE__ */ import_react44.default.createElement(import_react43.CaretDown, {
3205
- className: tx("select.triggerIcon", "select__trigger__icon", {}),
3206
- weight: "bold"
3207
- }))));
3208
- });
3209
- var SelectContent = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
3210
- const { tx } = useThemeContext();
3211
- const elevation = useElevationContext();
3212
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
3213
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Content, {
3214
- ...props,
3215
- collisionPadding: safeCollisionPadding,
3216
- className: tx("select.content", "select__content", {
3217
- elevation
3218
- }, classNames),
3219
- position: "popper",
3220
- ref: forwardedRef
3221
- }, children);
3222
- });
3223
- var SelectScrollUpButton2 = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
3224
- const { tx } = useThemeContext();
3225
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.SelectScrollUpButton, {
3226
- ...props,
3227
- className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
3228
- ref: forwardedRef
3229
- }, children ?? /* @__PURE__ */ import_react44.default.createElement(import_react43.CaretUp, {
3230
- weight: "bold"
3231
- }));
3232
- });
3233
- var SelectScrollDownButton2 = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
3234
- const { tx } = useThemeContext();
3235
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.SelectScrollDownButton, {
3236
- ...props,
3237
- className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
3238
- ref: forwardedRef
3239
- }, children ?? /* @__PURE__ */ import_react44.default.createElement(import_react43.CaretDown, {
3240
- weight: "bold"
3241
- }));
3242
- });
3243
- var SelectViewport2 = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
3244
- const { tx } = useThemeContext();
3245
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.SelectViewport, {
3246
- ...props,
3247
- className: tx("select.viewport", "select__viewport", {}, classNames),
3248
- ref: forwardedRef
3249
- }, children);
3250
- });
3251
- var SelectItem = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3252
- const { tx } = useThemeContext();
3253
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Item, {
3254
- ...props,
3255
- className: tx("select.item", "option", {}, classNames),
3256
- ref: forwardedRef
3257
- });
3258
- });
3259
- var SelectItemText = SelectPrimitive.ItemText;
3260
- var SelectItemIndicator = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
3261
- const { tx } = useThemeContext();
3262
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.ItemIndicator, {
3263
- ...props,
3264
- className: tx("select.itemIndicator", "option__indicator", {}, classNames),
3265
- ref: forwardedRef
3266
- }, children);
3267
- });
3268
- var SelectOption = /* @__PURE__ */ (0, import_react44.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
3269
- const { tx } = useThemeContext();
3270
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Item, {
3271
- ...props,
3272
- className: tx("select.item", "option", {}, classNames),
3273
- ref: forwardedRef
3274
- }, /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ import_react44.default.createElement("span", {
3275
- className: "grow w-1"
3276
- }), /* @__PURE__ */ import_react44.default.createElement(Icon, {
3277
- icon: "ph--check--regular"
3278
- }));
3279
- });
3280
- var SelectGroup = SelectPrimitive.Group;
3281
- var SelectLabel = SelectPrimitive.Label;
3282
- var SelectSeparator = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3283
- const { tx } = useThemeContext();
3284
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Separator, {
3285
- ...props,
3286
- className: tx("select.separator", "select__separator", {}, classNames),
3287
- ref: forwardedRef
3288
- });
3289
- });
3290
- var SelectArrow = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3291
- const { tx } = useThemeContext();
3292
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Arrow, {
3293
- ...props,
3294
- className: tx("select.arrow", "select__arrow", {}, classNames),
3295
- ref: forwardedRef
3296
- });
3297
- });
3298
- var Select = {
3299
- Root: SelectRoot,
3300
- Trigger: SelectTrigger,
3301
- TriggerButton: SelectTriggerButton,
3302
- Value: SelectValue,
3303
- Icon: SelectIcon,
3304
- Portal: SelectPortal,
3305
- Content: SelectContent,
3306
- ScrollUpButton: SelectScrollUpButton2,
3307
- ScrollDownButton: SelectScrollDownButton2,
3308
- Viewport: SelectViewport2,
3309
- Item: SelectItem,
3310
- ItemText: SelectItemText,
3311
- ItemIndicator: SelectItemIndicator,
3312
- Option: SelectOption,
3313
- Group: SelectGroup,
3314
- Label: SelectLabel,
3315
- Separator: SelectSeparator,
3316
- Arrow: SelectArrow
3317
- };
3318
- var Separator4 = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, orientation = "horizontal", ...props }, forwardedRef) => {
3319
- const { tx } = useThemeContext();
3320
- return /* @__PURE__ */ import_react45.default.createElement(import_react_separator.Separator, {
3321
- orientation,
3322
- ...props,
3323
- className: tx("separator.root", "separator", {
3324
- orientation
3325
- }, classNames),
3326
- ref: forwardedRef
3327
- });
3328
- });
3329
- var Tag = /* @__PURE__ */ (0, import_react46.forwardRef)(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
3330
- const { tx } = useThemeContext();
3331
- const Root7 = asChild ? import_react_slot14.Slot : import_react_primitive13.Primitive.span;
3332
- return /* @__PURE__ */ import_react46.default.createElement(Root7, {
3333
- ...props,
3334
- className: tx("tag.root", "dx-tag", {
3335
- palette
3336
- }, classNames),
3337
- "data-hue": palette,
3338
- ref: forwardedRef
3339
- });
3340
- });
3341
- var ToastProvider = import_react_toast.ToastProvider;
3342
- var ToastViewport = /* @__PURE__ */ (0, import_react47.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3343
- const { tx } = useThemeContext();
3344
- return /* @__PURE__ */ import_react47.default.createElement(import_react_toast.ToastViewport, {
3345
- className: tx("toast.viewport", "toast-viewport", {}, classNames),
3346
- ref: forwardedRef
3347
- });
3348
- });
3349
- var ToastRoot = /* @__PURE__ */ (0, import_react47.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
3350
- const { tx } = useThemeContext();
3351
- return /* @__PURE__ */ import_react47.default.createElement(import_react_toast.Root, {
3352
- ...props,
3353
- className: tx("toast.root", "toast", {}, classNames),
3354
- ref: forwardedRef
3355
- }, /* @__PURE__ */ import_react47.default.createElement(ElevationProvider, {
3356
- elevation: "toast"
3357
- }, children));
3358
- });
3359
- var ToastBody = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
3360
- const { tx } = useThemeContext();
3361
- const Root7 = asChild ? import_react_slot15.Slot : import_react_primitive14.Primitive.div;
3362
- return /* @__PURE__ */ import_react47.default.createElement(Root7, {
3363
- ...props,
3364
- className: tx("toast.body", "toast__body", {}, classNames),
3365
- ref: forwardedRef
3366
- });
3367
- });
3368
- var ToastTitle = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
3369
- const { tx } = useThemeContext();
3370
- const Root7 = asChild ? import_react_slot15.Slot : import_react_toast.ToastTitle;
3371
- return /* @__PURE__ */ import_react47.default.createElement(Root7, {
3372
- ...props,
3373
- className: tx("toast.title", "toast__title", {}, classNames),
3374
- ref: forwardedRef
3375
- });
3376
- });
3377
- var ToastDescription = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
3378
- const { tx } = useThemeContext();
3379
- const Root7 = asChild ? import_react_slot15.Slot : import_react_toast.ToastDescription;
3380
- return /* @__PURE__ */ import_react47.default.createElement(Root7, {
3381
- ...props,
3382
- className: tx("toast.description", "toast__description", {}, classNames),
3383
- ref: forwardedRef
3384
- });
3385
- });
3386
- var ToastActions = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
3387
- const { tx } = useThemeContext();
3388
- const Root7 = asChild ? import_react_slot15.Slot : import_react_primitive14.Primitive.div;
3389
- return /* @__PURE__ */ import_react47.default.createElement(Root7, {
3390
- ...props,
3391
- className: tx("toast.actions", "toast__actions", {}, classNames),
3392
- ref: forwardedRef
3393
- });
3394
- });
3395
- var ToastAction = import_react_toast.ToastAction;
3396
- var ToastClose = import_react_toast.ToastClose;
3397
- var Toast = {
3398
- Provider: ToastProvider,
3399
- Viewport: ToastViewport,
3400
- Root: ToastRoot,
3401
- Body: ToastBody,
3402
- Title: ToastTitle,
3403
- Description: ToastDescription,
3404
- Actions: ToastActions,
3405
- Action: ToastAction,
3406
- Close: ToastClose
3407
- };
3408
- var ToolbarRoot = /* @__PURE__ */ (0, import_react48.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
3409
- const { tx } = useThemeContext();
3410
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Root, {
3411
- ...props,
3412
- className: tx("toolbar.root", "toolbar", {}, classNames),
3413
- ref: forwardedRef
3414
- }, children);
3415
- });
3416
- var ToolbarButton = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
3417
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Button, {
3418
- asChild: true
3419
- }, /* @__PURE__ */ import_react48.default.createElement(Button, {
3420
- ...props,
3421
- ref: forwardedRef
3422
- }));
3423
- });
3424
- var ToolbarIconButton = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
3425
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Button, {
3426
- asChild: true
3427
- }, /* @__PURE__ */ import_react48.default.createElement(IconButton, {
3428
- ...props,
3429
- ref: forwardedRef
3430
- }));
3431
- });
3432
- var ToolbarToggle = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
3433
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Button, {
3434
- asChild: true
3435
- }, /* @__PURE__ */ import_react48.default.createElement(Toggle, {
3436
- ...props,
3437
- ref: forwardedRef
3438
- }));
3439
- });
3440
- var ToolbarLink = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
3441
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Link, {
3442
- asChild: true
3443
- }, /* @__PURE__ */ import_react48.default.createElement(Link, {
3444
- ...props,
3445
- ref: forwardedRef
3446
- }));
3447
- });
3448
- var ToolbarToggleGroup2 = /* @__PURE__ */ (0, import_react48.forwardRef)(({ classNames, children, elevation, ...props }, forwardedRef) => {
3449
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
3450
- ...props,
3451
- asChild: true
3452
- }, /* @__PURE__ */ import_react48.default.createElement(ButtonGroup, {
3453
- classNames,
3454
- children,
3455
- elevation,
3456
- ref: forwardedRef
3457
- }));
3458
- });
3459
- var ToolbarToggleGroupItem = /* @__PURE__ */ (0, import_react48.forwardRef)(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
3460
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.ToolbarToggleItem, {
3461
- ...props,
3462
- asChild: true
3463
- }, /* @__PURE__ */ import_react48.default.createElement(Button, {
3464
- variant,
3465
- density,
3466
- elevation,
3467
- classNames,
3468
- children,
3469
- ref: forwardedRef
3470
- }));
3471
- });
3472
- var ToolbarToggleGroupIconItem = /* @__PURE__ */ (0, import_react48.forwardRef)(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
3473
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.ToolbarToggleItem, {
3474
- ...props,
3475
- asChild: true
3476
- }, /* @__PURE__ */ import_react48.default.createElement(IconButton, {
3477
- variant,
3478
- density,
3479
- elevation,
3480
- classNames,
3481
- icon,
3482
- label,
3483
- iconOnly,
3484
- ref: forwardedRef
3485
- }));
3486
- });
3487
- var ToolbarSeparator = /* @__PURE__ */ (0, import_react48.forwardRef)(({ variant = "line", ...props }, forwardedRef) => {
3488
- return variant === "line" ? /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Separator, {
3489
- asChild: true
3490
- }, /* @__PURE__ */ import_react48.default.createElement(Separator4, {
3491
- ...props,
3492
- ref: forwardedRef
3493
- })) : /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Separator, {
3494
- className: "grow",
3495
- ref: forwardedRef
3496
- });
3497
- });
3498
- var Toolbar = {
3499
- Root: ToolbarRoot,
3500
- Button: ToolbarButton,
3501
- IconButton: ToolbarIconButton,
3502
- Link: ToolbarLink,
3503
- Toggle: ToolbarToggle,
3504
- ToggleGroup: ToolbarToggleGroup2,
3505
- ToggleGroupItem: ToolbarToggleGroupItem,
3506
- ToggleGroupIconItem: ToolbarToggleGroupIconItem,
3507
- Separator: ToolbarSeparator
3508
- };
3509
97
  // Annotate the CommonJS export names for ESM import in node:
3510
98
  0 && (module.exports = {
3511
99
  AlertDialog,