erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/chroma-grid-9E9j1s9I.cjs

@@ -0,0 +1,221 @@
+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/chroma-grid/ChromaGrid.tsx
+var borderRadiusMap = {
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	xl: "rounded-xl",
+	"2xl": "rounded-2xl"
+};
+var defaultColors = [
+	"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 100%)",
+	"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-info) 100%)",
+	"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-accent-hover) 100%)",
+	"linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-accent) 100%)",
+	"linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-accent) 100%)",
+	"linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-warning) 100%)",
+	"linear-gradient(135deg, var(--ds-color-accent-hover) 0%, var(--ds-color-success) 100%)",
+	"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-success) 100%)"
+];
+var getAnimation = (animation, index, staggerDelay) => {
+	const delay = index * staggerDelay / 1e3;
+	switch (animation) {
+		case "wave": return {
+			initial: {
+				opacity: 0,
+				y: 30,
+				rotateX: -15
+			},
+			animate: {
+				opacity: 1,
+				y: 0,
+				rotateX: 0
+			},
+			transition: {
+				delay,
+				duration: .6,
+				ease: [
+					.23,
+					1,
+					.32,
+					1
+				]
+			}
+		};
+		case "pulse": return {
+			initial: {
+				scale: .8,
+				opacity: 0
+			},
+			animate: {
+				scale: 1,
+				opacity: 1
+			},
+			transition: {
+				delay,
+				duration: .5,
+				type: "spring",
+				stiffness: 200
+			}
+		};
+		case "fadeIn": return {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			transition: {
+				delay,
+				duration: .4
+			}
+		};
+		case "scale": return {
+			initial: {
+				scale: 0,
+				opacity: 0
+			},
+			animate: {
+				scale: 1,
+				opacity: 1
+			},
+			transition: {
+				delay,
+				duration: .5,
+				type: "spring",
+				stiffness: 300,
+				damping: 20
+			}
+		};
+		default: return {};
+	}
+};
+var getHoverEffect = (effect) => {
+	switch (effect) {
+		case "lift": return {
+			y: -8,
+			transition: { duration: .3 }
+		};
+		case "glow": return {
+			boxShadow: "0 0 30px color-mix(in srgb, var(--ds-color-accent) 45%, transparent)",
+			transition: { duration: .3 }
+		};
+		case "scale": return {
+			scale: 1.05,
+			transition: { duration: .3 }
+		};
+		case "tilt": return {
+			rotateY: 5,
+			rotateX: 5,
+			transition: { duration: .3 }
+		};
+		default: return {};
+	}
+};
+var GridItem = ({ item, index, animation, staggerDelay, hoverEffect, variant, borderRadius, minHeight, spotlight }) => {
+	const itemRef = (0, react.useRef)(null);
+	const [mousePosition, setMousePosition] = (0, react.useState)({
+		x: 0,
+		y: 0
+	});
+	const [isHovered, setIsHovered] = (0, react.useState)(false);
+	const color = item.color || defaultColors[index % defaultColors.length];
+	const animationProps = getAnimation(animation, index, staggerDelay);
+	const hoverProps = getHoverEffect(hoverEffect);
+	const handleMouseMove = (e) => {
+		if (!itemRef.current || !spotlight) return;
+		const rect = itemRef.current.getBoundingClientRect();
+		setMousePosition({
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		});
+	};
+	const gridSpan = item.size && item.size > 1 ? {
+		gridColumn: `span ${item.size}`,
+		gridRow: `span ${item.size}`
+	} : {};
+	const variantStyles = {
+		glass: {
+			backgroundColor: "rgba(255, 255, 255, 0.1)",
+			backdropFilter: "blur(20px)",
+			WebkitBackdropFilter: "blur(20px)"
+		},
+		solid: {},
+		gradient: { background: color }
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+		ref: itemRef,
+		className: require_utils.mergeClassNames("relative overflow-hidden cursor-pointer transition-shadow", borderRadiusMap[borderRadius], variant === "glass" && "border border-white/20 dark:border-white/10", item.className),
+		style: {
+			minHeight: item.size && item.size > 1 ? minHeight * item.size : minHeight,
+			...gridSpan,
+			...variantStyles[variant],
+			...variant !== "glass" && { background: color }
+		},
+		onMouseMove: handleMouseMove,
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		onClick: item.onClick,
+		...animationProps,
+		whileHover: hoverProps,
+		children: [
+			spotlight && isHovered && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+				className: "pointer-events-none absolute inset-0 z-0",
+				style: { background: `radial-gradient(300px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.2), transparent 70%)` },
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				transition: { duration: .2 }
+			}),
+			variant === "gradient" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/10 dark:bg-black/20" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative z-10 h-full flex flex-col justify-center items-center p-6 text-center",
+				children: [
+					item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-4xl text-white mb-3 drop-shadow-lg",
+						children: item.icon
+					}),
+					item.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "text-lg font-bold text-white mb-1 drop-shadow-md",
+						children: item.title
+					}),
+					item.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-sm text-white/80 drop-shadow-sm",
+						children: item.description
+					}),
+					item.content
+				]
+			})
+		]
+	});
+};
+var ChromaGrid = ({ items, className, columns = 3, gap = 16, minHeight = 200, animation = "wave", staggerDelay = 100, hoverEffect = "lift", variant = "gradient", borderRadius = "xl", spotlight = true, style }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.mergeClassNames("grid w-full", className),
+		style: {
+			gridTemplateColumns: `repeat(${columns}, 1fr)`,
+			gap: `${gap}px`,
+			...style
+		},
+		children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridItem, {
+			item,
+			index,
+			animation,
+			staggerDelay,
+			hoverEffect,
+			variant,
+			borderRadius,
+			minHeight,
+			spotlight
+		}, item.id))
+	});
+};
+ChromaGrid.displayName = "ChromaGrid";
+//#endregion
+Object.defineProperty(exports, "ChromaGrid", {
+	enumerable: true,
+	get: function() {
+		return ChromaGrid;
+	}
+});
+
+//# sourceMappingURL=chroma-grid-9E9j1s9I.cjs.map

