@dxos/react-ui-pickers 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.14.0

package/dist/lib/index.mjs

@@ -1,9 +1,14 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Suspense, lazy, useEffect, useState } from "react";
-import { Button, ButtonGroup, DropdownMenu, Icon, IconButton, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { useControllableState } from "@dxos/react-hooks";
+import * as Button from "@dxos/react-ui/Button";
+import * as Hooks from "@dxos/react-ui/Hooks";
+import * as Icon from "@dxos/react-ui/Icon";
+import * as Popover from "@dxos/react-ui/Popover";
 import { getSize, osTranslations } from "@dxos/ui-theme";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { hues, iconValues } from "@dxos/ui-types";
+import * as Menu from "@dxos/react-ui/Menu";
+import * as Tooltip from "@dxos/react-ui/Tooltip";
 //#region src/components/EmojiPicker/EmojiPicker.tsx
 /**
 * emoji-mart plus its emoji database is ~480 KB; loading it with the barrel put it in every
@@ -13,9 +18,9 @@ var EmojiMartPanel = lazy(() => import("./chunk-EmojiMartPanel.mjs"));
 /**
 * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
 */
-var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
-	const { t } = useTranslation(osTranslations);
-	const { themeMode } = useThemeContext();
+var EmojiPickerToolbarButton = ({ size, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
+	const { t } = Hooks.useTranslation(osTranslations);
+	const themeMode = Hooks.useThemeMode();
 	const [_emojiValue, setEmojiValue] = useControllableState({
 		prop: emoji,
 		onChange: onChangeEmoji,
@@ -24,27 +29,28 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
 	const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
 	return /* @__PURE__ */ jsxs(Popover.Root, {
 		open: emojiPickerOpen,
-		onOpenChange: (nextOpen) => {
+		onOpenChange: ({ open: nextOpen }) => {
 			setEmojiPickerOpen(nextOpen);
 		},
+		positioning: { placement: "bottom" },
 		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
 			asChild: true,
-			children: /* @__PURE__ */ jsx(Toolbar.IconButton, {
-				icon: "ph--user-circle--regular",
+			children: /* @__PURE__ */ jsx(Button.Root, {
+				size,
 				label: t("select-emoji.label"),
+				icon: "ph--smiley--regular",
 				iconOnly: true,
 				tooltipSide: "bottom",
 				disabled
 			})
-		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
-			side: "bottom",
+		}), /* @__PURE__ */ jsx(Popover.Content, {
 			onKeyDownCapture: (event) => {
 				if (event.key === "Escape") {
 					event.stopPropagation();
 					setEmojiPickerOpen(false);
 				}
 			},
-			children: [/* @__PURE__ */ jsx(Suspense, {
+			children: /* @__PURE__ */ jsx(Suspense, {
 				fallback: null,
 				children: /* @__PURE__ */ jsx(EmojiMartPanel, {
 					onEmojiSelect: ({ native }) => {
@@ -55,32 +61,37 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
 					},
 					themeMode
 				})
-			}), /* @__PURE__ */ jsx(Popover.Arrow, {})]
-		}) })]
+			})
+		})]
 	});
 };
 /**
 * A button for picking an emoji alongside a button for unsetting it.
 */
 var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
