@classytic/fluid 0.2.1 → 0.3.2

package/dist/sheet-wrapper-CWNCvYMD.mjs

@@ -0,0 +1,211 @@
+import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from "react";
+import { LoaderIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+
+//#region src/components/client-submit-button.tsx
+function ClientSubmitButton({ children, disabled, loading = false, loadingText, className, variant, size, form, ...props }) {
+	const isDisabled = loading || disabled;
+	const content = loading && loadingText ? loadingText : children;
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "submit",
+		form,
+		"aria-disabled": isDisabled,
+		"aria-busy": loading,
+		className: cn("relative", className),
+		disabled: isDisabled,
+		variant,
+		size,
+		...props,
+		children: [
+			content,
+			loading && /* @__PURE__ */ jsx("span", {
+				className: "animate-spin absolute right-4",
+				children: /* @__PURE__ */ jsx(LoaderIcon, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				className: "sr-only",
+				role: "status",
+				children: loading ? "Loading" : "Submit form"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/sheet-wrapper.tsx
+const SIZE_CLASSES = {
+	right: {
+		sm: "data-[side=right]:sm:max-w-md",
+		default: "data-[side=right]:w-full data-[side=right]:sm:max-w-md data-[side=right]:md:max-w-lg",
+		lg: "data-[side=right]:w-full data-[side=right]:sm:max-w-lg data-[side=right]:md:max-w-2xl data-[side=right]:lg:max-w-4xl",
+		xl: "data-[side=right]:w-full data-[side=right]:sm:max-w-2xl data-[side=right]:md:max-w-4xl data-[side=right]:lg:max-w-5xl",
+		full: "data-[side=right]:w-full data-[side=right]:max-w-full data-[side=right]:sm:max-w-full",
+		mobile: "data-[side=right]:w-[85%] data-[side=right]:sm:max-w-sm",
+		"mobile-nav": "data-[side=right]:w-[300px] data-[side=right]:sm:w-[350px] data-[side=right]:sm:max-w-none"
+	},
+	left: {
+		sm: "data-[side=left]:sm:max-w-md",
+		default: "data-[side=left]:w-full data-[side=left]:sm:max-w-md data-[side=left]:md:max-w-lg",
+		lg: "data-[side=left]:w-full data-[side=left]:sm:max-w-lg data-[side=left]:md:max-w-2xl data-[side=left]:lg:max-w-4xl",
+		xl: "data-[side=left]:w-full data-[side=left]:sm:max-w-2xl data-[side=left]:md:max-w-4xl data-[side=left]:lg:max-w-5xl",
+		full: "data-[side=left]:w-full data-[side=left]:max-w-full data-[side=left]:sm:max-w-full",
+		mobile: "data-[side=left]:w-[85%] data-[side=left]:sm:max-w-sm",
+		"mobile-nav": "data-[side=left]:w-[300px] data-[side=left]:sm:w-[350px] data-[side=left]:sm:max-w-none"
+	},
+	vertical: {
+		sm: "sm:max-w-md",
+		default: "w-full sm:max-w-md md:max-w-lg",
+		lg: "w-full sm:max-w-lg md:max-w-2xl lg:max-w-4xl",
+		xl: "w-full sm:max-w-2xl md:max-w-4xl lg:max-w-5xl",
+		full: "w-full max-w-full",
+		mobile: "w-[85%] max-w-sm",
+		"mobile-nav": "w-[300px] sm:w-[350px]"
+	}
+};
+function getSizeClasses(size, side) {
+	return SIZE_CLASSES[side === "left" || side === "right" ? side : "vertical"][size];
+}
+const getPadding = (size, type = "default") => {
+	const isFullSize = size === "full";
+	if (type === "header" || type === "footer") return isFullSize ? "px-6 lg:px-8" : "px-4";
+	return isFullSize ? "p-6 lg:p-8" : "p-4";
+};
+const SheetWrapper = memo(function SheetWrapper({ open, onOpenChange, title, description, children, footer, header, side = "right", size = "default", modal = true, className, headerClassName, contentClassName, footerClassName, innerClassName, hideHeader = false, hideTitle = false, hideDescription = false, hideCloseButton = false, disableContentPadding = false }) {
+	const computedClasses = useMemo(() => ({
+		header: cn("border-b pb-4 pt-6", getPadding(size, "header"), headerClassName),
+		inner: cn("flex-1 overflow-y-auto", !disableContentPadding && getPadding(size), innerClassName),
+		footer: cn("border-t bg-muted/30 pt-4 pb-6 mt-auto", getPadding(size, "footer"), footerClassName)
+	}), [
+		size,
+		headerClassName,
+		innerClassName,
+		footerClassName,
+		disableContentPadding
+	]);
+	const shouldHideTitle = !!header || hideTitle;
+	const shouldHideDescription = !!header || hideDescription;
+	return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange,
+		modal,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side,
+			showCloseButton: !hideCloseButton,
+			className: cn(getSizeClasses(size, side), "flex flex-col p-0", contentClassName, className),
+			children: [
+				!hideHeader && /* @__PURE__ */ jsxs(SheetHeader, {
+					className: computedClasses.header,
+					children: [
+						/* @__PURE__ */ jsx(SheetTitle, {
+							className: shouldHideTitle ? "sr-only" : "",
+							children: title || "Sheet"
+						}),
+						description && /* @__PURE__ */ jsx(SheetDescription, {
+							className: shouldHideDescription ? "sr-only" : "",
+							children: description
+						}),
+						header
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: computedClasses.inner,
+					children
+				}),
+				footer && /* @__PURE__ */ jsx(SheetFooter, {
+					className: computedClasses.footer,
+					children: footer
+				})
+			]
+		})
+	});
+});
+const FormSheet = memo(function FormSheet({ open, onOpenChange, title, description, children, onSubmit, onCancel, submitLabel = "Submit", cancelLabel = "Cancel", submitDisabled = false, submitLoading = false, formId, size = "lg", ...props }) {
+	const handleCancel = useCallback(() => {
+		onCancel?.();
+		onOpenChange?.(false);
+	}, [onCancel, onOpenChange]);
+	return /* @__PURE__ */ jsx(SheetWrapper, {
+		open,
+		onOpenChange,
+		title,
+		description,
+		size,
+		footer: useMemo(() => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col sm:flex-row gap-2 w-full",
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				className: "flex-1",
+				onClick: handleCancel,
+				disabled: submitDisabled || submitLoading,
+				children: cancelLabel
+			}), /* @__PURE__ */ jsx(ClientSubmitButton, {
+				form: formId,
+				className: "flex-1",
+				disabled: submitDisabled,
+				loading: submitLoading,
+				loadingText: "Saving...",
+				children: submitLabel
+			})]
+		}), [
+			cancelLabel,
+			submitLabel,
+			submitDisabled,
+			submitLoading,
+			formId,
+			handleCancel
+		]),
+		...props,
+		children
+	});
+});
+const ConfirmSheet = memo(function ConfirmSheet({ open, onOpenChange, title = "Confirm Action", description, children, onConfirm, onCancel, confirmLabel = "Confirm", cancelLabel = "Cancel", confirmVariant = "default", confirmDisabled = false, confirmLoading = false, size = "sm", ...props }) {
+	const handleConfirm = useCallback(() => {
+		onConfirm?.();
+	}, [onConfirm]);
+	const handleCancel = useCallback(() => {
+		onCancel?.();
+		onOpenChange?.(false);
+	}, [onCancel, onOpenChange]);
+	return /* @__PURE__ */ jsx(SheetWrapper, {
+		open,
+		onOpenChange,
+		title,
+		description,
+		size,
+		footer: useMemo(() => /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2 w-full",
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				className: "flex-1",
+				onClick: handleCancel,
+				children: cancelLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: confirmVariant,
+				className: "flex-1",
+				onClick: handleConfirm,
+				disabled: confirmDisabled || confirmLoading,
+				children: confirmLoading ? "Loading..." : confirmLabel
+			})]
+		}), [
+			cancelLabel,
+			confirmLabel,
+			confirmVariant,
+			confirmDisabled,
+			confirmLoading,
+			handleConfirm,
+			handleCancel
+		]),
+		...props,
+		children
+	});
+});
+
+//#endregion
+export { ClientSubmitButton as i, FormSheet as n, SheetWrapper as r, ConfirmSheet as t };

