@homecode/ui 5.1.9 → 5.1.11

package/dist/esm/src/components/DatePicker/DatePicker.helpers.js

@@ -1,2 +1,33 @@
-function dateToString(e){var t=String(e.month).padStart(2,"0"),r=String(e.day).padStart(2,"0");return e.year+`-${t}-`+r}function stringToDate(e){var[e,t,r]=e.split("-");return{year:Number(e),month:Number(t),day:Number(r)}}function isDateEqual(e,t){return e.year===t.year&&e.month===t.month&&e.day===t.day}function isDateBefore(e,t){return e.year<t.year||e.year===t.year&&e.month<t.month||e.year===t.year&&e.month===t.month&&e.day<t.day}function isDateAfter(e,t){return isDateBefore(t,e)}function isDateBetween(e,t,r){return isDateAfter(e,t)&&isDateBefore(e,r)}export{dateToString,isDateAfter,isDateBefore,isDateBetween,isDateEqual,stringToDate};
-//# sourceMappingURL=DatePicker.helpers.js.map
+function dateToString(date) {
+    const month = String(date.month).padStart(2, '0');
+    const day = String(date.day).padStart(2, '0');
+    return `${date.year}-${month}-${day}`;
+}
+function stringToDate(dateString) {
+    const [year, month, day] = dateString.split('-');
+    return {
+        year: Number(year),
+        month: Number(month),
+        day: Number(day),
+    };
+}
+function isDateEqual(date1, date2) {
+    return (date1.year === date2.year &&
+        date1.month === date2.month &&
+        date1.day === date2.day);
+}
+function isDateBefore(date1, date2) {
+    return (date1.year < date2.year ||
+        (date1.year === date2.year && date1.month < date2.month) ||
+        (date1.year === date2.year &&
+            date1.month === date2.month &&
+            date1.day < date2.day));
+}
+function isDateAfter(date1, date2) {
+    return isDateBefore(date2, date1);
+}
+function isDateBetween(date, startDate, endDate) {
+    return isDateAfter(date, startDate) && isDateBefore(date, endDate);
+}
+
+export { dateToString, isDateAfter, isDateBefore, isDateBetween, isDateEqual, stringToDate };

package/dist/esm/src/components/DatePicker/DatePicker.js

@@ -1,2 +1,47 @@
-import{jsxs,jsx}from"react/jsx-runtime";import{useState,useCallback,createElement}from"react";import cn from"classnames";import{Calendar}from"../Calendar/Calendar.js";import{Button}from"../Button/Button.js";import{dateToString,isDateAfter,stringToDate,isDateBetween,isDateEqual}from"./DatePicker.helpers.js";import S from"./DatePicker.styl.js";function DatePicker(e){const{value:c,onChange:D,size:d,doubleCalendar:a,calendarProps:t={}}=e,m=Array.isArray(c),[u,r]=useState(!1);var n=useCallback(e=>{e=dateToString(e);D(m?[e,c[1]]:e)},[c,D,m]),s=useCallback((a,{className:e,...t})=>{var{day:r,year:n,month:s}=a;const o=dateToString(a);m&&u&&(t.onPointerOver=()=>{var e=isDateAfter(stringToDate(c[0]),a)?[o,c[0]]:[c[0],o];D(e)});var i,l,e=[e,S.day];return m&&(i=stringToDate(c[0]),l=stringToDate(c[1]),isDateBetween(a,i,l)&&e.push(S.between),isDateEqual(a,i)&&e.push(S.start),isDateEqual(a,l))&&e.push(S.end),createElement(Button,{...t,variant:"clear",className:cn(e),size:d,key:n+`-${s}-`+r},r)},[d,u,m,c,D]);return t.className=cn(t.className,S.calendar),jsxs("div",{className:cn(S.root,a&&S.doubleCalendar,e.className),onPointerDown:()=>r(!0),onPointerUp:()=>r(!1),children:[jsx(Calendar,{size:d,hideOtherMonthDays:m,...t,renderDay:s,value:stringToDate(m?c[0]:c),onDayPointerDown:n,onDayPointerUp:void 0}),m&&a&&jsx(Calendar,{size:d,hideOtherMonthDays:m,...t,renderDay:s,value:stringToDate(c[1]),onDayPointerDown:e=>D([c[0],dateToString(e)]),onDayPointerUp:e=>D([c[0],dateToString(e)])})]})}export{DatePicker};
-//# sourceMappingURL=DatePicker.js.map
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, createElement } from 'react';
+import cn from 'classnames';
+import { Calendar } from '../Calendar/Calendar.js';
+import { Button } from '../Button/Button.js';
+import { dateToString, isDateAfter, stringToDate, isDateBetween, isDateEqual } from './DatePicker.helpers.js';
+import S from './DatePicker.styl.js';
+
+function DatePicker(props) {
+    const { value, onChange, size, doubleCalendar, calendarProps = {} } = props;
+    const isRange = Array.isArray(value);
+    const [isPicking, setIsPicking] = useState(false);
+    const onFirstDateChange = useCallback((val) => {
+        const valStr = dateToString(val);
+        onChange(isRange ? [valStr, value[1]] : valStr);
+    }, [value, onChange, isRange]);
+    const onPointerDown = () => setIsPicking(true);
+    const onPointerUp = () => setIsPicking(false);
+    const renderDay = useCallback((val, { className, ...props }) => {
+        const { day, year, month } = val;
+        const valStr = dateToString(val);
+        if (isRange && isPicking) {
+            props.onPointerOver = () => {
+                const newVal = isDateAfter(stringToDate(value[0]), val)
+                    ? [valStr, value[0]]
+                    : [value[0], valStr];
+                onChange(newVal);
+            };
+        }
+        const classes = [className, S.day];
+        if (isRange) {
+            const from = stringToDate(value[0]);
+            const to = stringToDate(value[1]);
+            if (isDateBetween(val, from, to))
+                classes.push(S.between);
+            if (isDateEqual(val, from))
+                classes.push(S.start);
+            if (isDateEqual(val, to))
+                classes.push(S.end);
+        }
+        return (createElement(Button, { ...props, variant: "clear", className: cn(classes), size: size, key: `${year}-${month}-${day}` }, day));
+    }, [size, isPicking, isRange, value, onChange]);
+    calendarProps.className = cn(calendarProps.className, S.calendar);
+    return (jsxs("div", { className: cn(S.root, doubleCalendar && S.doubleCalendar, props.className), onPointerDown: onPointerDown, onPointerUp: onPointerUp, children: [jsx(Calendar, { size: size, hideOtherMonthDays: isRange, ...calendarProps, renderDay: renderDay, value: stringToDate(isRange ? value[0] : value), onDayPointerDown: onFirstDateChange, onDayPointerUp: undefined }), isRange && doubleCalendar && (jsx(Calendar, { size: size, hideOtherMonthDays: isRange, ...calendarProps, renderDay: renderDay, value: stringToDate(value[1]), onDayPointerDown: val => onChange([value[0], dateToString(val)]), onDayPointerUp: val => onChange([value[0], dateToString(val)]) }))] }));
+}
+
+export { DatePicker };

