@helpwave/hightide
Version:
helpwave's component and theming library
858 lines (841 loc) • 30.5 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/date/DatePicker.tsx
var DatePicker_exports = {};
__export(DatePicker_exports, {
DatePicker: () => DatePicker,
DatePickerUncontrolled: () => DatePickerUncontrolled
});
module.exports = __toCommonJS(DatePicker_exports);
var import_react7 = require("react");
var import_lucide_react2 = require("lucide-react");
// src/localization/LanguageProvider.tsx
var import_react2 = require("react");
// src/hooks/useLocalStorage.ts
var import_react = require("react");
// src/localization/util.ts
var languages = ["en", "de"];
var languagesLocalNames = {
en: "English",
de: "Deutsch"
};
var DEFAULT_LANGUAGE = "en";
var LanguageUtil = {
languages,
DEFAULT_LANGUAGE,
languagesLocalNames
};
// src/localization/LanguageProvider.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var LanguageContext = (0, import_react2.createContext)({
language: LanguageUtil.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/localization/useTranslation.ts
var TranslationPluralCount = {
zero: 0,
one: 1,
two: 2,
few: 3,
many: 11,
other: -1
};
var useTranslation = (translations, overwriteTranslation = {}) => {
const { language: languageProp, translation: overwrite } = overwriteTranslation;
const { language: inferredLanguage } = useLanguage();
const usedLanguage = languageProp ?? inferredLanguage;
const usedTranslations = [...translations];
if (overwrite) {
usedTranslations.push(overwrite);
}
return (key, options) => {
const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
try {
for (let i = translations.length - 1; i >= 0; i--) {
const translation = translations[i];
const localizedTranslation = translation[usedLanguage];
if (!localizedTranslation) {
continue;
}
const value = localizedTranslation[key];
if (!value) {
continue;
}
let forProcessing;
if (typeof value !== "string") {
if (count === TranslationPluralCount.zero && value?.zero) {
forProcessing = value.zero;
} else if (count === TranslationPluralCount.one && value?.one) {
forProcessing = value.one;
} else if (count === TranslationPluralCount.two && value?.two) {
forProcessing = value.two;
} else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {
forProcessing = value.few;
} else if (count > TranslationPluralCount.many && value?.many) {
forProcessing = value.many;
} else {
forProcessing = value.other;
}
} else {
forProcessing = value;
}
forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
return replacements[placeholder] ?? `{{key:${placeholder}}}`;
});
return forProcessing;
}
} catch (e) {
console.error(e);
}
return `{{${usedLanguage}:${key}}}`;
};
};
// 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 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/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/date/DatePicker.tsx
var import_clsx5 = __toESM(require("clsx"));
// src/components/user-action/Button.tsx
var import_react3 = require("react");
var import_clsx = __toESM(require("clsx"));
var import_jsx_runtime2 = require("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 = {
small: "btn-sm",
medium: "btn-md",
large: "btn-lg"
};
var iconPaddingMapping = {
tiny: "icon-btn-xs",
small: "icon-btn-sm",
medium: "icon-btn-md",
large: "icon-btn-lg"
};
var ButtonUtil = {
paddingMapping,
iconPaddingMapping
};
var SolidButton = (0, import_react3.forwardRef)(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__ */ (0, import_jsx_runtime2.jsxs)(
"button",
{
ref,
onClick,
className: (0, import_clsx.default)(
"group font-semibold",
colorClasses,
"not-disabled:hover:brightness-90",
"disabled:text-disabled-text disabled:bg-disabled-background",
ButtonUtil.paddingMapping[size],
className
),
...restProps,
children: [
startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
className: (0, import_clsx.default)(
iconColorClasses,
"group-disabled:text-disabled-icon"
),
children: startIcon
}
),
children,
endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
className: (0, import_clsx.default)(
iconColorClasses,
"group-disabled:text-disabled-icon"
),
children: endIcon
}
)
]
}
);
});
var TextButton = ({
children,
color = "neutral",
size = "medium",
startIcon,
endIcon,
onClick,
coloredHoverBackground = true,
className,
...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"
}[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"
}[color];
const iconColorClasses = {
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,
className: (0, import_clsx.default)(
"group font-semibold",
"disabled:text-disabled-text",
colorClasses,
{
[backgroundColor]: coloredHoverBackground,
"not-disabled:hover:bg-button-text-hover-background": !coloredHoverBackground
},
ButtonUtil.paddingMapping[size],
className
),
...restProps,
children: [
startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
className: (0, import_clsx.default)(
iconColorClasses,
"group-disabled:text-disabled-icon"
),
children: startIcon
}
),
children,
endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
className: (0, import_clsx.default)(
iconColorClasses,
"group-disabled:text-disabled-icon"
),
children: endIcon
}
)
]
}
);
};
// src/components/date/YearMonthPicker.tsx
var import_react5 = 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
var import_react4 = require("react");
var import_lucide_react = require("lucide-react");
var import_clsx2 = __toESM(require("clsx"));
var import_jsx_runtime3 = require("react/jsx-runtime");
var ExpansionIcon = ({ isExpanded, className }) => {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_lucide_react.ChevronDown,
{
className: (0, import_clsx2.default)(
"min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
{ "rotate-180": isExpanded },
className
)
}
);
};
var Expandable = (0, import_react4.forwardRef)(function Expandable2({
children,
label,
icon,
isExpanded = false,
onChange = noop,
clickOnlyOnHeader = true,
disabled = false,
className,
headerClassName,
contentClassName,
contentExpandedClassName
}, ref) {
const defaultIcon = (0, import_react4.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
icon ??= defaultIcon;
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),
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"div",
{
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",
{
"group-hover:brightness-97": !isExpanded,
"hover:brightness-97": isExpanded && !disabled,
"cursor-pointer": clickOnlyOnHeader && !disabled
},
headerClassName
),
onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
children: [
label,
icon(isExpanded)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
className: (0, import_clsx2.default)(
"flex-col-2 px-4 transition-all duration-300 ease-in-out",
{
[(0, import_clsx2.default)("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
"max-h-0 opacity-0 overflow-hidden": !isExpanded
},
contentClassName
),
children
}
)
]
}
);
});
var ExpandableUncontrolled = (0, import_react4.forwardRef)(function ExpandableUncontrolled2({
isExpanded,
onChange = noop,
...props
}, ref) {
const [usedIsExpanded, setUsedIsExpanded] = (0, import_react4.useState)(isExpanded);
(0, import_react4.useEffect)(() => {
setUsedIsExpanded(isExpanded);
}, [isExpanded]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Expandable,
{
...props,
ref,
isExpanded: usedIsExpanded,
onChange: (value) => {
onChange(value);
setUsedIsExpanded(value);
}
}
);
});
// src/components/date/YearMonthPicker.tsx
var import_jsx_runtime4 = 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()], { exclusiveEnd: false });
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx3.default)("flex-col-0 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: "flex-col-1 mr-3", children: years.map((year) => {
const selectedYear = displayedYearMonth.getFullYear() === year;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
ExpandableUncontrolled,
{
ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_clsx3.default)({ "text-primary font-bold": selectedYear }), children: year }),
isExpanded: showValueOpen && selectedYear,
contentClassName: "gap-y-1",
children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)(
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
);
}) }) }) });
};
// src/components/date/DayPicker.tsx
var import_clsx4 = __toESM(require("clsx"));
var import_react6 = require("react");
var import_jsx_runtime5 = 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_runtime5.jsxs)("div", { className: (0, import_clsx4.default)("flex-col-1 min-w-[220px] select-none", className), children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-row-2 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: "flex-row-2 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_runtime5.jsx)(
"button",
{
disabled: !isDayValid,
className: (0, import_clsx4.default)(
"flex-1 rounded-full border-2",
{
"text-description": !isSameMonth && !isSelected && isDayValid,
"text-button-solid-neutral-text bg-button-solid-neutral-background": !isSelected && isSameMonth && isDayValid,
"text-button-solid-primary-text bg-button-solid-primary-background": isSelected && isDayValid,
"hover:brightness-90 hover:bg-button-solid-primary-background hover:text-button-solid-primary-text": isDayValid,
"text-disabled-text bg-disabled-background cursor-not-allowed": !isDayValid,
"border-secondary": isToday && markToday,
"border-transparent": !isToday || !markToday
}
),
onClick: () => onChange(date),
children: date.getDate()
},
date.getDate()
);
}) }, index))
] });
};
// src/localization/defaults/time.ts
var monthTranslation = {
en: {
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: {
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 timeTranslation = {
en: {
...monthTranslation.en,
century: { one: "Century", other: "Centuries" },
decade: { one: "Decade", other: "Decades" },
year: { one: "Year", other: "Years" },
month: { one: "Month", other: "Months" },
day: { one: "Day", other: "Days" },
hour: { one: "Hour", other: "Hours" },
minute: { one: "Minute", other: "Minutes" },
second: { one: "Second", other: "Seconds" },
millisecond: { one: "Millisecond", other: "Milliseconds" },
microsecond: { one: "Microsecond", other: "Microseconds" },
nanosecond: { one: "Nanosecond", other: "Nanoseconds" },
yesterday: "Yesterday",
today: "Today",
tomorrow: "Tomorrow",
in: "in",
ago: "ago"
},
de: {
...monthTranslation.de,
century: { one: "Jahrhundert", other: "Jahrhunderte" },
decade: { one: "Jahrzehnt", other: "Jahrzehnte" },
year: { one: "Jahr", other: "Jahre" },
month: { one: "Monat", other: "Monate" },
day: { one: "Tag", other: "Tage" },
hour: { one: "Stunde", other: "Stunden" },
minute: { one: "Minute", other: "Minuten" },
second: { one: "Sekunde", other: "Sekunden" },
millisecond: { one: "Millisekunde", other: "Millisekunden" },
microsecond: { one: "Mikrosekunde", other: "Mikrosekunden" },
nanosecond: { one: "Nanosekunde", other: "Nanosekunden" },
yesterday: "Gestern",
today: "Heute",
tomorrow: "Morgen",
in: "in",
ago: "vor"
}
};
// src/components/date/DatePicker.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
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([timeTranslation], 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_runtime6.jsxs)("div", { className: (0, import_clsx5.default)("flex-col-4", className), children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-row-2 items-center justify-between h-7", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
TextButton,
{
className: (0, import_clsx5.default)("flex-row-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_runtime6.jsx)(import_lucide_react2.ChevronDown, { size: 16 })
]
}
),
displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-row-2 justify-end", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)(import_lucide_react2.ArrowUp, { size: 20 })
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)(import_lucide_react2.ArrowDown, { size: 20 })
}
)
] })
] }),
displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
YearMonthPicker,
{
...yearMonthPickerProps,
displayedYearMonth: value,
start,
end,
onChange: (newDate) => {
setDisplayedMonth(newDate);
setDisplayMode("day");
}
}
) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
DayPicker,
{
...dayPickerProps,
displayedMonth,
start,
end,
selected: value,
onChange: (date) => {
onChange(date);
}
}
),
/* @__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());
onChange(newDate);
},
children: translation("today")
}
) })
] })
] });
};
var DatePickerUncontrolled = ({
value = /* @__PURE__ */ new Date(),
onChange = noop,
...props
}) => {
const [date, setDate] = (0, import_react7.useState)(value);
(0, import_react7.useEffect)(() => setDate(value), [value]);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
DatePicker,
{
...props,
value: date,
onChange: (date1) => {
setDate(date1);
onChange(date1);
}
}
);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
DatePicker,
DatePickerUncontrolled
});
//# sourceMappingURL=DatePicker.js.map