@dxos/react-ui-pickers 0.8.1-staging.9eaf14f → 0.8.2-main.10c050d

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 (20) hide show
  1. package/dist/lib/browser/index.mjs +241 -231
  2. package/dist/lib/browser/index.mjs.map +3 -3
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node/index.cjs +239 -229
  5. package/dist/lib/node/index.cjs.map +3 -3
  6. package/dist/lib/node/meta.json +1 -1
  7. package/dist/lib/node-esm/index.mjs +241 -231
  8. package/dist/lib/node-esm/index.mjs.map +3 -3
  9. package/dist/lib/node-esm/meta.json +1 -1
  10. package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts.map +1 -1
  11. package/dist/types/src/components/HuePicker/HuePicker.d.ts.map +1 -1
  12. package/dist/types/src/components/IconPicker/IconPicker.d.ts.map +1 -1
  13. package/dist/types/src/components/PickerButton/PickerButton.d.ts.map +1 -1
  14. package/dist/types/tsconfig.tsbuildinfo +1 -1
  15. package/package.json +10 -9
  16. package/src/components/EmojiPicker/EmojiPicker.stories.tsx +1 -1
  17. package/src/components/EmojiPicker/EmojiPicker.tsx +43 -73
  18. package/src/components/HuePicker/HuePicker.stories.tsx +1 -1
  19. package/src/components/IconPicker/IconPicker.stories.tsx +1 -1
  20. package/src/components/PickerButton/PickerButton.tsx +35 -63
package/dist/lib/node/index.cjs CHANGED
@@ -35,265 +35,275 @@ __export(node_exports, {
35
35
  PickerButton: () => PickerButton
36
36
  });
37
37
  module.exports = __toCommonJS(node_exports);
38
+ var import_tracking = require("@preact-signals/safe-react/tracking");
38
39
  var import_data = __toESM(require("@emoji-mart/data"));
39
40
  var import_react = __toESM(require("@emoji-mart/react"));
40
41
  var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
41
42
  var import_react2 = __toESM(require("react"));
42
43
  var import_react_ui = require("@dxos/react-ui");
44
+ var import_tracking2 = require("@preact-signals/safe-react/tracking");
43
45
  var import_react3 = __toESM(require("react"));
44
46
  var import_react_ui2 = require("@dxos/react-ui");
45
47
  var import_react_ui_theme = require("@dxos/react-ui-theme");
48
+ var import_tracking3 = require("@preact-signals/safe-react/tracking");
46
49
  var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
47
50
  var import_react4 = __toESM(require("react"));
48
51
  var import_react_ui3 = require("@dxos/react-ui");
52
+ var import_tracking4 = require("@preact-signals/safe-react/tracking");
49
53
  var import_react5 = __toESM(require("react"));
50
54
  var import_react_ui4 = require("@dxos/react-ui");
51
55
  var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