package/dist/esm/src/components/DatePicker/DatePicker.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".DatePicker_root__hh-PP{display:flex;flex-direction:row;gap:var(--p-5)}.DatePicker_calendar__0Fk4N{width:100%}.DatePicker_doubleCalendar__4YbNN .DatePicker_calendar__0Fk4N{width:50%}.DatePicker_day__kGD0i.DatePicker_end__KYPnO,.DatePicker_day__kGD0i.DatePicker_start__qd0rW{background-color:var(--active-color-alpha-500)!important}.DatePicker_day__kGD0i.DatePicker_start__qd0rW{border-bottom-right-radius:0;border-top-right-radius:0}.DatePicker_day__kGD0i.DatePicker_end__KYPnO{border-bottom-left-radius:0;border-top-left-radius:0}.DatePicker_day__kGD0i.DatePicker_between__1Bifb{background-color:var(--active-color-alpha-100);border-radius:0}.DatePicker_day__kGD0i:hover{background-color:var(--accent-color-alpha-100)}",S={root:"DatePicker_root__hh-PP",calendar:"DatePicker_calendar__0Fk4N",doubleCalendar:"DatePicker_doubleCalendar__4YbNN",day:"DatePicker_day__kGD0i",start:"DatePicker_start__qd0rW",end:"DatePicker_end__KYPnO",between:"DatePicker_between__1Bifb"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=DatePicker.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".DatePicker_root__hh-PP{display:flex;flex-direction:row;gap:var(--p-5)}.DatePicker_calendar__0Fk4N{width:100%}.DatePicker_doubleCalendar__4YbNN .DatePicker_calendar__0Fk4N{width:50%}.DatePicker_day__kGD0i.DatePicker_end__KYPnO,.DatePicker_day__kGD0i.DatePicker_start__qd0rW{background-color:var(--active-color-alpha-500)!important}.DatePicker_day__kGD0i.DatePicker_start__qd0rW{border-bottom-right-radius:0;border-top-right-radius:0}.DatePicker_day__kGD0i.DatePicker_end__KYPnO{border-bottom-left-radius:0;border-top-left-radius:0}.DatePicker_day__kGD0i.DatePicker_between__1Bifb{background-color:var(--active-color-alpha-100);border-radius:0}.DatePicker_day__kGD0i:hover{background-color:var(--accent-color-alpha-100)}";
+var S = {"root":"DatePicker_root__hh-PP","calendar":"DatePicker_calendar__0Fk4N","doubleCalendar":"DatePicker_doubleCalendar__4YbNN","day":"DatePicker_day__kGD0i","start":"DatePicker_start__qd0rW","end":"DatePicker_end__KYPnO","between":"DatePicker_between__1Bifb"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/DatePickerInput/DatePickerInput.js

@@ -1,2 +1,44 @@
-import{jsx,jsxs,Fragment}from"react/jsx-runtime";import{useState,useCallback}from"react";import cn from"classnames";import{strToDate}from"../../tools/date.js";import{DateTime}from"../DateTime/DateTime.js";import{DatePicker}from"../DatePicker/DatePicker.js";import{Button}from"../Button/Button.js";import{Popup}from"../Popup/Popup.js";import S from"./DatePickerInput.styl.js";function DatePickerInput(e){const{value:t,onChange:o,variant:a="default",size:r="m",popupProps:s,buttonProps:n,displayFormat:i="MMM Do YYYY"}=e,p=Array.isArray(t),m=void 0!==s?.isOpen,[l,c]=useState(!1);var u=useCallback(e=>{o(e),p||(m||c(!1),s?.onClose?.())},[o,p,m,s]),D=useCallback(()=>{m||c(!1),s?.onClose?.()},[s,m]),j=useCallback(()=>{m||c(!0),s?.onOpen?.()},[s,m]);return jsx(Popup,{size:r,focusControl:!0,direction:"bottom-right",isOpen:m?s.isOpen:l,onOpen:m?s.onOpen:j,onClose:m?s.onClose:D,...s,trigger:jsx(Button,{variant:a,size:r,...n,children:p?jsxs(Fragment,{children:[jsx(DateTime,{value:strToDate(t[0]),format:i})," - ",jsx(DateTime,{value:strToDate(t[1]),format:i})]}):jsx(DateTime,{value:strToDate(t),format:i})}),contentProps:{className:cn(S.popupContent,e.doubleCalendar&&S.doubleCalendar,S["size-"+r],s?.contentProps?.className)},content:jsx(DatePicker,{...e,onChange:u,className:S.content,calendarProps:{className:S.calendar}})})}export{DatePickerInput};
-//# sourceMappingURL=DatePickerInput.js.map
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import cn from 'classnames';
+import { strToDate } from '../../tools/date.js';
+import { DateTime } from '../DateTime/DateTime.js';
+import { DatePicker } from '../DatePicker/DatePicker.js';
+import { Button } from '../Button/Button.js';
+import { Popup } from '../Popup/Popup.js';
+import S from './DatePickerInput.styl.js';
+
+function DatePickerInput(props) {
+    const { value, onChange, variant = 'default', size = 'm', popupProps, buttonProps, displayFormat = 'MMM Do YYYY', } = props;
+    const isRange = Array.isArray(value);
+    const isControlled = popupProps?.isOpen !== undefined;
+    const [isOpen, setIsOpen] = useState(false);
+    const handleChange = useCallback((newValue) => {
+        onChange(newValue);
+        if (!isRange) {
+            if (!isControlled) {
+                setIsOpen(false);
+            }
+            popupProps?.onClose?.();
+        }
+    }, [onChange, isRange, isControlled, popupProps]);
+    const handleClose = useCallback(() => {
+        if (!isControlled) {
+            setIsOpen(false);
+        }
+        popupProps?.onClose?.();
+    }, [popupProps, isControlled]);
+    const handleOpen = useCallback(() => {
+        if (!isControlled) {
+            setIsOpen(true);
+        }
+        popupProps?.onOpen?.();
+    }, [popupProps, isControlled]);
+    return (jsx(Popup, { size: size, focusControl: true, direction: "bottom-right", isOpen: isControlled ? popupProps.isOpen : isOpen, onOpen: isControlled ? popupProps.onOpen : handleOpen, onClose: isControlled ? popupProps.onClose : handleClose, ...popupProps, trigger: 
+        // @ts-ignore
+        jsx(Button, { variant: variant, size: size, ...buttonProps, children: isRange ? (jsxs(Fragment, { children: [jsx(DateTime, { value: strToDate(value[0]), format: displayFormat }), ' - ', jsx(DateTime, { value: strToDate(value[1]), format: displayFormat })] })) : (jsx(DateTime, { value: strToDate(value), format: displayFormat })) }), contentProps: {
+            className: cn(S.popupContent, props.doubleCalendar && S.doubleCalendar, S[`size-${size}`], popupProps?.contentProps?.className),
+        }, content: jsx(DatePicker, { ...props, onChange: handleChange, className: S.content, calendarProps: { className: S.calendar } }) }));
+}
+
+export { DatePickerInput };

package/dist/esm/src/components/DatePickerInput/DatePickerInput.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".DatePickerInput_popupContent__rcVHH{min-width:-moz-fit-content;min-width:fit-content}.DatePickerInput_content__yll-b{padding:.5em}.DatePickerInput_range__xWj9K .DatePickerInput_content__yll-b{display:flex;flex-direction:row;flex-wrap:nowrap;gap:1em}.DatePickerInput_doubleCalendar__H5CMo .DatePickerInput_calendar__vf0za{width:50%}.DatePickerInput_size-xs__ECN6b{border-radius:6px!important}.DatePickerInput_size-xs__ECN6b .DatePickerInput_content__yll-b{min-width:10em;padding:8px}.DatePickerInput_doubleCalendar__H5CMo.DatePickerInput_size-xs__ECN6b .DatePickerInput_content__yll-b{min-width:21em}.DatePickerInput_size-s__5t05o{border-radius:6px!important}.DatePickerInput_size-s__5t05o .DatePickerInput_content__yll-b{min-width:12em;padding:12px}.DatePickerInput_doubleCalendar__H5CMo.DatePickerInput_size-s__5t05o .DatePickerInput_content__yll-b{min-width:25em}.DatePickerInput_size-m__TTkHV{border-radius:9px!important}.DatePickerInput_size-m__TTkHV .DatePickerInput_content__yll-b{min-width:16em;padding:16px}.DatePickerInput_doubleCalendar__H5CMo.DatePickerInput_size-m__TTkHV .DatePickerInput_content__yll-b{min-width:33em}.DatePickerInput_size-l__-fWkE{border-radius:12px!important}.DatePickerInput_size-l__-fWkE .DatePickerInput_content__yll-b{min-width:20em;padding:20px}.DatePickerInput_doubleCalendar__H5CMo.DatePickerInput_size-l__-fWkE .DatePickerInput_content__yll-b{min-width:41em}.DatePickerInput_size-xl__aRXCl{border-radius:15px!important}.DatePickerInput_size-xl__aRXCl .DatePickerInput_content__yll-b{min-width:24em;padding:24px}.DatePickerInput_doubleCalendar__H5CMo.DatePickerInput_size-xl__aRXCl .DatePickerInput_content__yll-b{min-width:49em}",S={popupContent:"DatePickerInput_popupContent__rcVHH",content:"DatePickerInput_content__yll-b",range:"DatePickerInput_range__xWj9K",doubleCalendar:"DatePickerInput_doubleCalendar__H5CMo",calendar:"DatePickerInput_calendar__vf0za","size-xs":"DatePickerInput_size-xs__ECN6b","size-s":"DatePickerInput_size-s__5t05o","size-m":"DatePickerInput_size-m__TTkHV","size-l":"DatePickerInput_size-l__-fWkE","size-xl":"DatePickerInput_size-xl__aRXCl"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=DatePickerInput.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".DatePickerInput_popupContent__rcVHH{min-width:-moz-fit-content;min-width:fit-content}.DatePickerInput_content__yll-b{padding:.5em}.DatePickerInput_range__xWj9K .DatePickerInput_content__yll-b{display:flex;flex-direction:row;flex-wrap:nowrap;gap:1em}.DatePickerInput_doubleCalendar__H5CMo .DatePickerInput_calendar__vf0za{width:50%}.DatePickerInput_size-xs__ECN6b{border-radius:6px!important}.DatePickerInput_size-xs__ECN6b .DatePickerInput_content__yll-b{min-width:10em;padding:8px}.DatePickerInput_doubleCalendar__H5CMo.DatePickerInput_size-xs__ECN6b .DatePickerInput_content__yll-b{min-width:21em}.DatePickerInput_size-s__5t05o{border-radius:6px!important}.DatePickerInput_size-s__5t05o .DatePickerInput_content__yll-b{min-width:12em;padding:12px}.DatePickerInput_doubleCalendar__H5CMo.DatePickerInput_size-s__5t05o .DatePickerInput_content__yll-b{min-width:25em}.DatePickerInput_size-m__TTkHV{border-radius:9px!important}.DatePickerInput_size-m__TTkHV .DatePickerInput_content__yll-b{min-width:16em;padding:16px}.DatePickerInput_doubleCalendar__H5CMo.DatePickerInput_size-m__TTkHV .DatePickerInput_content__yll-b{min-width:33em}.DatePickerInput_size-l__-fWkE{border-radius:12px!important}.DatePickerInput_size-l__-fWkE .DatePickerInput_content__yll-b{min-width:20em;padding:20px}.DatePickerInput_doubleCalendar__H5CMo.DatePickerInput_size-l__-fWkE .DatePickerInput_content__yll-b{min-width:41em}.DatePickerInput_size-xl__aRXCl{border-radius:15px!important}.DatePickerInput_size-xl__aRXCl .DatePickerInput_content__yll-b{min-width:24em;padding:24px}.DatePickerInput_doubleCalendar__H5CMo.DatePickerInput_size-xl__aRXCl .DatePickerInput_content__yll-b{min-width:49em}";
+var S = {"popupContent":"DatePickerInput_popupContent__rcVHH","content":"DatePickerInput_content__yll-b","range":"DatePickerInput_range__xWj9K","doubleCalendar":"DatePickerInput_doubleCalendar__H5CMo","calendar":"DatePickerInput_calendar__vf0za","size-xs":"DatePickerInput_size-xs__ECN6b","size-s":"DatePickerInput_size-s__5t05o","size-m":"DatePickerInput_size-m__TTkHV","size-l":"DatePickerInput_size-l__-fWkE","size-xl":"DatePickerInput_size-xl__aRXCl"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/DateTime/DateTime.js

@@ -1,2 +1,17 @@
-import{jsx,Fragment}from"react/jsx-runtime";import moment from"moment";function formatDate({value:t,format:e,locale:a="en"}){t=moment(t).locale(a);return e?t[e]?t[e]():t.format(e):t.toString()}function DateTime({value:t=new Date,format:e,locale:a}){return jsx(Fragment,{children:formatDate({value:t,format:e,locale:a})})}export{DateTime,formatDate};
-//# sourceMappingURL=DateTime.js.map
+import { jsx, Fragment } from 'react/jsx-runtime';
+import moment from 'moment';
+
+function formatDate({ value, format, locale = 'en' }) {
+    const d = moment(value).locale(locale);
+    if (format) {
+        if (d[format])
+            return d[format]();
+        return d.format(format);
+    }
+    return d.toString();
+}
+function DateTime({ value = new Date(), format, locale }) {
+    return jsx(Fragment, { children: formatDate({ value, format, locale }) });
+}
+
+export { DateTime, formatDate };

package/dist/esm/src/components/Dialogue/Dialogue.js

@@ -1,2 +1,107 @@
-import{jsxs,Fragment,jsx}from"react/jsx-runtime";import cn from"classnames";import{useState,useRef,useId,useEffect}from"react";import{createPortal}from"react-dom";import{Card,CardHeader,CardContent,CardFooter}from"../Card/Card.js";import{Icon}from"../Icon/Icon.js";import{isBrowser}from"../../tools/env.js";import S from"./Dialogue.styl.js";const FOOTER_ALIGN_CLASS={left:S.footerAlignLeft,center:S.footerAlignCenter,right:S.footerAlignRight};function Dialogue({open:a,onOpenChange:s,disabled:e,trigger:t,title:o,subtitle:r,icon:n,content:i,contentClassName:l,footer:c,footerAlignment:d="center",size:u="default",className:m,noScroll:f,maxHeight:g,autoScrollBottom:C,width:p}){const[v,y]=useState(!1),[h,x]=useState(!1),b=useRef(null);var j=useId(),E=useId(),I=(useEffect(()=>{y(!0)},[]),useEffect(()=>{a?(x(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{x(!1)})})):x(!0)},[a]),useEffect(()=>{if(a&&b.current){const e=document.activeElement,t=b.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),o=t[0],r=t[t.length-1],n=((o||b.current).focus(),e=>{"Escape"===e.key?s(!1):"Tab"===e.key&&0<t.length&&(e.shiftKey?document.activeElement===o&&(e.preventDefault(),r?.focus()):document.activeElement===r&&(e.preventDefault(),o?.focus()))});return document.addEventListener("keydown",n),()=>{document.removeEventListener("keydown",n),e?.focus&&e.focus()}}},[a,s]),useEffect(()=>{if(a){const e=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}},[a]),e?void 0:()=>s(!0)),u=jsxs(Fragment,{children:[jsx("div",{className:cn(S.dialogOverlay,a&&!h&&S.isOpen),onClick:e=>{e.target===e.currentTarget&&s(!1)},"aria-hidden":"true"}),jsxs(Card,{ref:b,role:"dialog","aria-modal":"true","aria-labelledby":o?j:void 0,"aria-describedby":r?E:void 0,className:cn(S.dialogContent,S["size-"+u],a&&!h&&S.isOpen,!a&&h&&S.isClosed,m),tabIndex:-1,style:{width:p,maxHeight:g?`min(${String(g)}, calc(100% - var(--p-5)))`:void 0},children:[(o||r||n)&&jsx(CardHeader,{icon:n,title:o,description:r,titleId:j,descriptionId:E}),jsx("button",{className:S.dialogClose,onClick:()=>{s(!1)},"aria-label":"Close dialog",type:"button",children:jsx(Icon,{type:"close",size:"m"})}),i&&jsx(CardContent,{className:l,noScroll:f,autoScrollBottom:C,children:i}),c&&jsx(CardFooter,{className:FOOTER_ALIGN_CLASS[d],children:c})]})]});return jsxs(Fragment,{children:[t&&jsx("div",{onClick:I,children:t}),a&&!e&&v&&isBrowser&&createPortal(u,document.body)]})}export{Dialogue,S as DialogueStyles};
-//# sourceMappingURL=Dialogue.js.map
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useRef, useId, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Card, CardHeader, CardContent, CardFooter } from '../Card/Card.js';
+import { Icon } from '../Icon/Icon.js';
+import { isBrowser } from '../../tools/env.js';
+import S from './Dialogue.styl.js';
+
+const FOOTER_ALIGN_CLASS = {
+    left: S.footerAlignLeft,
+    center: S.footerAlignCenter,
+    right: S.footerAlignRight,
+};
+function Dialogue({ open, onOpenChange, disabled, trigger, title, subtitle, icon, content, contentClassName, footer, footerAlignment = 'center', size = 'default', className, noScroll, maxHeight, autoScrollBottom, width, }) {
+    const [isMounted, setIsMounted] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const dialogRef = useRef(null);
+    const titleId = useId();
+    const descriptionId = useId();
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    useEffect(() => {
+        if (open) {
+            setIsAnimating(true);
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    setIsAnimating(false);
+                });
+            });
+        }
+        else {
+            setIsAnimating(true);
+        }
+    }, [open]);
+    useEffect(() => {
+        if (!open || !dialogRef.current)
+            return;
+        const previousActiveElement = document.activeElement;
+        const focusableElements = dialogRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const firstFocusable = focusableElements[0];
+        const lastFocusable = focusableElements[focusableElements.length - 1];
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
+        else {
+            dialogRef.current.focus();
+        }
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onOpenChange(false);
+                return;
+            }
+            if (e.key === 'Tab' && focusableElements.length > 0) {
+                if (e.shiftKey) {
+                    if (document.activeElement === firstFocusable) {
+                        e.preventDefault();
+                        lastFocusable?.focus();
+                    }
+                }
+                else if (document.activeElement === lastFocusable) {
+                    e.preventDefault();
+                    firstFocusable?.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            if (previousActiveElement?.focus) {
+                previousActiveElement.focus();
+            }
+        };
+    }, [open, onOpenChange]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const originalStyle = window.getComputedStyle(document.body).overflow;
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = originalStyle;
+        };
+    }, [open]);
+    const handleOverlayClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onOpenChange(false);
+        }
+    };
+    const handleCloseClick = () => {
+        onOpenChange(false);
+    };
+    const onTriggerClick = !disabled ? () => onOpenChange(true) : undefined;
+    const dialogueContent = (jsxs(Fragment, { children: [jsx("div", { className: cn(S.dialogOverlay, open && !isAnimating && S.isOpen), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs(Card, { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": subtitle ? descriptionId : undefined, className: cn(S.dialogContent, S[`size-${size}`], open && !isAnimating && S.isOpen, !open && isAnimating && S.isClosed, className), tabIndex: -1, style: {
+                    width,
+                    maxHeight: maxHeight
+                        ? `min(${String(maxHeight)}, calc(100% - var(--p-5)))`
+                        : undefined,
+                }, children: [(title || subtitle || icon) && (jsx(CardHeader, { icon: icon, title: title, description: subtitle, titleId: titleId, descriptionId: descriptionId })), jsx("button", { className: S.dialogClose, onClick: handleCloseClick, "aria-label": "Close dialog", type: "button", children: jsx(Icon, { type: "close", size: "m" }) }), content && (jsx(CardContent, { className: contentClassName, noScroll: noScroll, autoScrollBottom: autoScrollBottom, children: content })), footer && (jsx(CardFooter, { className: FOOTER_ALIGN_CLASS[footerAlignment], children: footer }))] })] }));
+    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open &&
+                !disabled &&
+                isMounted &&
+                isBrowser &&
+                createPortal(dialogueContent, document.body)] }));
+}
+
+export { Dialogue, S as DialogueStyles };

