@dxos/react-ui-pickers 0.8.4-main.e8ec1fe → 0.8.4-main.ef1bc66f44

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 (33) hide show
  1. package/dist/lib/browser/chunk-IEOELSPW.mjs +64 -0
  2. package/dist/lib/browser/chunk-IEOELSPW.mjs.map +7 -0
  3. package/dist/lib/browser/components/IconPicker/icons.mjs +9 -0
  4. package/dist/lib/browser/components/IconPicker/icons.mjs.map +7 -0
  5. package/dist/lib/browser/index.mjs +192 -284
  6. package/dist/lib/browser/index.mjs.map +3 -3
  7. package/dist/lib/browser/meta.json +1 -1
  8. package/dist/lib/node-esm/chunk-OLGXN23I.mjs +66 -0
  9. package/dist/lib/node-esm/chunk-OLGXN23I.mjs.map +7 -0
  10. package/dist/lib/node-esm/components/IconPicker/icons.mjs +10 -0
  11. package/dist/lib/node-esm/components/IconPicker/icons.mjs.map +7 -0
  12. package/dist/lib/node-esm/index.mjs +191 -284
  13. package/dist/lib/node-esm/index.mjs.map +3 -3
  14. package/dist/lib/node-esm/meta.json +1 -1
  15. package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts.map +1 -1
  16. package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts +1 -1
  17. package/dist/types/src/components/IconPicker/IconPicker.d.ts +0 -6
  18. package/dist/types/src/components/IconPicker/IconPicker.d.ts.map +1 -1
  19. package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts +1 -1
  20. package/dist/types/src/components/IconPicker/icons.d.ts +7 -0
  21. package/dist/types/src/components/IconPicker/icons.d.ts.map +1 -0
  22. package/dist/types/src/components/PickerButton/PickerButton.d.ts +1 -1
  23. package/dist/types/src/components/PickerButton/PickerButton.d.ts.map +1 -1
  24. package/dist/types/tsconfig.tsbuildinfo +1 -1
  25. package/package.json +30 -17
  26. package/src/components/EmojiPicker/EmojiPicker.stories.tsx +1 -1
  27. package/src/components/EmojiPicker/EmojiPicker.tsx +3 -2
  28. package/src/components/HuePicker/HuePicker.stories.tsx +1 -1
  29. package/src/components/HuePicker/HuePicker.tsx +2 -2
  30. package/src/components/IconPicker/IconPicker.stories.tsx +1 -1
  31. package/src/components/IconPicker/IconPicker.tsx +4 -64
  32. package/src/components/IconPicker/icons.ts +66 -0
  33. package/src/components/PickerButton/PickerButton.tsx +5 -5
