erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/background-gradient-animation-BL-lnrJe.mjs

@@ -0,0 +1,144 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx
+var BackgroundGradientAnimation = ({ gradientBackgroundStart = "rgb(108, 0, 162)", gradientBackgroundEnd = "rgb(0, 17, 82)", firstColor = "18, 113, 255", secondColor = "221, 74, 255", thirdColor = "100, 220, 255", fourthColor = "200, 50, 50", fifthColor = "180, 180, 50", pointerColor = "140, 100, 255", size = "80%", blendingValue = "hard-light", children, className, interactive = true, containerClassName }) => {
+	const interactiveRef = useRef(null);
+	const containerRef = useRef(null);
+	const currentPositionRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const targetPositionRef = useRef({
+		x: 0,
+		y: 0
+	});
+	useEffect(() => {
+		if (!interactive) return;
+		let animationFrameId = 0;
+		const move = () => {
+			const interactiveElement = interactiveRef.current;
+			if (interactiveElement) {
+				const currentPosition = currentPositionRef.current;
+				const targetPosition = targetPositionRef.current;
+				currentPosition.x += (targetPosition.x - currentPosition.x) / 20;
+				currentPosition.y += (targetPosition.y - currentPosition.y) / 20;
+				interactiveElement.style.transform = `translate(${Math.round(currentPosition.x)}px, ${Math.round(currentPosition.y)}px)`;
+			}
+			animationFrameId = window.requestAnimationFrame(move);
+		};
+		animationFrameId = window.requestAnimationFrame(move);
+		return () => {
+			window.cancelAnimationFrame(animationFrameId);
+		};
+	}, [interactive]);
+	const handleMouseMove = (event) => {
+		if (interactiveRef.current) {
+			const rect = interactiveRef.current.getBoundingClientRect();
+			targetPositionRef.current = {
+				x: event.clientX - rect.left,
+				y: event.clientY - rect.top
+			};
+		}
+	};
+	const [isSafari] = useState(() => typeof navigator !== "undefined" ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent) : false);
+	const blobStyle = (color, _animationClass, transformOrigin, opacity = 1) => ({
+		position: "absolute",
+		width: size,
+		height: size,
+		top: `calc(50% - ${size} / 2)`,
+		left: `calc(50% - ${size} / 2)`,
+		background: `radial-gradient(circle at center, rgba(${color}, 0.8) 0, rgba(${color}, 0) 50%) no-repeat`,
+		mixBlendMode: blendingValue,
+		transformOrigin,
+		opacity
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: mergeClassNames("h-screen w-screen relative overflow-hidden top-0 left-0", containerClassName),
+		style: { background: `linear-gradient(40deg, ${gradientBackgroundStart}, ${gradientBackgroundEnd})` },
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				className: "hidden",
+				children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: "blurMe",
+					children: [
+						/* @__PURE__ */ jsx("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: "10",
+							result: "blur"
+						}),
+						/* @__PURE__ */ jsx("feColorMatrix", {
+							in: "blur",
+							mode: "matrix",
+							values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8",
+							result: "goo"
+						}),
+						/* @__PURE__ */ jsx("feBlend", {
+							in: "SourceGraphic",
+							in2: "goo"
+						})
+					]
+				}) })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: mergeClassNames("", className),
+				children
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "h-full w-full",
+				style: { filter: isSafari ? "blur(24px)" : "url(#blurMe) blur(40px)" },
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "ui:animate-gradient-first",
+						style: blobStyle(firstColor, "animate-gradient-first", "center center")
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "ui:animate-gradient-second",
+						style: blobStyle(secondColor, "animate-gradient-second", "calc(50% - 400px)")
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "ui:animate-gradient-third",
+						style: blobStyle(thirdColor, "animate-gradient-third", "calc(50% + 400px)")
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "ui:animate-gradient-fourth",
+						style: blobStyle(fourthColor, "animate-gradient-fourth", "calc(50% - 200px)", .7)
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "ui:animate-gradient-fifth",
+						style: blobStyle(fifthColor, "animate-gradient-fifth", "calc(50% - 800px) calc(50% + 800px)")
+					}),
+					interactive && /* @__PURE__ */ jsx("div", {
+						ref: interactiveRef,
+						onMouseMove: handleMouseMove,
+						className: "absolute w-full h-full",
+						style: {
+							top: "-50%",
+							left: "-50%",
+							willChange: "transform",
+							opacity: .7,
+							background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,
+							mixBlendMode: blendingValue
+						}
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx
+function BackgroundGradientAnimationDemo() {
+	return /* @__PURE__ */ jsx(BackgroundGradientAnimation, { children: /* @__PURE__ */ jsx("div", {
+		className: "ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-white ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-white/80 ui:to-white/20",
+			children: "Gradients X Animations"
+		})
+	}) });
+}
+//#endregion
+export { BackgroundGradientAnimation as n, BackgroundGradientAnimationDemo as t };
+
+//# sourceMappingURL=background-gradient-animation-BL-lnrJe.mjs.map

package/dist/chunks/background-gradient-animation-BL-lnrJe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-gradient-animation-BL-lnrJe.mjs","names":[],"sources":["../../src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx","../../src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface BackgroundGradientAnimationProps {\n  gradientBackgroundStart?: string;\n  gradientBackgroundEnd?: string;\n  firstColor?: string;\n  secondColor?: string;\n  thirdColor?: string;\n  fourthColor?: string;\n  fifthColor?: string;\n  pointerColor?: string;\n  size?: string;\n  blendingValue?: string;\n  children?: React.ReactNode;\n  className?: string;\n  interactive?: boolean;\n  containerClassName?: string;\n}\n\nexport const BackgroundGradientAnimation = ({\n  gradientBackgroundStart = \"rgb(108, 0, 162)\",\n  gradientBackgroundEnd = \"rgb(0, 17, 82)\",\n  firstColor = \"18, 113, 255\",\n  secondColor = \"221, 74, 255\",\n  thirdColor = \"100, 220, 255\",\n  fourthColor = \"200, 50, 50\",\n  fifthColor = \"180, 180, 50\",\n  pointerColor = \"140, 100, 255\",\n  size = \"80%\",\n  blendingValue = \"hard-light\",\n  children,\n  className,\n  interactive = true,\n  containerClassName,\n}: BackgroundGradientAnimationProps) => {\n  const interactiveRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const currentPositionRef = useRef({ x: 0, y: 0 });\n  const targetPositionRef = useRef({ x: 0, y: 0 });\n\n  useEffect(() => {\n    if (!interactive) {\n      return;\n    }\n\n    let animationFrameId = 0;\n\n    const move = () => {\n      const interactiveElement = interactiveRef.current;\n\n      if (interactiveElement) {\n        const currentPosition = currentPositionRef.current;\n        const targetPosition = targetPositionRef.current;\n\n        currentPosition.x += (targetPosition.x - currentPosition.x) / 20;\n        currentPosition.y += (targetPosition.y - currentPosition.y) / 20;\n\n        interactiveElement.style.transform = `translate(${Math.round(\n          currentPosition.x,\n        )}px, ${Math.round(currentPosition.y)}px)`;\n      }\n\n      animationFrameId = window.requestAnimationFrame(move);\n    };\n\n    animationFrameId = window.requestAnimationFrame(move);\n\n    return () => {\n      window.cancelAnimationFrame(animationFrameId);\n    };\n  }, [interactive]);\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (interactiveRef.current) {\n      const rect = interactiveRef.current.getBoundingClientRect();\n      targetPositionRef.current = {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n      };\n    }\n  };\n\n  const [isSafari] = useState(() =>\n    typeof navigator !== \"undefined\"\n      ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)\n      : false,\n  );\n\n  const blobStyle = (\n    color: string,\n    _animationClass: string,\n    transformOrigin: string,\n    opacity: number = 1,\n  ): React.CSSProperties => ({\n    position: \"absolute\",\n    width: size,\n    height: size,\n    top: `calc(50% - ${size} / 2)`,\n    left: `calc(50% - ${size} / 2)`,\n    background: `radial-gradient(circle at center, rgba(${color}, 0.8) 0, rgba(${color}, 0) 50%) no-repeat`,\n    mixBlendMode: blendingValue as React.CSSProperties[\"mixBlendMode\"],\n    transformOrigin,\n    opacity,\n  });\n\n  return (\n    <div\n      ref={containerRef}\n      className={mergeClassNames(\n        \"h-screen w-screen relative overflow-hidden top-0 left-0\",\n        containerClassName,\n      )}\n      style={{\n        background: `linear-gradient(40deg, ${gradientBackgroundStart}, ${gradientBackgroundEnd})`,\n      }}\n    >\n      <svg className=\"hidden\">\n        <defs>\n          <filter id=\"blurMe\">\n            <feGaussianBlur\n              in=\"SourceGraphic\"\n              stdDeviation=\"10\"\n              result=\"blur\"\n            />\n            <feColorMatrix\n              in=\"blur\"\n              mode=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8\"\n              result=\"goo\"\n            />\n            <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n          </filter>\n        </defs>\n      </svg>\n      <div className={mergeClassNames(\"\", className)}>{children}</div>\n      <div\n        className=\"h-full w-full\"\n        style={{\n          filter: isSafari ? \"blur(24px)\" : \"url(#blurMe) blur(40px)\",\n        }}\n      >\n        {/* First blob */}\n        <div\n          className=\"ui:animate-gradient-first\"\n          style={blobStyle(\n            firstColor,\n            \"animate-gradient-first\",\n            \"center center\",\n          )}\n        />\n        {/* Second blob */}\n        <div\n          className=\"ui:animate-gradient-second\"\n          style={blobStyle(\n            secondColor,\n            \"animate-gradient-second\",\n            \"calc(50% - 400px)\",\n          )}\n        />\n        {/* Third blob */}\n        <div\n          className=\"ui:animate-gradient-third\"\n          style={blobStyle(\n            thirdColor,\n            \"animate-gradient-third\",\n            \"calc(50% + 400px)\",\n          )}\n        />\n        {/* Fourth blob */}\n        <div\n          className=\"ui:animate-gradient-fourth\"\n          style={blobStyle(\n            fourthColor,\n            \"animate-gradient-fourth\",\n            \"calc(50% - 200px)\",\n            0.7,\n          )}\n        />\n        {/* Fifth blob */}\n        <div\n          className=\"ui:animate-gradient-fifth\"\n          style={blobStyle(\n            fifthColor,\n            \"animate-gradient-fifth\",\n            \"calc(50% - 800px) calc(50% + 800px)\",\n          )}\n        />\n\n        {interactive && (\n          <div\n            ref={interactiveRef}\n            onMouseMove={handleMouseMove}\n            className=\"absolute w-full h-full\"\n            style={{\n              top: \"-50%\",\n              left: \"-50%\",\n              willChange: \"transform\",\n              opacity: 0.7,\n              background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,\n              mixBlendMode:\n                blendingValue as React.CSSProperties[\"mixBlendMode\"],\n            }}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n","import { BackgroundGradientAnimation } from \"./BackgroundGradientAnimation\";\n\nexport default function BackgroundGradientAnimationDemo() {\n  return (\n    <BackgroundGradientAnimation>\n      <div className=\"ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-white ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl\">\n        <p className=\"ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-white/80 ui:to-white/20\">\n          Gradients X Animations\n        </p>\n      </div>\n    </BackgroundGradientAnimation>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/background-gradient-animation-CXV9GDH8.cjs

@@ -0,0 +1,156 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx
+var BackgroundGradientAnimation = ({ gradientBackgroundStart = "rgb(108, 0, 162)", gradientBackgroundEnd = "rgb(0, 17, 82)", firstColor = "18, 113, 255", secondColor = "221, 74, 255", thirdColor = "100, 220, 255", fourthColor = "200, 50, 50", fifthColor = "180, 180, 50", pointerColor = "140, 100, 255", size = "80%", blendingValue = "hard-light", children, className, interactive = true, containerClassName }) => {
+	const interactiveRef = (0, react.useRef)(null);
+	const containerRef = (0, react.useRef)(null);
+	const currentPositionRef = (0, react.useRef)({
+		x: 0,
+		y: 0
+	});
+	const targetPositionRef = (0, react.useRef)({
+		x: 0,
+		y: 0
+	});
+	(0, react.useEffect)(() => {
+		if (!interactive) return;
+		let animationFrameId = 0;
+		const move = () => {
+			const interactiveElement = interactiveRef.current;
+			if (interactiveElement) {
+				const currentPosition = currentPositionRef.current;
+				const targetPosition = targetPositionRef.current;
+				currentPosition.x += (targetPosition.x - currentPosition.x) / 20;
+				currentPosition.y += (targetPosition.y - currentPosition.y) / 20;
+				interactiveElement.style.transform = `translate(${Math.round(currentPosition.x)}px, ${Math.round(currentPosition.y)}px)`;
+			}
+			animationFrameId = window.requestAnimationFrame(move);
+		};
+		animationFrameId = window.requestAnimationFrame(move);
+		return () => {
+			window.cancelAnimationFrame(animationFrameId);
+		};
+	}, [interactive]);
+	const handleMouseMove = (event) => {
+		if (interactiveRef.current) {
+			const rect = interactiveRef.current.getBoundingClientRect();
+			targetPositionRef.current = {
+				x: event.clientX - rect.left,
+				y: event.clientY - rect.top
+			};
+		}
+	};
+	const [isSafari] = (0, react.useState)(() => typeof navigator !== "undefined" ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent) : false);
+	const blobStyle = (color, _animationClass, transformOrigin, opacity = 1) => ({
+		position: "absolute",
+		width: size,
+		height: size,
+		top: `calc(50% - ${size} / 2)`,
+		left: `calc(50% - ${size} / 2)`,
+		background: `radial-gradient(circle at center, rgba(${color}, 0.8) 0, rgba(${color}, 0) 50%) no-repeat`,
+		mixBlendMode: blendingValue,
+		transformOrigin,
+		opacity
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		className: require_utils.mergeClassNames("h-screen w-screen relative overflow-hidden top-0 left-0", containerClassName),
+		style: { background: `linear-gradient(40deg, ${gradientBackgroundStart}, ${gradientBackgroundEnd})` },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				className: "hidden",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("filter", {
+					id: "blurMe",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: "10",
+							result: "blur"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feColorMatrix", {
+							in: "blur",
+							mode: "matrix",
+							values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8",
+							result: "goo"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feBlend", {
+							in: "SourceGraphic",
+							in2: "goo"
+						})
+					]
+				}) })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_utils.mergeClassNames("", className),
+				children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "h-full w-full",
+				style: { filter: isSafari ? "blur(24px)" : "url(#blurMe) blur(40px)" },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ui:animate-gradient-first",
+						style: blobStyle(firstColor, "animate-gradient-first", "center center")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ui:animate-gradient-second",
+						style: blobStyle(secondColor, "animate-gradient-second", "calc(50% - 400px)")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ui:animate-gradient-third",
+						style: blobStyle(thirdColor, "animate-gradient-third", "calc(50% + 400px)")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ui:animate-gradient-fourth",
+						style: blobStyle(fourthColor, "animate-gradient-fourth", "calc(50% - 200px)", .7)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ui:animate-gradient-fifth",
+						style: blobStyle(fifthColor, "animate-gradient-fifth", "calc(50% - 800px) calc(50% + 800px)")
+					}),
+					interactive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: interactiveRef,
+						onMouseMove: handleMouseMove,
+						className: "absolute w-full h-full",
+						style: {
+							top: "-50%",
+							left: "-50%",
+							willChange: "transform",
+							opacity: .7,
+							background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,
+							mixBlendMode: blendingValue
+						}
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx
+function BackgroundGradientAnimationDemo() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackgroundGradientAnimation, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-white ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-white/80 ui:to-white/20",
+			children: "Gradients X Animations"
+		})
+	}) });
+}
+//#endregion
+Object.defineProperty(exports, "BackgroundGradientAnimation", {
+	enumerable: true,
+	get: function() {
+		return BackgroundGradientAnimation;
+	}
+});
+Object.defineProperty(exports, "BackgroundGradientAnimationDemo", {
+	enumerable: true,
+	get: function() {
+		return BackgroundGradientAnimationDemo;
+	}
+});
+
+//# sourceMappingURL=background-gradient-animation-CXV9GDH8.cjs.map

package/dist/chunks/background-gradient-animation-CXV9GDH8.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-gradient-animation-CXV9GDH8.cjs","names":[],"sources":["../../src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx","../../src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface BackgroundGradientAnimationProps {\n  gradientBackgroundStart?: string;\n  gradientBackgroundEnd?: string;\n  firstColor?: string;\n  secondColor?: string;\n  thirdColor?: string;\n  fourthColor?: string;\n  fifthColor?: string;\n  pointerColor?: string;\n  size?: string;\n  blendingValue?: string;\n  children?: React.ReactNode;\n  className?: string;\n  interactive?: boolean;\n  containerClassName?: string;\n}\n\nexport const BackgroundGradientAnimation = ({\n  gradientBackgroundStart = \"rgb(108, 0, 162)\",\n  gradientBackgroundEnd = \"rgb(0, 17, 82)\",\n  firstColor = \"18, 113, 255\",\n  secondColor = \"221, 74, 255\",\n  thirdColor = \"100, 220, 255\",\n  fourthColor = \"200, 50, 50\",\n  fifthColor = \"180, 180, 50\",\n  pointerColor = \"140, 100, 255\",\n  size = \"80%\",\n  blendingValue = \"hard-light\",\n  children,\n  className,\n  interactive = true,\n  containerClassName,\n}: BackgroundGradientAnimationProps) => {\n  const interactiveRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const currentPositionRef = useRef({ x: 0, y: 0 });\n  const targetPositionRef = useRef({ x: 0, y: 0 });\n\n  useEffect(() => {\n    if (!interactive) {\n      return;\n    }\n\n    let animationFrameId = 0;\n\n    const move = () => {\n      const interactiveElement = interactiveRef.current;\n\n      if (interactiveElement) {\n        const currentPosition = currentPositionRef.current;\n        const targetPosition = targetPositionRef.current;\n\n        currentPosition.x += (targetPosition.x - currentPosition.x) / 20;\n        currentPosition.y += (targetPosition.y - currentPosition.y) / 20;\n\n        interactiveElement.style.transform = `translate(${Math.round(\n          currentPosition.x,\n        )}px, ${Math.round(currentPosition.y)}px)`;\n      }\n\n      animationFrameId = window.requestAnimationFrame(move);\n    };\n\n    animationFrameId = window.requestAnimationFrame(move);\n\n    return () => {\n      window.cancelAnimationFrame(animationFrameId);\n    };\n  }, [interactive]);\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (interactiveRef.current) {\n      const rect = interactiveRef.current.getBoundingClientRect();\n      targetPositionRef.current = {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n      };\n    }\n  };\n\n  const [isSafari] = useState(() =>\n    typeof navigator !== \"undefined\"\n      ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)\n      : false,\n  );\n\n  const blobStyle = (\n    color: string,\n    _animationClass: string,\n    transformOrigin: string,\n    opacity: number = 1,\n  ): React.CSSProperties => ({\n    position: \"absolute\",\n    width: size,\n    height: size,\n    top: `calc(50% - ${size} / 2)`,\n    left: `calc(50% - ${size} / 2)`,\n    background: `radial-gradient(circle at center, rgba(${color}, 0.8) 0, rgba(${color}, 0) 50%) no-repeat`,\n    mixBlendMode: blendingValue as React.CSSProperties[\"mixBlendMode\"],\n    transformOrigin,\n    opacity,\n  });\n\n  return (\n    <div\n      ref={containerRef}\n      className={mergeClassNames(\n        \"h-screen w-screen relative overflow-hidden top-0 left-0\",\n        containerClassName,\n      )}\n      style={{\n        background: `linear-gradient(40deg, ${gradientBackgroundStart}, ${gradientBackgroundEnd})`,\n      }}\n    >\n      <svg className=\"hidden\">\n        <defs>\n          <filter id=\"blurMe\">\n            <feGaussianBlur\n              in=\"SourceGraphic\"\n              stdDeviation=\"10\"\n              result=\"blur\"\n            />\n            <feColorMatrix\n              in=\"blur\"\n              mode=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8\"\n              result=\"goo\"\n            />\n            <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n          </filter>\n        </defs>\n      </svg>\n      <div className={mergeClassNames(\"\", className)}>{children}</div>\n      <div\n        className=\"h-full w-full\"\n        style={{\n          filter: isSafari ? \"blur(24px)\" : \"url(#blurMe) blur(40px)\",\n        }}\n      >\n        {/* First blob */}\n        <div\n          className=\"ui:animate-gradient-first\"\n          style={blobStyle(\n            firstColor,\n            \"animate-gradient-first\",\n            \"center center\",\n          )}\n        />\n        {/* Second blob */}\n        <div\n          className=\"ui:animate-gradient-second\"\n          style={blobStyle(\n            secondColor,\n            \"animate-gradient-second\",\n            \"calc(50% - 400px)\",\n          )}\n        />\n        {/* Third blob */}\n        <div\n          className=\"ui:animate-gradient-third\"\n          style={blobStyle(\n            thirdColor,\n            \"animate-gradient-third\",\n            \"calc(50% + 400px)\",\n          )}\n        />\n        {/* Fourth blob */}\n        <div\n          className=\"ui:animate-gradient-fourth\"\n          style={blobStyle(\n            fourthColor,\n            \"animate-gradient-fourth\",\n            \"calc(50% - 200px)\",\n            0.7,\n          )}\n        />\n        {/* Fifth blob */}\n        <div\n          className=\"ui:animate-gradient-fifth\"\n          style={blobStyle(\n            fifthColor,\n            \"animate-gradient-fifth\",\n            \"calc(50% - 800px) calc(50% + 800px)\",\n          )}\n        />\n\n        {interactive && (\n          <div\n            ref={interactiveRef}\n            onMouseMove={handleMouseMove}\n            className=\"absolute w-full h-full\"\n            style={{\n              top: \"-50%\",\n              left: \"-50%\",\n              willChange: \"transform\",\n              opacity: 0.7,\n              background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,\n              mixBlendMode:\n                blendingValue as React.CSSProperties[\"mixBlendMode\"],\n            }}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n","import { BackgroundGradientAnimation } from \"./BackgroundGradientAnimation\";\n\nexport default function BackgroundGradientAnimationDemo() {\n  return (\n    <BackgroundGradientAnimation>\n      <div className=\"ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-white ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl\">\n        <p className=\"ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-white/80 ui:to-white/20\">\n          Gradients X Animations\n        </p>\n      </div>\n    </BackgroundGradientAnimation>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/button-B0Lhj0AS.mjs

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/button/Button.tsx
+var baseClasses = `
+  inline-flex
+  items-center
+  justify-center
+  gap-2
+  cursor-pointer
+  rounded-lg
+  font-semibold
+  leading-none
+  transition-all
+  duration-200
+  ease-in-out
+  active:scale-95
+  hover:opacity-90
+  disabled:opacity-50
+  disabled:cursor-not-allowed
+`;
+var variantClassMap = {
+	primary: "bg-accent hover:bg-accent-hover text-on-accent shadow-2",
+	secondary: "bg-surface border border-border text-fg shadow-1 hover:border-border-strong hover:bg-canvas"
+};
+var sizeClassMap = {
+	small: "py-2 px-3 text-xs",
+	medium: "py-2.5 px-4 text-sm",
+	large: "py-3 px-6 text-base"
+};
+var Button = ({ primary = false, size = "medium", backgroundColor, label, children, type = "button", className = "", ...props }) => {
+	const variantClasses = variantClassMap[primary ? "primary" : "secondary"];
+	return /* @__PURE__ */ jsxs("button", {
+		type,
+		className: `${baseClasses} ${variantClasses} ${sizeClassMap[size] || sizeClassMap.medium} ${className}`.trim(),
+		style: backgroundColor ? { backgroundColor } : void 0,
+		...props,
+		children: [children, label && /* @__PURE__ */ jsx("span", { children: label })]
+	});
+};
+//#endregion
+export { Button as t };
+
+//# sourceMappingURL=button-B0Lhj0AS.mjs.map

package/dist/chunks/button-B0Lhj0AS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-B0Lhj0AS.mjs","names":[],"sources":["../../src/components/forms/button/Button.tsx"],"sourcesContent":["import type { ButtonProps } from \"./types\";\n\nconst baseClasses = `\n  inline-flex\n  items-center\n  justify-center\n  gap-2\n  cursor-pointer\n  rounded-lg\n  font-semibold\n  leading-none\n  transition-all\n  duration-200\n  ease-in-out\n  active:scale-95\n  hover:opacity-90\n  disabled:opacity-50\n  disabled:cursor-not-allowed\n`;\nconst variantClassMap = {\n  primary: \"bg-accent hover:bg-accent-hover text-on-accent shadow-2\",\n  secondary:\n    \"bg-surface border border-border text-fg shadow-1 hover:border-border-strong hover:bg-canvas\",\n};\nconst sizeClassMap = {\n  small: \"py-2 px-3 text-xs\",\n  medium: \"py-2.5 px-4 text-sm\",\n  large: \"py-3 px-6 text-base\",\n};\n\nexport const Button = ({\n  primary = false,\n  size = \"medium\",\n  backgroundColor,\n  label,\n  children,\n  type = \"button\",\n  className = \"\",\n  ...props\n}: ButtonProps) => {\n  const variantClasses = variantClassMap[primary ? \"primary\" : \"secondary\"];\n  const sizeClasses =\n    sizeClassMap[size as keyof typeof sizeClassMap] || sizeClassMap.medium;\n\n  return (\n    <button\n      type={type}\n      className={`${baseClasses} ${variantClasses} ${sizeClasses} ${className}`.trim()}\n      style={backgroundColor ? { backgroundColor } : undefined}\n      {...props}\n    >\n      {children}\n      {label && <span>{label}</span>}\n    </button>\n  );\n};\n"],"mappings":";;AAEA,IAAM,cAAc;;;;;;;;;;;;;;;;;AAiBpB,IAAM,kBAAkB;CACtB,SAAS;CACT,WACE;CACH;AACD,IAAM,eAAe;CACnB,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAa,UAAU,EACrB,UAAU,OACV,OAAO,UACP,iBACA,OACA,UACA,OAAO,UACP,YAAY,IACZ,GAAG,YACc;CACjB,MAAM,iBAAiB,gBAAgB,UAAU,YAAY;AAI7D,QACE,qBAAC,UAAD;EACQ;EACN,WAAW,GAAG,YAAY,GAAG,eAAe,GAL9C,aAAa,SAAsC,aAAa,OAKH,GAAG,YAAY,MAAM;EAChF,OAAO,kBAAkB,EAAE,iBAAiB,GAAG,KAAA;EAC/C,GAAI;YAJN,CAMG,UACA,SAAS,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,CACvB"}

package/dist/chunks/button-CZL6kFzT.cjs

@@ -0,0 +1,48 @@
+require("./chunk-B_GkZjkl.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/forms/button/Button.tsx
+var baseClasses = `
+  inline-flex
+  items-center
+  justify-center
+  gap-2
+  cursor-pointer
+  rounded-lg
+  font-semibold
+  leading-none
+  transition-all
+  duration-200
+  ease-in-out
+  active:scale-95
+  hover:opacity-90
+  disabled:opacity-50
+  disabled:cursor-not-allowed
+`;
+var variantClassMap = {
+	primary: "bg-accent hover:bg-accent-hover text-on-accent shadow-2",
+	secondary: "bg-surface border border-border text-fg shadow-1 hover:border-border-strong hover:bg-canvas"
+};
+var sizeClassMap = {
+	small: "py-2 px-3 text-xs",
+	medium: "py-2.5 px-4 text-sm",
+	large: "py-3 px-6 text-base"
+};
+var Button = ({ primary = false, size = "medium", backgroundColor, label, children, type = "button", className = "", ...props }) => {
+	const variantClasses = variantClassMap[primary ? "primary" : "secondary"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type,
+		className: `${baseClasses} ${variantClasses} ${sizeClassMap[size] || sizeClassMap.medium} ${className}`.trim(),
+		style: backgroundColor ? { backgroundColor } : void 0,
+		...props,
+		children: [children, label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "Button", {
+	enumerable: true,
+	get: function() {
+		return Button;
+	}
+});
+
+//# sourceMappingURL=button-CZL6kFzT.cjs.map

package/dist/chunks/button-CZL6kFzT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-CZL6kFzT.cjs","names":[],"sources":["../../src/components/forms/button/Button.tsx"],"sourcesContent":["import type { ButtonProps } from \"./types\";\n\nconst baseClasses = `\n  inline-flex\n  items-center\n  justify-center\n  gap-2\n  cursor-pointer\n  rounded-lg\n  font-semibold\n  leading-none\n  transition-all\n  duration-200\n  ease-in-out\n  active:scale-95\n  hover:opacity-90\n  disabled:opacity-50\n  disabled:cursor-not-allowed\n`;\nconst variantClassMap = {\n  primary: \"bg-accent hover:bg-accent-hover text-on-accent shadow-2\",\n  secondary:\n    \"bg-surface border border-border text-fg shadow-1 hover:border-border-strong hover:bg-canvas\",\n};\nconst sizeClassMap = {\n  small: \"py-2 px-3 text-xs\",\n  medium: \"py-2.5 px-4 text-sm\",\n  large: \"py-3 px-6 text-base\",\n};\n\nexport const Button = ({\n  primary = false,\n  size = \"medium\",\n  backgroundColor,\n  label,\n  children,\n  type = \"button\",\n  className = \"\",\n  ...props\n}: ButtonProps) => {\n  const variantClasses = variantClassMap[primary ? \"primary\" : \"secondary\"];\n  const sizeClasses =\n    sizeClassMap[size as keyof typeof sizeClassMap] || sizeClassMap.medium;\n\n  return (\n    <button\n      type={type}\n      className={`${baseClasses} ${variantClasses} ${sizeClasses} ${className}`.trim()}\n      style={backgroundColor ? { backgroundColor } : undefined}\n      {...props}\n    >\n      {children}\n      {label && <span>{label}</span>}\n    </button>\n  );\n};\n"],"mappings":";;;AAEA,IAAM,cAAc;;;;;;;;;;;;;;;;;AAiBpB,IAAM,kBAAkB;CACtB,SAAS;CACT,WACE;CACH;AACD,IAAM,eAAe;CACnB,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAa,UAAU,EACrB,UAAU,OACV,OAAO,UACP,iBACA,OACA,UACA,OAAO,UACP,YAAY,IACZ,GAAG,YACc;CACjB,MAAM,iBAAiB,gBAAgB,UAAU,YAAY;AAI7D,QACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;EACQ;EACN,WAAW,GAAG,YAAY,GAAG,eAAe,GAL9C,aAAa,SAAsC,aAAa,OAKH,GAAG,YAAY,MAAM;EAChF,OAAO,kBAAkB,EAAE,iBAAiB,GAAG,KAAA;EAC/C,GAAI;YAJN,CAMG,UACA,SAAS,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,OAAa,CAAA,CACvB"}

package/dist/chunks/button-hover-border-gradient-CSHXM5Cm.cjs

@@ -0,0 +1,24 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_HoverBorderGradient = require("./HoverBorderGradient-Df3PKpw6.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/effects/button-hover-border-gradient/ButtonHoverBorderGradient.tsx
+var ButtonHoverBorderGradient = ({ children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "m-40 flex justify-center text-center",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HoverBorderGradient.HoverBorderGradient, {
+			containerClassName: "rounded",
+			className: "flex items-center space-x-2 bg-white text-black dark:bg-black dark:text-white",
+			children
+		})
+	});
+};
+//#endregion
+Object.defineProperty(exports, "ButtonHoverBorderGradient", {
+	enumerable: true,
+	get: function() {
+		return ButtonHoverBorderGradient;
+	}
+});
+
+//# sourceMappingURL=button-hover-border-gradient-CSHXM5Cm.cjs.map

