@cwellt_software/cwellt-reactjs-lib 1.1.5 → 1.1.7

package/dist/src/components/control/input/file/CwFileUpload.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+export function CwFileUpload(fileUploadProps) {
+    const [previewURL, setPreviewURL] = useState("");
+    const [error, setError] = useState(null);
+    const [_selectedFileName, setSelectedFileName] = useState("");
+    const [_currentHexContent, setCurrentHexContent] = useState("");
+    useEffect(() => {
+        // If there is hexadecimal preview content, set the Preview URL
+        if (fileUploadProps.file?.Bindata) {
+            setPreviewURL(`data:image/png;base64,${fileUploadProps.file.Bindata}`);
+        }
+    }, [fileUploadProps.file?.Bindata]);
+    const handleFileChange = (event) => {
+        const file = event.target.files?.[0];
+        setSelectedFileName(file?.name ?? "");
+        if (file) {
+            const allowedExts = fileUploadProps.accept.split(',').map(ext => ext.trim().replace('.', '').toLowerCase());
+            const fileExt = file.name.split('.').pop()?.toLowerCase() ?? "";
+            if (!allowedExts.includes(fileExt)) {
+                setError(`Invalid file type. Only ${fileUploadProps.acceptString} files are allowed.`);
+                setPreviewURL("");
+                return;
+            }
+            setError(null);
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                if (typeof reader.result === "string") {
+                    const hexContent = arrayBufferToHex(reader.result);
+                    setCurrentHexContent(hexContent);
+                    setPreviewURL(reader.result);
+                    setCurrentHexContent(arrayBufferToHex(reader.result));
+                    // Call function to store hexadecimal content
+                    fileUploadProps.onSaveHexContent(arrayBufferToHex(reader.result));
+                }
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    // Function to convert the image buffer into hexadecimal content
+    const arrayBufferToHex = (dataUrl) => {
+        // Decodes the base64 of the URL data
+        const base64 = dataUrl.split(",")[1];
+        const binary = atob(base64);
+        let hex = "";
+        for (let i = 0; i < binary.length; i++) {
+            hex += binary.charCodeAt(i).toString(16).padStart(2, "0");
+        }
+        return hex;
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { className: "row", children: [_jsx("input", { className: "cw-button", type: "file", accept: fileUploadProps.accept, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }), previewURL && (_jsx("div", { className: "row", children: _jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) }))] }), error && _jsx("div", { className: "row error", children: error }), _jsx("div", { className: "row", children: _jsxs("label", { children: ["Please note: File/image has to be in ", fileUploadProps.acceptString, " format", fileUploadProps.sizeString && `, ${fileUploadProps.sizeString}`] }) })] }));
+}