@@ -0,0 +1,64 @@
1
+ // src/components/IconPicker/icons.ts
2
+ var icons = [
3
+ "ph--house-line--regular",
4
+ "ph--planet--regular",
5
+ "ph--castle-turret--regular",
6
+ "ph--snowflake--regular",
7
+ "ph--virus--regular",
8
+ "ph--graph--regular",
9
+ "ph--air-traffic-control--regular",
10
+ "ph--asterisk--regular",
11
+ "ph--atom--regular",
12
+ "ph--basketball--regular",
13
+ "ph--butterfly--regular",
14
+ "ph--cactus--regular",
15
+ "ph--cake--regular",
16
+ "ph--calendar-dots--regular",
17
+ "ph--campfire--regular",
18
+ "ph--command--regular",
19
+ "ph--confetti--regular",
20
+ "ph--detective--regular",
21
+ "ph--disco-ball--regular",
22
+ "ph--dna--regular",
23
+ "ph--factory--regular",
24
+ "ph--flag-banner-fold--regular",
25
+ "ph--flask--regular",
26
+ "ph--flower-lotus--regular",
27
+ "ph--flying-saucer--regular",
28
+ "ph--game-controller--regular",
29
+ "ph--gavel--regular",
30
+ "ph--gift--regular",
31
+ "ph--guitar--regular",
32
+ "ph--hamburger--regular",
33
+ "ph--handshake--regular",
34
+ "ph--heart--regular",
35
+ "ph--lightbulb--regular",
36
+ "ph--lock--regular",
37
+ "ph--martini--regular",
38
+ "ph--medal-military--regular",
39
+ "ph--moped-front--regular",
40
+ "ph--office-chair--regular",
41
+ "ph--paint-brush-household--regular",
42
+ "ph--peace--regular",
43
+ "ph--person-simple-hike--regular",
44
+ "ph--piggy-bank--regular",
45
+ "ph--potted-plant--regular",
46
+ "ph--radioactive--regular",
47
+ "ph--rocket-launch--regular",
48
+ "ph--shield-star--regular",
49
+ "ph--shopping-cart--regular",
50
+ "ph--stethoscope--regular",
51
+ "ph--student--regular",
52
+ "ph--sun--regular",
53
+ "ph--tote--regular",
54
+ "ph--tree--regular",
55
+ "ph--users-three--regular",
56
+ "ph--yin-yang--regular"
57
+ ];
58
+ var iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);
59
+
60
+ export {
61
+ icons,
62
+ iconValues
63
+ };
64
+ //# sourceMappingURL=chunk-IEOELSPW.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/components/IconPicker/icons.ts"],
4
+ "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nexport const icons = [\n 'ph--house-line--regular',\n 'ph--planet--regular',\n 'ph--castle-turret--regular',\n 'ph--snowflake--regular',\n 'ph--virus--regular',\n 'ph--graph--regular',\n 'ph--air-traffic-control--regular',\n 'ph--asterisk--regular',\n 'ph--atom--regular',\n 'ph--basketball--regular',\n 'ph--butterfly--regular',\n 'ph--cactus--regular',\n 'ph--cake--regular',\n 'ph--calendar-dots--regular',\n 'ph--campfire--regular',\n 'ph--command--regular',\n 'ph--confetti--regular',\n 'ph--detective--regular',\n 'ph--disco-ball--regular',\n 'ph--dna--regular',\n 'ph--factory--regular',\n 'ph--flag-banner-fold--regular',\n 'ph--flask--regular',\n 'ph--flower-lotus--regular',\n 'ph--flying-saucer--regular',\n 'ph--game-controller--regular',\n 'ph--gavel--regular',\n 'ph--gift--regular',\n 'ph--guitar--regular',\n 'ph--hamburger--regular',\n 'ph--handshake--regular',\n 'ph--heart--regular',\n 'ph--lightbulb--regular',\n 'ph--lock--regular',\n 'ph--martini--regular',\n 'ph--medal-military--regular',\n 'ph--moped-front--regular',\n 'ph--office-chair--regular',\n 'ph--paint-brush-household--regular',\n 'ph--peace--regular',\n 'ph--person-simple-hike--regular',\n 'ph--piggy-bank--regular',\n 'ph--potted-plant--regular',\n 'ph--radioactive--regular',\n 'ph--rocket-launch--regular',\n 'ph--shield-star--regular',\n 'ph--shopping-cart--regular',\n 'ph--stethoscope--regular',\n 'ph--student--regular',\n 'ph--sun--regular',\n 'ph--tote--regular',\n 'ph--tree--regular',\n 'ph--users-three--regular',\n 'ph--yin-yang--regular',\n];\n\nexport const iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
5
+ "mappings": ";AAQO,IAAMA,QAAQ;EACnB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGK,IAAMC,aAAaD,MAAME,IAAI,CAACC,SAASA,KAAKC,MAAM,mBAAA,IAAuB,CAAA,KAAMD,IAAAA;",
6
+ "names": ["icons", "iconValues", "map", "icon", "match"]
7
+ }
@@ -0,0 +1,9 @@
1
+ import {
2
+ iconValues,
3
+ icons
4
+ } from "../../chunk-IEOELSPW.mjs";
5
+ export {
6
+ iconValues,
7
+ icons
8
+ };
9
+ //# sourceMappingURL=icons.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -1,330 +1,238 @@
1
+ import {
2
+ iconValues
3
+ } from "./chunk-IEOELSPW.mjs";
4
+
1
5
  // src/components/EmojiPicker/EmojiPicker.tsx
