xiod-ui 1.0.0

package/dist/components/draggable.d.ts

@@ -0,0 +1,42 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/draggable.d.ts
+export type DraggableBounds = "viewport" | "parent" | "none";
+export declare const draggableVariants: (props?: ({
+  variant?: "default" | "expressive" | "flat" | null | undefined;
+  isDragging?: boolean | null | undefined;
+  isResizing?: boolean | null | undefined;
+  isMinimized?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface DraggableProps extends useRender.ComponentProps<"div">, VariantProps<typeof draggableVariants> {
+  defaultX?: number;
+  defaultY?: number;
+  defaultWidth?: number;
+  defaultHeight?: number;
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  bounds?: DraggableBounds;
+  isDraggable?: boolean;
+  isResizable?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function Draggable({ className, variant, defaultX, defaultY, defaultWidth, defaultHeight, minWidth, minHeight, maxWidth, maxHeight, bounds, isDraggable, isResizable, open: controlledOpen, defaultOpen, onOpenChange, render, children, ...props }: DraggableProps): React$1.ReactElement | null;
+export interface DraggableHeaderProps extends useRender.ComponentProps<"div"> {}
+declare function DraggableHeader({ className, render, children, ...props }: DraggableHeaderProps): React$1.ReactElement;
+export interface DraggableTitleProps extends useRender.ComponentProps<"span"> {}
+declare function DraggableTitle({ className, render, children, ...props }: DraggableTitleProps): React$1.ReactElement;
+export interface DraggableControlsProps extends useRender.ComponentProps<"div"> {}
+declare function DraggableControls({ className, render, children, ...props }: DraggableControlsProps): React$1.ReactElement;
+export interface DraggableBodyProps extends useRender.ComponentProps<"div"> {}
+declare function DraggableBody({ className, render, children, ...props }: DraggableBodyProps): React$1.ReactElement | null;
+export interface DraggableFooterProps extends useRender.ComponentProps<"div"> {}
+declare function DraggableFooter({ className, render, children, ...props }: DraggableFooterProps): React$1.ReactElement | null;
+export interface DraggableResizeHandleProps extends useRender.ComponentProps<"div"> {}
+declare function DraggableResizeHandle({ className, render, ...props }: DraggableResizeHandleProps): React$1.ReactElement;
+//#endregion
+export { Draggable, DraggableBody, DraggableControls, DraggableFooter, DraggableHeader, DraggableResizeHandle, DraggableTitle };

package/dist/components/draggable.js

@@ -0,0 +1,346 @@
+"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 { ArrowExpandDiagonalUpRight } from "xiod-icons/icons/ArrowExpandDiagonalUpRight";
+import { ArrowShrinkDiagonalUpRight } from "xiod-icons/icons/ArrowShrinkDiagonalUpRight";
+import { GripHorizontal } from "xiod-icons/icons/GripHorizontal";
+import { MinusSign } from "xiod-icons/icons/MinusSign";
+//#region src/components/draggable.tsx
+const draggableVariants = cva("fixed flex flex-col rounded-xl border bg-card/95 text-card-foreground shadow-lg/15 backdrop-blur-md overflow-hidden select-none transition-[box-shadow,border-color] duration-150 z-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "border-border/80 bg-card/95 shadow-lg/10",
+			expressive: "border-primary/30 bg-card/95 shadow-primary/10 shadow-xl/15",
+			flat: "border-border/60 bg-muted/90 shadow-xs/5"
+		},
+		isDragging: {
+			true: "z-50 shadow-2xl/25 border-primary transition-none cursor-grabbing opacity-95",
+			false: ""
+		},
+		isResizing: {
+			true: "z-50 shadow-xl/20 border-primary transition-none opacity-95",
+			false: ""
+		},
+		isMinimized: {
+			true: "h-auto! min-h-0!",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		isDragging: false,
+		isResizing: false,
+		isMinimized: false
+	}
+});
+const DraggableContext = React$1.createContext(null);
+function Draggable({ className, variant, defaultX = 40, defaultY = 40, defaultWidth = 360, defaultHeight = 300, minWidth = 240, minHeight = 160, maxWidth = 800, maxHeight = 600, bounds = "viewport", isDraggable = true, isResizable = true, open: controlledOpen, defaultOpen = true, onOpenChange, render, children, ...props }) {
+	const panelRef = React$1.useRef(null);
+	const [uncontrolledOpen, setUncontrolledOpen] = React$1.useState(defaultOpen);
+	const isOpen = controlledOpen ?? uncontrolledOpen;
+	const [position, setPosition] = React$1.useState({
+		x: defaultX,
+		y: defaultY
+	});
+	const [size, setSize] = React$1.useState({
+		width: defaultWidth,
+		height: defaultHeight
+	});
+	const [isDragging, setIsDragging] = React$1.useState(false);
+	const [isResizing, setIsResizing] = React$1.useState(false);
+	const [isMinimized, setIsMinimized] = React$1.useState(false);
+	const [isMaximized, setIsMaximized] = React$1.useState(false);
+	const prevSizeRef = React$1.useRef({
+		width: defaultWidth,
+		height: defaultHeight
+	});
+	const prevPosRef = React$1.useRef({
+		x: defaultX,
+		y: defaultY
+	});
+	const handleClose = React$1.useCallback(() => {
+		if (controlledOpen === void 0) setUncontrolledOpen(false);
+		onOpenChange?.(false);
+	}, [controlledOpen, onOpenChange]);
+	const handleToggleMinimize = React$1.useCallback(() => {
+		setIsMinimized((prev) => !prev);
+	}, []);
+	const handleToggleMaximize = React$1.useCallback(() => {
+		if (isMaximized) {
+			setSize(prevSizeRef.current);
+			setPosition(prevPosRef.current);
+			setIsMaximized(false);
+		} else {
+			prevSizeRef.current = size;
+			prevPosRef.current = position;
+			setPosition({
+				x: 12,
+				y: 12
+			});
+			setSize({
+				width: window.innerWidth - 24,
+				height: window.innerHeight - 24
+			});
+			setIsMaximized(true);
+		}
+	}, [
+		isMaximized,
+		size,
+		position
+	]);
+	const handleDragStart = React$1.useCallback((e) => {
+		if (!isDraggable || isMaximized) return;
+		e.preventDefault();
+		setIsDragging(true);
+		const startX = e.clientX - position.x;
+		const startY = e.clientY - position.y;
+		const onPointerMove = (moveEvent) => {
+			let newX = moveEvent.clientX - startX;
+			let newY = moveEvent.clientY - startY;
+			if (bounds === "viewport") {
+				newX = Math.max(0, Math.min(window.innerWidth - size.width, newX));
+				newY = Math.max(0, Math.min(window.innerHeight - (isMinimized ? 44 : size.height), newY));
+			}
+			setPosition({
+				x: newX,
+				y: newY
+			});
+		};
+		const onPointerUp = () => {
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerUp);
+			setIsDragging(false);
+		};
+		window.addEventListener("pointermove", onPointerMove);
+		window.addEventListener("pointerup", onPointerUp);
+	}, [
+		isDraggable,
+		isMaximized,
+		position,
+		bounds,
+		size,
+		isMinimized
+	]);
+	const handleResizeStart = React$1.useCallback((e) => {
+		if (!isResizable || isMaximized || isMinimized) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setIsResizing(true);
+		const startX = e.clientX;
+		const startY = e.clientY;
+		const startWidth = size.width;
+		const startHeight = size.height;
+		const onPointerMove = (moveEvent) => {
+			const deltaX = moveEvent.clientX - startX;
+			const deltaY = moveEvent.clientY - startY;
+			const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + deltaX));
+			const newHeight = Math.max(minHeight, Math.min(maxHeight, startHeight + deltaY));
+			setSize({
+				width: newWidth,
+				height: newHeight
+			});
+		};
+		const onPointerUp = () => {
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerUp);
+			setIsResizing(false);
+		};
+		window.addEventListener("pointermove", onPointerMove);
+		window.addEventListener("pointerup", onPointerUp);
+	}, [
+		isResizable,
+		isMaximized,
+		isMinimized,
+		size,
+		minWidth,
+		maxWidth,
+		minHeight,
+		maxHeight
+	]);
+	const contextValue = React$1.useMemo(() => ({
+		isOpen,
+		isMinimized,
+		isMaximized,
+		isDraggable,
+		isResizable,
+		onDragStart: handleDragStart,
+		onResizeStart: handleResizeStart,
+		onToggleMinimize: handleToggleMinimize,
+		onToggleMaximize: handleToggleMaximize,
+		onClose: handleClose
+	}), [
+		isOpen,
+		isMinimized,
+		isMaximized,
+		isDraggable,
+		isResizable,
+		handleDragStart,
+		handleResizeStart,
+		handleToggleMinimize,
+		handleToggleMaximize,
+		handleClose
+	]);
+	const defaultProps = {
+		ref: panelRef,
+		className: cn(draggableVariants({
+			variant,
+			isDragging,
+			isResizing,
+			isMinimized,
+			className
+		})),
+		style: {
+			left: position.x,
+			top: position.y,
+			width: size.width,
+			height: isMinimized ? "auto" : size.height
+		},
+		"data-slot": "draggable",
+		children: /* @__PURE__ */ jsxs(DraggableContext.Provider, {
+			value: contextValue,
+			children: [children, isResizable && !isMinimized && !isMaximized && /* @__PURE__ */ jsx(DraggableResizeHandle, { onPointerDown: handleResizeStart })]
+		})
+	};
+	const renderedElement = useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+	if (!isOpen) return null;
+	return renderedElement;
+}
+function DraggableHeader({ className, render, children, ...props }) {
+	const context = React$1.useContext(DraggableContext);
+	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: context?.onDragStart,
+		"data-slot": "draggable-header",
+		children: children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5 truncate",
+			children: [/* @__PURE__ */ jsx(GripHorizontal, { className: "size-3.5 text-muted-foreground/60 shrink-0" }), /* @__PURE__ */ jsx(DraggableTitle, {})]
+		}), /* @__PURE__ */ jsx(DraggableControls, {})] })
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DraggableTitle({ className, render, children, ...props }) {
+	const defaultProps = {
+		className: cn("font-semibold truncate text-xs", className),
+		"data-slot": "draggable-title",
+		children: children || "Draggable Panel"
+	};
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DraggableControls({ className, render, children, ...props }) {
+	const context = React$1.useContext(DraggableContext);
+	const defaultProps = {
+		className: cn("flex items-center gap-1 shrink-0", className),
+		onPointerDown: (e) => e.stopPropagation(),
+		"data-slot": "draggable-controls",
+		children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: context?.onToggleMinimize,
+				className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-11",
+				"aria-label": "Minimize",
+				children: /* @__PURE__ */ jsx(MinusSign, { className: "size-3" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: context?.onToggleMaximize,
+				className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-11",
+				"aria-label": "Maximize",
+				children: context?.isMaximized ? /* @__PURE__ */ jsx(ArrowShrinkDiagonalUpRight, { className: "size-3" }) : /* @__PURE__ */ jsx(ArrowExpandDiagonalUpRight, { className: "size-3" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: context?.onClose,
+				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": "Close",
+				children: /* @__PURE__ */ jsx(Cancel, { className: "size-3" })
+			})
+		] })
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DraggableBody({ className, render, children, ...props }) {
+	const context = React$1.useContext(DraggableContext);
+	const defaultProps = {
+		className: cn("flex-1 p-3 overflow-y-auto text-xs text-foreground", className),
+		"data-slot": "draggable-body",
+		children
+	};
+	const renderedElement = useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+	if (context?.isMinimized) return null;
+	return renderedElement;
+}
+function DraggableFooter({ className, render, children, ...props }) {
+	const context = React$1.useContext(DraggableContext);
+	const defaultProps = {
+		className: cn("flex items-center justify-end gap-2 px-3 py-2 border-t border-border/40 bg-muted/20 text-xs shrink-0", className),
+		"data-slot": "draggable-footer",
+		children
+	};
+	const renderedElement = useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+	if (context?.isMinimized) return null;
+	return renderedElement;
+}
+function DraggableResizeHandle({ 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": "draggable-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 { Draggable, DraggableBody, DraggableControls, DraggableFooter, DraggableHeader, DraggableResizeHandle, DraggableTitle, draggableVariants };

package/dist/components/drawer.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/drawer.d.ts
+type DrawerPosition = "right" | "left" | "top" | "bottom";
+export declare const DrawerCreateHandle: typeof DrawerPrimitive.createHandle;
+export declare function Drawer({ swipeDirection, position, ...props }: DrawerPrimitive.Root.Props & {
+  position?: DrawerPosition;
+}): React.ReactElement;
+export declare const DrawerPortal: typeof DrawerPrimitive.Portal;
+export declare function DrawerTrigger(props: DrawerPrimitive.Trigger.Props): React.ReactElement;
+export declare function DrawerClose(props: DrawerPrimitive.Close.Props): React.ReactElement;
+export declare function DrawerSwipeArea({ className, position: positionProp, ...props }: DrawerPrimitive.SwipeArea.Props & {
+  position?: DrawerPosition;
+}): React.ReactElement;
+export declare function DrawerBackdrop({ className, ...props }: DrawerPrimitive.Backdrop.Props): React.ReactElement;
+export declare function DrawerViewport({ className, position, variant, ...props }: DrawerPrimitive.Viewport.Props & {
+  position?: DrawerPosition;
+  variant?: "default" | "straight" | "inset";
+}): React.ReactElement;
+export declare function DrawerPopup({ className, children, showCloseButton, position: positionProp, variant, showBar, ...props }: DrawerPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+  position?: DrawerPosition;
+  variant?: "default" | "straight" | "inset";
+  showBar?: boolean;
+}): React.ReactElement;
+export declare function DrawerHeader({ className, allowSelection, render, ...props }: useRender.ComponentProps<"div"> & {
+  allowSelection?: boolean;
+}): React.ReactElement;
+export declare function DrawerFooter({ className, variant, allowSelection, render, ...props }: useRender.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+  allowSelection?: boolean;
+}): React.ReactElement;
+export declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): React.ReactElement;
+export declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): React.ReactElement;
+export declare function DrawerPanel({ className, scrollFade, scrollable, allowSelection, render, ...props }: useRender.ComponentProps<"div"> & {
+  scrollFade?: boolean;
+  scrollable?: boolean;
+  allowSelection?: boolean;
+}): React.ReactElement;
+export declare function DrawerBar({ className, position: positionProp, render, ...props }: useRender.ComponentProps<"div"> & {
+  position?: DrawerPosition;
+}): React.ReactElement;
+export declare const DrawerContent: typeof DrawerPrimitive.Content;
+export declare function DrawerMenu({ className, render, ...props }: useRender.ComponentProps<"nav">): React.ReactElement;
+export declare function DrawerMenuItem({ className, variant, render, disabled, ...props }: useRender.ComponentProps<"button"> & {
+  variant?: "default" | "destructive";
+}): React.ReactElement;
+export declare function DrawerMenuSeparator({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
+export declare function DrawerMenuGroup({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
+export declare function DrawerMenuGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement;
+export declare function DrawerMenuTrigger({ className, children, ...props }: DrawerPrimitive.Trigger.Props): React.ReactElement;
+export declare function DrawerMenuCheckboxItem({ className, children, checked, defaultChecked, onCheckedChange, variant, disabled, render, ...props }: Checkbox.Root.Props & {
+  variant?: "default" | "switch";
+  render?: React.ReactElement;
+}): React.ReactElement;
+export declare function DrawerMenuRadioGroup({ className, ...props }: RadioGroup.Props): React.ReactElement;
+export declare function DrawerMenuRadioItem({ className, children, value, disabled, render, ...props }: Radio.Root.Props & {
+  value: string;
+  render?: React.ReactElement;
+}): React.ReactElement;
+//#endregion
+export { DrawerPrimitive };