@dxos/react-ui-pickers 0.8.4-main.b97322e → 0.8.4-main.bc2380dfbc

package/dist/lib/browser/index.mjs

@@ -1,333 +1,232 @@
+import {
+  iconValues
+} from "./chunk-D3UYVI3X.mjs";
+
 // src/components/EmojiPicker/EmojiPicker.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import emojiData from "@emoji-mart/data";
 import EmojiMart from "@emoji-mart/react";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import React, { useState } from "react";
-import { Button, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation, Icon, ButtonGroup } from "@dxos/react-ui";
+import { Button, ButtonGroup, Icon, IconButton, Popover, Toolbar, useMediaQuery, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { osTranslations } from "@dxos/ui-theme";
 var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation("os");
-    const { themeMode } = useThemeContext();
-    const [_emojiValue, setEmojiValue] = useControllableState({
-      prop: emoji,
-      onChange: onChangeEmoji,
-      defaultProp: defaultEmoji
-    });
-    const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-    return /* @__PURE__ */ React.createElement(Popover.Root, {
-      open: emojiPickerOpen,
-      onOpenChange: (nextOpen) => {
-        setEmojiPickerOpen(nextOpen);
+  const { t } = useTranslation(osTranslations);
+  const { themeMode } = useThemeContext();
+  const [_emojiValue, setEmojiValue] = useControllableState({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji
+  });
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement(Popover.Root, {
+    open: emojiPickerOpen,
+    onOpenChange: (nextOpen) => {
+      setEmojiPickerOpen(nextOpen);
+    }
+  }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Toolbar.IconButton, {
+    icon: "ph--user-circle--regular",
+    label: t("select-emoji.label"),
+    iconOnly: true,
+    tooltipSide: "bottom",
+    disabled
+  })), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
+    side: "bottom",
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setEmojiPickerOpen(false);
       }
-    }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
-      asChild: true,
-      content: t("select emoji label"),
-      side: "bottom"
-    }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Toolbar.Button, {
-      classNames: [
-        "gap-2 text-2xl plb-1",
-        classNames
-      ],
-      disabled
-    }, /* @__PURE__ */ React.createElement("span", {
-      className: "sr-only"
-    }, t("select emoji label")), /* @__PURE__ */ React.createElement(Icon, {
-      icon: "ph--user-circle--regular",
-      size: 5
-    })))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
-      side: "bottom",
-      onKeyDownCapture: (event) => {
-        if (event.key === "Escape") {
-          event.stopPropagation();
-          setEmojiPickerOpen(false);
-        }
+    }
+  }, /* @__PURE__ */ React.createElement(EmojiMart, {
+    data: emojiData,
+    onEmojiSelect: ({ native }) => {
+      if (native) {
+        setEmojiValue(native);
+        setEmojiPickerOpen(false);
       }
-    }, /* @__PURE__ */ React.createElement(EmojiMart, {
-      data: emojiData,
-      onEmojiSelect: ({ native }) => {
-        if (native) {
-          setEmojiValue(native);
-          setEmojiPickerOpen(false);
-        }
-      },
-      autoFocus: true,
-      maxFrequentRows: 0,
-      noCountryFlags: true,
-      theme: themeMode
-    }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
+    },
+    autoFocus: true,
+    maxFrequentRows: 0,
+    noCountryFlags: true,
+    theme: themeMode
+  }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
 };
 var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation("os");