package/dist/esm/src/components/Dialogue/Dialogue.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Dialogue_dialogOverlay__jjBIa{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--decent-color-alpha-900);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:50}.Dialogue_dialogOverlay__jjBIa.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_fadeIn__RSEB2;animation-timing-function:ease-out;opacity:1}.Dialogue_dialogContent__-Lxde{border-radius:var(--border-radius-l);box-shadow:0 10px 20px rgba(0,0,0,.3),0 0 0 2px var(--decent-color-alpha-800);display:flex;flex-direction:column;left:50%;max-height:calc(100% - var(--p-5));opacity:0;position:fixed;top:50%;transform:translateX(-50%) translateY(-50%) scale(.95);transition:opacity .2s ease-out,transform .2s ease-out;width:-moz-fit-content;width:fit-content;z-index:50}.Dialogue_dialogContent__-Lxde.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueIn__M0tLL;animation-timing-function:ease-out;opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}.Dialogue_dialogContent__-Lxde.Dialogue_isClosed__lHYyZ{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueOut__6bLTY;animation-timing-function:ease-in;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-50%) scale(.95)}@media (max-width:700px){.Dialogue_dialogContent__-Lxde{max-width:calc(100% - var(--p-5));width:calc(100% - var(--p-5))}}.Dialogue_size-default__X1sdB{max-width:40rem}.Dialogue_size-login__GyixB{max-width:24rem}.Dialogue_size-wide__HQbiX{max-width:calc(100% - var(--p-5))}@media (min-width:700px){.Dialogue_size-wide__HQbiX{max-width:80rem}}.Dialogue_dialogClose__5q12n{align-items:center;background-color:transparent;border:none;border-radius:var(--border-radius-s);box-shadow:inset 0 0 0 2px none;color:var(--accent-color);cursor:pointer;display:flex;height:2rem;justify-content:center;opacity:.7;position:absolute;right:var(--p-3);top:var(--p-3);transform-origin:center;transition:opacity .2s ease,transform .2s ease;width:2rem;z-index:10}.Dialogue_dialogClose__5q12n:hover{opacity:1;transform:scale(1.1)}.Dialogue_dialogClose__5q12n:focus-visible{box-shadow:0 0 0 2px var(--active-color)}.Dialogue_dialogClose__5q12n:disabled{pointer-events:none}.Dialogue_footerAlignLeft__xQUD8{justify-content:flex-start}.Dialogue_footerAlignCenter__yq9Mu{justify-content:center}.Dialogue_footerAlignRight__Yo7hG{justify-content:flex-end}@keyframes Dialogue_fadeIn__RSEB2{0%{opacity:0}to{opacity:1}}@keyframes Dialogue_dialogueIn__M0tLL{0%{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}@keyframes Dialogue_dialogueOut__6bLTY{0%{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}}",S={dialogOverlay:"Dialogue_dialogOverlay__jjBIa",isOpen:"Dialogue_isOpen__gISMb",fadeIn:"Dialogue_fadeIn__RSEB2",dialogContent:"Dialogue_dialogContent__-Lxde",dialogueIn:"Dialogue_dialogueIn__M0tLL",isClosed:"Dialogue_isClosed__lHYyZ",dialogueOut:"Dialogue_dialogueOut__6bLTY","size-default":"Dialogue_size-default__X1sdB","size-login":"Dialogue_size-login__GyixB","size-wide":"Dialogue_size-wide__HQbiX",dialogClose:"Dialogue_dialogClose__5q12n",footerAlignLeft:"Dialogue_footerAlignLeft__xQUD8",footerAlignCenter:"Dialogue_footerAlignCenter__yq9Mu",footerAlignRight:"Dialogue_footerAlignRight__Yo7hG"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Dialogue.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Dialogue_dialogOverlay__jjBIa{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--decent-color-alpha-900);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:50}.Dialogue_dialogOverlay__jjBIa.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_fadeIn__RSEB2;animation-timing-function:ease-out;opacity:1}.Dialogue_dialogContent__-Lxde{border-radius:var(--border-radius-l);box-shadow:0 10px 20px rgba(0,0,0,.3),0 0 0 2px var(--decent-color-alpha-800);display:flex;flex-direction:column;left:50%;max-height:calc(100% - var(--p-5));opacity:0;position:fixed;top:50%;transform:translateX(-50%) translateY(-50%) scale(.95);transition:opacity .2s ease-out,transform .2s ease-out;width:-moz-fit-content;width:fit-content;z-index:50}.Dialogue_dialogContent__-Lxde.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueIn__M0tLL;animation-timing-function:ease-out;opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}.Dialogue_dialogContent__-Lxde.Dialogue_isClosed__lHYyZ{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueOut__6bLTY;animation-timing-function:ease-in;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-50%) scale(.95)}@media (max-width:700px){.Dialogue_dialogContent__-Lxde{max-width:calc(100% - var(--p-5));width:calc(100% - var(--p-5))}}.Dialogue_size-default__X1sdB{max-width:40rem}.Dialogue_size-login__GyixB{max-width:24rem}.Dialogue_size-wide__HQbiX{max-width:calc(100% - var(--p-5))}@media (min-width:700px){.Dialogue_size-wide__HQbiX{max-width:80rem}}.Dialogue_dialogClose__5q12n{align-items:center;background-color:transparent;border:none;border-radius:var(--border-radius-s);box-shadow:inset 0 0 0 2px none;color:var(--accent-color);cursor:pointer;display:flex;height:2rem;justify-content:center;opacity:.7;position:absolute;right:var(--p-3);top:var(--p-3);transform-origin:center;transition:opacity .2s ease,transform .2s ease;width:2rem;z-index:10}.Dialogue_dialogClose__5q12n:hover{opacity:1;transform:scale(1.1)}.Dialogue_dialogClose__5q12n:focus-visible{box-shadow:0 0 0 2px var(--active-color)}.Dialogue_dialogClose__5q12n:disabled{pointer-events:none}.Dialogue_footerAlignLeft__xQUD8{justify-content:flex-start}.Dialogue_footerAlignCenter__yq9Mu{justify-content:center}.Dialogue_footerAlignRight__Yo7hG{justify-content:flex-end}@keyframes Dialogue_fadeIn__RSEB2{0%{opacity:0}to{opacity:1}}@keyframes Dialogue_dialogueIn__M0tLL{0%{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}@keyframes Dialogue_dialogueOut__6bLTY{0%{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}}";
+var S = {"dialogOverlay":"Dialogue_dialogOverlay__jjBIa","isOpen":"Dialogue_isOpen__gISMb","fadeIn":"Dialogue_fadeIn__RSEB2","dialogContent":"Dialogue_dialogContent__-Lxde","dialogueIn":"Dialogue_dialogueIn__M0tLL","isClosed":"Dialogue_isClosed__lHYyZ","dialogueOut":"Dialogue_dialogueOut__6bLTY","size-default":"Dialogue_size-default__X1sdB","size-login":"Dialogue_size-login__GyixB","size-wide":"Dialogue_size-wide__HQbiX","dialogClose":"Dialogue_dialogClose__5q12n","footerAlignLeft":"Dialogue_footerAlignLeft__xQUD8","footerAlignCenter":"Dialogue_footerAlignCenter__yq9Mu","footerAlignRight":"Dialogue_footerAlignRight__Yo7hG"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Draggable/Draggable.js

@@ -1,2 +1,147 @@
-import{jsxs,jsx}from"react/jsx-runtime";import"nanoid";import"../../tools/dom.js";import throttle from"../../tools/throttle.js";import Time from"timen";import"compareq";import"lodash.pick";import"../../tools/queryParams.js";import{Component}from"react";import S from"./Draggable.styl.js";import cn from"classnames";import{createStore}from"justorm/react";class Draggable extends Component{store;startPos=null;draggingElem=null;draggingElemBounds=null;dragStartFired=!1;timers=Time.create();constructor(t){super(t),this.store=createStore(this,{draggingId:null,underId:null,underOffset:""})}componentDidUpdate(t){t.items.join(",")!==this.props.items.join(",")&&this.dropUnder(),t.disabled!==this.props.disabled&&(this.dropUnder(),this.props.disabled)&&this.unsubscribeMoveUp()}componentWillUnmount(){this.timers.clear()}subscribeMoveUp=()=>{document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)};unsubscribeMoveUp=()=>{document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)};onPointerDown=t=>{var{clientX:e,clientY:r,currentTarget:s}=t;t.stopPropagation(),this.timers.clear(),this.startPos={x:e,y:r},this.draggingElem=s,this.draggingElemBounds=s.getBoundingClientRect(),this.subscribeMoveUp()};onPointerMove=t=>{var e,r,s;this.draggingElem&&!this.props.disabled&&({clientX:t,clientY:e}=t,this.store.draggingId||(this.store.draggingId=this.draggingElem.dataset.id),this.dragStartFired||(this.dragStartFired=!0,this.props.onDragStart?.(this.store.draggingId)),r=t-this.startPos.x,s=e-this.startPos.y,this.transformInner(this.draggingElem,`translate(${r}px, ${s}px)`),this.checkUnderElem(t,e))};checkUnderElem=throttle((t,e)=>{var r,s,i,t=document.elementFromPoint(t,e)?.closest("."+S.item);t?(e=t.dataset.id,{draggingId:r,underId:s}=this.store,this.startPos&&e!==r&&e!==s&&({x:r,y:s}=this.draggingElemBounds,{x:t,y:i}=this.selectInner(t).getBoundingClientRect(),this.store.underOffset=`translate(${r-t}px, ${s-i}px)`,this.store.underId=e)):(this.store.underOffset="",this.store.underId=null)},100);onPointerOut=({target:t})=>{var e=t.dataset["id"];e&&e!==this.store.draggingId&&(this.transformInner(t,null),this.dropUnder())};onPointerUp=t=>{const{underId:e,draggingId:r}=this.store,{onChange:s,onDragEnd:i}=this.props;var n,o,d=this.draggingElem.dataset["id"];r&&(t.stopPropagation(),t.preventDefault()),this.unsubscribeMoveUp(),this.dragStartFired=!1,this.startPos=null,this.store.draggingId=null,e&&s&&(n=(t=[...this.props.items]).indexOf(d),o=t.indexOf(e),t[o]=d,t[n]=e,s(t)),this.dropUnder(),this.timers.after(100,()=>{this.draggingElem&&(this.selectInner(this.draggingElem).style.transform=null,this.draggingElem=null),i?.(r)})};selectInner=t=>t.querySelector("& > div");transformInner(t,e){t&&(this.selectInner(t).style.transform=e)}dropUnder(){this.store.underId=null,this.store.underOffset=null}render(){const{items:t,className:e,itemClassName:r,renderItem:s,children:i,disabled:n}=this.props,{draggingId:o,underId:d,underOffset:a}=this.store;return jsxs("div",{className:cn(S.root,o&&S.isDragging,e),children:[t.map((t,e)=>jsx("div",{"data-id":t,className:cn(S.item,r,t===o&&S.active),onPointerDown:n?void 0:this.onPointerDown,children:jsx("div",{className:S.inner,style:d===t?{transform:a}:null,children:s(t,e,t===o)})},t)),i]})}}export{Draggable};
-//# sourceMappingURL=Draggable.js.map
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'nanoid';
+import '../../tools/dom.js';
+import throttle from '../../tools/throttle.js';
+import Time from 'timen';
+import 'compareq';
+import 'lodash.pick';
+import '../../tools/queryParams.js';
+import { Component } from 'react';
+import S from './Draggable.styl.js';
+import cn from 'classnames';
+import { createStore } from 'justorm/react';
+
+class Draggable extends Component {
+    store;
+    startPos = null;
+    draggingElem = null;
+    draggingElemBounds = null;
+    dragStartFired = false;
+    timers = Time.create();
+    constructor(props) {
+        super(props);
+        this.store = createStore(this, {
+            draggingId: null,
+            underId: null,
+            underOffset: '',
+        });
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.items.join(',') !== this.props.items.join(',')) {
+            this.dropUnder();
+        }
+        if (prevProps.disabled !== this.props.disabled) {
+            this.dropUnder();
+            if (this.props.disabled)
+                this.unsubscribeMoveUp();
+        }
+    }
+    componentWillUnmount() {
+        this.timers.clear();
+    }
+    subscribeMoveUp = () => {
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+    };
+    unsubscribeMoveUp = () => {
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+    };
+    onPointerDown = e => {
+        const { clientX: x, clientY: y, currentTarget } = e;
+        e.stopPropagation();
+        this.timers.clear();
+        this.startPos = { x, y };
+        this.draggingElem = currentTarget;
+        this.draggingElemBounds = currentTarget.getBoundingClientRect();
+        this.subscribeMoveUp();
+    };
+    onPointerMove = e => {
+        if (!this.draggingElem || this.props.disabled)
+            return;
+        const { clientX: x, clientY: y } = e;
+        if (!this.store.draggingId) {
+            this.store.draggingId = this.draggingElem.dataset.id;
+        }
+        if (!this.dragStartFired) {
+            this.dragStartFired = true;
+            this.props.onDragStart?.(this.store.draggingId);
+        }
+        const dx = x - this.startPos.x;
+        const dy = y - this.startPos.y;
+        this.transformInner(this.draggingElem, `translate(${dx}px, ${dy}px)`);
+        this.checkUnderElem(x, y);
+    };
+    checkUnderElem = throttle((x, y) => {
+        const underItem = document.elementFromPoint(x, y)?.closest(`.${S.item}`);
+        if (!underItem) {
+            this.store.underOffset = '';
+            this.store.underId = null;
+            return;
+        }
+        // @ts-ignore
+        const { id } = underItem.dataset;
+        const { draggingId, underId } = this.store;
+        if (!this.startPos || id === draggingId || id === underId)
+            return;
+        const { x: x1, y: y1 } = this.draggingElemBounds;
+        const { x: x2, y: y2 } = this.selectInner(underItem).getBoundingClientRect();
+        const dx = x1 - x2;
+        const dy = y1 - y2;
+        this.store.underOffset = `translate(${dx}px, ${dy}px)`;
+        this.store.underId = id;
+    }, 100);
+    onPointerOut = ({ target }) => {
+        const { id } = target.dataset;
+        if (!id || id === this.store.draggingId)
+            return;
+        this.transformInner(target, null);
+        this.dropUnder();
+    };
+    onPointerUp = e => {
+        const { underId, draggingId } = this.store;
+        const { onChange, onDragEnd } = this.props;
+        const { id } = this.draggingElem.dataset;
+        if (draggingId) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        this.unsubscribeMoveUp();
+        this.dragStartFired = false;
+        this.startPos = null;
+        this.store.draggingId = null;
+        if (underId && onChange) {
+            const newItems = [...this.props.items];
+            const draggingIndex = newItems.indexOf(id);
+            const underIndex = newItems.indexOf(underId);
+            newItems[underIndex] = id;
+            newItems[draggingIndex] = underId;
+            onChange(newItems);
+        }
+        this.dropUnder();
+        this.timers.after(100, () => {
+            if (this.draggingElem) {
+                this.selectInner(this.draggingElem).style.transform = null;
+                this.draggingElem = null;
+            }
+            onDragEnd?.(draggingId);
+        });
+    };
+    selectInner = elem => elem.querySelector('& > div');
+    transformInner(elem, str) {
+        if (!elem)
+            return;
+        this.selectInner(elem).style.transform = str;
+    }
+    dropUnder() {
+        this.store.underId = null;
+        this.store.underOffset = null;
+    }
+    render() {
+        const { items, className, itemClassName, renderItem, children, disabled } = this.props;
+        const { draggingId, underId, underOffset } = this.store;
+        return (jsxs("div", { className: cn(S.root, draggingId && S.isDragging, className), children: [items.map((id, index) => (jsx("div", { "data-id": id, className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: disabled ? undefined : this.onPointerDown, children: jsx("div", { className: S.inner, style: underId === id ? { transform: underOffset } : null, children: renderItem(id, index, id === draggingId) }) }, id))), children] }));
+    }
+}
+
+export { Draggable };