52
- const { t } = (0, import_react_ui.useTranslation)("os");
53
- const { themeMode } = (0, import_react_ui.useThemeContext)();
54
- const [_emojiValue, setEmojiValue] = (0, import_react_use_controllable_state.useControllableState)({
55
- prop: emoji,
56
- onChange: onChangeEmoji,
57
- defaultProp: defaultEmoji
58
- });
59
- const [emojiPickerOpen, setEmojiPickerOpen] = (0, import_react2.useState)(false);
60
- const suppressNextTooltip = (0, import_react2.useRef)(false);
61
- const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react2.useState)(false);
62
- return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Root, {
63
- open: triggerTooltipOpen,
64
- onOpenChange: (nextOpen) => {
65
- if (suppressNextTooltip.current) {
66
- setTriggerTooltipOpen(false);
67
- suppressNextTooltip.current = false;
68
- } else {
69
- setTriggerTooltipOpen(nextOpen);
56
+ var _effect = (0, import_tracking.useSignals)();
57
+ try {
58
+ const { t } = (0, import_react_ui.useTranslation)("os");
59
+ const { themeMode } = (0, import_react_ui.useThemeContext)();
60
+ const [_emojiValue, setEmojiValue] = (0, import_react_use_controllable_state.useControllableState)({
61
+ prop: emoji,
62
+ onChange: onChangeEmoji,
63
+ defaultProp: defaultEmoji
64
+ });
65
+ const [emojiPickerOpen, setEmojiPickerOpen] = (0, import_react2.useState)(false);
66
+ return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Root, {
67
+ open: emojiPickerOpen,
68
+ onOpenChange: (nextOpen) => {
69
+ setEmojiPickerOpen(nextOpen);
70
70
  }
71
- }
72
- }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Root, {
73
- open: emojiPickerOpen,
74
- onOpenChange: (nextOpen) => {
75
- setEmojiPickerOpen(nextOpen);
76
- suppressNextTooltip.current = true;
77
- }
78
- }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
79
- asChild: true
80
- }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Trigger, {
81
- asChild: true
82
- }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Toolbar.Button, {
83
- classNames: [
84
- "gap-2 text-2xl plb-1",
85
- classNames
86
- ],
87
- disabled
88
- }, /* @__PURE__ */ import_react2.default.createElement("span", {
89
- className: "sr-only"
90
- }, t("select emoji label")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
91
- icon: "ph--user-circle--regular",
92
- size: 5
93
- })))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Content, {
94
- side: "bottom"
95
- }, t("select emoji label"), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Arrow, null))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Content, {
96
- side: "bottom",
97
- onKeyDownCapture: (event) => {
98
- if (event.key === "Escape") {
99
- event.stopPropagation();
100
- setEmojiPickerOpen(false);
101
- suppressNextTooltip.current = true;
102
- }
103
- }
104
- }, /* @__PURE__ */ import_react2.default.createElement(import_react.default, {
105
- data: import_data.default,
106
- onEmojiSelect: ({ native }) => {
107
- if (native) {
108
- setEmojiValue(native);
109
- setEmojiPickerOpen(false);
71
+ }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
72
+ asChild: true,
73
+ content: t("select emoji label"),
74
+ side: "bottom"
75
+ }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Trigger, {
76
+ asChild: true
77
+ }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Toolbar.Button, {
78
+ classNames: [
79
+ "gap-2 text-2xl plb-1",
80
+ classNames
81
+ ],
82
+ disabled
83
+ }, /* @__PURE__ */ import_react2.default.createElement("span", {
84
+ className: "sr-only"
85
+ }, t("select emoji label")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
86
+ icon: "ph--user-circle--regular",
87
+ size: 5
88
+ })))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Content, {
89
+ side: "bottom",
90
+ onKeyDownCapture: (event) => {
91
+ if (event.key === "Escape") {
92
+ event.stopPropagation();
93
+ setEmojiPickerOpen(false);
94
+ }
110
95
  }
111
- },
112
- autoFocus: true,
113
- maxFrequentRows: 0,
114
- noCountryFlags: true,
115
- theme: themeMode
116
- }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null)))));
96
+ }, /* @__PURE__ */ import_react2.default.createElement(import_react.default, {
97
+ data: import_data.default,
98
+ onEmojiSelect: ({ native }) => {
99
+ if (native) {
100
+ setEmojiValue(native);
101
+ setEmojiPickerOpen(false);
102
+ }
103
+ },
104
+ autoFocus: true,
105
+ maxFrequentRows: 0,
106
+ noCountryFlags: true,
107
+ theme: themeMode
108
+ }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null))));
109
+ } finally {
110
+ _effect.f();
111
+ }
117
112
  };
118
113
  var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
