@dxos/react-ui-pickers 0.7.5-labs.c0e040f → 0.7.5-labs.d199c0f
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.
- package/dist/lib/browser/index.mjs +137 -97
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +144 -109
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +137 -97
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/EmojiPicker.d.ts +3 -3
- package/dist/types/src/components/EmojiPicker.d.ts.map +1 -1
- package/dist/types/src/components/EmojiPicker.stories.d.ts.map +1 -1
- package/dist/types/src/components/HuePicker.d.ts +7 -14
- package/dist/types/src/components/HuePicker.d.ts.map +1 -1
- package/dist/types/src/components/HuePicker.stories.d.ts +1 -2
- package/dist/types/src/components/HuePicker.stories.d.ts.map +1 -1
- package/dist/types/src/components/IconPicker.d.ts +11 -0
- package/dist/types/src/components/IconPicker.d.ts.map +1 -0
- package/dist/types/src/components/IconPicker.stories.d.ts +7 -0
- package/dist/types/src/components/IconPicker.stories.d.ts.map +1 -0
- package/dist/types/src/components/ToolbarPicker.d.ts +17 -0
- package/dist/types/src/components/ToolbarPicker.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +2 -0
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/package.json +9 -8
- package/src/components/EmojiPicker.stories.tsx +4 -1
- package/src/components/EmojiPicker.tsx +1 -0
- package/src/components/HuePicker.stories.tsx +14 -29
- package/src/components/HuePicker.tsx +24 -172
- package/src/components/IconPicker.stories.tsx +39 -0
- package/src/components/IconPicker.tsx +92 -0
- package/src/components/ToolbarPicker.tsx +112 -0
- package/src/components/index.ts +2 -0
package/dist/lib/node/index.cjs
CHANGED
|
@@ -30,8 +30,9 @@ var node_exports = {};
|
|
|
30
30
|
__export(node_exports, {
|
|
31
31
|
EmojiPickerBlock: () => EmojiPickerBlock,
|
|
32
32
|
EmojiPickerToolbarButton: () => EmojiPickerToolbarButton,
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
HuePicker: () => HuePicker,
|
|
34
|
+
IconPicker: () => IconPicker,
|
|
35
|
+
ToolbarPickerButton: () => ToolbarPickerButton
|
|
35
36
|
});
|
|
36
37
|
module.exports = __toCommonJS(node_exports);
|
|
37
38
|
var import_data = __toESM(require("@emoji-mart/data"));
|
|
@@ -39,10 +40,15 @@ var import_react = __toESM(require("@emoji-mart/react"));
|
|
|
39
40
|
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
|
|
40
41
|
var import_react2 = __toESM(require("react"));
|
|
41
42
|
var import_react_ui = require("@dxos/react-ui");
|
|
42
|
-
var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
|
|
43
43
|
var import_react3 = __toESM(require("react"));
|
|
44
44
|
var import_react_ui2 = require("@dxos/react-ui");
|
|
45
45
|
var import_react_ui_theme = require("@dxos/react-ui-theme");
|
|
46
|
+
var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
|
|
47
|
+
var import_react4 = __toESM(require("react"));
|
|
48
|
+
var import_react_ui3 = require("@dxos/react-ui");
|
|
49
|
+
var import_react_ui_theme2 = require("@dxos/react-ui-theme");
|
|
50
|
+
var import_react5 = __toESM(require("react"));
|
|
51
|
+
var import_react_ui4 = require("@dxos/react-ui");
|
|
46
52
|
var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames }) => {
|
|
47
53
|
const { t } = (0, import_react_ui.useTranslation)("os");
|
|
48
54
|
const { themeMode } = (0, import_react_ui.useThemeContext)();
|
|
@@ -172,38 +178,19 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
172
178
|
side: "right"
|
|
173
179
|
}, t("clear label"), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Arrow, null)))));
|
|
174
180
|
};
|
|
175
|
-
var
|
|
176
|
-
const
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
viewBox: `0 0 ${size} ${size}`
|
|
181
|
-
}, /* @__PURE__ */ import_react3.default.createElement("rect", {
|
|
182
|
-
x: 0,
|
|
183
|
-
y: 0,
|
|
184
|
-
width: size,
|
|
185
|
-
height: size,
|
|
186
|
-
fill: `var(--dx-${hue}Surface)`
|
|
187
|
-
}), /* @__PURE__ */ import_react3.default.createElement("text", {
|
|
188
|
-
x: "10",
|
|
189
|
-
y: "15",
|
|
190
|
-
textAnchor: "middle",
|
|
191
|
-
fontSize: "14",
|
|
192
|
-
fontWeight: "bold",
|
|
193
|
-
fill: `var(--dx-${hue}SurfaceText)`
|
|
194
|
-
}, "T"));
|
|
195
|
-
};
|
|
196
|
-
var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultHue }) => {
|
|
197
|
-
const { t } = (0, import_react_ui2.useTranslation)("os");
|
|
198
|
-
const [hueValue, setHueValue] = (0, import_react_use_controllable_state2.useControllableState)({
|
|
199
|
-
prop: hue,
|
|
200
|
-
onChange: onChangeHue,
|
|
201
|
-
defaultProp: defaultHue
|
|
181
|
+
var ToolbarPickerButton = ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset }) => {
|
|
182
|
+
const [value, setValue] = (0, import_react_use_controllable_state2.useControllableState)({
|
|
183
|
+
prop: _value,
|
|
184
|
+
defaultProp: _defaultValue,
|
|
185
|
+
onChange
|
|
202
186
|
});
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
187
|
+
(0, import_react4.useEffect)(() => setValue(_value), [
|
|
188
|
+
_value
|
|
189
|
+
]);
|
|
190
|
+
const [open, setOpen] = (0, import_react4.useState)(false);
|
|
191
|
+
const suppressNextTooltip = (0, import_react4.useRef)(false);
|
|
192
|
+
const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react4.useState)(false);
|
|
193
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Root, {
|
|
207
194
|
open: triggerTooltipOpen,
|
|
208
195
|
onOpenChange: (nextOpen) => {
|
|
209
196
|
if (suppressNextTooltip.current) {
|
|
@@ -213,103 +200,151 @@ var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultH
|
|
|
213
200
|
setTriggerTooltipOpen(nextOpen);
|
|
214
201
|
}
|
|
215
202
|
}
|
|
216
|
-
}, /* @__PURE__ */
|
|
203
|
+
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Root, {
|
|
217
204
|
modal: false,
|
|
218
|
-
open
|
|
205
|
+
open,
|
|
219
206
|
onOpenChange: (nextOpen) => {
|
|
220
|
-
|
|
207
|
+
setOpen(nextOpen);
|
|
221
208
|
suppressNextTooltip.current = true;
|
|
222
209
|
}
|
|
223
|
-
}, /* @__PURE__ */
|
|
210
|
+
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Trigger, {
|
|
224
211
|
asChild: true
|
|
225
|
-
}, /* @__PURE__ */
|
|
212
|
+
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
|
|
226
213
|
asChild: true
|
|
227
|
-
}, /* @__PURE__ */
|
|
228
|
-
classNames: (0,
|
|
214
|
+
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.Button, {
|
|
215
|
+
classNames: (0, import_react_ui_theme2.mx)("gap-2 plb-1", classNames),
|
|
229
216
|
disabled
|
|
230
|
-
}, /* @__PURE__ */
|
|
217
|
+
}, /* @__PURE__ */ import_react4.default.createElement("span", {
|
|
231
218
|
className: "sr-only"
|
|
232
|
-
},
|
|
233
|
-
|
|
219
|
+
}, label), value && /* @__PURE__ */ import_react4.default.createElement(Component, {
|
|
220
|
+
value
|
|
221
|
+
}) || /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
|
|
222
|
+
icon,
|
|
234
223
|
size: 5
|
|
235
|
-
})))), /* @__PURE__ */
|
|
224
|
+
})))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Content, {
|
|
236
225
|
side: "bottom"
|
|
237
|
-
},
|
|
226
|
+
}, 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, {
|
|
238
227
|
side: "bottom",
|
|
239
228
|
classNames: "!w-40"
|
|
240
|
-
}, /* @__PURE__ */
|
|
229
|
+
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Viewport, {
|
|
241
230
|
classNames: "grid grid-cols-6"
|
|
242
|
-
},
|
|
243
|
-
return /* @__PURE__ */
|
|
244
|
-
key:
|
|
245
|
-
checked:
|
|
246
|
-
onCheckedChange: () =>
|
|
247
|
-
classNames: "
|
|
248
|
-
}, /* @__PURE__ */
|
|
249
|
-
|
|
231
|
+
}, values.map((_value2) => {
|
|
232
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.CheckboxItem, {
|
|
233
|
+
key: _value2,
|
|
234
|
+
checked: _value2 === value,
|
|
235
|
+
onCheckedChange: () => setValue(_value2),
|
|
236
|
+
classNames: "!p-0 items-center justify-center"
|
|
237
|
+
}, /* @__PURE__ */ import_react4.default.createElement(Component, {
|
|
238
|
+
value: _value2
|
|
250
239
|
}));
|
|
251
|
-
})
|
|
240
|
+
}), onReset && /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.CheckboxItem, {
|
|
241
|
+
onCheckedChange: () => onReset(),
|
|
242
|
+
classNames: "!p-0 items-center justify-center"
|
|
243
|
+
}, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
|
|
244
|
+
icon: "ph--x--regular",
|
|
245
|
+
size: 5
|
|
246
|
+
}))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Arrow, null)))));
|
|
252
247
|
};
|
|
253
|
-
var
|
|
248
|
+
var HuePicker = (props) => {
|
|
254
249
|
const { t } = (0, import_react_ui2.useTranslation)("os");
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
250
|
+
return /* @__PURE__ */ import_react3.default.createElement(ToolbarPickerButton, {
|
|
251
|
+
Component: HuePreview,
|
|
252
|
+
label: t("select hue label"),
|
|
253
|
+
icon: "ph--palette--regular",
|
|
254
|
+
values: import_react_ui_theme.hues,
|
|
255
|
+
...props
|
|
259
256
|
});
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
size: 4
|
|
292
|
-
})));
|
|
293
|
-
})), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Arrow, null)))), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Tooltip.Root, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Tooltip.Trigger, {
|
|
294
|
-
asChild: true
|
|
295
|
-
}, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Button, {
|
|
296
|
-
variant: "ghost",
|
|
297
|
-
onClick: onClickClear,
|
|
298
|
-
disabled
|
|
299
|
-
}, /* @__PURE__ */ import_react3.default.createElement("span", {
|
|
300
|
-
className: "sr-only"
|
|
301
|
-
}, t("clear label")), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
|
|
302
|
-
icon: "ph--arrow-counter-clockwise--regular",
|
|
257
|
+
};
|
|
258
|
+
var HuePreview = ({ value }) => {
|
|
259
|
+
const size = 16;
|
|
260
|
+
return /* @__PURE__ */ import_react3.default.createElement("div", {
|
|
261
|
+
className: "flex p-[2px] justify-center items-center"
|
|
262
|
+
}, /* @__PURE__ */ import_react3.default.createElement("svg", {
|
|
263
|
+
width: size,
|
|
264
|
+
height: size,
|
|
265
|
+
viewBox: `0 0 ${size} ${size}`
|
|
266
|
+
}, /* @__PURE__ */ import_react3.default.createElement("rect", {
|
|
267
|
+
x: 0,
|
|
268
|
+
y: 0,
|
|
269
|
+
width: size,
|
|
270
|
+
height: size,
|
|
271
|
+
fill: `var(--dx-${value}Fill)`,
|
|
272
|
+
strokeWidth: 4
|
|
273
|
+
})));
|
|
274
|
+
};
|
|
275
|
+
var IconPicker = ({ ...props }) => {
|
|
276
|
+
const { t } = (0, import_react_ui4.useTranslation)("os");
|
|
277
|
+
return /* @__PURE__ */ import_react5.default.createElement(ToolbarPickerButton, {
|
|
278
|
+
Component: IconPreview,
|
|
279
|
+
label: t("select icon label"),
|
|
280
|
+
icon: "ph--selection--regular",
|
|
281
|
+
values: iconValues,
|
|
282
|
+
...props
|
|
283
|
+
});
|
|
284
|
+
};
|
|
285
|
+
var IconPreview = ({ value }) => {
|
|
286
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_react_ui4.Icon, {
|
|
287
|
+
icon: `ph--${value}--regular`,
|
|
303
288
|
size: 5
|
|
304
|
-
})
|
|
305
|
-
side: "right"
|
|
306
|
-
}, t("clear label"), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Tooltip.Arrow, null)))));
|
|
289
|
+
});
|
|
307
290
|
};
|
|
291
|
+
var icons = [
|
|
292
|
+
"ph--air-traffic-control--regular",
|
|
293
|
+
"ph--asterisk--regular",
|
|
294
|
+
"ph--atom--regular",
|
|
295
|
+
"ph--basketball--regular",
|
|
296
|
+
"ph--butterfly--regular",
|
|
297
|
+
"ph--cactus--regular",
|
|
298
|
+
"ph--cake--regular",
|
|
299
|
+
"ph--calendar-dots--regular",
|
|
300
|
+
"ph--campfire--regular",
|
|
301
|
+
"ph--command--regular",
|
|
302
|
+
"ph--confetti--regular",
|
|
303
|
+
"ph--detective--regular",
|
|
304
|
+
"ph--disco-ball--regular",
|
|
305
|
+
"ph--dna--regular",
|
|
306
|
+
"ph--factory--regular",
|
|
307
|
+
"ph--flag-banner-fold--regular",
|
|
308
|
+
"ph--flask--regular",
|
|
309
|
+
"ph--flower-lotus--regular",
|
|
310
|
+
"ph--flying-saucer--regular",
|
|
311
|
+
"ph--game-controller--regular",
|
|
312
|
+
"ph--gavel--regular",
|
|
313
|
+
"ph--gift--regular",
|
|
314
|
+
"ph--guitar--regular",
|
|
315
|
+
"ph--hamburger--regular",
|
|
316
|
+
"ph--handshake--regular",
|
|
317
|
+
"ph--heart--regular",
|
|
318
|
+
"ph--lightbulb--regular",
|
|
319
|
+
"ph--lock--regular",
|
|
320
|
+
"ph--martini--regular",
|
|
321
|
+
"ph--medal-military--regular",
|
|
322
|
+
"ph--moped-front--regular",
|
|
323
|
+
"ph--office-chair--regular",
|
|
324
|
+
"ph--paint-brush-household--regular",
|
|
325
|
+
"ph--peace--regular",
|
|
326
|
+
"ph--person-simple-hike--regular",
|
|
327
|
+
"ph--piggy-bank--regular",
|
|
328
|
+
"ph--potted-plant--regular",
|
|
329
|
+
"ph--radioactive--regular",
|
|
330
|
+
"ph--rocket-launch--regular",
|
|
331
|
+
"ph--shield-star--regular",
|
|
332
|
+
"ph--shopping-cart--regular",
|
|
333
|
+
"ph--stethoscope--regular",
|
|
334
|
+
"ph--student--regular",
|
|
335
|
+
"ph--sun--regular",
|
|
336
|
+
"ph--tote--regular",
|
|
337
|
+
"ph--tree--regular",
|
|
338
|
+
"ph--users-three--regular",
|
|
339
|
+
"ph--yin-yang--regular"
|
|
340
|
+
];
|
|
341
|
+
var iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);
|
|
308
342
|
// Annotate the CommonJS export names for ESM import in node:
|
|
309
343
|
0 && (module.exports = {
|
|
310
344
|
EmojiPickerBlock,
|
|
311
345
|
EmojiPickerToolbarButton,
|
|
312
|
-
|
|
313
|
-
|
|
346
|
+
HuePicker,
|
|
347
|
+
IconPicker,
|
|
348
|
+
ToolbarPickerButton
|
|
314
349
|
});
|
|
315
350
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/EmojiPicker.tsx", "../../../src/components/HuePicker.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n Icon,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = {\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n classNames,\n}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <Icon icon='ph--user-circle--regular' size={5} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span className='grow pis-14'>{emojiValue}</span>\n <Icon icon='ph--caret-down--regular' size={4} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n DropdownMenu,\n Icon,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useTranslation,\n} from '@dxos/react-ui';\nimport { hues, mx } from '@dxos/react-ui-theme';\n\nconst HuePreview = ({ hue }: { hue: string }) => {\n const size = 20;\n return (\n <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${hue}Surface)`} />\n <text x='10' y='15' textAnchor='middle' fontSize='14' fontWeight='bold' fill={`var(--dx-${hue}SurfaceText)`}>\n T\n </text>\n </svg>\n );\n};\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultHue?: string;\n hue?: string;\n onChangeHue?: (nextHue: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const HuePickerToolbarButton = ({\n disabled,\n hue,\n onChangeHue,\n classNames,\n defaultHue,\n}: ThemedClassName<Omit<HuePickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n\n const [hueValue, setHueValue] = useControllableState<string>({\n prop: hue,\n onChange: onChangeHue,\n defaultProp: defaultHue,\n });\n\n const [huePickerOpen, setHuePickerOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={huePickerOpen}\n onOpenChange={(nextOpen) => {\n setHuePickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>\n <span className='sr-only'>{t('select hue label')}</span>\n <Icon icon='ph--palette--regular' size={5} />\n </Toolbar.Button>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select hue label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!w-40'>\n <DropdownMenu.Viewport classNames='grid grid-cols-6'>\n {hues.map((hue) => {\n return (\n <DropdownMenu.CheckboxItem\n key={hue}\n checked={hue === hueValue}\n onCheckedChange={() => setHueValue(hue)}\n classNames={'px-0 py-2 items-center justify-center'}\n >\n <HuePreview hue={hue} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking hue alongside a button for unsetting it.\n */\nexport const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {\n const { t } = useTranslation('os');\n\n const [hueValue, setHueValue] = useControllableState<string>({\n prop: hue,\n onChange: onChangeHue,\n defaultProp: defaultHue,\n });\n\n return (\n <>\n <DropdownMenu.Root modal={false}>\n <DropdownMenu.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select hue label')}</span>\n <div role='none' className='pis-14 grow flex items-center justify-center gap-2'>\n {hue ? (\n <>\n <HuePreview hue={hueValue!} />\n <span>{t(`${hueValue} label`)}</span>\n </>\n ) : (\n <span>{t('select a hue label')}</span>\n )}\n </div>\n <Icon icon='ph--caret-down--regular' size={4} />\n </Button>\n </DropdownMenu.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='right'>\n <DropdownMenu.Viewport>\n {hues.map((hue) => {\n return (\n <DropdownMenu.CheckboxItem\n key={hue}\n checked={hue === hueValue}\n onCheckedChange={() => setHueValue(hue)}\n >\n <HuePreview hue={hue} />\n <span className='grow'>{t(`${hue} label`)}</span>\n <DropdownMenu.ItemIndicator>\n <Icon icon='ph--check--regular' size={4} />\n </DropdownMenu.ItemIndicator>\n </DropdownMenu.CheckboxItem>\n );\n })}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["import_react", "import_react_use_controllable_state", "
|
|
3
|
+
"sources": ["../../../src/components/EmojiPicker.tsx", "../../../src/components/HuePicker.tsx", "../../../src/components/ToolbarPicker.tsx", "../../../src/components/IconPicker.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Popover,\n type ThemedClassName,\n Toolbar,\n Tooltip,\n useMediaQuery,\n useThemeContext,\n useTranslation,\n Icon,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = {\n disabled?: boolean;\n defaultEmoji?: string;\n emoji?: string;\n onChangeEmoji?: (nextEmoji: string) => void;\n onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n disabled,\n defaultEmoji,\n emoji,\n onChangeEmoji,\n classNames,\n}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {\n const { t } = useTranslation('os');\n const { themeMode } = useThemeContext();\n\n const [_emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <Popover.Root\n open={emojiPickerOpen}\n onOpenChange={(nextOpen) => {\n setEmojiPickerOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <Popover.Trigger asChild>\n <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <Icon icon='ph--user-circle--regular' size={5} />\n </Toolbar.Button>\n </Popover.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {t('select emoji label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <Popover.Portal>\n <Popover.Content\n side='bottom'\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n suppressNextTooltip.current = true;\n }\n }}\n >\n {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n </Tooltip.Root>\n );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n * @deprecated\n */\nexport const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {\n const { t } = useTranslation('os');\n const [isMd] = useMediaQuery('md', { ssr: false });\n\n const [emojiValue, setEmojiValue] = useControllableState<string>({\n prop: emoji,\n onChange: onChangeEmoji,\n defaultProp: defaultEmoji,\n });\n\n const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n return (\n <>\n <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n <Popover.Trigger asChild>\n <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>\n <span className='sr-only'>{t('select emoji label')}</span>\n <span className='grow pis-14'>{emojiValue}</span>\n <Icon icon='ph--caret-down--regular' size={4} />\n </Button>\n </Popover.Trigger>\n <Popover.Content\n side='right'\n sideOffset={isMd ? 0 : -310}\n onKeyDownCapture={(event) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n setEmojiPickerOpen(false);\n }\n }}\n >\n <EmojiMart\n data={emojiData}\n onEmojiSelect={({ native }: { native?: string }) => {\n if (native) {\n setEmojiValue(native);\n setEmojiPickerOpen(false);\n }\n }}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <Button variant='ghost' onClick={onClickClear} disabled={disabled}>\n <span className='sr-only'>{t('clear label')}</span>\n <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n </Button>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='right'>\n {t('clear label')}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip.Root>\n </>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { ToolbarPickerButton, type ToolbarPickerProps } from './ToolbarPicker';\n\nexport type HuePickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <ToolbarPickerButton\n Component={HuePreview}\n label={t('select hue label')}\n icon='ph--palette--regular'\n values={hues}\n {...props}\n />\n );\n};\n\nconst HuePreview = ({ value }: { value: string }) => {\n const size = 16;\n return (\n <div className='flex p-[2px] justify-center items-center'>\n <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\n\nimport { DropdownMenu, Icon, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type ToolbarPickerProps = {\n Component: FC<{ value: string }>;\n label: string;\n icon: string;\n values: string[];\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (value: string) => void;\n onReset?: () => void;\n};\n\nexport const ToolbarPickerButton = ({\n Component,\n disabled,\n classNames,\n defaultValue: _defaultValue,\n value: _value,\n values,\n label,\n icon,\n onChange,\n onReset,\n}: ThemedClassName<ToolbarPickerProps>) => {\n const [value, setValue] = useControllableState<string>({\n prop: _value,\n defaultProp: _defaultValue,\n onChange,\n });\n // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n useEffect(() => setValue(_value), [_value]);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const suppressNextTooltip = useRef<boolean>(false);\n const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n return (\n <Tooltip.Root\n open={triggerTooltipOpen}\n onOpenChange={(nextOpen) => {\n if (suppressNextTooltip.current) {\n setTriggerTooltipOpen(false);\n suppressNextTooltip.current = false;\n } else {\n setTriggerTooltipOpen(nextOpen);\n }\n }}\n >\n <DropdownMenu.Root\n modal={false}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n suppressNextTooltip.current = true;\n }}\n >\n <Tooltip.Trigger asChild>\n <DropdownMenu.Trigger asChild>\n <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>\n <span className='sr-only'>{label}</span>\n {(value && <Component value={value} />) || <Icon icon={icon} size={5} />}\n </Toolbar.Button>\n </DropdownMenu.Trigger>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content side='bottom'>\n {label}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </Tooltip.Portal>\n <DropdownMenu.Portal>\n <DropdownMenu.Content side='bottom' classNames='!w-40'>\n <DropdownMenu.Viewport classNames='grid grid-cols-6'>\n {values.map((_value) => {\n return (\n <DropdownMenu.CheckboxItem\n key={_value}\n checked={_value === value}\n onCheckedChange={() => setValue(_value)}\n classNames={'!p-0 items-center justify-center'}\n >\n <Component value={_value} />\n </DropdownMenu.CheckboxItem>\n );\n })}\n {onReset && (\n <DropdownMenu.CheckboxItem\n onCheckedChange={() => onReset()}\n classNames={'!p-0 items-center justify-center'}\n >\n <Icon icon='ph--x--regular' size={5} />\n </DropdownMenu.CheckboxItem>\n )}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n </Tooltip.Root>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { ToolbarPickerButton, type ToolbarPickerProps } from './ToolbarPicker';\n\nexport type IconPickerProps = {\n disabled?: boolean;\n defaultValue?: string;\n value?: string;\n onChange?: (nextHue: string) => void;\n onReset?: ButtonProps['onClick'];\n} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n const { t } = useTranslation('os');\n\n return (\n <ToolbarPickerButton\n Component={IconPreview}\n label={t('select icon label')}\n icon='ph--selection--regular'\n values={iconValues}\n {...props}\n />\n );\n};\n\nconst IconPreview = ({ value }: { value: string }) => {\n return <Icon icon={`ph--${value}--regular`} size={5} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\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\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,kBAAsB;AACtB,mBAAsB;AACtB,0CAAqC;AACrC,IAAAA,gBAAwC;AAExC,sBAWO;AChBP,IAAAA,gBAAkB;AAElB,IAAAC,mBAAuE;AACvE,4BAAqB;ACHrB,IAAAC,uCAAqC;AACrC,IAAAF,gBAA4D;AAE5D,IAAAC,mBAA2E;AAC3E,IAAAE,yBAAmB;ACJnB,IAAAH,gBAAkB;AAElB,IAAAC,mBAA6E;AH6BtE,IAAMG,2BAA2B,CAAC,EACvCC,UACAC,cACAC,OACAC,eACAC,WAAU,MAC8C;AACxD,QAAM,EAAEC,EAAC,QAAKC,gCAAe,IAAA;AAC7B,QAAM,EAAEC,UAAS,QAAKC,iCAAAA;AAEtB,QAAM,CAACC,aAAaC,aAAAA,QAAiBC,0DAA6B;IAChEC,MAAMV;IACNW,UAAUV;IACVW,aAAab;EACf,CAAA;AAEA,QAAM,CAACc,iBAAiBC,kBAAAA,QAAsBC,wBAAkB,KAAA;AAChE,QAAMC,0BAAsBC,sBAAgB,KAAA;AAC5C,QAAM,CAACC,oBAAoBC,qBAAAA,QAAyBJ,wBAAS,KAAA;AAE7D,SACE,8BAAAK,QAAA,cAACC,wBAAQC,MAAI;IACXC,MAAML;IACNM,cAAc,CAACC,aAAAA;AACb,UAAIT,oBAAoBU,SAAS;AAC/BP,8BAAsB,KAAA;AACtBH,4BAAoBU,UAAU;MAChC,OAAO;AACLP,8BAAsBM,QAAAA;MACxB;IACF;KAEA,8BAAAL,QAAA,cAACO,wBAAQL,MAAI;IACXC,MAAMV;IACNW,cAAc,CAACC,aAAAA;AACbX,yBAAmBW,QAAAA;AACnBT,0BAAoBU,UAAU;IAChC;KAEA,8BAAAN,QAAA,cAACC,wBAAQO,SAAO;IAACC,SAAAA;KACf,8BAAAT,QAAA,cAACO,wBAAQC,SAAO;IAACC,SAAAA;KACf,8BAAAT,QAAA,cAACU,wBAAQC,QAAM;IAAC7B,YAAY;MAAC;MAAwBA;;IAAaJ;KAChE,8BAAAsB,QAAA,cAACY,QAAAA;IAAKC,WAAU;KAAW9B,EAAE,oBAAA,CAAA,GAC7B,8BAAAiB,QAAA,cAACc,sBAAAA;IAAKC,MAAK;IAA2BC,MAAM;SAIlD,8BAAAhB,QAAA,cAACC,wBAAQgB,QAAM,MACb,8BAAAjB,QAAA,cAACC,wBAAQiB,SAAO;IAACC,MAAK;KACnBpC,EAAE,oBAAA,GACH,8BAAAiB,QAAA,cAACC,wBAAQmB,OAAK,IAAA,CAAA,CAAA,GAGlB,8BAAApB,QAAA,cAACO,wBAAQU,QAAM,MACb,8BAAAjB,QAAA,cAACO,wBAAQW,SAAO;IACdC,MAAK;IACLE,kBAAkB,CAACC,UAAAA;AACjB,UAAIA,MAAMC,QAAQ,UAAU;AAC1BD,cAAME,gBAAe;AACrB9B,2BAAmB,KAAA;AACnBE,4BAAoBU,UAAU;MAChC;IACF;KAGA,8BAAAN,QAAA,cAACyB,aAAAA,SAAAA;IACCC,MAAMC,YAAAA;IACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,UAAIA,QAAQ;AACVzC,sBAAcyC,MAAAA;AACdnC,2BAAmB,KAAA;MACrB;IACF;IACAoC,WAAW;IACXC,iBAAiB;IACjBC,gBAAgB;IAChBC,OAAOhD;MAET,8BAAAe,QAAA,cAACO,wBAAQa,OAAK,IAAA,CAAA,CAAA,CAAA,CAAA;AAM1B;AAMO,IAAMc,mBAAmB,CAAC,EAAExD,UAAUC,cAAcC,OAAOC,eAAesD,aAAY,MAAoB;AAC/G,QAAM,EAAEpD,EAAC,QAAKC,gCAAe,IAAA;AAC7B,QAAM,CAACoD,IAAAA,QAAQC,+BAAc,MAAM;IAAEC,KAAK;EAAM,CAAA;AAEhD,QAAM,CAACC,YAAYnD,aAAAA,QAAiBC,0DAA6B;IAC/DC,MAAMV;IACNW,UAAUV;IACVW,aAAab;EACf,CAAA;AAEA,QAAM,CAACc,iBAAiBC,kBAAAA,QAAsBC,wBAAkB,KAAA;AAEhE,SACE,8BAAAK,QAAA,cAAA,cAAAA,QAAA,UAAA,MACE,8BAAAA,QAAA,cAACO,wBAAQL,MAAI;IAACC,MAAMV;IAAiBW,cAAcV;KACjD,8BAAAM,QAAA,cAACO,wBAAQC,SAAO;IAACC,SAAAA;KACf,8BAAAT,QAAA,cAACW,wBAAAA;IAAO6B,SAAQ;IAAQ1D,YAAW;IAAuBJ;KACxD,8BAAAsB,QAAA,cAACY,QAAAA;IAAKC,WAAU;KAAW9B,EAAE,oBAAA,CAAA,GAC7B,8BAAAiB,QAAA,cAACY,QAAAA;IAAKC,WAAU;KAAe0B,UAAAA,GAC/B,8BAAAvC,QAAA,cAACc,sBAAAA;IAAKC,MAAK;IAA0BC,MAAM;QAG/C,8BAAAhB,QAAA,cAACO,wBAAQW,SAAO;IACdC,MAAK;IACLsB,YAAYL,OAAO,IAAI;IACvBf,kBAAkB,CAACC,UAAAA;AACjB,UAAIA,MAAMC,QAAQ,UAAU;AAC1BD,cAAME,gBAAe;AACrB9B,2BAAmB,KAAA;MACrB;IACF;KAEA,8BAAAM,QAAA,cAACyB,aAAAA,SAAAA;IACCC,MAAMC,YAAAA;IACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,UAAIA,QAAQ;AACVzC,sBAAcyC,MAAAA;AACdnC,2BAAmB,KAAA;MACrB;IACF;IACAoC,WAAW;IACXC,iBAAiB;IACjBC,gBAAgB;MAElB,8BAAAhC,QAAA,cAACO,wBAAQa,OAAK,IAAA,CAAA,CAAA,GAGlB,8BAAApB,QAAA,cAACC,wBAAQC,MAAI,MACX,8BAAAF,QAAA,cAACC,wBAAQO,SAAO;IAACC,SAAAA;KACf,8BAAAT,QAAA,cAACW,wBAAAA;IAAO6B,SAAQ;IAAQE,SAASP;IAAczD;KAC7C,8BAAAsB,QAAA,cAACY,QAAAA;IAAKC,WAAU;KAAW9B,EAAE,aAAA,CAAA,GAC7B,8BAAAiB,QAAA,cAACc,sBAAAA;IAAKC,MAAK;IAAuCC,MAAM;QAG5D,8BAAAhB,QAAA,cAACC,wBAAQgB,QAAM,MACb,8BAAAjB,QAAA,cAACC,wBAAQiB,SAAO;IAACC,MAAK;KACnBpC,EAAE,aAAA,GACH,8BAAAiB,QAAA,cAACC,wBAAQmB,OAAK,IAAA,CAAA,CAAA,CAAA,CAAA;AAM1B;AEtKO,IAAMuB,sBAAsB,CAAC,EAClCC,WACAlE,UACAI,YACA+D,cAAcC,eACdC,OAAOC,QACPC,QACAC,OACAnC,MACAxB,UACA4D,QAAO,MAC6B;AACpC,QAAM,CAACJ,OAAOK,QAAAA,QAAY/D,qCAAAA,sBAA6B;IACrDC,MAAM0D;IACNxD,aAAasD;IACbvD;EACF,CAAA;AAEA8D,+BAAU,MAAMD,SAASJ,MAAAA,GAAS;IAACA;GAAO;AAE1C,QAAM,CAAC7C,MAAMmD,OAAAA,QAAW3D,cAAAA,UAAkB,KAAA;AAE1C,QAAMC,0BAAsBC,cAAAA,QAAgB,KAAA;AAC5C,QAAM,CAACC,oBAAoBC,qBAAAA,QAAyBJ,cAAAA,UAAS,KAAA;AAE7D,SACEK,8BAAAA,QAAA,cAACC,iBAAAA,QAAQC,MAAI;IACXC,MAAML;IACNM,cAAc,CAACC,aAAAA;AACb,UAAIT,oBAAoBU,SAAS;AAC/BP,8BAAsB,KAAA;AACtBH,4BAAoBU,UAAU;MAChC,OAAO;AACLP,8BAAsBM,QAAAA;MACxB;IACF;KAEAL,8BAAAA,QAAA,cAACuD,8BAAarD,MAAI;IAChBsD,OAAO;IACPrD;IACAC,cAAc,CAACC,aAAAA;AACbiD,cAAQjD,QAAAA;AACRT,0BAAoBU,UAAU;IAChC;KAEAN,8BAAAA,QAAA,cAACC,iBAAAA,QAAQO,SAAO;IAACC,SAAAA;KACfT,8BAAAA,QAAA,cAACuD,8BAAa/C,SAAO;IAACC,SAAAA;KACpBT,8BAAAA,QAAA,cAACU,iBAAAA,QAAQC,QAAM;IAAC7B,gBAAY2E,2BAAG,eAAe3E,UAAAA;IAAaJ;KACzDsB,8BAAAA,QAAA,cAACY,QAAAA;IAAKC,WAAU;KAAWqC,KAAAA,GACzBH,SAAS/C,8BAAAA,QAAA,cAAC4C,WAAAA;IAAUG;QAAqB/C,8BAAAA,QAAA,cAACc,iBAAAA,MAAAA;IAAKC;IAAYC,MAAM;SAIzEhB,8BAAAA,QAAA,cAACC,iBAAAA,QAAQgB,QAAM,MACbjB,8BAAAA,QAAA,cAACC,iBAAAA,QAAQiB,SAAO;IAACC,MAAK;KACnB+B,OACDlD,8BAAAA,QAAA,cAACC,iBAAAA,QAAQmB,OAAK,IAAA,CAAA,CAAA,GAGlBpB,8BAAAA,QAAA,cAACuD,8BAAatC,QAAM,MAClBjB,8BAAAA,QAAA,cAACuD,8BAAarC,SAAO;IAACC,MAAK;IAASrC,YAAW;KAC7CkB,8BAAAA,QAAA,cAACuD,8BAAaG,UAAQ;IAAC5E,YAAW;KAC/BmE,OAAOU,IAAI,CAACX,YAAAA;AACX,WACEhD,8BAAAA,QAAA,cAACuD,8BAAaK,cAAY;MACxBrC,KAAKyB;MACLa,SAASb,YAAWD;MACpBe,iBAAiB,MAAMV,SAASJ,OAAAA;MAChClE,YAAY;OAEZkB,8BAAAA,QAAA,cAAC4C,WAAAA;MAAUG,OAAOC;;EAGxB,CAAA,GACCG,WACCnD,8BAAAA,QAAA,cAACuD,8BAAaK,cAAY;IACxBE,iBAAiB,MAAMX,QAAAA;IACvBrE,YAAY;KAEZkB,8BAAAA,QAAA,cAACc,iBAAAA,MAAAA;IAAKC,MAAK;IAAiBC,MAAM;QAIxChB,8BAAAA,QAAA,cAACuD,8BAAanC,OAAK,IAAA,CAAA,CAAA,CAAA,CAAA;AAM/B;AD5FO,IAAM2C,YAAY,CAACC,UAAAA;AACxB,QAAM,EAAEjF,EAAC,QAAKC,iBAAAA,gBAAe,IAAA;AAE7B,SACEgB,8BAAAA,QAAA,cAAC2C,qBAAAA;IACCC,WAAWqB;IACXf,OAAOnE,EAAE,kBAAA;IACTgC,MAAK;IACLkC,QAAQiB;IACP,GAAGF;;AAGV;AAEA,IAAMC,aAAa,CAAC,EAAElB,MAAK,MAAqB;AAC9C,QAAM/B,OAAO;AACb,SACEhB,8BAAAA,QAAA,cAACmE,OAAAA;IAAItD,WAAU;KACbb,8BAAAA,QAAA,cAACoE,OAAAA;IAAIC,OAAOrD;IAAMsD,QAAQtD;IAAMuD,SAAS,OAAOvD,IAAAA,IAAQA,IAAAA;KACtDhB,8BAAAA,QAAA,cAACwE,QAAAA;IAAKC,GAAG;IAAGC,GAAG;IAAGL,OAAOrD;IAAMsD,QAAQtD;IAAM2D,MAAM,YAAY5B,KAAAA;IAAc6B,aAAa;;AAIlG;AExBO,IAAMC,aAAa,CAAC,EAAE,GAAGb,MAAAA,MAAyC;AACvE,QAAM,EAAEjF,EAAC,QAAKC,iBAAAA,gBAAe,IAAA;AAE7B,SACEgB,8BAAAA,QAAA,cAAC2C,qBAAAA;IACCC,WAAWkC;IACX5B,OAAOnE,EAAE,mBAAA;IACTgC,MAAK;IACLkC,QAAQ8B;IACP,GAAGf;;AAGV;AAEA,IAAMc,cAAc,CAAC,EAAE/B,MAAK,MAAqB;AAC/C,SAAO/C,8BAAAA,QAAA,cAACc,iBAAAA,MAAAA;IAAKC,MAAM,OAAOgC,KAAAA;IAAkB/B,MAAM;;AACpD;AAMA,IAAMgE,QAAQ;EACZ;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;;AAGF,IAAMD,aAAaC,MAAMrB,IAAI,CAAC5C,SAASA,KAAKkE,MAAM,mBAAA,IAAuB,CAAA,KAAMlE,IAAAA;",
|
|
6
|
+
"names": ["import_react", "import_react_ui", "import_react_use_controllable_state", "import_react_ui_theme", "EmojiPickerToolbarButton", "disabled", "defaultEmoji", "emoji", "onChangeEmoji", "classNames", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "React", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "Popover", "Trigger", "asChild", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "side", "Arrow", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "EmojiPickerBlock", "onClickClear", "isMd", "useMediaQuery", "ssr", "emojiValue", "variant", "sideOffset", "onClick", "ToolbarPickerButton", "Component", "defaultValue", "_defaultValue", "value", "_value", "values", "label", "onReset", "setValue", "useEffect", "setOpen", "DropdownMenu", "modal", "mx", "Viewport", "map", "CheckboxItem", "checked", "onCheckedChange", "HuePicker", "props", "HuePreview", "hues", "div", "svg", "width", "height", "viewBox", "rect", "x", "y", "fill", "strokeWidth", "IconPicker", "IconPreview", "iconValues", "icons", "match"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytes":19195,"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/ToolbarPicker.tsx":{"bytes":11504,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker.tsx":{"bytes":4122,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/ToolbarPicker.tsx","kind":"import-statement","original":"./ToolbarPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/IconPicker.tsx":{"bytes":7443,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/ToolbarPicker.tsx","kind":"import-statement","original":"./ToolbarPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytes":810,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"},{"path":"packages/ui/react-ui-pickers/src/components/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"},{"path":"packages/ui/react-ui-pickers/src/components/IconPicker.tsx","kind":"import-statement","original":"./IconPicker"},{"path":"packages/ui/react-ui-pickers/src/components/ToolbarPicker.tsx","kind":"import-statement","original":"./ToolbarPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/index.ts":{"bytes":506,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-pickers/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":22041},"packages/ui/react-ui-pickers/dist/lib/node/index.cjs":{"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePicker","IconPicker","ToolbarPickerButton"],"entryPoint":"packages/ui/react-ui-pickers/src/index.ts","cssBundle":"packages/ui/react-ui-pickers/dist/lib/node/index.css","inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytesInOutput":5170},"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker.tsx":{"bytesInOutput":873},"packages/ui/react-ui-pickers/src/components/ToolbarPicker.tsx":{"bytesInOutput":3048},"packages/ui/react-ui-pickers/src/components/IconPicker.tsx":{"bytesInOutput":2002},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":11553},"packages/ui/react-ui-pickers/dist/lib/node/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1017},"packages/ui/react-ui-pickers/dist/lib/node/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":146}},"bytes":244}}}
|