@dxos/react-ui-pickers 0.8.4-main.e098934 → 0.8.4-main.ead640a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-pickers",
-  "version": "0.8.4-main.e098934",
+  "version": "0.8.4-main.ead640a",
   "description": "A collection of picker components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,25 +29,25 @@
     "@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.e098934",
-    "@dxos/react-ui-types": "0.8.4-main.e098934",
-    "@dxos/util": "0.8.4-main.e098934"
+    "@dxos/log": "0.8.4-main.ead640a",
+    "@dxos/react-ui-types": "0.8.4-main.ead640a",
+    "@dxos/util": "0.8.4-main.ead640a"
   },
   "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.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934",
-    "@dxos/storybook-utils": "0.8.4-main.e098934"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.1",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/react-ui": "0.8.4-main.ead640a",
+    "@dxos/react-ui-theme": "0.8.4-main.ead640a",
+    "@dxos/storybook-utils": "0.8.4-main.ead640a"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.ead640a",
+    "@dxos/react-ui-theme": "0.8.4-main.ead640a"
   },
   "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({ container: '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

@@ -112,7 +112,7 @@ export const EmojiPickerBlock = ({
   classNames,
 }: EmojiPickerProps) => {
   const { t } = useTranslation('os');
-  const [isMd] = useMediaQuery('md', { ssr: false });
+  const [isMd] = useMediaQuery('md');
 
   const [emojiValue, setEmojiValue] = useControllableState<string>({
     prop: emoji,

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({ container: 'column' })],
 } satisfies Meta<typeof HuePicker>;
 
 export default meta;

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({ container: 'column' })],
 } satisfies Meta<typeof IconPicker>;
 
 export default meta;

package/src/components/IconPicker/IconPicker.tsx

@@ -42,6 +42,12 @@ const IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconPr
  * NOTE: Select icons that we are unlikely to use for the UI.
  */
 const icons = [
+  'ph--house-line--regular',
+  'ph--planet--regular',
+  'ph--piggy-bank--regular',
+  'ph--snowflake--regular',
+  'ph--virus--regular',
+  'ph--graph--regular',
   'ph--air-traffic-control--regular',
   'ph--asterisk--regular',
   'ph--atom--regular',