@codeleap/web 7.0.0 → 7.0.1

package/dist/components/ColorPicker/index.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { useCallback } from 'react';
+import { Button } from '../Button';
+import { Collapse } from '../Collapse';
+import { View } from '../View';
+import { HexColorPicker } from 'react-colorful';
+import { TypeGuards } from '@codeleap/types';
+import { useConditionalState, useState } from '@codeleap/hooks';
+import { useStylesFor } from '../../lib/hooks/useStylesFor';
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry';
+export * from './styles';
+export * from './types';
+const DefaultFooter = (props) => {
+    const { styles, clearIcon, handleClear, confirmIcon, handleConfirmation } = props;
+    return (_jsxs(View, { style: styles.footerWrapper, children: [_jsx(Button, { debugName: 'ColorPicker footer trash', name: clearIcon, onPress: handleClear, style: styles.clearIcon }), _jsx(Button, { debugName: 'ColorPicker footer check', name: confirmIcon, onPress: handleConfirmation, style: styles.confirmIcon })] }));
+};
+/**
+ * Color selection control that wraps any `react-colorful` picker in either an inline (`isPlain`) or collapsible-dropdown layout with optional confirm/clear footer actions.
+ * Internal color state is initialised from `initialColor`; `onConfirm` fires only when the user explicitly confirms (not on every picker drag).
+ * Uses: `Button`, `Collapse`, `View`
+ */
+export const ColorPicker = (props) => {
+    const { isPlain, initialColor, showFooter, icon, style, clearIcon, confirmIcon, onConfirm, onClear, closeOnConfirm, pickerComponent: PickerComponent, openPickerComponent: OpenPickerComponent, footerComponent: FooterComponent, openPickerProps, } = {
+        ...ColorPicker.defaultProps,
+        ...props,
+    };
+    const styles = useStylesFor(ColorPicker.styleRegistryName, style);
+    const [visible, toggle] = useConditionalState(props?.visible, props?.toggle, { initialValue: false });
+    const [color, setColor] = useState(initialColor);
+    const handleConfirmation = useCallback((color) => {
+        onConfirm?.(color);
+        if (closeOnConfirm)
+            toggle(false);
+    }, []);
+    const handleClear = useCallback((initialColor) => {
+        setColor(initialColor);
+        if (TypeGuards.isFunction(onClear))
+            onClear?.();
+    }, []);
+    // Dragging to change the color in any other way does not seem to work for some reason.
+    const picker = _jsx(View, { style: styles.picker, children: _jsx(PickerComponent, { color: color, onChange: setColor }) });
+    const openColorPickerBtn = !!OpenPickerComponent ? (_jsx(OpenPickerComponent, { color: color, visible: visible, toggle: () => toggle(!visible) })) : (_jsx(Button, { onPress: () => toggle(!visible), icon: icon, ...openPickerProps }));
+    return (_jsx(View, { style: styles.wrapper, children: isPlain ? picker : (_jsxs(_Fragment, { children: [openColorPickerBtn, _jsx(Collapse, { open: visible, style: [
+                        styles.dropdown,
+                        visible && styles['dropdown:open'],
+                    ], children: _jsxs(View, { style: styles.dropdownInnerWrapper, children: [picker, showFooter ? (_jsx(FooterComponent, { color: color, handleConfirmation: () => handleConfirmation(color), handleClear: () => handleClear(initialColor), styles: styles, clearIcon: clearIcon, confirmIcon: confirmIcon })) : null] }) })] })) }));
+};
+ColorPicker.styleRegistryName = 'ColorPicker';
+ColorPicker.elements = ['wrapper', 'picker', 'dropdown', 'dropdownInnerWrapper', 'footerWrapper', 'clearIcon', 'confirmIcon'];
+ColorPicker.rootElement = 'wrapper';
+ColorPicker.withVariantTypes = (styles) => {
+    return ColorPicker;
+};
+ColorPicker.defaultProps = {
+    pickerComponent: (props) => _jsx(HexColorPicker, { ...props }),
+    footerComponent: DefaultFooter,
+    icon: 'edit',
+    clearIcon: 'trash',
+    confirmIcon: 'check',
+    showFooter: true,
+    isPlain: false,
+    closeOnConfirm: true,
+};
+WebStyleRegistry.registerComponent(ColorPicker);
+//# sourceMappingURL=index.js.map

