@helpwave/hightide 0.1.45 → 0.1.47

package/dist/components/date/YearMonthPicker.js

@@ -1,501 +0,0 @@
-// src/components/date/YearMonthPicker.tsx
-import { useEffect as useEffect3, useRef } from "react";
-import { Scrollbars } from "react-custom-scrollbars-2";
-
-// src/utils/array.ts
-var equalSizeGroups = (array, groupSize) => {
-  if (groupSize <= 0) {
-    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
-    return [[...array]];
-  }
-  const groups = [];
-  for (let i = 0; i < array.length; i += groupSize) {
-    groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
-  }
-  return groups;
-};
-var defaultRangeOptions = {
-  allowEmptyRange: false,
-  stepSize: 1,
-  exclusiveStart: false,
-  exclusiveEnd: true
-};
-var range = (endOrRange, options) => {
-  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options };
-  let start = 0;
-  let end;
-  if (typeof endOrRange === "number") {
-    end = endOrRange;
-  } else {
-    start = endOrRange[0];
-    end = endOrRange[1];
-  }
-  if (!exclusiveEnd) {
-    end -= 1;
-  }
-  if (exclusiveStart) {
-    start += 1;
-  }
-  if (end - 1 < start) {
-    if (!allowEmptyRange) {
-      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`);
-    }
-    return [];
-  }
-  return Array.from({ length: end - start }, (_, index) => index * stepSize + start);
-};
-
-// src/components/date/YearMonthPicker.tsx
-import clsx3 from "clsx";
-
-// src/components/layout/Expandable.tsx
-import { forwardRef, useCallback, useId } from "react";
-import { ChevronDown } from "lucide-react";
-import clsx from "clsx";
-
-// src/hooks/useOverwritableState.ts
-import { useEffect, useState } from "react";
-
-// src/utils/resolveSetState.ts
-function resolveSetState(action, prev) {
-  return typeof action === "function" ? action(prev) : action;
-}
-
-// src/hooks/useOverwritableState.ts
-var useOverwritableState = (initialValue, onChange) => {
-  const [state, setState] = useState(initialValue);
-  useEffect(() => {
-    setState(initialValue);
-  }, [initialValue]);
-  const onChangeWrapper = (action) => {
-    const resolved = resolveSetState(action, state);
-    setState(resolved);
-    onChange?.(state);
-  };
-  return [state, onChangeWrapper];
-};
-
-// src/components/layout/Expandable.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var ExpansionIcon = ({ isExpanded, className }) => {
-  return /* @__PURE__ */ jsx(
-    ChevronDown,
-    {
-      "aria-hidden": true,
-      className: clsx(
-        "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
-      )
-    }
-  );
-};
-var Expandable = forwardRef(function Expandable2({
-  children,
-  id: providedId,
-  label,
-  icon,
-  isExpanded = false,
-  onChange,
-  clickOnlyOnHeader = true,
-  disabled = false,
-  className,
-  headerClassName,
-  contentClassName,
-  contentExpandedClassName
-}, ref) {
-  const defaultIcon = useCallback((expanded) => /* @__PURE__ */ jsx(ExpansionIcon, { isExpanded: expanded }), []);
-  icon ??= defaultIcon;
-  const generatedId = useId();
-  const id = providedId ?? generatedId;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      onClick: () => !clickOnlyOnHeader && !disabled && onChange?.(!isExpanded),
-      className: clsx(
-        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
-        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => clickOnlyOnHeader && !disabled && onChange?.(!isExpanded),
-            className: clsx(
-              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
-              {
-                "group-hover:brightness-97": !isExpanded,
-                "hover:brightness-97": isExpanded && !disabled,
-                "cursor-pointer": clickOnlyOnHeader && !disabled
-              },
-              headerClassName
-            ),
-            "aria-expanded": isExpanded,
-            "aria-controls": `${id}-content`,
-            "aria-disabled": disabled ?? void 0,
-            children: [
-              label,
-              icon(isExpanded)
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: `${id}-content`,
-            className: clsx(
-              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
-              {
-                [clsx("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
-                "max-h-0 opacity-0 overflow-hidden": !isExpanded
-              },
-              contentClassName
-            ),
-            role: "region",
-            children
-          }
-        )
-      ]
-    }
-  );
-});
-var ExpandableUncontrolled = forwardRef(function ExpandableUncontrolled2({
-  isExpanded,
-  onChange,
-  ...props
-}, ref) {
-  const [usedIsExpanded, setUsedIsExpanded] = useOverwritableState(isExpanded, onChange);
-  return /* @__PURE__ */ jsx(
-    Expandable,
-    {
-      ...props,
-      ref,
-      isExpanded: usedIsExpanded,
-      onChange: setUsedIsExpanded
-    }
-  );
-});
-
-// src/utils/date.ts
-var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
-var changeDuration = (date, duration, isAdding) => {
-  const {
-    years = 0,
-    months = 0,
-    days = 0,
-    hours = 0,
-    minutes = 0,
-    seconds = 0,
-    milliseconds = 0
-  } = duration;
-  if (years < 0) {
-    console.error(`Range error years must be greater than 0: received ${years}`);
-    return new Date(date);
-  }
-  if (months < 0 || months > 11) {
-    console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
-    return new Date(date);
-  }
-  if (days < 0) {
-    console.error(`Range error days must be greater than 0: received ${days}`);
-    return new Date(date);
-  }
-  if (hours < 0 || hours > 23) {
-    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
-    return new Date(date);
-  }
-  if (minutes < 0 || minutes > 59) {
-    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
-    return new Date(date);
-  }
-  if (seconds < 0 || seconds > 59) {
-    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
-    return new Date(date);
-  }
-  if (milliseconds < 0) {
-    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
-    return new Date(date);
-  }
-  const multiplier = isAdding ? 1 : -1;
-  const newDate = new Date(date);
-  newDate.setFullYear(newDate.getFullYear() + multiplier * years);
-  newDate.setMonth(newDate.getMonth() + multiplier * months);
-  newDate.setDate(newDate.getDate() + multiplier * days);
-  newDate.setHours(newDate.getHours() + multiplier * hours);
-  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
-  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
-  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
-  return newDate;
-};
-var addDuration = (date, duration) => {
-  return changeDuration(date, duration, true);
-};
-var subtractDuration = (date, duration) => {
-  return changeDuration(date, duration, false);
-};
-
-// src/i18n/LocaleProvider.tsx
-import { createContext, useContext, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
-
-// src/hooks/useLocalStorage.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
-
-// src/i18n/translations.ts
-import { TranslationGen } from "@helpwave/internationalization";
-var hightideTranslationLocales = ["de-DE", "en-US"];
-
-// src/i18n/util.ts
-var localsNames = {
-  "en-US": "English (US)",
-  "de-DE": "Deutsch"
-};
-var DEFAULT_LOCALE = "en-US";
-function localeToLanguage(locale) {
-  return locale.split("-")[0];
-}
-var LocalizationUtil = {
-  locals: hightideTranslationLocales,
-  localToLanguage: localeToLanguage,
-  DEFAULT_LOCALE,
-  languagesLocalNames: localsNames
-};
-
-// src/i18n/LocaleProvider.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var LocaleContext = createContext({
-  locale: LocalizationUtil.DEFAULT_LOCALE,
-  setLocale: (v) => v
-});
-var useLocale = () => {
-  const context = useContext(LocaleContext);
-  if (!context) {
-    throw new Error("useLocale must be used within LocaleContext. Try adding a LocaleProvider around your app.");
-  }
-  return context;
-};
-
-// src/components/user-action/Button.tsx
-import { forwardRef as forwardRef2 } from "react";
-import clsx2 from "clsx";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var ButtonColorUtil = {
-  solid: ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"],
-  text: ["primary", "negative", "neutral"],
-  outline: ["primary"]
-};
-var IconButtonUtil = {
-  icon: [...ButtonColorUtil.solid, "transparent"]
-};
-var paddingMapping = {
-  none: "",
-  small: "btn-sm",
-  medium: "btn-md",
-  large: "btn-lg"
-};
-var iconPaddingMapping = {
-  none: "",
-  tiny: "icon-btn-xs",
-  small: "icon-btn-sm",
-  medium: "icon-btn-md",
-  large: "icon-btn-lg"
-};
-var ButtonUtil = {
-  paddingMapping,
-  iconPaddingMapping
-};
-var SolidButton = forwardRef2(function SolidButton2({
-  children,
-  color = "primary",
-  size = "medium",
-  startIcon,
-  endIcon,
-  onClick,
-  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"
-  }[color];
-  const iconColorClasses = {
-    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__ */ jsxs2(
-    "button",
-    {
-      ref,
-      onClick,
-      className: clsx2(
-        "group font-semibold",
-        colorClasses,
-        "not-disabled:hover:brightness-90",
-        "disabled:text-disabled disabled:bg-disabled-background",
-        ButtonUtil.paddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ jsx3(
-          "span",
-          {
-            className: clsx2(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ jsx3(
-          "span",
-          {
-            className: clsx2(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-});
-var IconButton = forwardRef2(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__ */ jsx3(
-    "button",
-    {
-      ref,
-      className: clsx2(
-        colorClasses,
-        "not-disabled:hover:brightness-90",
-        "disabled:text-disabled",
-        {
-          "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 { jsx as jsx4 } from "react/jsx-runtime";
-var YearMonthPicker = ({
-  displayedYearMonth = /* @__PURE__ */ new Date(),
-  start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
-  onChange,
-  className = "",
-  maxHeight = 300,
-  showValueOpen = true
-}) => {
-  const { locale } = useLocale();
-  const ref = useRef(null);
-  useEffect3(() => {
-    const scrollToItem = () => {
-      if (ref.current) {
-        ref.current.scrollIntoView({
-          behavior: "instant",
-          block: "center"
-        });
-      }
-    };
-    scrollToItem();
-  }, [ref]);
-  if (end < start) {
-    console.error(`startYear: (${start}) less than endYear: (${end})`);
-    return null;
-  }
-  const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
-  return /* @__PURE__ */ jsx4("div", { className: clsx3("flex-col-0 select-none", className), children: /* @__PURE__ */ jsx4(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx4("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
-    const selectedYear = displayedYearMonth.getFullYear() === year;
-    return /* @__PURE__ */ jsx4(
-      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 }),
-        isExpanded: showValueOpen && selectedYear,
-        contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx4("div", { className: "flex-row-1", children: monthList.map((month) => {
-          const monthIndex = monthsList.indexOf(month);
-          const newDate = new Date(year, monthIndex);
-          const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
-          const firstOfMonth = new Date(year, monthIndex, 1);
-          const lastOfMonth = new Date(year, monthIndex, 1);
-          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(
-            SolidButton,
-            {
-              disabled: !isValid,
-              color: selectedMonth && isValid ? "primary" : "neutral",
-              className: "flex-1",
-              size: "small",
-              onClick: () => {
-                onChange?.(newDate);
-              },
-              children: new Intl.DateTimeFormat(locale, { month: "short" }).format(newDate)
-            },
-            month
-          );
-        }) }, index))
-      },
-      year
-    );
-  }) }) }) });
-};
-var YearMonthPickerUncontrolled = ({
-  displayedYearMonth,
-  onChange,
-  ...props
-}) => {
-  const [yearMonth, setYearMonth] = useOverwritableState(displayedYearMonth, onChange);
-  return /* @__PURE__ */ jsx4(
-    YearMonthPicker,
-    {
-      displayedYearMonth: yearMonth,
-      onChange: setYearMonth,
-      ...props
-    }
-  );
-};
-export {
-  YearMonthPicker,
-  YearMonthPickerUncontrolled
-};
-//# sourceMappingURL=YearMonthPicker.js.map