2
- import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
3
6
  import emojiData from "@emoji-mart/data";
4
7
  import EmojiMart from "@emoji-mart/react";
5
8
  import { useControllableState } from "@radix-ui/react-use-controllable-state";
6
9
  import React, { useState } from "react";
7
10
  import { Button, ButtonGroup, Icon, IconButton, Popover, Toolbar, useMediaQuery, useThemeContext, useTranslation } from "@dxos/react-ui";
11
+ import { osTranslations } from "@dxos/ui-theme";
8
12
  var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
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);
13
+ const { t } = useTranslation(osTranslations);
14
+ const { themeMode } = useThemeContext();
15
+ const [_emojiValue, setEmojiValue] = useControllableState({
16
+ prop: emoji,
17
+ onChange: onChangeEmoji,
18
+ defaultProp: defaultEmoji
19
+ });
20
+ const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
21
+ return /* @__PURE__ */ React.createElement(Popover.Root, {
22
+ open: emojiPickerOpen,
23
+ onOpenChange: (nextOpen) => {
24
+ setEmojiPickerOpen(nextOpen);
25
+ }
26
+ }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
27
+ asChild: true
28
+ }, /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
29
+ icon: "ph--user-circle--regular",
30
+ label: t("select emoji label"),
31
+ iconOnly: true,
32
+ tooltipSide: "bottom",
33
+ disabled
34
+ })), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
35
+ side: "bottom",
36
+ onKeyDownCapture: (event) => {
37
+ if (event.key === "Escape") {
38
+ event.stopPropagation();
39
+ setEmojiPickerOpen(false);
23
40
  }
24
- }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
25
- asChild: true
26
- }, /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
27
- icon: "ph--user-circle--regular",
28
- label: t("select emoji label"),
29
- iconOnly: true,
30
- tooltipSide: "bottom",
31
- disabled
32
- })), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
33
- side: "bottom",
34
- onKeyDownCapture: (event) => {
35
- if (event.key === "Escape") {
36
- event.stopPropagation();
37
- setEmojiPickerOpen(false);
38
- }
41
+ }
42
+ }, /* @__PURE__ */ React.createElement(EmojiMart, {
43
+ data: emojiData,
44
+ onEmojiSelect: ({ native }) => {
45
+ if (native) {
46
+ setEmojiValue(native);
47
+ setEmojiPickerOpen(false);
39
48
  }
40
- }, /* @__PURE__ */ React.createElement(EmojiMart, {
41
- data: emojiData,
42
- onEmojiSelect: ({ native }) => {
43
- if (native) {
44
- setEmojiValue(native);
45
- setEmojiPickerOpen(false);
46
- }
47
- },
48
- autoFocus: true,
49
- maxFrequentRows: 0,
50
- noCountryFlags: true,
51
- theme: themeMode
52
- }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
53
- } finally {
54
- _effect.f();
55
- }
49
+ },
50
+ autoFocus: true,
51
+ maxFrequentRows: 0,
52
+ noCountryFlags: true,
53
+ theme: themeMode
54
+ }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
56
55
  };
57
56
  var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
