luna-components-library 1.1.40 → 1.1.41

package/README.md

@@ -125,28 +125,35 @@ const isValid = validators.isEmail('user@luna.com'); // true
 All components use TypeScript with specific types for better type safety and IntelliSense. The library follows a minimal documentation approach with descriptive type names instead of extensive JSDoc comments.
 
 ### Button
-A versatile button component with multiple variants and sizes.
+A versatile button component with multiple variants, sizes, icons, and rounded style.
 
 ```jsx
-<Button 
-  variant="primary" 
-  size="md"
-  onClick={handleClick}
-  disabled={false}
->
-  Button Text
-</Button>
+// Basic
+<Button variant="primary" size="md" onClick={handleClick}>Click Me</Button>
+
+// Rounded (pill)
+<Button variant="primary" rounded>Rounded</Button>
+
+// With icon
+<Button variant="primary" icon="🚀">Deploy</Button>
+<Button variant="outline" icon="→" iconPosition="right">Next</Button>
+
+// Icon only
+<Button variant="danger" rounded icon="✕" />
 ```
 
 **Props:**
-- `children`: React.ReactNode - Button content
+- `children?: React.ReactNode` - Button content (optional when using icon only)
 - `variant?: ButtonVariant` - Button style (default: 'primary')
-- `size?: ButtonSize` - Button size (default: 'md')
+- `size?: ButtonSize` - Button size (default: 'sm')
+- `rounded?: boolean` - Pill/circle shape (default: false)
+- `icon?: React.ReactNode` - Icon element, emoji, or any ReactNode
+- `iconPosition?: 'left' | 'right'` - Icon placement (default: 'left')
 - `onClick?: React.MouseEventHandler<HTMLButtonElement>` - Click handler
 - `disabled?: boolean` - Disable button (default: false)
 - `className?: string` - Additional CSS classes
 - `style?: React.CSSProperties` - Custom inline styles
-- `...props`: any - Additional HTML button attributes (spreads all native button props)
+- `...props`: any - Additional HTML button attributes
 
 **Types:**
 ```typescript
@@ -155,15 +162,15 @@ type ButtonSize = 'sm' | 'md' | 'lg';
 ```
 
 **Variants:**
-- `primary` - Blue background button
-- `secondary` - Gray background button  
+- `primary` - Blue background
+- `secondary` - Gray background
 - `outline` - Transparent with border
-- `success` - Green background button
-- `danger` - Red background button
-- `warning` - Yellow background button
-- `info` - Cyan background button
-- `dark` - Dark gray background button
-- `light` - Light gray background button
+- `success` - Green background
+- `danger` - Red background
+- `warning` - Yellow background
+- `info` - Cyan background
+- `dark` - Dark gray background
+- `light` - Light gray background
 - `link` - Blue text link with hover effects
 
 ### Card
