@class-kit/react 0.1.0

package/dist/components/date-range-picker.d.ts

@@ -0,0 +1,3 @@
+export { DateRangePicker } from "../index";
+export type { DateRangePickerProps } from "../index";
+//# sourceMappingURL=date-range-picker.d.ts.map

package/dist/components/date-range-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../src/components/date-range-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,YAAY,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/date-range-picker.js

@@ -0,0 +1,202 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useEffect, useContext, useSyncExternalStore, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { DateRangePickerController, getClassComponentsLocale } from '@class-kit/core';
+
+const FormContext = /*#__PURE__*/ createContext(null);
+const classIconPaths = {
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function ClassIcon({ className = "cc-icon", name, }) {
+    return (jsx("svg", { "aria-hidden": "true", className: className, fill: name === "star" ? "currentColor" : "none", focusable: "false", viewBox: "0 0 24 24", children: classIconPaths[name].map((d) => (jsx("path", { d: d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: name === "star" ? 0 : 2 }, d))) }));
+}
+function useFormInteractivity() {
+    const context = useContext(FormContext);
+    return {
+        disabled: context?.disabled ?? false,
+        readOnly: context?.readOnly ?? false,
+    };
+}
+function useOptionalFormInteractivity() {
+    return useFormInteractivity();
+}
+function resolveFieldInteractivity(form, disabled, readOnly) {
+    const resolvedDisabled = disabled ?? form.disabled;
+    return {
+        disabled: resolvedDisabled,
+        readOnly: !resolvedDisabled && (readOnly ?? form.readOnly),
+    };
+}
+function useOptionalField(name, options = {}) {
+    const context = useContext(FormContext);
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    const state = useSyncExternalStore((listener) => context ? context.controller.subscribe(listener) : () => undefined, () => context?.controller.getState() ?? null, () => context?.controller.getState() ?? null);
+    const [localValue, setLocalValue] = React.useState(() => (options.initialValue ?? ""));
+    useEffect(() => {
+        if (!context || !name)
+            return undefined;
+        return context.controller.registerField(name, optionsRef.current);
+    }, [context, name]);
+    const field = name ? state?.fields[name] : undefined;
+    const usesFormField = Boolean(context && name);
+    return {
+        value: usesFormField ? (field?.value ?? "") : localValue,
+        errors: usesFormField ? (field?.errors ?? []) : [],
+        dirty: usesFormField ? (field?.meta.dirty ?? false) : false,
+        touched: usesFormField ? (field?.meta.touched ?? false) : false,
+        setValue: (value) => {
+            if (context && name) {
+                void context.controller.setValue(name, value);
+            }
+            else {
+                setLocalValue(value);
+            }
+        },
+        onBlur: () => {
+            if (context && name)
+                void context.controller.blur(name);
+        },
+    };
+}
+function FieldError({ errors, errorId, className, }) {
+    return errors.length > 0 ? (jsx("span", { className: className ?? "cc-field__error", id: errorId, role: "alert", children: errors[0] })) : null;
+}
+function renderBodyPortal(node) {
+    return typeof document === "undefined"
+        ? node
+        : createPortal(node, document.body);
+}
+function getWeekLabels() {
+    return getClassComponentsLocale().datePickerWeekLabels;
+}
+function normalizeDateRangeValue(value) {
+    if (!value || typeof value !== "object")
+        return {};
+    const range = value;
+    return {
+        end: typeof range.end === "string" ? range.end : undefined,
+        start: typeof range.start === "string" ? range.start : undefined,
+    };
+}
+function formatDateRange(value, placeholder) {
+    if (value.start && value.end)
+        return `${value.start} - ${value.end}`;
+    if (value.start)
+        return `${value.start} -`;
+    if (value.end)
+        return `- ${value.end}`;
+    return placeholder;
+}
+function DateRangePicker({ name, label, limitDate, limitDirection, max, min, className = "cc-field cc-date-picker cc-date-range-picker", disabled, readOnly, allowSameDay = true, previousMonthIcon = jsx(ClassIcon, { name: "chevronLeft" }), nextMonthIcon = jsx(ClassIcon, { name: "chevronRight" }), initialValue, placeholder = getClassComponentsLocale().dateRangePlaceholder, rules, separator = getClassComponentsLocale().dateRangeSeparator, validateOn, onChange, ...props }) {
+    const field = useOptionalField(name, {
+        initialValue: normalizeDateRangeValue(initialValue),
+        rules,
+        validateOn,
+    });
+    const interactivity = resolveFieldInteractivity(useOptionalFormInteractivity(), disabled, readOnly);
+    const controllerRef = React.useRef(new DateRangePickerController({
+        allowSameDay,
+        limitDate,
+        limitDirection,
+        max,
+        min,
+        value: normalizeDateRangeValue(field.value),
+    }));
+    const rootRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const [state, setState] = React.useState(() => controllerRef.current.getState());
+    const [open, setOpen] = React.useState(false);
+    const [panelStyle, setPanelStyle] = React.useState({});
+    const updatePanelPosition = React.useCallback(() => {
+        const trigger = triggerRef.current;
+        if (!trigger || typeof window === "undefined")
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const gap = 8;
+        const width = Math.max(560, rect.width);
+        const estimatedHeight = 370;
+        const openUp = window.innerHeight - rect.bottom < estimatedHeight + gap &&
+            rect.top > estimatedHeight + gap;
+        setPanelStyle({
+            bottom: openUp ? window.innerHeight - rect.top + gap : undefined,
+            left: Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - width - 8)),
+            top: openUp ? undefined : rect.bottom + gap,
+            transformOrigin: openUp ? "bottom left" : "top left",
+            width,
+        });
+    }, []);
+    React.useEffect(() => {
+        setState(controllerRef.current.updateOptions({
+            allowSameDay,
+            limitDate,
+            limitDirection,
+            max,
+            min,
+            value: normalizeDateRangeValue(field.value),
+        }));
+    }, [allowSameDay, field.value, limitDate, limitDirection, max, min]);
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        updatePanelPosition();
+        const close = (event) => {
+            const target = event.target;
+            if (!rootRef.current?.contains(target) &&
+                !panelRef.current?.contains(target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", close);
+        window.addEventListener("resize", updatePanelPosition);
+        window.addEventListener("scroll", updatePanelPosition, true);
+        return () => {
+            document.removeEventListener("mousedown", close);
+            window.removeEventListener("resize", updatePanelPosition);
+            window.removeEventListener("scroll", updatePanelPosition, true);
+        };
+    }, [open, updatePanelPosition]);
+    const commitState = (next, notify = true) => {
+        setState(next);
+        const value = { start: next.start, end: next.end };
+        field.setValue(value);
+        if (notify)
+            onChange?.(value);
+        if (next.start && next.end)
+            setOpen(false);
+    };
+    const select = (value) => {
+        if (interactivity.disabled || interactivity.readOnly)
+            return;
+        commitState(controllerRef.current.select(value));
+    };
+    const renderMonth = (title, days) => (jsxs("section", { className: "cc-date-range-picker__month", "aria-label": title, children: [jsx("strong", { className: "cc-date-range-picker__month-title", children: title }), jsx("div", { className: "cc-date-picker__week", children: getWeekLabels().map((item) => (jsx("span", { children: item }, item))) }), jsx("div", { className: "cc-date-picker__grid", children: days.map((day) => (jsx("button", { className: "cc-date-picker__day", "data-in-month": day.inMonth, "data-in-range": day.inRange, "data-preview": day.preview, "data-range-end": day.rangeEnd, "data-range-start": day.rangeStart, "data-selected": day.selected, "data-today": day.today, disabled: interactivity.disabled || interactivity.readOnly || day.disabled, type: "button", onClick: () => select(day.date), onMouseEnter: () => setState(controllerRef.current.hoverDate(day.date)), children: day.day }, `${title}-${day.date}`))) })] }));
+    const currentValue = { start: state.start, end: state.end };
+    const errorId = `${name}-error`;
+    return (jsxs("div", { className: className, "data-disabled": interactivity.disabled, "data-open": open, "data-readonly": interactivity.readOnly, ref: rootRef, ...props, children: [label ? jsx("span", { className: "cc-field__label", children: label }) : null, jsxs("div", { className: "cc-date-picker__dropdown", children: [jsxs("button", { className: "cc-field__control cc-date-picker__trigger", "aria-readonly": interactivity.readOnly || undefined, "data-readonly": interactivity.readOnly, disabled: interactivity.disabled, ref: triggerRef, type: "button", onClick: () => {
+                            if (!interactivity.readOnly)
+                                setOpen((value) => !value);
+                            window.requestAnimationFrame(updatePanelPosition);
+                        }, children: [jsx("span", { "data-placeholder": !state.start && !state.end, children: formatDateRange(currentValue, placeholder) }), jsx("span", { "aria-hidden": "true", className: "cc-select__arrow" })] }), open
+                        ? renderBodyPortal(jsxs("div", { className: "cc-date-picker__panel cc-date-picker__panel--floating cc-date-range-picker__panel", ref: panelRef, role: "dialog", style: panelStyle, children: [jsxs("div", { className: "cc-date-picker__header", children: [jsx("button", { "aria-label": getClassComponentsLocale().datePickerPreviousMonth, disabled: interactivity.disabled || interactivity.readOnly, type: "button", onClick: () => setState(controllerRef.current.moveMonth(-1)), children: previousMonthIcon }), jsxs("strong", { children: [state.leftYear, getClassComponentsLocale().dateYearUnit, " ", state.leftMonth, getClassComponentsLocale().dateMonthUnit, " ", jsx("span", { children: separator }), " ", state.rightYear, getClassComponentsLocale().dateYearUnit, " ", state.rightMonth, getClassComponentsLocale().dateMonthUnit] }), jsx("button", { "aria-label": getClassComponentsLocale().datePickerNextMonth, disabled: interactivity.disabled || interactivity.readOnly, type: "button", onClick: () => setState(controllerRef.current.moveMonth(1)), children: nextMonthIcon })] }), jsxs("div", { className: "cc-date-range-picker__summary", children: [jsx("span", { "data-active": state.selecting === "start", children: state.start ||
+                                                getClassComponentsLocale().dateRangeStartPlaceholder }), jsx("span", { children: separator }), jsx("span", { "data-active": state.selecting === "end", children: state.end ||
+                                                getClassComponentsLocale().dateRangeEndPlaceholder }), jsx("button", { disabled: interactivity.disabled ||
+                                                interactivity.readOnly ||
+                                                (!state.start && !state.end), type: "button", onClick: () => commitState(controllerRef.current.clear()), children: getClassComponentsLocale().dateRangeClear })] }), jsxs("div", { className: "cc-date-range-picker__months", onMouseLeave: () => setState(controllerRef.current.hoverDate(undefined)), children: [renderMonth(`${state.leftYear}${getClassComponentsLocale().dateYearUnit} ${state.leftMonth}${getClassComponentsLocale().dateMonthUnit}`, state.leftDays), renderMonth(`${state.rightYear}${getClassComponentsLocale().dateYearUnit} ${state.rightMonth}${getClassComponentsLocale().dateMonthUnit}`, state.rightDays)] })] }))
+                        : null] }), jsx("input", { name: name, type: "hidden", value: JSON.stringify(currentValue) }), jsx(FieldError, { errorId: errorId, errors: field.errors })] }));
+}
+
+export { DateRangePicker };
+//# sourceMappingURL=date-range-picker.js.map