58
- var _effect = _useSignals();
59
- try {
60
- const { t } = useTranslation("os");
61
- const [isMd] = useMediaQuery("md");
62
- const [emojiValue, setEmojiValue] = useControllableState({
63
- prop: emoji,
64
- onChange: onChangeEmoji,
65
- defaultProp: defaultEmoji
66
- });
67
- const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
68
- return /* @__PURE__ */ React.createElement(ButtonGroup, {
69
- classNames
70
- }, /* @__PURE__ */ React.createElement(Popover.Root, {
71
- open: emojiPickerOpen,
72
- onOpenChange: setEmojiPickerOpen
73
- }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
74
- asChild: true
75
- }, /* @__PURE__ */ React.createElement(Button, {
76
- variant: triggerVariant,
77
- classNames: "grow gap-2 text-2xl plb-1",
78
- disabled
79
- }, /* @__PURE__ */ React.createElement("span", {
80
- className: "sr-only"
81
- }, t("select emoji label")), /* @__PURE__ */ React.createElement("span", null, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
82
- icon: "ph--caret-down--bold",
83
- size: 3
84
- }))), /* @__PURE__ */ React.createElement(Popover.Content, {
85
- side: "right",
86
- sideOffset: isMd ? 0 : -310,
87
- onKeyDownCapture: (event) => {
88
- if (event.key === "Escape") {
89
- event.stopPropagation();
90
- setEmojiPickerOpen(false);
91
- }
57
+ const { t } = useTranslation(osTranslations);
58
+ const [isMd] = useMediaQuery("md");
59
+ const [emojiValue, setEmojiValue] = useControllableState({
60
+ prop: emoji,
61
+ onChange: onChangeEmoji,
62
+ defaultProp: defaultEmoji
63
+ });
64
+ const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
65
+ return /* @__PURE__ */ React.createElement(ButtonGroup, {
66
+ classNames
67
+ }, /* @__PURE__ */ React.createElement(Popover.Root, {
68
+ open: emojiPickerOpen,
69
+ onOpenChange: setEmojiPickerOpen
70
+ }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
71
+ asChild: true
72
+ }, /* @__PURE__ */ React.createElement(Button, {
73
+ variant: triggerVariant,
74
+ classNames: "grow gap-2 text-2xl plb-1",
75
+ disabled
76
+ }, /* @__PURE__ */ React.createElement("span", {
77
+ className: "sr-only"
78
+ }, t("select emoji label")), /* @__PURE__ */ React.createElement("span", null, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
79
+ icon: "ph--caret-down--bold",
80
+ size: 3
81
+ }))), /* @__PURE__ */ React.createElement(Popover.Content, {
82
+ side: "right",
83
+ sideOffset: isMd ? 0 : -310,
84
+ onKeyDownCapture: (event) => {
85
+ if (event.key === "Escape") {
86
+ event.stopPropagation();
87
+ setEmojiPickerOpen(false);
92
88
  }
93
- }, /* @__PURE__ */ React.createElement(EmojiMart, {
94
- data: emojiData,
95
- onEmojiSelect: ({ native }) => {
96
- if (native) {
97
- setEmojiValue(native);
98
- setEmojiPickerOpen(false);
99
- }
100
- },
101
- autoFocus: true,
102
- maxFrequentRows: 0,
103
- noCountryFlags: true
104
- }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(IconButton, {
105
- icon: "ph--arrow-counter-clockwise--regular",
106
- iconOnly: true,
107
- label: t("clear label"),
108
- tooltipSide: "right",
109
- variant: triggerVariant,
110
- onClick: onClickClear,
111
- disabled
112
- }));
113
- } finally {
114
- _effect.f();
115
- }
89
+ }
90
+ }, /* @__PURE__ */ React.createElement(EmojiMart, {
91
+ data: emojiData,
92
+ onEmojiSelect: ({ native }) => {
93
+ if (native) {
94
+ setEmojiValue(native);
95
+ setEmojiPickerOpen(false);
96
+ }
97
+ },
98
+ autoFocus: true,
99
+ maxFrequentRows: 0,
100
+ noCountryFlags: true
101
+ }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(IconButton, {
102
+ icon: "ph--arrow-counter-clockwise--regular",
103
+ iconOnly: true,
104
+ label: t("clear label"),
105
+ tooltipSide: "right",
106
+ variant: triggerVariant,
107
+ onClick: onClickClear,
108
+ disabled
109
+ }));
116
110
  };