package/dist/esm/src/components/Draggable/Draggable.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Draggable_root__S1BgI{display:flex;flex-wrap:wrap;position:relative;touch-action:none}.Draggable_item__Z1pXk{display:flex}.Draggable_inner__c4syM{height:100%;transition:transform .2s ease-out;width:100%}.Draggable_isDragging__YTPu5 .Draggable_inner__c4syM{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Draggable_isDragging__YTPu5 .Draggable_active__XcFM3{pointer-events:none}.Draggable_isDragging__YTPu5 .Draggable_active__XcFM3 .Draggable_inner__c4syM{transition-duration:0s;z-index:1}",S={root:"Draggable_root__S1BgI",item:"Draggable_item__Z1pXk",inner:"Draggable_inner__c4syM",isDragging:"Draggable_isDragging__YTPu5",active:"Draggable_active__XcFM3"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Draggable.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Draggable_root__S1BgI{display:flex;flex-wrap:wrap;position:relative;touch-action:none}.Draggable_item__Z1pXk{display:flex}.Draggable_inner__c4syM{height:100%;transition:transform .2s ease-out;width:100%}.Draggable_isDragging__YTPu5 .Draggable_inner__c4syM{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Draggable_isDragging__YTPu5 .Draggable_active__XcFM3{pointer-events:none}.Draggable_isDragging__YTPu5 .Draggable_active__XcFM3 .Draggable_inner__c4syM{transition-duration:0s;z-index:1}";
+var S = {"root":"Draggable_root__S1BgI","item":"Draggable_item__Z1pXk","inner":"Draggable_inner__c4syM","isDragging":"Draggable_isDragging__YTPu5","active":"Draggable_active__XcFM3"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/DropZone/DropZone.js

@@ -1,2 +1,112 @@
-import{jsxs,jsx}from"react/jsx-runtime";import{useState,useRef,useCallback,useEffect}from"react";import cn from"classnames";import{generateUID}from"../../tools/uid.js";import S from"./DropZone.styl.js";function matchesAcceptPart(e,t){var r,t=t.trim().toLowerCase();return!!t&&(t.startsWith(".")?e.name.toLowerCase().endsWith(t):!!t.includes("/")&&(e=e.type.toLowerCase(),t.endsWith("/*")?(r=t.slice(0,-1),e.startsWith(r)):e===t))}function matchesAccept(t,e){var e=e.trim();return!e||0===(e=e.split(",").map(e=>e.trim()).filter(Boolean)).length||e.some(e=>matchesAcceptPart(t,e))}function DropZone(r){const{accept:a,label:e,error:t,disabled:s=!1,ghost:l=!1,id:n,className:o}=r,[i,c]=useState(!1),m=useRef(null);var d=useRef(generateUID()),d=n??d.current,u=useCallback(e=>{e.preventDefault(),c(!1),s||(e=Array.from(e.dataTransfer.files).filter(e=>matchesAccept(e,a)),!0===r.multiple?0<e.length&&r.onFiles(e):(e=e[0])&&r.onFile(e))},[a,s,r]),p=useCallback(e=>{var t;s||(t=e.target.files)?.length&&(t=Array.from(t).filter(e=>matchesAccept(e,a)),!0===r.multiple?0<t.length&&r.onFiles(t):(t=t[0])&&r.onFile(t),e.target.value="")},[a,s,r]),f=(useEffect(()=>{const t=m.current?.closest('[role="dialog"]')||document.body,e=e=>{e.preventDefault(),c(!0)},r=e=>{e.relatedTarget&&t.contains(e.relatedTarget)||c(!1)},a=()=>{c(!1)};return t.addEventListener("dragover",e),t.addEventListener("dragleave",r),t.addEventListener("drop",a),()=>{t.removeEventListener("dragover",e),t.removeEventListener("dragleave",r),t.removeEventListener("drop",a)}},[]),!l||i),v=!0===r.multiple;return jsxs("div",{className:cn(S.root,o),children:[f&&jsxs("div",{ref:m,className:cn(S.dropArea,i&&S.isDragging,s&&S.disabled),onDrop:u,children:[jsx("input",{type:"file",accept:a,multiple:v,onChange:p,className:S.fileInput,id:d,disabled:s}),jsx("label",{htmlFor:d,className:S.label,style:{cursor:s?"not-allowed":"pointer"},children:e})]}),t&&jsx("div",{className:S.error,children:t})]})}export{DropZone};
-//# sourceMappingURL=DropZone.js.map
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { generateUID } from '../../tools/uid.js';
+import S from './DropZone.styl.js';
+
+function matchesAcceptPart(file, part) {
+    const p = part.trim().toLowerCase();
+    if (!p)
+        return false;
+    if (p.startsWith('.')) {
+        return file.name.toLowerCase().endsWith(p);
+    }
+    if (p.includes('/')) {
+        const t = file.type.toLowerCase();
+        if (p.endsWith('/*')) {
+            const prefix = p.slice(0, -1);
+            return t.startsWith(prefix);
+        }
+        return t === p;
+    }
+    return false;
+}
+function matchesAccept(file, accept) {
+    const trimmed = accept.trim();
+    if (!trimmed)
+        return true;
+    const parts = trimmed
+        .split(',')
+        .map(s => s.trim())
+        .filter(Boolean);
+    if (parts.length === 0)
+        return true;
+    return parts.some(part => matchesAcceptPart(file, part));
+}
+function DropZone(props) {
+    const { accept, label, error, disabled = false, ghost = false, id, className, } = props;
+    const [isDragging, setIsDragging] = useState(false);
+    const dropAreaRef = useRef(null);
+    const fallbackInputIdRef = useRef(generateUID());
+    const inputId = id ?? fallbackInputIdRef.current;
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        if (disabled)
+            return;
+        const list = Array.from(e.dataTransfer.files).filter(f => matchesAccept(f, accept));
+        if (props.multiple === true) {
+            if (list.length > 0) {
+                props.onFiles(list);
+            }
+        }
+        else {
+            const file = list[0];
+            if (file) {
+                props.onFile(file);
+            }
+        }
+    }, [accept, disabled, props]);
+    const handleFileInput = useCallback((e) => {
+        if (disabled)
+            return;
+        const raw = e.target.files;
+        if (!raw?.length)
+            return;
+        const list = Array.from(raw).filter(f => matchesAccept(f, accept));
+        if (props.multiple === true) {
+            if (list.length > 0) {
+                props.onFiles(list);
+            }
+        }
+        else {
+            const file = list[0];
+            if (file) {
+                props.onFile(file);
+            }
+        }
+        e.target.value = '';
+    }, [accept, disabled, props]);
+    useEffect(() => {
+        const dialog = dropAreaRef.current?.closest('[role="dialog"]');
+        const targetElement = dialog || document.body;
+        const handleGlobalDragOver = (e) => {
+            e.preventDefault();
+            setIsDragging(true);
+        };
+        const handleGlobalDragLeave = (e) => {
+            if (!e.relatedTarget ||
+                !targetElement.contains(e.relatedTarget)) {
+                setIsDragging(false);
+            }
+        };
+        const handleGlobalDrop = () => {
+            setIsDragging(false);
+        };
+        targetElement.addEventListener('dragover', handleGlobalDragOver);
+        targetElement.addEventListener('dragleave', handleGlobalDragLeave);
+        targetElement.addEventListener('drop', handleGlobalDrop);
+        return () => {
+            targetElement.removeEventListener('dragover', handleGlobalDragOver);
+            targetElement.removeEventListener('dragleave', handleGlobalDragLeave);
+            targetElement.removeEventListener('drop', handleGlobalDrop);
+        };
+    }, []);
+    const shouldShowDropArea = !ghost || isDragging;
+    const multiple = props.multiple === true;
+    return (jsxs("div", { className: cn(S.root, className), children: [shouldShowDropArea && (jsxs("div", { ref: dropAreaRef, className: cn(S.dropArea, isDragging && S.isDragging, disabled && S.disabled), onDrop: handleDrop, children: [jsx("input", { type: "file", accept: accept, multiple: multiple, onChange: handleFileInput, className: S.fileInput, id: inputId, disabled: disabled }), jsx("label", { htmlFor: inputId, className: S.label, style: {
+                            cursor: disabled ? 'not-allowed' : 'pointer',
+                        }, children: label })] })), error && jsx("div", { className: S.error, children: error })] }));
+}
+
+export { DropZone };