package/dist/components/date-range-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.js","sources":["../../src/index.tsx"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/design-effect.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+function DesignEffect({ animated, children, className, colors, contentClassName = "cc-design-effect__content", disabled, intensity, interactive, overlayClassName = "cc-design-effect__overlay", preset, radius, style, tone, ...props }) {
+    const state = React.useMemo(() => new core.DesignEffectController({
+        animated,
+        colors,
+        disabled,
+        intensity,
+        interactive,
+        preset,
+        radius,
+        tone,
+    }).getState(), [animated, colors, disabled, intensity, interactive, preset, radius, tone]);
+    const rootClassName = className
+        ? `${state.className} ${className}`
+        : state.className;
+    return (jsxRuntime.jsxs("div", { className: rootClassName, "data-animated": state.animated ? "true" : "false", "data-disabled": state.disabled ? "true" : "false", "data-interactive": state.interactive ? "true" : "false", "data-tone": state.tone, style: { ...state.styleVars, ...style }, ...props, children: [state.overlay ? (jsxRuntime.jsx("span", { "aria-hidden": "true", className: overlayClassName })) : null, jsxRuntime.jsx("div", { className: contentClassName, children: children })] }));
+}
+
+exports.DesignEffect = DesignEffect;
+//# sourceMappingURL=design-effect.cjs.map

