@dxos/react-ui-pickers 0.11.1 → 1.0.0-next-bbabc02363f18d7643ea4160e3a7a7809870fd0d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/lib/chunk-EmojiMartPanel.mjs +22 -0
  2. package/dist/lib/chunk-EmojiMartPanel.mjs.map +1 -0
  3. package/dist/lib/index.mjs +21 -22
  4. package/dist/lib/index.mjs.map +1 -1
  5. package/dist/types/src/components/EmojiPicker/EmojiMartPanel.d.ts +15 -0
  6. package/dist/types/src/components/EmojiPicker/EmojiMartPanel.d.ts.map +1 -0
  7. package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts.map +1 -1
  8. package/dist/types/src/components/EmojiPicker/EmojiPicker.stories.d.ts +1 -1
  9. package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts +1 -1
  10. package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts +1 -1
  11. package/dist/types/tsconfig.tsbuildinfo +1 -1
  12. package/package.json +7 -10
  13. package/src/components/EmojiPicker/EmojiMartPanel.tsx +31 -0
  14. package/src/components/EmojiPicker/EmojiPicker.tsx +28 -29
package/dist/lib/chunk-EmojiMartPanel.mjs ADDED
@@ -0,0 +1,22 @@
1
+ import "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import emojiData from "@emoji-mart/data";
4
+ import EmojiMart from "@emoji-mart/react";
5
+ //#region src/components/EmojiPicker/EmojiMartPanel.tsx
6
+ /**
7
+ * The emoji-mart picker and its emoji database (~480 KB), isolated in its own module so the
8
+ * default export can be lazily imported — the database is otherwise resident in every tab via
9
+ * the pickers barrel, for a panel that only renders once a user opens it.
10
+ */
11
+ var EmojiMartPanel = ({ onEmojiSelect, themeMode }) => /* @__PURE__ */ jsx(EmojiMart, {
12
+ data: emojiData,
13
+ onEmojiSelect,
14
+ autoFocus: true,
15
+ maxFrequentRows: 0,
16
+ noCountryFlags: true,
17
+ theme: themeMode
18
+ });
19
+ //#endregion
20
+ export { EmojiMartPanel as default };
21
+
22
+ //# sourceMappingURL=chunk-EmojiMartPanel.mjs.map
package/dist/lib/chunk-EmojiMartPanel.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chunk-EmojiMartPanel.mjs","names":[],"sources":["../../src/components/EmojiPicker/EmojiMartPanel.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport React from 'react';\n\nexport type EmojiMartPanelProps = {\n onEmojiSelect: (emoji: { native?: string }) => void;\n themeMode?: string;\n};\n\n/**\n * The emoji-mart picker and its emoji database (~480 KB), isolated in its own module so the\n * default export can be lazily imported — the database is otherwise resident in every tab via\n * the pickers barrel, for a panel that only renders once a user opens it.\n */\nconst EmojiMartPanel = ({ onEmojiSelect, themeMode }: EmojiMartPanelProps) => (\n // Options reference: https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props.\n <EmojiMart\n data={emojiData}\n onEmojiSelect={onEmojiSelect}\n autoFocus={true}\n maxFrequentRows={0}\n noCountryFlags={true}\n theme={themeMode}\n />\n);\n\nexport default EmojiMartPanel;\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,kBAAkB,EAAE,eAAe,gBAEvC,oBAAC,WAAD;CACE,MAAM;CACS;CACf,WAAW;CACX,iBAAiB;CACjB,gBAAgB;CAChB,OAAO;AACR,CAAA"}
package/dist/lib/index.mjs CHANGED
@@ -1,13 +1,16 @@
1
- import emojiData from "@emoji-mart/data";
2
- import EmojiMart from "@emoji-mart/react";
3
1
  import { useControllableState } from "@radix-ui/react-use-controllable-state";
4
- import { useEffect, useState } from "react";
2
+ import { Suspense, lazy, useEffect, useState } from "react";
5
3
  import { Button, ButtonGroup, DropdownMenu, Icon, IconButton, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation } from "@dxos/react-ui";
6
4
  import { getSize, osTranslations } from "@dxos/ui-theme";
7
5
  import { jsx, jsxs } from "react/jsx-runtime";
8
6
  import { hues, iconValues } from "@dxos/ui-types";
9
7
  //#region src/components/EmojiPicker/EmojiPicker.tsx
10
8
  /**
9
+ * emoji-mart plus its emoji database is ~480 KB; loading it with the barrel put it in every
10
+ * tab's boot graph, so the panel loads on first open instead.
11
+ */
12
+ var EmojiMartPanel = lazy(() => import("./chunk-EmojiMartPanel.mjs"));
13
+ /**
11
14
  * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
12
15
  */
13
16
  var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
@@ -41,18 +44,17 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
41
44
  setEmojiPickerOpen(false);
42
45
  }
43
46
  },
44
- children: [/* @__PURE__ */ jsx(EmojiMart, {
45
- data: emojiData,
46
- onEmojiSelect: ({ native }) => {
47
- if (native) {
48
- setEmojiValue(native);
49
- setEmojiPickerOpen(false);
50
- }
51
- },
52
- autoFocus: true,
53
- maxFrequentRows: 0,
54
- noCountryFlags: true,
55
- theme: themeMode
47
+ children: [/* @__PURE__ */ jsx(Suspense, {
48
+ fallback: null,
49
+ children: /* @__PURE__ */ jsx(EmojiMartPanel, {
50
+ onEmojiSelect: ({ native }) => {
51
+ if (native) {
52
+ setEmojiValue(native);
53
+ setEmojiPickerOpen(false);
54
+ }
55
+ },
56
+ themeMode
57
+ })
56
58
  }), /* @__PURE__ */ jsx(Popover.Arrow, {})]
57
59
  }) })]
58
60
  });
@@ -101,17 +103,14 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
101
103
  setEmojiPickerOpen(false);
102
104
  }
103
105
  },
104
- children: [/* @__PURE__ */ jsx(EmojiMart, {
105
- data: emojiData,
106
- onEmojiSelect: ({ native }) => {
106
+ children: [/* @__PURE__ */ jsx(Suspense, {
107
+ fallback: null,
108
+ children: /* @__PURE__ */ jsx(EmojiMartPanel, { onEmojiSelect: ({ native }) => {
107
109
  if (native) {
108
110
  setEmojiValue(native);
109
111
  setEmojiPickerOpen(false);
110
112
  }
111
- },
112
- autoFocus: true,
113
- maxFrequentRows: 0,
114
- noCountryFlags: true
113
+ } })
115
114
  }), /* @__PURE__ */ jsx(Popover.Arrow, {})]
116
115
  })]
117
116
  }), /* @__PURE__ */ jsx(IconButton, {
package/dist/lib/index.mjs.map CHANGED
@@ -1 +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 emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { 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\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 {/* 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 );\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 py-1' 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 <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 <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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"}
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 py-1' 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 <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 <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.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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"}
package/dist/types/src/components/EmojiPicker/EmojiMartPanel.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ export type EmojiMartPanelProps = {
3
+ onEmojiSelect: (emoji: {
4
+ native?: string;
5
+ }) => void;
6
+ themeMode?: string;
7
+ };
8
+ /**
9
+ * The emoji-mart picker and its emoji database (~480 KB), isolated in its own module so the
10
+ * default export can be lazily imported — the database is otherwise resident in every tab via
11
+ * the pickers barrel, for a panel that only renders once a user opens it.
12
+ */
13
+ declare const EmojiMartPanel: ({ onEmojiSelect, themeMode }: EmojiMartPanelProps) => React.JSX.Element;
14
+ export default EmojiMartPanel;
15
+ //# sourceMappingURL=EmojiMartPanel.d.ts.map
package/dist/types/src/components/EmojiPicker/EmojiMartPanel.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EmojiMartPanel.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiMartPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,cAAc,iCAAkC,mBAAmB,sBAUxE,CAAC;eAEa,cAAc"}
package/dist/types/src/components/EmojiPicker/EmojiPicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAGL,KAAK,WAAW,EAIhB,KAAK,eAAe,EAKrB,MAAM,gBAAgB,CAAC;AAGxB,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,sBAyDxC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gGAQ1B,gBAAgB,sBA0DlB,CAAC"}
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,sBAwDlB,CAAC"}
package/dist/types/src/components/EmojiPicker/EmojiPicker.stories.d.ts CHANGED
@@ -4,7 +4,7 @@ import { type EmojiPickerProps } from './EmojiPicker';
4
4
  declare const meta: {
5
5
  title: string;
6
6
  component: typeof EmojiPicker;
7
- decorators: import("@storybook/react").Decorator[];
7
+ decorators: import("@storybook/react-vite").Decorator[];
8
8
  };
9
9
  export default meta;
10
10
  export declare const ToolbarButton: StoryObj<EmojiPickerProps>;
package/dist/types/src/components/HuePicker/HuePicker.stories.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const meta: {
5
5
  title: string;
6
6
  component: (props: import("@dxos/ui-types").ThemedClassName<HuePickerProps>) => React.JSX.Element;
7
7
  render: (props: HuePickerProps) => React.JSX.Element;
8
- decorators: import("@storybook/react").Decorator[];
8
+ decorators: import("@storybook/react-vite").Decorator[];
9
9
  };
10
10
  export default meta;
11
11
  type Story = StoryObj<typeof meta>;
package/dist/types/src/components/IconPicker/IconPicker.stories.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const meta: {
5
5
  title: string;
6
6
  component: ({ ...props }: import("@dxos/ui-types").ThemedClassName<IconPickerProps>) => React.JSX.Element;
7
7
  render: (props: IconPickerProps) => React.JSX.Element;
8
- decorators: import("@storybook/react").Decorator[];
8
+ decorators: import("@storybook/react-vite").Decorator[];
9
9
  };
10
10
  export default meta;
11
11
  type Story = StoryObj<typeof meta>;