@uxf/ui 11.74.0 → 11.74.1

package/date-range-picker-input/date-range-picker-input.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePickerInput = exports.splitValueToRange = exports.SEPARATOR = exports.DISPLAY_DATE_FORMAT = exports.ALLOWED_DATE_FORMAT = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const _input_with_popover_1 = require("../_input-with-popover");
+const date_range_picker_1 = require("../date-range-picker");
+const icon_1 = require("../icon");
+exports.ALLOWED_DATE_FORMAT = ["D. M. YYYY", "DD. MM. YYYY", "D.M.YYYY", "DD.MM.YYYY", "YYYY-MM-DD"];
+exports.DISPLAY_DATE_FORMAT = "D. M. YYYY";
+exports.SEPARATOR = " – ";
+const splitValueToRange = (value) => {
+    const splitStr = value === null || value === void 0 ? void 0 : value.split(exports.SEPARATOR);
+    return { from: splitStr === null || splitStr === void 0 ? void 0 : splitStr.at(0), to: splitStr === null || splitStr === void 0 ? void 0 : splitStr.at(1) };
+};
+exports.splitValueToRange = splitValueToRange;
+exports.DateRangePickerInput = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const { numberOfMonths, ...restProps } = props;
+    const onChange = props.onChange;
+    const onDatePickerChange = (0, react_1.useCallback)((value) => {
+        onChange(value
+            ? (value.from ? (0, dayjs_1.default)(value.from).format(exports.DISPLAY_DATE_FORMAT) : "") +
+                exports.SEPARATOR +
+                (value.to ? (0, dayjs_1.default)(value.to).format(exports.DISPLAY_DATE_FORMAT) : "")
+            : "");
+    }, [onChange]);
+    const { from, to } = (0, exports.splitValueToRange)(props.value);
+    const parsedFrom = (0, dayjs_1.default)(from, exports.ALLOWED_DATE_FORMAT, true);
+    const parsedTo = (0, dayjs_1.default)(to, exports.ALLOWED_DATE_FORMAT, true);
+    const selectedDates = props.value
+        ? { from: parsedFrom.isValid() ? parsedFrom.toDate() : null, to: parsedTo.isValid() ? parsedTo.toDate() : null }
+        : null;
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...restProps, placeholder: props.placeholder, ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: (_b = props.value) !== null && _b !== void 0 ? _b : "" }, ({ close }) => (react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: props.bottomContent, datesConfig: props.datesConfig, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, onClosePopover: close, selectedDates: selectedDates, style: props.style, unavailableDates: props.unavailableDates }))));
+});
+exports.DateRangePickerInput.displayName = "UxfUiDatePickerInput";

package/date-range-picker-input/date-range-picker-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/date-range-picker-input/date-range-picker-input.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const date_range_picker_input_stories_1 = require("./date-range-picker-input.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(date_range_picker_input_stories_1.Default, null));

package/date-range-picker-input/date-range-picker-input.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/date-range-picker-input/date-range-picker-input.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importStar(require("react"));
+const date_range_picker_input_1 = require("./date-range-picker-input");
+// import Docs from "./date-picker.docs.mdx";
+const action_1 = require("../utils/action");
+function Default() {
+    const [range, setRange] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", setRange);
+    const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", isClearable: true, label: "Datum \u010Dehokoliv", name: "date", onChange: onChange, value: range }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test", label: "Datum \u010Dehokoliv - 2 m\u011Bs\u00EDce", name: "date", numberOfMonths: 2, onChange: onChange, value: range }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum disabled", name: "date-disabled", onChange: onChange, value: range }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum readonly", name: "date-readonly", onChange: onChange, value: range }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum invalid", name: "date-invalid", onChange: onChange, value: range }),
+        react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { bottomContent: react_1.default.createElement("div", null,
+                "Bottom content",
+                react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, value: range })));
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
+}

package/date-range-picker-input/index.d.ts

@@ -0,0 +1,2 @@
+export { DateRangePickerInput } from "./date-range-picker-input";
+export type { DateRangePickerInputProps } from "./date-range-picker-input";

package/date-range-picker-input/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePickerInput = void 0;
+var date_range_picker_input_1 = require("./date-range-picker-input");
+Object.defineProperty(exports, "DateRangePickerInput", { enumerable: true, get: function () { return date_range_picker_input_1.DateRangePickerInput; } });

package/datetime-picker/datetime-picker.d.ts