117
111
 
118
112
  // src/components/HuePicker/HuePicker.tsx
119
- import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
120
113
  import React3 from "react";
121
114
  import { useTranslation as useTranslation2 } from "@dxos/react-ui";
122
- import { getSize, hues } from "@dxos/react-ui-theme";
115
+ import { getSize, hues, osTranslations as osTranslations2 } from "@dxos/ui-theme";
123
116
 
124
117
  // src/components/PickerButton/PickerButton.tsx
125
- import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
126
118
  import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
127
119
  import React2, { useEffect, useState as useState2 } from "react";
128
120
  import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip } from "@dxos/react-ui";
129
- var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValueParam, value: valueParam, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
130
- var _effect = _useSignals2();
131
- try {
132
- const [value, setValue] = useControllableState2({
133
- prop: valueParam,
134
- defaultProp: defaultValueParam,
135
- onChange
136
- });
137
- useEffect(() => setValue(valueParam), [
138
- valueParam
139
- ]);
140
- const [open, setOpen] = useState2(false);
141
- const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
142
- return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
143
- modal: false,
144
- open,
145
- onOpenChange: setOpen
146
- }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
147
- asChild: true,
148
- content: label,
149
- side: "bottom"
150
- }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
151
- asChild: true
152
- }, /* @__PURE__ */ React2.createElement(TriggerRoot, {
153
- classNames: [
154
- "gap-2 plb-1",
155
- classNames
156
- ],
157
- disabled
158
- }, /* @__PURE__ */ React2.createElement("span", {
159
- className: "sr-only"
160
- }, label), value && /* @__PURE__ */ React2.createElement(Component, {
161
- value,
162
- size: iconSize
163
- }) || /* @__PURE__ */ React2.createElement(Icon2, {
164
- icon,
165
- size: iconSize
166
- }), /* @__PURE__ */ React2.createElement(Icon2, {
167
- icon: "ph--caret-down--bold",
168
- size: 3
169
- })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
170
- side: "bottom",
171
- classNames: "!is-min"
172
- }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
173
- classNames: "grid grid-cols-[repeat(6,min-content)]"
174
- }, values.map((_value) => {
175
- return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
176
- key: _value,
177
- checked: _value === value,
178
- onCheckedChange: () => setValue(_value),
179
- classNames: "p-1 items-center justify-center aspect-square"
180
- }, /* @__PURE__ */ React2.createElement(Component, {
181
- value: _value,
182
- size: iconSize
183
- }));
184
- }), onReset && /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
185
- onCheckedChange: () => onReset(),
121
+ var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValueProp, value: valueProp, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
122
+ const [value, setValue] = useControllableState2({
123
+ prop: valueProp,
124
+ defaultProp: defaultValueProp,
125
+ onChange
126
+ });
127
+ useEffect(() => setValue(valueProp), [
128
+ valueProp
129
+ ]);
130
+ const [open, setOpen] = useState2(false);
131
+ const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
132
+ return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
133
+ modal: false,
134
+ open,
135
+ onOpenChange: setOpen
136
+ }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
137
+ asChild: true,
138
+ content: label,
139
+ side: "bottom"
140
+ }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
141
+ asChild: true
142
+ }, /* @__PURE__ */ React2.createElement(TriggerRoot, {
143
+ classNames: [
144
+ "gap-2 plb-1",
145
+ classNames
146
+ ],
147
+ disabled
148
+ }, /* @__PURE__ */ React2.createElement("span", {
149
+ className: "sr-only"
150
+ }, label), value && /* @__PURE__ */ React2.createElement(Component, {
151
+ value,
152
+ size: iconSize
153
+ }) || /* @__PURE__ */ React2.createElement(Icon2, {
154
+ icon,
155
+ size: iconSize
156
+ }), /* @__PURE__ */ React2.createElement(Icon2, {
157
+ icon: "ph--caret-down--bold",
158
+ size: 3
159
+ })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
160
+ side: "bottom",
161
+ classNames: "!is-min"
162
+ }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
163
+ classNames: "grid grid-cols-[repeat(6,min-content)]"
164
+ }, values.map((_value) => {
165
+ return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
166
+ key: _value,
167
+ checked: _value === value,
168
+ onCheckedChange: () => setValue(_value),
186
169
  classNames: "p-1 items-center justify-center aspect-square"
187
- }, /* @__PURE__ */ React2.createElement(Icon2, {
188
- icon: "ph--x--regular",
170
+ }, /* @__PURE__ */ React2.createElement(Component, {
171
+ value: _value,
189
172
  size: iconSize
190
- }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
191
- } finally {
192
- _effect.f();
193
- }
173
+ }));
174
+ }), onReset && /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
175
+ onCheckedChange: () => onReset(),
176
+ classNames: "p-1 items-center justify-center aspect-square"
177
+ }, /* @__PURE__ */ React2.createElement(Icon2, {
178
+ icon: "ph--x--regular",
179
+ size: iconSize
180
+ }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
194
181
  };