-	const { t } = useTranslation(osTranslations);
-	const [isMd] = useMediaQuery("md");
+	const { t } = Hooks.useTranslation(osTranslations);
+	const [isMd] = Hooks.useMediaQuery("md");
 	const [emojiValue, setEmojiValue] = useControllableState({
 		prop: emoji,
 		onChange: onChangeEmoji,
 		defaultProp: defaultEmoji
 	});
 	const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-	return /* @__PURE__ */ jsxs(ButtonGroup, {
+	return /* @__PURE__ */ jsxs(Button.Group, {
 		classNames,
 		children: [/* @__PURE__ */ jsxs(Popover.Root, {
 			open: emojiPickerOpen,
-			onOpenChange: setEmojiPickerOpen,
+			onOpenChange: ({ open }) => setEmojiPickerOpen(open),
+			positioning: {
+				placement: "right",
+				gutter: isMd ? 0 : -310,
+				overflowPadding: 8
+			},
 			children: [/* @__PURE__ */ jsx(Popover.Trigger, {
 				asChild: true,
-				children: /* @__PURE__ */ jsxs(Button, {
+				children: /* @__PURE__ */ jsxs(Button.Root, {
 					variant: triggerVariant,
-					classNames: "grow gap-2 text-2xl",
+					classNames: "text-xl",
 					disabled,
 					children: [
 						/* @__PURE__ */ jsx("span", {
@@ -88,23 +99,21 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
 							children: t("select-emoji.label")
 						}),
 						/* @__PURE__ */ jsx("span", { children: emojiValue }),
-						/* @__PURE__ */ jsx(Icon, {
+						/* @__PURE__ */ jsx(Icon.Icon, {
 							icon: "ph--caret-down--bold",
-							size: 3
+							size: "xs"
 						})
 					]
 				})
-			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
-				side: "right",
-				sideOffset: isMd ? 0 : -310,
-				collisionPadding: 8,
+			}), /* @__PURE__ */ jsx(Popover.Content, {
+				classNames: "p-0",
 				onKeyDownCapture: (event) => {
 					if (event.key === "Escape") {
 						event.stopPropagation();
 						setEmojiPickerOpen(false);
 					}
 				},
-				children: [/* @__PURE__ */ jsx(Suspense, {
+				children: /* @__PURE__ */ jsx(Suspense, {
 					fallback: null,
 					children: /* @__PURE__ */ jsx(EmojiMartPanel, { onEmojiSelect: ({ native }) => {
 						if (native) {
@@ -112,9 +121,9 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
 							setEmojiPickerOpen(false);
 						}
 					} })
-				}), /* @__PURE__ */ jsx(Popover.Arrow, {})]
-			}) })]
-		}), /* @__PURE__ */ jsx(IconButton, {
+				})
+			})]
+		}), /* @__PURE__ */ jsx(Button.Root, {
 			icon: "ph--arrow-counter-clockwise--regular",
 			iconOnly: true,
 			label: t("clear.label"),
@@ -127,7 +136,9 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
 };
 //#endregion
 //#region src/components/PickerButton/PickerButton.tsx
-var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValueProp, value: valueProp, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
+/** Menu value of the reset row; outside every picker's value set. */
+var RESET = "__reset__";
+var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValueProp, value: valueProp, values, label, icon, onChange, onReset, rootVariant = "button", iconSize }) => {
 	const [value, setValue] = useControllableState({
 		prop: valueProp,
 		defaultProp: defaultValueProp,
@@ -135,79 +146,84 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValu
 	});
 	useEffect(() => setValue(valueProp), [valueProp]);
 	const [open, setOpen] = useState(false);
-	const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar.Button : Button;
-	return /* @__PURE__ */ jsxs(DropdownMenu.Root, {
-		modal: false,
+	return /* @__PURE__ */ jsxs(Menu.Root, {
 		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		onOpenChange: ({ open }) => setOpen(open),
+		positioning: { placement: "bottom" },
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, {
 			asChild: true,
-			content: label,
-			side: "bottom",
-			children: /* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+			children: /* @__PURE__ */ jsx(Tooltip.Trigger, {
 				asChild: true,
-				children: /* @__PURE__ */ jsxs(TriggerRoot, {
-					classNames: ["gap-2 py-1", classNames],
+				content: label,
+				side: "bottom",
+				children: /* @__PURE__ */ jsx(Button.Root, {
+					variant: rootVariant === "toolbar-button" ? "ghost" : "default",
+					iconOnly: true,
+					showTooltip: false,
+					label,
+					caretDown: true,
+					classNames,
 					disabled,
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "sr-only",
-							children: label
-						}),
-						value && /* @__PURE__ */ jsx(Component, {
-							value,
-							size: iconSize
-						}) || /* @__PURE__ */ jsx(Icon, {
-							icon,
-							size: iconSize
-						}),
-						/* @__PURE__ */ jsx(Icon, {
-							icon: "ph--caret-down--bold",
-							size: 3
-						})
-					]
+					children: value && /* @__PURE__ */ jsx(Component, {
+						value,
+						size: iconSize
+					}) || /* @__PURE__ */ jsx(Icon.Icon, {
+						icon,
+						size: iconSize
+					})
 				})
 			})
-		}), /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu.Content, {
-			side: "bottom",
-			classNames: "!w-min",
-			children: [/* @__PURE__ */ jsxs(DropdownMenu.Viewport, {
-				classNames: "grid grid-cols-[repeat(6,min-content)]",
-				children: [values.map((_value) => {
-					return /* @__PURE__ */ jsx(DropdownMenu.CheckboxItem, {
-						checked: _value === value,
-						onCheckedChange: () => setValue(_value),
-						classNames: "p-1 items-center justify-center aspect-square",
-						children: /* @__PURE__ */ jsx(Component, {
-							value: _value,
-							size: iconSize
-						})
-					}, _value);
-				}), onReset && /* @__PURE__ */ jsx(DropdownMenu.CheckboxItem, {
-					onCheckedChange: () => onReset(),
-					classNames: "p-1 items-center justify-center aspect-square",
-					children: /* @__PURE__ */ jsx(Icon, {
-						icon: "ph--x--regular",
+		}), /* @__PURE__ */ jsxs(Menu.Content, {
+			columns: 6,
+			children: [values.map((_value) => {
+				return /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+					item: {
+						value: _value,
+						label: _value
+					},
+					checked: _value === value,
+					onCheckedChange: () => setValue(_value),
+					children: /* @__PURE__ */ jsx(Component, {
+						value: _value,
 						size: iconSize
 					})
-				})]
-			}), /* @__PURE__ */ jsx(DropdownMenu.Arrow, {})]
-		}) })]
+				}, _value);
+			}), onReset && /* @__PURE__ */ jsx(Menu.Item, {
+				item: {
+					value: RESET,
+					label: "Reset"
+				},
+				onClick: () => onReset(),
+				children: /* @__PURE__ */ jsx(Icon.Icon, {
+					icon: "ph--x--regular",
+					size: iconSize
+				})
+			})]
+		})]
 	});
 };
 //#endregion
 //#region src/components/HuePicker/HuePicker.tsx