package/dist/components/ColorPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/ColorPicker/styles.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.js.map

package/dist/components/ColorPicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/styles.ts"],"names":[],"mappings":""}

package/dist/components/ColorPicker/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/ColorPicker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/types.ts"],"names":[],"mappings":""}

package/dist/components/CropPicker/hooks.js

@@ -0,0 +1,130 @@
+import { useMemo } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { calculateProportionalDimensions, cropImage, readImage } from './utils';
+/**
+ * Manages crop state for a `CropPicker`, including image loading, crop selection with minimum-size enforcement, confirm/cancel handlers, and display-size calculation.
+ * Pass the return value to `CropPicker` via the `handle` prop.
+ */
+export function useCropPicker({ aspect, minWidth: minW, minHeight: minH, file, onCrop, }) {
+    const [image, setImage] = useState(null);
+    const [crop, setCrop] = useState();
+    const [relativeCrop, setRelativeCrop] = useState();
+    const [imageDimensions, setImageDimensions] = useState(null);
+    const cleanup = () => {
+        setRelativeCrop(null);
+        setCrop(undefined);
+        setImageDimensions(null);
+        setTimeout(() => setImage(null), 500);
+    };
+    const handleConfirmCrop = async () => {
+        const [preview, croppedBlob] = await cropImage(image, relativeCrop);
+        const newImage = {
+            file: new File([croppedBlob], 'cropped.jpg', {
+                type: 'image/jpeg',
+                lastModified: Date.now(),
+            }),
+            preview,
+        };
+        onCrop(newImage);
+        setTimeout(() => cleanup());
+    };
+    const handleCancelCrop = () => {
+        onCrop(null);
+        setTimeout(() => cleanup());
+    };
+    const loadFile = useCallback(async (toReadFile) => {
+        const imageData = await readImage(toReadFile);
+        const { naturalWidth, naturalHeight } = imageData;
+        const dimensions = calculateProportionalDimensions(naturalWidth, naturalHeight);
+        setImageDimensions(dimensions);
+        const targetAspect = aspect || dimensions.aspectRatio;
+        const imageAspect = dimensions.aspectRatio;
+        let initialCrop;
+        if (aspect) {
+            const v = imageAspect >= targetAspect
+                ? {
+                    width: ((naturalHeight * targetAspect) / naturalWidth) * 100,
+                    height: 100,
+                }
+                : {
+                    width: 100,
+                    height: (naturalWidth / targetAspect / naturalHeight) * 100,
+                };
+            initialCrop = {
+                ...v,
+                x: (100 - v.width) / 2,
+                y: (100 - v.height) / 2,
+                unit: '%',
+            };
+        }
+        else {
+            initialCrop = {
+                width: 100,
+                height: 100,
+                x: 0,
+                y: 0,
+                unit: '%',
+            };
+        }
+        setCrop(initialCrop);
+        setRelativeCrop(initialCrop);
+        setImage(imageData);
+    }, []);
+    const getMinDimensions = useCallback(() => {
+        if (!imageDimensions)
+            return { minWidth: minW ?? 100, minHeight: minH ?? 100 };
+        const targetAspect = aspect || imageDimensions.aspectRatio;
+        const calculatedMinWidth = (minW ?? 100) * targetAspect;
+        const calculatedMinHeight = minH ?? 100;
+        return {
+            minWidth: Math.max(calculatedMinWidth, 50),
+            minHeight: Math.max(calculatedMinHeight, 50),
+        };
+    }, [aspect, imageDimensions, minW, minH]);
+    const handleCropChange = useCallback((newCrop) => {
+        if (!imageDimensions) {
+            setCrop(newCrop);
+            return;
+        }
+        const { minWidth, minHeight } = getMinDimensions();
+        setCrop({
+            ...newCrop,
+            width: newCrop.width < minWidth ? minWidth : newCrop.width,
+            height: newCrop.height < minHeight ? minHeight : newCrop.height,
+        });
+    }, [imageDimensions, getMinDimensions]);
+    const containerStyles = useMemo(() => {
+        if (!imageDimensions)
+            return {};
+        return {
+            width: imageDimensions.displayWidth,
+            height: imageDimensions.displayHeight,
+            maxWidth: '90vw',
+            maxHeight: '70vh',
+            margin: '0 auto',
+        };
+    }, [imageDimensions]);
+    const imageStyles = useMemo(() => {
+        if (!imageDimensions)
+            return {};
+        return {
+            width: imageDimensions.displayWidth,
+            height: imageDimensions.displayHeight,
+            objectFit: 'contain',
+        };
+    }, [imageDimensions]);
+    useEffect(() => {
+        loadFile(file);
+    }, []);
+    return {
+        containerStyles,
+        imageStyles,
+        handleCropChange,
+        handleConfirmCrop,
+        handleCancelCrop,
+        setRelativeCrop,
+        crop,
+        image,
+    };
+}
+//# sourceMappingURL=hooks.js.map