package/dist/components/design-effect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-effect.cjs","sources":["../../src/index.tsx"],"names":["DesignEffectController","_jsxs","_jsx"],"mappings":";;;;;;SAm6KgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,gBAAgB,GAAG,2BAA2B,EAC9C,QAAQ,EACR,SAAS,EACT,WAAW,EACX,gBAAgB,GAAG,2BAA2B,EAC9C,MAAM,EACN,MAAM,EACN,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACU,EAAA;IAClB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACzB,MACE,IAAIA,2BAAsB,CAAC;QACzB,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,SAAS;QACT,WAAW;QACX,MAAM;QACN,MAAM;QACN,IAAI;KACL,CAAC,CAAC,QAAQ,EAAE,EACf,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAC3E;IACD,MAAM,aAAa,GAAG;AACpB,UAAE,CAAA,EAAG,KAAK,CAAC,SAAS,CAAA,CAAA,EAAI,SAAS,CAAA;AACjC,UAAE,KAAK,CAAC,SAAS;AAEnB,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,aAAa,EAAA,eAAA,EACT,KAAK,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EACjC,KAAK,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,sBAC9B,KAAK,CAAC,WAAW,GAAG,MAAM,GAAG,OAAO,eAC3C,KAAK,CAAC,IAAI,EACrB,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,EAAyB,EAAA,GAC1D,KAAK,EAAA,QAAA,EAAA,CAER,KAAK,CAAC,OAAO,IACZC,wCAAkB,MAAM,EAAC,SAAS,EAAE,gBAAgB,GAAI,IACtD,IAAI,EACRA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,gBAAgB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAA,EAAA,CAC9C;AAEV;;;;"}