package/dist/esm/src/components/DropZone/DropZone.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z='.DropZone_root__gk-Ef{display:flex;flex-direction:column;gap:var(--p-2)}.DropZone_dropArea__u-8Ye{background-color:var(--accent-color-alpha-100);border:2px dashed var(--decent-color-alpha-200);border-radius:var(--p-4);cursor:pointer;padding:var(--p-4);position:relative;text-align:center;transition:all .2s ease}.DropZone_dropArea__u-8Ye label:before{border-radius:var(--p-4);content:"";height:100%;left:0;position:absolute;top:0;width:100%}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp,.DropZone_dropArea__u-8Ye:hover:not(.DropZone_disabled__qsAf6){border:2px dashed var(--active-color-alpha-500)}.DropZone_dropArea__u-8Ye:hover:not(.DropZone_disabled__qsAf6){background-color:var(--accent-color-alpha-50)}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:var(--decent-color-alpha-900)!important;display:flex;height:calc(100% - var(--p-2));justify-content:center;left:var(--p-1);position:fixed;top:var(--p-1);width:calc(100% - var(--p-2));z-index:9999}.DropZone_dropArea__u-8Ye.DropZone_disabled__qsAf6{cursor:not-allowed;opacity:.6}.DropZone_fileInput__E8DeE{display:none}.DropZone_label__u7-Pb{cursor:pointer}.DropZone_error__vSiwM{color:var(--danger-color);font-size:.875rem;padding:var(--p-1) var(--p-2)}',S={root:"DropZone_root__gk-Ef",dropArea:"DropZone_dropArea__u-8Ye",disabled:"DropZone_disabled__qsAf6",isDragging:"DropZone_isDragging__S-aQp",fileInput:"DropZone_fileInput__E8DeE",label:"DropZone_label__u7-Pb",error:"DropZone_error__vSiwM"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=DropZone.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".DropZone_root__gk-Ef{display:flex;flex-direction:column;gap:var(--p-2)}.DropZone_dropArea__u-8Ye{background-color:var(--accent-color-alpha-100);border:2px dashed var(--decent-color-alpha-200);border-radius:var(--p-4);cursor:pointer;padding:var(--p-4);position:relative;text-align:center;transition:all .2s ease}.DropZone_dropArea__u-8Ye label:before{border-radius:var(--p-4);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp,.DropZone_dropArea__u-8Ye:hover:not(.DropZone_disabled__qsAf6){border:2px dashed var(--active-color-alpha-500)}.DropZone_dropArea__u-8Ye:hover:not(.DropZone_disabled__qsAf6){background-color:var(--accent-color-alpha-50)}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:var(--decent-color-alpha-900)!important;display:flex;height:calc(100% - var(--p-2));justify-content:center;left:var(--p-1);position:fixed;top:var(--p-1);width:calc(100% - var(--p-2));z-index:9999}.DropZone_dropArea__u-8Ye.DropZone_disabled__qsAf6{cursor:not-allowed;opacity:.6}.DropZone_fileInput__E8DeE{display:none}.DropZone_label__u7-Pb{cursor:pointer}.DropZone_error__vSiwM{color:var(--danger-color);font-size:.875rem;padding:var(--p-1) var(--p-2)}";
+var S = {"root":"DropZone_root__gk-Ef","dropArea":"DropZone_dropArea__u-8Ye","disabled":"DropZone_disabled__qsAf6","isDragging":"DropZone_isDragging__S-aQp","fileInput":"DropZone_fileInput__E8DeE","label":"DropZone_label__u7-Pb","error":"DropZone_error__vSiwM"};
+styleInject(css_248z);
+
+export { S as default };