@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/ui/popover.mjs

@@ -0,0 +1,176 @@
+import { cn } from "../../lib/utils.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+
+//#region src/client/components/ui/popover.tsx
+function Popover$1(t0) {
+	const $ = c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else props = $[1];
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ jsx(Popover.Root, {
+			"data-slot": "popover",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+function PopoverTrigger(t0) {
+	const $ = c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else props = $[1];
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ jsx(Popover.Trigger, {
+			"data-slot": "popover-trigger",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+function PopoverContent(t0) {
+	const $ = c(18);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({className, align: t1, alignOffset: t2, side: t3, sideOffset: t4, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+		t4 = $[6];
+	}
+	const align = t1 === void 0 ? "center" : t1;
+	const alignOffset = t2 === void 0 ? 0 : t2;
+	const side = t3 === void 0 ? "bottom" : t3;
+	const sideOffset = t4 === void 0 ? 4 : t4;
+	let t5;
+	if ($[7] !== className) {
+		t5 = cn("qa-popover__content bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-50 flex min-w-48 origin-(--transform-origin) flex-col gap-4 border p-2.5 text-xs outline-hidden duration-100", className);
+		$[7] = className;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== props || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Popover.Popup, {
+			"data-slot": "popover-content",
+			className: t5,
+			...props
+		});
+		$[9] = props;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== align || $[13] !== alignOffset || $[14] !== side || $[15] !== sideOffset || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			className: "isolate z-50",
+			children: t6
+		}) });
+		$[12] = align;
+		$[13] = alignOffset;
+		$[14] = side;
+		$[15] = sideOffset;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+}
+function PopoverHeader(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("qa-popover__header flex flex-col gap-1 text-xs", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			"data-slot": "popover-header",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function PopoverTitle(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("qa-popover__title text-sm font-medium", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Popover.Title, {
+			"data-slot": "popover-title",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+
+//#endregion
+export { Popover$1 as Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/client/components/ui/responsive-dialog.mjs

@@ -0,0 +1,308 @@
+"use client";
+
+import { cn } from "../../lib/utils.mjs";
+import { DialogContent, DialogFooter, DialogHeader } from "./dialog.mjs";
+import { useIsMobile } from "../../hooks/use-media-query.mjs";
+import { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } from "./drawer.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/client/components/ui/responsive-dialog.tsx
+const ResponsiveDialogContext = React.createContext(null);
+function useResponsiveDialog() {
+	const context = React.useContext(ResponsiveDialogContext);
+	if (!context) throw new Error("ResponsiveDialog components must be used within ResponsiveDialog");
+	return context;
+}
+function ResponsiveDialog(t0) {
+	const $ = c(16);
+	const { children, open, onOpenChange } = t0;
+	const isMobile = useIsMobile();
+	let t1;
+	if ($[0] !== isMobile) {
+		t1 = { isMobile };
+		$[0] = isMobile;
+		$[1] = t1;
+	} else t1 = $[1];
+	const contextValue = t1;
+	if (isMobile) {
+		let t2$1;
+		if ($[2] !== children || $[3] !== onOpenChange || $[4] !== open) {
+			t2$1 = /* @__PURE__ */ jsx(Drawer, {
+				open,
+				onOpenChange,
+				children
+			});
+			$[2] = children;
+			$[3] = onOpenChange;
+			$[4] = open;
+			$[5] = t2$1;
+		} else t2$1 = $[5];
+		let t3$1;
+		if ($[6] !== contextValue || $[7] !== t2$1) {
+			t3$1 = /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, {
+				value: contextValue,
+				children: t2$1
+			});
+			$[6] = contextValue;
+			$[7] = t2$1;
+			$[8] = t3$1;
+		} else t3$1 = $[8];
+		return t3$1;
+	}
+	let t2;
+	if ($[9] !== children || $[10] !== onOpenChange || $[11] !== open) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Root, {
+			open,
+			onOpenChange,
+			children
+		});
+		$[9] = children;
+		$[10] = onOpenChange;
+		$[11] = open;
+		$[12] = t2;
+	} else t2 = $[12];
+	let t3;
+	if ($[13] !== contextValue || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, {
+			value: contextValue,
+			children: t2
+		});
+		$[13] = contextValue;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+}
+function ResponsiveDialogContent(t0) {
+	const $ = c(11);
+	const { children, className, showCloseButton } = t0;
+	const { isMobile } = useResponsiveDialog();
+	if (isMobile) {
+		let t1$1;
+		if ($[0] !== className) {
+			t1$1 = cn("max-h-[96vh]", className);
+			$[0] = className;
+			$[1] = t1$1;
+		} else t1$1 = $[1];
+		let t2$1;
+		if ($[2] !== children || $[3] !== t1$1) {
+			t2$1 = /* @__PURE__ */ jsx(DrawerContent, {
+				className: t1$1,
+				children
+			});
+			$[2] = children;
+			$[3] = t1$1;
+			$[4] = t2$1;
+		} else t2$1 = $[4];
+		return t2$1;
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = cn("qa-responsive-dialog__content", className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== showCloseButton || $[9] !== t1) {
+		t2 = /* @__PURE__ */ jsx(DialogContent, {
+			showCloseButton,
+			className: t1,
+			children
+		});
+		$[7] = children;
+		$[8] = showCloseButton;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	return t2;
+}
+function ResponsiveDialogHeader(t0) {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { isMobile } = useResponsiveDialog();
+	if (isMobile) {
+		let t1$1;
+		if ($[3] !== className || $[4] !== props) {
+			t1$1 = /* @__PURE__ */ jsx(DrawerHeader, {
+				className,
+				...props
+			});
+			$[3] = className;
+			$[4] = props;
+			$[5] = t1$1;
+		} else t1$1 = $[5];
+		return t1$1;
+	}
+	let t1;
+	if ($[6] !== className || $[7] !== props) {
+		t1 = /* @__PURE__ */ jsx(DialogHeader, {
+			className,
+			...props
+		});
+		$[6] = className;
+		$[7] = props;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
+}
+function ResponsiveDialogTitle(t0) {
+	const $ = c(14);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	const { isMobile } = useResponsiveDialog();
+	if (isMobile) {
+		let t1$1;
+		if ($[4] !== children || $[5] !== className || $[6] !== props) {
+			t1$1 = /* @__PURE__ */ jsx(DrawerTitle, {
+				className,
+				...props,
+				children
+			});
+			$[4] = children;
+			$[5] = className;
+			$[6] = props;
+			$[7] = t1$1;
+		} else t1$1 = $[7];
+		return t1$1;
+	}
+	let t1;
+	if ($[8] !== className) {
+		t1 = cn("qa-responsive-dialog__title text-sm font-medium", className);
+		$[8] = className;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== children || $[11] !== props || $[12] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Title, {
+			"data-slot": "responsive-dialog-title",
+			className: t1,
+			...props,
+			children
+		});
+		$[10] = children;
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+	} else t2 = $[13];
+	return t2;
+}
+function ResponsiveDialogDescription(t0) {
+	const $ = c(14);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	const { isMobile } = useResponsiveDialog();
+	if (isMobile) {
+		let t1$1;
+		if ($[4] !== children || $[5] !== className || $[6] !== props) {
+			t1$1 = /* @__PURE__ */ jsx(DrawerDescription, {
+				className,
+				...props,
+				children
+			});
+			$[4] = children;
+			$[5] = className;
+			$[6] = props;
+			$[7] = t1$1;
+		} else t1$1 = $[7];
+		return t1$1;
+	}
+	let t1;
+	if ($[8] !== className) {
+		t1 = cn("text-muted-foreground text-xs/relaxed", className);
+		$[8] = className;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== children || $[11] !== props || $[12] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Description, {
+			"data-slot": "responsive-dialog-description",
+			className: t1,
+			...props,
+			children
+		});
+		$[10] = children;
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+	} else t2 = $[13];
+	return t2;
+}
+function ResponsiveDialogFooter(t0) {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { isMobile } = useResponsiveDialog();
+	if (isMobile) {
+		let t1$1;
+		if ($[3] !== className || $[4] !== props) {
+			t1$1 = /* @__PURE__ */ jsx(DrawerFooter, {
+				className,
+				...props
+			});
+			$[3] = className;
+			$[4] = props;
+			$[5] = t1$1;
+		} else t1$1 = $[5];
+		return t1$1;
+	}
+	let t1;
+	if ($[6] !== className || $[7] !== props) {
+		t1 = /* @__PURE__ */ jsx(DialogFooter, {
+			className,
+			...props
+		});
+		$[6] = className;
+		$[7] = props;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
+}
+
+//#endregion
+export { ResponsiveDialog, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle };

package/dist/client/components/ui/search-input.mjs

@@ -0,0 +1,139 @@
+import { cn } from "../../lib/utils.mjs";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.mjs";
+import { Kbd } from "./kbd.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/ui/search-input.tsx
+/**
+* SearchInput - Consistent search input with icon, loading state, clear button, and keyboard shortcut
+*
+* @example
+* ```tsx
+* // Basic usage
+* <SearchInput
+*   value={searchTerm}
+*   onChange={(e) => setSearchTerm(e.target.value)}
+*   onClear={() => setSearchTerm("")}
+*   placeholder="Search..."
+* />
+*
+* // With keyboard shortcut
+* <SearchInput
+*   shortcut="⌘K"
+*   onClick={openSearchDialog}
+*   readOnly
+* />
+*
+* // Loading state
+* <SearchInput isLoading={isSearching} ... />
+* ```
+*/
+function SearchInput(t0) {
+	const $ = c(26);
+	let className;
+	let containerClassName;
+	let onClear;
+	let props;
+	let shortcut;
+	let t1;
+	let value;
+	if ($[0] !== t0) {
+		({shortcut, onClear, isLoading: t1, containerClassName, className, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = containerClassName;
+		$[3] = onClear;
+		$[4] = props;
+		$[5] = shortcut;
+		$[6] = t1;
+		$[7] = value;
+	} else {
+		className = $[1];
+		containerClassName = $[2];
+		onClear = $[3];
+		props = $[4];
+		shortcut = $[5];
+		t1 = $[6];
+		value = $[7];
+	}
+	const isLoading = t1 === void 0 ? false : t1;
+	const hasValue = value !== void 0 && value !== "";
+	const showClearButton = hasValue && onClear;
+	const showShortcut = shortcut && !hasValue;
+	let t2;
+	if ($[8] !== containerClassName) {
+		t2 = cn("qa-search-input bg-transparent", containerClassName);
+		$[8] = containerClassName;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== isLoading) {
+		t3 = /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-start",
+			children: isLoading ? /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:spinner-gap",
+				className: "text-muted-foreground size-4 animate-spin"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:magnifying-glass",
+				className: "text-muted-foreground size-4"
+			})
+		});
+		$[10] = isLoading;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== className || $[13] !== props || $[14] !== value) {
+		t4 = /* @__PURE__ */ jsx(InputGroupInput, {
+			placeholder: "Search...",
+			value,
+			className,
+			...props
+		});
+		$[12] = className;
+		$[13] = props;
+		$[14] = value;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== onClear || $[17] !== shortcut || $[18] !== showClearButton || $[19] !== showShortcut) {
+		t5 = (showClearButton || showShortcut) && /* @__PURE__ */ jsxs(InputGroupAddon, {
+			align: "inline-end",
+			children: [showClearButton && /* @__PURE__ */ jsx(InputGroupButton, {
+				onClick: onClear,
+				size: "icon-xs",
+				className: "text-muted-foreground hover:text-foreground",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:x",
+					className: "size-3"
+				})
+			}), showShortcut && /* @__PURE__ */ jsx(Kbd, { children: shortcut })]
+		});
+		$[16] = onClear;
+		$[17] = shortcut;
+		$[18] = showClearButton;
+		$[19] = showShortcut;
+		$[20] = t5;
+	} else t5 = $[20];
+	let t6;
+	if ($[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(InputGroup, {
+			className: t2,
+			children: [
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+	} else t6 = $[25];
+	return t6;
+}
+
+//#endregion
+export { SearchInput };