@helpwave/hightide 0.1.26 → 0.1.28

package/dist/components/dialog/ThemeDialog.d.mts

@@ -5,7 +5,7 @@ import { ThemeTypeTranslation } from '../../theming/useTheme.mjs';
 import { FormTranslationType } from '../../localization/defaults/form.mjs';
 import { DialogProps } from './Dialog.mjs';
 import '../../localization/util.mjs';
-import '../layout-and-navigation/FloatingContainer.mjs';
+import '../layout/FloatingContainer.mjs';
 import '../../hooks/useFloatingElement.mjs';
 
 type ThemeDialogTranslationAddon = {

package/dist/components/dialog/ThemeDialog.d.ts

@@ -5,7 +5,7 @@ import { ThemeTypeTranslation } from '../../theming/useTheme.js';
 import { FormTranslationType } from '../../localization/defaults/form.js';
 import { DialogProps } from './Dialog.js';
 import '../../localization/util.js';
-import '../layout-and-navigation/FloatingContainer.js';
+import '../layout/FloatingContainer.js';
 import '../../hooks/useFloatingElement.js';
 
 type ThemeDialogTranslationAddon = {

package/dist/components/dialog/ThemeDialog.js

@@ -124,7 +124,7 @@ var useTranslation = (translations, overwriteTranslation = {}) => {
 var import_react8 = require("react");
 var import_clsx4 = __toESM(require("clsx"));
 
-// src/components/layout-and-navigation/Expandable.tsx
+// src/components/layout/Expandable.tsx
 var import_react3 = require("react");
 var import_lucide_react = require("lucide-react");
 var import_clsx = __toESM(require("clsx"));
@@ -132,7 +132,7 @@ var import_clsx = __toESM(require("clsx"));
 // src/utils/noop.ts
 var noop = () => void 0;
 
-// src/components/layout-and-navigation/Expandable.tsx
+// src/components/layout/Expandable.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -454,7 +454,7 @@ var match = (key, values) => {
 // src/components/user-action/select/Select.tsx
 var import_lucide_react2 = require("lucide-react");
 
-// src/components/layout-and-navigation/Chip.tsx
+// src/components/layout/Chip.tsx
 var import_clsx2 = __toESM(require("clsx"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Chip = ({
@@ -794,7 +794,8 @@ var SelectRoot = ({
   isOpen = false,
   disabled = false,
   invalid = false,
-  isMultiSelect = false
+  isMultiSelect = false,
+  iconAppearance = "left"
 }) => {
   const optionsRef = (0, import_react8.useRef)([]);
   const triggerRef = (0, import_react8.useRef)(null);
@@ -808,8 +809,11 @@ var SelectRoot = ({
     id: usedId,
     disabled,
     invalid,
-    value: isMultiSelect ? values ?? [] : [value].filter(Boolean),
-    isMultiSelect
+    value: isMultiSelect ? values ?? [] : [value].filter(Boolean)
+  };
+  const config = {
+    isMultiSelect,
+    iconAppearance
   };
   const registerItem = (0, import_react8.useCallback)((item) => {
     optionsRef.current.push(item);
@@ -918,6 +922,7 @@ var SelectRoot = ({
   }, [internalState.highlightedValue]);
   const contextValue = {
     state,
+    config,
     item: {
       register: registerItem,
       unregister: unregisterItem,
@@ -935,10 +940,11 @@ var SelectRoot = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectContext.Provider, { value: contextValue, children });
 };
 var SelectOption = (0, import_react8.forwardRef)(
-  function SelectOption2({ value, disabled = false, children, className, ...restProps }, ref) {
-    const { state, item, trigger } = useSelectContext();
+  function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
+    const { state, config, item, trigger } = useSelectContext();
     const { register, unregister, toggleSelection, highlightItem } = item;
     const itemRef = (0, import_react8.useRef)(null);
+    iconAppearance ??= config.iconAppearance;
     (0, import_react8.useEffect)(() => {
       register({
         value,
@@ -975,7 +981,7 @@ var SelectOption = (0, import_react8.forwardRef)(
         onClick: (event) => {
           if (!disabled) {
             toggleSelection(value);
-            if (!state.isMultiSelect) {
+            if (!config.isMultiSelect) {
               trigger.toggleOpen(false);
             }
             restProps.onClick?.(event);
@@ -988,14 +994,21 @@ var SelectOption = (0, import_react8.forwardRef)(
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          iconAppearance === "left" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_lucide_react2.CheckIcon,
             {
               className: (0, import_clsx4.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           ),
-          children ?? value
+          children ?? value,
+          iconAppearance === "right" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_lucide_react2.CheckIcon,
+            {
+              className: (0, import_clsx4.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              "aria-hidden": true
+            }
+          )
         ]
       }
     );
@@ -1133,7 +1146,7 @@ var SelectContent = (0, import_react8.forwardRef)(
   }, ref) {
     const innerRef = (0, import_react8.useRef)(null);
     (0, import_react8.useImperativeHandle)(ref, () => innerRef.current);
-    const { trigger, state, item } = useSelectContext();
+    const { trigger, state, config, item } = useSelectContext();
     const position = useFloatingElement({
       active: state.isOpen,
       anchorRef: trigger.ref,
@@ -1193,7 +1206,7 @@ var SelectContent = (0, import_react8.forwardRef)(
                 case " ":
                   if (state.highlightedValue) {
                     item.toggleSelection(state.highlightedValue);
-                    if (!state.isMultiSelect) {
+                    if (!config.isMultiSelect) {
                       trigger.toggleOpen(false);
                     }
                     event.preventDefault();
@@ -1208,7 +1221,7 @@ var SelectContent = (0, import_react8.forwardRef)(
               ...position
             },
             role: "listbox",
-            "aria-multiselectable": state.isMultiSelect,
+            "aria-multiselectable": config.isMultiSelect,
             "aria-orientation": orientation,
             tabIndex: position ? 0 : void 0,
             children: props.children
@@ -1333,6 +1346,7 @@ var MultiSelectChipDisplayUncontrolled = (0, import_react8.forwardRef)(function
 // src/theming/useTheme.tsx
 var import_react9 = require("react");
 var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {
@@ -1359,11 +1373,14 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = (0, import_react10.createContext)({
-  theme: "light",
-  setTheme: noop
-});
-var useTheme = () => (0, import_react10.useContext)(ThemeContext);
+var ThemeContext = (0, import_react11.createContext)(null);
+var useTheme = () => {
+  const context = (0, import_react11.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
+  }
+  return context;
+};
 
 // src/localization/defaults/form.ts
 var formTranslation = {
@@ -1484,16 +1501,16 @@ var formTranslation = {
 };
 
 // src/components/dialog/Dialog.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_clsx6 = __toESM(require("clsx"));
 var import_lucide_react3 = require("lucide-react");
 
-// src/components/layout-and-navigation/FloatingContainer.tsx
-var import_react11 = require("react");
+// src/components/layout/FloatingContainer.tsx
+var import_react12 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_clsx5 = require("clsx");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var FloatingContainer = (0, import_react11.forwardRef)(function FloatingContainer2({
+var FloatingContainer = (0, import_react12.forwardRef)(function FloatingContainer2({
   children,
   backgroundOverlay,
   anchor,
@@ -1505,8 +1522,8 @@ var FloatingContainer = (0, import_react11.forwardRef)(function FloatingContaine
   gap = 4,
   ...props
 }, forwardRef5) {
-  const innerRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useImperativeHandle)(forwardRef5, () => innerRef.current);
+  const innerRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useImperativeHandle)(forwardRef5, () => innerRef.current);
   const position = useFloatingElement({
     active: !props.hidden,
     containerRef: innerRef,
@@ -1545,14 +1562,14 @@ var FloatingContainer = (0, import_react11.forwardRef)(function FloatingContaine
 });
 
 // src/hooks/useLogOnce.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var defaultOptions = {
   type: "warning"
 };
 var useLogOnce = (message, condition, options) => {
-  const [hasLogged, setHasLogged] = (0, import_react12.useState)(false);
+  const [hasLogged, setHasLogged] = (0, import_react13.useState)(false);
   const { type } = { ...defaultOptions, ...options };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!hasLogged && condition) {
       switch (type) {
         case "info":
@@ -1585,7 +1602,7 @@ var Dialog = ({
   backgroundClassName
 }) => {
   const translation = useTranslation([formTranslation]);
-  const ref = (0, import_react13.useRef)(null);
+  const ref = (0, import_react14.useRef)(null);
   const onCloseWrapper = () => {
     if (!isModal) return;
     onClose?.();
@@ -1663,13 +1680,24 @@ var Dialog = ({
 };
 
 // src/components/dialog/ThemeDialog.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_clsx7 = __toESM(require("clsx"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var ThemeIcon = ({ theme, className }) => {
+  if (theme === "dark") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.MoonIcon, { className: (0, import_clsx7.default)("w-4 h-4", className) });
+  } else if (theme === "light") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.SunIcon, { className: (0, import_clsx7.default)("w-4 h-4", className) });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.MonitorCog, { className: (0, import_clsx7.default)("w-4 h-4", className) });
+  }
+};
 var defaultConfirmDialogTranslation = {
   en: {
-    chooseTheme: "Choose your preferred theme"
+    chooseTheme: "Choose your preferred color theme."
   },
   de: {
-    chooseTheme: "W\xE4hle dein bevorzugtes Farbschema"
+    chooseTheme: "W\xE4hle dein bevorzugtes Farbschema."
   }
 };
 var ThemeDialog = ({
@@ -1694,13 +1722,21 @@ var ThemeDialog = ({
           {
             value: theme,
             onValueChanged: (theme2) => setTheme(theme2),
+            iconAppearance: "right",
             contentPanelProps: {
               className: "z-100"
             },
             buttonProps: {
-              selectedDisplay: (value) => translation(value)
+              selectedDisplay: (value) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-row-2 items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ThemeIcon, { theme }),
+                translation(value)
+              ] }),
+              className: "min-w-32"
             },
-            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectOption, { value: theme2, children: translation(theme2) }, theme2))
+            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectOption, { value: theme2, className: "gap-x-6 justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-row-2 items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ThemeIcon, { theme: theme2 }),
+              translation(theme2)
+            ] }) }, theme2))
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })