erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/drawer-D82Jz6KO.mjs

@@ -0,0 +1,122 @@
+import { t as useOverlayEffects } from "./overlay-TycCIFOu.mjs";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/overlays/drawer/Drawer.tsx
+var basePanel = "relative flex flex-col overflow-hidden rounded-2xl border border-white/30 bg-gradient-to-br from-white/80 via-white/68 to-white/52 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.22),0_8px_28px_rgba(15,23,42,0.14)] ring-1 ring-inset ring-white/25 backdrop-blur-2xl backdrop-saturate-150 dark:border-white/10 dark:from-neutral-950/84 dark:via-neutral-950/72 dark:to-neutral-900/58 dark:shadow-[0_28px_90px_rgba(0,0,0,0.52),0_10px_30px_rgba(0,0,0,0.3)] dark:ring-white/10";
+var positionClasses = {
+	right: "h-[calc(100%-8px)] my-1 mr-1 w-full max-w-md ml-auto border",
+	left: "h-[calc(100%-8px)] my-1 ml-1 w-full max-w-md mr-auto border",
+	top: "w-[calc(100%-8px)] mx-1 mt-1 max-h-[80vh] border",
+	bottom: "w-[calc(100%-8px)] mx-1 mb-1 max-h-[80vh] mt-auto border"
+};
+var getVariants = (position) => {
+	switch (position) {
+		case "left": return {
+			hidden: { x: "-100%" },
+			visible: { x: 0 }
+		};
+		case "right": return {
+			hidden: { x: "100%" },
+			visible: { x: 0 }
+		};
+		case "top": return {
+			hidden: { y: "-100%" },
+			visible: { y: 0 }
+		};
+		case "bottom": return {
+			hidden: { y: "100%" },
+			visible: { y: 0 }
+		};
+	}
+};
+var Drawer = ({ open, onOpenChange, title, description, position = "right", children, footer }) => {
+	const panelRef = useRef(null);
+	useOverlayEffects(panelRef, open);
+	useEffect(() => {
+		if (!open || typeof window === "undefined") return;
+		const handleKey = (event) => {
+			if (event.key === "Escape") onOpenChange?.(false);
+		};
+		window.addEventListener("keydown", handleKey);
+		return () => window.removeEventListener("keydown", handleKey);
+	}, [open, onOpenChange]);
+	const variants = getVariants(position);
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-40 flex overlay-backdrop",
+		role: "presentation",
+		children: [/* @__PURE__ */ jsx(motion.div, {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: { duration: .3 },
+			className: "fixed inset-0 bg-slate-950/24 backdrop-blur-[3px] dark:bg-black/44",
+			onClick: () => onOpenChange?.(false)
+		}), /* @__PURE__ */ jsxs(motion.div, {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": title,
+			className: `${basePanel} ${positionClasses[position]}`,
+			tabIndex: -1,
+			ref: panelRef,
+			onClick: (event) => event.stopPropagation(),
+			initial: "hidden",
+			animate: "visible",
+			exit: "hidden",
+			variants,
+			transition: {
+				type: "spring",
+				damping: 25,
+				stiffness: 200
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute inset-0 bg-linear-to-b from-white/30 via-white/10 to-transparent dark:from-white/10 dark:via-white/[0.03] dark:to-transparent"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute inset-x-0 top-0 h-24 bg-linear-to-b from-white/40 to-transparent dark:from-white/12"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute -right-10 top-[-72px] h-40 w-40 rounded-full bg-white/35 blur-3xl dark:bg-sky-200/10"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "absolute right-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/35 bg-white/45 text-lg font-light text-foreground shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-white/72 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10",
+					"aria-label": "Close drawer",
+					onClick: () => onOpenChange?.(false),
+					children: "×"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative z-10 flex h-full flex-col",
+					children: [
+						(title || description) && /* @__PURE__ */ jsxs("header", {
+							className: "space-y-1 pr-10",
+							children: [title && /* @__PURE__ */ jsx("h2", {
+								className: "text-lg font-semibold tracking-tight text-foreground",
+								children: title
+							}), description && /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-muted-foreground",
+								children: description
+							})]
+						}),
+						children && /* @__PURE__ */ jsx("div", {
+							className: "mt-4 flex-1 overflow-auto space-y-4 pr-1",
+							children
+						}),
+						footer && /* @__PURE__ */ jsx("footer", {
+							className: "mt-6 border-t border-white/20 pt-4 dark:border-white/10",
+							children: footer
+						})
+					]
+				})
+			]
+		})]
+	}) });
+};
+//#endregion
+export { Drawer as t };
+
+//# sourceMappingURL=drawer-D82Jz6KO.mjs.map

package/dist/chunks/drawer-D82Jz6KO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-D82Jz6KO.mjs","names":[],"sources":["../../src/components/overlays/drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport type { DrawerProps, DrawerPosition } from \"./types\";\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\nconst basePanel =\n  \"relative flex flex-col overflow-hidden rounded-2xl border border-white/30 bg-gradient-to-br from-white/80 via-white/68 to-white/52 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.22),0_8px_28px_rgba(15,23,42,0.14)] ring-1 ring-inset ring-white/25 backdrop-blur-2xl backdrop-saturate-150 dark:border-white/10 dark:from-neutral-950/84 dark:via-neutral-950/72 dark:to-neutral-900/58 dark:shadow-[0_28px_90px_rgba(0,0,0,0.52),0_10px_30px_rgba(0,0,0,0.3)] dark:ring-white/10\";\n\nconst positionClasses: Record<DrawerPosition, string> = {\n  right: \"h-[calc(100%-8px)] my-1 mr-1 w-full max-w-md ml-auto border\",\n  left: \"h-[calc(100%-8px)] my-1 ml-1 w-full max-w-md mr-auto border\",\n  top: \"w-[calc(100%-8px)] mx-1 mt-1 max-h-[80vh] border\",\n  bottom: \"w-[calc(100%-8px)] mx-1 mb-1 max-h-[80vh] mt-auto border\",\n};\n\nconst getVariants = (position: DrawerPosition) => {\n  switch (position) {\n    case \"left\":\n      return { hidden: { x: \"-100%\" }, visible: { x: 0 } };\n    case \"right\":\n      return { hidden: { x: \"100%\" }, visible: { x: 0 } };\n    case \"top\":\n      return { hidden: { y: \"-100%\" }, visible: { y: 0 } };\n    case \"bottom\":\n      return { hidden: { y: \"100%\" }, visible: { y: 0 } };\n  }\n};\n\nexport const Drawer = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  position = \"right\",\n  children,\n  footer,\n}: DrawerProps) => {\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  useOverlayEffects(panelRef, open);\n\n  useEffect(() => {\n    if (!open || typeof window === \"undefined\") return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange?.(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  const variants = getVariants(position);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 z-40 flex overlay-backdrop\"\n          role=\"presentation\"\n        >\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"fixed inset-0 bg-slate-950/24 backdrop-blur-[3px] dark:bg-black/44\"\n            onClick={() => onOpenChange?.(false)}\n          />\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} ${positionClasses[position]}`}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n            variants={variants}\n            transition={{ type: \"spring\", damping: 25, stiffness: 200 }}\n          >\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 bg-linear-to-b from-white/30 via-white/10 to-transparent dark:from-white/10 dark:via-white/[0.03] dark:to-transparent\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-x-0 top-0 h-24 bg-linear-to-b from-white/40 to-transparent dark:from-white/12\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute -right-10 top-[-72px] h-40 w-40 rounded-full bg-white/35 blur-3xl dark:bg-sky-200/10\"\n            />\n            <button\n              type=\"button\"\n              className=\"absolute right-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/35 bg-white/45 text-lg font-light text-foreground shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-white/72 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10\"\n              aria-label=\"Close drawer\"\n              onClick={() => onOpenChange?.(false)}\n            >\n              ×\n            </button>\n            <div className=\"relative z-10 flex h-full flex-col\">\n              {(title || description) && (\n                <header className=\"space-y-1 pr-10\">\n                  {title && (\n                    <h2 className=\"text-lg font-semibold tracking-tight text-foreground\">\n                      {title}\n                    </h2>\n                  )}\n                  {description && (\n                    <p className=\"text-sm text-muted-foreground\">\n                      {description}\n                    </p>\n                  )}\n                </header>\n              )}\n              {children && (\n                <div className=\"mt-4 flex-1 overflow-auto space-y-4 pr-1\">\n                  {children}\n                </div>\n              )}\n              {footer && (\n                <footer className=\"mt-6 border-t border-white/20 pt-4 dark:border-white/10\">\n                  {footer}\n                </footer>\n              )}\n            </div>\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAM,YACJ;AAEF,IAAM,kBAAkD;CACtD,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAED,IAAM,eAAe,aAA6B;AAChD,SAAQ,UAAR;EACE,KAAK,OACH,QAAO;GAAE,QAAQ,EAAE,GAAG,SAAS;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;EACtD,KAAK,QACH,QAAO;GAAE,QAAQ,EAAE,GAAG,QAAQ;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;EACrD,KAAK,MACH,QAAO;GAAE,QAAQ,EAAE,GAAG,SAAS;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;EACtD,KAAK,SACH,QAAO;GAAE,QAAQ,EAAE,GAAG,QAAQ;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;;;AAIzD,IAAa,UAAU,EACrB,MACA,cACA,OACA,aACA,WAAW,SACX,UACA,aACiB;CACjB,MAAM,WAAW,OAA8B,KAAK;AACpD,mBAAkB,UAAU,KAAK;AAEjC,iBAAgB;AACd,MAAI,CAAC,QAAQ,OAAO,WAAW,YAAa;EAC5C,MAAM,aAAa,UAAyB;AAC1C,OAAI,MAAM,QAAQ,SAChB,gBAAe,MAAM;;AAGzB,SAAO,iBAAiB,WAAW,UAAU;AAC7C,eAAa,OAAO,oBAAoB,WAAW,UAAU;IAC5D,CAAC,MAAM,aAAa,CAAC;CAExB,MAAM,WAAW,YAAY,SAAS;AAEtC,QACE,oBAAC,iBAAD,EAAA,UACG,QACC,qBAAC,OAAD;EACE,WAAU;EACV,MAAK;YAFP,CAIE,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,GAAG;GACpB,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAU;GACV,eAAe,eAAe,MAAM;GACpC,CAAA,EACF,qBAAC,OAAO,KAAR;GACE,MAAK;GACL,cAAW;GACX,cAAY;GACZ,WAAW,GAAG,UAAU,GAAG,gBAAgB;GAC3C,UAAU;GACV,KAAK;GACL,UAAU,UAAU,MAAM,iBAAiB;GAC3C,SAAQ;GACR,SAAQ;GACR,MAAK;GACK;GACV,YAAY;IAAE,MAAM;IAAU,SAAS;IAAI,WAAW;IAAK;aAZ7D;IAcE,oBAAC,OAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA;IACF,oBAAC,OAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA;IACF,oBAAC,OAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA;IACF,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,cAAW;KACX,eAAe,eAAe,MAAM;eACrC;KAEQ,CAAA;IACT,qBAAC,OAAD;KAAK,WAAU;eAAf;OACI,SAAS,gBACT,qBAAC,UAAD;OAAQ,WAAU;iBAAlB,CACG,SACC,oBAAC,MAAD;QAAI,WAAU;kBACX;QACE,CAAA,EAEN,eACC,oBAAC,KAAD;QAAG,WAAU;kBACV;QACC,CAAA,CAEC;;MAEV,YACC,oBAAC,OAAD;OAAK,WAAU;OACZ;OACG,CAAA;MAEP,UACC,oBAAC,UAAD;OAAQ,WAAU;iBACf;OACM,CAAA;MAEP;;IACK;KACT;KAEQ,CAAA"}

package/dist/chunks/form-B2vcaHwh.mjs

@@ -0,0 +1,161 @@
+import { Children, cloneElement, isValidElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/form/Form.tsx
+var cx = (...classes) => classes.filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+var gapClassMap = {
+	sm: "space-y-4",
+	md: "space-y-6",
+	lg: "space-y-8"
+};
+var sectionColumnsMap = {
+	1: "space-y-4",
+	2: "grid grid-cols-2 gap-4",
+	3: "grid grid-cols-3 gap-4"
+};
+var inputGroupMap = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4"
+};
+var actionsAlignMap = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between"
+};
+var messageIntentMap = {
+	default: "text-neutral-500 dark:text-neutral-400",
+	error: "text-destructive",
+	success: "text-success"
+};
+var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
+var Form = ({ title, description, gap = "lg", children, className = "", ...props }) => {
+	return /* @__PURE__ */ jsxs("form", {
+		className: cx("w-full space-y-6 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 p-6", className),
+		...props,
+		children: [(title || description) && /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [title && /* @__PURE__ */ jsx("h2", {
+				className: "text-xl font-semibold text-neutral-900 dark:text-white",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-neutral-500 dark:text-neutral-400",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: gapClassMap[gap],
+			children
+		})]
+	});
+};
+var FormSection = ({ title, description, columns = 1, children, className = "" }) => {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cx("space-y-4", className),
+		children: [(title || description) && /* @__PURE__ */ jsxs("header", {
+			className: "space-y-1",
+			children: [title && /* @__PURE__ */ jsx("h3", {
+				className: "text-base font-medium text-neutral-900 dark:text-white",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-neutral-500 dark:text-neutral-400",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: sectionColumnsMap[columns] || sectionColumnsMap[1],
+			children
+		})]
+	});
+};
+var FormDescription = ({ children, className = "", id }) => /* @__PURE__ */ jsx("p", {
+	id,
+	className: cx("text-sm text-neutral-500 dark:text-neutral-400", className),
+	children
+});
+var FormMessage = ({ children, intent = "default", className = "", id }) => /* @__PURE__ */ jsx("p", {
+	id,
+	role: intent === "error" ? "alert" : "status",
+	className: cx("text-sm", messageIntentMap[intent], className),
+	children
+});
+var FormField = ({ label, description, error, required, htmlFor, helperAction, layout = "stacked", children, className = "" }) => {
+	const autoId = useId();
+	const fieldId = sanitizeId(htmlFor ?? autoId);
+	const descriptionId = description ? `${fieldId}-description` : void 0;
+	const errorId = error ? `${fieldId}-error` : void 0;
+	const controls = Children.map(children, (child) => {
+		if (!isValidElement(child)) return child;
+		const element = child;
+		const describedBy = [
+			element.props?.["aria-describedby"],
+			descriptionId,
+			errorId
+		].filter(Boolean).join(" ").trim();
+		return cloneElement(element, {
+			id: element.props?.id ?? fieldId,
+			"aria-describedby": describedBy || void 0,
+			"aria-invalid": element.props?.["aria-invalid"] ?? Boolean(error)
+		});
+	});
+	const labelNode = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsxs("label", {
+			htmlFor: fieldId,
+			className: "text-sm font-medium text-neutral-900 dark:text-white",
+			children: [label, required && /* @__PURE__ */ jsx("span", {
+				className: "ml-1 text-destructive",
+				children: "*"
+			})]
+		}), helperAction && /* @__PURE__ */ jsx("div", {
+			className: "text-xs text-neutral-500 dark:text-neutral-400",
+			children: helperAction
+		})]
+	});
+	if (layout === "inline") return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex flex-wrap items-start gap-6", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-[200px] space-y-1",
+			children: [labelNode, description && /* @__PURE__ */ jsx(FormDescription, {
+				id: descriptionId,
+				children: description
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 space-y-2",
+			children: [controls, error && /* @__PURE__ */ jsx(FormMessage, {
+				id: errorId,
+				intent: "error",
+				children: error
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("space-y-2", className),
+		children: [
+			labelNode,
+			description && /* @__PURE__ */ jsx(FormDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [controls, error && /* @__PURE__ */ jsx(FormMessage, {
+					id: errorId,
+					intent: "error",
+					children: error
+				})]
+			})
+		]
+	});
+};
+var FormActions = ({ children, align = "end", className = "" }) => /* @__PURE__ */ jsx("div", {
+	className: cx("flex flex-wrap gap-3", actionsAlignMap[align], className),
+	children
+});
+var InputGroup = ({ columns = 2, children, className = "" }) => /* @__PURE__ */ jsx("div", {
+	className: cx("grid gap-4", inputGroupMap[columns], className),
+	children
+});
+//#endregion
+export { FormMessage as a, FormField as i, FormActions as n, FormSection as o, FormDescription as r, InputGroup as s, Form as t };
+
+//# sourceMappingURL=form-B2vcaHwh.mjs.map

package/dist/chunks/form-B2vcaHwh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-B2vcaHwh.mjs","names":[],"sources":["../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useId } from \"react\";\nimport type { ReactElement } from \"react\";\n\nimport type {\n  FormProps,\n  FormSectionProps,\n  FormFieldProps,\n  FormActionsProps,\n  InputGroupProps,\n  FormDescriptionProps,\n  FormMessageProps,\n} from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst gapClassMap: Record<NonNullable<FormProps[\"gap\"]>, string> = {\n  sm: \"space-y-4\",\n  md: \"space-y-6\",\n  lg: \"space-y-8\",\n};\n\nconst sectionColumnsMap: Record<\n  NonNullable<FormSectionProps[\"columns\"]>,\n  string\n> = {\n  1: \"space-y-4\",\n  2: \"grid grid-cols-2 gap-4\",\n  3: \"grid grid-cols-3 gap-4\",\n};\n\nconst inputGroupMap: Record<NonNullable<InputGroupProps[\"columns\"]>, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n};\n\nconst actionsAlignMap: Record<\n  NonNullable<FormActionsProps[\"align\"]>,\n  string\n> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst messageIntentMap: Record<\n  NonNullable<FormMessageProps[\"intent\"]>,\n  string\n> = {\n  default: \"text-neutral-500 dark:text-neutral-400\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n};\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Form = ({\n  title,\n  description,\n  gap = \"lg\",\n  children,\n  className = \"\",\n  ...props\n}: FormProps) => {\n  return (\n    <form\n      className={cx(\n        \"w-full space-y-6 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold text-neutral-900 dark:text-white\">\n              {title}\n            </h2>\n          )}\n          {description && (\n            <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n      <div className={gapClassMap[gap]}>{children}</div>\n    </form>\n  );\n};\n\nexport const FormSection = ({\n  title,\n  description,\n  columns = 1,\n  children,\n  className = \"\",\n}: FormSectionProps) => {\n  return (\n    <section className={cx(\"space-y-4\", className)}>\n      {(title || description) && (\n        <header className=\"space-y-1\">\n          {title && (\n            <h3 className=\"text-base font-medium text-neutral-900 dark:text-white\">\n              {title}\n            </h3>\n          )}\n          {description && (\n            <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n              {description}\n            </p>\n          )}\n        </header>\n      )}\n      <div className={sectionColumnsMap[columns] || sectionColumnsMap[1]}>\n        {children}\n      </div>\n    </section>\n  );\n};\n\nexport const FormDescription = ({\n  children,\n  className = \"\",\n  id,\n}: FormDescriptionProps) => (\n  <p\n    id={id}\n    className={cx(\"text-sm text-neutral-500 dark:text-neutral-400\", className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormMessage = ({\n  children,\n  intent = \"default\",\n  className = \"\",\n  id,\n}: FormMessageProps) => (\n  <p\n    id={id}\n    role={intent === \"error\" ? \"alert\" : \"status\"}\n    className={cx(\"text-sm\", messageIntentMap[intent], className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormField = ({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  helperAction,\n  layout = \"stacked\",\n  children,\n  className = \"\",\n}: FormFieldProps) => {\n  const autoId = useId();\n  const fieldId = sanitizeId(htmlFor ?? autoId);\n  const descriptionId = description ? `${fieldId}-description` : undefined;\n  const errorId = error ? `${fieldId}-error` : undefined;\n\n  const controls = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const element = child as ReactElement<Record<string, unknown>>;\n    const currentDescribedBy = element.props?.[\"aria-describedby\"] as\n      | string\n      | undefined;\n    const describedBy = [currentDescribedBy, descriptionId, errorId]\n      .filter(Boolean)\n      .join(\" \")\n      .trim();\n\n    return cloneElement(element, {\n      id: element.props?.id ?? fieldId,\n      \"aria-describedby\": describedBy || undefined,\n      \"aria-invalid\": element.props?.[\"aria-invalid\"] ?? Boolean(error),\n    });\n  });\n\n  const labelNode = (\n    <div className=\"flex items-center justify-between gap-2\">\n      <label\n        htmlFor={fieldId}\n        className=\"text-sm font-medium text-neutral-900 dark:text-white\"\n      >\n        {label}\n        {required && <span className=\"ml-1 text-destructive\">*</span>}\n      </label>\n      {helperAction && (\n        <div className=\"text-xs text-neutral-500 dark:text-neutral-400\">\n          {helperAction}\n        </div>\n      )}\n    </div>\n  );\n\n  if (layout === \"inline\") {\n    return (\n      <div className={cx(\"flex flex-wrap items-start gap-6\", className)}>\n        <div className=\"min-w-[200px] space-y-1\">\n          {labelNode}\n          {description && (\n            <FormDescription id={descriptionId}>{description}</FormDescription>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          {controls}\n          {error && (\n            <FormMessage id={errorId} intent=\"error\">\n              {error}\n            </FormMessage>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"space-y-2\", className)}>\n      {labelNode}\n      {description && (\n        <FormDescription id={descriptionId}>{description}</FormDescription>\n      )}\n      <div className=\"space-y-2\">\n        {controls}\n        {error && (\n          <FormMessage id={errorId} intent=\"error\">\n            {error}\n          </FormMessage>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FormActions = ({\n  children,\n  align = \"end\",\n  className = \"\",\n}: FormActionsProps) => (\n  <div\n    className={cx(\"flex flex-wrap gap-3\", actionsAlignMap[align], className)}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroup = ({\n  columns = 2,\n  children,\n  className = \"\",\n}: InputGroupProps) => (\n  <div className={cx(\"grid gap-4\", inputGroupMap[columns], className)}>\n    {children}\n  </div>\n);\n"],"mappings":"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"}

package/dist/chunks/form-CzH9GQc6.cjs

@@ -0,0 +1,203 @@
+require("./chunk-B_GkZjkl.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/forms/form/Form.tsx
+var cx = (...classes) => classes.filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+var gapClassMap = {
+	sm: "space-y-4",
+	md: "space-y-6",
+	lg: "space-y-8"
+};
+var sectionColumnsMap = {
+	1: "space-y-4",
+	2: "grid grid-cols-2 gap-4",
+	3: "grid grid-cols-3 gap-4"
+};
+var inputGroupMap = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4"
+};
+var actionsAlignMap = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between"
+};
+var messageIntentMap = {
+	default: "text-neutral-500 dark:text-neutral-400",
+	error: "text-destructive",
+	success: "text-success"
+};
+var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
+var Form = ({ title, description, gap = "lg", children, className = "", ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		className: cx("w-full space-y-6 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 p-6", className),
+		...props,
+		children: [(title || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-2",
+			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "text-xl font-semibold text-neutral-900 dark:text-white",
+				children: title
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm text-neutral-500 dark:text-neutral-400",
+				children: description
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: gapClassMap[gap],
+			children
+		})]
+	});
+};
+var FormSection = ({ title, description, columns = 1, children, className = "" }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: cx("space-y-4", className),
+		children: [(title || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+			className: "space-y-1",
+			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "text-base font-medium text-neutral-900 dark:text-white",
+				children: title
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm text-neutral-500 dark:text-neutral-400",
+				children: description
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: sectionColumnsMap[columns] || sectionColumnsMap[1],
+			children
+		})]
+	});
+};
+var FormDescription = ({ children, className = "", id }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+	id,
+	className: cx("text-sm text-neutral-500 dark:text-neutral-400", className),
+	children
+});
+var FormMessage = ({ children, intent = "default", className = "", id }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+	id,
+	role: intent === "error" ? "alert" : "status",
+	className: cx("text-sm", messageIntentMap[intent], className),
+	children
+});
+var FormField = ({ label, description, error, required, htmlFor, helperAction, layout = "stacked", children, className = "" }) => {
+	const autoId = (0, react.useId)();
+	const fieldId = sanitizeId(htmlFor ?? autoId);
+	const descriptionId = description ? `${fieldId}-description` : void 0;
+	const errorId = error ? `${fieldId}-error` : void 0;
+	const controls = react.Children.map(children, (child) => {
+		if (!(0, react.isValidElement)(child)) return child;
+		const element = child;
+		const describedBy = [
+			element.props?.["aria-describedby"],
+			descriptionId,
+			errorId
+		].filter(Boolean).join(" ").trim();
+		return (0, react.cloneElement)(element, {
+			id: element.props?.id ?? fieldId,
+			"aria-describedby": describedBy || void 0,
+			"aria-invalid": element.props?.["aria-invalid"] ?? Boolean(error)
+		});
+	});
+	const labelNode = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-between gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			htmlFor: fieldId,
+			className: "text-sm font-medium text-neutral-900 dark:text-white",
+			children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "ml-1 text-destructive",
+				children: "*"
+			})]
+		}), helperAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-xs text-neutral-500 dark:text-neutral-400",
+			children: helperAction
+		})]
+	});
+	if (layout === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("flex flex-wrap items-start gap-6", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-[200px] space-y-1",
+			children: [labelNode, description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormDescription, {
+				id: descriptionId,
+				children: description
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex-1 space-y-2",
+			children: [controls, error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormMessage, {
+				id: errorId,
+				intent: "error",
+				children: error
+			})]
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("space-y-2", className),
+		children: [
+			labelNode,
+			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-2",
+				children: [controls, error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormMessage, {
+					id: errorId,
+					intent: "error",
+					children: error
+				})]
+			})
+		]
+	});
+};
+var FormActions = ({ children, align = "end", className = "" }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: cx("flex flex-wrap gap-3", actionsAlignMap[align], className),
+	children
+});
+var InputGroup = ({ columns = 2, children, className = "" }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: cx("grid gap-4", inputGroupMap[columns], className),
+	children
+});
+//#endregion
+Object.defineProperty(exports, "Form", {
+	enumerable: true,
+	get: function() {
+		return Form;
+	}
+});
+Object.defineProperty(exports, "FormActions", {
+	enumerable: true,
+	get: function() {
+		return FormActions;
+	}
+});
+Object.defineProperty(exports, "FormDescription", {
+	enumerable: true,
+	get: function() {
+		return FormDescription;
+	}
+});
+Object.defineProperty(exports, "FormField", {
+	enumerable: true,
+	get: function() {
+		return FormField;
+	}
+});
+Object.defineProperty(exports, "FormMessage", {
+	enumerable: true,
+	get: function() {
+		return FormMessage;
+	}
+});
+Object.defineProperty(exports, "FormSection", {
+	enumerable: true,
+	get: function() {
+		return FormSection;
+	}
+});
+Object.defineProperty(exports, "InputGroup", {
+	enumerable: true,
+	get: function() {
+		return InputGroup;
+	}
+});
+
+//# sourceMappingURL=form-CzH9GQc6.cjs.map

package/dist/chunks/form-CzH9GQc6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-CzH9GQc6.cjs","names":[],"sources":["../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useId } from \"react\";\nimport type { ReactElement } from \"react\";\n\nimport type {\n  FormProps,\n  FormSectionProps,\n  FormFieldProps,\n  FormActionsProps,\n  InputGroupProps,\n  FormDescriptionProps,\n  FormMessageProps,\n} from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst gapClassMap: Record<NonNullable<FormProps[\"gap\"]>, string> = {\n  sm: \"space-y-4\",\n  md: \"space-y-6\",\n  lg: \"space-y-8\",\n};\n\nconst sectionColumnsMap: Record<\n  NonNullable<FormSectionProps[\"columns\"]>,\n  string\n> = {\n  1: \"space-y-4\",\n  2: \"grid grid-cols-2 gap-4\",\n  3: \"grid grid-cols-3 gap-4\",\n};\n\nconst inputGroupMap: Record<NonNullable<InputGroupProps[\"columns\"]>, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n};\n\nconst actionsAlignMap: Record<\n  NonNullable<FormActionsProps[\"align\"]>,\n  string\n> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst messageIntentMap: Record<\n  NonNullable<FormMessageProps[\"intent\"]>,\n  string\n> = {\n  default: \"text-neutral-500 dark:text-neutral-400\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n};\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Form = ({\n  title,\n  description,\n  gap = \"lg\",\n  children,\n  className = \"\",\n  ...props\n}: FormProps) => {\n  return (\n    <form\n      className={cx(\n        \"w-full space-y-6 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold text-neutral-900 dark:text-white\">\n              {title}\n            </h2>\n          )}\n          {description && (\n            <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n      <div className={gapClassMap[gap]}>{children}</div>\n    </form>\n  );\n};\n\nexport const FormSection = ({\n  title,\n  description,\n  columns = 1,\n  children,\n  className = \"\",\n}: FormSectionProps) => {\n  return (\n    <section className={cx(\"space-y-4\", className)}>\n      {(title || description) && (\n        <header className=\"space-y-1\">\n          {title && (\n            <h3 className=\"text-base font-medium text-neutral-900 dark:text-white\">\n              {title}\n            </h3>\n          )}\n          {description && (\n            <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n              {description}\n            </p>\n          )}\n        </header>\n      )}\n      <div className={sectionColumnsMap[columns] || sectionColumnsMap[1]}>\n        {children}\n      </div>\n    </section>\n  );\n};\n\nexport const FormDescription = ({\n  children,\n  className = \"\",\n  id,\n}: FormDescriptionProps) => (\n  <p\n    id={id}\n    className={cx(\"text-sm text-neutral-500 dark:text-neutral-400\", className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormMessage = ({\n  children,\n  intent = \"default\",\n  className = \"\",\n  id,\n}: FormMessageProps) => (\n  <p\n    id={id}\n    role={intent === \"error\" ? \"alert\" : \"status\"}\n    className={cx(\"text-sm\", messageIntentMap[intent], className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormField = ({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  helperAction,\n  layout = \"stacked\",\n  children,\n  className = \"\",\n}: FormFieldProps) => {\n  const autoId = useId();\n  const fieldId = sanitizeId(htmlFor ?? autoId);\n  const descriptionId = description ? `${fieldId}-description` : undefined;\n  const errorId = error ? `${fieldId}-error` : undefined;\n\n  const controls = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const element = child as ReactElement<Record<string, unknown>>;\n    const currentDescribedBy = element.props?.[\"aria-describedby\"] as\n      | string\n      | undefined;\n    const describedBy = [currentDescribedBy, descriptionId, errorId]\n      .filter(Boolean)\n      .join(\" \")\n      .trim();\n\n    return cloneElement(element, {\n      id: element.props?.id ?? fieldId,\n      \"aria-describedby\": describedBy || undefined,\n      \"aria-invalid\": element.props?.[\"aria-invalid\"] ?? Boolean(error),\n    });\n  });\n\n  const labelNode = (\n    <div className=\"flex items-center justify-between gap-2\">\n      <label\n        htmlFor={fieldId}\n        className=\"text-sm font-medium text-neutral-900 dark:text-white\"\n      >\n        {label}\n        {required && <span className=\"ml-1 text-destructive\">*</span>}\n      </label>\n      {helperAction && (\n        <div className=\"text-xs text-neutral-500 dark:text-neutral-400\">\n          {helperAction}\n        </div>\n      )}\n    </div>\n  );\n\n  if (layout === \"inline\") {\n    return (\n      <div className={cx(\"flex flex-wrap items-start gap-6\", className)}>\n        <div className=\"min-w-[200px] space-y-1\">\n          {labelNode}\n          {description && (\n            <FormDescription id={descriptionId}>{description}</FormDescription>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          {controls}\n          {error && (\n            <FormMessage id={errorId} intent=\"error\">\n              {error}\n            </FormMessage>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"space-y-2\", className)}>\n      {labelNode}\n      {description && (\n        <FormDescription id={descriptionId}>{description}</FormDescription>\n      )}\n      <div className=\"space-y-2\">\n        {controls}\n        {error && (\n          <FormMessage id={errorId} intent=\"error\">\n            {error}\n          </FormMessage>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FormActions = ({\n  children,\n  align = \"end\",\n  className = \"\",\n}: FormActionsProps) => (\n  <div\n    className={cx(\"flex flex-wrap gap-3\", actionsAlignMap[align], className)}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroup = ({\n  columns = 2,\n  children,\n  className = \"\",\n}: InputGroupProps) => (\n  <div className={cx(\"grid gap-4\", inputGroupMap[columns], className)}>\n    {children}\n  </div>\n);\n"],"mappings":"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"}

