xiod-ui 1.0.0

package/dist/components/dashboard-grid.js

@@ -0,0 +1,486 @@
+"use client";
+import { cn } from "cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React$1 from "react";
+import { Cancel } from "xiod-icons/icons/Cancel";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { GripVertical } from "xiod-icons/icons/GripVertical";
+//#region src/components/dashboard-grid.tsx
+const defaultBreakpoints = {
+	lg: 1200,
+	md: 996,
+	sm: 768,
+	xs: 480,
+	xxs: 0
+};
+const defaultCols = {
+	lg: 12,
+	md: 10,
+	sm: 6,
+	xs: 4,
+	xxs: 2
+};
+const dashboardGridVariants = cva("relative w-full overflow-hidden select-none transition-colors duration-200 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: { variant: {
+		default: "bg-background/40 border border-border/40 rounded-xl p-3 backdrop-blur-xs",
+		ghost: "bg-transparent border-0 p-0",
+		bordered: "bg-card border border-border rounded-2xl p-4 shadow-xs/5",
+		canvas: "bg-muted/10 border border-border/60 rounded-2xl p-4 shadow-inner"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const dashboardTileVariants = cva("absolute flex flex-col rounded-xl border bg-card text-card-foreground shadow-xs/5 transition-[transform,width,height,opacity,border-color,box-shadow] duration-150 group overflow-hidden touch-none", {
+	variants: {
+		variant: {
+			default: "border-border/80 bg-card hover:border-foreground/20 shadow-xs/5",
+			expressive: "border-primary/30 bg-card/95 shadow-primary/5 hover:border-primary/50",
+			flat: "border-border/40 bg-muted/30 shadow-none"
+		},
+		isDragging: {
+			true: "z-30 shadow-2xl/25 opacity-90 scale-[1.01] border-primary transition-none cursor-grabbing ring-2 ring-primary/20",
+			false: ""
+		},
+		isResizing: {
+			true: "z-30 shadow-xl/20 opacity-95 border-primary transition-none ring-2 ring-primary/20",
+			false: ""
+		},
+		isStatic: {
+			true: "border-dashed border-border/60 bg-muted/20 opacity-80 cursor-default",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		isDragging: false,
+		isResizing: false,
+		isStatic: false
+	}
+});
+function collides(l1, l2) {
+	if (l1.i === l2.i) return false;
+	if (l1.x + l1.w <= l2.x) return false;
+	if (l1.x >= l2.x + l2.w) return false;
+	if (l1.y + l1.h <= l2.y) return false;
+	if (l1.y >= l2.y + l2.h) return false;
+	return true;
+}
+function getFirstCollision(layout, item) {
+	return layout.find((other) => collides(other, item));
+}
+function sortLayout(layout, compactType) {
+	return layout.toSorted((a, b) => {
+		if (compactType === "horizontal") {
+			if (a.x > b.x || a.x === b.x && a.y > b.y) return 1;
+			return -1;
+		}
+		if (a.y > b.y || a.y === b.y && a.x > b.x) return 1;
+		return -1;
+	});
+}
+function compactItem(compareWith, l, compactType, cols) {
+	const item = { ...l };
+	if (compactType === "vertical") {
+		item.y = Math.min(item.y, Math.max(0, ...compareWith.map((c) => c.y + c.h)));
+		while (item.y > 0 && !getFirstCollision(compareWith, item)) item.y--;
+		let collision = getFirstCollision(compareWith, item);
+		while (collision) {
+			item.y = collision.y + collision.h;
+			collision = getFirstCollision(compareWith, item);
+		}
+	} else if (compactType === "horizontal") {
+		while (item.x > 0 && !getFirstCollision(compareWith, item)) item.x--;
+		let collision = getFirstCollision(compareWith, item);
+		while (collision) {
+			item.x = collision.x + collision.w;
+			collision = getFirstCollision(compareWith, item);
+		}
+	}
+	item.x = Math.max(0, Math.min(cols - item.w, item.x));
+	item.y = Math.max(0, item.y);
+	return item;
+}
+function compactLayout(layout, compactType, cols) {
+	const compareWith = [];
+	const sorted = sortLayout(layout, compactType);
+	const out = [];
+	for (const item of sorted) {
+		let compacted = { ...item };
+		if (!compacted.static && compactType) compacted = compactItem(compareWith, compacted, compactType, cols);
+		compareWith.push(compacted);
+		out.push(compacted);
+	}
+	return out;
+}
+function moveElement(layout, item, x, y, preventCollision, cols, compactType) {
+	if (item.static) return layout;
+	const nx = Math.max(0, Math.min(cols - item.w, x));
+	const ny = Math.max(0, y);
+	const movedItem = {
+		...item,
+		x: nx,
+		y: ny
+	};
+	if (preventCollision) {
+		if (getFirstCollision(layout.filter((l) => l.i !== item.i), movedItem)) return layout;
+	}
+	return compactLayout(layout.map((l) => l.i === item.i ? movedItem : { ...l }), compactType, cols);
+}
+function getColsForWidth(width, breakpoints = defaultBreakpoints, cols = defaultCols) {
+	if (typeof cols === "number") return cols;
+	const mergedBreakpoints = {
+		...defaultBreakpoints,
+		...breakpoints
+	};
+	const mergedCols = {
+		...defaultCols,
+		...cols
+	};
+	if (width >= mergedBreakpoints.lg) return mergedCols.lg;
+	if (width >= mergedBreakpoints.md) return mergedCols.md;
+	if (width >= mergedBreakpoints.sm) return mergedCols.sm;
+	if (width >= mergedBreakpoints.xs) return mergedCols.xs;
+	return mergedCols.xxs;
+}
+const DashboardGridContext = React$1.createContext(null);
+const DEFAULT_GRID_MARGIN = [12, 12];
+const DEFAULT_CONTAINER_PADDING = [12, 12];
+function DashboardGrid({ className, variant, layout: externalLayout, cols: colsProp = 12, breakpoints = defaultBreakpoints, rowHeight = 60, margin = DEFAULT_GRID_MARGIN, containerPadding = DEFAULT_CONTAINER_PADDING, compactType = "vertical", preventCollision = false, isDraggable = true, isResizable = true, showGridLines = false, onLayoutChange, onTileRemove, render, children, ...props }) {
+	const containerRef = React$1.useRef(null);
+	const [containerWidth, setContainerWidth] = React$1.useState(0);
+	const currentCols = React$1.useMemo(() => {
+		return getColsForWidth(containerWidth || 1200, breakpoints, colsProp);
+	}, [
+		containerWidth,
+		breakpoints,
+		colsProp
+	]);
+	const [layout, setLayout] = React$1.useState(() => compactLayout(externalLayout, compactType, currentCols));
+	const [dragItem, setDragItem] = React$1.useState(null);
+	const [resizeItem, setResizeItem] = React$1.useState(null);
+	const layoutRef = React$1.useRef(layout);
+	const currentColsRef = React$1.useRef(currentCols);
+	const compactTypeRef = React$1.useRef(compactType);
+	const preventCollisionRef = React$1.useRef(preventCollision);
+	const onLayoutChangeRef = React$1.useRef(onLayoutChange);
+	React$1.useEffect(() => {
+		layoutRef.current = layout;
+		currentColsRef.current = currentCols;
+		compactTypeRef.current = compactType;
+		preventCollisionRef.current = preventCollision;
+		onLayoutChangeRef.current = onLayoutChange;
+	});
+	React$1.useEffect(() => {
+		setLayout(compactLayout(externalLayout, compactType, currentCols));
+	}, [
+		externalLayout,
+		compactType,
+		currentCols
+	]);
+	React$1.useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) setContainerWidth(entry.contentRect.width);
+		});
+		observer.observe(el);
+		setContainerWidth(el.clientWidth);
+		return () => observer.disconnect();
+	}, []);
+	const colWidth = React$1.useMemo(() => {
+		if (!containerWidth) return 0;
+		const availableWidth = containerWidth - containerPadding[0] * 2 - margin[0] * (currentCols - 1);
+		return Math.max(10, availableWidth / currentCols);
+	}, [
+		containerWidth,
+		containerPadding,
+		margin,
+		currentCols
+	]);
+	const maxRows = React$1.useMemo(() => {
+		return Math.max(4, ...layout.map((item) => item.y + item.h));
+	}, [layout]);
+	const containerHeight = React$1.useMemo(() => {
+		return maxRows * rowHeight + (maxRows - 1) * margin[1] + containerPadding[1] * 2;
+	}, [
+		maxRows,
+		rowHeight,
+		margin,
+		containerPadding
+	]);
+	const handlePointerStart = React$1.useCallback((id, mode, e) => {
+		const targetItem = layoutRef.current.find((l) => l.i === id);
+		if (!targetItem || targetItem.static) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const startX = e.clientX;
+		const startY = e.clientY;
+		const initialItem = { ...targetItem };
+		if (mode === "drag") setDragItem(initialItem);
+		else setResizeItem(initialItem);
+		const onPointerMove = (moveEvent) => {
+			const deltaX = moveEvent.clientX - startX;
+			const deltaY = moveEvent.clientY - startY;
+			const activeCols = currentColsRef.current;
+			const activeCompactType = compactTypeRef.current;
+			const activePreventCollision = preventCollisionRef.current;
+			if (mode === "drag") {
+				const gridDeltaX = Math.round(deltaX / (colWidth + margin[0]));
+				const gridDeltaY = Math.round(deltaY / (rowHeight + margin[1]));
+				const newX = initialItem.x + gridDeltaX;
+				const newY = initialItem.y + gridDeltaY;
+				setLayout((prev) => {
+					const next = moveElement(prev, initialItem, newX, newY, activePreventCollision, activeCols, activeCompactType);
+					const active = next.find((item) => item.i === id);
+					if (active) setDragItem(active);
+					return next;
+				});
+			} else {
+				const gridDeltaW = Math.round(deltaX / (colWidth + margin[0]));
+				const gridDeltaH = Math.round(deltaY / (rowHeight + margin[1]));
+				const minW = initialItem.minW ?? 1;
+				const maxW = initialItem.maxW ?? activeCols;
+				const minH = initialItem.minH ?? 1;
+				const maxH = initialItem.maxH ?? 20;
+				const newW = Math.max(minW, Math.min(maxW, Math.min(activeCols - initialItem.x, initialItem.w + gridDeltaW)));
+				const newH = Math.max(minH, Math.min(maxH, initialItem.h + gridDeltaH));
+				setLayout((prev) => {
+					const updatedItem = {
+						...initialItem,
+						w: newW,
+						h: newH
+					};
+					const next = compactLayout(prev.map((item) => item.i === id ? updatedItem : item), activeCompactType, activeCols);
+					const active = next.find((item) => item.i === id);
+					if (active) setResizeItem(active);
+					return next;
+				});
+			}
+		};
+		const onPointerUp = () => {
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerUp);
+			setDragItem(null);
+			setResizeItem(null);
+			setLayout((finalLayout) => {
+				const compacted = compactLayout(finalLayout, compactTypeRef.current, currentColsRef.current);
+				queueMicrotask(() => {
+					onLayoutChangeRef.current?.(compacted);
+				});
+				return compacted;
+			});
+		};
+		window.addEventListener("pointermove", onPointerMove);
+		window.addEventListener("pointerup", onPointerUp);
+	}, [
+		colWidth,
+		margin,
+		rowHeight
+	]);
+	const handleTileDragStart = React$1.useCallback((id, e) => handlePointerStart(id, "drag", e), [handlePointerStart]);
+	const handleTileResizeStart = React$1.useCallback((id, e) => handlePointerStart(id, "resize", e), [handlePointerStart]);
+	const contextValue = React$1.useMemo(() => ({
+		cols: currentCols,
+		rowHeight,
+		margin,
+		containerPadding,
+		layout,
+		dragItem,
+		resizeItem,
+		isDraggable,
+		isResizable,
+		onTileDragStart: handleTileDragStart,
+		onTileResizeStart: handleTileResizeStart,
+		onTileRemove
+	}), [
+		currentCols,
+		rowHeight,
+		margin,
+		containerPadding,
+		layout,
+		dragItem,
+		resizeItem,
+		isDraggable,
+		isResizable,
+		handleTileDragStart,
+		handleTileResizeStart,
+		onTileRemove
+	]);
+	const activeGhost = dragItem || resizeItem;
+	const defaultProps = {
+		ref: containerRef,
+		className: cn(dashboardGridVariants({
+			variant,
+			className
+		})),
+		style: { height: containerHeight },
+		"data-slot": "dashboard-grid",
+		children: /* @__PURE__ */ jsxs(DashboardGridContext.Provider, {
+			value: contextValue,
+			children: [
+				showGridLines && /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 pointer-events-none opacity-20 bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)]",
+					style: {
+						backgroundSize: `${colWidth + margin[0]}px ${rowHeight + margin[1]}px`,
+						backgroundPosition: `${containerPadding[0]}px ${containerPadding[1]}px`
+					}
+				}),
+				children,
+				activeGhost && /* @__PURE__ */ jsx("div", {
+					className: "absolute rounded-xl border-2 border-dashed border-primary bg-primary/10 transition-[left,top,width,height] duration-75 pointer-events-none z-10",
+					"data-slot": "dashboard-grid-placeholder",
+					style: {
+						left: containerPadding[0] + activeGhost.x * (colWidth + margin[0]),
+						top: containerPadding[1] + activeGhost.y * (rowHeight + margin[1]),
+						width: activeGhost.w * colWidth + (activeGhost.w - 1) * margin[0],
+						height: activeGhost.h * rowHeight + (activeGhost.h - 1) * margin[1]
+					}
+				})
+			]
+		})
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DashboardTile({ className, variant, id, render, children, ...props }) {
+	const context = React$1.useContext(DashboardGridContext);
+	const tileData = context?.layout.find((item) => item.i === id);
+	const isDragging = context?.dragItem?.i === id;
+	const isResizing = context?.resizeItem?.i === id;
+	const top = context && tileData ? context.containerPadding[1] + tileData.y * (context.rowHeight + context.margin[1]) : 0;
+	const defaultProps = {
+		className: cn(dashboardTileVariants({
+			variant,
+			isDragging,
+			isResizing,
+			isStatic: tileData?.static,
+			className
+		})),
+		style: context && tileData ? {
+			transform: `translate3d(${tileData.x * 100}%, ${top}px, 0)`,
+			width: `calc(${tileData.w * (100 / context.cols)}% - ${context.margin[0]}px)`,
+			height: tileData.h * context.rowHeight + (tileData.h - 1) * context.margin[1]
+		} : void 0,
+		"data-slot": "dashboard-tile",
+		"data-tile-id": id,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [children, context?.isResizable && !tileData?.static && /* @__PURE__ */ jsx(DashboardTileResizeHandle, { onPointerDown: (e) => context?.onTileResizeStart(id, e) })] })
+	};
+	const renderedElement = useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+	if (!context || !tileData) return null;
+	return renderedElement;
+}
+function DashboardTileHeader({ className, id, render, children, ...props }) {
+	const context = React$1.useContext(DashboardGridContext);
+	const handlePointerDown = React$1.useCallback((e) => {
+		if (id && context?.isDraggable) context.onTileDragStart(id, e);
+	}, [id, context]);
+	const defaultProps = {
+		className: cn("flex items-center justify-between gap-2 px-3 py-2 border-b border-border/40 bg-muted/30 cursor-grab active:cursor-grabbing select-none text-xs font-medium text-foreground shrink-0", className),
+		onPointerDown: handlePointerDown,
+		"data-slot": "dashboard-tile-header",
+		children: children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5 truncate",
+			children: [/* @__PURE__ */ jsx(GripVertical, { className: "size-3.5 text-muted-foreground/60 shrink-0" }), /* @__PURE__ */ jsx(DashboardTileTitle, {})]
+		}), /* @__PURE__ */ jsx(DashboardTileControls, { id })] })
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DashboardTileTitle({ className, render, children, ...props }) {
+	const defaultProps = {
+		className: cn("font-semibold truncate text-xs text-foreground", className),
+		"data-slot": "dashboard-tile-title",
+		children: children || "Widget Tile"
+	};
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DashboardTileControls({ className, id, render, children, ...props }) {
+	const context = React$1.useContext(DashboardGridContext);
+	const defaultProps = {
+		className: cn("flex items-center gap-1 shrink-0", className),
+		onPointerDown: (e) => e.stopPropagation(),
+		"data-slot": "dashboard-tile-controls",
+		children: children || id && context?.onTileRemove && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => context.onTileRemove?.(id),
+			className: "p-1 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-11",
+			"aria-label": "Remove Widget",
+			children: /* @__PURE__ */ jsx(Cancel, { className: "size-3" })
+		})
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DashboardTileHandle({ className, id, render, ...props }) {
+	const context = React$1.useContext(DashboardGridContext);
+	const handlePointerDown = React$1.useCallback((e) => {
+		if (id && context?.isDraggable) context.onTileDragStart(id, e);
+	}, [id, context]);
+	const defaultProps = {
+		className: cn("flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border border-border/40 bg-muted/40 cursor-grab active:cursor-grabbing select-none text-xs font-medium text-muted-foreground hover:text-foreground", className),
+		onPointerDown: handlePointerDown,
+		"data-slot": "dashboard-tile-handle",
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(GripVertical, { className: "size-3.5 opacity-60 shrink-0" }), /* @__PURE__ */ jsx("span", {
+			className: "truncate flex-1",
+			children: "Drag Handle"
+		})] })
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DashboardTileResizeHandle({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("absolute bottom-1 right-1 size-4 cursor-se-resize flex items-center justify-center opacity-40 hover:opacity-100 transition-opacity touch-none pointer-coarse:after:absolute pointer-coarse:after:size-8", className),
+		"data-slot": "dashboard-tile-resize-handle",
+		children: /* @__PURE__ */ jsxs("svg", {
+			className: "size-3 text-muted-foreground",
+			viewBox: "0 0 6 6",
+			fill: "currentColor",
+			children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: "5",
+					cy: "5",
+					r: "1"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "5",
+					cy: "2",
+					r: "1"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "2",
+					cy: "5",
+					r: "1"
+				})
+			]
+		})
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { DashboardGrid, DashboardTile, DashboardTileControls, DashboardTileHandle, DashboardTileHeader, DashboardTileResizeHandle, DashboardTileTitle, compactLayout, dashboardGridVariants, dashboardTileVariants, defaultBreakpoints, defaultCols };

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