-    const [isMd] = useMediaQuery("md", {
-      ssr: false
-    });
-    const [emojiValue, setEmojiValue] = useControllableState({
-      prop: emoji,
-      onChange: onChangeEmoji,
-      defaultProp: defaultEmoji
-    });
-    const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-    return /* @__PURE__ */ React.createElement(ButtonGroup, {
-      classNames
-    }, /* @__PURE__ */ React.createElement(Popover.Root, {
-      open: emojiPickerOpen,
-      onOpenChange: setEmojiPickerOpen
-    }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Button, {
-      variant: triggerVariant,
-      classNames: "grow gap-2 text-2xl plb-1",
-      disabled
-    }, /* @__PURE__ */ React.createElement("span", {
-      className: "sr-only"
-    }, t("select emoji label")), /* @__PURE__ */ React.createElement("span", null, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
-      icon: "ph--caret-down--bold",
-      size: 3
-    }))), /* @__PURE__ */ React.createElement(Popover.Content, {
-      side: "right",
-      sideOffset: isMd ? 0 : -310,
-      onKeyDownCapture: (event) => {
-        if (event.key === "Escape") {
-          event.stopPropagation();
-          setEmojiPickerOpen(false);
-        }
+  const { t } = useTranslation(osTranslations);
+  const [isMd] = useMediaQuery("md");
+  const [emojiValue, setEmojiValue] = useControllableState({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji
+  });
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement(ButtonGroup, {
+    classNames
+  }, /* @__PURE__ */ React.createElement(Popover.Root, {
+    open: emojiPickerOpen,
+    onOpenChange: setEmojiPickerOpen
+  }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: triggerVariant,
+    classNames: "grow gap-2 text-2xl py-1",
+    disabled
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, t("select-emoji.label")), /* @__PURE__ */ React.createElement("span", null, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--caret-down--bold",
+    size: 3
+  }))), /* @__PURE__ */ React.createElement(Popover.Content, {
+    side: "right",
+    sideOffset: isMd ? 0 : -310,
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setEmojiPickerOpen(false);
+      }
+    }
+  }, /* @__PURE__ */ React.createElement(EmojiMart, {
+    data: emojiData,
+    onEmojiSelect: ({ native }) => {
+      if (native) {
+        setEmojiValue(native);
+        setEmojiPickerOpen(false);
       }
-    }, /* @__PURE__ */ React.createElement(EmojiMart, {
-      data: emojiData,
-      onEmojiSelect: ({ native }) => {
-        if (native) {
-          setEmojiValue(native);
-          setEmojiPickerOpen(false);
-        }
-      },
-      autoFocus: true,
-      maxFrequentRows: 0,
-      noCountryFlags: true
-    }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
-      asChild: true,
-      content: t("clear label"),
-      side: "right"
-    }, /* @__PURE__ */ React.createElement(Button, {
-      variant: triggerVariant,
-      onClick: onClickClear,
-      disabled
-    }, /* @__PURE__ */ React.createElement("span", {
-      className: "sr-only"
-    }, t("clear label")), /* @__PURE__ */ React.createElement(Icon, {
-      icon: "ph--arrow-counter-clockwise--regular",
-      size: 5
-    }))));
-  } finally {
-    _effect.f();
-  }
+    },
+    autoFocus: true,
+    maxFrequentRows: 0,
+    noCountryFlags: true
+  }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--arrow-counter-clockwise--regular",
+    iconOnly: true,
+    label: t("clear.label"),
+    tooltipSide: "right",
+    variant: triggerVariant,
+    onClick: onClickClear,
+    disabled
+  }));
 };
 
 // src/components/HuePicker/HuePicker.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import React3 from "react";
 import { useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { hues } from "@dxos/react-ui-theme";
+import { getSize, hues, osTranslations as osTranslations2 } from "@dxos/ui-theme";
 
 // src/components/PickerButton/PickerButton.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
 import React2, { useEffect, useState as useState2 } from "react";
-import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip as Tooltip2 } from "@dxos/react-ui";
-var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
-  var _effect = _useSignals2();
-  try {
-    const [value, setValue] = useControllableState2({
-      prop: _value,
-      defaultProp: _defaultValue,
-      onChange
-    });
-    useEffect(() => setValue(_value), [
-      _value
-    ]);
-    const [open, setOpen] = useState2(false);
-    const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
-    return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
-      modal: false,
-      open,
-      onOpenChange: setOpen
-    }, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
-      asChild: true,
-      content: label,
-      side: "bottom"
-    }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React2.createElement(TriggerRoot, {
-      classNames: [
-        "gap-2 plb-1",
-        classNames
-      ],
-      disabled
-    }, /* @__PURE__ */ React2.createElement("span", {
-      className: "sr-only"
-    }, label), value && /* @__PURE__ */ React2.createElement(Component, {
-      value,
-      iconSize
-    }) || /* @__PURE__ */ React2.createElement(Icon2, {
-      icon,
-      size: iconSize
-    }), /* @__PURE__ */ React2.createElement(Icon2, {
-      icon: "ph--caret-down--bold",
-      size: 3
-    })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
-      side: "bottom",
-      classNames: "!is-min"
-    }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
-      classNames: "grid grid-cols-[repeat(6,min-content)]"
-    }, values.map((_value2) => {
-      return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
-        key: _value2,
-        checked: _value2 === value,
-        onCheckedChange: () => setValue(_value2),
-        classNames: "p-1 items-center justify-center aspect-square"
-      }, /* @__PURE__ */ React2.createElement(Component, {
-        value: _value2,
-        iconSize
-      }));
-    }), onReset && /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
-      onCheckedChange: () => onReset(),
+import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip } from "@dxos/react-ui";
+var PickerButton = ({ Component, disabled, classNames, defaultValue: defaultValueProp, value: valueProp, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
+  const [value, setValue] = useControllableState2({
+    prop: valueProp,
+    defaultProp: defaultValueProp,
+    onChange
+  });
+  useEffect(() => setValue(valueProp), [
+    valueProp
+  ]);
+  const [open, setOpen] = useState2(false);
+  const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
+  return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+    modal: false,
+    open,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: label,
+    side: "bottom"
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(TriggerRoot, {
+    classNames: [
+      "gap-2 py-1",
+      classNames
+    ],
+    disabled
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, label), value && /* @__PURE__ */ React2.createElement(Component, {
+    value,
+    size: iconSize
+  }) || /* @__PURE__ */ React2.createElement(Icon2, {
+    icon,
+    size: iconSize
+  }), /* @__PURE__ */ React2.createElement(Icon2, {
+    icon: "ph--caret-down--bold",
+    size: 3
+  })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
+    side: "bottom",
+    classNames: "!w-min"
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
+    classNames: "grid grid-cols-[repeat(6,min-content)]"
+  }, values.map((_value) => {
+    return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+      key: _value,
+      checked: _value === value,
+      onCheckedChange: () => setValue(_value),
       classNames: "p-1 items-center justify-center aspect-square"
-    }, /* @__PURE__ */ React2.createElement(Icon2, {
-      icon: "ph--x--regular",
+    }, /* @__PURE__ */ React2.createElement(Component, {
+      value: _value,
       size: iconSize
-    }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
+    }));
+  }), onReset && /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+    onCheckedChange: () => onReset(),
+    classNames: "p-1 items-center justify-center aspect-square"
+  }, /* @__PURE__ */ React2.createElement(Icon2, {
+    icon: "ph--x--regular",
+    size: iconSize
+  }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
 };
 
 // src/components/HuePicker/HuePicker.tsx
 var HuePicker = (props) => {
-  var _effect = _useSignals3();
-  try {
-    const { t } = useTranslation2("os");
-    return /* @__PURE__ */ React3.createElement(PickerButton, {
-      Component: HuePreview,
-      label: t("select hue label"),
-      icon: "ph--palette--regular",
-      values: hues,
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation2(osTranslations2);
+  return /* @__PURE__ */ React3.createElement(PickerButton, {
+    Component: HuePreview,
+    label: t("select-hue.label"),
+    icon: "ph--palette--regular",
+    values: hues,
+    ...props
+  });
 };
-var HuePreview = ({ value }) => {
-  var _effect = _useSignals3();
-  try {
-    const size = 16;
-    return /* @__PURE__ */ React3.createElement("div", {
-      className: "flex p-[2px] justify-center items-center"
-    }, /* @__PURE__ */ React3.createElement("svg", {
-      viewBox: `0 0 ${size} ${size}`,
-      className: "is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]"
-    }, /* @__PURE__ */ React3.createElement("rect", {
-      x: 0,
-      y: 0,
-      width: size,
-      height: size,
-      fill: `var(--dx-${value}Fill)`,
-      strokeWidth: 4
-    })));
-  } finally {
-    _effect.f();
-  }
+var HuePreview = ({ value, size = 5 }) => {
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "flex justify-center items-center"
+  }, /* @__PURE__ */ React3.createElement("svg", {
+    viewBox: `0 0 ${size} ${size}`,
+    className: getSize(size)
+  }, /* @__PURE__ */ React3.createElement("rect", {
+    x: 0,
+    y: 0,
+    width: size,
+    height: size,
+    fill: `var(--color-${value}-surface)`,
+    strokeWidth: 4
+  })));
 };
 
 // src/components/IconPicker/IconPicker.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import React4 from "react";
 import { Icon as Icon3, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { osTranslations as osTranslations3 } from "@dxos/ui-theme";
 var IconPicker = ({ ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    const { t } = useTranslation3("os");
-    return /* @__PURE__ */ React4.createElement(PickerButton, {
-      Component: IconPreview,
-      label: t("select icon label"),
-      icon: "ph--selection--regular",
-      values: iconValues,
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation3(osTranslations3);
+  return /* @__PURE__ */ React4.createElement(PickerButton, {
+    Component: IconPreview,
+    label: t("select-icon.label"),
+    icon: "ph--selection--regular",
+    values: iconValues,
+    ...props
+  });
 };
-var IconPreview = ({ value, iconSize = 5 }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement(Icon3, {
-      icon: `ph--${value}--regular`,
-      size: iconSize
-    });
-  } finally {
-    _effect.f();
-  }
+var IconPreview = ({ value, size }) => {
+  return /* @__PURE__ */ React4.createElement(Icon3, {
+    icon: `ph--${value}--regular`,
+    size
+  });
 };
-var 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"
-];
-var iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);
 export {
   EmojiPickerBlock,
   EmojiPickerToolbarButton,