package/dist/chunks/gradual-blur-B9GoY8o1.cjs

@@ -0,0 +1,65 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/effects/gradual-blur/GradualBlur.tsx
+var GradualBlur = ({ children, duration = .5, delay = 0, blur = 8, triggerOnView = true, triggerOnce = true, threshold = .05, visible = false, direction = "none", distance = 20, className, as = "div" }) => {
+	const ref = (0, react.useRef)(null);
+	const getInitialPosition = () => {
+		switch (direction) {
+			case "top": return { y: -distance };
+			case "bottom": return { y: distance };
+			case "left": return { x: -distance };
+			case "right": return { x: distance };
+			default: return {
+				x: 0,
+				y: 0
+			};
+		}
+	};
+	const initialPosition = getInitialPosition();
+	const variants = {
+		hidden: {
+			opacity: 0,
+			filter: `blur(${blur}px)`,
+			...initialPosition
+		},
+		visible: {
+			opacity: 1,
+			filter: "blur(0px)",
+			x: 0,
+			y: 0
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.create(as), {
+		ref,
+		variants,
+		initial: "hidden",
+		animate: !triggerOnView ? visible ? "visible" : "hidden" : void 0,
+		whileInView: triggerOnView ? "visible" : void 0,
+		viewport: {
+			once: triggerOnce,
+			amount: threshold,
+			margin: "0px 0px -50px 0px"
+		},
+		transition: {
+			duration,
+			delay,
+			ease: "easeOut",
+			filter: { duration },
+			opacity: { duration }
+		},
+		className: require_utils.mergeClassNames("relative", className),
+		children
+	});
+};
+//#endregion
+Object.defineProperty(exports, "GradualBlur", {
+	enumerable: true,
+	get: function() {
+		return GradualBlur;
+	}
+});
+
+//# sourceMappingURL=gradual-blur-B9GoY8o1.cjs.map

package/dist/chunks/gradual-blur-B9GoY8o1.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradual-blur-B9GoY8o1.cjs","names":[],"sources":["../../src/components/effects/gradual-blur/GradualBlur.tsx"],"sourcesContent":["import { useRef, type ComponentType } from \"react\";\nimport { motion, type HTMLMotionProps } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { GradualBlurProps } from \"./types\";\n\nexport const GradualBlur = ({\n  children,\n  duration = 0.5,\n  delay = 0,\n  blur = 8,\n  triggerOnView = true,\n  triggerOnce = true,\n  threshold = 0.05,\n  visible = false,\n  direction = \"none\",\n  distance = 20,\n  className,\n  as = \"div\",\n}: GradualBlurProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const getInitialPosition = () => {\n    switch (direction) {\n      case \"top\":\n        return { y: -distance };\n      case \"bottom\":\n        return { y: distance };\n      case \"left\":\n        return { x: -distance };\n      case \"right\":\n        return { x: distance };\n      default:\n        return { x: 0, y: 0 };\n    }\n  };\n\n  const initialPosition = getInitialPosition();\n\n  const variants = {\n    hidden: {\n      opacity: 0,\n      filter: `blur(${blur}px)`,\n      ...initialPosition,\n    },\n    visible: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n      x: 0,\n      y: 0,\n    },\n  };\n\n  const MotionComponent = motion.create(as as string) as ComponentType<\n    HTMLMotionProps<\"div\">\n  >;\n\n  return (\n    <MotionComponent\n      ref={ref}\n      variants={variants}\n      initial=\"hidden\"\n      animate={!triggerOnView ? (visible ? \"visible\" : \"hidden\") : undefined}\n      whileInView={triggerOnView ? \"visible\" : undefined}\n      viewport={{\n        once: triggerOnce,\n        amount: threshold,\n        margin: \"0px 0px -50px 0px\", // Slight bottom margin to trigger earlier\n      }}\n      transition={{\n        duration,\n        delay,\n        ease: \"easeOut\",\n        filter: { duration: duration },\n        opacity: { duration: duration },\n      }}\n      className={mergeClassNames(\"relative\", className)}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n"],"mappings":";;;;;;AAKA,IAAa,eAAe,EAC1B,UACA,WAAW,IACX,QAAQ,GACR,OAAO,GACP,gBAAgB,MAChB,cAAc,MACd,YAAY,KACZ,UAAU,OACV,YAAY,QACZ,WAAW,IACX,WACA,KAAK,YACiB;CACtB,MAAM,OAAA,GAAA,MAAA,QAA6B,KAAK;CAExC,MAAM,2BAA2B;AAC/B,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,SACH,QAAO,EAAE,GAAG,UAAU;GACxB,KAAK,OACH,QAAO,EAAE,GAAG,CAAC,UAAU;GACzB,KAAK,QACH,QAAO,EAAE,GAAG,UAAU;GACxB,QACE,QAAO;IAAE,GAAG;IAAG,GAAG;IAAG;;;CAI3B,MAAM,kBAAkB,oBAAoB;CAE5C,MAAM,WAAW;EACf,QAAQ;GACN,SAAS;GACT,QAAQ,QAAQ,KAAK;GACrB,GAAG;GACJ;EACD,SAAS;GACP,SAAS;GACT,QAAQ;GACR,GAAG;GACH,GAAG;GACJ;EACF;AAMD,QACE,iBAAA,GAAA,kBAAA,KALsB,cAAA,OAAO,OAAO,GAAa,EAKjD;EACO;EACK;EACV,SAAQ;EACR,SAAS,CAAC,gBAAiB,UAAU,YAAY,WAAY,KAAA;EAC7D,aAAa,gBAAgB,YAAY,KAAA;EACzC,UAAU;GACR,MAAM;GACN,QAAQ;GACR,QAAQ;GACT;EACD,YAAY;GACV;GACA;GACA,MAAM;GACN,QAAQ,EAAY,UAAU;GAC9B,SAAS,EAAY,UAAU;GAChC;EACD,WAAW,cAAA,gBAAgB,YAAY,UAAU;EAEhD;EACe,CAAA"}