package/dist/chunks/chroma-grid-9E9j1s9I.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chroma-grid-9E9j1s9I.cjs","names":[],"sources":["../../src/components/effects/chroma-grid/ChromaGrid.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { ChromaGridProps, ChromaGridItem } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n};\n\nconst defaultColors = [\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-info) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-warning) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent-hover) 0%, var(--ds-color-success) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-success) 100%)\",\n];\n\nconst getAnimation = (\n  animation: string,\n  index: number,\n  staggerDelay: number,\n) => {\n  const delay = (index * staggerDelay) / 1000;\n\n  switch (animation) {\n    case \"wave\":\n      return {\n        initial: { opacity: 0, y: 30, rotateX: -15 },\n        animate: { opacity: 1, y: 0, rotateX: 0 },\n        transition: { delay, duration: 0.6, ease: [0.23, 1, 0.32, 1] as const },\n      };\n    case \"pulse\":\n      return {\n        initial: { scale: 0.8, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 200,\n        },\n      };\n    case \"fadeIn\":\n      return {\n        initial: { opacity: 0 },\n        animate: { opacity: 1 },\n        transition: { delay, duration: 0.4 },\n      };\n    case \"scale\":\n      return {\n        initial: { scale: 0, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 300,\n          damping: 20,\n        },\n      };\n    default:\n      return {};\n  }\n};\n\nconst getHoverEffect = (effect: string) => {\n  switch (effect) {\n    case \"lift\":\n      return { y: -8, transition: { duration: 0.3 } };\n    case \"glow\":\n      return {\n        boxShadow:\n          \"0 0 30px color-mix(in srgb, var(--ds-color-accent) 45%, transparent)\",\n        transition: { duration: 0.3 },\n      };\n    case \"scale\":\n      return { scale: 1.05, transition: { duration: 0.3 } };\n    case \"tilt\":\n      return { rotateY: 5, rotateX: 5, transition: { duration: 0.3 } };\n    default:\n      return {};\n  }\n};\n\ninterface GridItemProps {\n  item: ChromaGridItem;\n  index: number;\n  animation: string;\n  staggerDelay: number;\n  hoverEffect: string;\n  variant: string;\n  borderRadius: string;\n  minHeight: number;\n  spotlight: boolean;\n}\n\nconst GridItem = ({\n  item,\n  index,\n  animation,\n  staggerDelay,\n  hoverEffect,\n  variant,\n  borderRadius,\n  minHeight,\n  spotlight,\n}: GridItemProps) => {\n  const itemRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const color = item.color || defaultColors[index % defaultColors.length];\n  const animationProps = getAnimation(animation, index, staggerDelay);\n  const hoverProps = getHoverEffect(hoverEffect);\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (!itemRef.current || !spotlight) return;\n    const rect = itemRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const gridSpan =\n    item.size && item.size > 1\n      ? { gridColumn: `span ${item.size}`, gridRow: `span ${item.size}` }\n      : {};\n\n  const variantStyles = {\n    glass: {\n      backgroundColor: \"rgba(255, 255, 255, 0.1)\",\n      backdropFilter: \"blur(20px)\",\n      WebkitBackdropFilter: \"blur(20px)\",\n    },\n    solid: {},\n    gradient: { background: color },\n  };\n\n  return (\n    <motion.div\n      ref={itemRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden cursor-pointer transition-shadow\",\n        borderRadiusMap[borderRadius as keyof typeof borderRadiusMap],\n        variant === \"glass\" && \"border border-white/20 dark:border-white/10\",\n        item.className,\n      )}\n      style={{\n        minHeight:\n          item.size && item.size > 1 ? minHeight * item.size : minHeight,\n        ...gridSpan,\n        ...variantStyles[variant as keyof typeof variantStyles],\n        ...(variant !== \"glass\" && { background: color }),\n      }}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={item.onClick}\n      {...animationProps}\n      whileHover={hoverProps}\n    >\n      {/* Spotlight effect */}\n      {spotlight && isHovered && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={{\n            background: `radial-gradient(300px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.2), transparent 70%)`,\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Glass overlay for gradient variant */}\n      {variant === \"gradient\" && (\n        <div className=\"absolute inset-0 bg-black/10 dark:bg-black/20\" />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10 h-full flex flex-col justify-center items-center p-6 text-center\">\n        {item.icon && (\n          <div className=\"text-4xl text-white mb-3 drop-shadow-lg\">\n            {item.icon}\n          </div>\n        )}\n        {item.title && (\n          <h3 className=\"text-lg font-bold text-white mb-1 drop-shadow-md\">\n            {item.title}\n          </h3>\n        )}\n        {item.description && (\n          <p className=\"text-sm text-white/80 drop-shadow-sm\">\n            {item.description}\n          </p>\n        )}\n        {item.content}\n      </div>\n    </motion.div>\n  );\n};\n\nexport const ChromaGrid = ({\n  items,\n  className,\n  columns = 3,\n  gap = 16,\n  minHeight = 200,\n  animation = \"wave\",\n  staggerDelay = 100,\n  hoverEffect = \"lift\",\n  variant = \"gradient\",\n  borderRadius = \"xl\",\n  spotlight = true,\n  style,\n}: ChromaGridProps) => {\n  return (\n    <div\n      className={mergeClassNames(\"grid w-full\", className)}\n      style={{\n        gridTemplateColumns: `repeat(${columns}, 1fr)`,\n        gap: `${gap}px`,\n        ...style,\n      }}\n    >\n      {items.map((item, index) => (\n        <GridItem\n          key={item.id}\n          item={item}\n          index={index}\n          animation={animation}\n          staggerDelay={staggerDelay}\n          hoverEffect={hoverEffect}\n          variant={variant}\n          borderRadius={borderRadius}\n          minHeight={minHeight}\n          spotlight={spotlight}\n        />\n      ))}\n    </div>\n  );\n};\n\nChromaGrid.displayName = \"ChromaGrid\";\n\nexport default ChromaGrid;\n"],"mappings":"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"}

