@dxos/react-ui-pickers 0.7.5-labs.071a3e2

package/dist/lib/node-esm/index.mjs

@@ -0,0 +1,270 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx
+import emojiData from "@emoji-mart/data";
+import EmojiMart from "@emoji-mart/react";
+import { ArrowCounterClockwise, CaretDown, UserCircle } from "@phosphor-icons/react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React, { useRef, useState } from "react";
+import { Button, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
+var EmojiPickerToolbarButton = ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames }) => {
+  const { t } = useTranslation("os");
+  const { themeMode } = useThemeContext();
+  const [_emojiValue, setEmojiValue] = useControllableState({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji
+  });
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+  const suppressNextTooltip = useRef(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement(Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React.createElement(Popover.Root, {
+    open: emojiPickerOpen,
+    onOpenChange: (nextOpen) => {
+      setEmojiPickerOpen(nextOpen);
+      suppressNextTooltip.current = true;
+    }
+  }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Toolbar.Button, {
+    classNames: [
+      "gap-2 text-2xl plb-1",
+      classNames
+    ],
+    disabled
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, t("select emoji label")), /* @__PURE__ */ React.createElement(UserCircle, {
+    className: getSize(5)
+  })))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
+    side: "bottom"
+  }, t("select emoji label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
+    side: "bottom",
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setEmojiPickerOpen(false);
+        suppressNextTooltip.current = true;
+      }
+    }
+  }, /* @__PURE__ */ React.createElement(EmojiMart, {
+    data: emojiData,
+    onEmojiSelect: ({ native }) => {
+      if (native) {
+        setEmojiValue(native);
+        setEmojiPickerOpen(false);
+      }
+    },
+    autoFocus: true,
+    maxFrequentRows: 0,
+    noCountryFlags: true,
+    theme: themeMode
+  }), /* @__PURE__ */ React.createElement(Popover.Arrow, null)))));
+};
+var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
+  const { t } = useTranslation("os");
+  const [isMd] = useMediaQuery("md", {
+    ssr: false
+  });
+  const [emojiValue, setEmojiValue] = useControllableState({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji
+  });
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Popover.Root, {
+    open: emojiPickerOpen,
+    onOpenChange: setEmojiPickerOpen
+  }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    classNames: "gap-2 text-2xl plb-1",
+    disabled
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, t("select emoji label")), /* @__PURE__ */ React.createElement("span", {
+    className: "grow pis-14"
+  }, emojiValue), /* @__PURE__ */ React.createElement(CaretDown, {
+    className: getSize(4)
+  }))), /* @__PURE__ */ React.createElement(Popover.Content, {
+    side: "right",
+    sideOffset: isMd ? 0 : -310,
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setEmojiPickerOpen(false);
+      }
+    }
+  }, /* @__PURE__ */ React.createElement(EmojiMart, {
+    data: emojiData,
+    onEmojiSelect: ({ native }) => {
+      if (native) {
+        setEmojiValue(native);
+        setEmojiPickerOpen(false);
+      }
+    },
+    autoFocus: true,
+    maxFrequentRows: 0,
+    noCountryFlags: true
+  }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    onClick: onClickClear,
+    disabled
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, t("clear label")), /* @__PURE__ */ React.createElement(ArrowCounterClockwise, null))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
+    side: "right"
+  }, t("clear label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null)))));
+};
+
+// packages/ui/react-ui-pickers/src/components/HuePicker.tsx
+import { ArrowCounterClockwise as ArrowCounterClockwise2, CaretDown as CaretDown2, Check, Palette } from "@phosphor-icons/react";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React2, { useRef as useRef2, useState as useState2 } from "react";
+import { Button as Button2, DropdownMenu, Toolbar as Toolbar2, Tooltip as Tooltip2, useThemeContext as useThemeContext2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { getSize as getSize2, hueTokenThemes, mx } from "@dxos/react-ui-theme";
+var HuePreview = ({ hue }) => {
+  const { tx } = useThemeContext2();
+  const size = 20;
+  return /* @__PURE__ */ React2.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: `0 0 ${size} ${size}`
+  }, /* @__PURE__ */ React2.createElement("rect", {
+    x: 0,
+    y: 0,
+    width: size,
+    height: size,
+    className: tx("hue.fill", "select--hue__preview", {
+      hue
+    })
+  }));
+};
+var hueTokens = Object.keys(hueTokenThemes).slice(0, 16);
+var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultHue }) => {
+  const { t } = useTranslation2("os");
+  const [hueValue, setHueValue] = useControllableState2({
+    prop: hue,
+    onChange: onChangeHue,
+    defaultProp: defaultHue
+  });
+  const [huePickerOpen, setHuePickerOpen] = useState2(false);
+  const suppressNextTooltip = useRef2(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
+  return /* @__PURE__ */ React2.createElement(Tooltip2.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+    modal: false,
+    open: huePickerOpen,
+    onOpenChange: (nextOpen) => {
+      setHuePickerOpen(nextOpen);
+      suppressNextTooltip.current = true;
+    }
+  }, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Toolbar2.Button, {
+    classNames: mx("gap-2 plb-1", classNames),
+    disabled
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("select hue label")), /* @__PURE__ */ React2.createElement(Palette, {
+    className: getSize2(5)
+  })))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
+    side: "bottom"
+  }, t("select hue label"), /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
+    side: "bottom",
+    classNames: "!w-40"
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
+    classNames: "grid grid-cols-4"
+  }, hueTokens.map((hue2) => {
+    return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+      key: hue2,
+      checked: hue2 === hueValue,
+      onCheckedChange: () => setHueValue(hue2),
+      classNames: "px-0 py-2 items-center justify-center"
+    }, /* @__PURE__ */ React2.createElement(HuePreview, {
+      hue: hue2
+    }));
+  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))));
+};
+var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }) => {
+  const { t } = useTranslation2("os");
+  const [hueValue, setHueValue] = useControllableState2({
+    prop: hue,
+    onChange: onChangeHue,
+    defaultProp: defaultHue
+  });
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+    modal: false
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Button2, {
+    variant: "ghost",
+    classNames: "gap-2 plb-1",
+    disabled
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("select hue label")), /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "pis-14 grow flex items-center justify-center gap-2"
+  }, /* @__PURE__ */ React2.createElement(HuePreview, {
+    hue: hueValue
+  }), /* @__PURE__ */ React2.createElement("span", null, t(`${hueValue} label`))), /* @__PURE__ */ React2.createElement(CaretDown2, {
+    className: getSize2(4)
+  }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
+    side: "right"
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, Object.keys(hueTokenThemes).map((hue2) => {
+    return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+      key: hue2,
+      checked: hue2 === hueValue,
+      onCheckedChange: () => setHueValue(hue2)
+    }, /* @__PURE__ */ React2.createElement(HuePreview, {
+      hue: hue2
+    }), /* @__PURE__ */ React2.createElement("span", {
+      className: "grow"
+    }, t(`${hue2} label`)), /* @__PURE__ */ React2.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React2.createElement(Check, null)));
+  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React2.createElement(Tooltip2.Root, null, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Button2, {
+    variant: "ghost",
+    onClick: onClickClear,
+    disabled
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("clear label")), /* @__PURE__ */ React2.createElement(ArrowCounterClockwise2, null))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
+    side: "right"
+  }, t("clear label"), /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null)))));
+};
+export {
+  EmojiPickerBlock,
+  EmojiPickerToolbarButton,
+  HuePickerBlock,
+  HuePickerToolbarButton
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/node-esm/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/EmojiPicker.tsx", "../../../src/components/HuePicker.tsx"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { ArrowCounterClockwise, CaretDown, UserCircle } from '@phosphor-icons/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} from '@dxos/react-ui';\nimport { getSize } from '@dxos/react-ui-theme';\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              <UserCircle className={getSize(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            <CaretDown className={getSize(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            <ArrowCounterClockwise />\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 { ArrowCounterClockwise, CaretDown, Check, Palette } from '@phosphor-icons/react';\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  type ThemedClassName,\n  Toolbar,\n  Tooltip,\n  useThemeContext,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { getSize, hueTokenThemes, mx } from '@dxos/react-ui-theme';\n\nconst HuePreview = ({ hue }: { hue: string }) => {\n  const { tx } = useThemeContext();\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} className={tx('hue.fill', 'select--hue__preview', { hue })} />\n    </svg>\n  );\n};\n\nconst hueTokens = Object.keys(hueTokenThemes).slice(0, 16);\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              <Palette className={getSize(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-4'>\n              {hueTokens.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              <HuePreview hue={hueValue!} />\n              <span>{t(`${hueValue} label`)}</span>\n            </div>\n            <CaretDown className={getSize(4)} />\n          </Button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content side='right'>\n          <DropdownMenu.Viewport>\n            {Object.keys(hueTokenThemes).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                    <Check />\n                  </DropdownMenu.ItemIndicator>\n                </DropdownMenu.CheckboxItem>\n              );\n            })}\n          </DropdownMenu.Viewport>\n          <DropdownMenu.Arrow />\n        </DropdownMenu.Content>\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            <ArrowCounterClockwise />\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"],
+  "mappings": "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",
+  "names": ["emojiData", "EmojiMart", "ArrowCounterClockwise", "CaretDown", "UserCircle", "useControllableState", "React", "useRef", "useState", "Button", "Popover", "Toolbar", "Tooltip", "useMediaQuery", "useThemeContext", "useTranslation", "getSize", "EmojiPickerToolbarButton", "disabled", "defaultEmoji", "emoji", "onChangeEmoji", "classNames", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "Popover", "Trigger", "asChild", "Toolbar", "Button", "span", "className", "UserCircle", "getSize", "Portal", "Content", "side", "Arrow", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "EmojiPickerBlock", "onClickClear", "isMd", "useMediaQuery", "ssr", "emojiValue", "variant", "CaretDown", "sideOffset", "onClick", "ArrowCounterClockwise", "ArrowCounterClockwise", "CaretDown", "Check", "Palette", "useControllableState", "React", "useRef", "useState", "Button", "DropdownMenu", "Toolbar", "Tooltip", "useThemeContext", "useTranslation", "getSize", "hueTokenThemes", "mx", "HuePreview", "hue", "tx", "useThemeContext", "size", "React", "svg", "width", "height", "viewBox", "rect", "x", "y", "className", "hueTokens", "Object", "keys", "hueTokenThemes", "slice", "HuePickerToolbarButton", "disabled", "onChangeHue", "classNames", "defaultHue", "t", "useTranslation", "hueValue", "setHueValue", "useControllableState", "prop", "onChange", "defaultProp", "huePickerOpen", "setHuePickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "DropdownMenu", "modal", "Trigger", "asChild", "Toolbar", "Button", "mx", "span", "Palette", "getSize", "Portal", "Content", "side", "Arrow", "Viewport", "map", "CheckboxItem", "key", "checked", "onCheckedChange", "HuePickerBlock", "onClickClear", "variant", "div", "role", "CaretDown", "ItemIndicator", "Check", "onClick", "ArrowCounterClockwise"]
+}