package/dist/use-base-search-BGgWnWaF.d.mts

@@ -0,0 +1,35 @@
+import { t as FilterConfig } from "./filter-utils-IZ0GtuPo.mjs";
+
+//#region src/hooks/use-base-search.d.ts
+interface UseBaseSearchConfig {
+  basePath: string;
+  searchFields?: Record<string, string>;
+  filterFields?: Record<string, FilterConfig>;
+  defaultSearchType?: string;
+}
+interface UseBaseSearchReturn {
+  searchType: string;
+  setSearchType: (type: string) => void;
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+  filters: Record<string, unknown>;
+  setFilters: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+  updateFilter: (key: string, value: unknown) => void;
+  handleSearch: () => void;
+  clearSearch: () => void;
+  clearSearchValue: () => void;
+  clearFilters: () => void;
+  removeFilter: (key: string) => void;
+  getSearchParams: () => Record<string, string>;
+  filterFields: Record<string, FilterConfig>;
+  hasActiveSearch: boolean;
+  hasActiveFilters: boolean;
+}
+/**
+ * Base search hook that provides common search functionality
+ * Can be extended by specific search hooks for different entities
+ * Supports bracket syntax: field[operator]=value
+ */
+declare function useBaseSearch(config: UseBaseSearchConfig): UseBaseSearchReturn;
+//#endregion
+export { UseBaseSearchReturn as n, useBaseSearch as r, UseBaseSearchConfig as t };