package/dist/chunks/button-hover-border-gradient-CSHXM5Cm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-hover-border-gradient-CSHXM5Cm.cjs","names":[],"sources":["../../src/components/effects/button-hover-border-gradient/ButtonHoverBorderGradient.tsx"],"sourcesContent":["import { HoverBorderGradient } from \"../hover-border-gradient/HoverBorderGradient\";\n\ninterface ButtonHoverBorderGradientProps {\n  children?: React.ReactNode;\n}\n\nexport const ButtonHoverBorderGradient: React.FC<\n  ButtonHoverBorderGradientProps\n> = ({ children, ...props }) => {\n  return (\n    <div className=\"m-40 flex justify-center text-center\" {...props}>\n      <HoverBorderGradient\n        containerClassName=\"rounded\"\n        className=\"flex items-center space-x-2 bg-white text-black dark:bg-black dark:text-white\"\n      >\n        {children}\n      </HoverBorderGradient>\n    </div>\n  );\n};\n"],"mappings":";;;;AAMA,IAAa,6BAER,EAAE,UAAU,GAAG,YAAY;AAC9B,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EAAuC,GAAI;YACxD,iBAAA,GAAA,kBAAA,KAAC,4BAAA,qBAAD;GACE,oBAAmB;GACnB,WAAU;GAET;GACmB,CAAA;EAClB,CAAA"}

