luna-components-library 1.1.39 → 1.1.41

package/dist/luna-components-library.js

@@ -17,7 +17,23 @@ var colors = {
 	bgSelected: "#eff6ff",
 	bgSkeleton: "#f3f4f6",
 	primary: "#2563eb",
-	dark: "#111827"
+	primaryHover: "#1d4ed8",
+	secondary: "#4b5563",
+	secondaryHover: "#6d737c",
+	success: "#16a34a",
+	successHover: "#15803d",
+	danger: "#dc2626",
+	dangerHover: "#b91c1c",
+	warning: "#f59e0b",
+	warningHover: "#d97706",
+	info: "#0ea5e9",
+	infoHover: "#0891b2",
+	light: "#f9fafb",
+	lightHover: "#f3f4f6",
+	dark: "#111827",
+	darkHover: "#1f2937",
+	whatsapp: "#25D366",
+	whatsappHover: "#128C7E"
 };
 var radii = {
 	sm: "0.375rem",
@@ -111,15 +127,7 @@ var commonStyles = {
 		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"
+		justifyContent: "space-between"
 	},
 	chevron: {
 		fontSize: fontSizes.xs,
@@ -200,15 +208,11 @@ var commonStyles = {
 	},
 	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"
+		hover: { backgroundColor: colors.bgHover }
 	},
+	anchorBase: {},
 	inputWrapper: {
 		position: "relative",
 		display: "inline-block",
@@ -224,7 +228,9 @@ var commonStyles = {
 	inputField: {
 		width: "100%",
 		borderRadius: radii.md,
-		border: `1px solid ${colors.borderInput}`,
+		borderStyle: "solid",
+		borderWidth: "1px",
+		borderColor: colors.borderInput,
 		transition: transitions.fast,
 		outline: "none"
 	},
@@ -296,7 +302,8 @@ var dataTableStyles = (styles) => ({
 	},
 	searchContainer: {
 		padding: "1rem",
-		borderBottom: `1px solid ${colors.border}`
+		borderBottom: `1px solid ${colors.border}`,
+		...styles?.searchContainer
 	},
 	table: {
 		width: "100%",
@@ -324,12 +331,25 @@ var dataTableStyles = (styles) => ({
 	},
 	tr: (clickable) => ({
 		transition: transitions.bg,
-		cursor: clickable ? "pointer" : "default"
+		cursor: clickable ? "pointer" : "default",
+		...styles?.tr
 	}),
-	pagination: { ...commonStyles.pagination },
-	icon: { ...commonStyles.icon },
-	filterMenu: { ...commonStyles.filterMenu },
-	filterOption: (active) => ({ ...commonStyles.filterOption(active) })
+	pagination: {
+		...commonStyles.pagination,
+		...styles?.pagination
+	},
+	icon: {
+		...commonStyles.icon,
+		...styles?.icon
+	},
+	filterMenu: {
+		...commonStyles.filterMenu,
+		...styles?.filterMenu
+	},
+	filterOption: (active) => ({
+		...commonStyles.filterOption(active),
+		...styles?.filterOption
+	})
 });
 var dropDownStyles = (styles, disabled, isOpen, hoverIndex, value) => ({
 	container: {
@@ -374,76 +394,20 @@ var dropDownStyles = (styles, disabled, isOpen, hoverIndex, value) => ({
 	arrow: {
 		...commonStyles.chevron,
 		marginLeft: "0.5rem",
-		transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+		transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+		...styles?.arrow
 	}
 });
-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"
-};
+colors.primary, colors.white, colors.secondary, colors.white, colors.text, colors.borderInput, colors.success, colors.white, colors.danger, colors.white, colors.warning, colors.white, colors.info, colors.white, colors.dark, colors.white, colors.light, colors.dark, colors.primary;
 var inputStyles = (styles, extraStyle, inputSize, readOnly, disabled) => ({
 	container: {
 		...commonStyles.inputWrapper,
-		...styles?.container,
+		styles,
 		...extraStyle
 	},
 	label: {
 		...commonStyles.inputLabel,
-		...styles?.label
+		styles
 	},
 	input: {
 		...commonStyles.inputField,
@@ -452,30 +416,49 @@ var inputStyles = (styles, extraStyle, inputSize, readOnly, disabled) => ({
 		backgroundColor: readOnly ? colors.borderLight : colors.white,
 		cursor: disabled ? "not-allowed" : readOnly ? "default" : "text",
 		opacity: disabled ? .5 : 1,
-		...styles?.input
+		styles
 	},
 	variants: {
 		none: {},
 		primary: {
-			...variantStyles.primary,
-			borderColor: "#2563eb"
+			borderColor: colors.primary,
+			color: colors.primary
 		},
 		secondary: {
-			...variantStyles.secondary,
-			borderColor: "#4b5563"
+			borderColor: colors.secondary,
+			color: colors.secondary
 		},
 		outline: {
-			...variantStyles.outline,
-			backgroundColor: "#ffffff",
-			borderColor: "#d1d5db"
+			borderColor: colors.borderInput,
+			color: colors.text
 		},
 		danger: {
-			...variantStyles.danger,
-			borderColor: "#dc2626"
+			borderColor: colors.danger,
+			color: colors.danger
 		},
 		success: {
-			...variantStyles.success,
-			borderColor: "#16a34a"
+			borderColor: colors.success,
+			color: colors.success
+		},
+		warning: {
+			borderColor: colors.warning,
+			color: colors.warning
+		},
+		info: {
+			borderColor: colors.info,
+			color: colors.info
+		},
+		dark: {
+			borderColor: colors.dark,
+			color: colors.dark
+		},
+		light: {
+			borderColor: colors.light,
+			color: colors.light
+		},
+		link: {
+			borderColor: "transparent",
+			color: colors.primary
 		}
 	}
 });
@@ -483,14 +466,14 @@ var multiSelectStyles = (styles, disabled, isOpen) => ({
 	container: {
 		position: "relative",
 		width: "100%",
-		...styles?.container
+		styles
 	},
 	trigger: {
 		...commonStyles.trigger,
 		minHeight: "2.5rem",
 		cursor: disabled ? "not-allowed" : "pointer",
 		opacity: disabled ? .6 : 1,
-		...styles?.trigger
+		styles
 	},
 	chevron: {
 		...commonStyles.chevron,
@@ -499,7 +482,7 @@ var multiSelectStyles = (styles, disabled, isOpen) => ({
 	panel: {
 		...commonStyles.panel,
 		display: isOpen ? "block" : "none",
-		...styles?.panel
+		styles
 	},
 	header: {
 		...commonStyles.header,
@@ -507,7 +490,7 @@ var multiSelectStyles = (styles, disabled, isOpen) => ({
 		borderBottom: `1px solid ${colors.borderLight}`,
 		flexDirection: "column",
 		gap: "0.5rem",
-		...styles?.header
+		styles
 	},
 	selectAllWrapper: {
 		display: "flex",
@@ -520,12 +503,12 @@ var multiSelectStyles = (styles, disabled, isOpen) => ({
 	list: { ...commonStyles.list },
 	item: (isSelected, isDisabled) => ({
 		...commonStyles.item(isSelected, isDisabled),
-		...styles?.item
+		styles
 	}),
 	checkbox: { ...commonStyles.checkbox },
 	chip: {
 		...commonStyles.chip,
-		...styles?.chip
+		styles
 	},
 	chipIcon: {
 		cursor: "pointer",
@@ -580,13 +563,15 @@ var popconfirmStyles = (styles, show, position) => ({
 		display: "flex",
 		alignItems: "flex-start",
 		gap: "0.5rem",
-		marginBottom: "0.5rem"
+		marginBottom: "0.5rem",
+		...styles?.titleWrapper
 	},
 	icon: {
 		color: "#eab308",
 		fontSize: "1rem",
 		fontWeight: "bold",
-		marginTop: "1px"
+		marginTop: "1px",
+		...styles?.icon
 	},
 	title: {
 		fontSize: fontSizes.sm,
@@ -604,7 +589,8 @@ var popconfirmStyles = (styles, show, position) => ({
 	actions: {
 		display: "flex",
 		justifyContent: "flex-end",
-		gap: "0.5rem"
+		gap: "0.5rem",
+		...styles?.actions
 	}
 });
 var preloaderStyles = (zIndex, backgroundColor, size, borderWidth, styles) => ({
@@ -631,34 +617,34 @@ var preloaderStyles = (zIndex, backgroundColor, size, borderWidth, styles) => ({
 });
 var progressBarVariantColors = {
 	primary: {
-		bg: "#2563eb",
-		text: "#ffffff",
-		track: "#e5e7eb"
+		bg: colors.primary,
+		text: colors.white,
+		track: colors.border
 	},
 	success: {
-		bg: "#16a34a",
-		text: "#ffffff",
-		track: "#e5e7eb"
+		bg: colors.success,
+		text: colors.white,
+		track: colors.border
 	},
 	warning: {
-		bg: "#eab308",
-		text: "#111827",
-		track: "#e5e7eb"
+		bg: colors.warning,
+		text: colors.dark,
+		track: colors.border
 	},
 	danger: {
-		bg: "#dc2626",
-		text: "#ffffff",
-		track: "#e5e7eb"
+		bg: colors.danger,
+		text: colors.white,
+		track: colors.border
 	},
 	dark: {
-		bg: "#1f2937",
-		text: "#ffffff",
-		track: "#d1d5db"
+		bg: colors.darkHover,
+		text: colors.white,
+		track: colors.borderInput
 	},
 	light: {
-		bg: "#f3f4f6",
-		text: "#111827",
-		track: "#d1d5db"
+		bg: colors.light,
+		text: colors.dark,
+		track: colors.borderInput
 	}
 };
 var progressBarStyles = (styles, percentage, variant) => {
@@ -722,7 +708,8 @@ var qrCodeStyles = (styles, bordered, cleanBgColor, size, isLoading) => ({
 		backgroundColor: colors.bgSkeleton,
 		borderRadius: radii.sm,
 		display: isLoading ? "block" : "none",
-		animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+		animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+		...styles?.skeleton
 	}
 });
 var spinnerAnimationStyles = `
@@ -861,7 +848,8 @@ var toastStyles = (styles, severity, position, isExiting, visible) => {
 			color: config.text,
 			fontSize: fontSizes.sm,
 			fontWeight: fontWeights.bold,
-			flexShrink: 0
+			flexShrink: 0,
+			...styles?.iconWrapper
 		},
 		content: {
 			flex: 1,
@@ -895,7 +883,8 @@ var toastStyles = (styles, severity, position, isExiting, visible) => {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
-			flexShrink: 0
+			flexShrink: 0,
+			...styles?.closeButton
 		}
 	};
 };
@@ -961,7 +950,7 @@ var whatsAppStyles = (styles, position, size, isHovered, zIndex) => {
 			...cornerPositionStyles(pos),
 			width: `${currentSize.button}px`,
 			height: `${currentSize.button}px`,
-			backgroundColor: isHovered ? "#128C7E" : "#25D366",
+			backgroundColor: isHovered ? colors.whatsappHover : colors.whatsapp,
 			color: colors.white,
 			zIndex: zIndex ?? 1e3,
 			transition: transitions.normal,
@@ -1013,34 +1002,26 @@ var modalSizeClasses = {
 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
+		marginBottom: "0.5rem"
 	},
 	header: {
 		...commonStyles.header,
-		transition: transitions.bgSlow,
-		...styles?.header
+		transition: transitions.bgSlow
 	},
 	content: {
 		maxHeight: isActive ? "1000px" : "0",
 		opacity: isActive ? 1 : 0,
 		overflow: "hidden",
 		transition: transitions.normal,
-		borderTop: isActive ? `1px solid ${colors.border}` : "none",
-		...styles?.content
+		borderTop: isActive ? `1px solid ${colors.border}` : "none"
 	},
 	innerContent: {
 		padding: "1rem",
@@ -1049,27 +1030,48 @@ var accordionStyles = (isActive, styles) => ({
 	},
 	arrow: {
 		...commonStyles.chevron,
-		transform: isActive ? "rotate(180deg)" : "rotate(0deg)",
-		...styles?.arrow
+		transform: isActive ? "rotate(180deg)" : "rotate(0deg)"
 	}
 });
-var anchorVariantStyles = (isHovered) => ({
+var standardVariantStyles = (isHovered) => ({
 	none: { color: colors.primary },
 	primary: {
-		backgroundColor: isHovered ? "#1d4ed8" : "#2563eb",
-		color: "#ffffff",
-		border: "1px solid transparent"
+		backgroundColor: isHovered ? colors.primaryHover : colors.primary,
+		color: colors.white
 	},
 	secondary: {
-		backgroundColor: isHovered ? "#374151" : "#4b5563",
-		color: "#ffffff",
-		border: "1px solid transparent"
+		backgroundColor: isHovered ? colors.secondaryHover : colors.secondary,
+		color: colors.white
 	},
 	outline: {
-		backgroundColor: isHovered ? "#f9fafb" : "transparent",
-		color: "#374151",
-		border: `1px solid ${colors.borderInput}`
-	}
+		backgroundColor: isHovered ? colors.lightHover : colors.white,
+		color: colors.dark
+	},
+	danger: {
+		backgroundColor: isHovered ? colors.dangerHover : colors.danger,
+		color: colors.white
+	},
+	success: {
+		backgroundColor: isHovered ? colors.successHover : colors.success,
+		color: colors.white
+	},
+	warning: {
+		backgroundColor: isHovered ? colors.warningHover : colors.warning,
+		color: colors.white
+	},
+	info: {
+		backgroundColor: isHovered ? colors.infoHover : colors.info,
+		color: colors.white
+	},
+	dark: {
+		backgroundColor: isHovered ? colors.darkHover : colors.dark,
+		color: colors.white
+	},
+	light: {
+		backgroundColor: isHovered ? colors.lightHover : colors.light,
+		color: colors.dark
+	},
+	link: { color: isHovered ? colors.primary : colors.text }
 });
 //#endregion
 //#region node_modules/react/cjs/react-jsx-runtime.production.js
@@ -1110,30 +1112,53 @@ 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, disabled = false, classNames = {}, styles = {}, className = "", style: extraStyle = {}, ...props }) => {
-	const finalButtonStyle = {
+var Button = ({ children, variant = "primary", size = "sm", onClick, disabled = false, rounded = false, icon, iconPosition = "left", classNames = {}, styles = {}, className = "", style: extraStyle = {}, ...props }) => {
+	const [isHovered, setIsHovered] = useState(false);
+	const finalClassNames = {
+		container: "",
+		button: "",
+		variant: "",
+		size: "",
+		...classNames
+	};
+	const baseButtonStyle = {
 		...commonStyles.buttonBase,
 		cursor: disabled ? "not-allowed" : "pointer",
 		opacity: disabled ? .5 : 1,
-		...sizeStyles[size],
-		...styles.button,
-		...variantStyles[variant],
+		borderRadius: rounded ? "9999px" : "5px",
+		boxShadow: "0 2px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.08)",
+		...icon ? {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "0.4em"
+		} : {},
+		...sizeStyles[size]
+	};
+	const uiStyles = { variants: standardVariantStyles(isHovered) };
+	const finalButtonStyle = {
+		...baseButtonStyle,
+		...uiStyles.variants[variant],
 		...extraStyle
 	};
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
 		className: [
-			classNames.container || "",
-			variantClasses[variant],
+			finalClassNames.container,
 			sizeClasses[size],
-			classNames.button || "",
+			finalClassNames.button,
 			"luna-button",
 			className
 		].filter(Boolean).join(" ").trim(),
 		onClick,
 		disabled,
 		style: finalButtonStyle,
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
 		...props,
-		children
+		children: [
+			icon && iconPosition === "left" && icon,
+			children,
+			icon && iconPosition === "right" && icon
+		]
 	});
 };
 //#endregion
@@ -1157,12 +1182,12 @@ var Card = ({ children, title, className = "", padding = "md", shadow = "md", st
 };
 //#endregion
 //#region src/components/Anchor.tsx
-var Anchor = ({ children, variant = "none", size = "md", href = "https://andreychaconresumereact.netlify.app/", className = "", target, rel, style = {}, ...props }) => {
+var Anchor = ({ children, variant = "none", size = "md", href = "https://andreychaconresumereact.netlify.app/", className = "", target = "_blank", rel = "noopener noreferrer", style = {}, ...props }) => {
 	const [isHovered, setIsHovered] = useState(false);
 	const combinedClassName = `luna-anchor ${className}`.trim();
 	const uiStyles = {
 		base: anchorBaseStyles(variant, isHovered, size),
-		variants: anchorVariantStyles(isHovered)
+		variants: standardVariantStyles(isHovered)
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
 		href,
@@ -1197,6 +1222,7 @@ var Accordion = ({ title, children, defaultActive = false, active: externalActiv
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
 			type: "button",
 			style: uiStyles.header,
+			className: "accordion-button",
 			onClick: handleToggle,
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 				style: uiStyles.arrow,
@@ -1204,6 +1230,7 @@ var Accordion = ({ title, children, defaultActive = false, active: externalActiv
 			})]
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			style: uiStyles.content,
+			className: "accordion-content",
 			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 				style: uiStyles.innerContent,
 				children
@@ -1331,13 +1358,13 @@ var Spinner = ({ className = "", size = "md", type = "circle", color = "#2563eb"
 };
 //#endregion
 //#region src/components/DropDown.tsx
-var DropDown = ({ options, value, onChange, placeholder = "Select an option", toggle, classNames = {}, styles = {}, disabled = false, className }) => {
+var DropDown = ({ options, value, onChange, placeholder = "Select an option", toggle, className, styles, disabled = false }) => {
 	const finalClassNames = {
 		container: "luna-dropdown",
 		trigger: "luna-dropdown-trigger",
 		panel: "luna-dropdown-panel",
 		option: "luna-dropdown-option",
-		...classNames
+		className
 	};
 	const [isOpen, setIsOpen] = useState(false);
 	const [hoverIndex, setHoverIndex] = useState(null);
@@ -1694,15 +1721,29 @@ 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: 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 }) => {
+var variantBorderColors = {
+	none: colors.borderInput,
+	primary: colors.primary,
+	secondary: colors.secondary,
+	outline: colors.borderInput,
+	danger: colors.danger,
+	success: colors.success,
+	warning: colors.warning,
+	info: colors.info,
+	dark: colors.dark,
+	light: colors.light,
+	link: "transparent"
+};
+var Input = ({ children, variant = "none", type = "text", inputSize = "md", placeholder, value: controlledValue, onChange, onFocus, onBlur, disabled = false, required = false, isRequired = false, icon, iconPosition = "left", 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
+		classNames
 	};
 	const [internalValue, setInternalValue] = useState(controlledValue || "");
+	const [isFocused, setIsFocused] = useState(false);
 	useEffect(() => {
 		if (controlledValue !== void 0) setInternalValue(controlledValue);
 	}, [controlledValue]);
@@ -1764,6 +1805,7 @@ var Input = ({ children, variant = "none", type = "text", inputSize = "md", plac
 		onChange?.(newVal);
 	};
 	const handleBlur = () => {
+		setIsFocused(false);
 		if (useCurrency && internalValue) {
 			const formatted = formatCurrency(internalValue);
 			if (controlledValue === void 0) setInternalValue(formatted);
@@ -1772,41 +1814,87 @@ var Input = ({ children, variant = "none", type = "text", inputSize = "md", plac
 		onBlur?.();
 	};
 	const uiStyles = inputStyles(styles, extraStyle, inputSize, readOnly, disabled);
+	const iconPadding = icon ? "2.25rem" : void 0;
 	const finalInputStyle = {
 		...uiStyles.input,
-		...uiStyles.variants[variant]
+		...uiStyles.variants[variant],
+		borderStyle: "solid",
+		borderWidth: isFocused ? "2px" : "1px",
+		borderColor: variantBorderColors[variant],
+		...icon && iconPosition === "left" ? { paddingLeft: iconPadding } : {},
+		...icon && iconPosition === "right" ? { paddingRight: iconPadding } : {}
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: `${finalClassNames.container || ""} ${extraClassName}`.trim(),
 		style: uiStyles.container,
-		children: [children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+		children: [children && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
 			htmlFor: inputId,
 			className: finalClassNames.label,
 			style: uiStyles.label,
-			children
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
-			id: inputId,
-			name,
-			type: useCurrency ? "text" : type,
-			placeholder: placeholder || (mask ? mask.replace(/[9a*]/g, maskChar) : ""),
-			value: internalValue,
-			onChange: handleChange,
-			onFocus,
-			onBlur: handleBlur,
-			disabled,
-			required,
-			readOnly,
-			"aria-label": ariaLabel,
-			"aria-labelledby": ariaLabelledby,
-			style: finalInputStyle,
-			className: `${finalClassNames.input || ""} rounded-xl`.trim(),
-			...props
+			children: [children, isRequired && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				style: {
+					color: colors.danger,
+					marginLeft: "0.25rem"
+				},
+				children: "*"
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			style: {
+				position: "relative",
+				display: "flex",
+				alignItems: "center"
+			},
+			children: [
+				icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					style: {
+						position: "absolute",
+						left: "0.65rem",
+						display: "flex",
+						alignItems: "center",
+						color: colors.textDisabled,
+						pointerEvents: "none"
+					},
+					children: icon
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+					id: inputId,
+					name,
+					type: useCurrency ? "text" : type,
+					placeholder: placeholder || (mask ? mask.replace(/[9a*]/g, maskChar) : ""),
+					value: internalValue,
+					onChange: handleChange,
+					onFocus: () => {
+						setIsFocused(true);
+						onFocus?.();
+					},
+					onBlur: handleBlur,
+					disabled,
+					required,
+					readOnly,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledby,
+					style: finalInputStyle,
+					className: `${finalClassNames.input || ""} rounded-xl`.trim(),
+					...props
+				}),
+				icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					style: {
+						position: "absolute",
+						right: "0.65rem",
+						display: "flex",
+						alignItems: "center",
+						color: colors.textDisabled,
+						pointerEvents: "none"
+					},
+					children: icon
+				})
+			]
 		})]
 	});
 };
 //#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 }) => {
+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",
@@ -1817,7 +1905,7 @@ var DataTable = ({ columns, data, pagination = false, pageSize = 10, selectable
 		td: "luna-datatable-td",
 		pagination: "luna-datatable-pagination",
 		searchContainer: "luna-datatable-search",
-		...classNames
+		classNames
 	};
 	const [currentPage, setCurrentPage] = useState(1);
 	const [sortConfig, setSortConfig] = useState(null);
@@ -1979,7 +2067,6 @@ var DataTable = ({ columns, data, pagination = false, pageSize = 10, selectable
 						})
 					}, 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);
@@ -2073,7 +2160,7 @@ var DataTable = ({ columns, data, pagination = false, pageSize = 10, selectable
 };
 //#endregion
 //#region src/components/Toast.tsx
-var Toast = ({ visible, severity = "info", summary, detail, life, onClose, position = "top-right", classNames = {}, styles = {}, className }) => {
+var Toast = ({ visible, severity = "info", summary, detail, life, onClose, position = "top-right", classNames, styles, className }) => {
 	const finalClassNames = {
 		container: "luna-toast",
 		content: "luna-toast-content",
@@ -2081,7 +2168,7 @@ var Toast = ({ visible, severity = "info", summary, detail, life, onClose, posit
 		summary: "luna-toast-summary",
 		detail: "luna-toast-detail",
 		closeButton: "luna-toast-close",
-		...classNames
+		classNames
 	};
 	const [isExiting, setIsExiting] = useState(false);
 	useEffect(() => {
@@ -2104,19 +2191,19 @@ var Toast = ({ visible, severity = "info", summary, detail, life, onClose, posit
 	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(),
+		className: `${finalClassNames?.container} ${className || ""}`.trim(),
 		style: uiStyles.container,
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: finalClassNames.icon,
+				className: finalClassNames?.icon,
 				style: uiStyles.iconWrapper,
 				children: config.icon
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: finalClassNames.content,
+				className: finalClassNames?.content,
 				style: uiStyles.content,
 				children: [summary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: finalClassNames.summary,
+					className: finalClassNames?.summary,
 					style: uiStyles.summary,
 					children: summary
 				}), detail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
@@ -2138,7 +2225,7 @@ var Toast = ({ visible, severity = "info", summary, detail, life, onClose, posit
 };
 //#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 }) => {
+var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select Items", display = "comma", filter = true, filterPlaceholder = "Search...", selectAll = true, maxSelectedLabels = 3, classNames, styles, disabled = false }) => {
 	const finalClassNames = {
 		container: "luna-multiselect",
 		trigger: "luna-multiselect-trigger",
@@ -2146,7 +2233,7 @@ var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select It
 		header: "luna-multiselect-header",
 		item: "luna-multiselect-item",
 		chip: "luna-multiselect-chip",
-		...classNames
+		classNames
 	};
 	const [isOpen, setIsOpen] = useState(false);
 	const [filterText, setFilterText] = useState("");
@@ -2202,7 +2289,7 @@ var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select It
 	const uiStyles = multiSelectStyles(styles, disabled, isOpen);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		ref: containerRef,
-		className: `${finalClassNames.container} ${className || ""}`.trim(),
+		className: `${finalClassNames.container} ${classNames || ""}`.trim(),
 		style: uiStyles.container,
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: finalClassNames.trigger,
@@ -2240,7 +2327,7 @@ var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select It
 					placeholder: filterPlaceholder,
 					value: filterText,
 					onChange: setFilterText,
-					classNames: { container: "w-full" }
+					className: "w-full"
 				})]
 			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				style: uiStyles.list,
@@ -2275,7 +2362,7 @@ var MultiSelect = ({ options, value = [], onChange, id, placeholder = "Select It
 };
 //#endregion
 //#region src/components/Popconfirm.tsx
-var Popconfirm = ({ title, description, onConfirm, onCancel, okText = "Yes", cancelText = "No", position = "top", children, classNames = {}, styles = {}, disabled = false, className = "" }) => {
+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",
@@ -2284,7 +2371,7 @@ var Popconfirm = ({ title, description, onConfirm, onCancel, okText = "Yes", can
 		actions: "luna-popconfirm-actions",
 		okButton: "luna-popconfirm-ok",
 		cancelButton: "luna-popconfirm-cancel",
-		...classNames
+		classNames
 	};
 	const [show, setShow] = useState(false);
 	const containerRef = useRef(null);
@@ -2358,11 +2445,11 @@ var Popconfirm = ({ title, description, onConfirm, onCancel, okText = "Yes", can
 };
 //#endregion
 //#region src/components/QRCode.tsx
-var QRCode = ({ value, size = 160, color = "000000", bgColor = "ffffff", bordered = true, classNames = {}, styles = {}, errorCorrectionLevel = "M", className }) => {
+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
+		classNames
 	};
 	const [isLoading, setIsLoading] = useState(true);
 	const cleanColor = color.startsWith("#") ? color.slice(1) : color;