package/dist/chunks/chroma-grid-Cdeql_2C.mjs

@@ -0,0 +1,215 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+//#region src/components/effects/chroma-grid/ChromaGrid.tsx
+var borderRadiusMap = {
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	xl: "rounded-xl",
+	"2xl": "rounded-2xl"
+};
+var defaultColors = [
+	"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 100%)",
+	"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-info) 100%)",
+	"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-accent-hover) 100%)",
+	"linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-accent) 100%)",
+	"linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-accent) 100%)",
+	"linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-warning) 100%)",
+	"linear-gradient(135deg, var(--ds-color-accent-hover) 0%, var(--ds-color-success) 100%)",
+	"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-success) 100%)"
+];
+var getAnimation = (animation, index, staggerDelay) => {
+	const delay = index * staggerDelay / 1e3;
+	switch (animation) {
+		case "wave": return {
+			initial: {
+				opacity: 0,
+				y: 30,
+				rotateX: -15
+			},
+			animate: {
+				opacity: 1,
+				y: 0,
+				rotateX: 0
+			},
+			transition: {
+				delay,
+				duration: .6,
+				ease: [
+					.23,
+					1,
+					.32,
+					1
+				]
+			}
+		};
+		case "pulse": return {
+			initial: {
+				scale: .8,
+				opacity: 0
+			},
+			animate: {
+				scale: 1,
+				opacity: 1
+			},
+			transition: {
+				delay,
+				duration: .5,
+				type: "spring",
+				stiffness: 200
+			}
+		};
+		case "fadeIn": return {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			transition: {
+				delay,
+				duration: .4
+			}
+		};
+		case "scale": return {
+			initial: {
+				scale: 0,
+				opacity: 0
+			},
+			animate: {
+				scale: 1,
+				opacity: 1
+			},
+			transition: {
+				delay,
+				duration: .5,
+				type: "spring",
+				stiffness: 300,
+				damping: 20
+			}
+		};
+		default: return {};
+	}
+};
+var getHoverEffect = (effect) => {
+	switch (effect) {
+		case "lift": return {
+			y: -8,
+			transition: { duration: .3 }
+		};
+		case "glow": return {
+			boxShadow: "0 0 30px color-mix(in srgb, var(--ds-color-accent) 45%, transparent)",
+			transition: { duration: .3 }
+		};
+		case "scale": return {
+			scale: 1.05,
+			transition: { duration: .3 }
+		};
+		case "tilt": return {
+			rotateY: 5,
+			rotateX: 5,
+			transition: { duration: .3 }
+		};
+		default: return {};
+	}
+};
+var GridItem = ({ item, index, animation, staggerDelay, hoverEffect, variant, borderRadius, minHeight, spotlight }) => {
+	const itemRef = useRef(null);
+	const [mousePosition, setMousePosition] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isHovered, setIsHovered] = useState(false);
+	const color = item.color || defaultColors[index % defaultColors.length];
+	const animationProps = getAnimation(animation, index, staggerDelay);
+	const hoverProps = getHoverEffect(hoverEffect);
+	const handleMouseMove = (e) => {
+		if (!itemRef.current || !spotlight) return;
+		const rect = itemRef.current.getBoundingClientRect();
+		setMousePosition({
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		});
+	};
+	const gridSpan = item.size && item.size > 1 ? {
+		gridColumn: `span ${item.size}`,
+		gridRow: `span ${item.size}`
+	} : {};
+	const variantStyles = {
+		glass: {
+			backgroundColor: "rgba(255, 255, 255, 0.1)",
+			backdropFilter: "blur(20px)",
+			WebkitBackdropFilter: "blur(20px)"
+		},
+		solid: {},
+		gradient: { background: color }
+	};
+	return /* @__PURE__ */ jsxs(motion.div, {
+		ref: itemRef,
+		className: mergeClassNames("relative overflow-hidden cursor-pointer transition-shadow", borderRadiusMap[borderRadius], variant === "glass" && "border border-white/20 dark:border-white/10", item.className),
+		style: {
+			minHeight: item.size && item.size > 1 ? minHeight * item.size : minHeight,
+			...gridSpan,
+			...variantStyles[variant],
+			...variant !== "glass" && { background: color }
+		},
+		onMouseMove: handleMouseMove,
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		onClick: item.onClick,
+		...animationProps,
+		whileHover: hoverProps,
+		children: [
+			spotlight && isHovered && /* @__PURE__ */ jsx(motion.div, {
+				className: "pointer-events-none absolute inset-0 z-0",
+				style: { background: `radial-gradient(300px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.2), transparent 70%)` },
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				transition: { duration: .2 }
+			}),
+			variant === "gradient" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/10 dark:bg-black/20" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative z-10 h-full flex flex-col justify-center items-center p-6 text-center",
+				children: [
+					item.icon && /* @__PURE__ */ jsx("div", {
+						className: "text-4xl text-white mb-3 drop-shadow-lg",
+						children: item.icon
+					}),
+					item.title && /* @__PURE__ */ jsx("h3", {
+						className: "text-lg font-bold text-white mb-1 drop-shadow-md",
+						children: item.title
+					}),
+					item.description && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-white/80 drop-shadow-sm",
+						children: item.description
+					}),
+					item.content
+				]
+			})
+		]
+	});
+};
+var ChromaGrid = ({ items, className, columns = 3, gap = 16, minHeight = 200, animation = "wave", staggerDelay = 100, hoverEffect = "lift", variant = "gradient", borderRadius = "xl", spotlight = true, style }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: mergeClassNames("grid w-full", className),
+		style: {
+			gridTemplateColumns: `repeat(${columns}, 1fr)`,
+			gap: `${gap}px`,
+			...style
+		},
+		children: items.map((item, index) => /* @__PURE__ */ jsx(GridItem, {
+			item,
+			index,
+			animation,
+			staggerDelay,
+			hoverEffect,
+			variant,
+			borderRadius,
+			minHeight,
+			spotlight
+		}, item.id))
+	});
+};
+ChromaGrid.displayName = "ChromaGrid";
+//#endregion
+export { ChromaGrid as t };
+
+//# sourceMappingURL=chroma-grid-Cdeql_2C.mjs.map