195
182
 
196
183
  // src/components/HuePicker/HuePicker.tsx
197
184
  var HuePicker = (props) => {
198
- var _effect = _useSignals3();
199
- try {
200
- const { t } = useTranslation2("os");
201
- return /* @__PURE__ */ React3.createElement(PickerButton, {
202
- Component: HuePreview,
203
- label: t("select hue label"),
204
- icon: "ph--palette--regular",
205
- values: hues,
206
- ...props
207
- });
208
- } finally {
209
- _effect.f();
210
- }
185
+ const { t } = useTranslation2(osTranslations2);
186
+ return /* @__PURE__ */ React3.createElement(PickerButton, {
187
+ Component: HuePreview,
188
+ label: t("select hue label"),
189
+ icon: "ph--palette--regular",
190
+ values: hues,
191
+ ...props
192
+ });
211
193
  };
212
194
  var HuePreview = ({ value, size = 5 }) => {
213
- var _effect = _useSignals3();
214
- try {
215
- return /* @__PURE__ */ React3.createElement("div", {
216
- role: "none",
217
- className: "flex justify-center items-center"
218
- }, /* @__PURE__ */ React3.createElement("svg", {
219
- viewBox: `0 0 ${size} ${size}`,
220
- className: getSize(size)
221
- }, /* @__PURE__ */ React3.createElement("rect", {
222
- x: 0,
223
- y: 0,
224
- width: size,
225
- height: size,
226
- fill: `var(--dx-${value}Fill)`,
227
- strokeWidth: 4
228
- })));
229
- } finally {
230
- _effect.f();
231
- }
195
+ return /* @__PURE__ */ React3.createElement("div", {
196
+ role: "none",
197
+ className: "flex justify-center items-center"
198
+ }, /* @__PURE__ */ React3.createElement("svg", {
199
+ viewBox: `0 0 ${size} ${size}`,
200
+ className: getSize(size)
201
+ }, /* @__PURE__ */ React3.createElement("rect", {
202
+ x: 0,
203
+ y: 0,
204
+ width: size,
205
+ height: size,
206
+ fill: `var(--dx-${value}Fill)`,
207
+ strokeWidth: 4
208
+ })));
232
209
  };
233
210
 
234
211
  // src/components/IconPicker/IconPicker.tsx
235
- import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
236
212
  import React4 from "react";
237
213
  import { Icon as Icon3, useTranslation as useTranslation3 } from "@dxos/react-ui";
