fluxo-ui 0.0.1

package/dnd.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_drag_drop = require("./drag-drop-BF3uukc4.cjs");
+exports.DragDropProvider = require_drag_drop.DragDropProvider;
+exports.Draggable = require_drag_drop.Draggable_default;
+exports.Droppable = require_drag_drop.Droppable;
+exports.Sortable = require_drag_drop.Sortable;

package/dnd.d.ts

@@ -0,0 +1 @@
+export {}

package/dnd.js

@@ -0,0 +1,2 @@
+import { i as DragDropProvider, n as Droppable, r as Draggable_default, t as Sortable } from "./drag-drop-UWg0agsw.js";
+export { DragDropProvider, Draggable_default as Draggable, Droppable, Sortable };

package/drag-drop-BF3uukc4.cjs

@@ -0,0 +1,258 @@
+require('./styles/drag-drop.css');const require_chunk = require("./chunk-Do9eywBl.cjs");
+const require_classnames$1 = require("./classnames-B4qHndiD.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dnd = require("react-dnd");
+let react_dnd_html5_backend = require("react-dnd-html5-backend");
+//#region src/components/drag-drop/DragDropProvider.tsx
+/**
+* DragDropProvider component that wraps children with react-dnd context.
+* This must be placed at the root of your app (or at least above any drag-drop components).
+*
+* @example
+* ```tsx
+* import { DragDropProvider } from 'ether-ui';
+*
+* function App() {
+*   return (
+*     <DragDropProvider>
+*       <YourApp />
+*     </DragDropProvider>
+*   );
+* }
+* ```
+*/
+function DragDropProvider({ children, backend = react_dnd_html5_backend.HTML5Backend, options }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_dnd.DndProvider, {
+		backend,
+		options,
+		children
+	});
+}
+//#endregion
+//#region src/components/drag-drop/Draggable.tsx
+var import_classnames = /* @__PURE__ */ require_chunk.__toESM(require_classnames$1.require_classnames(), 1);
+function Draggable(props) {
+	const { containerId, index, id, item, itemType = "any", args, testId, children, onRemove, onDragStart, onDragEnd, className, canDrag: canDragProp = true } = props;
+	const [{ canDrag, isDragging, handlerId }, dragRef] = (0, react_dnd.useDrag)(() => ({
+		type: itemType,
+		canDrag: canDragProp,
+		item: (monitor) => {
+			const dragItem = {
+				index,
+				item,
+				itemType,
+				id,
+				containerId,
+				args
+			};
+			onDragStart?.(dragItem, monitor);
+			return dragItem;
+		},
+		end: (draggedItem, monitor) => {
+			onDragEnd?.(draggedItem, monitor);
+			if (!onRemove || !monitor.didDrop()) return;
+			const dropResult = monitor.getDropResult();
+			if (dropResult?.containerId !== containerId) onRemove({
+				index,
+				id
+			}, dropResult);
+		},
+		collect: (monitor) => ({
+			canDrag: monitor.canDrag(),
+			isDragging: monitor.isDragging(),
+			handlerId: monitor.getHandlerId()
+		})
+	}), [
+		onRemove,
+		onDragStart,
+		onDragEnd,
+		index,
+		id,
+		item,
+		containerId,
+		itemType,
+		args,
+		canDragProp
+	]);
+	if (typeof children === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
+		isDragging,
+		canDrag,
+		dragRef,
+		handlerId
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: dragRef,
+		className: (0, import_classnames.default)("eui-draggable", className, {
+			"eui-draggable-enabled": canDrag,
+			"eui-draggable-dragging": isDragging
+		}),
+		"data-testid": testId,
+		children
+	});
+}
+var Draggable_default = react.default.memo(Draggable);
+//#endregion
+//#region src/components/drag-drop/Droppable.tsx
+function Droppable(props) {
+	const { containerId, index, args, id, children, accept = "any", className, testId, onDrop, onHover, canDrop: canDropProp = true } = props;
+	const [{ canDrop, isOver, isOverCurrent }, dropRef] = (0, react_dnd.useDrop)(() => ({
+		accept,
+		canDrop: (item, monitor) => {
+			if (typeof canDropProp === "function") return canDropProp(item, monitor);
+			return canDropProp;
+		},
+		drop: (source, monitor) => {
+			if (monitor.didDrop()) return;
+			const target = {
+				index,
+				args,
+				id,
+				containerId
+			};
+			onDrop?.(source, target);
+			return target;
+		},
+		hover: (item, monitor) => {
+			onHover?.(item, monitor);
+		},
+		collect: (monitor) => ({
+			isOver: monitor.isOver(),
+			isOverCurrent: monitor.isOver({ shallow: true }),
+			canDrop: monitor.canDrop()
+		})
+	}), [
+		onDrop,
+		onHover,
+		index,
+		args,
+		id,
+		containerId,
+		accept,
+		canDropProp
+	]);
+	if (typeof children === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
+		dropRef,
+		canDrop,
+		isOver,
+		isOverCurrent
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: dropRef,
+		className: (0, import_classnames.default)("eui-droppable", className, {
+			"eui-droppable-allowed": canDrop,
+			"eui-droppable-denied": !canDrop,
+			"eui-droppable-hover": isOver,
+			"eui-droppable-hover-current": isOverCurrent
+		}),
+		"data-testid": testId,
+		children
+	});
+}
+//#endregion
+//#region src/components/drag-drop/Sortable.tsx
+function Sortable(props) {
+	const propsRef = (0, react.useRef)(props);
+	propsRef.current = props;
+	const { items, accept: acceptFromProps, itemType = "any", itemTypeProp, className, provideDropRef, provideDragRef, showPlaceholder, placeholder, as: Component = "div", allowRemove = true, children, args } = props;
+	const renderItem = children || props.itemTemplate;
+	const accept = (0, react.useMemo)(() => {
+		if (!acceptFromProps) return itemType;
+		if (!Array.isArray(acceptFromProps)) return [acceptFromProps, itemType];
+		return [...acceptFromProps, itemType];
+	}, [acceptFromProps, itemType]);
+	const containerId = (0, react.useId)();
+	const handleItemRemoved = (0, react.useCallback)((removed, dropResult) => {
+		const { onRemove, items, onChange, args } = propsRef.current;
+		if (onRemove) {
+			onRemove(removed, dropResult);
+			return;
+		}
+		const newItems = [...items];
+		newItems.splice(removed.index, 1);
+		onChange(newItems, args, { removed });
+	}, []);
+	const handleItemDropped = (0, react.useCallback)((source, target) => {
+		const { items, onChange, onDrop, args, itemType } = propsRef.current;
+		if (!target.item) target.item = items[target.index];
+		if (source.containerId !== containerId && (onDrop || source.itemType !== itemType)) {
+			onDrop?.(source, target, args);
+			return;
+		}
+		const newItems = [...items];
+		if (source.containerId === target.containerId) newItems.splice(source.index, 1);
+		newItems.splice(target.index, 0, source.item);
+		onChange(newItems, args, {
+			source,
+			target
+		});
+	}, [containerId]);
+	const renderDraggable = (0, react.useCallback)((item, index, droppable) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Draggable_default, {
+			containerId,
+			index,
+			item,
+			args,
+			itemType: itemTypeProp && item[itemTypeProp] || itemType,
+			onRemove: allowRemove ? handleItemRemoved : void 0,
+			children: provideDragRef ? (draggable) => renderItem(item, index, {
+				draggable,
+				droppable
+			}) : renderItem(item, index, { droppable })
+		});
+	}, [
+		containerId,
+		itemTypeProp,
+		itemType,
+		args,
+		allowRemove,
+		handleItemRemoved,
+		provideDragRef,
+		renderItem
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
+		className: (0, import_classnames.default)("eui-sortable", className),
+		children: [items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Droppable, {
+			containerId,
+			index: i,
+			accept,
+			onDrop: handleItemDropped,
+			args,
+			children: provideDropRef ? (droppable) => renderDraggable(item, i, droppable) : renderDraggable(item, i)
+		}, i)), (showPlaceholder || placeholder) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Droppable, {
+			containerId,
+			className: "eui-drop-placeholder",
+			args,
+			index: items?.length || 0,
+			accept,
+			onDrop: handleItemDropped,
+			children: placeholder
+		})]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "DragDropProvider", {
+	enumerable: true,
+	get: function() {
+		return DragDropProvider;
+	}
+});
+Object.defineProperty(exports, "Draggable_default", {
+	enumerable: true,
+	get: function() {
+		return Draggable_default;
+	}
+});
+Object.defineProperty(exports, "Droppable", {
+	enumerable: true,
+	get: function() {
+		return Droppable;
+	}
+});
+Object.defineProperty(exports, "Sortable", {
+	enumerable: true,
+	get: function() {
+		return Sortable;
+	}
+});