@@ -0,0 +1,17 @@
+import type { MonthType } from "@uxf/datepicker/utils/types";
+import { Dayjs } from "dayjs";
+import { FC, ReactNode } from "react";
+import { InputWithPopoverProps } from "../_input-with-popover";
+export declare const OUTPUT_DATETIME_FORMAT = "YYYY-MM-DDTHH:mm:ss.SSSZ";
+export declare function getStrictParsedDatetime(date: string | null): Dayjs;
+export interface DatetimePickerProps {
+    closePopoverHandler?: () => void;
+    onChange: InputWithPopoverProps<string | null>["onChange"];
+    onMonthChange?: (months: MonthType[]) => void;
+    value: InputWithPopoverProps<string | null>["value"];
+    minDate?: Date;
+    maxDate?: Date;
+    unavailableDates?: Date[];
+    bottomContent?: ReactNode;
+}
+export declare const DatetimePicker: FC<DatetimePickerProps>;

package/datetime-picker/datetime-picker.js

@@ -0,0 +1,98 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatetimePicker = exports.OUTPUT_DATETIME_FORMAT = void 0;
+exports.getStrictParsedDatetime = getStrictParsedDatetime;
+const translations_1 = require("@uxf/core-react/translations");
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const dayjs_1 = __importStar(require("dayjs"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const react_1 = __importStar(require("react"));
+const date_picker_1 = require("../date-picker");
+const time_picker_1 = require("../time-picker");
+(0, dayjs_1.extend)(customParseFormat_1.default);
+exports.OUTPUT_DATETIME_FORMAT = "YYYY-MM-DDTHH:mm:ss.SSSZ";
+function getStrictParsedDatetime(date) {
+    var _a;
+    return (0, dayjs_1.default)((_a = date === null || date === void 0 ? void 0 : date.slice(0, 19)) !== null && _a !== void 0 ? _a : null, exports.OUTPUT_DATETIME_FORMAT.slice(0, 19), true);
+}
+function getSelectedDate(value) {
+    const parsedValue = getStrictParsedDatetime(value);
+    if (value && parsedValue.isValid()) {
+        return (0, dayjs_1.default)(value).toDate();
+    }
+    return null;
+}
+function getSelectedTime(value) {
+    const parsedValue = getStrictParsedDatetime(value);
+    if (value && parsedValue.isValid()) {
+        return {
+            hour: (0, dayjs_1.default)(value).hour(),
+            minute: (0, dayjs_1.default)(value).minute(),
+        };
+    }
+    return null;
+}
+const DatetimePicker = (props) => {
+    const t = (0, translations_1.useUxfTranslation)();
+    const onChange = props.onChange;
+    const [selectedTab, setSelectedTab] = (0, react_1.useState)("date");
+    const [tmpDate, setTmpDate] = (0, react_1.useState)(props.value ? (0, dayjs_1.default)(props.value) : null);
+    const onDatePickerChange = (0, react_1.useCallback)((value) => {
+        let parsedValue = (0, dayjs_1.default)(value);
+        if (tmpDate === null || tmpDate === void 0 ? void 0 : tmpDate.isValid()) {
+            parsedValue = tmpDate.date(parsedValue.date()).month(parsedValue.month()).year(parsedValue.year());
+        }
+        onChange(parsedValue.toISOString());
+        setTmpDate(parsedValue);
+        setSelectedTab("time");
+    }, [onChange, tmpDate]);
+    const onTimePickerChange = (0, react_1.useCallback)((value) => {
+        var _a;
+        const parsedValue = value
+            ? (tmpDate !== null && tmpDate !== void 0 ? tmpDate : (0, dayjs_1.default)()).hour(value.hour).minute(value.minute).second(0)
+            : (tmpDate !== null && tmpDate !== void 0 ? tmpDate : null);
+        onChange((_a = parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.toISOString()) !== null && _a !== void 0 ? _a : null);
+        setTmpDate(parsedValue);
+    }, [onChange, tmpDate]);
+    const selectedDate = getSelectedDate(props.value);
+    const selectedTime = getSelectedTime(props.value);
+    return (react_1.default.createElement("div", { className: "uxf-tabs uxf-tabs--variant-segmented uxf-tabs--horizontal" },
+        react_1.default.createElement("div", { className: "uxf-tabs__button-list uxf-tabs__button-list--variant-segmented uxf-tabs__button-list--horizontal uxf-datetime-picker__tabs" },
+            react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__button uxf-tabs__button--variant-segmented uxf-tabs__button--horizontal uxf-datetime-picker__tab", selectedTab === "date" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("date") }, t("uxf-ui-datetime-picker:dateTab")),
+            react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__button uxf-tabs__button--variant-segmented uxf-tabs__button--horizontal uxf-datetime-picker__tab", selectedTab === "time" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("time") }, t("uxf-ui-datetime-picker:timeTab"))),
+        react_1.default.createElement("div", { className: "uxf-tabs__panels" },
+            selectedTab === "date" && (react_1.default.createElement("div", { className: "uxf-tabs__panel" },
+                react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, maxDate: props.maxDate, minDate: props.minDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates }))),
+            selectedTab === "time" && (react_1.default.createElement("div", { className: "uxf-tabs__panel" },
+                react_1.default.createElement(time_picker_1.TimePicker, { onChange: onTimePickerChange, selectedTime: selectedTime }))))));
+};
+exports.DatetimePicker = DatetimePicker;
+exports.DatetimePicker.displayName = "UxfUiDatePicker";

package/datetime-picker/datetime-picker.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/datetime-picker/datetime-picker.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const datetime_picker_stories_1 = require("./datetime-picker.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(datetime_picker_stories_1.Default, null));

package/datetime-picker/datetime-picker.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/datetime-picker/datetime-picker.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
+const datetime_picker_1 = require("./datetime-picker");
+function Default() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", setValue);
+    const testDatetimePickers = (react_1.default.createElement(datetime_picker_1.DatetimePicker, { bottomContent: react_1.default.createElement("div", null,
+            "Bottom content",
+            react_1.default.createElement("p", null, "Here can goes anything")), onChange: onChange, value: value }));
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatetimePickers);
+}