package/dist/src/components/control/input/file/CwFileUploadMultiple.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { CwIcon } from '../../../display/graphics/icon/CwIcon';
+import { CwButton } from '../../action/button/CwButton';
+import styles from "./cw-file-upload-multiple.module.css";
+export function CwFileUploadMultiple(fileUploadProps) {
+    const fileInputRef = useRef(null);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const getFileExtension = (filename) => {
+        return filename.split('.').pop()?.toUpperCase() || '';
+    };
+    const validateFile = (file) => {
+        // Validate the size of the file
+        if (fileUploadProps.maxFileSize) {
+            const fileSizeInMB = file.size / (1024 * 1024);
+            if (fileSizeInMB > fileUploadProps.maxFileSize) {
+                return {
+                    isValid: false,
+                    error: `File "${file.name}" is too large. Maximum size allowed is ${fileUploadProps.maxFileSize}MB.`
+                };
+            }
+        }
+        // Validate file type by extension (based in accept)
+        if (fileUploadProps.accept) {
+            const acceptedExtensions = fileUploadProps.accept.split(',').map(ext => ext.trim().toLowerCase());
+            const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
+            const isExtensionValid = acceptedExtensions.some(ext => {
+                if (ext.startsWith('.')) {
+                    return ext === fileExtension;
+                }
+                return false;
+            });
+            if (!isExtensionValid) {
+                return {
+                    isValid: false,
+                    error: `File "${file.name}" has an invalid format. Allowed formats: ${fileUploadProps.accept}`
+                };
+            }
+        }
+        // Validate MIME type if specified
+        if (fileUploadProps.allowedTypes && fileUploadProps.allowedTypes.length > 0) {
+            const isMimeTypeValid = fileUploadProps.allowedTypes.includes(file.type);
+            if (!isMimeTypeValid) {
+                return {
+                    isValid: false,
+                    error: `File "${file.name}" has an invalid MIME type. Allowed types: ${fileUploadProps.allowedTypes.join(', ')}`
+                };
+            }
+        }
+        return { isValid: true };
+    };
+    const processFiles = (files, existingFiles = []) => {
+        const fileArray = Array.from(files);
+        const validFiles = [...existingFiles]; // Start with existing files
+        const errors = [];
+        for (const file of fileArray) {
+            // Check if the file already exists (by name and size)
+            const isDuplicate = existingFiles.some(existingFile => existingFile.name === file.name && existingFile.size === file.size);
+            if (isDuplicate) {
+                errors.push(`File "${file.name}" is already selected.`);
+                continue;
+            }
+            const validation = validateFile(file);
+            if (!validation.isValid) {
+                errors.push(validation.error);
+                continue;
+            }
+            validFiles.push(file);
+        }
+        // Show errors if any
+        if (errors.length > 0) {
+            if (fileUploadProps.onError) {
+                fileUploadProps.onError(errors.join('\n'));
+            }
+            else {
+                console.error(errors.join('\n'));
+                alert(errors.join('\n')); // Fallback if there is no onError
+            }
+        }
+        // If not multiple, only take the first valid file (replace)
+        if (!fileUploadProps.multiple && validFiles.length > 1) {
+            return [validFiles[validFiles.length - 1]]; // Take the last file added
+        }
+        return validFiles;
+    };
+    const updateFileInput = (files) => {
+        // Create FileList with all files
+        const dataTransfer = new DataTransfer();
+        files.forEach(file => dataTransfer.items.add(file));
+        if (fileInputRef.current) {
+            fileInputRef.current.files = dataTransfer.files;
+        }
+        if (fileUploadProps.onSelect) {
+            fileUploadProps.onSelect(dataTransfer.files);
+        }
+    };
+    const handleFileSelect = (event) => {
+        const files = event.target.files;
+        if (files && files.length > 0) {
+            const updatedFiles = processFiles(files, selectedFiles);
+            if (updatedFiles.length > selectedFiles.length || !fileUploadProps.multiple) {
+                setSelectedFiles(updatedFiles);
+                updateFileInput(updatedFiles);
+            }
+            else {
+                // Clear input if no new valid files were added
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
+            }
+        }
+    };
+    const removeFile = (indexToRemove) => {
+        const newFiles = selectedFiles.filter((_, index) => index !== indexToRemove);
+        setSelectedFiles(newFiles);
+        updateFileInput(newFiles);
+    };
+    const removeAllFiles = () => {
+        setSelectedFiles([]);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+        if (fileUploadProps.onSelect) {
+            fileUploadProps.onSelect(null);
+        }
+    };
+    const handleButtonClick = () => {
+        fileInputRef.current?.click();
+    };
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const files = event.dataTransfer.files;
+        if (files && files.length > 0) {
+            const updatedFiles = processFiles(files, selectedFiles);
+            if (updatedFiles.length > selectedFiles.length || !fileUploadProps.multiple) {
+                setSelectedFiles(updatedFiles);
+                updateFileInput(updatedFiles);
+            }
+        }
+    };
+    return (_jsxs("div", { className: `${styles.fileUploadContainer} ${fileUploadProps.className}`, children: [_jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelect, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles.hiddenInput }), selectedFiles.length === 0 ? (_jsxs("div", { className: `${styles.uploadArea} ${fileUploadProps.disabled ? styles.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [_jsx(CwIcon, { iconId: "upload" }), _jsx("p", { className: `${styles.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), _jsxs("p", { className: `${styles.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : (_jsxs("div", { className: styles.filesContainer, children: [_jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [_jsxs("small", { className: styles.filesCount, children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"] }), _jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: "Clear all" })] }), selectedFiles.map((file, index) => (_jsxs("div", { className: styles.fileItem, children: [_jsxs("div", { className: styles.fileIcon, children: [_jsx(CwIcon, { iconId: "page" }), _jsx("span", { className: styles.fileExtension, children: getFileExtension(file.name) })] }), _jsxs("div", { className: styles.fileInfo, children: [_jsx("p", { className: styles.fileName, children: file.name }), _jsxs("p", { className: styles.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), _jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles.smallButton })] }, index))), fileUploadProps.multiple && (_jsx(CwButton, { text: "Add More Files", icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (_jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
+}
+;

package/dist/src/components/control/input/image/CwInputImage.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { CwButton } from "../../../../components/control/action/button/CwButton";
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+export function CwInputImage(props) {
+    const [_uploadedImage, setUploadedImage] = useState(null);
+    const inputRef = useRef(null);
+    const { allowedImageFormats, onChange, ...inputProps } = props;
+    const allowedFormats = allowedImageFormats || ["image/jpeg", "image/png", "image/gif"];
+    const isValidFileType = (type) => allowedFormats.includes(type);
+    const handleFile = (file) => {
+        if (file && isValidFileType(file.type)) {
+            const imgURL = URL.createObjectURL(file);
+            setUploadedImage(imgURL);
+            if (onChange)
+                onChange(imgURL);
+        }
+        else {
+            // Optionally handle unsupported file types
+            if (onChange)
+                onChange(null);
+        }
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        const file = e.dataTransfer.files[0];
+        handleFile(file);
+    };
+    const onPasteButtonClick = async () => {
+        try {
+            const clipboard = navigator.clipboard;
+            const clipboardItems = await clipboard.read();
+            for (const clipboardItem of clipboardItems) {
+                for (const type of clipboardItem.types) {
+                    if (type.startsWith("image/")) {
+                        const blob = await clipboardItem.getType(type);
+                        handleFile(blob);
+                    }
+                }
+            }
+        }
+        catch (err) {
+            console.error("Failed to read clipboard:", err);
+            alert("Failed to read from clipboard. Ensure the app has permission to access clipboard.");
+        }
+    };
+    const handleFileChange = (e) => {
+        const file = e.target.files?.[0];
+        handleFile(file ?? null);
+    };
+    return (_jsxs("div", { className: "cw-input-image", children: [_jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, style: { border: "2px dashed #ccc", padding: "20px", textAlign: "center" }, children: [_jsx("p", { children: "Drop image here" }), _jsxs("small", { children: ["(", allowedFormats.join(", ").replace(/image\//g, ""), ")"] })] }), _jsxs("div", { style: { display: "flex", justifyContent: "center" }, children: [_jsxs(CwButton, { style: { margin: "2px" }, onClick: onPasteButtonClick, children: [_jsx(CwIcon, { iconId: "paste" }), "\u2002Paste"] }), _jsxs(CwButton, { style: { margin: "2px" }, onClick: () => inputRef.current?.click(), children: [_jsx(CwIcon, { iconId: "folder-open" }), "\u2002Browse"] })] }), _jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
+}

package/dist/src/components/control/input/image-area/CwImageArea.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+/**
+ * An image with a selectable rectangle region, useful for cropping or selecting a section of the image
+ * @remarks ```txt
+ * ╭――――――――――――――――――――――――――――――――――――╮
+ * │  +═══════════════════+             │
+ * │  ║     .:::::::.     ║             │
+ * │  ║   .'     ':::     ║             │
+ * │  ║   :        ::.    ║             │
+ * │  ║   :-  --   ' :    ║             │
+ * │  ║   :        ..:    ║             │
+ * │  ║   :.--    .'::;   ║             │
+ * │  ║   ::.__ .'  ':;_  ║             │
+ * │  ║   ::/""".    .' ""║._           │
+ * │  +═══════════════════+  :          │
+ * │     .:::  .'..'          '         │
+ * │    . :'  .         '     ':        │
+ * │    : '  .:        .     . .        │
+ * │    :'   .:        :    .:  "--__   │
+ * │   /'   .::        :   .            │
+ * │  _: . ::::        '   .            │
+ * │.'    '-----------:   .             │
+ * │ :                    '---''--'--   │
+ * │ '--'"""""----------''              │
+ * ╰――――――――――――――――――――――――――――――――――――╯
+ * ```
+ * @example
+ * <CwImageArea src="path/to/image.png" _onSelectionSuccess={img => setImage(img)} />
+ */
+export const CwImageArea = forwardRef((props, ref) => {
+    const { alignProps: alignProps, initialSelectionArea: initialSelectionArea, onSelectionEnd, onSelectionStart, onSelectionSuccess, selectionAreaAttenuation: selectionAreaAttenuation, selectionAreaStyle: selectionAreaStyle, ...imgProps } = props;
+    // Default no-op functions for selection callbacks
+    const onSelectionStartHandler = onSelectionStart || (() => true);
+    const onSelectionEndHandler = onSelectionEnd || (() => true);
+    const onSelectionSuccessHandler = onSelectionSuccess || (() => { });
+    // Ref to the image element and state management hooks
+    const imageRef = useRef(null);
+    const [selectedImage, setSelectedImage] = useState();
+    const [opacity, setOpacity] = useState(selectionAreaAttenuation ?? selectionAreaStyle?.opacity ?? "1.0");
+    // Track drag start position and selected area
+    const [dragStart, setDragStart] = useState(null);
+    const [selectedArea, setSelectedArea] = useState(initialSelectionArea ?? null);
+    // Expose component methods using ref
+    useImperativeHandle(ref, () => ({
+        getSelectedImage: () => selectedImage
+    }));
+    // Handle mouse down event to initiate selection
+    const onMouseDown = useCallback((event) => {
+        const rect = imageRef.current?.getBoundingClientRect();
+        if (rect) {
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            if (onSelectionStartHandler(x, y)) {
+                setDragStart({ x, y });
+            }
+            setSelectedArea(null);
+            setOpacity(selectionAreaStyle?.opacity ?? 1);
+        }
+    }, [onSelectionStartHandler]);
+    // Update selection area as mouse moves
+    const onMouseMove = useCallback((event) => {
+        if (dragStart && imageRef.current) {
+            const rect = imageRef.current.getBoundingClientRect();
+            const currentX = event.clientX - rect.left;
+            const currentY = event.clientY - rect.top;
+            const width = Math.abs(currentX - dragStart.x);
+            const height = Math.abs(currentY - dragStart.y);
+            setSelectedArea(new DOMRect(Math.min(dragStart.x, currentX), Math.min(dragStart.y, currentY), width, height));
+        }
+    }, [dragStart]);
+    // Finalize selection on mouse up
+    const onMouseUp = useCallback(() => {
+        if (selectedArea && imageRef.current) {
+            // Calculate and scale the selected area to the image's natural size
+            const rect = imageRef.current.getBoundingClientRect();
+            const scaleX = imageRef.current.naturalWidth / rect.width;
+            const scaleY = imageRef.current.naturalHeight / rect.height;
+            const scaledArea = new DOMRect(selectedArea.x * scaleX, selectedArea.y * scaleY, selectedArea.width * scaleX, selectedArea.height * scaleY);
+            if (onSelectionEndHandler(scaledArea))
+                createSelectedImage(scaledArea);
+            setOpacity(selectionAreaAttenuation ?? selectionAreaStyle?.opacity ?? 1);
+            setDragStart(null);
+        }
+    }, [selectedArea, onSelectionEndHandler]);
+    // Create an image from the selected area
+    const createSelectedImage = useCallback((scaledArea) => {
+        const canvas = document.createElement("canvas");
+        canvas.width = scaledArea.width;
+        canvas.height = scaledArea.height;
+        const ctx = canvas.getContext("2d");
+        if (imageRef.current && ctx) {
+            ctx.drawImage(imageRef.current, scaledArea.x, scaledArea.y, scaledArea.width, scaledArea.height, 0, 0, canvas.width, canvas.height);
+            const selectedImageURL = canvas.toDataURL("image/png");
+            setSelectedImage(selectedImageURL);
+            onSelectionSuccessHandler(selectedImageURL);
+        }
+    }, [onSelectionSuccessHandler]);
+    // Render the component UI
+    return (_jsx("div", { className: "cw-image-area", children: _jsxs(CwAlign, { position: "relative", ...alignProps, children: [_jsx("img", { ref: imageRef, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onDragStart: e => e.preventDefault(), ...imgProps }), selectedArea && (_jsx("section", { style: {
+                        ...selectionAreaStyle,
+                        height: `${selectedArea.height}px`,
+                        left: `${selectedArea.x}px`,
+                        opacity: opacity,
+                        pointerEvents: "none",
+                        position: "absolute",
+                        top: `${selectedArea.y}px`,
+                        transition: "opacity 0.5s ease-in-out",
+                        width: `${selectedArea.width}px`
+                    } }))] }) }));
+});
+CwImageArea.displayName = "CwImageArea";

package/dist/src/components/control/input/new-dates/CwDatePicker.d.ts

@@ -0,0 +1,42 @@
+import { Matcher } from "react-day-picker";
+import "react-day-picker/dist/style.css";
+import { CwLabelProps } from "../../../../components/display/text/label/CwLabel";
+import { CwAlignProps } from "../../../../components/layout/align/CwAlign";
+export type DateMatcher = Matcher;
+export interface CwDatePickerProps {
+    /** Current selected date */
+    value?: Date;
+    /** Callback when date changes */
+    onChange: (date: Date | undefined) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Array of specific dates to disable */
+    disabledDates?: Date[];
+    /** Function to determine if a date should be disabled */
+    disabledMatcher?: DateMatcher;
+    /** Props for label component */
+    labelProps?: CwLabelProps;
+    /** Props for alignment */
+    alignProps?: CwAlignProps;
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Display format for the input (default: dd/MM/yyyy) */
+    displayFormat?: string;
+    /** Is the input disabled */
+    disabled?: boolean;
+    /** Is the input required */
+    required?: boolean;
+    /** Additional CSS class for container */
+    className?: string;
+    /** Show clear button */
+    showClear?: boolean;
+    /** Pop Up Position */
+    popupPosition?: "left-bottom" | "left-top" | "right-top" | "right-bottom";
+    /** Number of months to display (default: 1) */
+    numberOfMonths?: number;
+    showTodayButton?: boolean;
+}
+export declare function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, labelProps, alignProps, placeholder, displayFormat, disabled, required, className, showClear, popupPosition, numberOfMonths, showTodayButton, }: Readonly<CwDatePickerProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CwDatePicker.d.ts.map

package/dist/src/components/control/input/new-dates/CwDatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwDatePicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/input/new-dates/CwDatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,OAAO,EAAmC,MAAM,kBAAkB,CAAC;AACtF,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAU,YAAY,EAAC,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAU,YAAY,EAAC,MAAM,6CAA6C,CAAC;AAIlF,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC;AAElC,MAAM,WAAW,iBAAiB;IACjC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,iCAAiC;IACjC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAG3C,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,yCAAyC;IACzC,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,yDAAyD;IACzD,eAAe,CAAC,EAAE,WAAW,CAAC;IAG9B,gCAAgC;IAChC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,0BAA0B;IAC1B,UAAU,CAAC,EAAE,YAAY,CAAC;IAG1B,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sBAAsB;IACtB,aAAa,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;IAG1E,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AA+BD,wBAAgB,YAAY,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,aAAa,EACb,eAAe,EACf,UAAU,EACV,UAAU,EACV,WAA6B,EAC7B,aAA4B,EAC5B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAgB,EAChB,aAA6B,EAC7B,cAAkB,EAClB,eAAuB,GACvB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAqS7B"}

package/dist/src/components/control/input/new-dates/CwDateRangePicker.d.ts

@@ -0,0 +1,63 @@
+import { Matcher } from "react-day-picker";
+import { CwLabelProps } from "../../../../components/display/text/label/CwLabel";
+import { CwAlignProps } from "../../../../components/layout/align/CwAlign";
+import { type DateRangePreset } from "./dateRangePresets";
+export type DateMatcher = Matcher;
+export interface DateRangeValue {
+    from: Date | undefined;
+    to: Date | undefined;
+}
+export interface CwDateRangePickerProps {
+    /** Current selected date range */
+    value?: DateRangeValue;
+    /** Callback when date range changes */
+    onChange: (range: DateRangeValue | undefined) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Array of specific dates to disable */
+    disabledDates?: Date[];
+    /** Function to determine if a date should be disabled */
+    disabledMatcher?: DateMatcher;
+    /** Maximum number of days allowed in range (optional) */
+    maxRangeDays?: number;
+    /** Props for label component */
+    labelProps?: CwLabelProps;
+    /** Props for alignment */
+    alignProps?: CwAlignProps;
+    /** Placeholder text for "from" input */
+    placeholderFrom?: string;
+    /** Placeholder text for "to" input */
+    placeholderTo?: string;
+    /** Display format for the inputs (default: dd.MM.yyyy) */
+    displayFormat?: string;
+    /** Is the input disabled */
+    disabled?: boolean;
+    /** Is the input required */
+    required?: boolean;
+    /** Additional CSS class for container */
+    className?: string;
+    /** Show clear buttons */
+    showClear?: boolean;
+    /** Pop Up Position */
+    popupPosition?: "left-bottom" | "left-top" | "right-top" | "right-bottom";
+    /** Number of months to display (default: 2 for ranges) */
+    numberOfMonths?: number;
+    /**
+     * Show preset buttons
+     * @default false
+     */
+    showPresets?: boolean;
+    /**
+     * Keys of presets to display from PRESET_LIBRARY
+     * @example ['thisWeek', 'past7Days', 'past30Days']
+     */
+    presetKeys?: string[];
+    /**
+     * Custom presets to add alongside library presets
+     */
+    customPresets?: DateRangePreset[];
+}
+export declare function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, maxRangeDays, labelProps, alignProps, placeholderFrom, placeholderTo, displayFormat, disabled, required, className, showClear, popupPosition, numberOfMonths, showPresets, presetKeys, customPresets, }: Readonly<CwDateRangePickerProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CwDateRangePicker.d.ts.map

package/dist/src/components/control/input/new-dates/CwDateRangePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/input/new-dates/CwDateRangePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,OAAO,EAAmC,MAAM,kBAAkB,CAAC;AAEjG,OAAO,EAAU,YAAY,EAAC,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAU,YAAY,EAAC,MAAM,6CAA6C,CAAC;AAIlF,OAAO,EAAmB,KAAK,eAAe,EAAC,MAAM,oBAAoB,CAAC;AAE1E,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC;AAElC,MAAM,WAAW,cAAc;IAC9B,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IACvB,EAAE,EAAE,IAAI,GAAG,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACtC,kCAAkC;IAClC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,uCAAuC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAC;IAGtD,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,yCAAyC;IACzC,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,yDAAyD;IACzD,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,gCAAgC;IAChC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,0BAA0B;IAC1B,UAAU,CAAC,EAAE,YAAY,CAAC;IAG1B,wCAAwC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,aAAa,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;IAG1E,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;CAClC;AA8BD,wBAAgB,iBAAiB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,aAAa,EACb,eAAe,EACf,YAAY,EACZ,UAAU,EACV,UAAU,EACV,eAA6B,EAC7B,aAAyB,EACzB,aAA4B,EAC5B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAgB,EAChB,aAA6B,EAC7B,cAAkB,EAClB,WAAmB,EACnB,UAAU,EACV,aAAa,GACb,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CA6clC"}

package/dist/src/components/control/input/new-dates/CwDateTimePicker.d.ts

@@ -0,0 +1,47 @@
+import { CwLabelProps } from "../../../display/text/label/CwLabel";
+import { CwAlignProps } from "../../../layout/align/CwAlign";
+import { DateMatcher } from "./CwDatePicker";
+export interface CwDateTimePickerProps {
+    /** Current selected datetime */
+    value?: Date;
+    /** Callback when datetime changes */
+    onChange: (datetime: Date | undefined) => void;
+    /** Minimum selectable datetime */
+    minDateTime?: Date;
+    /** Maximum selectable datetime */
+    maxDateTime?: Date;
+    /** Array of specific dates to disable */
+    disabledDates?: Date[];
+    /** Function to determine if a date should be disabled */
+    disabledMatcher?: DateMatcher;
+    /** Interval in minutes for time selection (default: 15) */
+    timeInterval?: 5 | 10 | 15 | 30 | 60;
+    /** Minimum selectable time in format "HH:mm" */
+    minTime?: string;
+    /** Maximum selectable time in format "HH:mm" */
+    maxTime?: string;
+    /** Props for label component (applies to the container) */
+    labelProps?: CwLabelProps;
+    /** Props for alignment (applies to the container) */
+    alignProps?: CwAlignProps;
+    /** Placeholder text for date input */
+    datePlaceholder?: string;
+    /** Placeholder text for time input */
+    timePlaceholder?: string;
+    /** Is the input disabled */
+    disabled?: boolean;
+    /** Is the input required */
+    required?: boolean;
+    /** Additional CSS class for container */
+    className?: string;
+    /** Show clear buttons on individual inputs */
+    showClear?: boolean;
+    /** Pop Up Position */
+    popupPosition?: "left-bottom" | "left-top" | "right-top" | "right-bottom";
+    /** Number of months to display in calendar (default: 1) */
+    numberOfMonths?: number;
+    /** Show "Now" button to select current date and time */
+    showNowButton?: boolean;
+}
+export declare function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval, minTime, maxTime, labelProps, alignProps, datePlaceholder, timePlaceholder, disabled, required, className, showClear, popupPosition, numberOfMonths, showNowButton, }: Readonly<CwDateTimePickerProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CwDateTimePicker.d.ts.map

package/dist/src/components/control/input/new-dates/CwDateTimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwDateTimePicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/input/new-dates/CwDateTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,YAAY,EAAC,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAU,YAAY,EAAC,MAAM,+BAA+B,CAAC;AAEpE,OAAO,EAAe,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGzD,MAAM,WAAW,qBAAqB;IACrC,gCAAgC;IAChC,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,qCAAqC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAG/C,kCAAkC;IAClC,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,kCAAkC;IAClC,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,yCAAyC;IACzC,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,yDAAyD;IACzD,eAAe,CAAC,EAAE,WAAW,CAAC;IAG9B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACrC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,qDAAqD;IACrD,UAAU,CAAC,EAAE,YAAY,CAAC;IAG1B,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,aAAa,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;IAG1E,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAiB,EACjB,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,EACV,eAA8B,EAC9B,eAAyB,EACzB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAgB,EAChB,aAA6B,EAC7B,cAAkB,EAClB,aAAqB,GACrB,EAAE,QAAQ,CAAC,qBAAqB,CAAC,2CA6HjC"}

package/dist/src/components/control/input/new-dates/CwDateTimePickerCompact.d.ts

@@ -0,0 +1,46 @@
+import { Matcher } from "react-day-picker";
+import "react-day-picker/dist/style.css";
+import { CwLabelProps } from "../../../display/text/label/CwLabel";
+import { CwAlignProps } from "../../../layout/align/CwAlign";
+export type DateMatcher = Matcher;
+export interface CwDateTimePickerCompactProps {
+    /** Current selected datetime */
+    value?: Date;
+    /** Callback when datetime changes */
+    onChange: (datetime: Date | undefined) => void;
+    /** Minimum selectable datetime */
+    minDateTime?: Date;
+    /** Maximum selectable datetime */
+    maxDateTime?: Date;
+    /** Array of specific dates to disable */
+    disabledDates?: Date[];
+    /** Function to determine if a date should be disabled */
+    disabledMatcher?: DateMatcher;
+    /** Interval in minutes for time selection (default: 15) */
+    timeInterval?: 5 | 10 | 15 | 30 | 60;
+    /** Minimum selectable time in format "HH:mm" */
+    minTime?: string;
+    /** Maximum selectable time in format "HH:mm" */
+    maxTime?: string;
+    /** Props for label component */
+    labelProps?: CwLabelProps;
+    /** Props for alignment */
+    alignProps?: CwAlignProps;
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Is the input disabled */
+    disabled?: boolean;
+    /** Is the input required */
+    required?: boolean;
+    /** Additional CSS class for container */
+    className?: string;
+    /** Show clear button */
+    showClear?: boolean;
+    /** Pop Up Position */
+    popupPosition?: "left-bottom" | "left-top" | "right-top" | "right-bottom";
+    /** Number of months to display (default: 1) */
+    numberOfMonths?: number;
+    showTodayButton?: boolean;
+}
+export declare function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval, minTime, maxTime, labelProps, alignProps, placeholder, disabled, required, className, showClear, popupPosition, numberOfMonths, showTodayButton, }: Readonly<CwDateTimePickerCompactProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CwDateTimePickerCompact.d.ts.map

package/dist/src/components/control/input/new-dates/CwDateTimePickerCompact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwDateTimePickerCompact.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/input/new-dates/CwDateTimePickerCompact.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,OAAO,EAAoC,MAAM,kBAAkB,CAAC;AACxF,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAW,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAW,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAMtE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC;AAElC,MAAM,WAAW,4BAA4B;IAC5C,gCAAgC;IAChC,KAAK,CAAC,EAAE,IAAI,CAAE;IACd,qCAAqC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAG/C,kCAAkC;IAClC,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,kCAAkC;IAClC,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,yCAAyC;IACzC,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,yDAAyD;IACzD,eAAe,CAAC,EAAE,WAAW,CAAC;IAG9B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACrC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,0BAA0B;IAC1B,UAAU,CAAC,EAAE,YAAY,CAAC;IAG1B,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,aAAa,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;IAE1E,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AA8BD,wBAAgB,uBAAuB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAiB,EACjB,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,EACV,WAAgC,EAChC,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAgB,EAChB,aAA6B,EAC7B,cAAkB,EAClB,eAAuB,GACvB,EAAE,QAAQ,CAAC,4BAA4B,CAAC,2CA4YxC"}

package/dist/src/components/control/input/new-dates/CwTimePicker.d.ts

@@ -0,0 +1,38 @@
+import { CwLabelProps } from "../../../../components/display/text/label/CwLabel";
+import { CwAlignProps } from "../../../../components/layout/align/CwAlign";
+export interface CwTimePickerProps {
+    /** Current selected time in format "HH:mm" (24h format) */
+    value?: string;
+    /** Callback when time changes - returns format "HH:mm" */
+    onChange: (time: string | undefined) => void;
+    /** Interval in minutes for time selection (default: 15) */
+    interval?: 5 | 10 | 15 | 30 | 60;
+    /** Minimum selectable time in format "HH:mm" */
+    minTime?: string;
+    /** Maximum selectable time in format "HH:mm" */
+    maxTime?: string;
+    /** Props for label component */
+    labelProps?: CwLabelProps;
+    /** Props for alignment */
+    alignProps?: CwAlignProps;
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Is the input disabled */
+    disabled?: boolean;
+    /** Is the input required */
+    required?: boolean;
+    /** Additional CSS class for container */
+    className?: string;
+    /** Show clear button */
+    showClear?: boolean;
+    /** Pop Up Position */
+    popupPosition?: "left-bottom" | "left-top" | "right-bottom" | "right-top";
+    /**
+     * Use native time input instead of custom picker
+     * Recommended for mobile devices and better accessibility
+     * @default false on desktop, true on mobile
+     */
+    useNative?: boolean;
+}
+export declare function CwTimePicker({ value, onChange, interval, minTime, maxTime, labelProps, alignProps, placeholder, disabled, required, className, showClear, popupPosition, useNative, }: CwTimePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CwTimePicker.d.ts.map

package/dist/src/components/control/input/new-dates/CwTimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwTimePicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/input/new-dates/CwTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,YAAY,EAAC,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAU,YAAY,EAAC,MAAM,6CAA6C,CAAC;AAKlF,MAAM,WAAW,iBAAiB;IACjC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAG7C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACjC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,0BAA0B;IAC1B,UAAU,CAAC,EAAE,YAAY,CAAC;IAG1B,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,aAAa,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,CAAC;IAC1E;;;;OAIG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,wBAAgB,YAAY,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAa,EACb,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,EACV,WAAqB,EACrB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAgB,EAChB,aAA6B,EAC7B,SAA4B,GAC5B,EAAE,iBAAiB,2CAqRnB"}