@dxos/react-ui-pickers 0.8.4-main.dedc0f3 → 0.8.4-main.e00bdcdb52

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/react-ui-pickers",
-  "version": "0.8.4-main.dedc0f3",
+  "version": "0.8.4-main.e00bdcdb52",
   "description": "A collection of picker components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "type": "module",
@@ -13,12 +17,15 @@
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./icons": {
+      "source": "./src/components/IconPicker/icons.ts",
+      "types": "./dist/types/src/components/IconPicker/icons.d.ts",
+      "browser": "./dist/lib/browser/components/IconPicker/icons.mjs",
+      "node": "./dist/lib/node-esm/components/IconPicker/icons.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -26,28 +33,27 @@
   "dependencies": {
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
-    "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/log": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-types": "0.8.4-main.dedc0f3",
-    "@dxos/util": "0.8.4-main.dedc0f3"
+    "@dxos/log": "0.8.4-main.e00bdcdb52",
+    "@dxos/ui-types": "0.8.4-main.e00bdcdb52",
+    "@dxos/util": "0.8.4-main.e00bdcdb52"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
-    "@dxos/storybook-utils": "0.8.4-main.dedc0f3"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.10",
+    "@dxos/storybook-utils": "0.8.4-main.e00bdcdb52",
+    "@dxos/react-ui": "0.8.4-main.e00bdcdb52",
+    "@dxos/ui-theme": "0.8.4-main.e00bdcdb52"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.e00bdcdb52",
+    "@dxos/ui-theme": "0.8.4-main.e00bdcdb52"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,24 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import EmojiPicker from '@emoji-mart/react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Toolbar } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { EmojiPickerBlock, type EmojiPickerProps, EmojiPickerToolbarButton } from './EmojiPicker';
 
 const meta = {
   title: 'ui/react-ui-pickers/EmojiPicker',
   component: EmojiPicker,
-  decorators: [withTheme, withLayout()],
-  parameters: {
-    layout: 'centered',
-  },
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof EmojiPicker>;
 
 export default meta;
@@ -38,7 +33,7 @@ const BlockStory = (props: EmojiPickerProps) => {
   const [emoji, setEmoji] = useState<string>(props.defaultEmoji ?? '😀');
 
   return (
-    <div className='flex gap-2'>
+    <div>
       <EmojiPickerBlock
         {...props}
         emoji={emoji}

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';
@@ -12,16 +14,15 @@ import {
   ButtonGroup,
   type ButtonProps,
   Icon,
+  IconButton,
   Popover,
   type ThemedClassName,
   Toolbar,
-  Tooltip,
   useMediaQuery,
   useThemeContext,
   useTranslation,
 } from '@dxos/react-ui';
-
-import './emoji.css';
+import { osTranslations } from '@dxos/ui-theme';
 
 export type EmojiPickerProps = ThemedClassName<{
   disabled?: boolean;
@@ -42,7 +43,7 @@ export const EmojiPickerToolbarButton = ({
   defaultEmoji,
   onChangeEmoji,
 }: Omit<EmojiPickerProps, 'onClickClear'>) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const { themeMode } = useThemeContext();
 
   const [_emojiValue, setEmojiValue] = useControllableState<string>({
@@ -60,14 +61,15 @@ export const EmojiPickerToolbarButton = ({
         setEmojiPickerOpen(nextOpen);
       }}
     >
-      <Tooltip.Trigger asChild content={t('select emoji label')} side='bottom'>
-        <Popover.Trigger asChild>
-          <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>
-            <span className='sr-only'>{t('select emoji label')}</span>
-            <Icon icon='ph--user-circle--regular' size={5} />
-          </Toolbar.Button>
-        </Popover.Trigger>
-      </Tooltip.Trigger>
+      <Popover.Trigger asChild>
+        <Toolbar.IconButton
+          icon='ph--user-circle--regular'
+          label={t('select-emoji.label')}
+          iconOnly
+          tooltipSide='bottom'
+          disabled={disabled}
+        />
+      </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
           side='bottom'
@@ -111,8 +113,8 @@ export const EmojiPickerBlock = ({
   triggerVariant = 'ghost',
   classNames,
 }: EmojiPickerProps) => {
-  const { t } = useTranslation('os');
-  const [isMd] = useMediaQuery('md', { ssr: false });
+  const { t } = useTranslation(osTranslations);
+  const [isMd] = useMediaQuery('md');
 
   const [emojiValue, setEmojiValue] = useControllableState<string>({
     prop: emoji,
@@ -126,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>
@@ -157,12 +159,15 @@ export const EmojiPickerBlock = ({
           <Popover.Arrow />
         </Popover.Content>
       </Popover.Root>
-      <Tooltip.Trigger asChild content={t('clear label')} side='right'>
-        <Button variant={triggerVariant} onClick={onClickClear} disabled={disabled}>
-          <span className='sr-only'>{t('clear label')}</span>
-          <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />
-        </Button>
-      </Tooltip.Trigger>
+      <IconButton
+        icon='ph--arrow-counter-clockwise--regular'
+        iconOnly
+        label={t('clear.label')}
+        tooltipSide='right'
+        variant={triggerVariant}
+        onClick={onClickClear}
+        disabled={disabled}
+      />
     </ButtonGroup>
   );
 };

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

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Toolbar } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { HuePicker, type HuePickerProps } from './HuePicker';
 
@@ -32,10 +30,7 @@ const meta = {
   title: 'ui/react-ui-pickers/HuePicker',
   component: HuePicker,
   render: DefaultStory,
-  decorators: [withTheme, withLayout()],
-  parameters: {
-    layout: 'centered',
-  },
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof HuePicker>;
 
 export default meta;

package/src/components/HuePicker/HuePicker.tsx

@@ -4,8 +4,8 @@
 
 import React from 'react';
 
-import { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { hues } from '@dxos/react-ui-theme';
+import { type ButtonProps, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { getSize, hues, osTranslations } from '@dxos/ui-theme';
 
 import { PickerButton, type PickerButtonProps } from '../PickerButton';
 
@@ -18,12 +18,12 @@ export type HuePickerProps = {
 } & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;
 
 export const HuePicker = (props: ThemedClassName<HuePickerProps>) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
 
   return (
     <PickerButton
       Component={HuePreview}
-      label={t('select hue label')}
+      label={t('select-hue.label')}
       icon='ph--palette--regular'
       values={hues}
       {...props}
@@ -31,15 +31,11 @@ export const HuePicker = (props: ThemedClassName<HuePickerProps>) => {
   );
 };
 
-const HuePreview = ({ value }: { value: string }) => {
-  const size = 16;
+const HuePreview = ({ value, size = 5 }: { value: string; size?: IconProps['size'] }) => {
   return (
-    <div className='flex p-[2px] justify-center items-center'>
-      <svg
-        viewBox={`0 0 ${size} ${size}`}
-        className='is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]'
-      >
-        <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />
+    <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(--color-${value}-surface)`} strokeWidth={4} />
       </svg>
     </div>
   );

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

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Toolbar } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { IconPicker, type IconPickerProps } from './IconPicker';
 
@@ -27,10 +25,7 @@ const meta = {
   title: 'ui/react-ui-pickers/IconPicker',
   component: IconPicker,
   render: DefaultStory,
-  decorators: [withTheme, withLayout()],
-  parameters: {
-    layout: 'centered',
-  },
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof IconPicker>;
 
 export default meta;

package/src/components/IconPicker/IconPicker.tsx

@@ -5,8 +5,10 @@
 import React from 'react';
 
 import { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/ui-theme';
 
 import { PickerButton, type PickerButtonProps } from '../PickerButton';
+import { iconValues } from './icons';
 
 export type IconPickerProps = {
   disabled?: boolean;
@@ -16,16 +18,16 @@ export type IconPickerProps = {
   onReset?: ButtonProps['onClick'];
 } & Pick<
   PickerButtonProps,
-  'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant' | 'iconSize'
+  'disabled' | 'rootVariant' | 'iconSize' | 'defaultValue' | 'value' | 'onChange' | 'onReset'
 >;
 
 export const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
 
   return (
     <PickerButton
       Component={IconPreview}
-      label={t('select icon label')}
+      label={t('select-icon.label')}
       icon='ph--selection--regular'
       values={iconValues}
       {...props}
@@ -33,63 +35,6 @@ export const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {
   );
 };
 
-const IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconProps['size'] }) => {
-  return <Icon icon={`ph--${value}--regular`} size={iconSize} />;
+const IconPreview = ({ value, size }: { value: string; size?: IconProps['size'] }) => {
+  return <Icon icon={`ph--${value}--regular`} size={size} />;
 };
-
-/**
- * https://phosphoricons.com
- * NOTE: Select icons that we are unlikely to use for the UI.
- */
-const icons = [
-  'ph--air-traffic-control--regular',
-  'ph--asterisk--regular',
-  'ph--atom--regular',
-  'ph--basketball--regular',
-  'ph--butterfly--regular',
-  'ph--cactus--regular',
-  'ph--cake--regular',
-  'ph--calendar-dots--regular',
-  'ph--campfire--regular',
-  'ph--command--regular',
-  'ph--confetti--regular',
-  'ph--detective--regular',
-  'ph--disco-ball--regular',
-  'ph--dna--regular',
-  'ph--factory--regular',
-  'ph--flag-banner-fold--regular',
-  'ph--flask--regular',
-  'ph--flower-lotus--regular',
-  'ph--flying-saucer--regular',
-  'ph--game-controller--regular',
-  'ph--gavel--regular',
-  'ph--gift--regular',
-  'ph--guitar--regular',
-  'ph--hamburger--regular',
-  'ph--handshake--regular',
-  'ph--heart--regular',
-  'ph--lightbulb--regular',
-  'ph--lock--regular',
-  'ph--martini--regular',
-  'ph--medal-military--regular',
-  'ph--moped-front--regular',
-  'ph--office-chair--regular',
-  'ph--paint-brush-household--regular',
-  'ph--peace--regular',
-  'ph--person-simple-hike--regular',
-  'ph--piggy-bank--regular',
-  'ph--potted-plant--regular',
-  'ph--radioactive--regular',
-  'ph--rocket-launch--regular',
-  'ph--shield-star--regular',
-  'ph--shopping-cart--regular',
-  'ph--stethoscope--regular',
-  'ph--student--regular',
-  'ph--sun--regular',
-  'ph--tote--regular',
-  'ph--tree--regular',
-  'ph--users-three--regular',
-  'ph--yin-yang--regular',
-];
-
-const iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);

package/src/components/IconPicker/icons.ts

@@ -0,0 +1,66 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+/**
+ * https://phosphoricons.com
+ * NOTE: Select icons that we are unlikely to use for the UI.
+ */
+export const icons = [
+  'ph--house-line--regular',
+  'ph--planet--regular',
+  'ph--castle-turret--regular',
+  'ph--snowflake--regular',
+  'ph--virus--regular',
+  'ph--graph--regular',
+  'ph--air-traffic-control--regular',
+  'ph--asterisk--regular',
+  'ph--atom--regular',
+  'ph--basketball--regular',
+  'ph--butterfly--regular',
+  'ph--cactus--regular',
+  'ph--cake--regular',
+  'ph--calendar-dots--regular',
+  'ph--campfire--regular',
+  'ph--command--regular',
+  'ph--confetti--regular',
+  'ph--detective--regular',
+  'ph--disco-ball--regular',
+  'ph--dna--regular',
+  'ph--factory--regular',
+  'ph--flag-banner-fold--regular',
+  'ph--flask--regular',
+  'ph--flower-lotus--regular',
+  'ph--flying-saucer--regular',
+  'ph--game-controller--regular',
+  'ph--gavel--regular',
+  'ph--gift--regular',
+  'ph--guitar--regular',
+  'ph--hamburger--regular',
+  'ph--handshake--regular',
+  'ph--heart--regular',
+  'ph--lightbulb--regular',
+  'ph--lock--regular',
+  'ph--martini--regular',
+  'ph--medal-military--regular',
+  'ph--moped-front--regular',
+  'ph--office-chair--regular',
+  'ph--paint-brush-household--regular',
+  'ph--peace--regular',
+  'ph--person-simple-hike--regular',
+  'ph--piggy-bank--regular',
+  'ph--potted-plant--regular',
+  'ph--radioactive--regular',
+  'ph--rocket-launch--regular',
+  'ph--shield-star--regular',
+  'ph--shopping-cart--regular',
+  'ph--stethoscope--regular',
+  'ph--student--regular',
+  'ph--sun--regular',
+  'ph--tote--regular',
+  'ph--tree--regular',
+  'ph--users-three--regular',
+  'ph--yin-yang--regular',
+];
+
+export const iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);

package/src/components/PickerButton/PickerButton.tsx

@@ -8,10 +8,10 @@ import React, { type FC, useEffect, useState } from 'react';
 import { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';
 
 export type PickerButtonProps = ThemedClassName<{
-  Component: FC<{ value: string; iconSize?: IconProps['size'] }>;
+  Component: FC<{ value: string; size?: IconProps['size'] }>;
   label: string;
   icon: string;
-  values: string[];
+  values: readonly string[];
   disabled?: boolean;
   defaultValue?: string;
   value?: string;
@@ -25,8 +25,8 @@ export const PickerButton = ({
   Component,
   disabled,
   classNames,
-  defaultValue: _defaultValue,
-  value: _value,
+  defaultValue: defaultValueProp,
+  value: valueProp,
   values,
   label,
   icon,
@@ -36,30 +36,29 @@ export const PickerButton = ({
   iconSize = 5,
 }: PickerButtonProps) => {
   const [value, setValue] = useControllableState<string>({
-    prop: _value,
-    defaultProp: _defaultValue,
+    prop: valueProp,
+    defaultProp: defaultValueProp,
     onChange,
   });
   // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.
-  useEffect(() => setValue(_value), [_value]);
+  useEffect(() => setValue(valueProp), [valueProp]);
 
   const [open, setOpen] = useState<boolean>(false);
-
   const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;
 
   return (
     <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} iconSize={iconSize} />) || <Icon icon={icon} size={iconSize} />}
+            {(value && <Component value={value} size={iconSize} />) || <Icon icon={icon} size={iconSize} />}
             <Icon icon='ph--caret-down--bold' size={3} />
           </TriggerRoot>
         </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 (
@@ -69,7 +68,7 @@ export const PickerButton = ({
                   onCheckedChange={() => setValue(_value)}
                   classNames={'p-1 items-center justify-center aspect-square'}
                 >
-                  <Component value={_value} iconSize={iconSize} />
+                  <Component value={_value} size={iconSize} />
                 </DropdownMenu.CheckboxItem>
               );
             })}