package/dist/lib/node-esm/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytes":19368,"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@phosphor-icons/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":"@dxos/react-ui-theme","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/HuePicker.tsx":{"bytes":20029,"imports":[{"path":"@phosphor-icons/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":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytes":611,"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"}],"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-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":21269},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@phosphor-icons/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":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@phosphor-icons/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":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePickerBlock","HuePickerToolbarButton"],"entryPoint":"packages/ui/react-ui-pickers/src/index.ts","cssBundle":"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css","inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytesInOutput":5216},"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":5891},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":11463},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1017},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":146}},"bytes":244}}}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
+import './emoji.css';
+export type EmojiPickerProps = {
+    disabled?: boolean;
+    defaultEmoji?: string;
+    emoji?: string;
+    onChangeEmoji?: (nextEmoji: string) => void;
+    onClickClear?: ButtonProps['onClick'];
+};
+/**
+ * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
+ */
+export declare const EmojiPickerToolbarButton: ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames, }: ThemedClassName<Omit<EmojiPickerProps, "onClickClear">>) => React.JSX.Element;
+/**
+ * A button for picking an emoji alongside a button for unsetting it.
+ */
+export declare const EmojiPickerBlock: ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => React.JSX.Element;
+//# sourceMappingURL=EmojiPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EAMrB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,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;CACvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,kEAMlC,eAAe,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,sBA8EzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,mEAAoE,gBAAgB,sBA+DhH,CAAC"}

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