package/dist/use-debounce-xmZucz5e.mjs

@@ -0,0 +1,53 @@
+import { useEffect, useRef, useState } from "react";
+
+//#region src/hooks/use-debounce.ts
+/**
+* useDebounce — Returns a debounced version of the input value.
+*
+* @example
+* ```tsx
+* const [search, setSearch] = useState("");
+* const debouncedSearch = useDebounce(search, 300);
+*
+* useEffect(() => {
+*   fetchResults(debouncedSearch);
+* }, [debouncedSearch]);
+* ```
+*/
+function useDebounce(value, delay = 300) {
+	const [debounced, setDebounced] = useState(value);
+	useEffect(() => {
+		const timer = setTimeout(() => setDebounced(value), delay);
+		return () => clearTimeout(timer);
+	}, [value, delay]);
+	return debounced;
+}
+/**
+* useDebouncedCallback — Returns a debounced version of a callback function.
+*
+* @example
+* ```tsx
+* const debouncedSave = useDebouncedCallback((value: string) => {
+*   saveToApi(value);
+* }, 500);
+*
+* <Input onChange={(e) => debouncedSave(e.target.value)} />
+* ```
+*/
+function useDebouncedCallback(callback, delay = 300) {
+	const timerRef = useRef(void 0);
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	useEffect(() => {
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, []);
+	return (...args) => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => callbackRef.current(...args), delay);
+	};
+}
+
+//#endregion
+export { useDebouncedCallback as n, useDebounce as t };

package/dist/use-keyboard-shortcut-Bl6YM5Q7.mjs

@@ -0,0 +1,82 @@
+import { useEffect, useMemo, useRef } from "react";
+
+//#region src/hooks/use-keyboard-shortcut.ts
+function parseShortcut(shortcut) {
+	const parts = shortcut.toLowerCase().split("+");
+	const result = {
+		key: "",
+		ctrl: false,
+		shift: false,
+		alt: false,
+		meta: false,
+		mod: false
+	};
+	for (const part of parts) switch (part) {
+		case "mod":
+			result.mod = true;
+			break;
+		case "ctrl":
+			result.ctrl = true;
+			break;
+		case "shift":
+			result.shift = true;
+			break;
+		case "alt":
+			result.alt = true;
+			break;
+		case "meta":
+			result.meta = true;
+			break;
+		default: result.key = part;
+	}
+	return result;
+}
+/**
+* useKeyboardShortcut — Register global keyboard shortcuts.
+*
+* `"mod"` maps to Cmd on macOS, Ctrl on Windows/Linux.
+*
+* @example
+* ```tsx
+* useKeyboardShortcut("mod+k", () => setOpen(true));
+* useKeyboardShortcut("mod+shift+p", () => openPalette());
+* useKeyboardShortcut("Escape", () => close(), { disableInInputs: false });
+* ```
+*/
+function useKeyboardShortcut(shortcut, callback, options = {}) {
+	const { enabled = true, preventDefault = true, disableInInputs = true } = options;
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	const parsed = useMemo(() => parseShortcut(shortcut), [shortcut]);
+	useEffect(() => {
+		if (!enabled) return;
+		const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
+		function handler(event) {
+			if (disableInInputs) {
+				const target = event.target;
+				if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) return;
+			}
+			if (event.key.toLowerCase() !== parsed.key && event.code.toLowerCase() !== parsed.key) return;
+			if (parsed.mod) {
+				if (isMac ? !event.metaKey : !event.ctrlKey) return;
+			} else {
+				if (parsed.ctrl !== event.ctrlKey) return;
+				if (parsed.meta !== event.metaKey) return;
+			}
+			if (parsed.shift !== event.shiftKey) return;
+			if (parsed.alt !== event.altKey) return;
+			if (preventDefault) event.preventDefault();
+			callbackRef.current(event);
+		}
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [
+		enabled,
+		parsed,
+		preventDefault,
+		disableInInputs
+	]);
+}
+
+//#endregion
+export { useKeyboardShortcut as t };