package/dist/components/design-effect.d.ts

@@ -0,0 +1,3 @@
+export { DesignEffect } from "../index";
+export type { DesignEffectProps } from "../index";
+//# sourceMappingURL=design-effect.d.ts.map

package/dist/components/design-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-effect.d.ts","sourceRoot":"","sources":["../../src/components/design-effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/design-effect.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { DesignEffectController } from '@class-kit/core';
+
+function DesignEffect({ animated, children, className, colors, contentClassName = "cc-design-effect__content", disabled, intensity, interactive, overlayClassName = "cc-design-effect__overlay", preset, radius, style, tone, ...props }) {
+    const state = React.useMemo(() => new DesignEffectController({
+        animated,
+        colors,
+        disabled,
+        intensity,
+        interactive,
+        preset,
+        radius,
+        tone,
+    }).getState(), [animated, colors, disabled, intensity, interactive, preset, radius, tone]);
+    const rootClassName = className
+        ? `${state.className} ${className}`
+        : state.className;
+    return (jsxs("div", { className: rootClassName, "data-animated": state.animated ? "true" : "false", "data-disabled": state.disabled ? "true" : "false", "data-interactive": state.interactive ? "true" : "false", "data-tone": state.tone, style: { ...state.styleVars, ...style }, ...props, children: [state.overlay ? (jsx("span", { "aria-hidden": "true", className: overlayClassName })) : null, jsx("div", { className: contentClassName, children: children })] }));
+}
+
+export { DesignEffect };
+//# sourceMappingURL=design-effect.js.map