package/drag-drop-UWg0agsw.js

@@ -0,0 +1,233 @@
+import { n as __toESM, t as require_classnames } from "./classnames-CEAOwX3h.js";
+import React, { useCallback, useId, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import './styles/drag-drop.css';//#region src/components/drag-drop/DragDropProvider.tsx
+/**
+* DragDropProvider component that wraps children with react-dnd context.
+* This must be placed at the root of your app (or at least above any drag-drop components).
+*
+* @example
+* ```tsx
+* import { DragDropProvider } from 'ether-ui';
+*
+* function App() {
+*   return (
+*     <DragDropProvider>
+*       <YourApp />
+*     </DragDropProvider>
+*   );
+* }
+* ```
+*/
+function DragDropProvider({ children, backend = HTML5Backend, options }) {
+	return /* @__PURE__ */ jsx(DndProvider, {
+		backend,
+		options,
+		children
+	});
+}
+//#endregion
+//#region src/components/drag-drop/Draggable.tsx
+var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
+function Draggable(props) {
+	const { containerId, index, id, item, itemType = "any", args, testId, children, onRemove, onDragStart, onDragEnd, className, canDrag: canDragProp = true } = props;
+	const [{ canDrag, isDragging, handlerId }, dragRef] = useDrag(() => ({
+		type: itemType,
+		canDrag: canDragProp,
+		item: (monitor) => {
+			const dragItem = {
+				index,
+				item,
+				itemType,
+				id,
+				containerId,
+				args
+			};
+			onDragStart?.(dragItem, monitor);
+			return dragItem;
+		},
+		end: (draggedItem, monitor) => {
+			onDragEnd?.(draggedItem, monitor);
+			if (!onRemove || !monitor.didDrop()) return;
+			const dropResult = monitor.getDropResult();
+			if (dropResult?.containerId !== containerId) onRemove({
+				index,
+				id
+			}, dropResult);
+		},
+		collect: (monitor) => ({
+			canDrag: monitor.canDrag(),
+			isDragging: monitor.isDragging(),
+			handlerId: monitor.getHandlerId()
+		})
+	}), [
+		onRemove,
+		onDragStart,
+		onDragEnd,
+		index,
+		id,
+		item,
+		containerId,
+		itemType,
+		args,
+		canDragProp
+	]);
+	if (typeof children === "function") return /* @__PURE__ */ jsx(Fragment, { children: children({
+		isDragging,
+		canDrag,
+		dragRef,
+		handlerId
+	}) });
+	return /* @__PURE__ */ jsx("div", {
+		ref: dragRef,
+		className: (0, import_classnames.default)("eui-draggable", className, {
+			"eui-draggable-enabled": canDrag,
+			"eui-draggable-dragging": isDragging
+		}),
+		"data-testid": testId,
+		children
+	});
+}
+var Draggable_default = React.memo(Draggable);
+//#endregion
+//#region src/components/drag-drop/Droppable.tsx
+function Droppable(props) {
+	const { containerId, index, args, id, children, accept = "any", className, testId, onDrop, onHover, canDrop: canDropProp = true } = props;
+	const [{ canDrop, isOver, isOverCurrent }, dropRef] = useDrop(() => ({
+		accept,
+		canDrop: (item, monitor) => {
+			if (typeof canDropProp === "function") return canDropProp(item, monitor);
+			return canDropProp;
+		},
+		drop: (source, monitor) => {
+			if (monitor.didDrop()) return;
+			const target = {
+				index,
+				args,
+				id,
+				containerId
+			};
+			onDrop?.(source, target);
+			return target;
+		},
+		hover: (item, monitor) => {
+			onHover?.(item, monitor);
+		},
+		collect: (monitor) => ({
+			isOver: monitor.isOver(),
+			isOverCurrent: monitor.isOver({ shallow: true }),
+			canDrop: monitor.canDrop()
+		})
+	}), [
+		onDrop,
+		onHover,
+		index,
+		args,
+		id,
+		containerId,
+		accept,
+		canDropProp
+	]);
+	if (typeof children === "function") return /* @__PURE__ */ jsx(Fragment, { children: children({
+		dropRef,
+		canDrop,
+		isOver,
+		isOverCurrent
+	}) });
+	return /* @__PURE__ */ jsx("div", {
+		ref: dropRef,
+		className: (0, import_classnames.default)("eui-droppable", className, {
+			"eui-droppable-allowed": canDrop,
+			"eui-droppable-denied": !canDrop,
+			"eui-droppable-hover": isOver,
+			"eui-droppable-hover-current": isOverCurrent
+		}),
+		"data-testid": testId,
+		children
+	});
+}
+//#endregion
+//#region src/components/drag-drop/Sortable.tsx
+function Sortable(props) {
+	const propsRef = useRef(props);
+	propsRef.current = props;
+	const { items, accept: acceptFromProps, itemType = "any", itemTypeProp, className, provideDropRef, provideDragRef, showPlaceholder, placeholder, as: Component = "div", allowRemove = true, children, args } = props;
+	const renderItem = children || props.itemTemplate;
+	const accept = useMemo(() => {
+		if (!acceptFromProps) return itemType;
+		if (!Array.isArray(acceptFromProps)) return [acceptFromProps, itemType];
+		return [...acceptFromProps, itemType];
+	}, [acceptFromProps, itemType]);
+	const containerId = useId();
+	const handleItemRemoved = useCallback((removed, dropResult) => {
+		const { onRemove, items, onChange, args } = propsRef.current;
+		if (onRemove) {
+			onRemove(removed, dropResult);
+			return;
+		}
+		const newItems = [...items];
+		newItems.splice(removed.index, 1);
+		onChange(newItems, args, { removed });
+	}, []);
+	const handleItemDropped = useCallback((source, target) => {
+		const { items, onChange, onDrop, args, itemType } = propsRef.current;
+		if (!target.item) target.item = items[target.index];
+		if (source.containerId !== containerId && (onDrop || source.itemType !== itemType)) {
+			onDrop?.(source, target, args);
+			return;
+		}
+		const newItems = [...items];
+		if (source.containerId === target.containerId) newItems.splice(source.index, 1);
+		newItems.splice(target.index, 0, source.item);
+		onChange(newItems, args, {
+			source,
+			target
+		});
+	}, [containerId]);
+	const renderDraggable = useCallback((item, index, droppable) => {
+		return /* @__PURE__ */ jsx(Draggable_default, {
+			containerId,
+			index,
+			item,
+			args,
+			itemType: itemTypeProp && item[itemTypeProp] || itemType,
+			onRemove: allowRemove ? handleItemRemoved : void 0,
+			children: provideDragRef ? (draggable) => renderItem(item, index, {
+				draggable,
+				droppable
+			}) : renderItem(item, index, { droppable })
+		});
+	}, [
+		containerId,
+		itemTypeProp,
+		itemType,
+		args,
+		allowRemove,
+		handleItemRemoved,
+		provideDragRef,
+		renderItem
+	]);
+	return /* @__PURE__ */ jsxs(Component, {
+		className: (0, import_classnames.default)("eui-sortable", className),
+		children: [items.map((item, i) => /* @__PURE__ */ jsx(Droppable, {
+			containerId,
+			index: i,
+			accept,
+			onDrop: handleItemDropped,
+			args,
+			children: provideDropRef ? (droppable) => renderDraggable(item, i, droppable) : renderDraggable(item, i)
+		}, i)), (showPlaceholder || placeholder) && /* @__PURE__ */ jsx(Droppable, {
+			containerId,
+			className: "eui-drop-placeholder",
+			args,
+			index: items?.length || 0,
+			accept,
+			onDrop: handleItemDropped,
+			children: placeholder
+		})]
+	});
+}
+//#endregion
+export { DragDropProvider as i, Droppable as n, Draggable_default as r, Sortable as t };