214
+ import { osTranslations as osTranslations3 } from "@dxos/ui-theme";
238
215
  var IconPicker = ({ ...props }) => {
239
- var _effect = _useSignals4();
240
- try {
241
- const { t } = useTranslation3("os");
242
- return /* @__PURE__ */ React4.createElement(PickerButton, {
243
- Component: IconPreview,
244
- label: t("select icon label"),
245
- icon: "ph--selection--regular",
246
- values: iconValues,
247
- ...props
248
- });
249
- } finally {
250
- _effect.f();
251
- }
216
+ const { t } = useTranslation3(osTranslations3);
217
+ return /* @__PURE__ */ React4.createElement(PickerButton, {
218
+ Component: IconPreview,
219
+ label: t("select icon label"),
220
+ icon: "ph--selection--regular",
221
+ values: iconValues,
222
+ ...props
223
+ });
252
224
  };
253
225
  var IconPreview = ({ value, size }) => {
254
- var _effect = _useSignals4();
255
- try {
256
- return /* @__PURE__ */ React4.createElement(Icon3, {
257
- icon: `ph--${value}--regular`,
258
- size
259
- });
260
- } finally {
261
- _effect.f();
262
- }
226
+ return /* @__PURE__ */ React4.createElement(Icon3, {
227
+ icon: `ph--${value}--regular`,
228
+ size
229
+ });
263
230
  };
264
- var icons = [
265
- "ph--house-line--regular",
266
- "ph--planet--regular",
267
- "ph--castle-turret--regular",
268
- "ph--snowflake--regular",
269
- "ph--virus--regular",
270
- "ph--graph--regular",
271
- "ph--air-traffic-control--regular",
272
- "ph--asterisk--regular",
273
- "ph--atom--regular",
274
- "ph--basketball--regular",
275
- "ph--butterfly--regular",
276
- "ph--cactus--regular",
277
- "ph--cake--regular",
278
- "ph--calendar-dots--regular",
279
- "ph--campfire--regular",
280
- "ph--command--regular",
281
- "ph--confetti--regular",
282
- "ph--detective--regular",
283
- "ph--disco-ball--regular",
284
- "ph--dna--regular",
285
- "ph--factory--regular",
286
- "ph--flag-banner-fold--regular",
287
- "ph--flask--regular",
288
- "ph--flower-lotus--regular",
289
- "ph--flying-saucer--regular",
290
- "ph--game-controller--regular",
291
- "ph--gavel--regular",
292
- "ph--gift--regular",
293
- "ph--guitar--regular",
294
- "ph--hamburger--regular",
295
- "ph--handshake--regular",
296
- "ph--heart--regular",
297
- "ph--lightbulb--regular",
298
- "ph--lock--regular",
299
- "ph--martini--regular",
300
- "ph--medal-military--regular",
301
- "ph--moped-front--regular",
302
- "ph--office-chair--regular",
303
- "ph--paint-brush-household--regular",
304
- "ph--peace--regular",
305
- "ph--person-simple-hike--regular",
306
- "ph--piggy-bank--regular",
307
- "ph--potted-plant--regular",
308
- "ph--radioactive--regular",
309
- "ph--rocket-launch--regular",
310
- "ph--shield-star--regular",
311
- "ph--shopping-cart--regular",
312
- "ph--stethoscope--regular",
313
- "ph--student--regular",
314
- "ph--sun--regular",
315
- "ph--tote--regular",
316
- "ph--tree--regular",
317
- "ph--users-three--regular",
318
- "ph--yin-yang--regular"
319
- ];
320
- var iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);
321
231
  export {
322
232
  EmojiPickerBlock,
323
233
  EmojiPickerToolbarButton,
324
234
  HuePicker,
325
235
  IconPicker,
326
- PickerButton,
327
- iconValues,
328
- icons
236
+ PickerButton
329
237
  };
330
238
  //# sourceMappingURL=index.mjs.map