@dxos/react-ui-pickers 0.8.4-main.9735255 → 0.8.4-main.9be5663bfe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-pickers",
-  "version": "0.8.4-main.9735255",
+  "version": "0.8.4-main.9be5663bfe",
   "description": "A collection of picker components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -42,25 +42,25 @@
     "@emoji-mart/react": "^1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/log": "0.8.4-main.9735255",
-    "@dxos/ui-types": "0.8.4-main.9735255",
-    "@dxos/util": "0.8.4-main.9735255"
+    "@dxos/log": "0.8.4-main.9be5663bfe",
+    "@dxos/ui-types": "0.8.4-main.9be5663bfe",
+    "@dxos/util": "0.8.4-main.9be5663bfe"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.4-main.9735255",
-    "@dxos/storybook-utils": "0.8.4-main.9735255",
-    "@dxos/ui-theme": "0.8.4-main.9735255"
+    "vite": "^7.1.11",
+    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe",
+    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
+    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.9735255",
-    "@dxos/ui-theme": "0.8.4-main.9735255"
+    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
+    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
   },
   "publishConfig": {
     "access": "public"

package/src/components/EmojiPicker/EmojiPicker.stories.tsx

@@ -14,7 +14,7 @@ import { EmojiPickerBlock, type EmojiPickerProps, EmojiPickerToolbarButton } fro
 const meta = {
   title: 'ui/react-ui-pickers/EmojiPicker',
   component: EmojiPicker,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof EmojiPicker>;
 
 export default meta;

package/src/components/EmojiPicker/EmojiPicker.tsx

@@ -2,6 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
+import './emoji.css';
+
 import emojiData from '@emoji-mart/data';
 import EmojiMart from '@emoji-mart/react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
@@ -22,8 +24,6 @@ import {
 } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/ui-theme';
 
-import './emoji.css';
-
 export type EmojiPickerProps = ThemedClassName<{
   disabled?: boolean;
   defaultEmoji?: string;
@@ -64,7 +64,7 @@ export const EmojiPickerToolbarButton = ({
       <Popover.Trigger asChild>
         <Toolbar.IconButton
           icon='ph--user-circle--regular'
-          label={t('select emoji label')}
+          label={t('select-emoji.label')}
           iconOnly
           tooltipSide='bottom'
           disabled={disabled}
@@ -128,8 +128,8 @@ export const EmojiPickerBlock = ({
     <ButtonGroup classNames={classNames}>
       <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>
         <Popover.Trigger asChild>
-          <Button variant={triggerVariant} classNames='grow gap-2 text-2xl plb-1' disabled={disabled}>
-            <span className='sr-only'>{t('select emoji label')}</span>
+          <Button variant={triggerVariant} classNames='grow gap-2 text-2xl py-1' disabled={disabled}>
+            <span className='sr-only'>{t('select-emoji.label')}</span>
             <span>{emojiValue}</span>
             <Icon icon='ph--caret-down--bold' size={3} />
           </Button>
@@ -162,7 +162,7 @@ export const EmojiPickerBlock = ({
       <IconButton
         icon='ph--arrow-counter-clockwise--regular'
         iconOnly
-        label={t('clear label')}
+        label={t('clear.label')}
         tooltipSide='right'
         variant={triggerVariant}
         onClick={onClickClear}

package/src/components/EmojiPicker/emoji.css

@@ -1,25 +1,9 @@
 /**
  * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
  */
-[data-theme="dark"] em-emoji-picker {
-  /* TODO(burdon): Get from TW defs: modal-surface? */
-  --background-rgb: #3B3B3F;
-  --rgb-background: #3B3B3F;
-
-  --font-family: "Inter Variable", ui-sans-serif;
-
-  /*--font-size: 16px;*/
-  /*--color-border-over: rgba(0, 0, 0, 0.1);*/
-  /*--color-border: rgba(0, 0, 0, 0.05);*/
-  /*--category-icon-size: 24px;*/
-  /*--border-radius: 24px;*/
-  /*--font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;*/
-  /*--rgb-accent: 255, 105, 180;*/
-  /*--rgb-color: 102, 51, 153;*/
-  /*--rgb-input: 255, 235, 235;*/
-  /*--shadow: 5px 5px 15px -8px rebeccapurple;*/
-
-  /*height: 50vh;*/
-  /*min-height: 400px;*/
-  /*max-height: 800px;*/
+[data-theme='dark'] em-emoji-picker {
+  /* TODO(burdon): Use tailwind tokens. */
+  --background-rgb: #3b3b3f;
+  --rgb-background: #3b3b3f;
+  --font-family: 'Inter Variable', ui-sans-serif;
 }

package/src/components/HuePicker/HuePicker.stories.tsx

@@ -30,7 +30,7 @@ const meta = {
   title: 'ui/react-ui-pickers/HuePicker',
   component: HuePicker,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof HuePicker>;
 
 export default meta;

package/src/components/HuePicker/HuePicker.tsx

@@ -23,7 +23,7 @@ export const HuePicker = (props: ThemedClassName<HuePickerProps>) => {
   return (
     <PickerButton
       Component={HuePreview}
-      label={t('select hue label')}
+      label={t('select-hue.label')}
       icon='ph--palette--regular'
       values={hues}
       {...props}
@@ -35,7 +35,7 @@ const HuePreview = ({ value, size = 5 }: { value: string; size?: IconProps['size
   return (
     <div role='none' className='flex justify-center items-center'>
       <svg viewBox={`0 0 ${size} ${size}`} className={getSize(size)}>
-        <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />
+        <rect x={0} y={0} width={size} height={size} fill={`var(--color-${value}-surface)`} strokeWidth={4} />
       </svg>
     </div>
   );

package/src/components/IconPicker/IconPicker.stories.tsx

@@ -25,7 +25,7 @@ const meta = {
   title: 'ui/react-ui-pickers/IconPicker',
   component: IconPicker,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof IconPicker>;
 
 export default meta;

package/src/components/IconPicker/IconPicker.tsx

@@ -8,7 +8,6 @@ import { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTransl
 import { osTranslations } from '@dxos/ui-theme';
 
 import { PickerButton, type PickerButtonProps } from '../PickerButton';
-
 import { iconValues } from './icons';
 
 export type IconPickerProps = {
@@ -28,7 +27,7 @@ export const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {
   return (
     <PickerButton
       Component={IconPreview}
-      label={t('select icon label')}
+      label={t('select-icon.label')}
       icon='ph--selection--regular'
       values={iconValues}
       {...props}

package/src/components/PickerButton/PickerButton.tsx

@@ -11,7 +11,7 @@ export type PickerButtonProps = ThemedClassName<{
   Component: FC<{ value: string; size?: IconProps['size'] }>;
   label: string;
   icon: string;
-  values: string[];
+  values: readonly string[];
   disabled?: boolean;
   defaultValue?: string;
   value?: string;
@@ -50,7 +50,7 @@ export const PickerButton = ({
     <DropdownMenu.Root modal={false} open={open} onOpenChange={setOpen}>
       <Tooltip.Trigger asChild content={label} side='bottom'>
         <DropdownMenu.Trigger asChild>
-          <TriggerRoot classNames={['gap-2 plb-1', classNames]} disabled={disabled}>
+          <TriggerRoot classNames={['gap-2 py-1', classNames]} disabled={disabled}>
             <span className='sr-only'>{label}</span>
             {(value && <Component value={value} size={iconSize} />) || <Icon icon={icon} size={iconSize} />}
             <Icon icon='ph--caret-down--bold' size={3} />
@@ -58,7 +58,7 @@ export const PickerButton = ({
         </DropdownMenu.Trigger>
       </Tooltip.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content side='bottom' classNames='!is-min'>
+        <DropdownMenu.Content side='bottom' classNames='!w-min'>
           <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>
             {values.map((_value) => {
               return (