@helpwave/hightide
Version:
helpwave's component and theming library
836 lines (819 loc) • 30.9 kB
JavaScript
;
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/user-input/DateAndTimePicker.tsx
var DateAndTimePicker_exports = {};
__export(DateAndTimePicker_exports, {
DateTimePicker: () => DateTimePicker
});
module.exports = __toCommonJS(DateAndTimePicker_exports);
var import_clsx7 = __toESM(require("clsx"));
// src/hooks/useLanguage.tsx
var import_react2 = require("react");
// src/hooks/useLocalStorage.tsx
var import_react = require("react");
// src/hooks/useLanguage.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var DEFAULT_LANGUAGE = "en";
var LanguageContext = (0, import_react2.createContext)({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
var useLocale = (overWriteLanguage) => {
const { language } = useLanguage();
const mapping = {
en: "en-US",
de: "de-DE"
};
return mapping[overWriteLanguage ?? language];
};
// src/hooks/useTranslation.ts
var useTranslation = (defaults, translationOverwrite = {}) => {
const { language: languageProp, translation: overwrite } = translationOverwrite;
const { language: inferredLanguage } = useLanguage();
const usedLanguage = languageProp ?? inferredLanguage;
let defaultValues = defaults[usedLanguage];
if (overwrite && overwrite[usedLanguage]) {
defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
}
return defaultValues;
};
// src/util/noop.ts
var noop = () => void 0;
// src/util/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 range = (start, end, allowEmptyRange = false) => {
if (end < start) {
if (!allowEmptyRange) {
console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`);
}
return [];
}
return Array.from({ length: end - start + 1 }, (_, index) => index + start);
};
var closestMatch = (list, firstCloser) => {
return list.reduce((item1, item2) => {
return firstCloser(item1, item2) ? item1 : item2;
});
};
// src/util/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) => {
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);
};
var isInTimeSpan = (value, startDate, endDate) => {
if (startDate && endDate) {
console.assert(startDate <= endDate);
return startDate <= value && value <= endDate;
} else if (startDate) {
return startDate <= value;
} else if (endDate) {
return endDate >= value;
} else {
return true;
}
};
var equalDate = (date1, date2) => {
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
};
var getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
const month = date.getMonth();
const year = date.getFullYear();
const dayList = [];
let currentDate = new Date(year, month, 1);
const weekStartIndex = weekDayList.indexOf(weekStart);
while (currentDate.getDay() !== weekStartIndex) {
currentDate = subtractDuration(currentDate, { days: 1 });
}
while (dayList.length < 7 * weeks) {
const date2 = new Date(currentDate);
date2.setHours(date2.getHours(), date2.getMinutes());
dayList.push(date2);
currentDate = addDuration(currentDate, { days: 1 });
}
return equalSizeGroups(dayList, 7);
};
// src/components/Button.tsx
var import_clsx = __toESM(require("clsx"));
var import_jsx_runtime2 = require("react/jsx-runtime");
var ButtonSizePaddings = {
small: "btn-sm",
medium: "btn-md",
large: "btn-lg"
};
var SolidButton = ({
children,
disabled = false,
color = "primary",
size = "medium",
startIcon,
endIcon,
onClick,
className,
...restProps
}) => {
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"
}[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"
}[color];
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"button",
{
onClick: disabled ? void 0 : onClick,
disabled: disabled || onClick === void 0,
className: (0, import_clsx.default)(
className,
{
"text-disabled-text bg-disabled-background": disabled,
[(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
},
ButtonSizePaddings[size]
),
...restProps,
children: [
startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
className: (0, import_clsx.default)({
[iconColorClasses]: !disabled,
[`text-disabled-icon`]: disabled
}),
children: startIcon
}
),
children,
endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
className: (0, import_clsx.default)({
[iconColorClasses]: !disabled,
[`text-disabled-icon`]: disabled
}),
children: endIcon
}
)
]
}
);
};
var TextButton = ({
children,
disabled = false,
color = "neutral",
size = "medium",
startIcon,
endIcon,
onClick,
className,
...restProps
}) => {
const colorClasses = {
negative: "bg-transparent text-button-text-negative-text",
neutral: "bg-transparent text-button-text-neutral-text"
}[color];
const iconColorClasses = {
negative: "text-button-text-negative-icon",
neutral: "text-button-text-neutral-icon"
}[color];
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"button",
{
onClick: disabled ? void 0 : onClick,
disabled: disabled || onClick === void 0,
className: (0, import_clsx.default)(
className,
{
"text-disabled-text": disabled,
[(0, import_clsx.default)(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
},
ButtonSizePaddings[size]
),
...restProps,
children: [
startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
className: (0, import_clsx.default)({
[iconColorClasses]: !disabled,
[`text-disabled-icon`]: disabled
}),
children: startIcon
}
),
children,
endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
className: (0, import_clsx.default)({
[iconColorClasses]: !disabled,
[`text-disabled-icon`]: disabled
}),
children: endIcon
}
)
]
}
);
};
// src/components/date/TimePicker.tsx
var import_react3 = require("react");
var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
var import_clsx2 = __toESM(require("clsx"));
var import_jsx_runtime3 = require("react/jsx-runtime");
var TimePicker = ({
time = /* @__PURE__ */ new Date(),
onChange = noop,
is24HourFormat = true,
minuteIncrement = "5min",
maxHeight = 300,
className = ""
}) => {
const minuteRef = (0, import_react3.useRef)(null);
const hourRef = (0, import_react3.useRef)(null);
const isPM = time.getHours() >= 11;
const hours = is24HourFormat ? range(0, 23) : range(1, 12);
let minutes = range(0, 59);
(0, import_react3.useEffect)(() => {
const scrollToItem = () => {
if (minuteRef.current) {
const container = minuteRef.current.parentElement;
const hasOverflow = container.scrollHeight > maxHeight;
if (hasOverflow) {
minuteRef.current.scrollIntoView({
behavior: "instant",
block: "nearest"
});
}
}
};
scrollToItem();
}, [minuteRef, minuteRef.current]);
(0, import_react3.useEffect)(() => {
const scrollToItem = () => {
if (hourRef.current) {
const container = hourRef.current.parentElement;
const hasOverflow = container.scrollHeight > maxHeight;
if (hasOverflow) {
hourRef.current.scrollIntoView({
behavior: "instant",
block: "nearest"
});
}
}
};
scrollToItem();
}, [hourRef, hourRef.current]);
switch (minuteIncrement) {
case "5min":
minutes = minutes.filter((value) => value % 5 === 0);
break;
case "10min":
minutes = minutes.filter((value) => value % 10 === 0);
break;
case "15min":
minutes = minutes.filter((value) => value % 15 === 0);
break;
case "30min":
minutes = minutes.filter((value) => value % 30 === 0);
break;
}
const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()));
const style = (selected) => (0, import_clsx2.default)(
"chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3",
{ "bg-primary text-on-primary": selected, "bg-white text-black": !selected }
);
const onChangeWrapper = (transformer) => {
const newDate = new Date(time);
transformer(newDate);
onChange(newDate);
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)("row gap-x-2 w-fit min-w-[150px] select-none", className), children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col gap-y-1 h-full", children: hours.map((hour) => {
const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
ref: currentHour ? hourRef : void 0,
className: style(currentHour),
onClick: () => onChangeWrapper((newDate) => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0))),
children: hour.toString().padStart(2, "0")
},
hour
);
}) }) }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col gap-y-1 h-full", children: minutes.map((minute) => {
const currentMinute = minute === closestMinute;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
ref: currentMinute ? minuteRef : void 0,
className: style(currentMinute),
onClick: () => onChangeWrapper((newDate) => newDate.setMinutes(minute)),
children: minute.toString().padStart(2, "0")
},
minute + minuteIncrement
);
}) }) }),
!is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "col gap-y-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
className: style(!isPM),
onClick: () => onChangeWrapper((newDate) => isPM && newDate.setHours(newDate.getHours() - 12)),
children: "AM"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
className: style(isPM),
onClick: () => onChangeWrapper((newDate) => !isPM && newDate.setHours(newDate.getHours() + 12)),
children: "PM"
}
)
] })
] });
};
// src/components/date/DatePicker.tsx
var import_react7 = require("react");
var import_lucide_react2 = require("lucide-react");
var import_clsx6 = __toESM(require("clsx"));
// src/components/date/YearMonthPicker.tsx
var import_react5 = require("react");
var import_react_custom_scrollbars_22 = require("react-custom-scrollbars-2");
var import_clsx4 = __toESM(require("clsx"));
// src/components/Expandable.tsx
var import_react4 = require("react");
var import_lucide_react = require("lucide-react");
var import_clsx3 = __toESM(require("clsx"));
var import_jsx_runtime4 = require("react/jsx-runtime");
var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronDown, { size: 16, className: "min-w-[16px]" });
var Expandable = (0, import_react4.forwardRef)(({
children,
label,
icon,
initialExpansion = false,
clickOnlyOnHeader = true,
className = "",
headerClassName = ""
}, ref) => {
const [isExpanded, setIsExpanded] = (0, import_react4.useState)(initialExpansion);
icon ??= DefaultIcon;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"div",
{
ref,
className: (0, import_clsx3.default)("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"button",
{
className: (0, import_clsx3.default)("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded),
children: [
label,
icon(isExpanded)
]
}
),
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col", children })
]
}
);
});
Expandable.displayName = "Expandable";
// src/components/date/YearMonthPicker.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var YearMonthPicker = ({
displayedYearMonth = /* @__PURE__ */ new Date(),
start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
onChange = noop,
className = "",
maxHeight = 300,
showValueOpen = true
}) => {
const locale = useLocale();
const ref = (0, import_react5.useRef)(null);
(0, import_react5.useEffect)(() => {
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());
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx4.default)("col select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
const selectedYear = displayedYearMonth.getFullYear() === year;
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
Expandable,
{
ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: (0, import_clsx4.default)({ "text-primary font-bold": selectedYear }), children: year }),
initialExpansion: showValueOpen && selectedYear,
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime5.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();
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__ */ (0, import_jsx_runtime5.jsx)(
"button",
{
disabled: !isValid,
className: (0, import_clsx4.default)(
"chip hover:brightness-95 flex-1",
{
"bg-gray-50 text-black": !selectedMonth && isValid,
"bg-primary text-on-primary": selectedMonth && isValid,
"bg-disabled-background text-disabled-text": !isValid
}
),
onClick: () => {
onChange(newDate);
},
children: new Intl.DateTimeFormat(locale, { month: "short" }).format(newDate)
},
month
);
}) }, index)) })
},
year
);
}) }) }) });
};
// src/components/date/DayPicker.tsx
var import_clsx5 = __toESM(require("clsx"));
var import_react6 = require("react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var DayPicker = ({
displayedMonth,
selected,
start,
end,
onChange = noop,
weekStart = "monday",
markToday = true,
className = ""
}) => {
const locale = useLocale();
const month = displayedMonth.getMonth();
const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx5.default)("col gap-y-1 min-w-[220px] select-none", className), children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.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__ */ (0, import_jsx_runtime6.jsx)(
"button",
{
disabled: !isDayValid,
className: (0, import_clsx5.default)(
"flex-1 rounded-full border-2 border-transparent shadow-sm",
{
"text-gray-700 bg-gray-100": !isSameMonth && isDayValid,
"text-black bg-white": !isSelected && isSameMonth && isDayValid,
"text-on-primary bg-primary": isSelected,
"border-black": isToday && markToday,
"hover:brightness-90 hover:bg-primary hover:text-on-primary": isDayValid,
"text-disabled-text bg-disabled-background": !isDayValid
}
),
onClick: () => onChange(date),
children: date.getDate()
},
date.getDate()
);
}) }, index))
] });
};
// src/components/date/DatePicker.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var defaultDatePickerTranslation = {
en: {
today: "Today"
},
de: {
today: "Heute"
}
};
var DatePicker = ({
overwriteTranslation,
value = /* @__PURE__ */ new Date(),
start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
initialDisplay = "day",
onChange = noop,
yearMonthPickerProps,
dayPickerProps,
className = ""
}) => {
const locale = useLocale();
const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
const [displayedMonth, setDisplayedMonth] = (0, import_react7.useState)(value);
const [displayMode, setDisplayMode] = (0, import_react7.useState)(initialDisplay);
(0, import_react7.useEffect)(() => {
setDisplayedMonth(value);
}, [value]);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_clsx6.default)("col gap-y-4", className), children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row items-center justify-between h-7", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
TextButton,
{
className: (0, import_clsx6.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__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ChevronDown, { size: 16 })
]
}
),
displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row justify-end", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
SolidButton,
{
size: "small",
color: "primary",
disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
onClick: () => {
setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
},
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ArrowUp, { size: 20 })
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
SolidButton,
{
size: "small",
color: "primary",
disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
onClick: () => {
setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
},
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ArrowDown, { size: 20 })
}
)
] })
] }),
displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
YearMonthPicker,
{
...yearMonthPickerProps,
displayedYearMonth: value,
start,
end,
onChange: (newDate) => {
setDisplayedMonth(newDate);
setDisplayMode("day");
}
}
) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
DayPicker,
{
...dayPickerProps,
displayedMonth,
start,
end,
selected: value,
onChange: (date) => {
onChange(date);
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
TextButton,
{
onClick: () => {
const newDate = /* @__PURE__ */ new Date();
newDate.setHours(value.getHours(), value.getMinutes());
onChange(newDate);
},
children: translation.today
}
) })
] })
] });
};
// src/components/user-input/DateAndTimePicker.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var defaultTimeTranslation = {
en: {
clear: "Clear",
change: "Change",
year: "Year",
month: "Month",
day: "Day",
january: "January",
february: "Febuary",
march: "March",
april: "April",
may: "May",
june: "June",
july: "July",
august: "August",
september: "September",
october: "October",
november: "November",
december: "December"
},
de: {
clear: "Entfernen",
change: "\xC4ndern",
year: "Jahr",
month: "Monat",
day: "Tag",
january: "Januar",
february: "Febuar",
march: "M\xE4rz",
april: "April",
may: "Mai",
june: "Juni",
july: "Juli",
august: "August",
september: "September",
october: "October",
november: "November",
december: "December"
}
};
var DateTimePicker = ({
overwriteTranslation,
value = /* @__PURE__ */ new Date(),
start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
mode = "dateTime",
onFinish = noop,
onChange = noop,
onRemove = noop,
timePickerProps,
datePickerProps
}) => {
const translation = useTranslation(defaultTimeTranslation, overwriteTranslation);
const useDate = mode === "dateTime" || mode === "date";
const useTime = mode === "dateTime" || mode === "time";
let dateDisplay;
let timeDisplay;
if (useDate) {
dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
DatePicker,
{
...datePickerProps,
className: "min-w-[320px] min-h-[250px]",
yearMonthPickerProps: { maxHeight: 218 },
value,
start,
end,
onChange
}
);
}
if (useTime) {
timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
TimePicker,
{
...timePickerProps,
className: (0, import_clsx7.default)("h-full", { "justify-between w-full": mode === "time" }),
maxHeight: 250,
time: value,
onChange
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "col w-fit", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-4", children: [
dateDisplay,
timeDisplay
] }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
SolidButton,
{
size: "medium",
onClick: () => onFinish(value),
children: translation.change
}
)
] }) })
] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
DateTimePicker
});
//# sourceMappingURL=DateAndTimePicker.js.map