package/dist/components/design-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-effect.js","sources":["../../src/index.tsx"],"names":["_jsxs","_jsx"],"mappings":";;;;SAm6KgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,gBAAgB,GAAG,2BAA2B,EAC9C,QAAQ,EACR,SAAS,EACT,WAAW,EACX,gBAAgB,GAAG,2BAA2B,EAC9C,MAAM,EACN,MAAM,EACN,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACU,EAAA;IAClB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACzB,MACE,IAAI,sBAAsB,CAAC;QACzB,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,SAAS;QACT,WAAW;QACX,MAAM;QACN,MAAM;QACN,IAAI;KACL,CAAC,CAAC,QAAQ,EAAE,EACf,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAC3E;IACD,MAAM,aAAa,GAAG;AACpB,UAAE,CAAA,EAAG,KAAK,CAAC,SAAS,CAAA,CAAA,EAAI,SAAS,CAAA;AACjC,UAAE,KAAK,CAAC,SAAS;AAEnB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,aAAa,EAAA,eAAA,EACT,KAAK,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EACjC,KAAK,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,sBAC9B,KAAK,CAAC,WAAW,GAAG,MAAM,GAAG,OAAO,eAC3C,KAAK,CAAC,IAAI,EACrB,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,EAAyB,EAAA,GAC1D,KAAK,EAAA,QAAA,EAAA,CAER,KAAK,CAAC,OAAO,IACZC,6BAAkB,MAAM,EAAC,SAAS,EAAE,gBAAgB,GAAI,IACtD,IAAI,EACRA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,gBAAgB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAA,EAAA,CAC9C;AAEV;;;;"}

package/dist/components/drag-drop-board.cjs