@@ -0,0 +1,29 @@
+import { DateRange } from "./calendar.js";
+import * as React$1 from "react";
+//#region src/components/date-picker.d.ts
+export interface DatePickerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onSelect" | "defaultValue"> {
+  mode?: "single" | "range";
+  triggerType?: "button" | "input";
+  defaultValue?: Date | DateRange;
+  value?: Date | DateRange;
+  onSelect?: (value: Date | DateRange | undefined) => void;
+  placeholder?: string;
+  formatStr?: "PPP" | "LLL dd, y" | "yyyy-MM-dd";
+  minDate?: Date;
+  maxDate?: Date;
+  disabled?: boolean | Date | Date[] | ((date: Date) => boolean);
+  numberOfMonths?: number;
+  fixedWeeks?: boolean;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  showOutsideDays?: boolean;
+  disableOutsideDays?: boolean;
+  triggerClassName?: string;
+  triggerVariant?: "default" | "outline" | "ghost" | "secondary";
+  triggerSize?: "default" | "sm" | "lg" | "xs";
+}
+declare function DatePicker({ className, mode, triggerType, defaultValue, value, onSelect, placeholder, formatStr, minDate, maxDate, disabled, numberOfMonths, fixedWeeks, weekStartsOn, showOutsideDays, disableOutsideDays, triggerClassName, triggerVariant, triggerSize, ...props }: DatePickerProps): React$1.JSX.Element;
+declare namespace DatePicker {
+  var displayName: string;
+}
+//#endregion
+export { DatePicker };