@helpwave/hightide 0.1.6 → 0.1.7

package/dist/components/date/DatePicker.js

@@ -1,12 +1,46 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
 // src/components/date/DatePicker.tsx
-import { useEffect as useEffect6, useState as useState6 } from "react";
-import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";
+var DatePicker_exports = {};
+__export(DatePicker_exports, {
+  DatePicker: () => DatePicker,
+  DatePickerUncontrolled: () => DatePickerUncontrolled
+});
+module.exports = __toCommonJS(DatePicker_exports);
+var import_react6 = require("react");
+var import_lucide_react2 = require("lucide-react");
 
 // src/localization/LanguageProvider.tsx
-import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
+var import_react2 = require("react");
 
 // src/hooks/useLocalStorage.ts
-import { useCallback, useEffect, useState } from "react";
+var import_react = require("react");
 
 // src/localization/util.ts
 var languages = ["en", "de"];
@@ -22,12 +56,12 @@ var LanguageUtil = {
 };
 
 // src/localization/LanguageProvider.tsx
-import { jsx } from "react/jsx-runtime";
-var LanguageContext = createContext({
+var import_jsx_runtime = require("react/jsx-runtime");
+var LanguageContext = (0, import_react2.createContext)({
   language: LanguageUtil.DEFAULT_LANGUAGE,
   setLanguage: (v) => v
 });
-var useLanguage = () => useContext(LanguageContext);
+var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
 var useLocale = (overWriteLanguage) => {
   const { language } = useLanguage();
   const mapping = {
@@ -166,11 +200,11 @@ var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
 };
 
 // src/components/date/DatePicker.tsx
-import clsx5 from "clsx";
+var import_clsx5 = __toESM(require("clsx"));
 
 // src/components/user-action/Button.tsx
-import clsx from "clsx";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var paddingMapping = {
   small: "btn-sm",
   medium: "btn-md",
@@ -214,25 +248,25 @@ var SolidButton = ({
     negative: "text-button-solid-negative-icon",
     neutral: "text-button-solid-neutral-icon"
   }[color];
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
-      className: clsx(
+      className: (0, import_clsx.default)(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [clsx(colorClasses, "hover:brightness-90")]: !disabled
+          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
         },
         ButtonUtil.paddingMapping[size],
         className
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ jsx2(
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
-            className: clsx({
+            className: (0, import_clsx.default)({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -240,10 +274,10 @@ var SolidButton = ({
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ jsx2(
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
-            className: clsx({
+            className: (0, import_clsx.default)({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -275,25 +309,25 @@ var TextButton = ({
     negative: "text-button-text-negative-icon",
     neutral: "text-button-text-neutral-icon"
   }[color];
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
-      className: clsx(
+      className: (0, import_clsx.default)(
         {
           "text-disabled-text cursor-not-allowed": disabled,
-          [clsx(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
+          [(0, import_clsx.default)(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
         },
         ButtonUtil.paddingMapping[size],
         className
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ jsx2(
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
-            className: clsx({
+            className: (0, import_clsx.default)({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -301,10 +335,10 @@ var TextButton = ({
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ jsx2(
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
-            className: clsx({
+            className: (0, import_clsx.default)({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -317,17 +351,17 @@ var TextButton = ({
 };
 
 // src/components/date/YearMonthPicker.tsx
-import { useEffect as useEffect4, useRef, useState as useState4 } from "react";
-import { Scrollbars } from "react-custom-scrollbars-2";
-import clsx3 from "clsx";
+var import_react4 = require("react");
+var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
+var import_clsx3 = __toESM(require("clsx"));
 
 // src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef, useEffect as useEffect3, useState as useState3 } from "react";
-import { ChevronDown, ChevronUp } from "lucide-react";
-import clsx2 from "clsx";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx3(ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ jsx3(ChevronDown, { size: 16, className: "min-w-[16px]" });
-var Expandable = forwardRef(function Expandable2({
+var import_react3 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronDown, { size: 16, className: "min-w-[16px]" });
+var Expandable = (0, import_react3.forwardRef)(function Expandable2({
   children,
   label,
   icon,
@@ -339,17 +373,17 @@ var Expandable = forwardRef(function Expandable2({
   headerClassName = ""
 }, ref) {
   icon ??= DefaultIcon;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       ref,
-      className: clsx2("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
+      className: (0, import_clsx2.default)("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
       children: [
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
           {
-            className: clsx2(
+            className: (0, import_clsx2.default)(
               "row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
                 "group-hover:brightness-95": !isExpanded,
@@ -365,21 +399,21 @@ var Expandable = forwardRef(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsx3("div", { className: "col px-4 pb-2", children })
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col px-4 pb-2", children })
       ]
     }
   );
 });
-var ExpandableUncontrolled = forwardRef(function ExpandableUncontrolled2({
+var ExpandableUncontrolled = (0, import_react3.forwardRef)(function ExpandableUncontrolled2({
   isExpanded,
   onChange = noop,
   ...props
 }, ref) {
-  const [usedIsExpanded, setUsedIsExpanded] = useState3(isExpanded);
-  useEffect3(() => {
+  const [usedIsExpanded, setUsedIsExpanded] = (0, import_react3.useState)(isExpanded);
+  (0, import_react3.useEffect)(() => {
     setUsedIsExpanded(isExpanded);
   }, [isExpanded]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Expandable,
     {
       ...props,
@@ -394,7 +428,7 @@ var ExpandableUncontrolled = forwardRef(function ExpandableUncontrolled2({
 });
 
 // src/components/date/YearMonthPicker.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var YearMonthPicker = ({
   displayedYearMonth = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
@@ -405,8 +439,8 @@ var YearMonthPicker = ({
   showValueOpen = true
 }) => {
   const locale = useLocale();
-  const ref = useRef(null);
-  useEffect4(() => {
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     const scrollToItem = () => {
       if (ref.current) {
         ref.current.scrollIntoView({
@@ -422,15 +456,15 @@ var YearMonthPicker = ({
     return null;
   }
   const years = range(start.getFullYear(), end.getFullYear());
-  return /* @__PURE__ */ jsx4("div", { className: clsx3("col select-none", className), children: /* @__PURE__ */ jsx4(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx4("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx3.default)("col select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ExpandableUncontrolled,
       {
         ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
-        label: /* @__PURE__ */ jsx4("span", { className: clsx3({ "text-primary font-bold": selectedYear }), children: year }),
+        label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_clsx3.default)({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
-        children: /* @__PURE__ */ jsx4("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx4("div", { className: "row", children: monthList.map((month) => {
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "row", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
@@ -439,11 +473,11 @@ var YearMonthPicker = ({
           const isAfterStart = start === void 0 || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
           const isBeforeEnd = end === void 0 || firstOfMonth <= end;
           const isValid = isAfterStart && isBeforeEnd;
-          return /* @__PURE__ */ jsx4(
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "button",
             {
               disabled: !isValid,
-              className: clsx3(
+              className: (0, import_clsx3.default)(
                 "chip hover:brightness-95 flex-1",
                 {
                   "bg-gray-50 text-black": !selectedMonth && isValid,
@@ -458,7 +492,7 @@ var YearMonthPicker = ({
             },
             month
           );
-        }) }, index)) })
+        }) }, index))
       },
       year
     );
@@ -466,9 +500,9 @@ var YearMonthPicker = ({
 };
 
 // src/components/date/DayPicker.tsx
-import clsx4 from "clsx";
-import { useEffect as useEffect5, useState as useState5 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var import_clsx4 = __toESM(require("clsx"));
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var DayPicker = ({
   displayedMonth,
   selected,
@@ -482,18 +516,18 @@ var DayPicker = ({
   const locale = useLocale();
   const month = displayedMonth.getMonth();
   const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  return /* @__PURE__ */ jsxs3("div", { className: clsx4("col gap-y-1 min-w-[220px] select-none", className), children: [
-    /* @__PURE__ */ jsx5("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx5("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ jsx5("div", { className: "row text-center", children: week.map((date) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx4.default)("col gap-y-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row text-center", children: week.map((date) => {
       const isSelected = !!selected && equalDate(selected, date);
       const isToday = equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           disabled: !isDayValid,
-          className: clsx4(
+          className: (0, import_clsx4.default)(
             "flex-1 rounded-full border-2 border-transparent shadow-sm",
             {
               "text-gray-700 bg-gray-100": !isSameMonth && isDayValid,
@@ -514,7 +548,7 @@ var DayPicker = ({
 };
 
 // src/components/date/DatePicker.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var defaultDatePickerTranslation = {
   en: {
     today: "Today"
@@ -536,28 +570,28 @@ var DatePicker = ({
 }) => {
   const locale = useLocale();
   const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
-  const [displayedMonth, setDisplayedMonth] = useState6(value);
-  const [displayMode, setDisplayMode] = useState6(initialDisplay);
-  useEffect6(() => {
+  const [displayedMonth, setDisplayedMonth] = (0, import_react6.useState)(value);
+  const [displayMode, setDisplayMode] = (0, import_react6.useState)(initialDisplay);
+  (0, import_react6.useEffect)(() => {
     setDisplayedMonth(value);
   }, [value]);
-  return /* @__PURE__ */ jsxs4("div", { className: clsx5("col gap-y-4", className), children: [
-    /* @__PURE__ */ jsxs4("div", { className: "row items-center justify-between h-7", children: [
-      /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx5.default)("col gap-y-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "row items-center justify-between h-7", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         TextButton,
         {
-          className: clsx5("row gap-x-1 items-center cursor-pointer select-none", {
+          className: (0, import_clsx5.default)("row gap-x-1 items-center cursor-pointer select-none", {
             "text-disabled-text": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
           children: [
             `${new Intl.DateTimeFormat(locale, { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ jsx6(ChevronDown2, { size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ChevronDown, { size: 16 })
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ jsxs4("div", { className: "row justify-end", children: [
-        /* @__PURE__ */ jsx6(
+      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "row justify-end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           SolidButton,
           {
             size: "small",
@@ -566,10 +600,10 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ jsx6(ArrowUp, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ArrowUp, { size: 20 })
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           SolidButton,
           {
             size: "small",
@@ -578,12 +612,12 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ jsx6(ArrowDown, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ArrowDown, { size: 20 })
           }
         )
       ] })
     ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ jsx6(
+    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       YearMonthPicker,
       {
         ...yearMonthPickerProps,
@@ -595,8 +629,8 @@ var DatePicker = ({
           setDisplayMode("day");
         }
       }
-    ) : /* @__PURE__ */ jsxs4("div", { children: [
-      /* @__PURE__ */ jsx6(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         DayPicker,
         {
           ...dayPickerProps,
@@ -609,9 +643,10 @@ var DatePicker = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx6("div", { className: "mt-2", children: /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         TextButton,
         {
+          color: "primary",
           onClick: () => {
             const newDate = /* @__PURE__ */ new Date();
             newDate.setHours(value.getHours(), value.getMinutes());
@@ -628,9 +663,9 @@ var DatePickerUncontrolled = ({
   onChange = noop,
   ...props
 }) => {
-  const [date, setDate] = useState6(value);
-  useEffect6(() => setDate(value), [value]);
-  return /* @__PURE__ */ jsx6(
+  const [date, setDate] = (0, import_react6.useState)(value);
+  (0, import_react6.useEffect)(() => setDate(value), [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DatePicker,
     {
       ...props,
@@ -642,8 +677,9 @@ var DatePickerUncontrolled = ({
     }
   );
 };
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   DatePicker,
   DatePickerUncontrolled
-};
+});
 //# sourceMappingURL=DatePicker.js.map