@dxos/react-ui-pickers 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-pickers",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.a4bbb77",
   "description": "A collection of picker components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -9,6 +9,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -28,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.84f28bd",
-    "@dxos/react-ui-types": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@dxos/log": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-types": "0.8.4-main.a4bbb77",
+    "@dxos/util": "0.8.4-main.a4bbb77"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
-    "@dxos/storybook-utils": "0.8.4-main.84f28bd"
+    "@types/react": "~19.2.0",
+    "@types/react-dom": "~19.2.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77",
+    "@dxos/storybook-utils": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,15 +2,25 @@
 // 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 { withTheme } from '@dxos/react-ui/testing';
+
+import { EmojiPickerBlock, type EmojiPickerProps, EmojiPickerToolbarButton } from './EmojiPicker';
 
-import { EmojiPickerBlock, EmojiPickerToolbarButton, type EmojiPickerProps } from './EmojiPicker';
+const meta = {
+  title: 'ui/react-ui-pickers/EmojiPicker',
+  component: EmojiPicker,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'column',
+  },
+} satisfies Meta<typeof EmojiPicker>;
+
+export default meta;
 
 const ToolbarButtonStory = (props: EmojiPickerProps) => {
   const [emoji, setEmoji] = useState<string>(props.defaultEmoji ?? '😀');
@@ -26,7 +36,7 @@ const BlockStory = (props: EmojiPickerProps) => {
   const [emoji, setEmoji] = useState<string>(props.defaultEmoji ?? '😀');
 
   return (
-    <div className='flex gap-2'>
+    <div>
       <EmojiPickerBlock
         {...props}
         emoji={emoji}
@@ -50,13 +60,3 @@ export const Block: StoryObj<EmojiPickerProps> = {
     defaultEmoji: '😀',
   },
 };
-
-const meta: Meta = {
-  title: 'ui/react-ui-pickers/EmojiPicker',
-  decorators: [withTheme, withLayout()],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;

package/src/components/EmojiPicker/EmojiPicker.tsx

@@ -9,7 +9,9 @@ import React, { useState } from 'react';
 
 import {
   Button,
+  ButtonGroup,
   type ButtonProps,
+  Icon,
   Popover,
   type ThemedClassName,
   Toolbar,
@@ -17,8 +19,6 @@ import {
   useMediaQuery,
   useThemeContext,
   useTranslation,
-  Icon,
-  ButtonGroup,
 } from '@dxos/react-ui';
 
 import './emoji.css';

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

@@ -2,17 +2,15 @@
 // 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 { withTheme } from '@dxos/react-ui/testing';
 
 import { HuePicker, type HuePickerProps } from './HuePicker';
 
-const ToolbarStory = (props: HuePickerProps) => {
+const DefaultStory = (props: HuePickerProps) => {
   const [hue, setHue] = useState<string | undefined>(props.defaultValue);
 
   return (
@@ -28,18 +26,21 @@ const ToolbarStory = (props: HuePickerProps) => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-pickers/HuePicker',
-  decorators: [withTheme, withLayout()],
+  component: HuePicker,
+  render: DefaultStory,
+  decorators: [withTheme],
   parameters: {
-    layout: 'centered',
+    layout: 'column',
   },
-};
+} satisfies Meta<typeof HuePicker>;
 
 export default meta;
 
-export const Default: StoryObj<HuePickerProps> = {
-  render: ToolbarStory,
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     defaultValue: 'red',
   },

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

@@ -2,17 +2,15 @@
 // 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 { withTheme } from '@dxos/react-ui/testing';
 
 import { IconPicker, type IconPickerProps } from './IconPicker';
 
-const ToolbarStory = (props: IconPickerProps) => {
+const DefaultStory = (props: IconPickerProps) => {
   const [icon, setIcon] = useState<string | undefined>(props.value ?? props.defaultValue);
   console.log(icon);
 
@@ -23,17 +21,20 @@ const ToolbarStory = (props: IconPickerProps) => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-pickers/IconPicker',
-  decorators: [withTheme, withLayout()],
+  component: IconPicker,
+  render: DefaultStory,
+  decorators: [withTheme],
   parameters: {
-    layout: 'centered',
+    layout: 'column',
   },
-};
+} satisfies Meta<typeof IconPicker>;
 
 export default meta;
 
-export const Default: StoryObj<IconPickerProps> = {
-  render: ToolbarStory,
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {},
 };

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',