luna-components-library 1.1.34 → 1.1.37

package/dist/luna-components-library.js

@@ -1,7 +1,1077 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region \0rolldown/runtime.js
 var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
 //#endregion
+//#region src/styles.ts
+var colors = {
+	white: "#ffffff",
+	border: "#e5e7eb",
+	borderInput: "#d1d5db",
+	borderLight: "#f3f4f6",
+	text: "#374151",
+	textSecondary: "#4b5563",
+	textMuted: "#6b7280",
+	textDisabled: "#9ca3af",
+	bgHeader: "#f9fafb",
+	bgHover: "#f3f4f6",
+	bgSelected: "#eff6ff",
+	bgSkeleton: "#f3f4f6",
+	primary: "#2563eb",
+	dark: "#111827"
+};
+var radii = {
+	sm: "0.375rem",
+	md: "0.5rem",
+	lg: "0.75rem",
+	full: "50%",
+	pill: "9999px"
+};
+var fontSizes = {
+	xs: "0.75rem",
+	sm: "0.875rem",
+	base: "1rem",
+	lg: "1.125rem",
+	xl: "1.25rem"
+};
+var fontWeights = {
+	medium: 500,
+	semibold: 600,
+	bold: 700
+};
+var transitions = {
+	fast: "all 150ms ease-in-out",
+	bg: "background-color 150ms",
+	bgSlow: "background-color 200ms",
+	transform: "transform 200ms",
+	normal: "all 300ms ease-in-out"
+};
+var shadows = {
+	panel: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+	menu: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
+};
+var zIndices = {
+	panel: 1e3,
+	menu: 100
+};
+var sizeStyles = {
+	sm: {
+		padding: "0.375rem 0.75rem",
+		fontSize: "0.875rem"
+	},
+	md: {
+		padding: "0.5rem 1rem",
+		fontSize: "1rem"
+	},
+	lg: {
+		padding: "0.75rem 1.5rem",
+		fontSize: "1.125rem"
+	}
+};
+var sizeClasses = {
+	sm: "px-3 py-1.5 text-sm",
+	md: "px-4 py-2 text-base",
+	lg: "px-6 py-3 text-lg"
+};
+var commonStyles = {
+	container: {
+		backgroundColor: colors.white,
+		border: `1px solid ${colors.border}`,
+		borderRadius: radii.lg
+	},
+	panel: {
+		position: "absolute",
+		top: "100%",
+		left: 0,
+		width: "100%",
+		marginTop: "0.5rem",
+		backgroundColor: colors.white,
+		border: `1px solid ${colors.border}`,
+		borderRadius: radii.lg,
+		boxShadow: shadows.panel,
+		zIndex: zIndices.panel,
+		overflow: "hidden"
+	},
+	trigger: {
+		width: "100%",
+		padding: "0.5rem 0.75rem",
+		backgroundColor: colors.white,
+		border: `1px solid ${colors.borderInput}`,
+		borderRadius: radii.lg,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		fontSize: fontSizes.sm,
+		color: colors.text,
+		cursor: "pointer",
+		outline: "none",
+		transition: transitions.fast
+	},
+	header: {
+		width: "100%",
+		padding: "1rem",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		backgroundColor: colors.bgHeader,
+		border: "none",
+		cursor: "pointer",
+		textAlign: "left",
+		fontSize: fontSizes.sm,
+		fontWeight: fontWeights.semibold,
+		color: colors.text,
+		outline: "none"
+	},
+	chevron: {
+		fontSize: fontSizes.xs,
+		transition: transitions.transform,
+		color: colors.textDisabled
+	},
+	list: {
+		maxHeight: "200px",
+		overflowY: "auto",
+		padding: "0.25rem 0"
+	},
+	item: (isSelected, isDisabled) => ({
+		padding: "0.5rem 0.75rem",
+		display: "flex",
+		alignItems: "center",
+		gap: "0.75rem",
+		cursor: isDisabled ? "not-allowed" : "pointer",
+		backgroundColor: isSelected ? colors.bgSelected : "transparent",
+		color: isDisabled ? colors.textDisabled : colors.text,
+		fontSize: fontSizes.sm,
+		transition: transitions.bg
+	}),
+	chip: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.25rem",
+		backgroundColor: colors.bgHover,
+		border: `1px solid ${colors.border}`,
+		borderRadius: radii.sm,
+		padding: "0.125rem 0.375rem",
+		fontSize: fontSizes.xs,
+		color: colors.textSecondary
+	},
+	icon: {
+		marginLeft: "0.5rem",
+		fontSize: fontSizes.xs,
+		color: colors.textDisabled,
+		cursor: "pointer",
+		display: "inline-flex",
+		alignItems: "center"
+	},
+	checkbox: {
+		width: "1rem",
+		height: "1rem",
+		cursor: "inherit"
+	},
+	filterMenu: {
+		position: "absolute",
+		top: "100%",
+		left: "1rem",
+		backgroundColor: colors.white,
+		border: `1px solid ${colors.border}`,
+		borderRadius: radii.md,
+		boxShadow: shadows.menu,
+		zIndex: zIndices.menu,
+		padding: "0.5rem",
+		minWidth: "150px"
+	},
+	filterOption: (active) => ({
+		width: "100%",
+		padding: "0.375rem 0.75rem",
+		textAlign: "left",
+		fontSize: fontSizes.xs,
+		border: "none",
+		backgroundColor: active ? colors.bgSelected : "transparent",
+		color: active ? colors.primary : colors.text,
+		borderRadius: radii.sm,
+		cursor: "pointer",
+		display: "block"
+	}),
+	pagination: {
+		padding: "1rem",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		borderTop: `1px solid ${colors.border}`,
+		backgroundColor: colors.bgHeader
+	},
+	buttonBase: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontWeight: fontWeights.medium,
+		borderRadius: radii.md,
+		transition: transitions.fast,
+		cursor: "pointer",
+		outline: "none",
+		border: "1px solid transparent"
+	},
+	inputWrapper: {
+		position: "relative",
+		display: "inline-block",
+		width: "100%"
+	},
+	inputLabel: {
+		marginBottom: "0.25rem",
+		display: "block",
+		fontSize: fontSizes.sm,
+		fontWeight: fontWeights.medium,
+		color: colors.text
+	},
+	inputField: {
+		width: "100%",
+		borderRadius: radii.md,
+		border: `1px solid ${colors.borderInput}`,
+		transition: transitions.fast,
+		outline: "none"
+	},
+	popover: {
+		position: "absolute",
+		width: "220px",
+		backgroundColor: colors.white,
+		border: `1px solid ${colors.border}`,
+		borderRadius: radii.lg,
+		boxShadow: shadows.panel,
+		zIndex: zIndices.panel,
+		padding: "1rem"
+	},
+	floatingButton: {
+		cursor: "pointer",
+		border: "none",
+		outline: "none",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: radii.full,
+		boxShadow: shadows.panel
+	},
+	card: {
+		backgroundColor: colors.white,
+		border: `1px solid ${colors.border}`,
+		borderRadius: radii.md
+	}
+};
+var cardPaddingValues = {
+	none: "0",
+	sm: "0.75rem",
+	md: "1rem",
+	lg: "1.5rem"
+};
+var cardShadowValues = {
+	none: "none",
+	sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+	md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+	lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+};
+var cardStyles = (padding, shadow, styles) => ({
+	container: {
+		...commonStyles.card,
+		padding: cardPaddingValues[padding],
+		boxShadow: cardShadowValues[shadow],
+		width: "100%",
+		...styles?.container
+	},
+	titleContainer: {
+		marginBottom: "1rem",
+		...styles?.titleContainer
+	},
+	title: {
+		fontSize: fontSizes.lg,
+		fontWeight: fontWeights.semibold,
+		color: colors.dark,
+		margin: 0,
+		...styles?.title
+	},
+	content: { ...styles?.content }
+});
+var dataTableStyles = (styles) => ({
+	container: {
+		...commonStyles.container,
+		width: "100%",
+		overflowX: "auto",
+		...styles?.container
+	},
+	searchContainer: {
+		padding: "1rem",
+		borderBottom: `1px solid ${colors.border}`
+	},
+	table: {
+		width: "100%",
+		borderCollapse: "collapse",
+		textAlign: "left",
+		fontSize: fontSizes.sm,
+		...styles?.table
+	},
+	thead: { ...styles?.thead },
+	th: {
+		padding: "0.75rem 1rem",
+		backgroundColor: colors.bgHeader,
+		borderBottom: `1px solid ${colors.border}`,
+		fontWeight: fontWeights.semibold,
+		color: colors.text,
+		fontSize: fontSizes.sm,
+		position: "relative",
+		...styles?.th
+	},
+	td: {
+		padding: "0.75rem 1rem",
+		borderBottom: `1px solid ${colors.border}`,
+		color: colors.textSecondary,
+		...styles?.td
+	},
+	tr: (clickable) => ({
+		transition: transitions.bg,
+		cursor: clickable ? "pointer" : "default"
+	}),
+	pagination: { ...commonStyles.pagination },
+	icon: { ...commonStyles.icon },
+	filterMenu: { ...commonStyles.filterMenu },
+	filterOption: (active) => ({ ...commonStyles.filterOption(active) })
+});
+var dropDownStyles = (styles, disabled, isOpen, hoverIndex, value) => ({
+	container: {
+		position: "relative",
+		display: "inline-flex",
+		width: "100%",
+		fontSize: fontSizes.sm,
+		color: colors.text,
+		...styles?.container
+	},
+	trigger: {
+		...commonStyles.trigger,
+		padding: "0.625rem 1rem",
+		borderRadius: radii.md,
+		color: value ? colors.dark : colors.textDisabled,
+		cursor: disabled ? "not-allowed" : "pointer",
+		transition: "border-color 200ms, box-shadow 200ms",
+		boxShadow: isOpen ? "0 0 0 3px rgba(37, 99, 235, 0.1)" : "none",
+		borderColor: isOpen ? colors.primary : colors.borderInput,
+		...styles?.trigger
+	},
+	panel: {
+		...commonStyles.panel,
+		marginTop: "0.25rem",
+		borderRadius: radii.md,
+		maxHeight: "200px",
+		overflow: "auto",
+		display: isOpen ? "block" : "none",
+		...styles?.panel
+	},
+	option: (index) => ({
+		...commonStyles.item(false, false),
+		display: "block",
+		textAlign: "left",
+		width: "100%",
+		border: "none",
+		gap: 0,
+		padding: "0.5rem 1rem",
+		backgroundColor: hoverIndex === index ? colors.bgHover : "transparent",
+		...styles?.option
+	}),
+	arrow: {
+		...commonStyles.chevron,
+		marginLeft: "0.5rem",
+		transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+	}
+});
+var variantStyles = {
+	primary: {
+		backgroundColor: "#2563eb",
+		color: "#ffffff"
+	},
+	secondary: {
+		backgroundColor: "#4b5563",
+		color: "#ffffff"
+	},
+	outline: {
+		backgroundColor: "transparent",
+		color: "#374151",
+		borderColor: "#d1d5db"
+	},
+	success: {
+		backgroundColor: "#16a34a",
+		color: "#ffffff"
+	},
+	danger: {
+		backgroundColor: "#dc2626",
+		color: "#ffffff"
+	},
+	warning: {
+		backgroundColor: "#eab308",
+		color: "#ffffff"
+	},
+	info: {
+		backgroundColor: "#0891b2",
+		color: "#ffffff"
+	},
+	dark: {
+		backgroundColor: "#111827",
+		color: "#ffffff"
+	},
+	light: {
+		backgroundColor: "#f3f4f6",
+		color: "#111827"
+	},
+	link: {
+		backgroundColor: "transparent",
+		color: "#2563eb",
+		border: "none",
+		padding: 0,
+		textDecoration: "underline"
+	}
+};
+var variantClasses = {
+	primary: "bg-blue-600 text-white hover:bg-blue-700",
+	secondary: "bg-gray-600 text-white hover:bg-gray-700",
+	outline: "border border-gray-300 text-gray-700 hover:bg-gray-50",
+	success: "bg-green-600 text-white hover:bg-green-700",
+	danger: "bg-red-600 text-white hover:bg-red-700",
+	warning: "bg-yellow-500 text-white hover:bg-yellow-600",
+	info: "bg-cyan-600 text-white hover:bg-cyan-700",
+	dark: "bg-gray-900 text-white hover:bg-gray-800",
+	light: "bg-gray-100 text-gray-900 hover:bg-gray-200",
+	link: "text-blue-600 hover:text-blue-800 hover:underline"
+};
+var inputStyles = (styles, extraStyle, inputSize, readOnly, disabled) => ({
+	container: {
+		...commonStyles.inputWrapper,
+		...styles?.container,
+		...extraStyle
+	},
+	label: {
+		...commonStyles.inputLabel,
+		...styles?.label
+	},
+	input: {
+		...commonStyles.inputField,
+		padding: inputSize === "sm" ? "0.25rem 0.5rem" : inputSize === "lg" ? "0.75rem 1rem" : inputSize === "xl" ? "1rem 1.5rem" : "0.5rem 0.75rem",
+		fontSize: inputSize === "sm" ? fontSizes.sm : inputSize === "lg" ? fontSizes.lg : inputSize === "xl" ? fontSizes.xl : fontSizes.base,
+		backgroundColor: readOnly ? colors.borderLight : colors.white,
+		cursor: disabled ? "not-allowed" : readOnly ? "default" : "text",
+		opacity: disabled ? .5 : 1,
+		...styles?.input
+	},
+	variants: {
+		none: {},
+		primary: {
+			...variantStyles.primary,
+			borderColor: "#2563eb"
+		},
+		secondary: {
+			...variantStyles.secondary,
+			borderColor: "#4b5563"
+		},
+		outline: {
+			...variantStyles.outline,
+			backgroundColor: "#ffffff",
+			borderColor: "#d1d5db"
+		},
+		danger: {
+			...variantStyles.danger,
+			borderColor: "#dc2626"
+		},
+		success: {
+			...variantStyles.success,
+			borderColor: "#16a34a"
+		}
+	}
+});
+var multiSelectStyles = (styles, disabled, isOpen) => ({
+	container: {
+		position: "relative",
+		width: "100%",
+		...styles?.container
+	},
+	trigger: {
+		...commonStyles.trigger,
+		minHeight: "2.5rem",
+		cursor: disabled ? "not-allowed" : "pointer",
+		opacity: disabled ? .6 : 1,
+		...styles?.trigger
+	},
+	chevron: {
+		...commonStyles.chevron,
+		transform: isOpen ? "rotate(180deg)" : "rotate(0)"
+	},
+	panel: {
+		...commonStyles.panel,
+		display: isOpen ? "block" : "none",
+		...styles?.panel
+	},
+	header: {
+		...commonStyles.header,
+		padding: "0.75rem",
+		borderBottom: `1px solid ${colors.borderLight}`,
+		flexDirection: "column",
+		gap: "0.5rem",
+		...styles?.header
+	},
+	selectAllWrapper: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: fontSizes.sm,
+		color: colors.text,
+		cursor: "pointer"
+	},
+	list: { ...commonStyles.list },
+	item: (isSelected, isDisabled) => ({
+		...commonStyles.item(isSelected, isDisabled),
+		...styles?.item
+	}),
+	checkbox: { ...commonStyles.checkbox },
+	chip: {
+		...commonStyles.chip,
+		...styles?.chip
+	},
+	chipIcon: {
+		cursor: "pointer",
+		fontSize: fontSizes.base,
+		lineHeight: 1,
+		color: colors.textDisabled
+	}
+});
+var popconfirmPositionStyles = (pos) => {
+	const distance = "10px";
+	switch (pos) {
+		case "top": return {
+			bottom: "100%",
+			left: "50%",
+			transform: "translateX(-50%)",
+			marginBottom: distance
+		};
+		case "bottom": return {
+			top: "100%",
+			left: "50%",
+			transform: "translateX(-50%)",
+			marginTop: distance
+		};
+		case "left": return {
+			right: "100%",
+			top: "50%",
+			transform: "translateY(-50%)",
+			marginRight: distance
+		};
+		case "right": return {
+			left: "100%",
+			top: "50%",
+			transform: "translateY(-50%)",
+			marginLeft: distance
+		};
+		default: return {};
+	}
+};
+var popconfirmStyles = (styles, show, position) => ({
+	container: {
+		position: "relative",
+		display: "inline-block",
+		...styles?.container
+	},
+	popover: {
+		...commonStyles.popover,
+		display: show ? "block" : "none",
+		...popconfirmPositionStyles(position || "top"),
+		...styles?.popover
+	},
+	titleWrapper: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: "0.5rem",
+		marginBottom: "0.5rem"
+	},
+	icon: {
+		color: "#eab308",
+		fontSize: "1rem",
+		fontWeight: "bold",
+		marginTop: "1px"
+	},
+	title: {
+		fontSize: fontSizes.sm,
+		fontWeight: fontWeights.semibold,
+		color: colors.dark,
+		...styles?.title
+	},
+	description: {
+		fontSize: fontSizes.xs,
+		color: colors.textMuted,
+		marginBottom: "0.75rem",
+		marginLeft: "1.5rem",
+		...styles?.description
+	},
+	actions: {
+		display: "flex",
+		justifyContent: "flex-end",
+		gap: "0.5rem"
+	}
+});
+var preloaderStyles = (zIndex, backgroundColor, size, borderWidth, styles) => ({
+	overlay: {
+		position: "fixed",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		zIndex,
+		backgroundColor,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		transition: "opacity 300ms ease-in-out",
+		...styles?.overlay
+	},
+	spinner: {
+		width: `${size}px`,
+		height: `${size}px`,
+		borderWidth: `${borderWidth}px`,
+		...styles?.spinner
+	}
+});
+var progressBarVariantColors = {
+	primary: {
+		bg: "#2563eb",
+		text: "#ffffff",
+		track: "#e5e7eb"
+	},
+	success: {
+		bg: "#16a34a",
+		text: "#ffffff",
+		track: "#e5e7eb"
+	},
+	warning: {
+		bg: "#eab308",
+		text: "#111827",
+		track: "#e5e7eb"
+	},
+	danger: {
+		bg: "#dc2626",
+		text: "#ffffff",
+		track: "#e5e7eb"
+	},
+	dark: {
+		bg: "#1f2937",
+		text: "#ffffff",
+		track: "#d1d5db"
+	},
+	light: {
+		bg: "#f3f4f6",
+		text: "#111827",
+		track: "#d1d5db"
+	}
+};
+var progressBarStyles = (styles, percentage, variant) => {
+	const currentVariant = progressBarVariantColors[variant || "primary"] || progressBarVariantColors.primary;
+	return {
+		container: {
+			width: "100%",
+			backgroundColor: colors.bgHover,
+			borderRadius: radii.pill,
+			height: "1rem",
+			overflow: "hidden",
+			...styles?.container
+		},
+		bar: {
+			height: "100%",
+			backgroundColor: currentVariant.bg,
+			width: `${percentage || 0}%`,
+			transition: transitions.normal,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: radii.pill,
+			...styles?.bar
+		},
+		text: {
+			color: currentVariant.text,
+			fontSize: fontSizes.xs,
+			fontWeight: fontWeights.medium,
+			whiteSpace: "nowrap",
+			padding: "0 0.5rem",
+			...styles?.text
+		}
+	};
+};
+var qrCodeStyles = (styles, bordered, cleanBgColor, size, isLoading) => ({
+	container: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		padding: bordered ? "0.75rem" : "0",
+		backgroundColor: `#${cleanBgColor || "ffffff"}`,
+		border: bordered ? `1px solid ${colors.border}` : "none",
+		borderRadius: radii.lg,
+		width: "fit-content",
+		position: "relative",
+		overflow: "hidden",
+		...styles?.container
+	},
+	image: {
+		display: "block",
+		width: `${size || 160}px`,
+		height: `${size || 160}px`,
+		opacity: isLoading ? 0 : 1,
+		transition: "opacity 300ms ease-in-out",
+		...styles?.image
+	},
+	skeleton: {
+		position: "absolute",
+		width: `${size || 160}px`,
+		height: `${size || 160}px`,
+		backgroundColor: colors.bgSkeleton,
+		borderRadius: radii.sm,
+		display: isLoading ? "block" : "none",
+		animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+	}
+});
+var spinnerAnimationStyles = `
+  @keyframes luna-spin { to { transform: rotate(360deg); } }
+  @keyframes luna-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); } }
+  @keyframes luna-pulse { 50% { opacity: .5; } }
+`;
+var spinnerSizeValues = {
+	sm: "1rem",
+	md: "1.5rem",
+	lg: "2rem"
+};
+var spinnerDotSizeValues = {
+	sm: "0.25rem",
+	md: "0.5rem",
+	lg: "0.75rem"
+};
+var spinnerBarSizeValues = {
+	sm: {
+		w: "0.25rem",
+		h: "1rem"
+	},
+	md: {
+		w: "0.25rem",
+		h: "1.5rem"
+	},
+	lg: {
+		w: "0.25rem",
+		h: "2rem"
+	}
+};
+var toastSeverityConfig = {
+	success: {
+		bg: "#f0fdf4",
+		border: "#bcf0da",
+		text: "#166534",
+		secondaryText: "#15803d",
+		icon: "✓"
+	},
+	info: {
+		bg: "#eff6ff",
+		border: "#bfdbfe",
+		text: "#1e40af",
+		secondaryText: "#1d4ed8",
+		icon: "ℹ"
+	},
+	warn: {
+		bg: "#fffbeb",
+		border: "#fef3c7",
+		text: "#92400e",
+		secondaryText: "#b45309",
+		icon: "⚠"
+	},
+	error: {
+		bg: "#fef2f2",
+		border: "#fecaca",
+		text: "#991b1b",
+		secondaryText: "#b91c1c",
+		icon: "✖"
+	}
+};
+var toastPositionStyles = (pos) => {
+	const base = {
+		position: "fixed",
+		zIndex: zIndices.panel,
+		margin: "1rem"
+	};
+	switch (pos) {
+		case "top-right": return {
+			...base,
+			top: 0,
+			right: 0
+		};
+		case "top-left": return {
+			...base,
+			top: 0,
+			left: 0
+		};
+		case "bottom-right": return {
+			...base,
+			bottom: 0,
+			right: 0
+		};
+		case "bottom-left": return {
+			...base,
+			bottom: 0,
+			left: 0
+		};
+		case "top-center": return {
+			...base,
+			top: 0,
+			left: "50%",
+			transform: "translateX(-50%)"
+		};
+		case "bottom-center": return {
+			...base,
+			bottom: 0,
+			left: "50%",
+			transform: "translateX(-50%)"
+		};
+		default: return {
+			...base,
+			top: 0,
+			right: 0
+		};
+	}
+};
+var toastStyles = (styles, severity, position, isExiting, visible) => {
+	const config = toastSeverityConfig[severity || "info"];
+	return {
+		container: {
+			...toastPositionStyles(position || "top-right"),
+			...commonStyles.container,
+			minWidth: "300px",
+			maxWidth: "450px",
+			backgroundColor: config.bg,
+			border: `1px solid ${config.border}`,
+			padding: "1rem",
+			boxShadow: shadows.panel,
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "0.75rem",
+			transition: transitions.normal,
+			opacity: isExiting || !visible ? 0 : 1,
+			transform: isExiting || !visible ? (position || "top-right").includes("top") ? "translateY(-20px)" : "translateY(20px)" : (position || "top-right").includes("center") ? "translateX(-50%)" : "none",
+			...styles?.container
+		},
+		iconWrapper: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "1.5rem",
+			height: "1.5rem",
+			borderRadius: radii.full,
+			backgroundColor: config.border,
+			color: config.text,
+			fontSize: fontSizes.sm,
+			fontWeight: fontWeights.bold,
+			flexShrink: 0
+		},
+		content: {
+			flex: 1,
+			display: "flex",
+			flexDirection: "column",
+			gap: "0.25rem",
+			...styles?.content
+		},
+		summary: {
+			fontWeight: fontWeights.bold,
+			fontSize: fontSizes.sm,
+			color: config.text,
+			...styles?.summary
+		},
+		detail: {
+			fontSize: fontSizes.sm,
+			color: config.secondaryText,
+			lineHeight: "1.25rem",
+			...styles?.detail
+		},
+		closeButton: {
+			background: "none",
+			border: "none",
+			color: config.text,
+			cursor: "pointer",
+			fontSize: fontSizes.xl,
+			lineHeight: 1,
+			padding: "0.25rem",
+			opacity: .6,
+			transition: transitions.fast,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0
+		}
+	};
+};
+var typedStyles = (style, cursorStyle, cursorOpacity) => ({
+	container: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.25rem",
+		...style
+	},
+	cursor: {
+		display: "inline-block",
+		marginLeft: "0.25rem",
+		width: "0.125rem",
+		height: "1.2em",
+		backgroundColor: "currentColor",
+		opacity: cursorOpacity ?? 1,
+		transition: transitions.fast,
+		...cursorStyle
+	}
+});
+var whatsAppSizes = {
+	sm: {
+		button: 40,
+		icon: 20
+	},
+	md: {
+		button: 56,
+		icon: 28
+	},
+	lg: {
+		button: 64,
+		icon: 32
+	}
+};
+var cornerPositionStyles = (position) => {
+	switch (position) {
+		case "bottom-left": return {
+			bottom: "2rem",
+			left: "2rem"
+		};
+		case "top-right": return {
+			top: "2rem",
+			right: "2rem"
+		};
+		case "top-left": return {
+			top: "2rem",
+			left: "2rem"
+		};
+		default: return {
+			bottom: "2rem",
+			right: "2rem"
+		};
+	}
+};
+var whatsAppStyles = (styles, position, size, isHovered, zIndex) => {
+	const currentSize = whatsAppSizes[size || "md"];
+	const pos = position || "bottom-right";
+	return {
+		button: {
+			...commonStyles.floatingButton,
+			position: "fixed",
+			...cornerPositionStyles(pos),
+			width: `${currentSize.button}px`,
+			height: `${currentSize.button}px`,
+			backgroundColor: isHovered ? "#128C7E" : "#25D366",
+			color: colors.white,
+			zIndex: zIndex ?? 1e3,
+			transition: transitions.normal,
+			transform: isHovered ? "scale(1.1)" : "scale(1)",
+			...styles?.button
+		},
+		tooltip: {
+			position: "fixed",
+			...cornerPositionStyles(pos),
+			[pos.includes("bottom") ? "bottom" : "top"]: "5.5rem",
+			backgroundColor: colors.white,
+			color: colors.text,
+			padding: "0.5rem 1rem",
+			borderRadius: radii.md,
+			fontSize: fontSizes.sm,
+			fontWeight: fontWeights.semibold,
+			boxShadow: shadows.menu,
+			whiteSpace: "nowrap",
+			opacity: isHovered ? 1 : 0,
+			transform: isHovered ? "translateY(0)" : "translateY(10px)",
+			transition: transitions.fast,
+			pointerEvents: "none",
+			zIndex: (zIndex ?? 1e3) + 1,
+			...styles?.tooltip
+		}
+	};
+};
+var scrollTopStyles = (styles, position, size, isVisible) => ({
+	...commonStyles.floatingButton,
+	position: "fixed",
+	...cornerPositionStyles(position || "bottom-right"),
+	width: `${size || 48}px`,
+	height: `${size || 48}px`,
+	backgroundColor: colors.primary,
+	color: colors.white,
+	zIndex: 1e3,
+	opacity: isVisible ? 1 : 0,
+	transform: isVisible ? "translateY(0)" : "translateY(20px)",
+	transition: transitions.normal,
+	pointerEvents: isVisible ? "auto" : "none",
+	...styles
+});
+var modalSizeClasses = {
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-xl"
+};
+var modalOverlayClasses = (show, animation, className) => `fixed inset-0 z-60 flex items-center justify-center ${show ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"} ${animation ? "transition-opacity duration-300" : ""} ${className}`.trim();
+var modalDialogClasses = (size, centered, dialogClassName) => `relative w-full ${modalSizeClasses[size]} mx-auto ${centered ? "flex items-center justify-center min-h-screen" : "mt-8"} ${dialogClassName}`.trim();
+var anchorBaseStyles = (variant, isHovered, size) => ({
+	...commonStyles.buttonBase,
+	gap: "0",
+	cursor: "pointer",
+	textDecoration: variant === "none" ? isHovered ? "underline" : "none" : "none",
+	border: variant === "none" ? "none" : "1px solid transparent",
+	...variant !== "none" ? sizeStyles[size] : {},
+	display: variant === "none" ? "inline" : "inline-flex",
+	borderRadius: variant === "none" ? "0" : radii.md
+});
+var accordionStyles = (isActive, styles) => ({
+	container: {
+		...commonStyles.container,
+		overflow: "hidden",
+		marginBottom: "0.5rem",
+		...styles?.container
+	},
+	header: {
+		...commonStyles.header,
+		transition: transitions.bgSlow,
+		...styles?.header
+	},
+	content: {
+		maxHeight: isActive ? "1000px" : "0",
+		opacity: isActive ? 1 : 0,
+		overflow: "hidden",
+		transition: transitions.normal,
+		borderTop: isActive ? `1px solid ${colors.border}` : "none",
+		...styles?.content
+	},
+	innerContent: {
+		padding: "1rem",
+		fontSize: fontSizes.sm,
+		color: colors.textSecondary
+	},
+	arrow: {
+		...commonStyles.chevron,
+		transform: isActive ? "rotate(180deg)" : "rotate(0deg)",
+		...styles?.arrow
+	}
+});
+var anchorVariantStyles = (isHovered) => ({
+	none: { color: colors.primary },
+	primary: {
+		backgroundColor: isHovered ? "#1d4ed8" : "#2563eb",
+		color: "#ffffff",
+		border: "1px solid transparent"
+	},
+	secondary: {
+		backgroundColor: isHovered ? "#374151" : "#4b5563",
+		color: "#ffffff",
+		border: "1px solid transparent"
+	},
+	outline: {
+		backgroundColor: isHovered ? "#f9fafb" : "transparent",
+		color: "#374151",
+		border: `1px solid ${colors.borderInput}`
+	}
+});
+//#endregion
 //#region node_modules/react/cjs/react-jsx-runtime.production.js
 /**
 * @license React
@@ -40,301 +1110,328 @@ var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((expor
 var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = require_react_jsx_runtime_production();
 })))();
-var Button = ({ children, variant = "primary", size = "sm", onClick = () => void 0, disabled = false, className = "", containerClassName = "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2", variantClassName = "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500", sizeClassName = "px-3 py-1.5 text-sm", style, ...props }) => {
+var Button = ({ children, variant = "primary", size = "sm", onClick, disabled = false, classNames = {}, styles = {}, className = "", style: extraStyle = {}, ...props }) => {
+	const finalButtonStyle = {
+		...commonStyles.buttonBase,
+		cursor: disabled ? "not-allowed" : "pointer",
+		opacity: disabled ? .5 : 1,
+		...sizeStyles[size],
+		...styles.button,
+		...variantStyles[variant],
+		...extraStyle
+	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-		className: `
-    ${containerClassName}
-    ${{
-			primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
-			secondary: "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",
-			outline: "border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500",
-			success: "bg-green-600 text-white hover:bg-green-700 focus:ring-green-500",
-			danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
-			warning: "bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-500",
-			info: "bg-cyan-600 text-white hover:bg-cyan-700 focus:ring-cyan-500",
-			dark: "bg-gray-900 text-white hover:bg-gray-800 focus:ring-gray-900",
-			light: "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-300",
-			link: "text-blue-600 hover:text-blue-800 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500"
-		}[variant]}
-    ${{
-			sm: "px-3 py-1.5 text-sm",
-			md: "px-4 py-2 text-base",
-			lg: "px-6 py-3 text-lg"
-		}[size]}
-    ${disabled ? "opacity-50 cursor-not-allowed" : ""}
-    ${className}
-  `.trim(),
+		className: [
+			classNames.container || "",
+			variantClasses[variant],
+			sizeClasses[size],
+			classNames.button || "",
+			"luna-button",
+			className
+		].filter(Boolean).join(" ").trim(),
 		onClick,
 		disabled,
-		style,
+		style: finalButtonStyle,
 		...props,
 		children
 	});
 };
 //#endregion
 //#region src/components/Card.tsx
-var Card = ({ children, title, className = "", containerClassName = "bg-white rounded-lg border border-gray-200", titleClassName = "text-lg font-semibold text-gray-900", padding = "md", shadow = "md", style }) => {
+var Card = ({ children, title, className = "", padding = "md", shadow = "md", styles = {} }) => {
+	const uiStyles = cardStyles(padding, shadow, styles);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: `
-    ${containerClassName}
-    ${{
-			none: "",
-			sm: "p-3",
-			md: "p-4",
-			lg: "p-6"
-		}[padding]}
-    ${{
-			none: "",
-			sm: "shadow-sm",
-			md: "shadow-md",
-			lg: "shadow-lg"
-		}[shadow]}
-    ${className}
-  `.trim(),
-		style,
+		style: uiStyles.container,
+		className: `luna-card ${className}`.trim(),
 		children: [title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: "mb-4",
+			style: uiStyles.titleContainer,
 			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
-				className: titleClassName,
+				style: uiStyles.title,
 				children: title
 			})
-		}), children]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			style: uiStyles.content,
+			children
+		})]
 	});
 };
 //#endregion
 //#region src/components/Anchor.tsx
-var Anchor = ({ children = "Pablo Andrey Chacon Luna", variant = "none", size = "sm", href = "https://andreychaconresumereact.netlify.app/", className, containerClassName = variant === "none" ? "font-medium transition-colors focus:outline-none" : "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2", variantClassName = "bg-blue-600 text-white hover:bg-blue-700", sizeClassName = "px-3 py-1.5 text-sm", target = "_blank", rel = "noopener noreferrer", style, ...props }) => {
+var Anchor = ({ children, variant = "none", size = "md", href, className = "", target, rel, style = {}, ...props }) => {
+	const [isHovered, setIsHovered] = useState(false);
+	const combinedClassName = `luna-anchor ${className}`.trim();
+	const uiStyles = {
+		base: anchorBaseStyles(variant, isHovered, size),
+		variants: anchorVariantStyles(isHovered)
+	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
 		href,
 		target,
 		rel,
-		className: `
-    ${containerClassName}
-    ${{
-			none: "",
-			primary: "bg-blue-600 text-white hover:bg-blue-700",
-			secondary: "bg-gray-600 text-white hover:bg-gray-700",
-			outline: "border border-gray-300 text-gray-700 hover:bg-gray-50"
-		}[variant]}
-    ${{
-			sm: "px-3 py-1.5 text-sm",
-			md: "px-4 py-2 text-base",
-			lg: "px-6 py-3 text-lg"
-		}[size]}
-    ${variantClassName}
-    ${sizeClassName}
-    ${className}
-  `.trim(),
-		style,
+		className: combinedClassName,
+		style: {
+			...uiStyles.base,
+			...uiStyles.variants[variant],
+			...style
+		},
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
 		...props,
 		children
 	});
 };
 //#endregion
 //#region src/components/Accordion.tsx
-var Accordion = ({ active, onClick, header, content, className = "", containerClassName = "border border-gray-200 rounded-lg overflow-hidden", headerClassName = "w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition-colors duration-200 flex justify-between items-center", contentClassName = "transition-all duration-300 ease-in-out", style }) => {
+var Accordion = ({ title, children, defaultActive = false, active: externalActive, onClick, className, styles = {} }) => {
+	const combinedClassName = `luna-accordion ${className || ""}`.trim();
+	const [internalActive, setInternalActive] = useState(defaultActive);
+	const isActive = externalActive !== void 0 ? externalActive : internalActive;
+	const handleToggle = () => {
+		if (onClick) onClick();
+		else setInternalActive(!internalActive);
+	};
+	const uiStyles = accordionStyles(isActive, styles);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: `${containerClassName} ${className}`,
-		style,
+		style: uiStyles.container,
+		className: combinedClassName,
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-			onClick,
-			className: headerClassName,
-			"aria-expanded": active,
-			children: [header, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-				className: `w-5 h-5 text-gray-500 transition-transform duration-200 ${active ? "transform rotate-180" : ""}`,
-				fill: "none",
-				stroke: "currentColor",
-				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					strokeWidth: 2,
-					d: "M19 9l-7 7-7-7"
-				})
+			type: "button",
+			style: uiStyles.header,
+			onClick: handleToggle,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				style: uiStyles.arrow,
+				children: "▼"
 			})]
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: `${contentClassName} ${active ? "max-h-96 opacity-100" : "max-h-0 opacity-0"} overflow-hidden`,
+			style: uiStyles.content,
 			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: `p-4 bg-white border-t border-gray-200 ${contentClassName}`,
-				children: content
+				style: uiStyles.innerContent,
+				children
 			})
 		})]
 	});
 };
 //#endregion
 //#region src/components/Spinner.tsx
-var Spinner = ({ className, containerClassName = "flex gap-1", dotClassName = "bg-blue-600 rounded-full animate-bounce", barClassName = "bg-blue-600 animate-pulse", size = "md", type = "circle", style }) => {
-	const sizeClasses = {
-		sm: "w-4 h-4",
-		md: "w-6 h-6",
-		lg: "w-8 h-8"
-	};
-	const dotSizeClasses = {
-		sm: "w-1 h-1",
-		md: "w-2 h-2",
-		lg: "w-3 h-3"
-	};
-	const barSizeClasses = {
-		sm: "w-1 h-4",
-		md: "w-1 h-6",
-		lg: "w-1 h-8"
-	};
-	if (type === "dots") return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		role: "status",
-		className: `${containerClassName} ${className || ""}`,
-		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-				className: "sr-only",
-				children: "Loading..."
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: `${dotSizeClasses[size]} ${dotClassName}`,
-				style: { animationDelay: "0ms" }
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: `${dotSizeClasses[size]} ${dotClassName}`,
-				style: { animationDelay: "150ms" }
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: `${dotSizeClasses[size]} ${dotClassName}`,
-				style: { animationDelay: "300ms" }
-			})
-		]
-	});
+var Spinner = ({ className = "", size = "md", type = "circle", color = "#2563eb", style = {} }) => {
+	const combinedClassName = `luna-spinner ${className}`.trim();
+	const currentSize = spinnerSizeValues[size];
+	const currentDotSize = spinnerDotSizeValues[size];
+	const currentBarSize = spinnerBarSizeValues[size];
+	if (type === "dots") {
+		const dotStyle = {
+			width: currentDotSize,
+			height: currentDotSize,
+			backgroundColor: color,
+			borderRadius: "9999px",
+			animation: "luna-bounce 1s infinite"
+		};
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			role: "status",
+			style: {
+				display: "flex",
+				gap: "0.25rem",
+				...style
+			},
+			className: combinedClassName,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: spinnerAnimationStyles }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+					...dotStyle,
+					animationDelay: "0ms"
+				} }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+					...dotStyle,
+					animationDelay: "150ms"
+				} }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+					...dotStyle,
+					animationDelay: "300ms"
+				} })
+			]
+		});
+	}
 	if (type === "pulse") return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		role: "status",
-		className: `${sizeClasses[size]} ${className || ""}`,
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-			className: "sr-only",
-			children: "Loading..."
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${sizeClasses[size]} ${dotClassName}` })]
+		style: { ...style },
+		className: combinedClassName,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: spinnerAnimationStyles }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+			width: currentSize,
+			height: currentSize,
+			backgroundColor: color,
+			borderRadius: "9999px",
+			animation: "luna-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+		} })]
 	});
-	if (type === "bars") return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		role: "status",
-		className: `flex gap-1 items-center ${containerClassName} ${className || ""}`,
-		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-				className: "sr-only",
-				children: "Loading..."
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: `${barSizeClasses[size]} ${barClassName}`,
-				style: { animationDelay: "0ms" }
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: `${barSizeClasses[size]} ${barClassName}`,
-				style: { animationDelay: "200ms" }
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: `${barSizeClasses[size]} ${barClassName}`,
-				style: { animationDelay: "400ms" }
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: `${barSizeClasses[size]} ${barClassName}`,
-				style: { animationDelay: "600ms" }
-			})
-		]
-	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+	if (type === "bars") {
+		const barStyle = {
+			width: currentBarSize.w,
+			height: currentBarSize.h,
+			backgroundColor: color,
+			animation: "luna-pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+		};
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			role: "status",
+			style: {
+				display: "flex",
+				gap: "0.25rem",
+				alignItems: "center",
+				...style
+			},
+			className: combinedClassName,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: spinnerAnimationStyles }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+					...barStyle,
+					animationDelay: "0ms"
+				} }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+					...barStyle,
+					animationDelay: "200ms"
+				} }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+					...barStyle,
+					animationDelay: "400ms"
+				} }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+					...barStyle,
+					animationDelay: "600ms"
+				} })
+			]
+		});
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		role: "status",
-		className: `inline-block animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 ${sizeClasses[size]} ${className || ""}`,
-		style,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-			className: "sr-only",
+		className: combinedClassName,
+		style: {
+			display: "inline-block",
+			width: currentSize,
+			height: currentSize,
+			borderRadius: "9999px",
+			border: "2px solid #e5e7eb",
+			borderTopColor: color,
+			animation: "luna-spin 1s linear infinite",
+			...style
+		},
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: spinnerAnimationStyles }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			style: {
+				position: "absolute",
+				width: "1px",
+				height: "1px",
+				padding: 0,
+				margin: "-1px",
+				overflow: "hidden",
+				clip: "rect(0, 0, 0, 0)",
+				whiteSpace: "nowrap",
+				borderWidth: 0
+			},
 			children: "Loading..."
-		})
+		})]
 	});
 };
 //#endregion
 //#region src/components/DropDown.tsx
-var DropDown = ({ toggle, options, selected, onChange, className = "", containerClassName = "relative inline-block text-left", dropdownClassName = "absolute z-50 mt-2 w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none", optionsContainerClassName = "py-1 flex flex-col", optionClassName = "block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900", style }) => {
+var DropDown = ({ options, value, onChange, placeholder = "Select an option", toggle, classNames = {}, styles = {}, disabled = false, className }) => {
+	const finalClassNames = {
+		container: "luna-dropdown",
+		trigger: "luna-dropdown-trigger",
+		panel: "luna-dropdown-panel",
+		option: "luna-dropdown-option",
+		...classNames
+	};
 	const [isOpen, setIsOpen] = useState(false);
+	const [hoverIndex, setHoverIndex] = useState(null);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) setIsOpen(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
 	const handleToggle = () => {
+		if (disabled) return;
 		setIsOpen(!isOpen);
 	};
-	const handleOptionClick = (option) => {
-		onChange(option);
+	const handleOptionClick = (optionValue) => {
+		onChange(optionValue);
 		setIsOpen(false);
 	};
+	const getDisplayLabel = () => {
+		if (value === void 0 || value === null || value === "") return placeholder;
+		const found = options.find((opt) => {
+			if (typeof opt === "object") return opt.value === value;
+			return opt === value;
+		});
+		if (found && typeof found === "object") return found.label;
+		return found || value;
+	};
+	const uiStyles = dropDownStyles(styles, disabled, isOpen, hoverIndex, value);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: `${containerClassName} ${className}`,
-		style,
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		style: uiStyles.container,
+		className: `${finalClassNames.container} ${className || ""}`.trim(),
+		children: [toggle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			onClick: handleToggle,
-			className: "cursor-pointer",
+			style: { display: "inline-block" },
 			children: toggle
-		}), isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: dropdownClassName,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: optionsContainerClassName,
-				children: options.map((option, index) => {
-					const isOptionObject = typeof option === "object" && option !== null && "value" in option;
-					const optionValue = isOptionObject ? option.value : option;
-					return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-						onClick: () => handleOptionClick(optionValue),
-						className: optionClassName,
-						children: isOptionObject ? option.label : option
-					}, index);
-				})
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+			type: "button",
+			style: uiStyles.trigger,
+			className: finalClassNames.trigger,
+			onClick: handleToggle,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: getDisplayLabel() }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				style: uiStyles.arrow,
+				children: "▼"
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			style: uiStyles.panel,
+			className: finalClassNames.panel,
+			children: options.map((option, index) => {
+				const isObj = typeof option === "object" && option !== null && "value" in option;
+				const optValue = isObj ? option.value : option;
+				const optLabel = isObj ? option.label : option;
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					type: "button",
+					style: uiStyles.option(index),
+					className: finalClassNames.option,
+					onMouseEnter: () => setHoverIndex(index),
+					onMouseLeave: () => setHoverIndex(null),
+					onClick: () => handleOptionClick(optValue),
+					children: optLabel
+				}, index);
 			})
 		})]
 	});
 };
 //#endregion
 //#region src/components/ProgressBar.tsx
-var ProgressBar = ({ progress, max, min, "aria-label": ariaLabel, className, style, containerClassName = "w-full bg-gray-200 rounded-full h-4 overflow-hidden", barClassName = "h-full rounded-full transition-all duration-300 flex items-center justify-center text-xs font-medium", variant = "primary" }) => {
-	const currentVariant = {
-		primary: {
-			bg: "bg-blue-600",
-			text: "text-white",
-			containerBg: "bg-gray-200"
-		},
-		success: {
-			bg: "bg-green-600",
-			text: "text-white",
-			containerBg: "bg-gray-200"
-		},
-		warning: {
-			bg: "bg-yellow-500",
-			text: "text-gray-900",
-			containerBg: "bg-gray-200"
-		},
-		danger: {
-			bg: "bg-red-600",
-			text: "text-white",
-			containerBg: "bg-gray-200"
-		},
-		dark: {
-			bg: "bg-gray-800",
-			text: "text-white",
-			containerBg: "bg-gray-300"
-		},
-		light: {
-			bg: "bg-gray-100",
-			text: "text-gray-900",
-			containerBg: "bg-gray-300"
-		}
-	}[variant];
+var ProgressBar = ({ progress, max = 100, min = 0, "aria-label": ariaLabel = "Progress", variant = "primary", showPercentage = true, className = "", styles = {} }) => {
+	const combinedClassName = `luna-progress ${className}`.trim();
+	const clampedProgress = Math.max(min, Math.min(max, progress));
+	const percentage = (clampedProgress - min) / (max - min) * 100;
+	const uiStyles = progressBarStyles(styles, percentage, variant);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		className: containerClassName,
-		style,
+		style: uiStyles.container,
+		className: combinedClassName,
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			role: "progressbar",
-			className: `${currentVariant.bg} ${barClassName} ${currentVariant.text}`,
-			"aria-valuenow": progress,
+			style: uiStyles.bar,
+			"aria-valuenow": clampedProgress,
 			"aria-valuemin": min,
 			"aria-valuemax": max,
-			style: {
-				width: `${progress}%`,
-				...className
-			},
-			children: progress > 10 && `${progress}%`
+			"aria-label": ariaLabel,
+			children: showPercentage && percentage >= 10 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				style: uiStyles.text,
+				children: [Math.round(percentage), "%"]
+			})
 		})
 	});
 };
 //#endregion
 //#region src/components/Typed.tsx
-var Typed = ({ strings, typeSpeed = 50, backSpeed = 30, backDelay = 500, startDelay = 0, loop = true, showCursor = true, className = "", containerClassName = "inline-block", typedClassName = "typed", cursorClassName = "typed-cursor ml-1 inline-block w-0.5 h-5 bg-current", style = {} }) => {
+var Typed = ({ strings, typeSpeed = 50, backSpeed = 30, backDelay = 500, startDelay = 0, loop = true, showCursor = true, className = "", style = {}, cursorStyle = {} }) => {
+	const combinedClassName = `luna-typed ${className}`.trim();
 	const [currentStringIndex, setCurrentStringIndex] = useState(0);
 	const [currentText, setCurrentText] = useState("");
 	const [isDeleting, setIsDeleting] = useState(false);
@@ -378,30 +1475,26 @@ var Typed = ({ strings, typeSpeed = 50, backSpeed = 30, backDelay = 500, startDe
 		isPaused
 	]);
 	useEffect(() => {
+		if (!showCursor) return;
 		const fadeTimer = setInterval(() => {
-			setCursorOpacity((prev) => {
-				if (prev === 1) return 0;
-				return 1;
-			});
-		}, 750);
+			setCursorOpacity((prev) => prev === 1 ? 0 : 1);
+		}, 500);
 		return () => clearInterval(fadeTimer);
-	}, []);
+	}, [showCursor]);
+	const uiStyles = typedStyles(style, cursorStyle, cursorOpacity);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-		className: `${containerClassName} ${className}`,
-		style,
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-			className: typedClassName,
-			children: currentText
-		}), showCursor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-			className: cursorClassName,
+		className: combinedClassName,
+		style: uiStyles.container,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: currentText }), showCursor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 			"aria-hidden": "true",
-			style: { opacity: cursorOpacity }
+			style: uiStyles.cursor
 		})]
 	});
 };
 //#endregion
 //#region src/components/Preloader.tsx
-var Preloader = ({ isLoading: externalLoading, duration = 1e3, backgroundColor, accentColor, size = 90, borderWidth = 6, className = "", spinnerClassName = "", zIndex = 999999, onComplete, style }) => {
+var Preloader = ({ isLoading: externalLoading, duration = 2e3, backgroundColor = "rgba(255, 255, 255, 0.9)", accentColor = "#2563eb", size = 60, borderWidth = 4, className = "", spinnerClassName = "", zIndex = 99999, onComplete, styles = {} }) => {
+	const combinedClassName = `luna-preloader ${className}`.trim();
 	const [internalLoading, setInternalLoading] = useState(true);
 	const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
 	useEffect(() => {
@@ -417,225 +1510,97 @@ var Preloader = ({ isLoading: externalLoading, duration = 1e3, backgroundColor,
 		externalLoading,
 		onComplete
 	]);
-	useEffect(() => {
-		if (externalLoading === true) {
-			const timer = setTimeout(() => {
-				onComplete?.();
-			}, duration);
-			return () => clearTimeout(timer);
-		}
-	}, [
-		externalLoading,
-		duration,
-		onComplete
-	]);
-	const preloaderStyle = {
-		position: "fixed",
-		inset: 0,
-		zIndex,
-		overflow: "hidden",
-		background: backgroundColor || "var(--background-color, #00000018)",
-		transition: "all 0.6s ease-out",
-		display: isLoading ? "block" : "none"
-	};
-	const spinnerStyle = {
-		position: "fixed",
-		top: "50%",
-		left: "50%",
-		transform: "translate(-50%, -50%)",
-		border: `${borderWidth}px solid #ffffff`,
-		borderColor: `${accentColor || "var(--accent-color, #007bff)"} transparent transparent transparent`,
-		borderRadius: "50%",
-		width: `${size}px`,
-		height: `${size}px`,
-		animation: "animate-preloader 1.5s linear infinite"
-	};
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		className: `preloader-overlay ${className}`,
-		style: {
-			...preloaderStyle,
-			...style
-		},
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: `preloader-spinner ${spinnerClassName}`,
-			style: spinnerStyle
+	if (!isLoading) return null;
+	const uiStyles = preloaderStyles(zIndex, backgroundColor, size, borderWidth, styles);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		style: uiStyles.overlay,
+		className: combinedClassName,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {
+			className: spinnerClassName,
+			color: accentColor,
+			style: uiStyles.spinner
 		})
-	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-        @keyframes animate-preloader {
-          0% {
-            transform: translate(-50%, -50%) rotate(0deg);
-          }
-          100% {
-            transform: translate(-50%, -50%) rotate(360deg);
-          }
-        }
-      ` })] });
+	});
 };
 //#endregion
 //#region src/components/ScrollTop.tsx
-var ScrollTop = ({ threshold = 100, className = "", children, position = "bottom-right", size = "md", shape = "circle", showInitially = false, scrollBehavior = "smooth", style, onClick, onVisibilityChange, targetElement, scrollPercentage }) => {
-	const [isVisible, setIsVisible] = useState(showInitially);
+var ScrollTop = ({ threshold = 100, className = "", children, position = "bottom-right", size = 48, scrollBehavior = "smooth", styles = {} }) => {
+	const combinedClassName = `luna-scrolltop ${className}`.trim();
+	const [isVisible, setIsVisible] = useState(false);
 	useEffect(() => {
 		const toggleVisibility = () => {
-			let shouldBeVisible = false;
-			if (scrollPercentage !== void 0) {
-				const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
-				shouldBeVisible = window.scrollY / maxScroll * 100 >= scrollPercentage;
-			} else if (targetElement) {
-				const element = document.querySelector(targetElement);
-				if (element) {
-					const rect = element.getBoundingClientRect();
-					shouldBeVisible = rect.top < window.innerHeight && rect.bottom > 0;
-				} else shouldBeVisible = window.scrollY > threshold;
-			} else shouldBeVisible = window.scrollY > threshold;
-			setIsVisible(shouldBeVisible);
-			onVisibilityChange?.(shouldBeVisible);
+			if (window.scrollY > threshold) setIsVisible(true);
+			else setIsVisible(false);
 		};
 		window.addEventListener("scroll", toggleVisibility, { passive: true });
-		toggleVisibility();
-		return () => {
-			window.removeEventListener("scroll", toggleVisibility);
-		};
-	}, [
-		threshold,
-		onVisibilityChange,
-		targetElement,
-		scrollPercentage
-	]);
-	const scrollToTop = () => {
+		return () => window.removeEventListener("scroll", toggleVisibility);
+	}, [threshold]);
+	const handleScrollToTop = () => {
 		window.scrollTo({
 			top: 0,
 			behavior: scrollBehavior
 		});
-		onClick?.();
-	};
-	const handleClick = (e) => {
-		e.preventDefault();
-		scrollToTop();
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-		className: `
-    ${{
-			"bottom-right": "fixed bottom-8 right-8",
-			"bottom-left": "fixed bottom-8 left-8",
-			"bottom-center": "fixed bottom-8 left-1/2 transform -translate-x-1/2",
-			"top-right": "fixed top-8 right-8",
-			"top-left": "fixed top-8 left-8",
-			"top-center": "fixed top-8 left-1/2 transform -translate-x-1/2"
-		}[position]}
-    ${{
-			sm: "w-8 h-8 text-sm",
-			md: "w-12 h-12 text-base",
-			lg: "w-16 h-16 text-lg"
-		}[size]}
-    ${{
-			circle: "rounded-full",
-			square: "rounded-none",
-			rounded: "rounded-lg"
-		}[shape]}
-    ${className}
-    flex items-center justify-center
-    bg-blue-600 hover:bg-blue-700
-    text-white
-    shadow-lg hover:shadow-xl
-    transition-all duration-300 ease-in-out
-    cursor-pointer
-    z-50
-    ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"}
-  `,
-		onClick: handleClick,
-		style,
+		type: "button",
+		style: scrollTopStyles(styles, position, size, isVisible),
+		className: combinedClassName,
+		onClick: handleScrollToTop,
 		"aria-label": "Scroll to top",
-		title: "Scroll to top",
 		children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-			className: "w-4 h-4",
+			width: "20",
+			height: "20",
+			viewBox: "0 0 24 24",
 			fill: "none",
 			stroke: "currentColor",
-			viewBox: "0 0 24 24",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				strokeWidth: 2,
-				d: "M5 10l7-7m0 0l7 7m-7-7v18"
-			})
+			strokeWidth: "2.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 15l-6-6-6 6" })
 		})
 	});
 };
 //#endregion
 //#region src/components/WhatsApp.tsx
-var WhatsApp = ({ phone = "", message = "¡Hola! Me gustaría obtener más información.", position = "bottom-right", size = "md", showTooltip = true, tooltipText = "¿En qué podemos ayudarte?", className = "", tooltipClassName = "", style, onClick, zIndex = 50, openInNewTab = true }) => {
+var WhatsApp = ({ phone = "", message = "Hi!", position = "bottom-right", size = "md", showTooltip = true, tooltipText = "Need help?", className = "", styles = {}, onClick, zIndex = 1e3 }) => {
+	const combinedClassName = `luna-whatsapp ${className}`.trim();
 	const [isHovered, setIsHovered] = useState(false);
 	if (!phone) return null;
 	const handleWhatsAppClick = () => {
 		const whatsappUrl = `https://wa.me/${phone.replace(/[^\d]/g, "")}?text=${encodeURIComponent(message)}`;
-		if (openInNewTab) window.open(whatsappUrl, "_blank");
-		else window.location.href = whatsappUrl;
+		window.open(whatsappUrl, "_blank");
 		onClick?.();
 	};
-	const positionClasses = {
-		"bottom-right": "bottom-6 right-6",
-		"bottom-left": "bottom-6 left-6",
-		"bottom-center": "bottom-6 left-1/2 transform -translate-x-1/2",
-		"top-right": "top-6 right-6",
-		"top-left": "top-6 left-6",
-		"top-center": "top-6 left-1/2 transform -translate-x-1/2"
-	};
-	const sizeClasses = {
-		sm: "w-10 h-10",
-		md: "w-14 h-14",
-		lg: "w-16 h-16"
-	};
-	const iconSizes = {
-		sm: 20,
-		md: 32,
-		lg: 40
-	};
+	const uiStyles = whatsAppStyles(styles, position, size, isHovered, zIndex);
+	const currentSize = whatsAppSizes[size];
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-		className: `
-    fixed ${positionClasses[position]}
-    ${sizeClasses[size]}
-    bg-[#25D366] hover:bg-[#128C7E]
-    text-white rounded-full shadow-2xl
-    flex items-center justify-center
-    transition-all duration-300 hover:scale-110
-    z-${zIndex}
-    group
-    ${className}
-  `,
+		type: "button",
+		style: uiStyles.button,
+		className: combinedClassName,
 		onClick: handleWhatsAppClick,
 		onMouseEnter: () => setIsHovered(true),
 		onMouseLeave: () => setIsHovered(false),
-		style,
-		"aria-label": "Chatear por WhatsApp",
-		title: "Chatear por WhatsApp",
+		"aria-label": "WhatsApp",
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-			width: iconSizes[size],
-			height: iconSizes[size],
+			width: currentSize.icon,
+			height: currentSize.icon,
 			viewBox: "0 0 24 24",
 			fill: "none",
 			stroke: "currentColor",
-			strokeWidth: 2,
+			strokeWidth: "2.5",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
 			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" })
 		})
 	}), showTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		className: `
-            fixed ${positionClasses[position].replace("6", "20").replace("bottom-6", "bottom-20").replace("top-6", "top-20")}
-            bg-white text-gray-800 px-3 py-1 rounded-md text-sm font-semibold
-            shadow-md whitespace-nowrap pointer-events-none
-            transition-opacity duration-300
-            ${isHovered ? "opacity-100" : "opacity-0"}
-            ${position.includes("right") ? "right-20" : position.includes("left") ? "left-20" : "left-1/2 transform -translate-x-1/2"}
-            ${tooltipClassName}
-          `,
-		style: { [position.includes("bottom") ? "bottom" : "top"]: position.includes("bottom") ? "5.5rem" : "5.5rem" },
+		style: uiStyles.tooltip,
 		children: tooltipText
 	})] });
 };
 //#endregion
 //#region src/components/Modal.tsx
-var Modal = ({ show, onHide, size = "md", centered = false, backdrop = true, backdropClose = true, keyboard = true, animation = true, className = "", dialogClassName = "", contentClassName = "", headerClassName = "", bodyClassName = "", footerClassName = "", title, header, children, footer, closeButton = true, style }) => {
+var Modal = ({ show, onHide, size = "md", centered = false, backdrop = true, backdropClose = true, keyboard = true, animation = true, className = "", dialogClassName = "luna-modal-dialog", contentClassName = "luna-modal-content", headerClassName = "luna-modal-header", bodyClassName = "luna-modal-body", footerClassName = "luna-modal-footer", title, header, children, footer, closeButton = true, style }) => {
+	const combinedClassName = `luna-modal ${className}`.trim();
 	const modalRef = useRef(null);
 	const previousActiveElement = useRef(null);
 	useEffect(() => {
@@ -669,23 +1634,8 @@ var Modal = ({ show, onHide, size = "md", centered = false, backdrop = true, bac
 			document.body.style.overflow = "";
 		};
 	}, [show]);
-	const sizeClasses = {
-		sm: "max-w-sm",
-		md: "max-w-md",
-		lg: "max-w-lg",
-		xl: "max-w-xl"
-	};
-	const modalClasses = `
-    fixed inset-0 z-60 flex items-center justify-center
-    ${show ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}
-    ${animation ? "transition-opacity duration-300" : ""}
-    ${className}
-  `.trim();
-	const dialogClasses = `
-    relative w-full ${sizeClasses[size]} mx-auto
-    ${centered ? "flex items-center justify-center min-h-screen" : "mt-8"}
-    ${dialogClassName}
-  `.trim();
+	const modalClasses = modalOverlayClasses(show, animation, combinedClassName);
+	const dialogClasses = modalDialogClasses(size, centered, dialogClassName);
 	if (!show) return null;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		ref: modalRef,
@@ -744,63 +1694,703 @@ var Modal = ({ show, onHide, size = "md", centered = false, backdrop = true, bac
 };
 //#endregion
 //#region src/components/Input.tsx
-var Input = ({ children, variant = "none", type = "text", inputSize = "md", placeholder, value, onChange, onFocus, onBlur, disabled = false, required = false, readOnly = false, className = "", containerClassName = "relative inline-block", inputClassName = "border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500", variantClassName = "", sizeClassName = "", style, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) => {
-	const baseClasses = containerClassName;
-	const variantClasses = {
-		none: "",
-		primary: "bg-blue-600 text-white border-blue-600 focus:ring-blue-500 focus:border-blue-500",
-		secondary: "bg-gray-600 text-white border-gray-600 focus:ring-gray-500 focus:border-gray-500",
-		outline: "border-gray-300 text-gray-700 bg-white focus:ring-blue-500 focus:border-blue-500",
-		danger: "bg-red-600 text-white border-red-600 focus:ring-red-500 focus:border-red-500",
-		success: "bg-green-600 text-white border-green-600 focus:ring-green-500 focus:border-green-500"
+var Input = ({ children, variant = "none", type = "text", inputSize = "md", placeholder, value: controlledValue, onChange, onFocus, onBlur, disabled = false, required = false, readOnly = false, id, name, mask, maskChar = "_", useCurrency = false, currency = "USD", locale = "en-US", minFractionDigits = 0, maxFractionDigits = 2, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, classNames = {}, styles = {}, className: extraClassName = "", style: extraStyle = {}, ...props }) => {
+	const inputId = id || name;
+	const finalClassNames = {
+		container: "luna-input",
+		input: "luna-input-field",
+		label: "luna-input-label",
+		...classNames
+	};
+	const [internalValue, setInternalValue] = useState(controlledValue || "");
+	useEffect(() => {
+		if (controlledValue !== void 0) setInternalValue(controlledValue);
+	}, [controlledValue]);
+	const formatCurrency = useCallback((val) => {
+		const cleanVal = val.replace(/[^0-9.]/g, "");
+		if (!cleanVal) return "";
+		const numericVal = parseFloat(cleanVal);
+		if (isNaN(numericVal)) return "";
+		return new Intl.NumberFormat(locale, {
+			style: useCurrency ? "currency" : "decimal",
+			currency: useCurrency ? currency : void 0,
+			minimumFractionDigits: minFractionDigits,
+			maximumFractionDigits: maxFractionDigits
+		}).format(numericVal);
+	}, [
+		locale,
+		useCurrency,
+		currency,
+		minFractionDigits,
+		maxFractionDigits
+	]);
+	const formatWithMask = useCallback((val, maskStr) => {
+		if (!maskStr) return val;
+		let formatted = "";
+		let rawIdx = 0;
+		const rawVal = val.replace(/[^a-zA-Z0-9]/g, "");
+		for (let i = 0; i < maskStr.length; i++) {
+			const m = maskStr[i];
+			if (rawIdx >= rawVal.length) break;
+			if (m === "9") if (/\d/.test(rawVal[rawIdx])) {
+				formatted += rawVal[rawIdx];
+				rawIdx++;
+			} else {
+				rawIdx++;
+				i--;
+			}
+			else if (m === "a") if (/[a-zA-Z]/.test(rawVal[rawIdx])) {
+				formatted += rawVal[rawIdx];
+				rawIdx++;
+			} else {
+				rawIdx++;
+				i--;
+			}
+			else if (m === "*") {
+				formatted += rawVal[rawIdx];
+				rawIdx++;
+			} else {
+				formatted += m;
+				if (rawVal[rawIdx] === m) rawIdx++;
+			}
+		}
+		return formatted;
+	}, []);
+	const handleChange = (e) => {
+		let newVal = e.target.value;
+		if (mask) newVal = formatWithMask(newVal, mask);
+		else if (useCurrency || type === "number" && locale) newVal = newVal.replace(/[^0-9.]/g, "");
+		if (controlledValue === void 0) setInternalValue(newVal);
+		onChange?.(newVal);
+	};
+	const handleBlur = () => {
+		if (useCurrency && internalValue) {
+			const formatted = formatCurrency(internalValue);
+			if (controlledValue === void 0) setInternalValue(formatted);
+			onChange?.(formatted);
+		}
+		onBlur?.();
 	};
-	const sizeClasses = {
-		sm: "px-2 py-1 text-sm",
-		md: "px-3 py-2 text-base",
-		lg: "px-4 py-3 text-lg",
-		xl: "px-6 py-4 text-xl"
+	const uiStyles = inputStyles(styles, extraStyle, inputSize, readOnly, disabled);
+	const finalInputStyle = {
+		...uiStyles.input,
+		...uiStyles.variants[variant]
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: `
-    ${baseClasses}
-    ${variantClasses[variant]}
-    ${sizeClasses[inputSize]}
-    ${variantClassName}
-    ${sizeClassName}
-    ${className}
-    ${disabled ? "opacity-50 cursor-not-allowed" : ""}
-    ${readOnly ? "bg-gray-100 cursor-not-allowed" : ""}
-  `.trim(),
-		style,
+		className: `${finalClassNames.container || ""} ${extraClassName}`.trim(),
+		style: uiStyles.container,
 		children: [children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
-			htmlFor: id,
-			className: "block text-sm font-medium text-gray-700 mb-1",
+			htmlFor: inputId,
+			className: finalClassNames.label,
+			style: uiStyles.label,
 			children
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
-			id,
-			type,
-			placeholder,
-			value,
-			onChange: (e) => onChange?.(e.target.value),
+			id: inputId,
+			name,
+			type: useCurrency ? "text" : type,
+			placeholder: placeholder || (mask ? mask.replace(/[9a*]/g, maskChar) : ""),
+			value: internalValue,
+			onChange: handleChange,
 			onFocus,
-			onBlur,
+			onBlur: handleBlur,
 			disabled,
 			required,
 			readOnly,
 			"aria-label": ariaLabel,
 			"aria-labelledby": ariaLabelledby,
-			className: `
-          ${inputClassName}
-          ${variantClasses[variant]}
-          ${sizeClasses[inputSize]}
-          ${variantClassName}
-          ${sizeClassName}
-        `.trim(),
+			style: finalInputStyle,
+			className: `${finalClassNames.input || ""} rounded-xl`.trim(),
 			...props
 		})]
 	});
 };
 //#endregion
+//#region src/components/DataTable.tsx
+var DataTable = ({ columns, data, pagination = false, pageSize = 10, selectable = false, onSelectionChange, onRowClick, onRowDoubleClick, searchable = false, texts = {}, classNames = {}, styles = {}, className }) => {
+	const finalClassNames = {
+		container: "luna-datatable",
+		table: "luna-datatable-table",
+		thead: "luna-datatable-thead",
+		tbody: "luna-datatable-tbody",
+		tr: "luna-datatable-tr",
+		th: "luna-datatable-th",
+		td: "luna-datatable-td",
+		pagination: "luna-datatable-pagination",
+		searchContainer: "luna-datatable-search",
+		...classNames
+	};
+	const [currentPage, setCurrentPage] = useState(1);
+	const [sortConfig, setSortConfig] = useState(null);
+	const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+	const [searchTerm, setSearchTerm] = useState("");
+	const [columnFilters, setColumnFilters] = useState({});
+	const [activeFilterMenu, setActiveFilterMenu] = useState(null);
+	const filterMenuRef = useRef(null);
+	const t = {
+		showing: "",
+		results: "",
+		prev: "←",
+		next: "→",
+		noData: "No results found",
+		filterPlaceholder: "Filter...",
+		...texts
+	};
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (filterMenuRef.current && !filterMenuRef.current.contains(event.target)) setActiveFilterMenu(null);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
+	const filteredData = useMemo(() => {
+		let result = [...data];
+		if (searchTerm) result = result.filter((row) => Object.values(row).some((val) => String(val).toLowerCase().includes(searchTerm.toLowerCase())));
+		Object.keys(columnFilters).forEach((key) => {
+			const filterValue = columnFilters[key];
+			if (filterValue !== void 0 && filterValue !== "") result = result.filter((row) => String(row[key]) === String(filterValue));
+		});
+		return result;
+	}, [
+		data,
+		searchTerm,
+		columnFilters
+	]);
+	const sortedData = useMemo(() => {
+		const sortableItems = [...filteredData];
+		if (sortConfig !== null) sortableItems.sort((a, b) => {
+			const aValue = a[sortConfig.key];
+			const bValue = b[sortConfig.key];
+			if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1;
+			if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1;
+			return 0;
+		});
+		return sortableItems;
+	}, [filteredData, sortConfig]);
+	const totalPages = Math.ceil(sortedData.length / pageSize);
+	const paginatedData = pagination ? sortedData.slice((currentPage - 1) * pageSize, currentPage * pageSize) : sortedData;
+	const handleSort = (key) => {
+		let direction = "asc";
+		if (sortConfig && sortConfig.key === key && sortConfig.direction === "asc") direction = "desc";
+		setSortConfig({
+			key,
+			direction
+		});
+	};
+	const handleSelectAll = (e) => {
+		const newSelected = /* @__PURE__ */ new Set();
+		if (e.target.checked) paginatedData.forEach((row) => newSelected.add(row.id || row._id || JSON.stringify(row)));
+		setSelectedIds(newSelected);
+		notifySelectionChange(newSelected);
+	};
+	const handleSelectRow = (id, e) => {
+		if (e) e.stopPropagation();
+		const newSelected = new Set(selectedIds);
+		if (newSelected.has(id)) newSelected.delete(id);
+		else newSelected.add(id);
+		setSelectedIds(newSelected);
+		notifySelectionChange(newSelected);
+	};
+	const notifySelectionChange = (newIds) => {
+		const selectedRows = Array.from(newIds).map((id) => data.find((r) => (r.id || r._id || JSON.stringify(r)) === id));
+		onSelectionChange?.(selectedRows);
+	};
+	const handleFilterChange = (key, value) => {
+		setColumnFilters((prev) => ({
+			...prev,
+			[key]: value
+		}));
+		setCurrentPage(1);
+		setActiveFilterMenu(null);
+	};
+	const uiStyles = dataTableStyles(styles);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		style: uiStyles.container,
+		className: `${finalClassNames.container} ${className || ""}`.trim(),
+		children: [
+			searchable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				style: uiStyles.searchContainer,
+				className: finalClassNames.searchContainer,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+					id: "datatable-search",
+					placeholder: "Search...",
+					value: searchTerm,
+					onChange: setSearchTerm,
+					inputSize: "sm"
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+				style: uiStyles.table,
+				className: finalClassNames.table,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", {
+					style: uiStyles.thead,
+					className: finalClassNames.thead,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [selectable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						style: uiStyles.th,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+							type: "checkbox",
+							onChange: handleSelectAll,
+							checked: paginatedData.length > 0 && selectedIds.size === paginatedData.length
+						})
+					}), columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						style: uiStyles.th,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "space-between"
+							},
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								style: {
+									cursor: col.sortable ? "pointer" : "default",
+									display: "flex",
+									alignItems: "center"
+								},
+								onClick: () => col.sortable && handleSort(col.key),
+								children: [col.label, col.sortable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									style: uiStyles.icon,
+									children: sortConfig?.key === col.key ? sortConfig.direction === "asc" ? "▲" : "▼" : "↕"
+								})]
+							}), col.filterable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								style: { position: "relative" },
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									style: {
+										...uiStyles.icon,
+										color: columnFilters[col.key] ? "#2563eb" : "#9ca3af"
+									},
+									onClick: (e) => {
+										e.stopPropagation();
+										setActiveFilterMenu(activeFilterMenu === col.key ? null : col.key);
+									},
+									children: "🔍"
+								}), activeFilterMenu === col.key && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									ref: filterMenuRef,
+									style: uiStyles.filterMenu,
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+										style: uiStyles.filterOption(!columnFilters[col.key]),
+										onClick: () => handleFilterChange(col.key, ""),
+										children: "All"
+									}), col.filterOptions?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+										style: uiStyles.filterOption(columnFilters[col.key] === opt.value),
+										onClick: () => handleFilterChange(col.key, opt.value),
+										children: opt.label
+									}, opt.value))]
+								})]
+							})]
+						})
+					}, col.key))] })
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", {
+					style: styles.tbody,
+					className: finalClassNames.tbody,
+					children: paginatedData.length > 0 ? paginatedData.map((row, idx) => {
+						const rowId = row.id || row._id || JSON.stringify(row);
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+							style: uiStyles.tr(!!onRowClick || !!onRowDoubleClick || selectable),
+							className: finalClassNames.tr,
+							onClick: () => {
+								if (onRowClick) onRowClick(row);
+								if (selectable) handleSelectRow(rowId);
+							},
+							onDoubleClick: () => onRowDoubleClick && onRowDoubleClick(row),
+							children: [selectable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								style: uiStyles.td,
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+									type: "checkbox",
+									checked: selectedIds.has(rowId),
+									onChange: (e) => handleSelectRow(rowId, e)
+								})
+							}), columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								style: uiStyles.td,
+								className: finalClassNames.td,
+								children: col.render ? col.render(row[col.key], row) : row[col.key]
+							}, col.key))]
+						}, idx);
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+						colSpan: columns.length + (selectable ? 1 : 0),
+						style: {
+							...uiStyles.td,
+							textAlign: "center",
+							padding: "2rem"
+						},
+						children: t.noData
+					}) })
+				})]
+			}),
+			pagination && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				style: uiStyles.pagination,
+				className: finalClassNames.pagination,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					style: {
+						fontSize: "0.875rem",
+						color: "#6b7280"
+					},
+					children: [
+						Math.min((currentPage - 1) * pageSize + 1, sortedData.length),
+						" - ",
+						Math.min(currentPage * pageSize, sortedData.length),
+						" of ",
+						sortedData.length
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						gap: "0.5rem"
+					},
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+							variant: "outline",
+							size: "sm",
+							disabled: currentPage === 1,
+							onClick: () => setCurrentPage((prev) => Math.max(prev - 1, 1)),
+							children: t.prev
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "0.25rem",
+								padding: "0 0.5rem",
+								fontSize: "0.875rem",
+								fontWeight: 500
+							},
+							children: [
+								currentPage,
+								" / ",
+								totalPages
+							]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+							variant: "outline",
+							size: "sm",
+							disabled: currentPage === totalPages,
+							onClick: () => setCurrentPage((prev) => Math.min(prev + 1, totalPages)),
+							children: t.next
+						})
+					]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/Toast.tsx
+var Toast = ({ visible, severity = "info", summary, detail, life, onClose, position = "top-right", classNames = {}, styles = {}, className }) => {
+	const finalClassNames = {
+		container: "luna-toast",
+		content: "luna-toast-content",
+		icon: "luna-toast-icon",
+		summary: "luna-toast-summary",
+		detail: "luna-toast-detail",
+		closeButton: "luna-toast-close",
+		...classNames
+	};
+	const [isExiting, setIsExiting] = useState(false);
+	useEffect(() => {
+		let timer;
+		if (visible && life && life > 0) timer = setTimeout(() => {
+			handleClose();
+		}, life);
+		return () => {
+			if (timer) clearTimeout(timer);
+		};
+	}, [visible, life]);
+	const handleClose = () => {
+		setIsExiting(true);
+		setTimeout(() => {
+			setIsExiting(false);
+			onClose();
+		}, 300);
+	};
+	if (!visible && !isExiting) return null;
+	const uiStyles = toastStyles(styles, severity, position, isExiting, visible);
+	const config = toastSeverityConfig[severity || "info"];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: `${finalClassNames.container} ${className || ""}`.trim(),
+		style: uiStyles.container,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: finalClassNames.icon,
+				style: uiStyles.iconWrapper,
+				children: config.icon
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: finalClassNames.content,
+				style: uiStyles.content,
+				children: [summary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: finalClassNames.summary,
+					style: uiStyles.summary,
+					children: summary
+				}), detail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: finalClassNames.detail,
+					style: uiStyles.detail,
+					children: detail
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				className: finalClassNames.closeButton,
+				style: uiStyles.closeButton,
+				onClick: handleClose,
+				onMouseOver: (e) => e.currentTarget.style.opacity = "1",
+				onMouseOut: (e) => e.currentTarget.style.opacity = "0.6",
+				children: "×"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/MultiSelect.tsx
+var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select Items", display = "comma", filter = true, filterPlaceholder = "Search...", selectAll = true, maxSelectedLabels = 3, classNames = {}, styles = {}, disabled = false, className }) => {
+	const finalClassNames = {
+		container: "luna-multiselect",
+		trigger: "luna-multiselect-trigger",
+		panel: "luna-multiselect-panel",
+		header: "luna-multiselect-header",
+		item: "luna-multiselect-item",
+		chip: "luna-multiselect-chip",
+		...classNames
+	};
+	const [isOpen, setIsOpen] = useState(false);
+	const [filterText, setFilterText] = useState("");
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) setIsOpen(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
+	const filteredOptions = useMemo(() => {
+		return options.filter((opt) => opt.label.toLowerCase().includes(filterText.toLowerCase()));
+	}, [options, filterText]);
+	const handleToggleOption = (optionValue) => {
+		onChange(value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]);
+	};
+	const handleSelectAll = (e) => {
+		if (e.target.checked) onChange(options.filter((opt) => !opt.disabled).map((opt) => opt.value));
+		else onChange([]);
+	};
+	const isAllSelected = options.length > 0 && options.every((opt) => value.includes(opt.value));
+	const renderLabel = () => {
+		if (value.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			style: { color: "#9ca3af" },
+			children: placeholder
+		});
+		if (display === "chip") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			style: {
+				display: "flex",
+				flexWrap: "wrap",
+				gap: "0.25rem"
+			},
+			children: value.map((val) => {
+				const opt = options.find((o) => o.value === val);
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					style: uiStyles.chip,
+					className: finalClassNames.chip,
+					children: [opt?.label, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						style: uiStyles.chipIcon,
+						onClick: (e) => {
+							e.stopPropagation();
+							handleToggleOption(val);
+						},
+						children: "×"
+					})]
+				}, val);
+			})
+		});
+		if (value.length > maxSelectedLabels) return `${value.length} items selected`;
+		return value.map((val) => options.find((o) => o.value === val)?.label).join(", ");
+	};
+	const uiStyles = multiSelectStyles(styles, disabled, isOpen);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		className: `${finalClassNames.container} ${className || ""}`.trim(),
+		style: uiStyles.container,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: finalClassNames.trigger,
+			style: uiStyles.trigger,
+			onClick: () => !disabled && setIsOpen(!isOpen),
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				style: {
+					flex: 1,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: renderLabel()
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				style: uiStyles.chevron,
+				children: "▼"
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: finalClassNames.panel,
+			style: uiStyles.panel,
+			children: [(filter || selectAll) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				style: uiStyles.header,
+				className: finalClassNames.header,
+				children: [selectAll && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+					style: uiStyles.selectAllWrapper,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						style: uiStyles.checkbox,
+						checked: isAllSelected,
+						onChange: handleSelectAll
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Select All" })]
+				}), filter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+					inputSize: "sm",
+					id: id ? `${id}-filter` : void 0,
+					placeholder: filterPlaceholder,
+					value: filterText,
+					onChange: setFilterText,
+					classNames: { container: "w-full" }
+				})]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				style: uiStyles.list,
+				children: [filteredOptions.map((opt) => {
+					const isSelected = value.includes(opt.value);
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						style: uiStyles.item(isSelected, !!opt.disabled),
+						className: finalClassNames.item,
+						onClick: () => !opt.disabled && handleToggleOption(opt.value),
+						onMouseOver: (e) => !opt.disabled && !isSelected && (e.currentTarget.style.backgroundColor = "#f9fafb"),
+						onMouseOut: (e) => !opt.disabled && !isSelected && (e.currentTarget.style.backgroundColor = "transparent"),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+							type: "checkbox",
+							readOnly: true,
+							checked: isSelected,
+							style: uiStyles.checkbox,
+							disabled: opt.disabled
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: opt.label })]
+					}, opt.value);
+				}), filteredOptions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					style: {
+						padding: "1rem",
+						textAlign: "center",
+						fontSize: "0.875rem",
+						color: "#6b7280"
+					},
+					children: "No results found"
+				})]
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/components/Popconfirm.tsx
+var Popconfirm = ({ title, description, onConfirm, onCancel, okText = "Yes", cancelText = "No", position = "top", children, classNames = {}, styles = {}, disabled = false, className = "" }) => {
+	const finalClassNames = {
+		container: "luna-popconfirm",
+		popover: "luna-popconfirm-popover",
+		title: "luna-popconfirm-title",
+		description: "luna-popconfirm-description",
+		actions: "luna-popconfirm-actions",
+		okButton: "luna-popconfirm-ok",
+		cancelButton: "luna-popconfirm-cancel",
+		...classNames
+	};
+	const [show, setShow] = useState(false);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) setShow(false);
+		};
+		if (show) document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [show]);
+	const handleConfirm = () => {
+		onConfirm();
+		setShow(false);
+	};
+	const handleCancel = () => {
+		onCancel?.();
+		setShow(false);
+	};
+	const triggerElement = React.cloneElement(children, { onClick: (e) => {
+		if (disabled) return;
+		e.stopPropagation();
+		setShow(!show);
+		const childProps = children.props;
+		if (childProps?.onClick) childProps.onClick(e);
+	} });
+	const uiStyles = popconfirmStyles(styles, show, position);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		style: uiStyles.container,
+		className: `${finalClassNames.container} ${className}`.trim(),
+		children: [triggerElement, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			style: uiStyles.popover,
+			className: finalClassNames.popover,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					style: uiStyles.titleWrapper,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						style: uiStyles.icon,
+						children: "⚠"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						style: uiStyles.title,
+						className: finalClassNames.title,
+						children: title
+					})]
+				}),
+				description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					style: uiStyles.description,
+					className: finalClassNames.description,
+					children: description
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					style: uiStyles.actions,
+					className: finalClassNames.actions,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						size: "sm",
+						variant: "outline",
+						onClick: handleCancel,
+						className: finalClassNames.cancelButton,
+						children: cancelText
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						size: "sm",
+						variant: "primary",
+						onClick: handleConfirm,
+						className: finalClassNames.okButton,
+						children: okText
+					})]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+//#region src/components/QRCode.tsx
+var QRCode = ({ value, size = 160, color = "000000", bgColor = "ffffff", bordered = true, classNames = {}, styles = {}, errorCorrectionLevel = "M", className }) => {
+	const finalClassNames = {
+		container: "luna-qrcode",
+		image: "luna-qrcode-image",
+		...classNames
+	};
+	const [isLoading, setIsLoading] = useState(true);
+	const cleanColor = color.startsWith("#") ? color.slice(1) : color;
+	const cleanBgColor = bgColor.startsWith("#") ? bgColor.slice(1) : bgColor;
+	const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(value)}&color=${cleanColor}&bgcolor=${cleanBgColor}&ecc=${errorCorrectionLevel}`;
+	const uiStyles = qrCodeStyles(styles, bordered, cleanBgColor, size, isLoading);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: `${finalClassNames.container} ${className || ""}`.trim(),
+		style: uiStyles.container,
+		children: [
+			isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: uiStyles.skeleton }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+				src: qrUrl,
+				alt: `QR Code for ${value}`,
+				style: uiStyles.image,
+				className: finalClassNames.image,
+				onLoad: () => setIsLoading(false)
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: .5; }
+        }
+      ` })
+		]
+	});
+};
+//#endregion
 //#region src/utilities/apiFetch.util.ts
 /**
 * A generic wrapper for the fetch API with error handling and response parsing.
@@ -1012,6 +2602,9 @@ var validators = {
 };
 //#endregion
 //#region src/utilities/logger.util.ts
+/**
+* Utility for logging messages with different levels.
+*/
 var logStyles = {
 	info: "color: #3b82f6; font-weight: bold;",
 	warn: "color: #f59e0b; font-weight: bold;",
@@ -1019,12 +2612,18 @@ var logStyles = {
 	success: "color: #10b981; font-weight: bold;"
 };
 var logger = {
-	info: (message, ...data) => {},
-	warn: (message, ...data) => {},
+	info: (message, ...data) => {
+		console.log(`%c[INFO] ${message}`, logStyles.info, ...data);
+	},
+	warn: (message, ...data) => {
+		console.warn(`%c[WARN] ${message}`, logStyles.warn, ...data);
+	},
 	error: (message, ...data) => {
 		console.error(`%c[ERROR] ${message}`, logStyles.error, ...data);
 	},
-	success: (message, ...data) => {}
+	success: (message, ...data) => {
+		console.log(`%c[SUCCESS] ${message}`, logStyles.success, ...data);
+	}
 };
 //#endregion
 //#region src/hooks/useFetch.hook.ts
@@ -1117,6 +2716,6 @@ function useDebounce(value, delay = 500) {
 	return debouncedValue;
 }
 //#endregion
-export { Accordion, Anchor, Button, Card, DropDown, Input, Modal, Preloader, ProgressBar, ScrollTop, Spinner, Typed, WhatsApp, apiFetch, del, formatters, get, httpClient, logger, post, put, storage, useDebounce, useFetch, useLocalStorage, validators };
+export { Accordion, Anchor, Button, Card, DataTable, DropDown, Input, Modal, MultiSelect, Popconfirm, Preloader, ProgressBar, QRCode, ScrollTop, Spinner, Toast, Typed, WhatsApp, apiFetch, del, formatters, get, httpClient, logger, post, put, storage, useDebounce, useFetch, useLocalStorage, validators };
 
 //# sourceMappingURL=luna-components-library.js.map