@helpwave/hightide 0.1.25 → 0.1.26

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

@@ -129,10 +129,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}`);
@@ -180,7 +180,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) => {
@@ -378,14 +378,14 @@ var TextButton = ({
   ...restProps
 }) => {
   const colorClasses = {
-    primary: "not-disabled:bg-transparent not-disabled:text-button-text-primary-text",
-    negative: "not-disabled:bg-transparent not-disabled:text-button-text-negative-text",
-    neutral: "not-disabled:bg-transparent not-disabled: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: "not-disabled:hover:bg-button-text-primary-text/20",
-    negative: "not-disabled:hover:bg-button-text-negative-text/20",
-    neutral: "not-disabled: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: "not-group-disabled:text-button-text-primary-icon",
@@ -434,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/TimePicker.tsx
 var import_react4 = require("react");
@@ -574,8 +612,9 @@ var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_lucide_react.ChevronDown,
     {
+      "aria-hidden": true,
       className: (0, import_clsx3.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
       )
@@ -584,6 +623,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
 };
 var Expandable = (0, import_react5.forwardRef)(function Expandable2({
   children,
+  id: providedId,
   label,
   icon,
   isExpanded = false,
@@ -597,16 +637,23 @@ var Expandable = (0, import_react5.forwardRef)(function Expandable2({
 }, ref) {
   const defaultIcon = (0, import_react5.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
+  const generatedId = (0, import_react5.useId)();
+  const id = providedId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ref,
-      className: (0, import_clsx3.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_clsx3.default)(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "div",
+          "button",
           {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             className: (0, import_clsx3.default)(
               "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
@@ -616,7 +663,9 @@ var Expandable = (0, import_react5.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)
@@ -626,6 +675,7 @@ var Expandable = (0, import_react5.forwardRef)(function Expandable2({
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
+            id: `${id}-content`,
             className: (0, import_clsx3.default)(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
@@ -634,6 +684,7 @@ var Expandable = (0, import_react5.forwardRef)(function Expandable2({
               },
               contentClassName
             ),
+            role: "region",
             children
           }
         )
@@ -993,6 +1044,7 @@ var formTranslation = {
     next: "Next",
     no: "No",
     none: "None",
+    nothingFound: "Nothing found",
     of: "of",
     optional: "Optional",
     pleaseWait: "Please wait...",
@@ -1049,6 +1101,7 @@ var formTranslation = {
     next: "Weiter",
     no: "Nein",
     none: "Nichts",
+    nothingFound: "Nichts gefunden",
     of: "von",
     optional: "Optional",
     pleaseWait: "Bitte warten...",