package/dist/components/CropPicker/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/components/CropPicker/hooks.ts"],"names":[],"mappings":"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"}

package/dist/components/CropPicker/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useCompositionStyles } from '@codeleap/styles';
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry';
+import { useStylesFor } from '../../lib/hooks/useStylesFor';
+import { View } from '../View';
+import { ActivityIndicator } from '../ActivityIndicator';
+import 'react-image-crop/dist/ReactCrop.css';
+const ReactCrop = require('react-image-crop').Component;
+export * from './styles';
+export * from './types';
+export * from './hooks';
+/**
+ * Image crop editor that wraps react-image-crop and delegates all crop state to a `useCropPicker` handle.
+ * Renders a loading spinner while the image is being decoded; renders nothing when `handle` is not provided.
+ */
+export const CropPicker = (props) => {
+    const { style, handle, reactCrop, aspect, children, } = {
+        ...CropPicker.defaultProps,
+        ...props,
+    };
+    const styles = useStylesFor(CropPicker.styleRegistryName, style);
+    const compositionStyles = useCompositionStyles(['indicator'], styles);
+    if (!handle)
+        return null;
+    const { image, crop, setRelativeCrop, handleCropChange, } = handle;
+    return (_jsxs(View, { style: styles.wrapper, children: [!image?.src ? (_jsx(ActivityIndicator, { style: compositionStyles.indicator, debugName: 'CropPickerLoading' })) : (_jsx(ReactCrop, { ...reactCrop, crop: crop, onChange: handleCropChange, onComplete: (_, relCrop) => setRelativeCrop(relCrop), style: styles.crop, aspect: aspect ?? reactCrop?.aspect, children: _jsx("img", { src: image.src, 
+                    // @ts-ignore
+                    css: [styles?.image] }) })), children] }));
+};
+CropPicker.styleRegistryName = 'CropPicker';
+CropPicker.elements = ['crop', 'image', 'wrapper', 'indicator'];
+CropPicker.rootElement = 'crop';
+CropPicker.withVariantTypes = (styles) => {
+    return CropPicker;
+};
+CropPicker.defaultProps = {};
+WebStyleRegistry.registerComponent(CropPicker);
+//# sourceMappingURL=index.js.map