package/dist/use-keyboard-shortcut-_mRCh3QO.d.mts

@@ -0,0 +1,24 @@
+//#region src/hooks/use-keyboard-shortcut.d.ts
+interface UseKeyboardShortcutOptions {
+  /** Whether the shortcut is enabled (default: true) */
+  enabled?: boolean;
+  /** Prevent default browser behavior (default: true) */
+  preventDefault?: boolean;
+  /** Disable when input/textarea/contentEditable is focused (default: true) */
+  disableInInputs?: boolean;
+}
+/**
+ * useKeyboardShortcut — Register global keyboard shortcuts.
+ *
+ * `"mod"` maps to Cmd on macOS, Ctrl on Windows/Linux.
+ *
+ * @example
+ * ```tsx
+ * useKeyboardShortcut("mod+k", () => setOpen(true));
+ * useKeyboardShortcut("mod+shift+p", () => openPalette());
+ * useKeyboardShortcut("Escape", () => close(), { disableInInputs: false });
+ * ```
+ */
+declare function useKeyboardShortcut(shortcut: string, callback: (event: KeyboardEvent) => void, options?: UseKeyboardShortcutOptions): void;
+//#endregion
+export { useKeyboardShortcut as n, UseKeyboardShortcutOptions as t };

package/dist/use-media-query-BnVNIKT4.mjs

@@ -0,0 +1,17 @@
+import { useSyncExternalStore } from "react";
+
+//#region src/hooks/use-media-query.ts
+function useMediaQuery(query, defaultValue = false) {
+	const getSnapshot = () => window.matchMedia(query).matches;
+	const getServerSnapshot = () => defaultValue;
+	const subscribe = (onStoreChange) => {
+		const media = window.matchMedia(query);
+		const handler = () => onStoreChange();
+		media.addEventListener("change", handler);
+		return () => media.removeEventListener("change", handler);
+	};
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+//#endregion
+export { useMediaQuery as t };

package/dist/use-mobile-BX3SQVo2.mjs

@@ -0,0 +1,20 @@
+import * as React$1 from "react";
+
+//#region src/hooks/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React$1.useState(void 0);
+	React$1.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+}
+
+//#endregion
+export { useIsMobile as t };

package/dist/use-scroll-detection-CsgsQYvy.mjs

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/hooks/use-scroll-detection.ts
+const useScrollDetection = (ref, delay = 100) => {
+	const [scrollState, setScrollState] = useState({
+		canScrollLeft: false,
+		canScrollRight: false,
+		isScrollable: false
+	});
+	const timeoutRef = useRef(void 0);
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	const checkScroll = useCallback(() => {
+		const scrollContainer = ref.current?.querySelector("[data-slot=\"scroll-area-viewport\"]");
+		if (!scrollContainer) return;
+		const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
+		const isScrollable = scrollWidth > clientWidth;
+		const canScrollLeft = scrollLeft > 5;
+		const canScrollRight = scrollLeft < scrollWidth - clientWidth - 5;
+		setScrollState((prev) => {
+			if (prev.canScrollLeft !== canScrollLeft || prev.canScrollRight !== canScrollRight || prev.isScrollable !== isScrollable) return {
+				canScrollLeft,
+				canScrollRight,
+				isScrollable
+			};
+			return prev;
+		});
+	}, [ref]);
+	const debouncedCheckScroll = useCallback(() => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(checkScroll, delay);
+	}, [checkScroll, delay]);
+	return {
+		...scrollState,
+		checkScroll: debouncedCheckScroll
+	};
+};
+
+//#endregion
+export { useScrollDetection as t };

package/dist/utils-CDue7cEt.d.mts

@@ -0,0 +1,6 @@
+import { ClassValue } from "clsx";
+
+//#region src/utils.d.ts
+declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+export { cn as t };

package/dist/utils-DQ5SCVoW.mjs

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn as t };