@@ -0,0 +1,334 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+var core = require('@class-kit/core');
+
+function renderBodyPortal(node) {
+    return typeof document === "undefined"
+        ? node
+        : reactDom.createPortal(node, document.body);
+}
+function reorderDropItems(items, fromIndex, toIndex, mode) {
+    if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex)
+        return [...items];
+    const next = [...items];
+    if (mode === "swap") {
+        const fromItem = next[fromIndex];
+        const toItem = next[toIndex];
+        if (fromItem === undefined || toItem === undefined)
+            return [...items];
+        next[fromIndex] = toItem;
+        next[toIndex] = fromItem;
+        return next;
+    }
+    const [moving] = next.splice(fromIndex, 1);
+    if (moving)
+        next.splice(Math.max(0, Math.min(toIndex, next.length)), 0, moving);
+    return next;
+}
+function getRectOverlapRatio(source, target) {
+    const width = Math.max(0, Math.min(source.right, target.right) - Math.max(source.left, target.left));
+    const height = Math.max(0, Math.min(source.bottom, target.bottom) - Math.max(source.top, target.top));
+    const sourceArea = Math.max(1, source.width * source.height);
+    return (width * height) / sourceArea;
+}
+function DragDropBoard({ columns, items, mode = "insert", renderItem, className = "cc-drag-drop-board", onChange, style, ...props }) {
+    const controllerRef = React.useRef(new core.DropController([...items]));
+    const boardRef = React.useRef(null);
+    const itemRefs = React.useRef(new Map());
+    const dropTimerRef = React.useRef(null);
+    const [state, setState] = React.useState(() => controllerRef.current.getState());
+    const stateRef = React.useRef(state);
+    const [isCommittingDrop, setIsCommittingDrop] = React.useState(false);
+    const [preview, setPreview] = React.useState(null);
+    const previewRef = React.useRef(null);
+    const dragSessionRef = React.useRef(null);
+    const moveFrameRef = React.useRef(null);
+    const commitFrameRef = React.useRef(null);
+    const slotRectsRef = React.useRef(new Map());
+    React.useEffect(() => {
+        stateRef.current = state;
+    }, [state]);
+    React.useEffect(() => {
+        setState(controllerRef.current.updateItems([...items]));
+    }, [items]);
+    const flushPreviewPosition = React.useCallback(() => {
+        moveFrameRef.current = null;
+        const currentPreview = dragSessionRef.current;
+        const element = previewRef.current;
+        if (!currentPreview || !element)
+            return;
+        element.style.transform = `translate3d(${currentPreview.x}px, ${currentPreview.y}px, 0)`;
+    }, []);
+    const schedulePreviewPosition = React.useCallback(() => {
+        if (moveFrameRef.current !== null)
+            return;
+        moveFrameRef.current = window.requestAnimationFrame(flushPreviewPosition);
+    }, [flushPreviewPosition]);
+    React.useEffect(() => () => {
+        if (dropTimerRef.current !== null)
+            window.clearTimeout(dropTimerRef.current);
+        if (moveFrameRef.current !== null)
+            window.cancelAnimationFrame(moveFrameRef.current);
+        if (commitFrameRef.current !== null)
+            window.cancelAnimationFrame(commitFrameRef.current);
+    }, []);
+    const getPreviewRect = (currentPreview) => ({
+        bottom: currentPreview.y + currentPreview.height,
+        height: currentPreview.height,
+        left: currentPreview.x,
+        right: currentPreview.x + currentPreview.width,
+        top: currentPreview.y,
+        width: currentPreview.width,
+    });
+    const getOriginalIndex = (currentState = stateRef.current) => Math.max(0, currentState.items.findIndex((item) => item.id === currentState.draggingId));
+    const isPreviewInsideBoard = (currentPreview) => {
+        const boardRect = boardRef.current?.getBoundingClientRect();
+        if (!boardRect)
+            return true;
+        return (getRectOverlapRatio(getPreviewRect(currentPreview), boardRect) > 0.05);
+    };
+    const resolveIndexFromPreview = (currentPreview) => {
+        const currentState = stateRef.current;
+        let nextIndex = getOriginalIndex(currentState);
+        let bestRatio = 0;
+        const previewRect = getPreviewRect(currentPreview);
+        if (!isPreviewInsideBoard(currentPreview))
+            return nextIndex;
+        itemRefs.current.forEach((element, id) => {
+            if (id === currentState.draggingId)
+                return;
+            const rect = slotRectsRef.current.get(id) ?? element.getBoundingClientRect();
+            const ratio = getRectOverlapRatio(previewRect, rect);
+            if (ratio >= 0.8 && ratio > bestRatio) {
+                bestRatio = ratio;
+                nextIndex = currentState.items.findIndex((item) => item.id === id);
+            }
+        });
+        return Math.max(0, nextIndex);
+    };
+    const getSlotTransform = (item, index) => {
+        const currentState = stateRef.current;
+        const fromIndex = currentState.items.findIndex((entry) => entry.id === currentState.draggingId);
+        const toIndex = currentState.overIndex;
+        if (!currentState.draggingId ||
+            fromIndex < 0 ||
+            toIndex === undefined ||
+            fromIndex === toIndex)
+            return undefined;
+        const currentRect = slotRectsRef.current.get(item.id);
+        if (!currentRect)
+            return undefined;
+        let targetIndex = index;
+        if (mode === "swap") {
+            if (index !== toIndex)
+                return undefined;
+            targetIndex = fromIndex;
+        }
+        else if (fromIndex < toIndex && index > fromIndex && index <= toIndex) {
+            targetIndex = index - 1;
+        }
+        else if (fromIndex > toIndex && index >= toIndex && index < fromIndex) {
+            targetIndex = index + 1;
+        }
+        else {
+            return undefined;
+        }
+        const targetItem = currentState.items[targetIndex];
+        const targetRect = targetItem
+            ? slotRectsRef.current.get(targetItem.id)
+            : undefined;
+        if (!targetRect)
+            return undefined;
+        const deltaX = targetRect.left - currentRect.left;
+        const deltaY = targetRect.top - currentRect.top;
+        if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5)
+            return undefined;
+        return `translate3d(${deltaX}px, ${deltaY}px, 0)`;
+    };
+    const finishDrag = React.useCallback((action) => {
+        if (action === "end") {
+            const currentState = stateRef.current;
+            const fromIndex = currentState.items.findIndex((item) => item.id === currentState.draggingId);
+            const toIndex = currentState.overIndex ?? fromIndex;
+            const nextItems = reorderDropItems(currentState.items, fromIndex, toIndex, mode);
+            controllerRef.current.cancel();
+            const next = controllerRef.current.updateItems(nextItems);
+            stateRef.current = next;
+            setIsCommittingDrop(true);
+            setState(next);
+            dragSessionRef.current = null;
+            slotRectsRef.current.clear();
+            setPreview(null);
+            commitFrameRef.current = window.requestAnimationFrame(() => {
+                commitFrameRef.current = null;
+                setIsCommittingDrop(false);
+            });
+            onChange?.(next.items);
+            return;
+        }
+        const next = controllerRef.current.cancel();
+        stateRef.current = next;
+        setState(next);
+        dragSessionRef.current = null;
+        slotRectsRef.current.clear();
+        setPreview(null);
+    }, [mode, onChange]);
+    const endDrag = React.useCallback(() => {
+        const currentPreview = dragSessionRef.current ?? preview;
+        if (currentPreview && !currentPreview.dropping) {
+            const currentState = stateRef.current;
+            const originalIndex = getOriginalIndex(currentState);
+            const shouldCancel = !isPreviewInsideBoard(currentPreview) ||
+                currentState.overIndex === undefined ||
+                currentState.overIndex === originalIndex;
+            const targetItem = !shouldCancel && currentState.overIndex !== undefined
+                ? currentState.items[currentState.overIndex]
+                : undefined;
+            const targetRect = shouldCancel
+                ? {
+                    height: currentPreview.height,
+                    left: currentPreview.originX,
+                    top: currentPreview.originY,
+                    width: currentPreview.width,
+                }
+                : targetItem
+                    ? slotRectsRef.current.get(targetItem.id)
+                    : undefined;
+            if (targetRect) {
+                const droppingPreview = {
+                    ...currentPreview,
+                    dropping: true,
+                    height: targetRect.height,
+                    offsetX: 0,
+                    offsetY: 0,
+                    returning: shouldCancel,
+                    width: targetRect.width,
+                    x: targetRect.left,
+                    y: targetRect.top,
+                };
+                dragSessionRef.current = droppingPreview;
+                setPreview(droppingPreview);
+                dropTimerRef.current = window.setTimeout(() => {
+                    finishDrag(shouldCancel ? "cancel" : "end");
+                }, 320);
+                return;
+            }
+        }
+        finishDrag("end");
+    }, [finishDrag, preview]);
+    const cancelDrag = React.useCallback(() => {
+        const currentPreview = dragSessionRef.current ?? preview;
+        if (currentPreview && !currentPreview.dropping) {
+            const returningPreview = {
+                ...currentPreview,
+                dropping: true,
+                offsetX: 0,
+                offsetY: 0,
+                returning: true,
+                x: currentPreview.originX,
+                y: currentPreview.originY,
+            };
+            dragSessionRef.current = returningPreview;
+            setPreview(returningPreview);
+            dropTimerRef.current = window.setTimeout(() => finishDrag("cancel"), 320);
+            return;
+        }
+        finishDrag("cancel");
+    }, [finishDrag, preview]);
+    return (jsxRuntime.jsxs("div", { className: className, ref: boardRef, style: { "--cc-drag-drop-columns": columns, ...style }, ...props, children: [state.items.map((item, index) => {
+                const dragging = state.draggingId === item.id;
+                const over = state.overIndex === index && state.draggingId !== undefined;
+                const transform = dragging ? undefined : getSlotTransform(item, index);
+                const slotStyle = {
+                    ...(transform ? { transform } : {}),
+                    ...(isCommittingDrop ? { transition: "none" } : {}),
+                };
+                return (jsxRuntime.jsx("div", { className: "cc-drag-drop-board__slot", "data-dragging": dragging, "data-over": over, "data-disabled": item.disabled, style: Object.keys(slotStyle).length ? slotStyle : undefined, ref: (node) => {
+                        if (node)
+                            itemRefs.current.set(item.id, node);
+                        else
+                            itemRefs.current.delete(item.id);
+                    }, onPointerDown: (event) => {
+                        if (item.disabled)
+                            return;
+                        const nextSlotRects = new Map();
+                        itemRefs.current.forEach((element, id) => {
+                            const itemRect = element.getBoundingClientRect();
+                            nextSlotRects.set(id, {
+                                bottom: itemRect.bottom,
+                                height: itemRect.height,
+                                left: itemRect.left,
+                                right: itemRect.right,
+                                top: itemRect.top,
+                                width: itemRect.width,
+                            });
+                        });
+                        slotRectsRef.current = nextSlotRects;
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        const next = controllerRef.current.start(item.id);
+                        const nextPreview = {
+                            height: rect.height,
+                            item,
+                            offsetX: event.clientX - rect.left,
+                            offsetY: event.clientY - rect.top,
+                            originX: rect.left,
+                            originY: rect.top,
+                            width: rect.width,
+                            x: rect.left,
+                            y: rect.top,
+                        };
+                        stateRef.current = next;
+                        setState(next);
+                        dragSessionRef.current = nextPreview;
+                        setPreview(nextPreview);
+                        event.currentTarget.setPointerCapture(event.pointerId);
+                    }, onPointerMove: (event) => {
+                        const current = dragSessionRef.current;
+                        if (!stateRef.current.draggingId || !current || current.dropping)
+                            return;
+                        const nextPreview = {
+                            ...current,
+                            x: event.clientX - current.offsetX,
+                            y: event.clientY - current.offsetY,
+                        };
+                        dragSessionRef.current = nextPreview;
+                        schedulePreviewPosition();
+                        if (!isPreviewInsideBoard(nextPreview)) {
+                            const next = controllerRef.current.moveToIndex(getOriginalIndex());
+                            stateRef.current = next;
+                            setState(next);
+                            const returningPreview = {
+                                ...nextPreview,
+                                dropping: true,
+                                offsetX: 0,
+                                offsetY: 0,
+                                returning: true,
+                                x: nextPreview.originX,
+                                y: nextPreview.originY,
+                            };
+                            dragSessionRef.current = returningPreview;
+                            setPreview(returningPreview);
+                            dropTimerRef.current = window.setTimeout(() => finishDrag("cancel"), 320);
+                            return;
+                        }
+                        const nextIndex = resolveIndexFromPreview(nextPreview);
+                        if (nextIndex !== stateRef.current.overIndex) {
+                            const next = controllerRef.current.moveToIndex(nextIndex);
+                            stateRef.current = next;
+                            setState(next);
+                        }
+                    }, onPointerUp: endDrag, onPointerCancel: cancelDrag, children: jsxRuntime.jsx("div", { className: "cc-drag-drop-board__item", children: renderItem(item, { dragging, over }) }) }, item.id));
+            }), preview
+                ? renderBodyPortal(jsxRuntime.jsx("div", { "aria-hidden": "true", className: "cc-drag-drop-board__preview", "data-dropping": preview.dropping, "data-returning": preview.returning, ref: previewRef, style: {
+                        height: preview.height,
+                        transform: `translate3d(${preview.x}px, ${preview.y}px, 0)`,
+                        width: preview.width,
+                    }, children: renderItem(preview.item, { dragging: true, over: false }) }))
+                : null] }));
+}
+
+exports.DragDropBoard = DragDropBoard;
+//# sourceMappingURL=drag-drop-board.cjs.map