package/dist/chunks/button-hover-border-gradient-CvoM60wz.mjs

@@ -0,0 +1,18 @@
+import { t as HoverBorderGradient } from "./HoverBorderGradient-DVFEIXFQ.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/effects/button-hover-border-gradient/ButtonHoverBorderGradient.tsx
+var ButtonHoverBorderGradient = ({ children, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "m-40 flex justify-center text-center",
+		...props,
+		children: /* @__PURE__ */ jsx(HoverBorderGradient, {
+			containerClassName: "rounded",
+			className: "flex items-center space-x-2 bg-white text-black dark:bg-black dark:text-white",
+			children
+		})
+	});
+};
+//#endregion
+export { ButtonHoverBorderGradient as t };
+
+//# sourceMappingURL=button-hover-border-gradient-CvoM60wz.mjs.map

package/dist/chunks/button-hover-border-gradient-CvoM60wz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-hover-border-gradient-CvoM60wz.mjs","names":[],"sources":["../../src/components/effects/button-hover-border-gradient/ButtonHoverBorderGradient.tsx"],"sourcesContent":["import { HoverBorderGradient } from \"../hover-border-gradient/HoverBorderGradient\";\n\ninterface ButtonHoverBorderGradientProps {\n  children?: React.ReactNode;\n}\n\nexport const ButtonHoverBorderGradient: React.FC<\n  ButtonHoverBorderGradientProps\n> = ({ children, ...props }) => {\n  return (\n    <div className=\"m-40 flex justify-center text-center\" {...props}>\n      <HoverBorderGradient\n        containerClassName=\"rounded\"\n        className=\"flex items-center space-x-2 bg-white text-black dark:bg-black dark:text-white\"\n      >\n        {children}\n      </HoverBorderGradient>\n    </div>\n  );\n};\n"],"mappings":";;;AAMA,IAAa,6BAER,EAAE,UAAU,GAAG,YAAY;AAC9B,QACE,oBAAC,OAAD;EAAK,WAAU;EAAuC,GAAI;YACxD,oBAAC,qBAAD;GACE,oBAAmB;GACnB,WAAU;GAET;GACmB,CAAA;EAClB,CAAA"}

