@dxos/react-ui-pickers 0.8.4-main.e8ec1fe → 0.8.4-main.ef1bc66f44

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/react-ui-pickers",
-  "version": "0.8.4-main.e8ec1fe",
+  "version": "0.8.4-main.ef1bc66f44",
   "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,11 +17,21 @@
       "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": {
-    "*": {}
+    "*": {
+      "icons": [
+        "./dist/types/src/components/IconPicker/icons.d.ts"
+      ]
+    }
   },
   "files": [
     "dist",
@@ -26,28 +40,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.e8ec1fe",
-    "@dxos/react-ui-types": "0.8.4-main.e8ec1fe",
-    "@dxos/util": "0.8.4-main.e8ec1fe"
+    "@dxos/log": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-types": "0.8.4-main.ef1bc66f44",
+    "@dxos/util": "0.8.4-main.ef1bc66f44"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "@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-theme": "0.8.4-main.e8ec1fe",
-    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
-    "@dxos/storybook-utils": "0.8.4-main.e8ec1fe"
+    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44",
+    "@dxos/storybook-utils": "0.8.4-main.ef1bc66f44",
+    "@dxos/react-ui": "0.8.4-main.ef1bc66f44"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
-    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44"
   },
   "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({ container: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof EmojiPicker>;
 
 export default meta;

package/src/components/EmojiPicker/EmojiPicker.tsx

@@ -20,6 +20,7 @@ import {
   useThemeContext,
   useTranslation,
 } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/ui-theme';
 
 import './emoji.css';
 
@@ -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>({
@@ -112,7 +113,7 @@ export const EmojiPickerBlock = ({
   triggerVariant = 'ghost',
   classNames,
 }: EmojiPickerProps) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const [isMd] = useMediaQuery('md');
 
   const [emojiValue, setEmojiValue] = useControllableState<string>({

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

package/src/components/HuePicker/HuePicker.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { type ButtonProps, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { getSize, hues } from '@dxos/react-ui-theme';
+import { getSize, hues, osTranslations } from '@dxos/ui-theme';
 
 import { PickerButton, type PickerButtonProps } from '../PickerButton';
 
@@ -18,7 +18,7 @@ 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

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

package/src/components/IconPicker/IconPicker.tsx

@@ -5,9 +5,12 @@
 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;
   defaultValue?: string;
@@ -20,7 +23,7 @@ export type IconPickerProps = {
 >;
 
 export const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
 
   return (
     <PickerButton
@@ -36,66 +39,3 @@ export const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {
 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.
- */
-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/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

@@ -25,8 +25,8 @@ export const PickerButton = ({
   Component,
   disabled,
   classNames,
-  defaultValue: defaultValueParam,
-  value: valueParam,
+  defaultValue: defaultValueProp,
+  value: valueProp,
   values,
   label,
   icon,
@@ -36,12 +36,12 @@ export const PickerButton = ({
   iconSize = 5,
 }: PickerButtonProps) => {
   const [value, setValue] = useControllableState<string>({
-    prop: valueParam,
-    defaultProp: defaultValueParam,
+    prop: valueProp,
+    defaultProp: defaultValueProp,
     onChange,
   });
   // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.
-  useEffect(() => setValue(valueParam), [valueParam]);
+  useEffect(() => setValue(valueProp), [valueProp]);
 
   const [open, setOpen] = useState<boolean>(false);
   const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;