@dxos/react-ui-pickers 0.8.2-staging.7ac8446 → 0.8.2

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