@@ -626,67 +633,69 @@ const MyComponent = () => {
 ```
 
 ### Input
-A versatile input component with multiple variants, sizes, masks, currency formatting, and types.
+A versatile input component with multiple variants, sizes, masks, currency formatting, icons, and required indicator.
 
 ```jsx
-<Input 
-  inputSize="md"
-  variant="primary"
-  type="text"
-  placeholder="Enter your text here"
-  value={inputValue}
-  onChange={(value) => setInputValue(value)}
-  className="custom-class"
-  id="my-input"
->
-  Input Label
-</Input>
+// Basic
+<Input variant="primary" placeholder="Enter text">Label</Input>
+
+// With icon
+<Input icon="🔍" placeholder="Search...">Search</Input>
+<Input icon="🔒" iconPosition="right" variant="danger" placeholder="Password">Password</Input>
+
+// Required indicator
+<Input isRequired variant="primary" placeholder="Email">Email</Input>
+
+// Currency
+<Input useCurrency currency="USD" locale="en-US" placeholder="$0.00">Price</Input>
+
+// Mask
+<Input mask="(999) 999-9999" placeholder="(555) 000-0000">Phone</Input>
 ```
 
 **Props:**
-- `children?: React.ReactNode` - Label content for the input
-- `variant?: InputVariant` - Input style variant (default: 'none')
+- `children?: React.ReactNode` - Label content
+- `variant?: InputVariant` - Border color variant (default: 'none')
 - `inputSize?: InputSize` - Input size (default: 'md')
 - `type?: InputType` - HTML input type (default: 'text')
 - `placeholder?: string` - Placeholder text
-- `value?: string` - Input value
+- `value?: string` - Controlled value
 - `onChange?: (value: string) => void` - Change handler
 - `onFocus?: () => void` - Focus handler
 - `onBlur?: () => void` - Blur handler
 - `disabled?: boolean` - Disable input (default: false)
-- `required?: boolean` - Required field (default: false)
+- `required?: boolean` - HTML required attribute (default: false)
+- `isRequired?: boolean` - Shows a red `*` next to the label (default: false)
 - `readOnly?: boolean` - Read-only input (default: false)
+- `icon?: React.ReactNode` - Icon inside the input (emoji, SVG, component)
+- `iconPosition?: 'left' | 'right'` - Icon placement (default: 'left')
 - `className?: string` - Additional CSS classes
 - `style?: React.CSSProperties` - Custom inline styles
-- `id?: string` - HTML id attribute for label association
+- `id?: string` - HTML id for label association
 - `name?: string` - HTML name attribute
-- `classNames?: InputClassNames` - Custom class names for sub-elements
-- `styles?: InputStyles` - Custom inline styles per element
-- `mask?: string` - Input mask pattern (e.g. "(999) 999-9999")
-- `maskChar?: string` - Mask placeholder character (default: '_')
+- `classNames?: InputClassNames` - Custom class names per sub-element
+- `styles?: InputStyles` - Custom inline styles per sub-element
+- `mask?: string` - Input mask pattern (e.g. `"(999) 999-9999"`)
+- `maskChar?: string` - Mask placeholder character (default: `'_'`)
 - `useCurrency?: boolean` - Enable currency formatting
-- `currency?: string` - Currency code (e.g. "USD", "CRC")
-- `locale?: string` - Locale for formatting (e.g. "en-US", "es-CR")
+- `currency?: string` - Currency code (e.g. `"USD"`, `"CRC"`)
+- `locale?: string` - Locale for formatting (e.g. `"en-US"`, `"es-CR"`)
 - `minFractionDigits?: number` - Minimum fraction digits (default: 0)
 - `maxFractionDigits?: number` - Maximum fraction digits (default: 2)
-- `aria-label?: string` - ARIA label for accessibility
+- `aria-label?: string` - ARIA label
 - `aria-labelledby?: string` - ARIA labelledby
 - `...props`: any - Additional HTML input attributes
 
 **Types:**
 ```typescript
-type InputVariant = 'none' | 'primary' | 'secondary' | 'outline' | 'danger' | 'success';
+type InputVariant = 'none' | 'primary' | 'secondary' | 'outline' | 'danger' | 'success' | 'warning' | 'info' | 'dark' | 'light' | 'link';
 type InputSize = 'sm' | 'md' | 'lg' | 'xl';
 type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color' | 'file' | 'hidden' | 'image' | 'range' | 'reset' | 'submit';
 ```
 
-**Variants:**
-- `none` - Default styling with border
-- `primary` - Blue focus ring
-- `secondary` - Gray focus ring
-- `outline` - Border only
-- `danger` - Red focus ring
-- `success` - Green focus ring
+**Focus behavior:** Border increases from `1px` to `2px` on focus, using the variant color. On blur it returns to `1px` with the same variant color.
+
+**Variants:** Each variant applies a distinct border color — `primary` (blue), `secondary` (gray), `danger` (red), `success` (green), `warning` (yellow), `info` (cyan), `dark`, `light`, `outline` (default gray), `none` (default gray).
 
 **Size Options:**
 - `sm` - Small padding and text

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",
@@ -212,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"
 	},
@@ -380,52 +398,7 @@ var dropDownStyles = (styles, disabled, isOpen, hoverIndex, value) => ({
 		...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"
-	}
-};
+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,
@@ -448,25 +421,44 @@ var inputStyles = (styles, extraStyle, inputSize, readOnly, disabled) => ({
 	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
 		}
 	}
 });
@@ -625,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) => {
@@ -958,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,
@@ -1010,7 +1002,6 @@ 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.anchorBase,
 	textDecoration: variant === "none" ? isHovered ? "underline" : "none" : "none",
 	...variant !== "none" ? sizeStyles[size] : {},
 	borderRadius: variant === "none" ? "0" : radii.md
@@ -1045,40 +1036,40 @@ var accordionStyles = (isActive, styles) => ({
 var standardVariantStyles = (isHovered) => ({
 	none: { color: colors.primary },
 	primary: {
-		backgroundColor: isHovered ? "#1d4ed8" : "#2563eb",
-		color: isHovered ? "black" : "white"
+		backgroundColor: isHovered ? colors.primaryHover : colors.primary,
+		color: colors.white
 	},
 	secondary: {
-		backgroundColor: isHovered ? "#6d737c" : "#4b5563",
-		color: isHovered ? "black" : "white"
+		backgroundColor: isHovered ? colors.secondaryHover : colors.secondary,
+		color: colors.white
 	},
 	outline: {
-		backgroundColor: isHovered ? "lightgray" : "white",
-		color: isHovered ? "white" : "black"
+		backgroundColor: isHovered ? colors.lightHover : colors.white,
+		color: colors.dark
 	},
 	danger: {
-		backgroundColor: isHovered ? "#b91c1c" : "#dc2626",
-		color: isHovered ? "black" : "white"
+		backgroundColor: isHovered ? colors.dangerHover : colors.danger,
+		color: colors.white
 	},
 	success: {
-		backgroundColor: isHovered ? "#15803d" : "#16a34a",
-		color: isHovered ? "black" : "white"
+		backgroundColor: isHovered ? colors.successHover : colors.success,
+		color: colors.white
 	},
 	warning: {
-		backgroundColor: isHovered ? "#d97706" : "#f59e0b",
-		color: isHovered ? "black" : "white"
+		backgroundColor: isHovered ? colors.warningHover : colors.warning,
+		color: colors.white
 	},
 	info: {
-		backgroundColor: isHovered ? "#0891b2" : "#0ea5e9",
-		color: isHovered ? "black" : "white"
+		backgroundColor: isHovered ? colors.infoHover : colors.info,
+		color: colors.white
 	},
 	dark: {
-		backgroundColor: isHovered ? "#1f2937" : "#111827",
-		color: isHovered ? "black" : "white"
+		backgroundColor: isHovered ? colors.darkHover : colors.dark,
+		color: colors.white
 	},
 	light: {
-		backgroundColor: isHovered ? "#f3f4f6" : "#f9fafb",
-		color: isHovered ? "black" : "white"
+		backgroundColor: isHovered ? colors.lightHover : colors.light,
+		color: colors.dark
 	},
 	link: { color: isHovered ? colors.primary : colors.text }
 });
@@ -1121,7 +1112,7 @@ 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 }) => {
+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: "",
@@ -1134,6 +1125,13 @@ var Button = ({ children, variant = "primary", size = "sm", onClick, disabled =
 		...commonStyles.buttonBase,
 		cursor: disabled ? "not-allowed" : "pointer",
 		opacity: disabled ? .5 : 1,
+		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) };
@@ -1142,7 +1140,7 @@ var Button = ({ children, variant = "primary", size = "sm", onClick, disabled =
 		...uiStyles.variants[variant],
 		...extraStyle
 	};
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
 		className: [
 			finalClassNames.container,
 			sizeClasses[size],
@@ -1156,7 +1154,11 @@ var Button = ({ children, variant = "primary", size = "sm", onClick, disabled =
 		onMouseEnter: () => setIsHovered(true),
 		onMouseLeave: () => setIsHovered(false),
 		...props,
-		children
+		children: [
+			icon && iconPosition === "left" && icon,
+			children,
+			icon && iconPosition === "right" && icon
+		]
 	});
 };
 //#endregion
@@ -1180,7 +1182,7 @@ 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 = {
@@ -1719,7 +1721,20 @@ 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",
@@ -1728,6 +1743,7 @@ var Input = ({ children, variant = "none", type = "text", inputSize = "md", plac
 		classNames
 	};
 	const [internalValue, setInternalValue] = useState(controlledValue || "");
+	const [isFocused, setIsFocused] = useState(false);
 	useEffect(() => {
 		if (controlledValue !== void 0) setInternalValue(controlledValue);
 	}, [controlledValue]);
@@ -1789,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);
@@ -1797,35 +1814,81 @@ 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
+				})
+			]
 		})]
 	});
 };