@@ -0,0 +1,8 @@
+import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type EmojiPickerProps } from './EmojiPicker';
+export declare const ToolbarButton: StoryObj<EmojiPickerProps>;
+export declare const Block: StoryObj<EmojiPickerProps>;
+declare const meta: Meta;
+export default meta;
+//# sourceMappingURL=EmojiPicker.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAM5D,OAAO,EAA8C,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA2BlG,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,gBAAgB,CAKpD,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAK5C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
+export type HuePickerProps = {
+    disabled?: boolean;
+    defaultHue?: string;
+    hue?: string;
+    onChangeHue?: (nextHue: string) => void;
+    onClickClear?: ButtonProps['onClick'];
+};
+/**
+ * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.
+ */
+export declare const HuePickerToolbarButton: ({ disabled, hue, onChangeHue, classNames, defaultHue, }: ThemedClassName<Omit<HuePickerProps, "onClickClear">>) => React.JSX.Element;
+/**
+ * A button for picking hue alongside a button for unsetting it.
+ */
+export declare const HuePickerBlock: ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => React.JSX.Element;
+//# sourceMappingURL=HuePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HuePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/HuePicker.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EAKrB,MAAM,gBAAgB,CAAC;AAexB,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,4DAMhC,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,sBAsEvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6DAA8D,cAAc,sBA2DtG,CAAC"}

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