package/dist/chunks/calendar-BarcG6x_.mjs

@@ -0,0 +1,137 @@
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/calendar/Calendar.tsx
+var dayNames = [
+	"SUN",
+	"MON",
+	"TUE",
+	"WED",
+	"THU",
+	"FRI",
+	"SAT"
+];
+var getDaysInMonth = (month, year) => {
+	const firstDay = new Date(year, month, 1);
+	const lastDay = new Date(year, month + 1, 0);
+	const startWeekday = firstDay.getDay();
+	const daysInMonth = lastDay.getDate();
+	const days = [];
+	for (let index = 0; index < startWeekday; index += 1) days.push(null);
+	for (let day = 1; day <= daysInMonth; day += 1) days.push(new Date(year, month, day));
+	while (days.length % 7 !== 0) days.push(null);
+	return days;
+};
+var normalizeRange = (range) => ({
+	start: range?.start ?? null,
+	end: range?.end ?? null
+});
+var isSameDay = (left, right) => {
+	if (!left || !right) return false;
+	return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+};
+var Calendar = ({ value = null, range, selectionMode = "single", onSelect, onRangeSelect, month, year, onMonthChange, footer, className = "" }) => {
+	const today = /* @__PURE__ */ new Date();
+	const [internalMonth, setInternalMonth] = useState(month ?? today.getMonth());
+	const [internalYear, setInternalYear] = useState(year ?? today.getFullYear());
+	const [internalRange, setInternalRange] = useState(normalizeRange(range));
+	const currentMonth = month ?? internalMonth;
+	const currentYear = year ?? internalYear;
+	const currentRange = range ? normalizeRange(range) : internalRange;
+	const updateMonth = (offset) => {
+		const nextDate = new Date(currentYear, currentMonth + offset, 1);
+		if (month === void 0) {
+			setInternalMonth(nextDate.getMonth());
+			setInternalYear(nextDate.getFullYear());
+		}
+		onMonthChange?.(nextDate.getMonth(), nextDate.getFullYear());
+	};
+	const days = useMemo(() => getDaysInMonth(currentMonth, currentYear), [currentMonth, currentYear]);
+	const isInRange = (date) => {
+		if (!date || !currentRange.start || !currentRange.end) return false;
+		const time = date.getTime();
+		const start = currentRange.start.getTime();
+		const end = currentRange.end.getTime();
+		return time >= Math.min(start, end) && time <= Math.max(start, end);
+	};
+	const handleSelect = (date) => {
+		if (selectionMode === "range") {
+			const existingRange = currentRange;
+			let nextRange = existingRange;
+			if (!existingRange.start || existingRange.end) nextRange = {
+				start: date,
+				end: null
+			};
+			else if (date.getTime() < existingRange.start.getTime()) nextRange = {
+				start: date,
+				end: existingRange.start
+			};
+			else nextRange = {
+				start: existingRange.start,
+				end: date
+			};
+			if (!range) setInternalRange(nextRange);
+			onRangeSelect?.(nextRange);
+			return;
+		}
+		onSelect?.(date);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `w-[320px] rounded-lg border border-white/20 bg-white/70 p-4 shadow-xl backdrop-blur-xl dark:border-white/10 dark:bg-neutral-900/70 ${className}`.trim(),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-4 flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "text-sm text-muted-foreground",
+						onClick: () => updateMonth(-1),
+						"aria-label": "Previous month",
+						children: "←"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium text-heading",
+						children: new Date(currentYear, currentMonth).toLocaleString(void 0, {
+							month: "long",
+							year: "numeric"
+						})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "text-sm text-muted-foreground",
+						onClick: () => updateMonth(1),
+						"aria-label": "Next month",
+						children: "→"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-7 gap-2 text-center",
+				children: [dayNames.map((dayName) => /* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: dayName
+				}, dayName)), days.map((date, index) => {
+					const isSelected = selectionMode === "single" && isSameDay(date, value);
+					const isToday = isSameDay(date, today);
+					const inRange = selectionMode === "range" && isInRange(date);
+					const isRangeStart = selectionMode === "range" && isSameDay(date, currentRange.start);
+					const isRangeEnd = selectionMode === "range" && isSameDay(date, currentRange.end);
+					if (!date) return /* @__PURE__ */ jsx("span", {}, `empty-${index}`);
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: `rounded-md px-0 py-2 text-sm transition-colors ${isSelected || isRangeStart || isRangeEnd ? "bg-ring text-white" : inRange ? "bg-ring/10 text-heading" : isToday ? "border border-ring text-heading" : "text-muted-foreground"}`,
+						onClick: () => handleSelect(date),
+						children: date.getDate()
+					}, date.toISOString());
+				})]
+			}),
+			footer ? /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: footer
+			}) : null
+		]
+	});
+};
+//#endregion
+export { Calendar as t };
+
+//# sourceMappingURL=calendar-BarcG6x_.mjs.map