@helpwave/hightide 0.1.24 → 0.1.26

package/dist/components/date/DatePicker.js

@@ -131,10 +131,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}`);
@@ -177,7 +177,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) => {
@@ -300,7 +300,6 @@ var ButtonUtil = {
 };
 var SolidButton = (0, import_react3.forwardRef)(function SolidButton2({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   startIcon,
@@ -310,35 +309,33 @@ var SolidButton = (0, import_react3.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__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
       ref,
       onClick,
-      disabled,
       className: (0, import_clsx.default)(
-        "font-semibold",
-        {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [(0, import_clsx.default)(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
       ),
@@ -347,10 +344,10 @@ var SolidButton = (0, import_react3.forwardRef)(function SolidButton2({
         startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
-            className: (0, import_clsx.default)({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
@@ -358,10 +355,10 @@ var SolidButton = (0, import_react3.forwardRef)(function SolidButton2({
         endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
-            className: (0, import_clsx.default)({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -371,7 +368,6 @@ var SolidButton = (0, import_react3.forwardRef)(function SolidButton2({
 });
 var TextButton = ({
   children,
-  disabled = false,
   color = "neutral",
   size = "medium",
   startIcon,
@@ -382,32 +378,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__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
       onClick,
-      disabled,
       className: (0, import_clsx.default)(
-        "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
@@ -417,10 +412,10 @@ var TextButton = ({
         startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
-            className: (0, import_clsx.default)({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
@@ -428,10 +423,10 @@ var TextButton = ({
         endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
-            className: (0, import_clsx.default)({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -439,6 +434,44 @@ var TextButton = ({
     }
   );
 };
+var IconButton = (0, import_react3.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__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      ref,
+      className: (0, import_clsx.default)(
+        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
 var import_react5 = require("react");
@@ -454,8 +487,9 @@ var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_lucide_react.ChevronDown,
     {
+      "aria-hidden": true,
       className: (0, import_clsx2.default)(
-        "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
       )
@@ -464,6 +498,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
 };
 var Expandable = (0, import_react4.forwardRef)(function Expandable2({
   children,
+  id: providedId,
   label,
   icon,
   isExpanded = false,
@@ -477,16 +512,23 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
 }, ref) {
   const defaultIcon = (0, import_react4.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
+  const generatedId = (0, import_react4.useId)();
+  const id = providedId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       ref,
-      className: (0, import_clsx2.default)("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: (0, import_clsx2.default)(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "div",
+          "button",
           {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             className: (0, import_clsx2.default)(
               "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
@@ -496,7 +538,9 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
               },
               headerClassName
             ),
-            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": `${id}-content`,
+            "aria-disabled": disabled ?? void 0,
             children: [
               label,
               icon(isExpanded)
@@ -506,6 +550,7 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
+            id: `${id}-content`,
             className: (0, import_clsx2.default)(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
@@ -514,6 +559,7 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
               },
               contentClassName
             ),
+            role: "region",
             children
           }
         )