@monolith-forensics/monolith-ui 1.8.1-dev.2 → 1.8.1-dev.4

package/dist/RichTextEditor/RichTextEditor.js

@@ -1,14 +1,226 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { EditorContent, useEditor } from "@tiptap/react";
+import { DOMParser as ProseMirrorDOMParser } from "@tiptap/pm/model";
 import { Toolbar } from "./Toolbar";
 import getTipTapExtensions from "./Extensions/getTiptapExtensions";
-import { Extensions } from "./Enums";
-import { startImageUpload, } from "./Plugins/UploadImagesPlugin";
+import { Extensions, SlashCommands } from "./Enums";
+import { addImagePlaceholder, removeImagePlaceholder, startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
+const getImageFilesFromClipboard = (clipboardData) => {
+    return Array.from(clipboardData.files).filter((file) => file.type.includes("image/"));
+};
+const getImageFilenameFromSource = (src, fallbackIndex, fallbackName) => {
+    if (fallbackName)
+        return fallbackName;
+    try {
+        const url = new URL(src);
+        const filename = url.pathname.split("/").filter(Boolean).pop();
+        if (filename)
+            return filename;
+    }
+    catch (_a) {
+        // Data URLs and blob URLs may not parse to useful filenames.
+    }
+    return `pasted-image-${fallbackIndex + 1}.png`;
+};
+const getMimeExtension = (mimeType) => {
+    var _a;
+    const subtype = (_a = mimeType.split("/")[1]) === null || _a === void 0 ? void 0 : _a.split(";")[0];
+    if (!subtype)
+        return "png";
+    if (subtype === "jpeg")
+        return "jpg";
+    if (subtype === "svg+xml")
+        return "svg";
+    return subtype;
+};
+const ensureImageFilenameExtension = (name, mimeType) => {
+    if (/\.[a-z0-9]+$/i.test(name))
+        return name;
+    return `${name}.${getMimeExtension(mimeType)}`;
+};
+const createHtmlImageMarker = (index) => {
+    return `monolith-image-marker-${Date.now()}-${index}-${Math.random()
+        .toString(36)
+        .slice(2)}`;
+};
+const getHtmlImageSources = (html) => {
+    const document = new DOMParser().parseFromString(html, "text/html");
+    const imageSources = [];
+    Array.from(document.body.querySelectorAll("img[src]")).forEach((image, index) => {
+        const src = image.getAttribute("src");
+        if (!src)
+            return;
+        const marker = createHtmlImageMarker(index);
+        imageSources.push({
+            src,
+            name: getImageFilenameFromSource(src, index, image.getAttribute("title") || image.getAttribute("alt")),
+            marker,
+            placeholderId: marker,
+        });
+        image.replaceWith(document.createTextNode(marker));
+    });
+    return {
+        imageSources,
+        htmlWithImageMarkers: document.body.innerHTML,
+    };
+};
+const htmlHasContent = (html) => {
+    var _a;
+    const document = new DOMParser().parseFromString(html, "text/html");
+    return Boolean(((_a = document.body.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
+        document.body.querySelector("table, ul, ol, blockquote, pre, code, hr, iframe, video, audio"));
+};
+const insertHtmlAtSelection = (view, html) => {
+    const container = window.document.createElement("div");
+    container.innerHTML = html;
+    const slice = ProseMirrorDOMParser.fromSchema(view.state.schema).parseSlice(container);
+    view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+};
+const createImageFileFromSource = (imageSource, index) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const response = yield fetch(imageSource.src);
+    if (!response.ok) {
+        throw new Error(`Unable to fetch pasted image: ${imageSource.src}`);
+    }
+    const blob = yield response.blob();
+    const type = blob.type ||
+        ((_a = imageSource.src.match(/^data:(image\/[^;,]+)/)) === null || _a === void 0 ? void 0 : _a[1]) ||
+        "image/png";
+    return new File([blob], ensureImageFilenameExtension(imageSource.name || `pasted-image-${index + 1}`, type), { type });
+});
+const findTextRange = (view, text) => {
+    let range;
+    view.state.doc.descendants((node, position) => {
+        if (range)
+            return false;
+        if (!node.isText || !node.text)
+            return;
+        const index = node.text.indexOf(text);
+        if (index === -1)
+            return;
+        range = {
+            from: position + index,
+            to: position + index + text.length,
+        };
+        return false;
+    });
+    return range;
+};
+const removeImageMarker = (view, marker) => {
+    const range = findTextRange(view, marker);
+    if (!range)
+        return;
+    view.dispatch(view.state.tr.delete(range.from, range.to));
+    return range.from;
+};
+const getPlaceholderAddPosition = (position) => {
+    return Math.max(position - 1, 0);
+};
+const replaceImageMarkerWithPlaceholder = (view, imageSource) => {
+    const markerPosition = removeImageMarker(view, imageSource.marker);
+    if (markerPosition === undefined)
+        return;
+    addImagePlaceholder({
+        view,
+        id: imageSource.placeholderId,
+        pos: getPlaceholderAddPosition(markerPosition),
+        label: "Processing image...",
+    });
+};
+const replaceImagePlaceholder = (view, placeholderId, src, name) => {
+    var _a;
+    const position = removeImagePlaceholder(view, placeholderId);
+    const imageNode = (_a = view.state.schema.nodes.image) === null || _a === void 0 ? void 0 : _a.create({
+        src,
+        alt: name,
+        title: `Filename: ${name}`,
+    });
+    if (position == null || !imageNode)
+        return false;
+    view.dispatch(view.state.tr.replaceWith(position, position, imageNode).scrollIntoView());
+    return true;
+};
+const uploadImagesFromHtmlSources = (imageSources, view, handleImageUpload, handleImageUrlUpload) => {
+    imageSources.forEach((imageSource, index) => {
+        createImageFileFromSource(imageSource, index)
+            .then((file) => {
+            const uploadPosition = removeImagePlaceholder(view, imageSource.placeholderId);
+            if (uploadPosition == null)
+                return;
+            startImageUpload(file, view, getPlaceholderAddPosition(uploadPosition), handleImageUpload);
+        })
+            .catch((error) => __awaiter(void 0, void 0, void 0, function* () {
+            if (!handleImageUrlUpload) {
+                console.error("Unable to upload pasted HTML image.", error);
+                removeImagePlaceholder(view, imageSource.placeholderId);
+                return;
+            }
+            try {
+                const uploadedSrc = yield handleImageUrlUpload(imageSource);
+                if (uploadedSrc) {
+                    replaceImagePlaceholder(view, imageSource.placeholderId, uploadedSrc, imageSource.name);
+                }
+                else {
+                    removeImagePlaceholder(view, imageSource.placeholderId);
+                }
+            }
+            catch (urlUploadError) {
+                console.error("Unable to upload pasted HTML image URL.", urlUploadError);
+                removeImagePlaceholder(view, imageSource.placeholderId);
+            }
+        }));
+    });
+};
+const handleImagePaste = (view, event, handleImageUpload, handleImageUrlUpload) => {
+    const { clipboardData } = event;
+    if (!clipboardData)
+        return false;
+    const imageFiles = getImageFilesFromClipboard(clipboardData);
+    const html = clipboardData.getData("text/html");
+    const { imageSources, htmlWithImageMarkers } = html
+        ? getHtmlImageSources(html)
+        : { imageSources: [], htmlWithImageMarkers: "" };
+    if (!imageFiles.length && !imageSources.length)
+        return false;
+    event.preventDefault();
+    if (html && htmlHasContent(htmlWithImageMarkers)) {
+        insertHtmlAtSelection(view, htmlWithImageMarkers);
+        imageSources.forEach((imageSource) => {
+            replaceImageMarkerWithPlaceholder(view, imageSource);
+        });
+    }
+    const uploadPosition = view.state.selection.from;
+    if (imageFiles.length) {
+        imageFiles.forEach((file, index) => {
+            var _a;
+            const placeholderId = (_a = imageSources[index]) === null || _a === void 0 ? void 0 : _a.placeholderId;
+            const markerPosition = placeholderId
+                ? removeImagePlaceholder(view, placeholderId)
+                : undefined;
+            startImageUpload(file, view, markerPosition == null
+                ? uploadPosition
+                : getPlaceholderAddPosition(markerPosition), handleImageUpload);
+        });
+        uploadImagesFromHtmlSources(imageSources.slice(imageFiles.length), view, handleImageUpload, handleImageUrlUpload);
+        return true;
+    }
+    uploadImagesFromHtmlSources(imageSources, view, handleImageUpload, handleImageUrlUpload);
+    return true;
+};
 const StyledContent = styled.div `
   position: relative;
   display: flex;
@@ -49,6 +261,7 @@ const StyledContent = styled.div `
   }
 
   .ProseMirror {
+    font-size: 14px;
     font-weight: 400;
     outline: none;
     height: 100%;
@@ -81,37 +294,34 @@ const StyledContent = styled.div `
     }
 
     h1 {
-      font-size: 1.5rem;
+      font-size: 32px;
       line-height: 2rem;
       margin: 0;
     }
     h2 {
-      font-size: 1.25rem;
+      font-size: 28px;
       line-height: 1.75rem;
       margin: 0;
     }
     h3 {
-      font-size: 1.125rem;
+      font-size: 24px;
       line-height: 1.75rem;
       margin: 0;
     }
     h4 {
-      font-size: 1rem;
+      font-size: 20px;
       line-height: 1.5rem;
       margin: 0;
     }
     p {
       margin: 0;
-      font-size: 0.8rem;
       line-height: 1.5rem;
     }
     ul {
       margin: 0;
-      font-size: 0.8rem;
     }
     ol {
       margin: 0;
-      font-size: 0.8rem;
     }
     .editor-link {
       color: ${({ theme }) => theme.palette.primary.main};
@@ -155,6 +365,9 @@ const StyledContent = styled.div `
   .ProseMirror .img-placeholder {
     position: relative;
     width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     &:before {
       content: "";
@@ -177,6 +390,58 @@ const StyledContent = styled.div `
     }
   }
 
+  .ProseMirror .img-placeholder .img-placeholder-label {
+    position: absolute;
+    top: calc(50% + 1.75rem);
+    left: 50%;
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: calc(100% - 1rem);
+    padding: 0.25rem 0.5rem;
+    border-radius: 6px;
+    background-color: ${({ theme }) => theme.palette.background.paper};
+    color: ${({ theme }) => theme.palette.text.secondary};
+    font-size: 0.75rem;
+    line-height: 1rem;
+    text-align: center;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
+  }
+
+  .ProseMirror .img-placeholder.processing {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: auto;
+    min-height: 2rem;
+    padding: 0.35rem 0.65rem;
+    border: 1px dashed ${({ theme }) => theme.palette.divider};
+    border-radius: 6px;
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    color: ${({ theme }) => theme.palette.text.secondary};
+    font-size: 0.75rem;
+    line-height: 1rem;
+    vertical-align: middle;
+
+    .img-placeholder-label {
+      position: static;
+      transform: none;
+      max-width: none;
+      padding: 0;
+      border-radius: 0;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    &:before {
+      position: static;
+      flex: 0 0 auto;
+      width: 0.875rem;
+      height: 0.875rem;
+      border-width: 2px;
+      transform: none;
+    }
+  }
+
   .floating-menu {
     display: flex;
     background-color: #0d0d0d10;
@@ -278,18 +543,28 @@ const StyledContent = styled.div `
     margin: 0 0.125rem;
   }
 `;
-export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, style, }) => {
+export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
+    const isControlled = value !== undefined;
+    const hasImageExtension = extensions.includes(Extensions.Image);
+    const hasSlashCommandExtension = extensions.includes(Extensions.SlashCommand);
+    const hasImageSlashCommand = hasSlashCommandExtension && slashCommands.includes(SlashCommands.Image);
+    const onChangeRef = useRef(onChange);
     const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
-    // check if image extension is included
-    if (extensions === null || extensions === void 0 ? void 0 : extensions.includes(Extensions.Image)) {
-        // Ensure that handleImageUpload is provided
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    if (hasImageSlashCommand && !hasImageExtension) {
+        throw new Error("Extensions.Image is required when using the Image slash command.");
+    }
+    if (hasImageExtension || hasImageSlashCommand) {
         if (!handleImageUpload) {
-            throw new Error("handleImageUpload is required when using the image extension.");
+            throw new Error("handleImageUpload is required when using image uploads.");
         }
     }
     const editor = useEditor({
-        content: defaultValue,
+        content: value !== null && value !== void 0 ? value : defaultValue,
         editable: !readOnly,
+        shouldRerenderOnTransaction: true,
         extensions: getTipTapExtensions({
             extensions,
             slashCommands,
@@ -298,27 +573,12 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
         }),
         editorProps: {
             handlePaste: (view, event) => {
-                if (!handleImageUpload)
+                if (!hasImageExtension || !handleImageUpload)
                     return false;
-                if (!(event === null || event === void 0 ? void 0 : event.clipboardData))
-                    return false;
-                if (event.clipboardData.types.includes("text/html") ||
-                    event.clipboardData.types.includes("text/plain") ||
-                    event.clipboardData.types.includes("text/rtf"))
-                    return false;
-                if (event.clipboardData &&
-                    event.clipboardData.files &&
-                    event.clipboardData.files[0]) {
-                    event.preventDefault();
-                    const file = event.clipboardData.files[0];
-                    const pos = view.state.selection.from;
-                    startImageUpload(file, view, pos, handleImageUpload);
-                    return true;
-                }
-                return false;
+                return handleImagePaste(view, event, handleImageUpload, handleImageUrlUpload);
             },
             handleDrop: (view, event, _slice, moved) => {
-                if (!handleImageUpload)
+                if (!hasImageExtension || !handleImageUpload)
                     return false;
                 if (!moved &&
                     event.dataTransfer &&
@@ -340,9 +600,23 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
             },
         },
         onUpdate: ({ editor }) => {
-            onChange === null || onChange === void 0 ? void 0 : onChange(editor.getHTML());
+            var _a;
+            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, editor.getHTML());
         },
     });
+    useEffect(() => {
+        if (!editor || !isControlled)
+            return;
+        const currentValue = editor.getHTML();
+        if (currentValue !== value) {
+            editor.commands.setContent(value, { emitUpdate: false });
+        }
+    }, [editor, isControlled, value]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setEditable(!readOnly, false);
+    }, [editor, readOnly]);
     useEffect(() => {
         const _ref = editorInstanceRef;
         if (editorInstanceRef) {

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -23,7 +23,11 @@ export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                     return (_jsx(Button, Object.assign({}, item.options, { children: (_a = item === null || item === void 0 ? void 0 : item.options) === null || _a === void 0 ? void 0 : _a.label }), index));
                 }
                 else if (item.type === "menu") {
-                    return (_jsx(DropDownMenu, Object.assign({}, item.options, { children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
+                    return (_jsx(DropDownMenu, Object.assign({ dropDownProps: {
+                            style: {
+                                width: 135,
+                            },
+                        } }, item.options, { children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
                 }
             }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.FONT)) && (_jsx(DropDownMenu, { data: Object.values(Fonts).map((font) => ({
                     label: font,
@@ -31,7 +35,11 @@ export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                     onClick: () => {
                         setFont(font);
                     },
-                })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
+                })), size: "xxs", variant: "outlined", arrow: true, dropDownProps: {
+                    style: {
+                        width: 135,
+                    },
+                }, buttonProps: {
                     title: "Select Font",
                 }, children: (font || Fonts.DEFAULT) })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(DropDownMenu, { data: [
                     {
@@ -60,6 +68,10 @@ export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                                 borderRadius: "3px",
                             } }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
                     title: "Select Color",
+                }, dropDownProps: {
+                    style: {
+                        width: 100,
+                    },
                 }, children: "Color" })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] })] }));
 }) `
   display: flex;

package/dist/SuperDatePicker/SuperDatePicker.constants.d.ts

@@ -0,0 +1,24 @@
+import type { QuickDirection, QuickUnit, SuperDatePickerProps, SuperDatePickerValue } from "./SuperDatePicker.types";
+export declare const DEFAULT_VALUE: SuperDatePickerValue;
+export declare const DEFAULT_ON_CHANGE: NonNullable<SuperDatePickerProps["onChange"]>;
+export declare const DEFAULT_PLACEHOLDER = "Select date/time range";
+export declare const DEFAULT_START_LABEL = "Start";
+export declare const DEFAULT_END_LABEL = "End";
+export declare const DEFAULT_FORMAT: NonNullable<SuperDatePickerProps["format"]>;
+export declare const DEFAULT_SIZE: NonNullable<SuperDatePickerProps["size"]>;
+export declare const DEFAULT_VARIANT: NonNullable<SuperDatePickerProps["variant"]>;
+export declare const DEFAULT_REQUIRED = false;
+export declare const DEFAULT_CLEARABLE = true;
+export declare const DEFAULT_DISABLED = false;
+export declare const DEFAULT_UTC = false;
+export declare const DEFAULT_QUICK_DIRECTION: QuickDirection;
+export declare const DEFAULT_QUICK_AMOUNT = "15";
+export declare const DEFAULT_QUICK_UNIT: QuickUnit;
+export declare const QUICK_UNITS: Array<{
+    label: string;
+    value: QuickUnit;
+}>;
+export declare const QUICK_DIRECTION_OPTIONS: Array<{
+    label: string;
+    value: QuickDirection;
+}>;

package/dist/SuperDatePicker/SuperDatePicker.constants.js

@@ -0,0 +1,30 @@
+export const DEFAULT_VALUE = {
+    start: null,
+    end: null,
+};
+export const DEFAULT_ON_CHANGE = () => { };
+export const DEFAULT_PLACEHOLDER = "Select date/time range";
+export const DEFAULT_START_LABEL = "Start";
+export const DEFAULT_END_LABEL = "End";
+export const DEFAULT_FORMAT = "YYYY-MM-DD HH:mm:ss";
+export const DEFAULT_SIZE = "sm";
+export const DEFAULT_VARIANT = "outlined";
+export const DEFAULT_REQUIRED = false;
+export const DEFAULT_CLEARABLE = true;
+export const DEFAULT_DISABLED = false;
+export const DEFAULT_UTC = false;
+export const DEFAULT_QUICK_DIRECTION = "last";
+export const DEFAULT_QUICK_AMOUNT = "15";
+export const DEFAULT_QUICK_UNIT = "minutes";
+export const QUICK_UNITS = [
+    { label: "Minutes", value: "minutes" },
+    { label: "Hours", value: "hours" },
+    { label: "Days", value: "days" },
+    { label: "Weeks", value: "weeks" },
+    { label: "Months", value: "months" },
+    { label: "Years", value: "years" },
+];
+export const QUICK_DIRECTION_OPTIONS = [
+    { label: "Last", value: "last" },
+    { label: "Next", value: "next" },
+];

package/dist/SuperDatePicker/SuperDatePicker.d.ts

@@ -0,0 +1,3 @@
+import type { SuperDatePickerProps } from "./SuperDatePicker.types";
+declare const SuperDatePicker: import("react").ForwardRefExoticComponent<SuperDatePickerProps & import("react").RefAttributes<HTMLElement>>;
+export default SuperDatePicker;

package/dist/SuperDatePicker/SuperDatePicker.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { FieldLabel } from "..";
+import { ClearButton } from "../core";
+import { DEFAULT_DISABLED, DEFAULT_END_LABEL, DEFAULT_FORMAT, DEFAULT_ON_CHANGE, DEFAULT_PLACEHOLDER, DEFAULT_REQUIRED, DEFAULT_SIZE, DEFAULT_START_LABEL, DEFAULT_UTC, DEFAULT_VALUE, DEFAULT_VARIANT, } from "./SuperDatePicker.constants";
+import useSuperDatePicker from "./useSuperDatePicker";
+import { EndpointPopover, QuickRangePopover, } from "./components";
+import { RangeSeparator, StyledContainer, StyledInput, TriggerActions, } from "./SuperDatePicker.styled";
+const SuperDatePicker = forwardRef(({ className, style, defaultValue = DEFAULT_VALUE, value, onChange = DEFAULT_ON_CHANGE, label, description, placeholder = DEFAULT_PLACEHOLDER, startLabel = DEFAULT_START_LABEL, endLabel = DEFAULT_END_LABEL, format = DEFAULT_FORMAT, size = DEFAULT_SIZE, variant = DEFAULT_VARIANT, required = DEFAULT_REQUIRED, clearable, disabled = DEFAULT_DISABLED, error, width, min, max, timeIntervalMinutes, utc = DEFAULT_UTC, presets, }, ref) => {
+    const isClearable = clearable === true;
+    const picker = useSuperDatePicker({
+        defaultValue,
+        value,
+        onChange,
+        disabled,
+        min,
+        max,
+        utc,
+        presets,
+    });
+    return (_jsxs(StyledContainer, { ref: (node) => {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: className, "$width": width, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInput, { size: size, variant: variant, "$disabled": disabled, "$active": picker.openSegment !== null, "$clearable": isClearable, style: style, children: [_jsx(QuickRangePopover, { opened: picker.openSegment === "quick", disabled: disabled, size: size, commonRangeGroups: picker.commonRangeGroups, quickDirection: picker.quickDirection, quickAmount: picker.quickAmount, quickUnit: picker.quickUnit, onOpenChange: (opened) => picker.handleOpenSegmentChange("quick", opened), onQuickDirectionChange: picker.handleQuickDirectionChange, onQuickAmountChange: picker.handleQuickAmountChange, onQuickAmountSubmit: picker.handleQuickAmountSubmit, onQuickUnitChange: picker.handleQuickUnitChange, onPresetClick: picker.handlePreset }), _jsx(EndpointPopover, { opened: picker.openSegment === "start", disabled: disabled, label: startLabel, value: picker.value.start, onOpenChange: (opened) => picker.handleOpenSegmentChange("start", opened), onInputChange: (next) => picker.handleEndpointChange("start", next), onCalendarChange: (date) => picker.handleCalendarChange("start", date), format: format, size: size, utc: utc, min: min, max: picker.getEndpointMax("start"), timeIntervalMinutes: timeIntervalMinutes }), _jsx(RangeSeparator, { size: size, children: "\u2192" }), _jsx(EndpointPopover, { opened: picker.openSegment === "end", disabled: disabled, label: endLabel, value: picker.value.end, onOpenChange: (opened) => picker.handleOpenSegmentChange("end", opened), onInputChange: (next) => picker.handleEndpointChange("end", next), onCalendarChange: (date) => picker.handleCalendarChange("end", date), format: format, size: size, utc: utc, min: picker.getEndpointMin("end"), max: max, timeIntervalMinutes: timeIntervalMinutes }), _jsx(TriggerActions, { children: isClearable && (picker.value.start || picker.value.end) ? (_jsx(ClearButton, { size: size, onClick: picker.handleClear })) : null })] })] }));
+});
+SuperDatePicker.displayName = "SuperDatePicker";
+export default SuperDatePicker;

package/dist/SuperDatePicker/SuperDatePicker.lib.d.ts

@@ -0,0 +1,17 @@
+import moment from "moment";
+import type { CommonRangeGroupConfig, SuperDatePickerPreset } from "./SuperDatePicker.types";
+export declare const resolveNow: (utc: boolean) => moment.Moment;
+export declare const serializeMoment: (value: moment.Moment, utc: boolean) => string;
+export declare const createRange: (start: moment.Moment, end: moment.Moment, utc: boolean) => {
+    start: string;
+    end: string;
+};
+export declare const makeCommonRange: (utc: boolean, label: string, getRange: (now: moment.Moment) => {
+    start: moment.Moment;
+    end: moment.Moment;
+}) => SuperDatePickerPreset;
+export declare const getDefaultCommonRangeGroups: (utc: boolean) => CommonRangeGroupConfig[];
+export declare const getAdditionalCommonRangeGroups: (utc: boolean) => CommonRangeGroupConfig[];
+export declare const parseRangeMoment: (value: string | null | undefined, utc: boolean) => moment.Moment | null;
+export declare const momentToCalendarDate: (value: string | null | undefined, utc: boolean) => Date | undefined;
+export declare const calendarDateToMoment: (value: Date, utc: boolean) => moment.Moment;