@helpwave/hightide 0.1.21 → 0.1.23

package/dist/components/modals/ThemeModal.js

@@ -149,14 +149,16 @@ var import_lucide_react = require("lucide-react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Tile = ({
   title,
+  titleClassName,
   description,
+  descriptionClassName,
   onClick,
   isSelected = false,
   disabled = false,
   prefix,
   suffix,
   normalClassName = "hover:bg-primary/40 cursor-pointer",
-  selectedClassName = " bg-primary/20",
+  selectedClassName = "bg-primary/20",
   disabledClassName = "text-disabled-text bg-disabled-background cursor-not-allowed",
   className
 }) => {
@@ -166,7 +168,7 @@ var Tile = ({
       className: (0, import_clsx2.default)(
         "flex-row-2 w-full items-center",
         {
-          [normalClassName]: !!onClick && !disabled,
+          [normalClassName]: onClick && !disabled,
           [selectedClassName]: isSelected && !disabled,
           [disabledClassName]: disabled
         },
@@ -176,14 +178,27 @@ var Tile = ({
       children: [
         prefix,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-col-0 w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: (0, import_clsx2.default)(title.className ?? "textstyle-title-normal"), children: title.value }),
-          !!description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_clsx2.default)(description.className ?? "textstyle-description"), children: description.value })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_clsx2.default)(titleClassName ?? "textstyle-title-normal"), children: title }),
+          !!description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_clsx2.default)(descriptionClassName ?? "textstyle-description"), children: description })
         ] }),
         suffix ?? (isSelected ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Check, { size: 24 }) : void 0)
       ]
     }
   );
 };
+var ListTile = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Tile,
+    {
+      ...props,
+      titleClassName: props.titleClassName ?? "font-semibold",
+      className: (0, import_clsx2.default)("px-2 py-1 rounded-md", props.className),
+      disabledClassName: props.disabledClassName ?? "text-disabled-text cursor-not-allowed"
+    }
+  );
+};
 
 // src/components/layout-and-navigation/Expandable.tsx
 var import_react3 = require("react");
@@ -488,7 +503,7 @@ var Menu = ({
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
         className: (0, import_clsx4.default)(
-          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg z-[300]",
+          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
             "animate-pop-out": !isOpen,
@@ -640,7 +655,7 @@ var getInputClassName = ({ disabled = false, hasError = false }) => {
   return (0, import_clsx5.default)(
     "px-2 py-1.5 rounded-md border-2",
     {
-      "bg-surface text-on-surface hover:border-primary focus:border-primary": !disabled && !hasError,
+      "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !hasError,
       "bg-on-negative text-negative border-negative-border hover:border-negative-border-hover": !disabled && hasError,
       "bg-disabled-background text-disabled-text border-disabled-border": disabled
     }
@@ -940,6 +955,7 @@ var SolidButton = (0, import_react11.forwardRef)(function SolidButton2({
       onClick,
       disabled,
       className: (0, import_clsx6.default)(
+        "font-semibold",
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
           [(0, import_clsx6.default)(colorClasses, "hover:brightness-90")]: !disabled
@@ -1106,22 +1122,6 @@ var useSearch = ({
 
 // src/components/user-action/Select.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var SelectTile = ({
-  className,
-  disabledClassName,
-  title,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Tile,
-    {
-      ...restProps,
-      className: (0, import_clsx8.default)("px-2 py-1 rounded-md", className),
-      disabledClassName: disabledClassName ?? "text-disabled-text cursor-not-allowed",
-      title: { ...title, className: title.className ?? "font-semibold" }
-    }
-  );
-};
 var Select = ({
   value,
   label,
@@ -1160,7 +1160,7 @@ var Select = ({
               "btn-md justify-between w-full border-2",
               {
                 "rounded-b-lg": !open,
-                "bg-menu-background text-menu-text border-menu-border hover:border-primary": !disabled,
+                "bg-input-background text-input-text hover:border-primary": !disabled,
                 "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": disabled
               },
               triggerClassName
@@ -1188,10 +1188,10 @@ var Select = ({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-col-2 overflow-y-auto", children: [
               result.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                SelectTile,
+                ListTile,
                 {
                   isSelected: option === selectedOption,
-                  title: { value: option.label },
+                  title: option.label,
                   onClick: () => {
                     onChange(option.value);
                     close();
@@ -1402,7 +1402,7 @@ var Modal = ({
           ref,
           tabIndex: -1,
           className: (0, import_clsx10.default)(
-            "flex-col-2 fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl animate-pop-in",
+            "flex-col-2 fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-around-lg shadow-strong animate-pop-in",
             className
           ),
           role: "dialog",
@@ -1419,12 +1419,14 @@ var Modal = ({
 
 // src/theming/useTheme.tsx
 var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var themes = ["light", "dark"];
+var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {
   en: {
     dark: "Dark",
     light: "Light",
+    system: "System",
     theme: {
       one: "Theme",
       other: "Themes"
@@ -1433,6 +1435,7 @@ var defaultThemeTypeTranslation = {
   de: {
     dark: "Dunkel",
     light: "Hell",
+    system: "System",
     theme: {
       one: "Farbschema",
       other: "Farbschemas"
@@ -1443,11 +1446,11 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = (0, import_react16.createContext)({
+var ThemeContext = (0, import_react17.createContext)({
   theme: "light",
   setTheme: noop
 });
-var useTheme = () => (0, import_react16.useContext)(ThemeContext);
+var useTheme = () => (0, import_react17.useContext)(ThemeContext);
 
 // src/components/modals/ThemeModal.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");