@dxos/react-ui-pickers 0.8.4-main.bc674ce → 0.8.4-main.bd9b33e6c8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.css +2 -2
- package/dist/lib/browser/index.css.map +2 -2
- package/dist/lib/browser/index.mjs +4 -4
- package/dist/lib/browser/index.mjs.map +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.css +2 -2
- package/dist/lib/node-esm/index.css.map +2 -2
- package/dist/lib/node-esm/index.mjs +4 -4
- package/dist/lib/node-esm/index.mjs.map +2 -2
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/PickerButton/PickerButton.d.ts +1 -1
- package/dist/types/src/components/PickerButton/PickerButton.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +10 -10
- package/src/components/EmojiPicker/EmojiPicker.stories.tsx +1 -1
- package/src/components/EmojiPicker/EmojiPicker.tsx +1 -1
- package/src/components/EmojiPicker/emoji.css +5 -21
- package/src/components/HuePicker/HuePicker.stories.tsx +1 -1
- package/src/components/HuePicker/HuePicker.tsx +1 -1
- package/src/components/IconPicker/IconPicker.stories.tsx +1 -1
- package/src/components/PickerButton/PickerButton.tsx +3 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* src/components/EmojiPicker/emoji.css */
|
|
2
2
|
[data-theme=dark] em-emoji-picker {
|
|
3
|
-
--background-rgb: #
|
|
4
|
-
--rgb-background: #
|
|
3
|
+
--background-rgb: #3b3b3f;
|
|
4
|
+
--rgb-background: #3b3b3f;
|
|
5
5
|
--font-family: "Inter Variable", ui-sans-serif;
|
|
6
6
|
}
|
|
7
7
|
/*# sourceMappingURL=index.css.map */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker/emoji.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme
|
|
5
|
-
"mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;
|
|
4
|
+
"sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme='dark'] em-emoji-picker {\n /* TODO(burdon): Use tailwind tokens. */\n --background-rgb: #3b3b3f;\n --rgb-background: #3b3b3f;\n --font-family: 'Inter Variable', ui-sans-serif;\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;AAClB,iBAAe,gBAAgB,EAAE;AACnC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -71,7 +71,7 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
71
71
|
asChild: true
|
|
72
72
|
}, /* @__PURE__ */ React.createElement(Button, {
|
|
73
73
|
variant: triggerVariant,
|
|
74
|
-
classNames: "grow gap-2 text-2xl
|
|
74
|
+
classNames: "grow gap-2 text-2xl py-1",
|
|
75
75
|
disabled
|
|
76
76
|
}, /* @__PURE__ */ React.createElement("span", {
|
|
77
77
|
className: "sr-only"
|
|
@@ -141,7 +141,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValu
|
|
|
141
141
|
asChild: true
|
|
142
142
|
}, /* @__PURE__ */ React2.createElement(TriggerRoot, {
|
|
143
143
|
classNames: [
|
|
144
|
-
"gap-2
|
|
144
|
+
"gap-2 py-1",
|
|
145
145
|
classNames
|
|
146
146
|
],
|
|
147
147
|
disabled
|
|
@@ -158,7 +158,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValu
|
|
|
158
158
|
size: 3
|
|
159
159
|
})))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
160
160
|
side: "bottom",
|
|
161
|
-
classNames: "!
|
|
161
|
+
classNames: "!w-min"
|
|
162
162
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
163
163
|
classNames: "grid grid-cols-[repeat(6,min-content)]"
|
|
164
164
|
}, values.map((_value) => {
|
|
@@ -203,7 +203,7 @@ var HuePreview = ({ value, size = 5 }) => {
|
|
|
203
203
|
y: 0,
|
|
204
204
|
width: size,
|
|
205
205
|
height: size,
|
|
206
|
-
fill: `var(--
|
|
206
|
+
fill: `var(--color-${value}-surface)`,
|
|
207
207
|
strokeWidth: 4
|
|
208
208
|
})));
|
|
209
209
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker/EmojiPicker.tsx", "../../../src/components/HuePicker/HuePicker.tsx", "../../../src/components/PickerButton/PickerButton.tsx", "../../../src/components/IconPicker/IconPicker.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { 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\nimport './emoji.css';\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 plb-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 React from 'react';\n\nimport { type ButtonProps, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { getSize, hues, osTranslations } from '@dxos/ui-theme';\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 role='none' 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(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, 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: 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 plb-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='!is-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, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nimport { iconValues } from './icons';\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"],
|
|
5
|
-
"mappings": ";;;;;AAIA,OAAOA,eAAe;AACtB,OAAOC,eAAe;AACtB,SAASC,4BAA4B;AACrC,OAAOC,SAASC,gBAAgB;AAEhC,SACEC,QACAC,aAEAC,MACAC,YACAC,SAEAC,SACAC,eACAC,iBACAC,sBACK;AACP,SAASC,sBAAsB;AAgBxB,IAAMC,2BAA2B,CAAC,EACvCC,YACAC,OACAC,UACAC,cACAC,cAAa,MAC0B;AACvC,QAAM,EAAEC,EAAC,IAAKC,eAAeC,cAAAA;AAC7B,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,QAAM,CAACC,aAAaC,aAAAA,IAAiBC,qBAA6B;IAChEC,MAAMZ;IACNa,UAAUV;IACVW,aAAaZ;EACf,CAAA;AAEA,QAAM,CAACa,iBAAiBC,kBAAAA,IAAsBC,SAAkB,KAAA;AAEhE,SACE,sBAAA,cAACC,QAAQC,MAAI;IACXC,MAAML;IACNM,cAAc,CAACC,aAAAA;AACbN,yBAAmBM,QAAAA;IACrB;KAEA,sBAAA,cAACJ,QAAQK,SAAO;IAACC,SAAAA;KACf,sBAAA,cAACC,QAAQC,YAAU;IACjBC,MAAK;IACLC,OAAOxB,EAAE,oBAAA;IACTyB,UAAAA;IACAC,aAAY;IACZ7B;OAGJ,sBAAA,cAACiB,QAAQa,QAAM,MACb,sBAAA,cAACb,QAAQc,SAAO;IACdC,MAAK;IACLC,kBAAkB,CAACC,UAAAA;AACjB,UAAIA,MAAMC,QAAQ,UAAU;AAC1BD,cAAME,gBAAe;AACrBrB,2BAAmB,KAAA;MACrB;IACF;KAGA,sBAAA,cAACsB,WAAAA;IACCC,MAAMC;IACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,UAAIA,QAAQ;AACVhC,sBAAcgC,MAAAA;AACd1B,2BAAmB,KAAA;MACrB;IACF;IACA2B,WAAW;IACXC,iBAAiB;IACjBC,gBAAgB;IAChBC,OAAOvC;MAET,sBAAA,cAACW,QAAQ6B,OAAK,IAAA,CAAA,CAAA,CAAA;AAKxB;AAKO,IAAMC,mBAAmB,CAAC,EAC/B/C,UACAC,cACAF,OACAG,eACA8C,cACAC,iBAAiB,SACjBnD,WAAU,MACO;AACjB,QAAM,EAAEK,EAAC,IAAKC,eAAeC,cAAAA;AAC7B,QAAM,CAAC6C,IAAAA,IAAQC,cAAc,IAAA;AAE7B,QAAM,CAACC,YAAY3C,aAAAA,IAAiBC,qBAA6B;IAC/DC,MAAMZ;IACNa,UAAUV;IACVW,aAAaZ;EACf,CAAA;AAEA,QAAM,CAACa,iBAAiBC,kBAAAA,IAAsBC,SAAkB,KAAA;AAEhE,SACE,sBAAA,cAACqC,aAAAA;IAAYvD;KACX,sBAAA,cAACmB,QAAQC,MAAI;IAACC,MAAML;IAAiBM,cAAcL;KACjD,sBAAA,cAACE,QAAQK,SAAO;IAACC,SAAAA;KACf,sBAAA,cAAC+B,QAAAA;IAAOC,SAASN;IAAgBnD,YAAW;
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { 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\nimport './emoji.css';\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 React from 'react';\n\nimport { type ButtonProps, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { getSize, hues, osTranslations } from '@dxos/ui-theme';\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 role='none' 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 { 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, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nimport { iconValues } from './icons';\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useState", "Button", "ButtonGroup", "Icon", "IconButton", "Popover", "Toolbar", "useMediaQuery", "useThemeContext", "useTranslation", "osTranslations", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "osTranslations", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "Popover", "Root", "open", "onOpenChange", "nextOpen", "Trigger", "asChild", "Toolbar", "IconButton", "icon", "label", "iconOnly", "tooltipSide", "Portal", "Content", "side", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "Arrow", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "useMediaQuery", "emojiValue", "ButtonGroup", "Button", "variant", "span", "className", "Icon", "size", "sideOffset", "onClick", "React", "useTranslation", "getSize", "hues", "osTranslations", "useControllableState", "React", "useEffect", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "PickerButton", "Component", "disabled", "classNames", "defaultValue", "defaultValueProp", "value", "valueProp", "values", "label", "icon", "onChange", "onReset", "rootVariant", "iconSize", "setValue", "useControllableState", "prop", "defaultProp", "useEffect", "open", "setOpen", "useState", "TriggerRoot", "Toolbar", "Button", "React", "DropdownMenu", "Root", "modal", "onOpenChange", "Tooltip", "Trigger", "asChild", "content", "side", "span", "className", "size", "Icon", "Portal", "Content", "Viewport", "map", "_value", "CheckboxItem", "key", "checked", "onCheckedChange", "Arrow", "HuePicker", "props", "t", "useTranslation", "osTranslations", "React", "PickerButton", "Component", "HuePreview", "label", "icon", "values", "hues", "value", "size", "div", "role", "className", "svg", "viewBox", "getSize", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "React", "Icon", "useTranslation", "osTranslations", "IconPicker", "props", "t", "useTranslation", "osTranslations", "React", "PickerButton", "Component", "IconPreview", "label", "icon", "values", "iconValues", "value", "size", "Icon"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/components/EmojiPicker/emoji.css":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/EmojiPicker/emoji.css":{"bytes":305,"imports":[]},"src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":15352,"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/components/EmojiPicker/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"src/components/EmojiPicker/index.ts":{"bytes":489,"imports":[{"path":"src/components/EmojiPicker/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"}],"format":"esm"},"src/components/PickerButton/PickerButton.tsx":{"bytes":10005,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/PickerButton/index.ts":{"bytes":491,"imports":[{"path":"src/components/PickerButton/PickerButton.tsx","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"src/components/HuePicker/HuePicker.tsx":{"bytes":4227,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"src/components/HuePicker/index.ts":{"bytes":481,"imports":[{"path":"src/components/HuePicker/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"format":"esm"},"src/components/IconPicker/icons.ts":{"bytes":5225,"imports":[],"format":"esm"},"src/components/IconPicker/IconPicker.tsx":{"bytes":3425,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"},{"path":"src/components/IconPicker/icons.ts","kind":"import-statement","original":"./icons"}],"format":"esm"},"src/components/IconPicker/index.ts":{"bytes":483,"imports":[{"path":"src/components/IconPicker/IconPicker.tsx","kind":"import-statement","original":"./IconPicker"}],"format":"esm"},"src/components/index.ts":{"bytes":760,"imports":[{"path":"src/components/EmojiPicker/index.ts","kind":"import-statement","original":"./EmojiPicker"},{"path":"src/components/HuePicker/index.ts","kind":"import-statement","original":"./HuePicker"},{"path":"src/components/IconPicker/index.ts","kind":"import-statement","original":"./IconPicker"},{"path":"src/components/PickerButton/index.ts","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"src/index.ts":{"bytes":461,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":17879},"dist/lib/browser/index.mjs":{"imports":[{"path":"dist/lib/browser/chunk-IEOELSPW.mjs","kind":"import-statement"},{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePicker","IconPicker","PickerButton"],"entryPoint":"src/index.ts","cssBundle":"dist/lib/browser/index.css","inputs":{"src/components/EmojiPicker/EmojiPicker.tsx":{"bytesInOutput":3865},"src/components/EmojiPicker/emoji.css":{"bytesInOutput":0},"src/components/EmojiPicker/index.ts":{"bytesInOutput":0},"src/components/index.ts":{"bytesInOutput":0},"src/components/HuePicker/HuePicker.tsx":{"bytesInOutput":918},"src/components/PickerButton/PickerButton.tsx":{"bytesInOutput":2647},"src/components/PickerButton/index.ts":{"bytesInOutput":0},"src/components/HuePicker/index.ts":{"bytesInOutput":0},"src/components/IconPicker/IconPicker.tsx":{"bytesInOutput":622},"src/components/IconPicker/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":8469},"dist/lib/browser/components/IconPicker/icons.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":93},"dist/lib/browser/components/IconPicker/icons.mjs":{"imports":[{"path":"dist/lib/browser/chunk-IEOELSPW.mjs","kind":"import-statement"}],"exports":["iconValues","icons"],"entryPoint":"src/components/IconPicker/icons.ts","inputs":{},"bytes":135},"dist/lib/browser/chunk-IEOELSPW.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":2390},"dist/lib/browser/chunk-IEOELSPW.mjs":{"imports":[],"exports":["iconValues","icons"],"inputs":{"src/components/IconPicker/icons.ts":{"bytesInOutput":1617}},"bytes":1734},"dist/lib/browser/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":530},"dist/lib/browser/index.css":{"imports":[],"inputs":{"src/components/EmojiPicker/emoji.css":{"bytesInOutput":146}},"bytes":227}}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* src/components/EmojiPicker/emoji.css */
|
|
2
2
|
[data-theme=dark] em-emoji-picker {
|
|
3
|
-
--background-rgb: #
|
|
4
|
-
--rgb-background: #
|
|
3
|
+
--background-rgb: #3b3b3f;
|
|
4
|
+
--rgb-background: #3b3b3f;
|
|
5
5
|
--font-family: "Inter Variable", ui-sans-serif;
|
|
6
6
|
}
|
|
7
7
|
/*# sourceMappingURL=index.css.map */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker/emoji.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme
|
|
5
|
-
"mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;
|
|
4
|
+
"sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme='dark'] em-emoji-picker {\n /* TODO(burdon): Use tailwind tokens. */\n --background-rgb: #3b3b3f;\n --rgb-background: #3b3b3f;\n --font-family: 'Inter Variable', ui-sans-serif;\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;AAClB,iBAAe,gBAAgB,EAAE;AACnC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -72,7 +72,7 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
|
|
|
72
72
|
asChild: true
|
|
73
73
|
}, /* @__PURE__ */ React.createElement(Button, {
|
|
74
74
|
variant: triggerVariant,
|
|
75
|
-
classNames: "grow gap-2 text-2xl
|
|
75
|
+
classNames: "grow gap-2 text-2xl py-1",
|
|
76
76
|
disabled
|
|
77
77
|
}, /* @__PURE__ */ React.createElement("span", {
|
|
78
78
|
className: "sr-only"
|
|
@@ -142,7 +142,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValu
|
|
|
142
142
|
asChild: true
|
|
143
143
|
}, /* @__PURE__ */ React2.createElement(TriggerRoot, {
|
|
144
144
|
classNames: [
|
|
145
|
-
"gap-2
|
|
145
|
+
"gap-2 py-1",
|
|
146
146
|
classNames
|
|
147
147
|
],
|
|
148
148
|
disabled
|
|
@@ -159,7 +159,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValu
|
|
|
159
159
|
size: 3
|
|
160
160
|
})))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
|
|
161
161
|
side: "bottom",
|
|
162
|
-
classNames: "!
|
|
162
|
+
classNames: "!w-min"
|
|
163
163
|
}, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
|
|
164
164
|
classNames: "grid grid-cols-[repeat(6,min-content)]"
|
|
165
165
|
}, values.map((_value) => {
|
|
@@ -204,7 +204,7 @@ var HuePreview = ({ value, size = 5 }) => {
|
|
|
204
204
|
y: 0,
|
|
205
205
|
width: size,
|
|
206
206
|
height: size,
|
|
207
|
-
fill: `var(--
|
|
207
|
+
fill: `var(--color-${value}-surface)`,
|
|
208
208
|
strokeWidth: 4
|
|
209
209
|
})));
|
|
210
210
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EmojiPicker/EmojiPicker.tsx", "../../../src/components/HuePicker/HuePicker.tsx", "../../../src/components/PickerButton/PickerButton.tsx", "../../../src/components/IconPicker/IconPicker.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { 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\nimport './emoji.css';\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 plb-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 React from 'react';\n\nimport { type ButtonProps, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { getSize, hues, osTranslations } from '@dxos/ui-theme';\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 role='none' 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(--dx-${value}Fill)`} strokeWidth={4} />\n </svg>\n </div>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, 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: 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 plb-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='!is-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, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nimport { iconValues } from './icons';\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"],
|
|
5
|
-
"mappings": ";;;;;;AAIA,OAAOA,eAAe;AACtB,OAAOC,eAAe;AACtB,SAASC,4BAA4B;AACrC,OAAOC,SAASC,gBAAgB;AAEhC,SACEC,QACAC,aAEAC,MACAC,YACAC,SAEAC,SACAC,eACAC,iBACAC,sBACK;AACP,SAASC,sBAAsB;AAgBxB,IAAMC,2BAA2B,CAAC,EACvCC,YACAC,OACAC,UACAC,cACAC,cAAa,MAC0B;AACvC,QAAM,EAAEC,EAAC,IAAKC,eAAeC,cAAAA;AAC7B,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,QAAM,CAACC,aAAaC,aAAAA,IAAiBC,qBAA6B;IAChEC,MAAMZ;IACNa,UAAUV;IACVW,aAAaZ;EACf,CAAA;AAEA,QAAM,CAACa,iBAAiBC,kBAAAA,IAAsBC,SAAkB,KAAA;AAEhE,SACE,sBAAA,cAACC,QAAQC,MAAI;IACXC,MAAML;IACNM,cAAc,CAACC,aAAAA;AACbN,yBAAmBM,QAAAA;IACrB;KAEA,sBAAA,cAACJ,QAAQK,SAAO;IAACC,SAAAA;KACf,sBAAA,cAACC,QAAQC,YAAU;IACjBC,MAAK;IACLC,OAAOxB,EAAE,oBAAA;IACTyB,UAAAA;IACAC,aAAY;IACZ7B;OAGJ,sBAAA,cAACiB,QAAQa,QAAM,MACb,sBAAA,cAACb,QAAQc,SAAO;IACdC,MAAK;IACLC,kBAAkB,CAACC,UAAAA;AACjB,UAAIA,MAAMC,QAAQ,UAAU;AAC1BD,cAAME,gBAAe;AACrBrB,2BAAmB,KAAA;MACrB;IACF;KAGA,sBAAA,cAACsB,WAAAA;IACCC,MAAMC;IACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,UAAIA,QAAQ;AACVhC,sBAAcgC,MAAAA;AACd1B,2BAAmB,KAAA;MACrB;IACF;IACA2B,WAAW;IACXC,iBAAiB;IACjBC,gBAAgB;IAChBC,OAAOvC;MAET,sBAAA,cAACW,QAAQ6B,OAAK,IAAA,CAAA,CAAA,CAAA;AAKxB;AAKO,IAAMC,mBAAmB,CAAC,EAC/B/C,UACAC,cACAF,OACAG,eACA8C,cACAC,iBAAiB,SACjBnD,WAAU,MACO;AACjB,QAAM,EAAEK,EAAC,IAAKC,eAAeC,cAAAA;AAC7B,QAAM,CAAC6C,IAAAA,IAAQC,cAAc,IAAA;AAE7B,QAAM,CAACC,YAAY3C,aAAAA,IAAiBC,qBAA6B;IAC/DC,MAAMZ;IACNa,UAAUV;IACVW,aAAaZ;EACf,CAAA;AAEA,QAAM,CAACa,iBAAiBC,kBAAAA,IAAsBC,SAAkB,KAAA;AAEhE,SACE,sBAAA,cAACqC,aAAAA;IAAYvD;KACX,sBAAA,cAACmB,QAAQC,MAAI;IAACC,MAAML;IAAiBM,cAAcL;KACjD,sBAAA,cAACE,QAAQK,SAAO;IAACC,SAAAA;KACf,sBAAA,cAAC+B,QAAAA;IAAOC,SAASN;IAAgBnD,YAAW;
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { 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\nimport './emoji.css';\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 React from 'react';\n\nimport { type ButtonProps, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { getSize, hues, osTranslations } from '@dxos/ui-theme';\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 role='none' 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 { 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, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nimport { iconValues } from './icons';\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["emojiData", "EmojiMart", "useControllableState", "React", "useState", "Button", "ButtonGroup", "Icon", "IconButton", "Popover", "Toolbar", "useMediaQuery", "useThemeContext", "useTranslation", "osTranslations", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "osTranslations", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "Popover", "Root", "open", "onOpenChange", "nextOpen", "Trigger", "asChild", "Toolbar", "IconButton", "icon", "label", "iconOnly", "tooltipSide", "Portal", "Content", "side", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "Arrow", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "useMediaQuery", "emojiValue", "ButtonGroup", "Button", "variant", "span", "className", "Icon", "size", "sideOffset", "onClick", "React", "useTranslation", "getSize", "hues", "osTranslations", "useControllableState", "React", "useEffect", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "PickerButton", "Component", "disabled", "classNames", "defaultValue", "defaultValueProp", "value", "valueProp", "values", "label", "icon", "onChange", "onReset", "rootVariant", "iconSize", "setValue", "useControllableState", "prop", "defaultProp", "useEffect", "open", "setOpen", "useState", "TriggerRoot", "Toolbar", "Button", "React", "DropdownMenu", "Root", "modal", "onOpenChange", "Tooltip", "Trigger", "asChild", "content", "side", "span", "className", "size", "Icon", "Portal", "Content", "Viewport", "map", "_value", "CheckboxItem", "key", "checked", "onCheckedChange", "Arrow", "HuePicker", "props", "t", "useTranslation", "osTranslations", "React", "PickerButton", "Component", "HuePreview", "label", "icon", "values", "hues", "value", "size", "div", "role", "className", "svg", "viewBox", "getSize", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "React", "Icon", "useTranslation", "osTranslations", "IconPicker", "props", "t", "useTranslation", "osTranslations", "React", "PickerButton", "Component", "IconPreview", "label", "icon", "values", "iconValues", "value", "size", "Icon"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/components/EmojiPicker/emoji.css":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/EmojiPicker/emoji.css":{"bytes":305,"imports":[]},"src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":15352,"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/components/EmojiPicker/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"src/components/EmojiPicker/index.ts":{"bytes":489,"imports":[{"path":"src/components/EmojiPicker/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"}],"format":"esm"},"src/components/PickerButton/PickerButton.tsx":{"bytes":10005,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/PickerButton/index.ts":{"bytes":491,"imports":[{"path":"src/components/PickerButton/PickerButton.tsx","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"src/components/HuePicker/HuePicker.tsx":{"bytes":4227,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"src/components/HuePicker/index.ts":{"bytes":481,"imports":[{"path":"src/components/HuePicker/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"format":"esm"},"src/components/IconPicker/icons.ts":{"bytes":5225,"imports":[],"format":"esm"},"src/components/IconPicker/IconPicker.tsx":{"bytes":3425,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"},{"path":"src/components/IconPicker/icons.ts","kind":"import-statement","original":"./icons"}],"format":"esm"},"src/components/IconPicker/index.ts":{"bytes":483,"imports":[{"path":"src/components/IconPicker/IconPicker.tsx","kind":"import-statement","original":"./IconPicker"}],"format":"esm"},"src/components/index.ts":{"bytes":760,"imports":[{"path":"src/components/EmojiPicker/index.ts","kind":"import-statement","original":"./EmojiPicker"},{"path":"src/components/HuePicker/index.ts","kind":"import-statement","original":"./HuePicker"},{"path":"src/components/IconPicker/index.ts","kind":"import-statement","original":"./IconPicker"},{"path":"src/components/PickerButton/index.ts","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"src/index.ts":{"bytes":461,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":17880},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"dist/lib/node-esm/chunk-OLGXN23I.mjs","kind":"import-statement"},{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePicker","IconPicker","PickerButton"],"entryPoint":"src/index.ts","cssBundle":"dist/lib/node-esm/index.css","inputs":{"src/components/EmojiPicker/EmojiPicker.tsx":{"bytesInOutput":3865},"src/components/EmojiPicker/emoji.css":{"bytesInOutput":0},"src/components/EmojiPicker/index.ts":{"bytesInOutput":0},"src/components/index.ts":{"bytesInOutput":0},"src/components/HuePicker/HuePicker.tsx":{"bytesInOutput":918},"src/components/PickerButton/PickerButton.tsx":{"bytesInOutput":2647},"src/components/PickerButton/index.ts":{"bytesInOutput":0},"src/components/HuePicker/index.ts":{"bytesInOutput":0},"src/components/IconPicker/IconPicker.tsx":{"bytesInOutput":622},"src/components/IconPicker/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":8561},"dist/lib/node-esm/components/IconPicker/icons.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":93},"dist/lib/node-esm/components/IconPicker/icons.mjs":{"imports":[{"path":"dist/lib/node-esm/chunk-OLGXN23I.mjs","kind":"import-statement"}],"exports":["iconValues","icons"],"entryPoint":"src/components/IconPicker/icons.ts","inputs":{},"bytes":227},"dist/lib/node-esm/chunk-OLGXN23I.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":2392},"dist/lib/node-esm/chunk-OLGXN23I.mjs":{"imports":[],"exports":["iconValues","icons"],"inputs":{"src/components/IconPicker/icons.ts":{"bytesInOutput":1617}},"bytes":1827},"dist/lib/node-esm/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":530},"dist/lib/node-esm/index.css":{"imports":[],"inputs":{"src/components/EmojiPicker/emoji.css":{"bytesInOutput":146}},"bytes":227}}}
|
|
@@ -1 +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,MAAM,EAAE,CAAC;
|
|
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,GAAI,uJAa1B,iBAAiB,sBAoDnB,CAAC"}
|