@helpwave/hightide 0.1.24 → 0.1.26

package/dist/components/user-action/DateAndTimePicker.mjs

@@ -96,10 +96,10 @@ var useTranslation = (translations, overwriteTranslation = {}) => {
   };
 };
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
-// src/util/array.ts
+// src/utils/array.ts
 var equalSizeGroups = (array, groupSize) => {
   if (groupSize <= 0) {
     console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
@@ -147,7 +147,7 @@ var closestMatch = (list, firstCloser) => {
   });
 };
 
-// src/util/date.ts
+// src/utils/date.ts
 var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
 var weekDayList = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
 var changeDuration = (date, duration, isAdding) => {
@@ -267,7 +267,6 @@ var ButtonUtil = {
 };
 var SolidButton = forwardRef(function SolidButton2({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   startIcon,
@@ -277,35 +276,33 @@ var SolidButton = forwardRef(function SolidButton2({
   ...restProps
 }, ref) {
   const colorClasses = {
-    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
-    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
-    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
-    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
-    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
-    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
   }[color];
   const iconColorClasses = {
-    primary: "text-button-solid-primary-icon",
-    secondary: "text-button-solid-secondary-icon",
-    tertiary: "text-button-solid-tertiary-icon",
-    positive: "text-button-solid-positive-icon",
-    warning: "text-button-solid-warning-icon",
-    negative: "text-button-solid-negative-icon",
-    neutral: "text-button-solid-neutral-icon"
+    primary: "not-group-disabled:text-button-solid-primary-icon",
+    secondary: "not-group-disabled:text-button-solid-secondary-icon",
+    tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
+    positive: "not-group-disabled:text-button-solid-positive-icon",
+    warning: "not-group-disabled:text-button-solid-warning-icon",
+    negative: "not-group-disabled:text-button-solid-negative-icon",
+    neutral: "not-group-disabled:text-button-solid-neutral-icon"
   }[color];
   return /* @__PURE__ */ jsxs(
     "button",
     {
       ref,
       onClick,
-      disabled,
       className: clsx(
-        "font-semibold",
-        {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [clsx(colorClasses, "hover:brightness-90")]: !disabled
-        },
+        "group font-semibold",
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text disabled:bg-disabled-background",
         ButtonUtil.paddingMapping[size],
         className
       ),
@@ -314,10 +311,10 @@ var SolidButton = forwardRef(function SolidButton2({
         startIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: clsx({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
@@ -325,10 +322,10 @@ var SolidButton = forwardRef(function SolidButton2({
         endIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: clsx({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -338,7 +335,6 @@ var SolidButton = forwardRef(function SolidButton2({
 });
 var TextButton = ({
   children,
-  disabled = false,
   color = "neutral",
   size = "medium",
   startIcon,
@@ -349,32 +345,31 @@ var TextButton = ({
   ...restProps
 }) => {
   const colorClasses = {
-    primary: "bg-transparent text-button-text-primary-text",
-    negative: "bg-transparent text-button-text-negative-text",
-    neutral: "bg-transparent text-button-text-neutral-text"
+    primary: "not-disabled:bg-transparent not-disabled:text-button-text-primary-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-primary-text",
+    negative: "not-disabled:bg-transparent not-disabled:text-button-text-negative-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-negative-text",
+    neutral: "not-disabled:bg-transparent not-disabled:text-button-text-neutral-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-neutral-text"
   }[color];
   const backgroundColor = {
-    primary: "hover:bg-button-text-primary-text/20",
-    negative: "hover:bg-button-text-negative-text/20",
-    neutral: "hover:bg-button-text-neutral-text/20"
+    primary: "not-disabled:hover:bg-button-text-primary-text/20 not-disabled:focus-visible:bg-button-text-primary-text/20",
+    negative: "not-disabled:hover:bg-button-text-negative-text/20 not-disabled:focus-visible:bg-button-text-negative-text/20",
+    neutral: "not-disabled:hover:bg-button-text-neutral-text/20 not-disabled:focus-visible:bg-button-text-neutral-text/20"
   }[color];
   const iconColorClasses = {
-    primary: "text-button-text-primary-icon",
-    negative: "text-button-text-negative-icon",
-    neutral: "text-button-text-neutral-icon"
+    primary: "not-group-disabled:text-button-text-primary-icon",
+    negative: "not-group-disabled:text-button-text-negative-icon",
+    neutral: "not-group-disabled:text-button-text-neutral-icon"
   }[color];
   return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick,
-      disabled,
       className: clsx(
-        "font-semibold",
+        "group font-semibold",
+        "disabled:text-disabled-text",
+        colorClasses,
         {
-          "text-disabled-text cursor-not-allowed": disabled,
-          [colorClasses]: !disabled,
-          [backgroundColor]: !disabled && coloredHoverBackground,
-          "hover:bg-button-text-hover-background": !disabled && !coloredHoverBackground
+          [backgroundColor]: coloredHoverBackground,
+          "not-disabled:hover:bg-button-text-hover-background": !coloredHoverBackground
         },
         ButtonUtil.paddingMapping[size],
         className
@@ -384,10 +379,10 @@ var TextButton = ({
         startIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: clsx({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
@@ -395,10 +390,10 @@ var TextButton = ({
         endIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: clsx({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -406,6 +401,44 @@ var TextButton = ({
     }
   );
 };
+var IconButton = forwardRef(function IconButton2({
+  children,
+  color = "primary",
+  size = "medium",
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = {
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
+    transparent: "not-disabled:bg-transparent"
+  }[color];
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ref,
+      className: clsx(
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text",
+        {
+          "disabled:bg-disabled-background": color !== "transparent",
+          "disabled:opacity-70": color === "transparent",
+          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
+        },
+        ButtonUtil.iconPaddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children
+    }
+  );
+});
 
 // src/components/date/TimePicker.tsx
 import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
@@ -538,7 +571,7 @@ import { Scrollbars as Scrollbars2 } from "react-custom-scrollbars-2";
 import clsx4 from "clsx";
 
 // src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect3, useState as useState4 } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect3, useId, useState as useState4 } from "react";
 import { ChevronDown } from "lucide-react";
 import clsx3 from "clsx";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -546,8 +579,9 @@ var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ jsx4(
     ChevronDown,
     {
+      "aria-hidden": true,
       className: clsx3(
-        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
         { "rotate-180": isExpanded },
         className
       )
@@ -556,6 +590,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
 };
 var Expandable = forwardRef2(function Expandable2({
   children,
+  id: providedId,
   label,
   icon,
   isExpanded = false,
@@ -569,16 +604,23 @@ var Expandable = forwardRef2(function Expandable2({
 }, ref) {
   const defaultIcon = useCallback2((expanded) => /* @__PURE__ */ jsx4(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref,
-      className: clsx3("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: clsx3(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxs3(
-          "div",
+          "button",
           {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             className: clsx3(
               "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
@@ -588,7 +630,9 @@ var Expandable = forwardRef2(function Expandable2({
               },
               headerClassName
             ),
-            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": `${id}-content`,
+            "aria-disabled": disabled ?? void 0,
             children: [
               label,
               icon(isExpanded)
@@ -598,6 +642,7 @@ var Expandable = forwardRef2(function Expandable2({
         /* @__PURE__ */ jsx4(
           "div",
           {
+            id: `${id}-content`,
             className: clsx3(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
@@ -606,6 +651,7 @@ var Expandable = forwardRef2(function Expandable2({
               },
               contentClassName
             ),
+            role: "region",
             children
           }
         )
@@ -965,6 +1011,7 @@ var formTranslation = {
     next: "Next",
     no: "No",
     none: "None",
+    nothingFound: "Nothing found",
     of: "of",
     optional: "Optional",
     pleaseWait: "Please wait...",
@@ -1021,6 +1068,7 @@ var formTranslation = {
     next: "Weiter",
     no: "Nein",
     none: "Nichts",
+    nothingFound: "Nichts gefunden",
     of: "von",
     optional: "Optional",
     pleaseWait: "Bitte warten...",