package/datetime-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatetimePicker, OUTPUT_DATETIME_FORMAT, getStrictParsedDatetime } from "./datetime-picker";
+export type { DatetimePickerProps } from "./datetime-picker";

package/datetime-picker/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStrictParsedDatetime = exports.OUTPUT_DATETIME_FORMAT = exports.DatetimePicker = void 0;
+var datetime_picker_1 = require("./datetime-picker");
+Object.defineProperty(exports, "DatetimePicker", { enumerable: true, get: function () { return datetime_picker_1.DatetimePicker; } });
+Object.defineProperty(exports, "OUTPUT_DATETIME_FORMAT", { enumerable: true, get: function () { return datetime_picker_1.OUTPUT_DATETIME_FORMAT; } });
+Object.defineProperty(exports, "getStrictParsedDatetime", { enumerable: true, get: function () { return datetime_picker_1.getStrictParsedDatetime; } });

package/datetime-picker/translations.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    readonly "uxf-ui-datetime-picker": {
+        readonly dateTab: {
+            readonly cs: "Datum";
+            readonly en: "Date";
+            readonly sk: "Dátum";
+            readonly de: "Datum";
+        };
+        readonly timeTab: {
+            readonly cs: "Čas";
+            readonly en: "Time";
+            readonly sk: "Čas";
+            readonly de: "Zeit";
+        };
+    };
+};
+export default _default;

package/datetime-picker/translations.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-datetime-picker": {
+        dateTab: {
+            cs: "Datum",
+            en: "Date",
+            sk: "Dátum",
+            de: "Datum",
+        },
+        timeTab: {
+            cs: "Čas",
+            en: "Time",
+            sk: "Čas",
+            de: "Zeit",
+        },
+    },
+};

package/datetime-picker-input/datetime-picker-input.d.ts

@@ -0,0 +1,21 @@
+import { DatetimeString } from "@uxf/core/date";
+import React, { ReactNode } from "react";
+import { InputWithPopoverProps } from "../_input-with-popover";
+import { ControlProps } from "../types";
+export declare const ALLOWED_DATETIME_FORMAT: string[];
+export declare const DISPLAY_DATETIME_FORMAT = "D. M. YYYY H:mm";
+export declare const BOUNDARY_DATE_FORMAT = "YYYY-MM-DD";
+interface DatetimePickerProps extends ControlProps<DatetimeString | null> {
+    onClose: () => void;
+}
+export interface DatetimePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
+    placeholder?: string;
+    triggerElement?: ReactNode;
+    minDate?: string;
+    maxDate?: string;
+    unavailableDates?: Date[];
+    bottomContent?: ReactNode;
+    CustomDatetimePicker?: (props: DatetimePickerProps) => ReactNode;
+}
+export declare const DatetimePickerInput: React.ForwardRefExoticComponent<DatetimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/datetime-picker-input/datetime-picker-input.js