-var HuePicker = (props) => {
-	const { t } = useTranslation(osTranslations);
+var HuePicker = ({ label, ...props }) => {
+	const { t } = Hooks.useTranslation(osTranslations);
 	return /* @__PURE__ */ jsx(PickerButton, {
 		Component: HuePreview,
-		label: t("select-hue.label"),
+		label: label ?? t("select-hue.label"),
 		icon: "ph--palette--regular",
 		values: hues,
 		...props
 	});
 };
-var HuePreview = ({ value, size = 5 }) => {
+/** Next icon sizes as the Tailwind steps the preview's square is drawn at. */
+var PREVIEW_SIZES = {
+	xs: 3,
+	sm: 3.5,
+	md: 4,
+	lg: 5,
+	xl: 6
+};
+var HuePreview = ({ value, size: iconSize = "md" }) => {
+	const size = PREVIEW_SIZES[iconSize];
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex justify-center items-center",
 		children: /* @__PURE__ */ jsx("svg", {
@@ -227,7 +243,7 @@ var HuePreview = ({ value, size = 5 }) => {
 //#endregion
 //#region src/components/IconPicker/IconPicker.tsx
 var IconPicker = ({ ...props }) => {
-	const { t } = useTranslation(osTranslations);
+	const { t } = Hooks.useTranslation(osTranslations);
 	return /* @__PURE__ */ jsx(PickerButton, {
 		Component: IconPreview,
 		label: t("select-icon.label"),
@@ -237,7 +253,7 @@ var IconPicker = ({ ...props }) => {
 	});
 };
 var IconPreview = ({ value, size }) => {
-	return /* @__PURE__ */ jsx(Icon, {
+	return /* @__PURE__ */ jsx(Icon.Icon, {
 		icon: `ph--${value}--regular`,
 		size
 	});

package/dist/lib/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/EmojiPicker/EmojiPicker.tsx","../../src/components/PickerButton/PickerButton.tsx","../../src/components/HuePicker/HuePicker.tsx","../../src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport './emoji.css';\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { Suspense, lazy, useState } from 'react';\n\nimport {\n  Button,\n  ButtonGroup,\n  type ButtonProps,\n  Icon,\n  IconButton,\n  Popover,\n  type ThemedClassName,\n  Toolbar,\n  useMediaQuery,\n  useThemeContext,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\n\n/**\n * emoji-mart plus its emoji database is ~480 KB; loading it with the barrel put it in every\n * tab's boot graph, so the panel loads on first open instead.\n */\nconst EmojiMartPanel = lazy(() => import('./EmojiMartPanel'));\n\nexport type EmojiPickerProps = ThemedClassName<{\n  disabled?: boolean;\n  defaultEmoji?: string;\n  emoji?: string;\n  onChangeEmoji?: (nextEmoji: string) => void;\n  onClickClear?: ButtonProps['onClick'];\n  triggerVariant?: ButtonProps['variant'];\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  classNames,\n  emoji,\n  disabled,\n  defaultEmoji,\n  onChangeEmoji,\n}: Omit<EmojiPickerProps, 'onClickClear'>) => {\n  const { t } = useTranslation(osTranslations);\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\n  return (\n    <Popover.Root\n      open={emojiPickerOpen}\n      onOpenChange={(nextOpen) => {\n        setEmojiPickerOpen(nextOpen);\n      }}\n    >\n      <Popover.Trigger asChild>\n        <Toolbar.IconButton\n          icon='ph--user-circle--regular'\n          label={t('select-emoji.label')}\n          iconOnly\n          tooltipSide='bottom'\n          disabled={disabled}\n        />\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          side='bottom'\n          onKeyDownCapture={(event) => {\n            if (event.key === 'Escape') {\n              event.stopPropagation();\n              setEmojiPickerOpen(false);\n            }\n          }}\n        >\n          <Suspense fallback={null}>\n            <EmojiMartPanel\n              onEmojiSelect={({ native }: { native?: string }) => {\n                if (native) {\n                  setEmojiValue(native);\n                  setEmojiPickerOpen(false);\n                }\n              }}\n              themeMode={themeMode}\n            />\n          </Suspense>\n          <Popover.Arrow />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n  disabled,\n  defaultEmoji,\n  emoji,\n  onChangeEmoji,\n  onClickClear,\n  triggerVariant = 'ghost',\n  classNames,\n}: EmojiPickerProps) => {\n  const { t } = useTranslation(osTranslations);\n  const [isMd] = useMediaQuery('md');\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    <ButtonGroup classNames={classNames}>\n      <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n        <Popover.Trigger asChild>\n          <Button variant={triggerVariant} classNames='grow gap-2 text-2xl' disabled={disabled}>\n            <span className='sr-only'>{t('select-emoji.label')}</span>\n            <span>{emojiValue}</span>\n            <Icon icon='ph--caret-down--bold' size={3} />\n          </Button>\n        </Popover.Trigger>\n        {/* Portalled, like `EmojiPickerToolbarButton` above and `PickerButton` (which is why the hue\n            picker never had this problem): rendered in place, a 300px panel is clipped by the first\n            scrolling ancestor — in the profile page, the settings panel's own overflow. */}\n        <Popover.Portal>\n          <Popover.Content\n            side='right'\n            sideOffset={isMd ? 0 : -310}\n            collisionPadding={8}\n            onKeyDownCapture={(event) => {\n              if (event.key === 'Escape') {\n                event.stopPropagation();\n                setEmojiPickerOpen(false);\n              }\n            }}\n          >\n            <Suspense fallback={null}>\n              <EmojiMartPanel\n                onEmojiSelect={({ native }: { native?: string }) => {\n                  if (native) {\n                    setEmojiValue(native);\n                    setEmojiPickerOpen(false);\n                  }\n                }}\n              />\n            </Suspense>\n            <Popover.Arrow />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n      <IconButton\n        icon='ph--arrow-counter-clockwise--regular'\n        iconOnly\n        label={t('clear.label')}\n        tooltipSide='right'\n        variant={triggerVariant}\n        onClick={onClickClear}\n        disabled={disabled}\n      />\n    </ButtonGroup>\n  );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n  Component: FC<{ value: string; size?: IconProps['size'] }>;\n  label: string;\n  icon: string;\n  values: readonly string[];\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  onReset?: () => void;\n  rootVariant?: 'button' | 'toolbar-button';\n  iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n  Component,\n  disabled,\n  classNames,\n  defaultValue: defaultValueProp,\n  value: valueProp,\n  values,\n  label,\n  icon,\n  onChange,\n  onReset,\n  rootVariant = 'button',\n  iconSize = 5,\n}: PickerButtonProps) => {\n  const [value, setValue] = useControllableState<string>({\n    prop: valueProp,\n    defaultProp: defaultValueProp,\n    onChange,\n  });\n  // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n  useEffect(() => setValue(valueProp), [valueProp]);\n\n  const [open, setOpen] = useState<boolean>(false);\n  const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n  return (\n    <DropdownMenu.Root modal={false} open={open} onOpenChange={setOpen}>\n      <Tooltip.Trigger asChild content={label} side='bottom'>\n        <DropdownMenu.Trigger asChild>\n          <TriggerRoot classNames={['gap-2 py-1', classNames]} disabled={disabled}>\n            <span className='sr-only'>{label}</span>\n            {(value && <Component value={value} size={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n            <Icon icon='ph--caret-down--bold' size={3} />\n          </TriggerRoot>\n        </DropdownMenu.Trigger>\n      </Tooltip.Trigger>\n      <DropdownMenu.Portal>\n        <DropdownMenu.Content side='bottom' classNames='!w-min'>\n          <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n            {values.map((_value) => {\n              return (\n                <DropdownMenu.CheckboxItem\n                  key={_value}\n                  checked={_value === value}\n                  onCheckedChange={() => setValue(_value)}\n                  classNames={'p-1 items-center justify-center aspect-square'}\n                >\n                  <Component value={_value} size={iconSize} />\n                </DropdownMenu.CheckboxItem>\n              );\n            })}\n            {onReset && (\n              <DropdownMenu.CheckboxItem\n                onCheckedChange={() => onReset()}\n                classNames={'p-1 items-center justify-center aspect-square'}\n              >\n                <Icon icon='ph--x--regular' size={iconSize} />\n              </DropdownMenu.CheckboxItem>\n            )}\n          </DropdownMenu.Viewport>\n          <DropdownMenu.Arrow />\n        </DropdownMenu.Content>\n      </DropdownMenu.Portal>\n    </DropdownMenu.Root>\n  );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { getSize, osTranslations } from '@dxos/ui-theme';\nimport { hues } from '@dxos/ui-types';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (nextHue: string) => void;\n  onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n  const { t } = useTranslation(osTranslations);\n\n  return (\n    <PickerButton\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, size = 5 }: { value: string; size?: IconProps['size'] }) => {\n  return (\n    <div className='flex justify-center items-center'>\n      <svg viewBox={`0 0 ${size} ${size}`} className={getSize(size)}>\n        <rect x={0} y={0} width={size} height={size} fill={`var(--color-${value}-surface)`} strokeWidth={4} />\n      </svg>\n    </div>\n  );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\nimport { iconValues } from '@dxos/ui-types';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (nextHue: string) => void;\n  onReset?: ButtonProps['onClick'];\n} & Pick<\n  PickerButtonProps,\n  'disabled' | 'rootVariant' | 'iconSize' | 'defaultValue' | 'value' | 'onChange' | 'onReset'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n  const { t } = useTranslation(osTranslations);\n\n  return (\n    <PickerButton\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, size }: { value: string; size?: IconProps['size'] }) => {\n  return <Icon icon={`ph--${value}--regular`} size={size} />;\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/EmojiPicker/EmojiPicker.tsx","../../src/components/PickerButton/PickerButton.tsx","../../src/components/HuePicker/HuePicker.tsx","../../src/components/IconPicker/IconPicker.tsx"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport './emoji.css';\n\nimport React, { Suspense, lazy, useState } from 'react';\n\nimport { useControllableState } from '@dxos/react-hooks';\nimport * as Button from '@dxos/react-ui/Button';\nimport * as Hooks from '@dxos/react-ui/Hooks';\nimport * as Icon from '@dxos/react-ui/Icon';\nimport * as Popover from '@dxos/react-ui/Popover';\nimport type * as Util from '@dxos/react-ui/Util';\nimport { osTranslations } from '@dxos/ui-theme';\n\n/**\n * emoji-mart plus its emoji database is ~480 KB; loading it with the barrel put it in every\n * tab's boot graph, so the panel loads on first open instead.\n */\nconst EmojiMartPanel = lazy(() => import('./EmojiMartPanel.tsx'));\n\nexport type EmojiPickerProps = Util.ThemedClassName<{\n  disabled?: boolean;\n  size?: Button.RootProps['size'];\n  defaultEmoji?: string;\n  emoji?: string;\n  onChangeEmoji?: (nextEmoji: string) => void;\n  onClickClear?: Button.RootProps['onClick'];\n  triggerVariant?: Button.RootProps['variant'];\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  size,\n  emoji,\n  disabled,\n  defaultEmoji,\n  onChangeEmoji,\n}: Omit<EmojiPickerProps, 'onClickClear'>) => {\n  const { t } = Hooks.useTranslation(osTranslations);\n  const themeMode = Hooks.useThemeMode();\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    <Popover.Root\n      open={emojiPickerOpen}\n      onOpenChange={({ open: nextOpen }) => {\n        setEmojiPickerOpen(nextOpen);\n      }}\n      positioning={{ placement: 'bottom' }}\n    >\n      <Popover.Trigger asChild>\n        <Button.Root\n          size={size}\n          label={t('select-emoji.label')}\n          icon='ph--smiley--regular'\n          iconOnly\n          tooltipSide='bottom'\n          disabled={disabled}\n        />\n      </Popover.Trigger>\n      <Popover.Content\n        onKeyDownCapture={(event) => {\n          if (event.key === 'Escape') {\n            event.stopPropagation();\n            setEmojiPickerOpen(false);\n          }\n        }}\n      >\n        <Suspense fallback={null}>\n          <EmojiMartPanel\n            onEmojiSelect={({ native }: { native?: string }) => {\n              if (native) {\n                setEmojiValue(native);\n                setEmojiPickerOpen(false);\n              }\n            }}\n            themeMode={themeMode}\n          />\n        </Suspense>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n  disabled,\n  defaultEmoji,\n  emoji,\n  onChangeEmoji,\n  onClickClear,\n  triggerVariant = 'ghost',\n  classNames,\n}: EmojiPickerProps) => {\n  const { t } = Hooks.useTranslation(osTranslations);\n  const [isMd] = Hooks.useMediaQuery('md');\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    <Button.Group classNames={classNames}>\n      <Popover.Root\n        open={emojiPickerOpen}\n        onOpenChange={({ open }) => setEmojiPickerOpen(open)}\n        positioning={{ placement: 'right', gutter: isMd ? 0 : -310, overflowPadding: 8 }}\n      >\n        <Popover.Trigger asChild>\n          <Button.Root variant={triggerVariant} classNames='text-xl' disabled={disabled}>\n            <span className='sr-only'>{t('select-emoji.label')}</span>\n            <span>{emojiValue}</span>\n            <Icon.Icon icon='ph--caret-down--bold' size='xs' />\n          </Button.Root>\n        </Popover.Trigger>\n        {/* Portalled, like `EmojiPickerToolbarButton` above and `PickerButton` (which is why the hue\n            picker never had this problem): rendered in place, a 300px panel is clipped by the first\n            scrolling ancestor — in the profile page, the settings panel's own overflow. */}\n        <Popover.Content\n          classNames='p-0'\n          onKeyDownCapture={(event) => {\n            if (event.key === 'Escape') {\n              event.stopPropagation();\n              setEmojiPickerOpen(false);\n            }\n          }}\n        >\n          <Suspense fallback={null}>\n            <EmojiMartPanel\n              onEmojiSelect={({ native }: { native?: string }) => {\n                if (native) {\n                  setEmojiValue(native);\n                  setEmojiPickerOpen(false);\n                }\n              }}\n            />\n          </Suspense>\n        </Popover.Content>\n      </Popover.Root>\n      <Button.Root\n        icon='ph--arrow-counter-clockwise--regular'\n        iconOnly\n        label={t('clear.label')}\n        tooltipSide='right'\n        variant={triggerVariant}\n        onClick={onClickClear}\n        disabled={disabled}\n      />\n    </Button.Group>\n  );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type FC, useEffect, useState } from 'react';\n\nimport { useControllableState } from '@dxos/react-hooks';\nimport * as Button from '@dxos/react-ui/Button';\nimport * as Icon from '@dxos/react-ui/Icon';\nimport * as Menu from '@dxos/react-ui/Menu';\nimport * as Tooltip from '@dxos/react-ui/Tooltip';\nimport type * as Util from '@dxos/react-ui/Util';\n\nexport type PickerButtonProps = Util.ThemedClassName<{\n  Component: FC<{ value: string; size?: Icon.IconProps['size'] }>;\n  label: string;\n  icon: string;\n  values: readonly string[];\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  onReset?: () => void;\n  rootVariant?: 'button' | 'toolbar-button';\n  iconSize?: Icon.IconProps['size'];\n}>;\n\n/** Menu value of the reset row; outside every picker's value set. */\nconst RESET = '__reset__';\n\nexport const PickerButton = ({\n  Component,\n  disabled,\n  classNames,\n  defaultValue: defaultValueProp,\n  value: valueProp,\n  values,\n  label,\n  icon,\n  onChange,\n  onReset,\n  rootVariant = 'button',\n  iconSize,\n}: PickerButtonProps) => {\n  const [value, setValue] = useControllableState<string>({\n    prop: valueProp,\n    defaultProp: defaultValueProp,\n    onChange,\n  });\n  // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n  useEffect(() => setValue(valueProp), [valueProp]);\n\n  const [open, setOpen] = useState<boolean>(false);\n\n  return (\n    <Menu.Root open={open} onOpenChange={({ open }) => setOpen(open)} positioning={{ placement: 'bottom' }}>\n      {/* The menu trigger is outermost: both machines find the button by its id, and the tooltip adopts\n          the id it is handed while the menu would lose its own to one set above it. */}\n      <Menu.Trigger asChild>\n        <Tooltip.Trigger asChild content={label} side='bottom'>\n          <Button.Root\n            variant={rootVariant === 'toolbar-button' ? 'ghost' : 'default'}\n            iconOnly\n            showTooltip={false}\n            label={label}\n            caretDown\n            classNames={classNames}\n            disabled={disabled}\n          >\n            {(value && <Component value={value} size={iconSize} />) || <Icon.Icon icon={icon} size={iconSize} />}\n          </Button.Root>\n        </Tooltip.Trigger>\n      </Menu.Trigger>\n      <Menu.Content columns={6}>\n        {values.map((_value) => {\n          return (\n            <Menu.CheckboxItem\n              key={_value}\n              item={{ value: _value, label: _value }}\n              checked={_value === value}\n              onCheckedChange={() => setValue(_value)}\n            >\n              <Component value={_value} size={iconSize} />\n            </Menu.CheckboxItem>\n          );\n        })}\n        {onReset && (\n          <Menu.Item item={{ value: RESET, label: 'Reset' }} onClick={() => onReset()}>\n            <Icon.Icon icon='ph--x--regular' size={iconSize} />\n          </Menu.Item>\n        )}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport type * as Button from '@dxos/react-ui/Button';\nimport * as Hooks from '@dxos/react-ui/Hooks';\nimport type * as Util from '@dxos/react-ui/Util';\nimport { getSize, osTranslations } from '@dxos/ui-theme';\nimport { hues } from '@dxos/ui-types';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton/index.ts';\n\nexport type HuePickerProps = {\n  /** Replaces the generic \"select hue\" label (tooltip and screen-reader text). */\n  label?: string;\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (nextHue: string) => void;\n  onReset?: Button.RootProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = ({ label, ...props }: Util.ThemedClassName<HuePickerProps>) => {\n  const { t } = Hooks.useTranslation(osTranslations);\n\n  return (\n    <PickerButton\n      Component={HuePreview}\n      label={label ?? t('select-hue.label')}\n      icon='ph--palette--regular'\n      values={hues}\n      {...props}\n    />\n  );\n};\n\n/** Next icon sizes as the Tailwind steps the preview's square is drawn at. */\nconst PREVIEW_SIZES: Record<Util.Size, 3 | 3.5 | 4 | 5 | 6> = { xs: 3, sm: 3.5, md: 4, lg: 5, xl: 6 };\n\nconst HuePreview = ({ value, size: iconSize = 'md' }: { value: string; size?: Util.Size }) => {\n  const size = PREVIEW_SIZES[iconSize];\n  return (\n    <div className='flex justify-center items-center'>\n      <svg viewBox={`0 0 ${size} ${size}`} className={getSize(size)}>\n        <rect x={0} y={0} width={size} height={size} fill={`var(--color-${value}-surface)`} strokeWidth={4} />\n      </svg>\n    </div>\n  );\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport type * as Button from '@dxos/react-ui/Button';\nimport * as Hooks from '@dxos/react-ui/Hooks';\nimport * as Icon from '@dxos/react-ui/Icon';\nimport type * as Util from '@dxos/react-ui/Util';\nimport { osTranslations } from '@dxos/ui-theme';\nimport { iconValues } from '@dxos/ui-types';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton/index.ts';\n\nexport type IconPickerProps = {\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (nextHue: string) => void;\n  onReset?: Button.RootProps['onClick'];\n} & Pick<\n  PickerButtonProps,\n  'disabled' | 'rootVariant' | 'iconSize' | 'defaultValue' | 'value' | 'onChange' | 'onReset'\n>;\n\nexport const IconPicker = ({ ...props }: Util.ThemedClassName<IconPickerProps>) => {\n  const { t } = Hooks.useTranslation(osTranslations);\n\n  return (\n    <PickerButton\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, size }: { value: string; size?: Icon.IconProps['size'] }) => {\n  return <Icon.Icon icon={`ph--${value}--regular`} size={size} />;\n};\n"],"mappings":"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"}

package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts

@@ -1,18 +1,20 @@
 import './emoji.css';
 import React from 'react';
-import { type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
-export type EmojiPickerProps = ThemedClassName<{
+import * as Button from '@dxos/react-ui/Button';
+import type * as Util from '@dxos/react-ui/Util';
+export type EmojiPickerProps = Util.ThemedClassName<{
     disabled?: boolean;
+    size?: Button.RootProps['size'];
     defaultEmoji?: string;
     emoji?: string;
     onChangeEmoji?: (nextEmoji: string) => void;
-    onClickClear?: ButtonProps['onClick'];
-    triggerVariant?: ButtonProps['variant'];
+    onClickClear?: Button.RootProps['onClick'];
+    triggerVariant?: Button.RootProps['variant'];
 }>;
 /**
  * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
  */
-export declare const EmojiPickerToolbarButton: ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji, }: Omit<EmojiPickerProps, 'onClickClear'>) => React.JSX.Element;
+export declare const EmojiPickerToolbarButton: ({ size, emoji, disabled, defaultEmoji, onChangeEmoji, }: Omit<EmojiPickerProps, 'onClickClear'>) => React.JSX.Element;
 /**
  * A button for picking an emoji alongside a button for unsetting it.
  */

package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAmC,MAAM,OAAO,CAAC;AAExD,OAAO,EAGL,KAAK,WAAW,EAIhB,KAAK,eAAe,EAKrB,MAAM,gBAAgB,CAAC;AASxB,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACzC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,wBAAwB,kEAMlC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,sBAsDxC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gGAQ1B,gBAAgB,sBA8DlB,CAAC"}
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAmC,MAAM,OAAO,CAAC;AAGxD,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAIhD,OAAO,KAAK,KAAK,IAAI,MAAM,qBAAqB,CAAC;AASjD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,wBAAwB,4DAMlC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,sBAoDxC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gGAQ1B,gBAAgB,sBA6DlB,CAAC"}

package/dist/types/src/components/EmojiPicker/EmojiPicker.stories.d.ts

@@ -1,6 +1,6 @@
 import EmojiPicker from '@emoji-mart/react';
 import { type StoryObj } from '@storybook/react-vite';
-import { type EmojiPickerProps } from './EmojiPicker';
+import { type EmojiPickerProps } from './EmojiPicker.tsx';
 declare const meta: {
     title: string;
     component: typeof EmojiPicker;

package/dist/types/src/components/EmojiPicker/EmojiPicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAMjE,OAAO,EAAoB,KAAK,gBAAgB,EAA4B,MAAM,eAAe,CAAC;AAElG,QAAA,MAAM,IAAI;;;;CAI0B,CAAC;eAEtB,IAAI;AA2BnB,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,gBAAgB,CAKpD,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAK5C,CAAC"}
+{"version":3,"file":"EmojiPicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAMjE,OAAO,EAAoB,KAAK,gBAAgB,EAA4B,MAAM,mBAAmB,CAAC;AAEtG,QAAA,MAAM,IAAI;;;;CAI0B,CAAC;eAEtB,IAAI;AA2BnB,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,gBAAgB,CAKpD,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAK5C,CAAC"}

package/dist/types/src/components/EmojiPicker/index.d.ts

@@ -1,2 +1,2 @@
-export * from './EmojiPicker';
+export * from './EmojiPicker.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/EmojiPicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC"}

package/dist/types/src/components/HuePicker/HuePicker.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
-import { type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
-import { type PickerButtonProps } from '../PickerButton';
+import type * as Button from '@dxos/react-ui/Button';
+import type * as Util from '@dxos/react-ui/Util';
+import { type PickerButtonProps } from '../PickerButton/index.ts';
 export type HuePickerProps = {
+    /** Replaces the generic "select hue" label (tooltip and screen-reader text). */
+    label?: string;
     disabled?: boolean;
     defaultValue?: string;
     value?: string;
     onChange?: (nextHue: string) => void;
-    onReset?: ButtonProps['onClick'];
+    onReset?: Button.RootProps['onClick'];
 } & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;
-export declare const HuePicker: (props: ThemedClassName<HuePickerProps>) => React.JSX.Element;
+export declare const HuePicker: ({ label, ...props }: Util.ThemedClassName<HuePickerProps>) => React.JSX.Element;
 //# sourceMappingURL=HuePicker.d.ts.map

package/dist/types/src/components/HuePicker/HuePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HuePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/HuePicker/HuePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAkB,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAIxG,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC,CAAC;AAE5G,eAAO,MAAM,SAAS,UAAW,eAAe,CAAC,cAAc,CAAC,sBAY/D,CAAC"}
+{"version":3,"file":"HuePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/HuePicker/HuePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAErD,OAAO,KAAK,KAAK,IAAI,MAAM,qBAAqB,CAAC;AAIjD,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAEhF,MAAM,MAAM,cAAc,GAAG;IAC3B,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC,CAAC;AAE5G,eAAO,MAAM,SAAS,wBAAyB,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,sBAYlF,CAAC"}

package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts

@@ -1,6 +1,6 @@
 import { type StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { HuePicker, type HuePickerProps } from './HuePicker';
+import { HuePicker, type HuePickerProps } from './HuePicker.tsx';
 declare const DefaultStory: (props: HuePickerProps) => React.JSX.Element;
 declare const meta: {
     title: string;

package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HuePicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/HuePicker/HuePicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7D,QAAA,MAAM,YAAY,UAAW,cAAc,sBAc1C,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;CAKwB,CAAC;eAEpB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}
+{"version":3,"file":"HuePicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/HuePicker/HuePicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjE,QAAA,MAAM,YAAY,UAAW,cAAc,sBAc1C,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;CAKwB,CAAC;eAEpB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/types/src/components/HuePicker/index.d.ts

@@ -1,2 +1,2 @@
-export * from './HuePicker';
+export * from './HuePicker.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/HuePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/HuePicker/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/HuePicker/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}

package/dist/types/src/components/IconPicker/IconPicker.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-import { type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
-import { type PickerButtonProps } from '../PickerButton';
+import type * as Button from '@dxos/react-ui/Button';
+import type * as Util from '@dxos/react-ui/Util';
+import { type PickerButtonProps } from '../PickerButton/index.ts';
 export type IconPickerProps = {
     disabled?: boolean;
     defaultValue?: string;
     value?: string;
     onChange?: (nextHue: string) => void;
-    onReset?: ButtonProps['onClick'];
+    onReset?: Button.RootProps['onClick'];
 } & Pick<PickerButtonProps, 'disabled' | 'rootVariant' | 'iconSize' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;
-export declare const IconPicker: ({ ...props }: ThemedClassName<IconPickerProps>) => React.JSX.Element;
+export declare const IconPicker: ({ ...props }: Util.ThemedClassName<IconPickerProps>) => React.JSX.Element;
 //# sourceMappingURL=IconPicker.d.ts.map

package/dist/types/src/components/IconPicker/IconPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconPicker/IconPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAwB,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAI9G,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,aAAa,GAAG,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC5F,CAAC;AAEF,eAAO,MAAM,UAAU,iBAAkB,eAAe,CAAC,eAAe,CAAC,sBAYxE,CAAC"}
+{"version":3,"file":"IconPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconPicker/IconPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAGrD,OAAO,KAAK,KAAK,IAAI,MAAM,qBAAqB,CAAC;AAIjD,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAEhF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,aAAa,GAAG,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC5F,CAAC;AAEF,eAAO,MAAM,UAAU,iBAAkB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,sBAY7E,CAAC"}

package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts

@@ -1,6 +1,6 @@
 import { type StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { IconPicker, type IconPickerProps } from './IconPicker';
+import { IconPicker, type IconPickerProps } from './IconPicker.tsx';
 declare const DefaultStory: (props: IconPickerProps) => React.JSX.Element;
 declare const meta: {
     title: string;

package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,QAAA,MAAM,YAAY,UAAW,eAAe,sBAS3C,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;CAKyB,CAAC;eAErB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}
+{"version":3,"file":"IconPicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEpE,QAAA,MAAM,YAAY,UAAW,eAAe,sBAS3C,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;CAKyB,CAAC;eAErB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/dist/types/src/components/IconPicker/index.d.ts

@@ -1,2 +1,2 @@
-export * from './IconPicker';
+export * from './IconPicker.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/IconPicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconPicker/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/IconPicker/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC"}

package/dist/types/src/components/PickerButton/PickerButton.d.ts

@@ -1,9 +1,10 @@
 import React, { type FC } from 'react';
-import { type IconProps, type ThemedClassName } from '@dxos/react-ui';
-export type PickerButtonProps = ThemedClassName<{
+import * as Icon from '@dxos/react-ui/Icon';
+import type * as Util from '@dxos/react-ui/Util';
+export type PickerButtonProps = Util.ThemedClassName<{
     Component: FC<{
         value: string;
-        size?: IconProps['size'];
+        size?: Icon.IconProps['size'];
     }>;
     label: string;
     icon: string;
@@ -14,7 +15,7 @@ export type PickerButtonProps = ThemedClassName<{
     onChange?: (value: string) => void;
     onReset?: () => void;
     rootVariant?: 'button' | 'toolbar-button';
-    iconSize?: IconProps['size'];
+    iconSize?: Icon.IconProps['size'];
 }>;
 export declare const PickerButton: ({ Component, disabled, classNames, defaultValue: defaultValueProp, value: valueProp, values, label, icon, onChange, onReset, rootVariant, iconSize, }: PickerButtonProps) => React.JSX.Element;
 //# sourceMappingURL=PickerButton.d.ts.map

package/dist/types/src/components/PickerButton/PickerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickerButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/PickerButton/PickerButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAE5D,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,eAAe,EAAoB,MAAM,gBAAgB,CAAC;AAEpH,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC9C,SAAS,EAAE,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC,CAAC;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CAC9B,CAAC,CAAC;AAEH,eAAO,MAAM,YAAY,0JAatB,iBAAiB,sBAoDnB,CAAC"}
+{"version":3,"file":"PickerButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/PickerButton/PickerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,IAAI,MAAM,qBAAqB,CAAC;AAG5C,OAAO,KAAK,KAAK,IAAI,MAAM,qBAAqB,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC;IACnD,SAAS,EAAE,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;IAC1C,QAAQ,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC,CAAC;AAKH,eAAO,MAAM,YAAY,0JAatB,iBAAiB,sBAmDnB,CAAC"}

package/dist/types/src/components/PickerButton/index.d.ts

@@ -1,2 +1,2 @@
-export * from './PickerButton';
+export * from './PickerButton.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/PickerButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/PickerButton/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/PickerButton/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -1,5 +1,5 @@
-export * from './EmojiPicker';
-export * from './HuePicker';
-export * from './IconPicker';
-export * from './PickerButton';
+export * from './EmojiPicker/index.ts';
+export * from './HuePicker/index.ts';
+export * from './IconPicker/index.ts';
+export * from './PickerButton/index.ts';
 //# sourceMappingURL=index.d.ts.map