package/dist/components/CropPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CropPicker/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAyC,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAC9F,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAIxD,OAAO,qCAAqC,CAAA;AAC5C,MAAM,SAAS,GAAsB,OAAO,CAAC,kBAAkB,CAAC,CAAC,SAAS,CAAA;AAE1E,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AAEvB;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACnD,MAAM,EACJ,KAAK,EACL,MAAM,EACN,SAAS,EACT,MAAM,EACN,QAAQ,GACT,GAAG;QACF,GAAG,UAAU,CAAC,YAAY;QAC1B,GAAG,KAAK;KACT,CAAA;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAChE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAA;IAErE,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA;IAExB,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,eAAe,EACf,gBAAgB,GACjB,GAAG,MAAM,CAAA;IAEV,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,aACxB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CACb,KAAC,iBAAiB,IAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAC,mBAAmB,GAAG,CACxF,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,OACJ,SAAS,EACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,gBAAgB,EAC1B,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EACpD,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,MAAM,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAEnC,cACE,GAAG,EAAE,KAAK,CAAC,GAAG;oBACd,aAAa;oBACb,GAAG,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,GACpB,GACQ,CACb,EACA,QAAQ,IACJ,CACR,CAAA;AACH,CAAC,CAAA;AAED,UAAU,CAAC,iBAAiB,GAAG,YAAY,CAAA;AAC3C,UAAU,CAAC,QAAQ,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,CAAA;AAC/D,UAAU,CAAC,WAAW,GAAG,MAAM,CAAA;AAC/B,UAAU,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IAC/D,OAAO,UAAmF,CAAA;AAC5F,CAAC,CAAA;AAED,UAAU,CAAC,YAAY,GAAG,EAA8B,CAAA;AAExD,gBAAgB,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA"}

package/dist/components/CropPicker/styles.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.js.map

package/dist/components/CropPicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/CropPicker/styles.ts"],"names":[],"mappings":""}

package/dist/components/CropPicker/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/CropPicker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/CropPicker/types.ts"],"names":[],"mappings":""}

package/dist/components/CropPicker/utils.js