119
- const { t } = (0, import_react_ui.useTranslation)("os");
120
- const [isMd] = (0, import_react_ui.useMediaQuery)("md", {
121
- ssr: false
122
- });
123
- const [emojiValue, setEmojiValue] = (0, import_react_use_controllable_state.useControllableState)({
124
- prop: emoji,
125
- onChange: onChangeEmoji,
126
- defaultProp: defaultEmoji
127
- });
128
- const [emojiPickerOpen, setEmojiPickerOpen] = (0, import_react2.useState)(false);
129
- return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.ButtonGroup, {
130
- classNames
131
- }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Root, {
132
- open: emojiPickerOpen,
133
- onOpenChange: setEmojiPickerOpen
134
- }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Trigger, {
135
- asChild: true
136
- }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
137
- variant: triggerVariant,
138
- classNames: "grow gap-2 text-2xl plb-1",
139
- disabled
140
- }, /* @__PURE__ */ import_react2.default.createElement("span", {
141
- className: "sr-only"
142
- }, t("select emoji label")), /* @__PURE__ */ import_react2.default.createElement("span", null, emojiValue), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
143
- icon: "ph--caret-down--bold",
144
- size: 3
145
- }))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Content, {
146
- side: "right",
147
- sideOffset: isMd ? 0 : -310,
148
- onKeyDownCapture: (event) => {
149
- if (event.key === "Escape") {
150
- event.stopPropagation();
151
- setEmojiPickerOpen(false);
152
- }
153
- }
154
- }, /* @__PURE__ */ import_react2.default.createElement(import_react.default, {
155
- data: import_data.default,
156
- onEmojiSelect: ({ native }) => {
157
- if (native) {
158
- setEmojiValue(native);
159
- setEmojiPickerOpen(false);
114
+ var _effect = (0, import_tracking.useSignals)();
115
+ try {
116
+ const { t } = (0, import_react_ui.useTranslation)("os");
117
+ const [isMd] = (0, import_react_ui.useMediaQuery)("md", {
118
+ ssr: false
119
+ });
120
+ const [emojiValue, setEmojiValue] = (0, import_react_use_controllable_state.useControllableState)({
121
+ prop: emoji,
122
+ onChange: onChangeEmoji,
123
+ defaultProp: defaultEmoji
124
+ });
125
+ const [emojiPickerOpen, setEmojiPickerOpen] = (0, import_react2.useState)(false);
126
+ return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.ButtonGroup, {
127
+ classNames
128
+ }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Root, {
129
+ open: emojiPickerOpen,
130
+ onOpenChange: setEmojiPickerOpen
131
+ }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Trigger, {
132
+ asChild: true
133
+ }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
134
+ variant: triggerVariant,
135
+ classNames: "grow gap-2 text-2xl plb-1",
136
+ disabled
137
+ }, /* @__PURE__ */ import_react2.default.createElement("span", {
138
+ className: "sr-only"
139
+ }, t("select emoji label")), /* @__PURE__ */ import_react2.default.createElement("span", null, emojiValue), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
140
+ icon: "ph--caret-down--bold",
141
+ size: 3
142
+ }))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Content, {
143
+ side: "right",
144
+ sideOffset: isMd ? 0 : -310,
145
+ onKeyDownCapture: (event) => {
146
+ if (event.key === "Escape") {
147
+ event.stopPropagation();
148
+ setEmojiPickerOpen(false);
149
+ }
160
150
  }
161
- },
162
- autoFocus: true,
163
- maxFrequentRows: 0,
164
- noCountryFlags: true
165
- }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Root, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
166
- asChild: true
167
- }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
168
- variant: triggerVariant,
169
- onClick: onClickClear,
170
- disabled
171
- }, /* @__PURE__ */ import_react2.default.createElement("span", {
172
- className: "sr-only"
173
- }, t("clear label")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
174
- icon: "ph--arrow-counter-clockwise--regular",
175
- size: 5
176
- }))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Content, {
177
- side: "right"
178
- }, t("clear label"), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Arrow, null)))));
151
+ }, /* @__PURE__ */ import_react2.default.createElement(import_react.default, {
152
+ data: import_data.default,
153
+ onEmojiSelect: ({ native }) => {
154
+ if (native) {
155
+ setEmojiValue(native);
156
+ setEmojiPickerOpen(false);
157
+ }
158
+ },
159
+ autoFocus: true,
160
+ maxFrequentRows: 0,
161
+ noCountryFlags: true
162
+ }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
163
+ asChild: true,
164
+ content: t("clear label"),
165
+ side: "right"
166
+ }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
167
+ variant: triggerVariant,
168
+ onClick: onClickClear,
169
+ disabled
170
+ }, /* @__PURE__ */ import_react2.default.createElement("span", {
171
+ className: "sr-only"
172
+ }, t("clear label")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
173
+ icon: "ph--arrow-counter-clockwise--regular",
174
+ size: 5
175
+ }))));
176
+ } finally {
177
+ _effect.f();
178
+ }
179
179
  };
180
180
  var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