package/dist/chunks/chroma-grid-Cdeql_2C.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chroma-grid-Cdeql_2C.mjs","names":[],"sources":["../../src/components/effects/chroma-grid/ChromaGrid.tsx"],"sourcesContent":["import { useState, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { ChromaGridProps, ChromaGridItem } from \"./types\";\n\nconst borderRadiusMap = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  \"2xl\": \"rounded-2xl\",\n};\n\nconst defaultColors = [\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-info) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-accent-hover) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-warning) 0%, var(--ds-color-accent) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-danger) 0%, var(--ds-color-warning) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-accent-hover) 0%, var(--ds-color-success) 100%)\",\n  \"linear-gradient(135deg, var(--ds-color-info) 0%, var(--ds-color-success) 100%)\",\n];\n\nconst getAnimation = (\n  animation: string,\n  index: number,\n  staggerDelay: number,\n) => {\n  const delay = (index * staggerDelay) / 1000;\n\n  switch (animation) {\n    case \"wave\":\n      return {\n        initial: { opacity: 0, y: 30, rotateX: -15 },\n        animate: { opacity: 1, y: 0, rotateX: 0 },\n        transition: { delay, duration: 0.6, ease: [0.23, 1, 0.32, 1] as const },\n      };\n    case \"pulse\":\n      return {\n        initial: { scale: 0.8, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 200,\n        },\n      };\n    case \"fadeIn\":\n      return {\n        initial: { opacity: 0 },\n        animate: { opacity: 1 },\n        transition: { delay, duration: 0.4 },\n      };\n    case \"scale\":\n      return {\n        initial: { scale: 0, opacity: 0 },\n        animate: { scale: 1, opacity: 1 },\n        transition: {\n          delay,\n          duration: 0.5,\n          type: \"spring\" as const,\n          stiffness: 300,\n          damping: 20,\n        },\n      };\n    default:\n      return {};\n  }\n};\n\nconst getHoverEffect = (effect: string) => {\n  switch (effect) {\n    case \"lift\":\n      return { y: -8, transition: { duration: 0.3 } };\n    case \"glow\":\n      return {\n        boxShadow:\n          \"0 0 30px color-mix(in srgb, var(--ds-color-accent) 45%, transparent)\",\n        transition: { duration: 0.3 },\n      };\n    case \"scale\":\n      return { scale: 1.05, transition: { duration: 0.3 } };\n    case \"tilt\":\n      return { rotateY: 5, rotateX: 5, transition: { duration: 0.3 } };\n    default:\n      return {};\n  }\n};\n\ninterface GridItemProps {\n  item: ChromaGridItem;\n  index: number;\n  animation: string;\n  staggerDelay: number;\n  hoverEffect: string;\n  variant: string;\n  borderRadius: string;\n  minHeight: number;\n  spotlight: boolean;\n}\n\nconst GridItem = ({\n  item,\n  index,\n  animation,\n  staggerDelay,\n  hoverEffect,\n  variant,\n  borderRadius,\n  minHeight,\n  spotlight,\n}: GridItemProps) => {\n  const itemRef = useRef<HTMLDivElement>(null);\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const color = item.color || defaultColors[index % defaultColors.length];\n  const animationProps = getAnimation(animation, index, staggerDelay);\n  const hoverProps = getHoverEffect(hoverEffect);\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (!itemRef.current || !spotlight) return;\n    const rect = itemRef.current.getBoundingClientRect();\n    setMousePosition({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  const gridSpan =\n    item.size && item.size > 1\n      ? { gridColumn: `span ${item.size}`, gridRow: `span ${item.size}` }\n      : {};\n\n  const variantStyles = {\n    glass: {\n      backgroundColor: \"rgba(255, 255, 255, 0.1)\",\n      backdropFilter: \"blur(20px)\",\n      WebkitBackdropFilter: \"blur(20px)\",\n    },\n    solid: {},\n    gradient: { background: color },\n  };\n\n  return (\n    <motion.div\n      ref={itemRef}\n      className={mergeClassNames(\n        \"relative overflow-hidden cursor-pointer transition-shadow\",\n        borderRadiusMap[borderRadius as keyof typeof borderRadiusMap],\n        variant === \"glass\" && \"border border-white/20 dark:border-white/10\",\n        item.className,\n      )}\n      style={{\n        minHeight:\n          item.size && item.size > 1 ? minHeight * item.size : minHeight,\n        ...gridSpan,\n        ...variantStyles[variant as keyof typeof variantStyles],\n        ...(variant !== \"glass\" && { background: color }),\n      }}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={item.onClick}\n      {...animationProps}\n      whileHover={hoverProps}\n    >\n      {/* Spotlight effect */}\n      {spotlight && isHovered && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          style={{\n            background: `radial-gradient(300px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.2), transparent 70%)`,\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.2 }}\n        />\n      )}\n\n      {/* Glass overlay for gradient variant */}\n      {variant === \"gradient\" && (\n        <div className=\"absolute inset-0 bg-black/10 dark:bg-black/20\" />\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10 h-full flex flex-col justify-center items-center p-6 text-center\">\n        {item.icon && (\n          <div className=\"text-4xl text-white mb-3 drop-shadow-lg\">\n            {item.icon}\n          </div>\n        )}\n        {item.title && (\n          <h3 className=\"text-lg font-bold text-white mb-1 drop-shadow-md\">\n            {item.title}\n          </h3>\n        )}\n        {item.description && (\n          <p className=\"text-sm text-white/80 drop-shadow-sm\">\n            {item.description}\n          </p>\n        )}\n        {item.content}\n      </div>\n    </motion.div>\n  );\n};\n\nexport const ChromaGrid = ({\n  items,\n  className,\n  columns = 3,\n  gap = 16,\n  minHeight = 200,\n  animation = \"wave\",\n  staggerDelay = 100,\n  hoverEffect = \"lift\",\n  variant = \"gradient\",\n  borderRadius = \"xl\",\n  spotlight = true,\n  style,\n}: ChromaGridProps) => {\n  return (\n    <div\n      className={mergeClassNames(\"grid w-full\", className)}\n      style={{\n        gridTemplateColumns: `repeat(${columns}, 1fr)`,\n        gap: `${gap}px`,\n        ...style,\n      }}\n    >\n      {items.map((item, index) => (\n        <GridItem\n          key={item.id}\n          item={item}\n          index={index}\n          animation={animation}\n          staggerDelay={staggerDelay}\n          hoverEffect={hoverEffect}\n          variant={variant}\n          borderRadius={borderRadius}\n          minHeight={minHeight}\n          spotlight={spotlight}\n        />\n      ))}\n    </div>\n  );\n};\n\nChromaGrid.displayName = \"ChromaGrid\";\n\nexport default ChromaGrid;\n"],"mappings":"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"}

package/dist/chunks/chunk-B_GkZjkl.cjs

@@ -0,0 +1,28 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});