@@ -0,0 +1,85 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatetimePickerInput = exports.BOUNDARY_DATE_FORMAT = exports.DISPLAY_DATETIME_FORMAT = exports.ALLOWED_DATETIME_FORMAT = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const dayjs_1 = __importStar(require("dayjs"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const react_1 = __importStar(require("react"));
+const _input_with_popover_1 = require("../_input-with-popover");
+const datetime_picker_1 = require("../datetime-picker");
+const icon_1 = require("../icon");
+const get_datetime_string_1 = require("./get-datetime-string");
+(0, dayjs_1.extend)(customParseFormat_1.default);
+exports.ALLOWED_DATETIME_FORMAT = [
+    "D. M. YYYY H:mm",
+    "D. M. YYYY HH:mm",
+    "DD. MM. YYYY H:mm",
+    "DD. MM. YYYY HH:mm",
+    "D.M.YYYY H:mm",
+    "D.M.YYYY HH:mm",
+    "DD.MM.YYYY H:mm",
+    "DD.MM.YYYY HH:mm",
+];
+exports.DISPLAY_DATETIME_FORMAT = "D. M. YYYY H:mm";
+exports.BOUNDARY_DATE_FORMAT = "YYYY-MM-DD";
+function getValue(value) {
+    const parsedValue = (0, datetime_picker_1.getStrictParsedDatetime)(value);
+    if (value && parsedValue.isValid()) {
+        return (0, dayjs_1.default)(value).format(exports.DISPLAY_DATETIME_FORMAT);
+    }
+    return value !== null && value !== void 0 ? value : "";
+}
+function getBoundaryDate(value) {
+    const parsedValue = (0, dayjs_1.default)(value, exports.BOUNDARY_DATE_FORMAT, true);
+    if (value && parsedValue.isValid()) {
+        return parsedValue.toDate();
+    }
+    return undefined;
+}
+exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
+    const onChange = props.onChange;
+    const className = (0, cx_1.cx)("uxf-date-time-picker-input", props.className);
+    const onInputChange = (0, react_1.useCallback)((value) => {
+        const parsedValue = (0, dayjs_1.default)(value, exports.ALLOWED_DATETIME_FORMAT, true);
+        if (value !== "" && parsedValue.isValid()) {
+            onChange(parsedValue.toISOString());
+        }
+        else {
+            onChange(value === "" ? null : value);
+        }
+    }, [onChange]);
+    const value = getValue(props.value); // hodnota zobrazená v textinputu (human readable)
+    const parsedMinDate = getBoundaryDate(props.minDate);
+    const parsedMaxDate = getBoundaryDate(props.maxDate);
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: props.placeholder, ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomDatetimePicker) ? (react_1.default.createElement(props.CustomDatetimePicker, { onChange: onChange, onClose: close, value: (0, get_datetime_string_1.getDatetimeString)(props.value) })) : (react_1.default.createElement(datetime_picker_1.DatetimePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onChange, unavailableDates: props.unavailableDates, value: props.value }))));
+});
+exports.DatetimePickerInput.displayName = "UxfUiDatePickerInput";

package/datetime-picker-input/datetime-picker-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/datetime-picker-input/datetime-picker-input.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const datetime_picker_input_stories_1 = require("./datetime-picker-input.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(datetime_picker_input_stories_1.Default, null));

package/datetime-picker-input/datetime-picker-input.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/datetime-picker-input/datetime-picker-input.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importStar(require("react"));
+const icon_1 = require("../icon");
+const action_1 = require("../utils/action");
+const datetime_picker_input_1 = require("./datetime-picker-input");
+function Default() {
+    const [date, setDate] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", setDate);
+    const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test", isClearable: true, label: "Datum a \u010Das \u010Dehokoliv", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test", isClearable: true, label: "Datum a \u010Das \u010Dehokoliv vlastn\u00ED ikona", name: "date", onChange: onChange, triggerElement: react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }), value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum a \u010Das disabled", name: "date-disabled", onChange: onChange, value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum a \u010Das readonly", name: "date-readonly", onChange: onChange, value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum a \u010Das invalid", name: "date-invalid", onChange: onChange, value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-invalid", isClearable: true, label: "min/max-validate", maxDate: "2023-06-26", minDate: "2023-06-13", name: "min/max", onChange: onChange, placeholder: "", value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { bottomContent: react_1.default.createElement("div", null,
+                "Bottom content",
+                react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date })));
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
+}

package/datetime-picker-input/get-datetime-string.d.ts

