@de-adlock/ui
Version:
Modern React component library for FiveM with built-in theme management
1,307 lines • 365 kB
JavaScript
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import React, { forwardRef, useState, useRef, useEffect, createContext, useContext, useCallback } from "react";
import { createPortal } from "react-dom";
function r(e) {
var t, f, n = "";
if ("string" == typeof e || "number" == typeof e) n += e;
else if ("object" == typeof e) if (Array.isArray(e)) {
var o = e.length;
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
} else for (f in e) e[f] && (n && (n += " "), n += f);
return n;
}
function clsx() {
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
return n;
}
const button = "_button_1pom1_2";
const xs$2 = "_xs_1pom1_45";
const sm$f = "_sm_1pom1_52";
const md$e = "_md_1pom1_59";
const lg$f = "_lg_1pom1_66";
const xl$4 = "_xl_1pom1_73";
const iconOnly = "_iconOnly_1pom1_81";
const icon$6 = "_icon_1pom1_81";
const iconRight$1 = "_iconRight_1pom1_95";
const primary$4 = "_primary_1pom1_100";
const disabled$a = "_disabled_1pom1_106";
const secondary$2 = "_secondary_1pom1_116";
const success$c = "_success_1pom1_127";
const warning$8 = "_warning_1pom1_137";
const error$e = "_error_1pom1_147";
const info$6 = "_info_1pom1_157";
const ghost$1 = "_ghost_1pom1_167";
const outline$7 = "_outline_1pom1_178";
const glass$8 = "_glass_1pom1_189";
const loading$4 = "_loading_1pom1_210";
const loadingIcon$5 = "_loadingIcon_1pom1_216";
const spinner$1 = "_spinner_1pom1_226";
const spin$7 = "_spin_1pom1_226";
const glow$7 = "_glow_1pom1_237";
const pulse$5 = "_pulse_1pom1_245";
const animate$a = "_animate_1pom1_250";
const buttonFadeIn = "_buttonFadeIn_1pom1_1";
const styles$I = {
button,
xs: xs$2,
sm: sm$f,
md: md$e,
lg: lg$f,
xl: xl$4,
iconOnly,
icon: icon$6,
iconRight: iconRight$1,
primary: primary$4,
disabled: disabled$a,
secondary: secondary$2,
success: success$c,
warning: warning$8,
error: error$e,
info: info$6,
ghost: ghost$1,
outline: outline$7,
glass: glass$8,
loading: loading$4,
loadingIcon: loadingIcon$5,
spinner: spinner$1,
spin: spin$7,
glow: glow$7,
pulse: pulse$5,
animate: animate$a,
buttonFadeIn
};
const Button = forwardRef(({
variant = "primary",
size = "md",
loading: loading2 = false,
disabled: disabled2 = false,
icon: icon2,
iconPosition = "left",
iconOnly: iconOnly2 = false,
glow: glow2 = false,
pulse: pulse2 = false,
customColor: customColor2,
children: children2,
className,
animate: animate2 = true,
type = "button",
onClick,
style,
...props
}, ref) => {
const buttonClasses = clsx(
styles$I.button,
styles$I[variant],
styles$I[size],
{
[styles$I.iconOnly]: iconOnly2,
[styles$I.withIcon]: icon2 && !iconOnly2,
[styles$I.iconRight]: iconPosition === "right",
[styles$I.loading]: loading2,
[styles$I.glow]: glow2,
[styles$I.pulse]: pulse2,
[styles$I.disabled]: disabled2 || loading2
},
className
);
const customStyles = customColor2 ? {
"--button-custom-color": customColor2,
...style
} : style;
const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
icon2 && iconPosition === "left" && !loading2 && /* @__PURE__ */ jsx("span", { className: styles$I.icon, children: icon2 }),
!iconOnly2 && !loading2 && children2,
icon2 && iconPosition === "right" && !loading2 && /* @__PURE__ */ jsx("span", { className: styles$I.icon, children: icon2 }),
loading2 && /* @__PURE__ */ jsx("span", { className: styles$I.loadingIcon, children: /* @__PURE__ */ jsx("div", { className: styles$I.spinner }) })
] });
return /* @__PURE__ */ jsx(
"button",
{
ref,
type,
className: clsx(buttonClasses, { [styles$I.animate]: animate2 }),
style: customStyles,
disabled: disabled2 || loading2,
onClick,
...props,
children: buttonContent
}
);
});
Button.displayName = "Button";
const InputIcons = {
// Password Toggle
Eye: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
] }),
EyeOff: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
/* @__PURE__ */ jsx("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
/* @__PURE__ */ jsx("path", { d: "M14.12 14.12a3 3 0 1 1-4.24-4.24" }),
/* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
] }),
// Clear/Close
X: () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [
/* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
/* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
] }),
// Search
Search: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
/* @__PURE__ */ jsx("path", { d: "M21 21l-4.35-4.35" })
] }),
// Email/Mail
Mail: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
/* @__PURE__ */ jsx("polyline", { points: "22,6 12,13 2,6" })
] }),
// Lock/Password
Lock: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "16", r: "1" }),
/* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
] }),
// User/Person
User: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
] }),
// Phone
Phone: () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }),
// Globe/URL
Globe: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
/* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
/* @__PURE__ */ jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
] }),
// Calendar/Date
Calendar: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
/* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
/* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
/* @__PURE__ */ jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
] }),
// Clock/Time
Clock: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
/* @__PURE__ */ jsx("polyline", { points: "12,6 12,12 16,14" })
] }),
// Hash/Number
Hash: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
/* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
/* @__PURE__ */ jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21" }),
/* @__PURE__ */ jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21" })
] }),
// Edit/Text
Edit: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
/* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
] }),
// Loading Spinner
Loader: () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "animate-spin", children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }),
// Check/Success
Check: () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("polyline", { points: "20,6 9,17 4,12" }) }),
// Alert/Error
AlertCircle: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
/* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
/* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
] }),
// Info
Info: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
/* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
/* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
] }),
// Minus/Indeterminate
Minus: () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }),
// Chevron Down
ChevronDown: () => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "6,9 12,15 18,9" }) }),
// Upload
Upload: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
/* @__PURE__ */ jsx("polyline", { points: "7,10 12,5 17,10" }),
/* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "15" })
] }),
// File
File: () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
/* @__PURE__ */ jsx("polyline", { points: "14,2 14,8 20,8" }),
/* @__PURE__ */ jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
/* @__PURE__ */ jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
/* @__PURE__ */ jsx("polyline", { points: "10,9 9,9 8,9" })
] })
};
const wrapper$5 = "_wrapper_9cmep_2";
const label$9 = "_label_9cmep_12";
const focused$4 = "_focused_9cmep_21";
const inputContainer = "_inputContainer_9cmep_26";
const input$2 = "_input_9cmep_26";
const sm$e = "_sm_9cmep_88";
const lg$e = "_lg_9cmep_95";
const filled$5 = "_filled_9cmep_103";
const outline$6 = "_outline_9cmep_114";
const glass$7 = "_glass_9cmep_157";
const glow$6 = "_glow_9cmep_177";
const leftIcon$3 = "_leftIcon_9cmep_185";
const rightIcon$3 = "_rightIcon_9cmep_186";
const withLeftIcon$3 = "_withLeftIcon_9cmep_231";
const withRightIcon$3 = "_withRightIcon_9cmep_243";
const rightIcons$3 = "_rightIcons_9cmep_256";
const clearButton$2 = "_clearButton_9cmep_274";
const passwordToggle = "_passwordToggle_9cmep_275";
const loadingIcon$4 = "_loadingIcon_9cmep_346";
const pulse$4 = "_pulse_9cmep_1";
const spin$6 = "_spin_9cmep_1";
const error$d = "_error_9cmep_369";
const success$b = "_success_9cmep_385";
const required$5 = "_required_9cmep_402";
const helperText$6 = "_helperText_9cmep_409";
const helperError$4 = "_helperError_9cmep_417";
const helperSuccess$4 = "_helperSuccess_9cmep_421";
const errorMessage$5 = "_errorMessage_9cmep_426";
const successMessage$4 = "_successMessage_9cmep_427";
const shake = "_shake_9cmep_1";
const fadeIn$3 = "_fadeIn_9cmep_1";
const numberControls = "_numberControls_9cmep_604";
const numberButton = "_numberButton_9cmep_614";
const animate$9 = "_animate_9cmep_716";
const inputFadeIn = "_inputFadeIn_9cmep_1";
const styles$H = {
wrapper: wrapper$5,
label: label$9,
focused: focused$4,
inputContainer,
input: input$2,
sm: sm$e,
lg: lg$e,
filled: filled$5,
outline: outline$6,
glass: glass$7,
glow: glow$6,
leftIcon: leftIcon$3,
rightIcon: rightIcon$3,
withLeftIcon: withLeftIcon$3,
withRightIcon: withRightIcon$3,
rightIcons: rightIcons$3,
clearButton: clearButton$2,
passwordToggle,
loadingIcon: loadingIcon$4,
pulse: pulse$4,
spin: spin$6,
error: error$d,
success: success$b,
required: required$5,
helperText: helperText$6,
helperError: helperError$4,
helperSuccess: helperSuccess$4,
errorMessage: errorMessage$5,
successMessage: successMessage$4,
shake,
fadeIn: fadeIn$3,
numberControls,
numberButton,
animate: animate$9,
inputFadeIn
};
const Input = forwardRef(({
variant = "default",
size = "md",
type = "text",
error: error2 = false,
success: success2 = false,
loading: loading2 = false,
label: label2,
placeholder: placeholder2,
helperText: helperText2,
errorText,
leftIcon: leftIcon2,
rightIcon: rightIcon2,
autoIcon = true,
glow: glow2 = false,
clearable = false,
onClear,
animate: animate2 = true,
customColor: customColor2,
className,
style,
value: value2,
onChange,
...props
}, ref) => {
const [isFocused, setIsFocused] = useState(false);
const [hasValue, setHasValue] = useState(Boolean(value2));
const [showPassword, setShowPassword] = useState(false);
const getAutoIcon = () => {
if (!autoIcon) return null;
switch (type) {
case "email":
return /* @__PURE__ */ jsx(InputIcons.Mail, {});
case "password":
return /* @__PURE__ */ jsx(InputIcons.Lock, {});
case "search":
return /* @__PURE__ */ jsx(InputIcons.Search, {});
case "tel":
return /* @__PURE__ */ jsx(InputIcons.Phone, {});
case "url":
return /* @__PURE__ */ jsx(InputIcons.Globe, {});
case "date":
case "datetime-local":
case "month":
case "week":
return /* @__PURE__ */ jsx(InputIcons.Calendar, {});
case "time":
return /* @__PURE__ */ jsx(InputIcons.Clock, {});
case "number":
return /* @__PURE__ */ jsx(InputIcons.Hash, {});
default:
return type === "text" ? /* @__PURE__ */ jsx(InputIcons.Edit, {}) : null;
}
};
const handleChange = (e) => {
setHasValue(Boolean(e.target.value));
onChange == null ? void 0 : onChange(e);
};
const handleClear = () => {
setHasValue(false);
onClear == null ? void 0 : onClear();
};
const togglePassword = () => {
setShowPassword(!showPassword);
};
const inputWrapperClasses = clsx(
styles$H.wrapper,
styles$H[variant],
styles$H[size],
{
[styles$H.focused]: isFocused,
[styles$H.hasValue]: hasValue,
[styles$H.error]: error2,
[styles$H.success]: success2,
[styles$H.loading]: loading2,
[styles$H.glow]: glow2,
[styles$H.withLeftIcon]: leftIcon2 || autoIcon && getAutoIcon(),
[styles$H.withRightIcon]: rightIcon2 || type === "password" || clearable || loading2
},
className
);
const customStyles = customColor2 ? {
"--input-custom-color": customColor2,
...style
} : style;
const currentType = type === "password" && showPassword ? "text" : type;
return /* @__PURE__ */ jsxs("div", { className: clsx(inputWrapperClasses, { [styles$H.animate]: animate2 }), style: customStyles, children: [
label2 && /* @__PURE__ */ jsxs("label", { className: styles$H.label, children: [
label2,
props.required && /* @__PURE__ */ jsx("span", { className: styles$H.required, children: "*" })
] }),
/* @__PURE__ */ jsxs("div", { className: styles$H.inputContainer, children: [
(leftIcon2 || autoIcon && getAutoIcon()) && /* @__PURE__ */ jsx("span", { className: styles$H.leftIcon, children: leftIcon2 || getAutoIcon() }),
/* @__PURE__ */ jsx(
"input",
{
ref,
type: currentType,
className: styles$H.input,
placeholder: placeholder2,
value: value2,
onChange: handleChange,
onFocus: () => setIsFocused(true),
onBlur: () => setIsFocused(false),
...props
}
),
(rightIcon2 || type === "password" || clearable && hasValue || loading2) && /* @__PURE__ */ jsxs("div", { className: styles$H.rightIcons, children: [
loading2 && /* @__PURE__ */ jsx("span", { className: styles$H.loadingIcon, children: /* @__PURE__ */ jsx(InputIcons.Loader, {}) }),
clearable && hasValue && !loading2 && /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: styles$H.clearButton,
onClick: handleClear,
tabIndex: -1,
"aria-label": "Clear input",
children: /* @__PURE__ */ jsx(InputIcons.X, {})
}
),
type === "password" && !loading2 && /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: styles$H.passwordToggle,
onClick: togglePassword,
tabIndex: -1,
"aria-label": showPassword ? "Hide password" : "Show password",
children: showPassword ? /* @__PURE__ */ jsx(InputIcons.EyeOff, {}) : /* @__PURE__ */ jsx(InputIcons.Eye, {})
}
),
rightIcon2 && !loading2 && /* @__PURE__ */ jsx("span", { className: styles$H.rightIcon, children: rightIcon2 })
] })
] }),
(helperText2 || errorText) && /* @__PURE__ */ jsx("div", { className: clsx(styles$H.helperText, {
[styles$H.helperError]: error2,
[styles$H.helperSuccess]: success2
}), children: error2 && errorText ? /* @__PURE__ */ jsxs("span", { className: styles$H.errorMessage, children: [
/* @__PURE__ */ jsx(InputIcons.AlertCircle, {}),
errorText
] }) : success2 ? /* @__PURE__ */ jsxs("span", { className: styles$H.successMessage, children: [
/* @__PURE__ */ jsx(InputIcons.Check, {}),
helperText2
] }) : helperText2 })
] });
});
Input.displayName = "Input";
const wrapper$4 = "_wrapper_1b895_3";
const animate$8 = "_animate_1b895_17";
const slideIn$3 = "_slideIn_1b895_1";
const filled$4 = "_filled_1b895_45";
const outline$5 = "_outline_1b895_63";
const glass$6 = "_glass_1b895_81";
const sm$d = "_sm_1b895_103";
const rightIcons$2 = "_rightIcons_1b895_115";
const md$d = "_md_1b895_123";
const lg$d = "_lg_1b895_143";
const label$8 = "_label_1b895_165";
const required$4 = "_required_1b895_183";
const selectContainer = "_selectContainer_1b895_195";
const focused$3 = "_focused_1b895_235";
const error$c = "_error_1b895_253";
const success$a = "_success_1b895_263";
const disabled$9 = "_disabled_1b895_273";
const loading$3 = "_loading_1b895_283";
const selectButton = "_selectButton_1b895_293";
const selectValue = "_selectValue_1b895_337";
const leftIcon$2 = "_leftIcon_1b895_363";
const rightIcon$2 = "_rightIcon_1b895_115";
const withLeftIcon$2 = "_withLeftIcon_1b895_409";
const withRightIcon$2 = "_withRightIcon_1b895_417";
const loadingIcon$3 = "_loadingIcon_1b895_427";
const spin$5 = "_spin_1b895_1";
const clearButton$1 = "_clearButton_1b895_443";
const dropdownArrow$1 = "_dropdownArrow_1b895_481";
const rotated = "_rotated_1b895_497";
const dropdown$1 = "_dropdown_1b895_481";
const slideDown$1 = "_slideDown_1b895_1";
const dropdownBottom = "_dropdownBottom_1b895_535";
const dropdownTop = "_dropdownTop_1b895_545";
const slideUp$1 = "_slideUp_1b895_1";
const searchContainer = "_searchContainer_1b895_559";
const searchInput = "_searchInput_1b895_571";
const searchIcon = "_searchIcon_1b895_615";
const optionsList = "_optionsList_1b895_633";
const option$1 = "_option_1b895_633";
const selected$1 = "_selected_1b895_719";
const optionIcon = "_optionIcon_1b895_749";
const optionLabel$1 = "_optionLabel_1b895_765";
const checkIcon$1 = "_checkIcon_1b895_773";
const noOptions = "_noOptions_1b895_791";
const helperText$5 = "_helperText_1b895_813";
const helperError$3 = "_helperError_1b895_827";
const helperSuccess$3 = "_helperSuccess_1b895_835";
const errorMessage$4 = "_errorMessage_1b895_843";
const successMessage$3 = "_successMessage_1b895_845";
const hiddenSelect = "_hiddenSelect_1b895_859";
const glow$5 = "_glow_1b895_877";
const styles$G = {
wrapper: wrapper$4,
animate: animate$8,
slideIn: slideIn$3,
"default": "_default_1b895_27",
filled: filled$4,
outline: outline$5,
glass: glass$6,
sm: sm$d,
rightIcons: rightIcons$2,
md: md$d,
lg: lg$d,
label: label$8,
required: required$4,
selectContainer,
focused: focused$3,
error: error$c,
success: success$a,
disabled: disabled$9,
loading: loading$3,
selectButton,
selectValue,
leftIcon: leftIcon$2,
rightIcon: rightIcon$2,
withLeftIcon: withLeftIcon$2,
withRightIcon: withRightIcon$2,
loadingIcon: loadingIcon$3,
spin: spin$5,
clearButton: clearButton$1,
dropdownArrow: dropdownArrow$1,
rotated,
dropdown: dropdown$1,
slideDown: slideDown$1,
dropdownBottom,
dropdownTop,
slideUp: slideUp$1,
searchContainer,
searchInput,
searchIcon,
optionsList,
option: option$1,
selected: selected$1,
optionIcon,
optionLabel: optionLabel$1,
checkIcon: checkIcon$1,
noOptions,
helperText: helperText$5,
helperError: helperError$3,
helperSuccess: helperSuccess$3,
errorMessage: errorMessage$4,
successMessage: successMessage$3,
hiddenSelect,
glow: glow$5
};
const Select = forwardRef(({
variant = "default",
size = "md",
error: error2 = false,
success: success2 = false,
loading: loading2 = false,
label: label2,
placeholder: placeholder2 = "Select an option...",
helperText: helperText2,
errorText,
options: options2 = [],
value: value2,
onChange,
leftIcon: leftIcon2,
rightIcon: rightIcon2,
glow: glow2 = false,
animate: animate2 = true,
customColor: customColor2,
className,
style,
searchable = false,
multiple = false,
clearable = false,
onClear,
disabled: disabled2,
...props
}, ref) => {
const [isOpen, setIsOpen] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [selectedOptions, setSelectedOptions] = useState([]);
const [dropdownPosition, setDropdownPosition] = useState("bottom");
const [dropdownStyle, setDropdownStyle] = useState({});
const containerRef = useRef(null);
const searchInputRef = useRef(null);
const dropdownRef = useRef(null);
const selectedOption = options2.find((opt) => opt.value === value2);
const filteredOptions = searchable ? options2.filter(
(opt) => opt.label.toLowerCase().includes(searchTerm.toLowerCase()) && !opt.disabled
) : options2.filter((opt) => !opt.disabled);
const calculateDropdownPosition = () => {
if (!containerRef.current || !dropdownRef.current) return;
const containerRect = containerRef.current.getBoundingClientRect();
const dropdownHeight = Math.min(dropdownRef.current.offsetHeight, 300);
const viewportHeight = window.innerHeight;
const viewportWidth = window.innerWidth;
const scrollY = window.scrollY;
const scrollX = window.scrollX;
const spaceBelow = viewportHeight - (containerRect.bottom - scrollY);
const spaceAbove = containerRect.top - scrollY;
const position = spaceBelow < dropdownHeight + 20 && spaceAbove > dropdownHeight + 20 ? "top" : "bottom";
setDropdownPosition(position);
const style2 = {
position: "fixed",
left: `${containerRect.left + scrollX}px`,
width: `${containerRect.width}px`,
zIndex: 9999
};
if (position === "bottom") {
style2.top = `${containerRect.bottom + scrollY + 4}px`;
} else {
style2.bottom = `${viewportHeight - containerRect.top + scrollY + 4}px`;
}
if (style2.left && typeof style2.left === "string") {
const leftValue = parseInt(style2.left);
if (leftValue + containerRect.width > viewportWidth) {
style2.left = `${viewportWidth - containerRect.width - 10}px`;
}
if (leftValue < 10) {
style2.left = "10px";
}
}
setDropdownStyle(style2);
};
const handleToggle = () => {
if (disabled2 || loading2) return;
const newIsOpen = !isOpen;
setIsOpen(newIsOpen);
if (newIsOpen) {
setTimeout(() => {
var _a;
calculateDropdownPosition();
if (searchable) {
(_a = searchInputRef.current) == null ? void 0 : _a.focus();
}
}, 10);
}
};
const handleOptionClick = (option2) => {
if (option2.disabled) return;
if (multiple) {
const isSelected = selectedOptions.some((opt) => opt.value === option2.value);
const newSelected = isSelected ? selectedOptions.filter((opt) => opt.value !== option2.value) : [...selectedOptions, option2];
setSelectedOptions(newSelected);
onChange == null ? void 0 : onChange(newSelected.map((opt) => opt.value));
} else {
onChange == null ? void 0 : onChange(option2.value);
setIsOpen(false);
setSearchTerm("");
}
};
const handleClear = (e) => {
e.stopPropagation();
if (multiple) {
setSelectedOptions([]);
onChange == null ? void 0 : onChange([]);
} else {
onChange == null ? void 0 : onChange("");
}
onClear == null ? void 0 : onClear();
};
const handleSearchChange = (e) => {
setSearchTerm(e.target.value);
};
useEffect(() => {
const handleClickOutside = (event) => {
var _a, _b;
const target = event.target;
const isInsideContainer = (_a = containerRef.current) == null ? void 0 : _a.contains(target);
const isInsideDropdown = (_b = dropdownRef.current) == null ? void 0 : _b.contains(target);
if (!isInsideContainer && !isInsideDropdown) {
setIsOpen(false);
setSearchTerm("");
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
useEffect(() => {
const handleResize = () => {
if (isOpen) {
calculateDropdownPosition();
}
};
const handleScroll = () => {
if (isOpen) {
calculateDropdownPosition();
}
};
window.addEventListener("resize", handleResize);
window.addEventListener("scroll", handleScroll, true);
return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener("scroll", handleScroll, true);
};
}, [isOpen]);
const handleKeyDown = (e) => {
if (e.key === "Escape") {
setIsOpen(false);
setSearchTerm("");
}
};
const selectWrapperClasses = clsx(
styles$G.wrapper,
styles$G[variant],
styles$G[size],
{
[styles$G.focused]: isFocused,
[styles$G.open]: isOpen,
[styles$G.error]: error2,
[styles$G.success]: success2,
[styles$G.loading]: loading2,
[styles$G.disabled]: disabled2,
[styles$G.glow]: glow2,
[styles$G.withLeftIcon]: leftIcon2,
[styles$G.withRightIcon]: rightIcon2 || clearable || loading2
},
className
);
const customStyles = customColor2 ? {
"--select-custom-color": customColor2,
...style
} : style;
const displayValue = multiple ? selectedOptions.length > 0 ? `${selectedOptions.length} selected` : placeholder2 : (selectedOption == null ? void 0 : selectedOption.label) || placeholder2;
const renderDropdown = () => {
if (!isOpen) return null;
return createPortal(
/* @__PURE__ */ jsxs(
"div",
{
ref: dropdownRef,
className: clsx(styles$G.dropdown, {
[styles$G.dropdownTop]: dropdownPosition === "top",
[styles$G.dropdownBottom]: dropdownPosition === "bottom"
}),
style: dropdownStyle,
children: [
searchable && /* @__PURE__ */ jsxs("div", { className: styles$G.searchContainer, children: [
/* @__PURE__ */ jsx(
"input",
{
ref: searchInputRef,
type: "text",
className: styles$G.searchInput,
placeholder: "Search options...",
value: searchTerm,
onChange: handleSearchChange,
onKeyDown: (e) => e.stopPropagation()
}
),
/* @__PURE__ */ jsx("span", { className: styles$G.searchIcon, children: /* @__PURE__ */ jsx(InputIcons.Search, {}) })
] }),
/* @__PURE__ */ jsx("div", { className: styles$G.optionsList, children: filteredOptions.length > 0 ? filteredOptions.map((option2) => {
const isSelected = multiple ? selectedOptions.some((opt) => opt.value === option2.value) : option2.value === value2;
return /* @__PURE__ */ jsxs(
"button",
{
type: "button",
className: clsx(styles$G.option, {
[styles$G.selected]: isSelected,
[styles$G.disabled]: option2.disabled
}),
onClick: () => handleOptionClick(option2),
disabled: option2.disabled,
children: [
option2.icon && /* @__PURE__ */ jsx("span", { className: styles$G.optionIcon, children: option2.icon }),
/* @__PURE__ */ jsx("span", { className: styles$G.optionLabel, children: option2.label }),
isSelected && /* @__PURE__ */ jsx("span", { className: styles$G.checkIcon, children: /* @__PURE__ */ jsx(InputIcons.Check, {}) })
]
},
option2.value
);
}) : /* @__PURE__ */ jsxs("div", { className: styles$G.noOptions, children: [
/* @__PURE__ */ jsx(InputIcons.Search, {}),
/* @__PURE__ */ jsx("span", { children: "No options found" })
] }) })
]
}
),
document.body
);
};
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(
"div",
{
ref: containerRef,
className: clsx(selectWrapperClasses, { [styles$G.animate]: animate2 }),
style: customStyles,
onKeyDown: handleKeyDown,
children: [
label2 && /* @__PURE__ */ jsxs("label", { className: styles$G.label, children: [
label2,
props.required && /* @__PURE__ */ jsx("span", { className: styles$G.required, children: "*" })
] }),
/* @__PURE__ */ jsxs("div", { className: styles$G.selectContainer, children: [
leftIcon2 && /* @__PURE__ */ jsx("span", { className: styles$G.leftIcon, children: leftIcon2 }),
/* @__PURE__ */ jsx(
"button",
{
type: "button",
className: styles$G.selectButton,
onClick: handleToggle,
onFocus: () => setIsFocused(true),
onBlur: () => setIsFocused(false),
disabled: disabled2 || loading2,
"aria-haspopup": "listbox",
"aria-expanded": isOpen,
children: /* @__PURE__ */ jsx("span", { className: styles$G.selectValue, children: displayValue })
}
),
/* @__PURE__ */ jsxs("div", { className: styles$G.rightIcons, children: [
loading2 && /* @__PURE__ */ jsx("span", { className: styles$G.loadingIcon, children: /* @__PURE__ */ jsx(InputIcons.Loader, {}) }),
clearable && (multiple && selectedOptions.length > 0 || !multiple && value2) && !loading2 && /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: styles$G.clearButton,
onClick: handleClear,
tabIndex: -1,
"aria-label": "Clear selection",
children: /* @__PURE__ */ jsx(InputIcons.X, {})
}
),
rightIcon2 && !loading2 && /* @__PURE__ */ jsx("span", { className: styles$G.rightIcon, children: rightIcon2 }),
/* @__PURE__ */ jsx("span", { className: clsx(styles$G.dropdownArrow, { [styles$G.rotated]: isOpen }), children: /* @__PURE__ */ jsx(InputIcons.ChevronDown, {}) })
] })
] }),
(helperText2 || errorText) && /* @__PURE__ */ jsx("div", { className: clsx(styles$G.helperText, {
[styles$G.helperError]: error2,
[styles$G.helperSuccess]: success2
}), children: error2 && errorText ? /* @__PURE__ */ jsxs("span", { className: styles$G.errorMessage, children: [
/* @__PURE__ */ jsx(InputIcons.AlertCircle, {}),
errorText
] }) : success2 ? /* @__PURE__ */ jsxs("span", { className: styles$G.successMessage, children: [
/* @__PURE__ */ jsx(InputIcons.Check, {}),
helperText2
] }) : helperText2 }),
/* @__PURE__ */ jsx(
"select",
{
ref,
className: styles$G.hiddenSelect,
value: Array.isArray(value2) ? value2[0] : value2,
onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
disabled: disabled2,
...props,
children: options2.map((option2) => /* @__PURE__ */ jsx("option", { value: option2.value, disabled: option2.disabled, children: option2.label }, option2.value))
}
)
]
}
),
renderDropdown()
] });
});
Select.displayName = "Select";
const wrapper$3 = "_wrapper_17npb_3";
const animate$7 = "_animate_17npb_17";
const slideIn$2 = "_slideIn_17npb_1";
const filled$3 = "_filled_17npb_45";
const outline$4 = "_outline_17npb_63";
const glass$5 = "_glass_17npb_81";
const sm$c = "_sm_17npb_103";
const md$c = "_md_17npb_117";
const lg$c = "_lg_17npb_131";
const label$7 = "_label_17npb_147";
const required$3 = "_required_17npb_165";
const textareaContainer = "_textareaContainer_17npb_177";
const focused$2 = "_focused_17npb_209";
const error$b = "_error_17npb_219";
const success$9 = "_success_17npb_229";
const loading$2 = "_loading_17npb_239";
const textarea = "_textarea_17npb_177";
const leftIcon$1 = "_leftIcon_17npb_301";
const rightIcon$1 = "_rightIcon_17npb_303";
const rightIcons$1 = "_rightIcons_17npb_331";
const withLeftIcon$1 = "_withLeftIcon_17npb_349";
const withRightIcon$1 = "_withRightIcon_17npb_357";
const loadingIcon$2 = "_loadingIcon_17npb_367";
const spin$4 = "_spin_17npb_1";
const clearButton = "_clearButton_17npb_383";
const helperText$4 = "_helperText_17npb_421";
const helperError$2 = "_helperError_17npb_435";
const helperSuccess$2 = "_helperSuccess_17npb_443";
const errorMessage$3 = "_errorMessage_17npb_451";
const successMessage$2 = "_successMessage_17npb_453";
const glow$4 = "_glow_17npb_467";
const styles$F = {
wrapper: wrapper$3,
animate: animate$7,
slideIn: slideIn$2,
"default": "_default_17npb_27",
filled: filled$3,
outline: outline$4,
glass: glass$5,
sm: sm$c,
md: md$c,
lg: lg$c,
label: label$7,
required: required$3,
textareaContainer,
focused: focused$2,
error: error$b,
success: success$9,
loading: loading$2,
textarea,
leftIcon: leftIcon$1,
rightIcon: rightIcon$1,
rightIcons: rightIcons$1,
withLeftIcon: withLeftIcon$1,
withRightIcon: withRightIcon$1,
loadingIcon: loadingIcon$2,
spin: spin$4,
clearButton,
helperText: helperText$4,
helperError: helperError$2,
helperSuccess: helperSuccess$2,
errorMessage: errorMessage$3,
successMessage: successMessage$2,
glow: glow$4
};
const Textarea = forwardRef(({
variant = "default",
size = "md",
error: error2 = false,
success: success2 = false,
loading: loading2 = false,
label: label2,
placeholder: placeholder2,
helperText: helperText2,
errorText,
leftIcon: leftIcon2,
rightIcon: rightIcon2,
glow: glow2 = false,
clearable = false,
onClear,
animate: animate2 = true,
customColor: customColor2,
className,
style,
value: value2,
onChange,
minRows = 3,
maxRows = 10,
autoResize = true,
...props
}, ref) => {
const [isFocused, setIsFocused] = useState(false);
const [hasValue, setHasValue] = useState(Boolean(value2));
const handleChange = (e) => {
setHasValue(Boolean(e.target.value));
onChange == null ? void 0 : onChange(e);
if (autoResize) {
const textarea2 = e.target;
textarea2.style.height = "auto";
const scrollHeight = textarea2.scrollHeight;
const lineHeight = parseInt(getComputedStyle(textarea2).lineHeight);
const minHeight = lineHeight * minRows;
const maxHeight = lineHeight * maxRows;
const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
textarea2.style.height = `${newHeight}px`;
}
};
const handleClear = () => {
setHasValue(false);
onClear == null ? void 0 : onClear();
};
const textareaWrapperClasses = clsx(
styles$F.wrapper,
styles$F[variant],
styles$F[size],
{
[styles$F.focused]: isFocused,
[styles$F.hasValue]: hasValue,
[styles$F.error]: error2,
[styles$F.success]: success2,
[styles$F.loading]: loading2,
[styles$F.glow]: glow2,
[styles$F.withLeftIcon]: leftIcon2,
[styles$F.withRightIcon]: rightIcon2 || clearable || loading2
},
className
);
const customStyles = customColor2 ? {
"--textarea-custom-color": customColor2,
...style
} : style;
return /* @__PURE__ */ jsxs("div", { className: clsx(textareaWrapperClasses, { [styles$F.animate]: animate2 }), style: customStyles, children: [
label2 && /* @__PURE__ */ jsxs("label", { className: styles$F.label, children: [
label2,
props.required && /* @__PURE__ */ jsx("span", { className: styles$F.required, children: "*" })
] }),
/* @__PURE__ */ jsxs("div", { className: styles$F.textareaContainer, children: [
leftIcon2 && /* @__PURE__ */ jsx("span", { className: styles$F.leftIcon, children: leftIcon2 }),
/* @__PURE__ */ jsx(
"textarea",
{
ref,
className: styles$F.textarea,
placeholder: placeholder2,
value: value2,
onChange: handleChange,
onFocus: () => setIsFocused(true),
onBlur: () => setIsFocused(false),
rows: minRows,
...props
}
),
(rightIcon2 || clearable || loading2) && /* @__PURE__ */ jsxs("div", { className: styles$F.rightIcons, children: [
loading2 && /* @__PURE__ */ jsx("span", { className: styles$F.loadingIcon, children: /* @__PURE__ */ jsx(InputIcons.Loader, {}) }),
clearable && hasValue && !loading2 && /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: styles$F.clearButton,
onClick: handleClear,
tabIndex: -1,
"aria-label": "Clear textarea",
children: /* @__PURE__ */ jsx(InputIcons.X, {})
}
),
rightIcon2 && !loading2 && /* @__PURE__ */ jsx("span", { className: styles$F.rightIcon, children: rightIcon2 })
] })
] }),
(helperText2 || errorText) && /* @__PURE__ */ jsx("div", { className: clsx(styles$F.helperText, {
[styles$F.helperError]: error2,
[styles$F.helperSuccess]: success2
}), children: error2 && errorText ? /* @__PURE__ */ jsxs("span", { className: styles$F.errorMessage, children: [
/* @__PURE__ */ jsx(InputIcons.AlertCircle, {}),
errorText
] }) : success2 ? /* @__PURE__ */ jsxs("span", { className: styles$F.successMessage, children: [
/* @__PURE__ */ jsx(InputIcons.Check, {}),
helperText2
] }) : helperText2 })
] });
});
Textarea.displayName = "Textarea";
const wrapper$2 = "_wrapper_d8qw6_3";
const animate$6 = "_animate_d8qw6_17";
const slideIn$1 = "_slideIn_d8qw6_1";
const filled$2 = "_filled_d8qw6_45";
const outline$3 = "_outline_d8qw6_63";
const glass$4 = "_glass_d8qw6_81";
const sm$b = "_sm_d8qw6_103";
const md$b = "_md_d8qw6_117";
const lg$b = "_lg_d8qw6_131";
const label$6 = "_label_d8qw6_147";
const disabled$8 = "_disabled_d8qw6_169";
const labelText = "_labelText_d8qw6_179";
const required$2 = "_required_d8qw6_189";
const labelLeft = "_labelLeft_d8qw6_201";
const checkboxContainer = "_checkboxContainer_d8qw6_211";
const checkbox = "_checkbox_d8qw6_211";
const customCheckbox = "_customCheckbox_d8qw6_251";
const focused$1 = "_focused_d8qw6_289";
const checked = "_checked_d8qw6_299";
const error$a = "_error_d8qw6_309";
const success$8 = "_success_d8qw6_319";
const loading$1 = "_loading_d8qw6_339";
const checkIcon = "_checkIcon_d8qw6_349";
const indeterminateIcon = "_indeterminateIcon_d8qw6_351";
const loadingIcon$1 = "_loadingIcon_d8qw6_369";
const spin$3 = "_spin_d8qw6_1";
const helperText$3 = "_helperText_d8qw6_387";
const helperError$1 = "_helperError_d8qw6_413";
const helperSuccess$1 = "_helperSuccess_d8qw6_421";
const errorMessage$2 = "_errorMessage_d8qw6_429";
const successMessage$1 = "_successMessage_d8qw6_431";
const glow$3 = "_glow_d8qw6_445";
const styles$E = {
wrapper: wrapper$2,
animate: animate$6,
slideIn: slideIn$1,
"default": "_default_d8qw6_27",
filled: filled$2,
outline: outline$3,
glass: glass$4,
sm: sm$b,
md: md$b,
lg: lg$b,
label: label$6,
disabled: disabled$8,
labelText,
required: required$2,
labelLeft,
checkboxContainer,
checkbox,
customCheckbox,
focused: focused$1,
checked,
error: error$a,
success: success$8,
loading: loading$1,
checkIcon,
indeterminateIcon,
loadingIcon: loadingIcon$1,
spin: spin$3,
helperText: helperText$3,
helperError: helperError$1,
helperSuccess: helperSuccess$1,
errorMessage: errorMessage$2,
successMessage: successMessage$1,
glow: glow$3
};
const Checkbox = forwardRef(({
variant = "default",
size = "md",
error: error2 = false,
success: success2 = false,
loading: loading2 = false,
label: label2,
helperText: helperText2,
errorText,
glow: glow2 = false,
animate: animate2 = true,
customColor: customColor2,
className,
style,
checked: checked2,
onChange,
indeterminate = false,
labelPosition = "right",
disabled: disabled2,
...props
}, ref) => {
const [isFocused, setIsFocused] = useState(false);
const handleChange = (e) => {
onChange == null ? void 0 : onChange(e);
};
const checkboxWrapperClasses = clsx(
styles$E.wrapper,
styles$E[variant],
styles$E[size],
{
[styles$E.focused]: isFocused,
[styles$E.checked]: checked2,
[styles$E.indeterminate]: indeterminate,
[styles$E.error]: error2,
[styles$E.success]: success2,
[styles$E.loading]: loading2,
[styles$E.disabled]: disabled2,
[styles$E.glow]: glow2,
[styles$E.labelLeft]: labelPosition === "left"
},
className
);
const customStyles = customColor2 ? {
"--checkbox-custom-color": customColor2,
...style
} : style;
return /* @__PURE__ */ jsxs("div", { className: clsx(checkboxWrapperClasses, { [styles$E.animate]: animate2 }), style: customStyles, children: [
/* @__PURE__ */ jsxs("label", { className: styles$E.label, children: [
label2 && labelPosition === "left" && /* @__PURE__ */ jsxs("span", { className: styles$E.labelText, children: [
label2,
props.required && /* @__PURE__ */ jsx("span", { className: styles$E.required, children: "*" })
] }),
/* @__PURE__ */ jsxs("div", { className: styles$E.checkboxContainer, children: [
/* @__PURE__ */ jsx(
"input",
{
ref,
type: "checkbox",
className: styles$E.checkbox,
checked: checked2,
onChange: handleChange,
onFocus: () => setIsFocused(true),
onBlur: () => setIsFocused(false),
disabled: disabled2 || loading2,
...props
}
),
/* @__PURE__ */ jsxs("div", { className: styles$E.customCheckbox, children: [
loading2 && /* @__PURE__ */ jsx("span", { className: styles$E.loadingIcon, children: /* @__PURE__ */ jsx(InputIcons.Loader, {}) }),
checked2 && !loading2 && !indeterminate && /* @__PURE__ */ jsx("span", { className: styles$E.checkIcon, children: /* @__PURE__ */ jsx(InputIcons.Check, {}) }),
indeterminate && !loading2 && /* @__PURE__ */ jsx("span", { className: styles$E.indeterminateIcon, children: /* @__PURE__ */ jsx(InputIcons.Minus, {}) })
] })
] }),
label2 && labelPosition === "right" && /* @__PURE__ */ jsxs("span", { className: styles$E.labelText, children: [
label2,
props.required && /* @__PURE__ */ jsx("span", { className: styles$E.required, children: "*" })
] })
] }),
(helperText2 || errorText) && /* @__PURE__ */ jsx("div", { className: clsx(styles$E.helperText, {
[styles$E.helperError]: error2,
[styles$E.helperSuccess]: success2
}), children: error2 && errorText ? /* @__PURE__ */ jsxs("span", { className: styles$E.errorMessage, children: [
/* @__PURE__ */ jsx(InputIcons.AlertCircle, {}),
errorText
] }) : success2 ? /* @__PURE__ */ jsxs("span", { className: styles$E.successMessage, children: [
/* @__PURE__ */ jsx(InputIcons.Check, {}),
helperText2
] }) : helperText2 })
] });
});
Checkbox.displayName = "Checkbox";
const wrapper$1 = "_wrapper_13jy5_3";
const animate$5 = "_animate_13jy5_17";
const slideIn = "_slideIn_13jy5_1";
const filled$1 = "_filled_13jy5_49";
const outline$2 = "_outline_13jy5_71";
const glass$3 = "_glass_13jy5_93";
const sm$a = "_sm_13jy5_119";
const md$a = "_md_13jy5_133";
const lg$a = "_lg_13jy5_147";
const label$5 = "_label_13jy5_163";
const required$1 = "_required_13jy5_181";
const fileInputContainer = "_fileInputContainer_13jy5_193";
const focused = "_focused_13jy5_227";
const dragOver = "_dragOver_13jy5_237";
const error$9 = "_error_13jy5_251";
const success$7 = "_success_13jy5_261";
const disabled$7 = "_disabled_13jy5_271";
const loading = "_loading_13jy5_281";
const inputArea = "_inputArea_13jy5_291";
const fileInput = "_fileInput_13jy5_193";
const placeholder = "_placeholder_13jy5_335";
const hasFiles = "_hasFiles_13jy5_359";
const leftIcon = "_leftIcon_13jy5_369";
const rightIcon = "_rightIcon_13jy5_371";
const rightIcons = "_rightIcons_13jy5_397";
const withLeftIcon = "_withLeftIcon_13jy5_413";
const withRightIcon = "_withRightIcon_13jy5_421";
const loadingIcon = "_loadingIcon_13jy5_431";
const spin$2 = "_spin_13jy5_1";
const filePreview = "_filePreview_13jy5_447";
const fileItem = "_fileItem_13jy5_461";
const fileIcon = "_fileIcon_13jy5_491";
const fileInfo = "_fileInfo_13jy5_507";
const fileName = "_fileName_13jy5_521";
const fileSize = "_fileSize_13jy5_539";
const removeButton$1 = "_removeButton_13jy5_549";
const helperText$2 = "_helperText_13jy5_589";
const helperError = "_helperError_13jy5_603";
const helperSuccess = "_helperSuccess_13jy5_611";
const errorMessage$1 = "_errorMessage_13jy5_619";
const successMessage = "_successMessage_13jy5_621";
const glow$2 = "_glow_13jy5_635";
const styles$D = {
wrapper: wrapper$1,
animate: animate$5,
slideIn,
"default": "_default_13jy5_27",
filled: filled$1,
outline: outline$2,
glass: glass$3,
sm: sm$a,
md: md$a,
lg: lg$a,
label: label$5,
required: required$1,
fileInputContainer,
focused,
dragOver,
error: error$9,
success: success$7,
disabled: disabled$7,
loading,
inputArea,
fileInput,
placeholder,
hasFiles,
leftIcon,
rightIcon,
rightIcons,
withLeftIcon,
withRightIcon,
loadingIcon,
spin: spin$2,
filePreview,
fileItem,
fileIcon,
fileInfo,
fileName,
fileSize,
removeButton: removeButton$1,
helperText: helperText$2,
helperError,
helperSuccess,
errorMessage: errorMessage$1,
successMessage,
glow: glow$2
};
const FileInput = forwardRef(({
variant = "default",
size = "md",
error: error2 = false,
success: success2 = false,
loading: loading2 = false,
label: label2,
placeholder: placeholder2 = "Choose files or drag and drop...",
helperText: helperText2,
errorText,
leftIcon: leftIcon2,
rightIcon: rightIcon2,
glow: glow2 = false,
anim