181
- const [value, setValue] = (0, import_react_use_controllable_state2.useControllableState)({
182
- prop: _value,
183
- defaultProp: _defaultValue,
184
- onChange
185
- });
186
- (0, import_react4.useEffect)(() => setValue(_value), [
187
- _value
188
- ]);
189
- const [open, setOpen] = (0, import_react4.useState)(false);
190
- const suppressNextTooltip = (0, import_react4.useRef)(false);
191
- const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react4.useState)(false);
192
- const TriggerRoot = rootVariant === "toolbar-button" ? import_react_ui3.Toolbar.Button : import_react_ui3.Button;
193
- return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Root, {
194
- open: triggerTooltipOpen,
195
- onOpenChange: (nextOpen) => {
196
- if (suppressNextTooltip.current) {
197
- setTriggerTooltipOpen(false);
198
- suppressNextTooltip.current = false;
199
- } else {
200
- setTriggerTooltipOpen(nextOpen);
201
- }
202
- }
203
- }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Root, {
204
- modal: false,
205
- open,
206
- onOpenChange: (nextOpen) => {
207
- setOpen(nextOpen);
208
- suppressNextTooltip.current = true;
209
- }
210
- }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Trigger, {
211
- asChild: true
212
- }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
213
- asChild: true
214
- }, /* @__PURE__ */ import_react4.default.createElement(TriggerRoot, {
215
- classNames: [
216
- "gap-2 plb-1",
217
- classNames
218
- ],
219
- disabled
220
- }, /* @__PURE__ */ import_react4.default.createElement("span", {
221
- className: "sr-only"
222
- }, label), value && /* @__PURE__ */ import_react4.default.createElement(Component, {
223
- value,
224
- iconSize
225
- }) || /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
226
- icon,
227
- size: iconSize
228
- }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
229
- icon: "ph--caret-down--bold",
230
- size: 3
231
- })))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Content, {
232
- side: "bottom"
233
- }, label, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Arrow, null))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Content, {
234
- side: "bottom",
235
- classNames: "!is-min"
236
- }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Viewport, {
237
- classNames: "grid grid-cols-[repeat(6,min-content)]"
238
- }, values.map((_value2) => {
239
- return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.CheckboxItem, {
240
- key: _value2,
241
- checked: _value2 === value,
242
- onCheckedChange: () => setValue(_value2),
243
- classNames: "p-1 items-center justify-center aspect-square"
244
- }, /* @__PURE__ */ import_react4.default.createElement(Component, {
245
- value: _value2,
181
+ var _effect = (0, import_tracking3.useSignals)();
182
+ try {
183
+ const [value, setValue] = (0, import_react_use_controllable_state2.useControllableState)({
184
+ prop: _value,
185
+ defaultProp: _defaultValue,
186
+ onChange
187
+ });
188
+ (0, import_react4.useEffect)(() => setValue(_value), [
189
+ _value
190
+ ]);
191
+ const [open, setOpen] = (0, import_react4.useState)(false);
192
+ const TriggerRoot = rootVariant === "toolbar-button" ? import_react_ui3.Toolbar.Button : import_react_ui3.Button;
193
+ return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Root, {
194
+ modal: false,
195
+ open,
196
+ onOpenChange: setOpen
197
+ }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Trigger, {
198
+ asChild: true,
199
+ content: label,
200
+ side: "bottom"
201
+ }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
202
+ asChild: true
203
+ }, /* @__PURE__ */ import_react4.default.createElement(TriggerRoot, {
204
+ classNames: [
205
+ "gap-2 plb-1",
206
+ classNames
207
+ ],
208
+ disabled
209
+ }, /* @__PURE__ */ import_react4.default.createElement("span", {
210
+ className: "sr-only"
211
+ }, label), value && /* @__PURE__ */ import_react4.default.createElement(Component, {
212
+ value,
246
213
  iconSize
247
- }));
248
- }), onReset && /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.CheckboxItem, {
249
- onCheckedChange: () => onReset(),
250
- classNames: "p-1 items-center justify-center aspect-square"
251
- }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
252
- icon: "ph--x--regular",
253
- size: iconSize
254
- }))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Arrow, null)))));
214
+ }) || /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
215
+ icon,
216
+ size: iconSize
217
+ }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
218
+ icon: "ph--caret-down--bold",
219
+ size: 3
220
+ })))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Content, {
221
+ side: "bottom",
222
+ classNames: "!is-min"
223
+ }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Viewport, {
224
+ classNames: "grid grid-cols-[repeat(6,min-content)]"
225
+ }, values.map((_value2) => {
226
+ return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.CheckboxItem, {
227
+ key: _value2,
228
+ checked: _value2 === value,
229
+ onCheckedChange: () => setValue(_value2),
230
+ classNames: "p-1 items-center justify-center aspect-square"
231
+ }, /* @__PURE__ */ import_react4.default.createElement(Component, {
232
+ value: _value2,
233
+ iconSize
234
+ }));
235
+ }), onReset && /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.CheckboxItem, {
236
+ onCheckedChange: () => onReset(),
237
+ classNames: "p-1 items-center justify-center aspect-square"
238
+ }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
239
+ icon: "ph--x--regular",
240
+ size: iconSize
241
+ }))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
242
+ } finally {
243
+ _effect.f();
244
+ }
255
245
  };