@@ -0,0 +1,70 @@
+/** Reads a `File` or `Blob` as a data-URL and resolves with a loaded `HTMLImageElement`. */
+export function readImage(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const image = new Image();
+            image.onload = () => resolve(image);
+            image.onerror = () => reject(new Error('Failed to load image'));
+            image.src = reader.result;
+        };
+        reader.onerror = () => reject(new Error('Failed to read file'));
+        reader.readAsDataURL(file);
+    });
+}
+/**
+ * Renders the specified percentage-unit `crop` region of `image` onto an off-screen canvas and returns a `[dataURL, Blob]` tuple.
+ * The output blob is always `image/png` at quality 1.
+ */
+export async function cropImage(image, crop) {
+    if (!crop.width || !crop.height) {
+        throw new Error('Invalid crop dimensions');
+    }
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    if (!ctx) {
+        throw new Error('Could not get canvas 2d context');
+    }
+    const scaleX = image.naturalWidth / 100;
+    const scaleY = image.naturalHeight / 100;
+    canvas.width = crop.width * scaleX;
+    canvas.height = crop.height * scaleY;
+    ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
+    try {
+        const blob = await new Promise((resolve, reject) => {
+            canvas.toBlob(blob => blob ? resolve(blob) : reject(new Error('Canvas is empty')), 'image/png', 1);
+        });
+        const croppedImage = await readImage(blob);
+        return [croppedImage.src, blob];
+    }
+    catch (error) {
+        throw new Error(`Failed to crop image: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
+/**
+ * Scales natural image dimensions down to fit within a 600×400 display budget while preserving aspect ratio.
+ * Returns both the original natural dimensions and the calculated display dimensions.
+ */
+export const calculateProportionalDimensions = (naturalWidth, naturalHeight) => {
+    const aspectRatio = naturalWidth / naturalHeight;
+    const maxWidth = 600;
+    const maxHeight = 400;
+    let displayWidth = naturalWidth;
+    let displayHeight = naturalHeight;
+    if (displayHeight > maxHeight) {
+        displayHeight = maxHeight;
+        displayWidth = displayHeight * aspectRatio;
+    }
+    if (displayWidth > maxWidth) {
+        displayWidth = maxWidth;
+        displayHeight = displayWidth / aspectRatio;
+    }
+    return {
+        naturalWidth,
+        naturalHeight,
+        displayWidth: Math.round(displayWidth),
+        displayHeight: Math.round(displayHeight),
+        aspectRatio,
+    };
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/CropPicker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/CropPicker/utils.ts"],"names":[],"mappings":"AAEA,4FAA4F;AAC5F,MAAM,UAAU,SAAS,CAAC,IAAiB;IACzC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAA;QAE/B,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YACnB,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAA;YACzB,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;YACnC,KAAK,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAA;YAC/D,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC,MAAgB,CAAA;QACrC,CAAC,CAAA;QAED,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAA;QAC/D,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC,CAAC,CAAA;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,SAAS,CAC7B,KAAuB,EACvB,IAAU;IAEV,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QAChC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAA;IAC5C,CAAC;IAED,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAA;IAEjE,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAA;IACpD,CAAC;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,GAAG,GAAG,CAAA;IACvC,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,GAAG,GAAG,CAAA;IAExC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;IAClC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;IAEpC,GAAG,CAAC,SAAS,CACX,KAAK,EACL,IAAI,CAAC,CAAC,GAAG,MAAM,EACf,IAAI,CAAC,CAAC,GAAG,MAAM,EACf,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,MAAM,EACb,CAAC,EACD,CAAC,EACD,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,MAAM,CACd,CAAA;IAED,IAAI,CAAC;QACH,MAAM,IAAI,GAAG,MAAM,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACvD,MAAM,CAAC,MAAM,CACX,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,EACnE,WAAW,EACX,CAAC,CACF,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,MAAM,YAAY,GAAG,MAAM,SAAS,CAAC,IAAI,CAAC,CAAA;QAE1C,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IACjC,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,yBAAyB,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;IACpG,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,YAAoB,EAAE,aAAqB,EAAE,EAAE;IAC7F,MAAM,WAAW,GAAG,YAAY,GAAG,aAAa,CAAA;IAEhD,MAAM,QAAQ,GAAG,GAAG,CAAA;IACpB,MAAM,SAAS,GAAG,GAAG,CAAA;IAErB,IAAI,YAAY,GAAG,YAAY,CAAA;IAC/B,IAAI,aAAa,GAAG,aAAa,CAAA;IAEjC,IAAI,aAAa,GAAG,SAAS,EAAE,CAAC;QAC9B,aAAa,GAAG,SAAS,CAAA;QACzB,YAAY,GAAG,aAAa,GAAG,WAAW,CAAA;IAC5C,CAAC;IAED,IAAI,YAAY,GAAG,QAAQ,EAAE,CAAC;QAC5B,YAAY,GAAG,QAAQ,CAAA;QACvB,aAAa,GAAG,YAAY,GAAG,WAAW,CAAA;IAC5C,CAAC;IAED,OAAO;QACL,YAAY;QACZ,aAAa;QACb,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;QACtC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QACxC,WAAW;KACZ,CAAA;AACH,CAAC,CAAA"}

package/dist/components/DatePicker/index.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useRef } from 'react';
+import { Popover } from 'react-aria-components';
+import { CalendarDate, getLocalTimeZone } from '@internationalized/date';
+import { useConditionalState } from '@codeleap/hooks';
+import { fields } from '@codeleap/form';
+import { View } from '../View';
+import { Calendar } from '../Calendar';
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry';
+import { useStylesFor } from '../../lib/hooks/useStylesFor';
+import { useFieldInput } from '../Field';
+export * from './styles';
+export * from './types';
+function dateToCalendarDate(date) {
+    if (!date)
+        return null;
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+}
+function calendarDateToDate(cal) {
+    return cal.toDate(getLocalTimeZone());
+}
+function defaultFormatDate(date) {
+    return date.toLocaleDateString(undefined, { day: '2-digit', month: '2-digit', year: 'numeric' });
+}
+/**
+ * Date selection control that pairs a fully custom trigger element with a `react-aria-components` `Popover` containing a `Calendar`.
+ * Converts native `Date` values to/from `@internationalized/date` `CalendarDate` for the calendar; closes the popover after a date is selected.
+ * Uses: `View`, `Calendar`
+ */
+export function DatePicker(props) {
+    const { value, onValueChange, field, style, defaultValue, renderTrigger, calendarProps, minDate, maxDate, disabled, visible: providedVisible, toggle: providedToggle, formatDate, label, helper, placeholder, forceError, } = { ...DatePicker.defaultProps, ...props };
+    const styles = useStylesFor(DatePicker.styleRegistryName, style);
+    const triggerRef = useRef(null);
+    const [isOpen, setIsOpen] = useConditionalState(providedVisible, providedToggle, { initialValue: false });
+    const { inputValue, onInputValueChange, validation } = useFieldInput(field, fields.date, { value, onValueChange });
+    const hasError = validation?.showError || !!forceError;
+    const errorMessage = validation?.message || forceError;
+    const formattedValue = inputValue ? (formatDate ?? defaultFormatDate)(inputValue) : '';
+    const handleCalendarChange = (date) => {
+        onInputValueChange(calendarDateToDate(date));
+        setIsOpen(false);
+    };
+    return (_jsxs(View, { style: styles.wrapper, children: [renderTrigger?.({
+                ref: triggerRef,
+                value: inputValue ?? null,
+                formattedValue,
+                isOpen,
+                onPress: () => setIsOpen(!isOpen),
+                disabled: !!disabled,
+                style: styles.trigger,
+                label,
+                placeholder,
+                helper,
+                error: hasError ? errorMessage : undefined,
+                hasValue: !!inputValue,
+            }), _jsx(Popover, { triggerRef: triggerRef, isOpen: isOpen, onOpenChange: setIsOpen, css: styles.popover, children: _jsx(Calendar, { value: dateToCalendarDate(inputValue) ?? undefined, onChange: handleCalendarChange, minValue: dateToCalendarDate(minDate) ?? undefined, maxValue: dateToCalendarDate(maxDate) ?? undefined, defaultValue: dateToCalendarDate(defaultValue) ?? undefined, ...calendarProps }) })] }));
+}
+DatePicker.styleRegistryName = 'DatePicker';
+DatePicker.elements = ['wrapper', 'popover', 'trigger'];
+DatePicker.rootElement = 'wrapper';
+DatePicker.withVariantTypes = (styles) => {
+    return DatePicker;
+};
+DatePicker.defaultProps = {
+    minDate: new Date(1910, 0, 1),
+    maxDate: new Date(),
+    disabled: false,
+};
+WebStyleRegistry.registerComponent(DatePicker);
+//# sourceMappingURL=index.js.map

package/dist/components/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/DatePicker/styles.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.js.map

package/dist/components/DatePicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":""}

package/dist/components/DatePicker/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/DatePicker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/DatePicker/types.ts"],"names":[],"mappings":""}

package/dist/components/Drawer/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Modal as RACModal, Dialog } from 'react-aria-components';
+import { ModalContext, useModalContext } from '../Modal/context';
+import { ModalBackdrop, ModalBody, ModalFooter, ModalHeader } from '../Modal/elements';
+import { useStylesFor } from '../../lib/hooks/useStylesFor';
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry';
+export * from './styles';
+export * from './types';
+const DrawerProvider = ({ children, position: _position, ...props }) => {
+    const styles = useStylesFor(Drawer.styleRegistryName, props.style);
+    const close = () => {
+        props.toggle?.();
+        props.onClose?.();
+    };
+    const value = {
+        props,
+        styles: styles,
+        close,
+    };
+    return (_jsx(ModalContext.Provider, { value: value, children: children }));
+};
+const DrawerBox = ({ children, position }) => {
+    const { styles, props } = useModalContext();
+    const resolvedAriaLabel = !props.title ? (props.debugName ?? 'Dialog') : undefined;
+    return (_jsx(RACModal, { css: styles.box, "data-position": position, children: _jsx(Dialog, { "aria-label": resolvedAriaLabel, children: children }) }));
+};
+/**
+ * Side-panel overlay that slides in from a configurable edge of the viewport.
+ * Shares the same dismiss mechanics as `Modal` (backdrop click, Escape key), controlled by `closable` et al.
+ * Uses: `ModalBackdrop`, `ModalBody`, `ModalFooter`, `ModalHeader`
+ */
+export const Drawer = (props) => {
+    const { children, position, ...rest } = { ...Drawer.defaultProps, ...props };
+    return (_jsx(DrawerProvider, { ...rest, position: position, children: _jsx(ModalBackdrop, { children: _jsxs(DrawerBox, { position: position, children: [_jsx(ModalHeader, {}), _jsx(ModalBody, { children: children }), _jsx(ModalFooter, {})] }) }) }));
+};
+Drawer.styleRegistryName = 'Drawer';
+Drawer.elements = ['backdrop', 'box', 'header', 'body', 'footer', 'title', 'description'];
+Drawer.rootElement = 'backdrop';
+Drawer.withVariantTypes = (styles) => {
+    return Drawer;
+};
+Drawer.defaultProps = {
+    position: 'left',
+    closable: true,
+    showClose: false,
+    dismissOnBackdrop: true,
+    closeOnEscape: true,
+};
+WebStyleRegistry.registerComponent(Drawer);
+//# sourceMappingURL=index.js.map

package/dist/components/Drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEtF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAI7D,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AAEvB,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE;IAClF,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IAClE,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,KAAK,CAAC,MAAM,EAAE,EAAE,CAAA;QAChB,KAAK,CAAC,OAAO,EAAE,EAAE,CAAA;IACnB,CAAC,CAAA;IACD,MAAM,KAAK,GAAG;QACZ,KAAK;QACL,MAAM,EAAE,MAAuC;QAC/C,KAAK;KACN,CAAA;IACD,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAChC,QAAQ,GACa,CACzB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAmE,EAAE,EAAE;IAC5G,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAA;IAC3C,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAClF,OAAO,CACL,KAAC,QAAQ,IAAC,GAAG,EAAG,MAAc,CAAC,GAAG,mBAAiB,QAAQ,YACzD,KAAC,MAAM,kBAAa,iBAAiB,YAClC,QAAQ,GACF,GACA,CACZ,CAAA;AACH,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,YAAY,EAAE,GAAG,KAAK,EAAE,CAAA;IAC5E,OAAO,CACL,KAAC,cAAc,OAAK,IAAI,EAAE,QAAQ,EAAE,QAAQ,YAC1C,KAAC,aAAa,cACZ,MAAC,SAAS,IAAC,QAAQ,EAAE,QAAQ,aAC3B,KAAC,WAAW,KAAG,EACf,KAAC,SAAS,cAAE,QAAQ,GAAa,EACjC,KAAC,WAAW,KAAG,IACL,GACE,GACD,CAClB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,iBAAiB,GAAG,QAAQ,CAAA;AACnC,MAAM,CAAC,QAAQ,GAAG,CAAC,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC,CAAA;AACzF,MAAM,CAAC,WAAW,GAAG,UAAU,CAAA;AAE/B,MAAM,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IAC3D,OAAO,MAA2E,CAAA;AACpF,CAAC,CAAA;AAED,MAAM,CAAC,YAAY,GAAG;IACpB,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,KAAK;IAChB,iBAAiB,EAAE,IAAI;IACvB,aAAa,EAAE,IAAI;CACI,CAAA;AAEzB,gBAAgB,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAA"}

package/dist/components/Drawer/styles.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.js.map

package/dist/components/Drawer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Drawer/styles.ts"],"names":[],"mappings":""}

package/dist/components/Drawer/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/Drawer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Drawer/types.ts"],"names":[],"mappings":""}

package/dist/components/Dropzone/context.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { useStylesFor } from '../../lib/hooks/useStylesFor';
+import { useDropzone } from './useDropzone';
+function useDropzoneProvider(props) {
+    const { handle: externalHandle, style, children: _children, extensionProps = {}, ...dropzoneOptions } = props;
+    // Always call the hook — satisfies Rules of Hooks.
+    // When an external handle is provided its result is discarded.
+    const internalHandle = useDropzone(dropzoneOptions);
+    const handle = externalHandle ?? internalHandle;
+    const styles = useStylesFor('Dropzone', style);
+    return {
+        handle,
+        styles: styles,
+        extensionProps,
+    };
+}
+export const DropzoneContext = createContext(null);
+/**
+ * Reads the nearest `Dropzone.Provider` context value.
+ * Throws if called outside a `Dropzone.Provider` tree.
+ */
+export const useDropzoneContext = () => {
+    const ctx = useContext(DropzoneContext);
+    if (!ctx)
+        throw new Error('useDropzoneContext must be used inside Dropzone.Provider');
+    return ctx;
+};
+/**
+ * Wires a `DropzoneHandle` and resolved styles into React context for all
+ * Dropzone sub-components. Accepts either a pre-built `handle` prop (external
+ * control) or raw `UseDropzoneOptions` to have the Provider create a handle
+ * internally.
+ */
+export const DropzoneProvider = (props) => {
+    const value = useDropzoneProvider(props);
+    return (_jsx(DropzoneContext.Provider, { value: value, children: props.children }));
+};
+//# sourceMappingURL=context.js.map

package/dist/components/Dropzone/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/Dropzone/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAIjD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,SAAS,mBAAmB,CAAC,KAA4B;IACvD,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,GAAG,EAA+B,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,CAAA;IAE1I,mDAAmD;IACnD,+DAA+D;IAC/D,MAAM,cAAc,GAAG,WAAW,CAAC,eAAe,CAAC,CAAA;IACnD,MAAM,MAAM,GAAG,cAAc,IAAI,cAAc,CAAA;IAE/C,MAAM,MAAM,GAAG,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA;IAE9C,OAAO;QACL,MAAM;QACN,MAAM,EAAE,MAA0C;QAClD,cAAc;KACf,CAAA;AACH,CAAC;AAID,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAA8B,IAAI,CAAC,CAAA;AAE/E;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAyB,EAAE;IAC3D,MAAM,GAAG,GAAG,UAAU,CAAC,eAAe,CAAC,CAAA;IACvC,IAAI,CAAC,GAAG;QAAE,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAA;IACrF,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;IAC/D,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;IACxC,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACnC,KAAK,CAAC,QAAQ,GACU,CAC5B,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Dropzone/elements.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { View } from '../View';
+import { useDropzoneContext } from './context';
+/**
+ * Droppable zone element. Applies `getRootProps` and `getInputProps` from the
+ * nearest `Dropzone.Provider` handle to a root `View` and a hidden `<input>`.
+ *
+ * Must be rendered inside `Dropzone.Provider`.
+ */
+export const DropzoneWrapper = ({ children }) => {
+    const { handle, styles } = useDropzoneContext();
+    return (_jsxs(View, { ...handle.dropzone.getRootProps(), style: styles.dropzone, children: [children, _jsx("input", { ...handle.dropzone.getInputProps() })] }));
+};
+/**
+ * Overlay rendered on top of `Dropzone.Wrapper` while a file is being dragged
+ * over this specific zone (`isDragActive`). Place it as a child of
+ * `Dropzone.Wrapper` so it inherits the wrapper's positioning context.
+ *
+ * For a page-wide overlay that activates when dragging anywhere on the
+ * document, use `Dropzone.FullscreenOverlay` instead.
+ *
+ * Must be rendered inside `Dropzone.Provider`.
+ */
+export const DropzoneOverlay = ({ children }) => {
+    const { handle, styles } = useDropzoneContext();
+    if (!handle.dropzone.isDragActive)
+        return null;
+    return (_jsx(View, { style: styles.overlay, children: _jsx(View, { style: styles.overlayInner, children: children }) }));
+};
+/**
+ * Full-page overlay rendered via a React portal into `document.body` while
+ * a file is being dragged anywhere on the document (`isDragGlobal`).
+ *
+ * Unlike `Dropzone.Overlay`, this component is not scoped to the wrapper zone —
+ * it activates the moment a drag enters the browser window. Position it with
+ * `position: fixed; inset: 0` in the `overlay` style key.
+ *
+ * Must be rendered inside `Dropzone.Provider`.
+ */
+export const DropzoneFullscreenOverlay = ({ children }) => {
+    const { handle, styles } = useDropzoneContext();
+    if (!handle.dropzone.isDragGlobal)
+        return null;
+    if (typeof document === 'undefined')
+        return null;
+    // Spread getRootProps (minus ref) so drops on the fullscreen overlay are captured by this dropzone.
+    const { ref: _ref, ...rootProps } = handle.dropzone.getRootProps();
+    return createPortal(_jsx(View, { ...rootProps, style: styles.fullscreenOverlay, children: _jsx(View, { style: styles.fullscreenOverlayInner, children: children }) }), document.body);
+};
+//# sourceMappingURL=elements.js.map