@@ -0,0 +1,8 @@
+import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type HuePickerProps } from './HuePicker';
+export declare const ToolbarButtonStory: StoryObj<HuePickerProps>;
+export declare const BlockPickerStory: StoryObj<HuePickerProps>;
+declare const meta: Meta;
+export default meta;
+//# sourceMappingURL=HuePicker.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HuePicker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/HuePicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAM5D,OAAO,EAA0C,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AA2B1F,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAGvD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAGrD,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

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

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

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

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

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

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

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

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.3"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@dxos/react-ui-pickers",
+  "version": "0.7.5-labs.071a3e2",
+  "description": "A collection of picker components.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {}
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
+    "@dxos/react-ui-types": "0.7.5-labs.071a3e2",
+    "@dxos/util": "0.7.5-labs.071a3e2"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "5.4.7",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/storybook-utils": "0.7.5-labs.071a3e2"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui": "0.7.5-labs.071a3e2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/EmojiPicker.stories.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { EmojiPickerBlock, EmojiPickerToolbarButton, type EmojiPickerProps } from './EmojiPicker';
+
+const ToolbarButtonStory = (props: EmojiPickerProps) => {
+  const [emoji, setEmoji] = useState<string>(props.defaultEmoji ?? '😀');
+
+  return (
+    <Toolbar.Root>
+      <EmojiPickerToolbarButton {...props} emoji={emoji} onChangeEmoji={setEmoji} />
+    </Toolbar.Root>
+  );
+};
+
+const BlockStory = (props: EmojiPickerProps) => {
+  const [emoji, setEmoji] = useState<string>(props.defaultEmoji ?? '😀');
+
+  return (
+    <div className='flex gap-2'>
+      <EmojiPickerBlock
+        {...props}
+        emoji={emoji}
+        onChangeEmoji={setEmoji}
+        onClickClear={() => setEmoji(props.defaultEmoji ?? '😀')}
+      />
+    </div>
+  );
+};
+
+export const ToolbarButton: StoryObj<EmojiPickerProps> = {
+  render: ToolbarButtonStory,
+  args: {
+    defaultEmoji: '😀',
+  },
+};
+
+export const Block: StoryObj<EmojiPickerProps> = {
+  render: BlockStory,
+  args: {
+    defaultEmoji: '😀',
+  },
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-pickers/EmojiPicker',
+  decorators: [withTheme, withLayout({ fullscreen: false, tooltips: true })],
+};
+
+export default meta;