@@ -0,0 +1,6 @@
+import { DatetimeString } from "@uxf/core/date";
+import { Nullish } from "@uxf/core/types";
+/**
+ * @deprecated tuhle metodu nepoužívat - něco podobného se musí přenést do @uxf/core
+ */
+export declare function getDatetimeString(value: string | Nullish): DatetimeString | null;

package/datetime-picker-input/get-datetime-string.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDatetimeString = getDatetimeString;
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const dayjs_1 = __importDefault(require("dayjs"));
+/**
+ * @deprecated tuhle metodu nepoužívat - něco podobného se musí přenést do @uxf/core
+ */
+function getDatetimeString(value) {
+    if ((0, is_nil_1.isNil)(value)) {
+        return null;
+    }
+    const date = (0, dayjs_1.default)(value, ["YYYY-MM-DD[T]HH:mm:ssZ", "YYYY-MM-DD[T]HH:mm:ss.SSS[Z]"]);
+    return date.isValid() ? date.format("YYYY-MM-DD[T]HH:mm:ssZ") : null;
+}

package/datetime-picker-input/index.d.ts

@@ -0,0 +1,2 @@
+export { ALLOWED_DATETIME_FORMAT, DISPLAY_DATETIME_FORMAT, DatetimePickerInput } from "./datetime-picker-input";
+export type { DatetimePickerInputProps } from "./datetime-picker-input";

package/datetime-picker-input/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatetimePickerInput = exports.DISPLAY_DATETIME_FORMAT = exports.ALLOWED_DATETIME_FORMAT = void 0;
+var datetime_picker_input_1 = require("./datetime-picker-input");
+Object.defineProperty(exports, "ALLOWED_DATETIME_FORMAT", { enumerable: true, get: function () { return datetime_picker_input_1.ALLOWED_DATETIME_FORMAT; } });
+Object.defineProperty(exports, "DISPLAY_DATETIME_FORMAT", { enumerable: true, get: function () { return datetime_picker_input_1.DISPLAY_DATETIME_FORMAT; } });
+Object.defineProperty(exports, "DatetimePickerInput", { enumerable: true, get: function () { return datetime_picker_input_1.DatetimePickerInput; } });

package/dialog/dialog-panel.d.ts

@@ -0,0 +1,12 @@
+import { DialogPanelWidths } from "@uxf/ui/dialog/theme";
+import React, { ReactNode } from "react";
+export type DialogPanelWidth = keyof DialogPanelWidths;
+export interface DialogPanelProps {
+    children?: ReactNode;
+    className?: string;
+    width?: DialogPanelWidth;
+}
+export declare function DialogPanel(props: DialogPanelProps): React.JSX.Element;
+export declare namespace DialogPanel {
+    var displayName: string;
+}

package/dialog/dialog-panel.js

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogPanel = DialogPanel;
+const react_1 = __importDefault(require("react"));
+function DialogPanel(props) {
+    var _a, _b;
+    return (react_1.default.createElement("div", { className: `uxf-dialog__panel uxf-dialog__panel--width-${(_a = props.width) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` }, props.children));
+}
+DialogPanel.displayName = "UxfUiDialogPanel";

package/dialog/dialog.d.ts

@@ -0,0 +1,28 @@
+import { UseFloatingReturn } from "@floating-ui/react";
+import { DialogVariants } from "@uxf/ui/dialog/theme";
+import React, { FC, HTMLProps, ReactNode, Ref } from "react";
+type GetFloatingElementProps = (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+export type DialogVariant = keyof DialogVariants;
+export interface DialogProps {
+    children?: ReactNode;
+    className?: string;
+    context: UseFloatingReturn["context"];
+    isBackdropCloseDisabled?: boolean;
+    forwardedRef: Ref<HTMLDivElement>;
+    getFloatingProps: GetFloatingElementProps;
+    isOpen: boolean;
+    variant?: DialogVariant;
+}
+type DialogProviderProps = Pick<DialogProps, "variant" | "className" | "children">;
+export declare const Dialog: React.NamedExoticComponent<DialogProps>;
+type DialogCloseHandler = () => void;
+export declare function useDialog(dialogConfig?: {
+    onDialogClose?: DialogCloseHandler;
+    isBackdropCloseDisabled?: boolean;
+}): {
+    openDialog: (children: ReactNode) => void;
+    DialogProvider: FC<DialogProviderProps>;
+    closeDialog: DialogCloseHandler;
+    getFloatingElementProps: GetFloatingElementProps;
+};
+export {};