@helpwave/hightide 0.1.24 → 0.1.26

package/dist/components/date/DatePicker.mjs

@@ -97,10 +97,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}`);
@@ -143,7 +143,7 @@ var range = (endOrRange, options) => {
   return Array.from({ length: end - start }, (_, index) => index * stepSize + start);
 };
 
-// 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) => {
@@ -266,7 +266,6 @@ var ButtonUtil = {
 };
 var SolidButton = forwardRef(function SolidButton2({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   startIcon,
@@ -276,35 +275,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
       ),
@@ -313,10 +310,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
           }
         ),
@@ -324,10 +321,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
           }
         )
@@ -337,7 +334,6 @@ var SolidButton = forwardRef(function SolidButton2({
 });
 var TextButton = ({
   children,
-  disabled = false,
   color = "neutral",
   size = "medium",
   startIcon,
@@ -348,32 +344,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
@@ -383,10 +378,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
           }
         ),
@@ -394,10 +389,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
           }
         )
@@ -405,6 +400,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/YearMonthPicker.tsx
 import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
@@ -412,7 +445,7 @@ import { Scrollbars } from "react-custom-scrollbars-2";
 import clsx3 from "clsx";
 
 // src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useId, useState as useState3 } from "react";
 import { ChevronDown } from "lucide-react";
 import clsx2 from "clsx";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -420,8 +453,9 @@ var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ jsx3(
     ChevronDown,
     {
+      "aria-hidden": true,
       className: clsx2(
-        "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
       )
@@ -430,6 +464,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
 };
 var Expandable = forwardRef2(function Expandable2({
   children,
+  id: providedId,
   label,
   icon,
   isExpanded = false,
@@ -443,16 +478,23 @@ var Expandable = forwardRef2(function Expandable2({
 }, ref) {
   const defaultIcon = useCallback2((expanded) => /* @__PURE__ */ jsx3(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
   return /* @__PURE__ */ jsxs2(
     "div",
     {
       ref,
-      className: clsx2("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: clsx2(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxs2(
-          "div",
+          "button",
           {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             className: clsx2(
               "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
@@ -462,7 +504,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)
@@ -472,6 +516,7 @@ var Expandable = forwardRef2(function Expandable2({
         /* @__PURE__ */ jsx3(
           "div",
           {
+            id: `${id}-content`,
             className: clsx2(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
@@ -480,6 +525,7 @@ var Expandable = forwardRef2(function Expandable2({
               },
               contentClassName
             ),
+            role: "region",
             children
           }
         )