256
246
  var HuePicker = (props) => {
257
- const { t } = (0, import_react_ui2.useTranslation)("os");
258
- return /* @__PURE__ */ import_react3.default.createElement(PickerButton, {
259
- Component: HuePreview,
260
- label: t("select hue label"),
261
- icon: "ph--palette--regular",
262
- values: import_react_ui_theme.hues,
263
- ...props
264
- });
247
+ var _effect = (0, import_tracking2.useSignals)();
248
+ try {
249
+ const { t } = (0, import_react_ui2.useTranslation)("os");
250
+ return /* @__PURE__ */ import_react3.default.createElement(PickerButton, {
251
+ Component: HuePreview,
252
+ label: t("select hue label"),
253
+ icon: "ph--palette--regular",
254
+ values: import_react_ui_theme.hues,
255
+ ...props
256
+ });
257
+ } finally {
258
+ _effect.f();
259
+ }
265
260
  };
266
261
  var HuePreview = ({ value }) => {
267
- const size = 16;
268
- return /* @__PURE__ */ import_react3.default.createElement("div", {
269
- className: "flex p-[2px] justify-center items-center"
270
- }, /* @__PURE__ */ import_react3.default.createElement("svg", {
271
- viewBox: `0 0 ${size} ${size}`,
272
- className: "is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]"
273
- }, /* @__PURE__ */ import_react3.default.createElement("rect", {
274
- x: 0,
275
- y: 0,
276
- width: size,
277
- height: size,
278
- fill: `var(--dx-${value}Fill)`,
279
- strokeWidth: 4
280
- })));
262
+ var _effect = (0, import_tracking2.useSignals)();
263
+ try {
264
+ const size = 16;
265
+ return /* @__PURE__ */ import_react3.default.createElement("div", {
266
+ className: "flex p-[2px] justify-center items-center"
267
+ }, /* @__PURE__ */ import_react3.default.createElement("svg", {
268
+ viewBox: `0 0 ${size} ${size}`,
269
+ className: "is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]"
270
+ }, /* @__PURE__ */ import_react3.default.createElement("rect", {
271
+ x: 0,
272
+ y: 0,
273
+ width: size,
274
+ height: size,
275
+ fill: `var(--dx-${value}Fill)`,
276
+ strokeWidth: 4
277
+ })));
278
+ } finally {
279
+ _effect.f();
280
+ }
281
281
  };
282
282
  var IconPicker = ({ ...props }) => {
283
- const { t } = (0, import_react_ui4.useTranslation)("os");
284
- return /* @__PURE__ */ import_react5.default.createElement(PickerButton, {
285
- Component: IconPreview,
286
- label: t("select icon label"),
287
- icon: "ph--selection--regular",
288
- values: iconValues,
289
- ...props
290
- });
283
+ var _effect = (0, import_tracking4.useSignals)();
284
+ try {
285
+ const { t } = (0, import_react_ui4.useTranslation)("os");
286
+ return /* @__PURE__ */ import_react5.default.createElement(PickerButton, {
287
+ Component: IconPreview,
288
+ label: t("select icon label"),
289
+ icon: "ph--selection--regular",
290
+ values: iconValues,
291
+ ...props
292
+ });
293
+ } finally {
294
+ _effect.f();
295
+ }
291
296
  };
292
297
  var IconPreview = ({ value, iconSize = 5 }) => {
293
- return /* @__PURE__ */ import_react5.default.createElement(import_react_ui4.Icon, {
294
- icon: `ph--${value}--regular`,
295
- size: iconSize
296
- });
298
+ var _effect = (0, import_tracking4.useSignals)();
299
+ try {
300
+ return /* @__PURE__ */ import_react5.default.createElement(import_react_ui4.Icon, {
301
+ icon: `ph--${value}--regular`,
302
+ size: iconSize
303
+ });
304
+ } finally {
305
+ _effect.f();
306
+ }
297
307
  };
298
308
  var icons = [
299
309
  "ph--air-traffic-control--regular",