@conatel-sa/react-ui 0.2.4 → 0.2.5

package/dist/forms.mjs

@@ -29,25 +29,6 @@ var PASSWORD_HINT = "M\xEDn. 8 caracteres, may\xFAscula, min\xFAscula, n\xFAmero
 
 // src/components/forms/PasswordInput.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function inputBaseStyle(focused, disabled, error) {
-  return {
-    fontFamily: "var(--font-sans, system-ui)",
-    fontSize: "var(--text-base, 14px)",
-    fontWeight: "var(--weight-regular, 400)",
-    color: "var(--color-text, #1a1a1a)",
-    background: "var(--input-bg, #ffffff)",
-    border: `1.5px solid ${error ? "var(--color-error, #dc2626)" : focused ? "var(--input-border-focus, var(--color-primary, #CC032E))" : "var(--input-border, var(--color-border, #e0e0e0))"}`,
-    borderRadius: "var(--input-radius, var(--radius-md, 6px))",
-    padding: "var(--space-2, 8px) var(--space-3, 12px)",
-    paddingRight: "3rem",
-    outline: "none",
-    transition: "box-shadow var(--duration-fast, .1s) var(--ease-default, ease), border-color var(--duration-fast, .1s) var(--ease-default, ease)",
-    boxShadow: focused ? "var(--focus-ring, 0 0 0 3px rgba(204, 3, 46, 0.12))" : "none",
-    opacity: disabled ? 0.6 : 1,
-    width: "100%",
-    boxSizing: "border-box"
-  };
-}
 function PasswordInput({
   value,
   onChange,
@@ -60,263 +41,148 @@ function PasswordInput({
   ariaLabel,
   showValidation = false,
   id: idProp,
-  inputClassName,
-  className,
+  inputClassName = "form-input",
+  className = "form-group",
   minLength = 8,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  leftIcon = "lock"
 }) {
   const [revealed, setRevealed] = useState(false);
-  const [focused, setFocused] = useState(false);
   const genId = useId();
   const id = idProp ?? genId;
-  const appChrome = showValidation || inputClassName !== void 0 || className !== void 0;
-  const effectiveInputClass = inputClassName ?? (showValidation ? "form-input" : void 0);
-  if (appChrome) {
-    const checks = validatePassword(value);
-    return /* @__PURE__ */ jsxs("div", { className: className ?? "form-group", children: [
-      label ? /* @__PURE__ */ jsx("label", { className: "text-xs block mb-2 font-semibold", htmlFor: id, children: label }) : null,
-      /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: revealed ? "text" : "password",
-            id,
-            "data-testid": dataTestId,
-            value,
-            disabled,
-            onChange: (e) => onChange(e.target.value),
-            placeholder,
-            title: PASSWORD_HINT,
-            className: effectiveInputClass,
-            minLength,
-            required,
-            "aria-label": ariaLabel ?? label ?? "Password",
-            style: { paddingRight: "2.5rem", flex: 1 }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setRevealed((v) => !v),
-            tabIndex: -1,
-            style: {
-              position: "absolute",
-              right: "0.5rem",
-              background: "none",
-              border: "none",
-              padding: "0.25rem",
-              cursor: disabled ? "not-allowed" : "pointer",
-              color: "var(--color-text-muted)",
-              display: "flex",
-              alignItems: "center"
-            },
-            title: revealed ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
-            disabled,
-            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "1.25rem" }, children: revealed ? "visibility_off" : "visibility" })
-          }
-        )
-      ] }),
-      showValidation ? /* @__PURE__ */ jsxs("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-text-secondary)" }, children: [
-        "* ",
-        PASSWORD_HINT
-      ] }) : null,
-      showValidation && value.length > 0 ? /* @__PURE__ */ jsx(
-        "ul",
-        {
-          style: {
-            marginTop: "0.5rem",
-            paddingLeft: "1.25rem",
-            fontSize: "0.75rem",
-            color: "var(--color-text-secondary)"
-          },
-          children: PASSWORD_RULES.map((rule) => /* @__PURE__ */ jsxs(
-            "li",
-            {
-              style: {
-                listStyle: "none",
-                marginLeft: "-1.25rem",
-                marginBottom: "0.25rem",
-                display: "flex",
-                alignItems: "center",
-                gap: "0.35rem"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      color: rule.ok(checks) ? "var(--color-success)" : "var(--color-text-muted)",
-                      fontWeight: rule.ok(checks) ? 600 : 400
-                    },
-                    children: rule.ok(checks) ? "\u2713" : "\u25CB"
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { style: rule.ok(checks) ? { color: "var(--color-success)" } : void 0, children: rule.label })
-              ]
-            },
-            rule.key
-          ))
-        }
-      ) : null,
-      error ? /* @__PURE__ */ jsx("p", { role: "alert", style: { marginTop: "0.35rem", fontSize: "0.8125rem", color: "var(--color-error, #dc2626)" }, children: error }) : hint ? /* @__PURE__ */ jsx("p", { style: { marginTop: "0.35rem", fontSize: "0.8125rem", color: "var(--color-text-muted, #757578)" }, children: hint }) : null
-    ] });
-  }
-  const inputStyle = inputBaseStyle(focused, disabled, Boolean(error));
-  const buttonStyle = {
-    position: "absolute",
-    right: "var(--space-2, 8px)",
-    top: "50%",
-    transform: "translateY(-50%)",
-    background: "transparent",
-    border: "none",
-    cursor: disabled ? "not-allowed" : "pointer",
-    padding: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "var(--color-text-muted, #6b6b6b)",
-    opacity: disabled ? 0.6 : 1
-  };
-  const wrapStyle = {
-    position: "relative"
-  };
-  const labelStyle = {
-    fontFamily: "var(--font-sans, system-ui)",
-    fontSize: "var(--text-sm, 13px)",
-    fontWeight: "var(--weight-medium, 500)",
-    color: "var(--color-text, #1a1a1a)",
-    marginBottom: "var(--space-1, .25rem)",
-    display: "flex",
-    gap: "6px",
-    alignItems: "baseline"
-  };
-  const metaStyle = {
-    fontFamily: "var(--font-sans, system-ui)",
-    fontSize: "var(--text-sm, 13px)",
-    margin: "var(--space-1, .25rem) 0 0",
-    lineHeight: 1.2,
-    color: error ? "var(--color-error, #dc2626)" : "var(--color-text-muted, #757578)"
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", width: "100%" }, children: [
-    label ? /* @__PURE__ */ jsxs("label", { htmlFor: id, style: labelStyle, children: [
+  const checks = validatePassword(value);
+  const wrapClass = `${inputClassName} input-password-wrap`.trim();
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    label ? /* @__PURE__ */ jsxs("label", { className: "form-label-app", htmlFor: id, children: [
       label,
-      required ? /* @__PURE__ */ jsxs("span", { style: { color: "var(--color-error, #dc2626)" }, "aria-hidden": true, children: [
+      required ? /* @__PURE__ */ jsxs("span", { className: "required-mark", "aria-hidden": true, children: [
         " ",
         "*"
       ] }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxs("div", { style: wrapStyle, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id,
-          type: revealed ? "text" : "password",
-          value,
-          disabled,
-          onChange: (e) => onChange(e.target.value),
-          placeholder,
-          "aria-label": ariaLabel ?? label ?? "Password",
-          onFocus: () => setFocused(true),
-          onBlur: () => setFocused(false),
-          style: inputStyle,
-          "data-testid": dataTestId
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          style: buttonStyle,
-          disabled,
-          "aria-label": revealed ? "Ocultar password" : "Mostrar password",
-          onClick: () => setRevealed((v) => !v),
-          children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: wrapClass,
+        style: {
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          padding: "0.75rem 2.5rem 0.75rem 3rem"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
             "span",
             {
               className: "material-symbols-outlined",
-              style: { fontSize: "1.1rem", lineHeight: 1 },
-              "aria-hidden": "true",
-              children: revealed ? "visibility_off" : "visibility"
+              style: {
+                position: "absolute",
+                left: "1rem",
+                color: "var(--color-text-muted)",
+                fontSize: "1.25rem",
+                pointerEvents: "none"
+              },
+              "aria-hidden": true,
+              children: leftIcon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: revealed ? "text" : "password",
+              id,
+              "data-testid": dataTestId,
+              value,
+              disabled,
+              onChange: (e) => onChange(e.target.value),
+              placeholder,
+              title: PASSWORD_HINT,
+              minLength,
+              required,
+              "aria-label": ariaLabel ?? label ?? "Password",
+              style: {
+                border: "none",
+                background: "transparent",
+                flex: 1,
+                minWidth: 0,
+                padding: 0,
+                fontSize: "inherit",
+                outline: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setRevealed((v) => !v),
+              tabIndex: -1,
+              title: revealed ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
+              disabled,
+              style: {
+                position: "absolute",
+                right: "0.5rem",
+                background: "none",
+                border: "none",
+                padding: "0.25rem",
+                cursor: disabled ? "not-allowed" : "pointer",
+                color: "var(--color-text-muted)"
+              },
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "1.25rem" }, children: revealed ? "visibility_off" : "visibility" })
             }
           )
-        }
-      )
-    ] }),
-    error ? /* @__PURE__ */ jsx("p", { role: "alert", style: metaStyle, children: error }) : hint ? /* @__PURE__ */ jsx("p", { style: metaStyle, children: hint }) : null
+        ]
+      }
+    ),
+    showValidation ? /* @__PURE__ */ jsxs("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-text-muted)" }, children: [
+      "* ",
+      PASSWORD_HINT
+    ] }) : null,
+    showValidation && value.length > 0 ? /* @__PURE__ */ jsx(
+      "ul",
+      {
+        style: {
+          marginTop: "0.5rem",
+          paddingLeft: "1.25rem",
+          fontSize: "0.75rem",
+          color: "var(--color-text-muted)"
+        },
+        children: PASSWORD_RULES.map((rule) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            style: {
+              listStyle: "none",
+              marginLeft: "-1.25rem",
+              marginBottom: "0.25rem",
+              display: "flex",
+              alignItems: "center",
+              gap: "0.35rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    color: rule.ok(checks) ? "var(--color-success)" : "var(--color-text-muted)",
+                    fontWeight: rule.ok(checks) ? 600 : 400
+                  },
+                  children: rule.ok(checks) ? "\u2713" : "\u25CB"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: rule.ok(checks) ? { color: "var(--color-success)" } : void 0, children: rule.label })
+            ]
+          },
+          rule.key
+        ))
+      }
+    ) : null,
+    error ? /* @__PURE__ */ jsx("p", { role: "alert", style: { marginTop: "0.35rem", fontSize: "0.8125rem", color: "var(--color-error)" }, children: error }) : hint ? /* @__PURE__ */ jsx("p", { style: { marginTop: "0.35rem", fontSize: "0.8125rem", color: "var(--color-text-muted)" }, children: hint }) : null
   ] });
 }
 
 // src/components/forms/MultiSelectDropdown.tsx
-import { useEffect, useId as useId2, useMemo, useRef, useState as useState2 } from "react";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function baseControlStyle(disabled, focused, error) {
-  return {
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "var(--space-2, 8px)",
-    padding: "var(--space-2, 8px) var(--space-3, 12px)",
-    borderRadius: "var(--input-radius, var(--radius-md, 6px))",
-    border: `1.5px solid ${error ? "var(--color-error, #dc2626)" : focused ? "var(--input-border-focus, var(--color-primary, #CC032E))" : "var(--input-border, var(--color-border, #e0e0e0))"}`,
-    background: "var(--input-bg, #ffffff)",
-    color: "var(--color-text, #1a1a1a)",
-    cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.6 : 1,
-    boxShadow: focused ? "var(--focus-ring, 0 0 0 3px rgba(204, 3, 46, 0.12))" : "none",
-    outline: "none",
-    userSelect: "none"
-  };
-}
-var appButtonStyle = (disabled) => ({
-  width: "100%",
-  textAlign: "left",
-  appearance: "none",
-  cursor: disabled ? "not-allowed" : "pointer",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: "0.5rem"
-});
-function popoverStyle() {
-  return {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: "calc(100% + 6px)",
-    zIndex: "var(--z-dropdown, 100)",
-    background: "var(--color-surface, #ffffff)",
-    border: "1.5px solid var(--color-border, #e0e0e0)",
-    borderRadius: "var(--radius-md, 6px)",
-    boxShadow: "var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,.1))",
-    padding: "var(--space-2, 8px)",
-    maxHeight: "240px",
-    overflowY: "auto"
-  };
-}
-function itemRowStyle(active) {
-  return {
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-start",
-    gap: "var(--space-2, 8px)",
-    padding: "var(--space-1, .25rem) var(--space-2, 8px)",
-    borderRadius: "var(--radius-sm, 4px)",
-    cursor: "pointer",
-    background: active ? "var(--color-primary-light, rgba(204, 3, 46, 0.08))" : "transparent",
-    color: active ? "var(--color-primary, #CC032E)" : "var(--color-text, #1a1a1a)"
-  };
-}
-var defaultLabelStyle = {
-  fontFamily: "var(--font-sans, system-ui)",
-  fontSize: "var(--text-sm, 13px)",
-  fontWeight: "var(--weight-medium, 500)",
-  color: "var(--color-text, #1a1a1a)",
-  marginBottom: "var(--space-1, .25rem)",
-  display: "block"
-};
+import { useEffect, useRef, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function MultiSelectDropdown({
   label,
   options,
@@ -329,27 +195,16 @@ function MultiSelectDropdown({
   allowAllNone = true,
   allLabel = "Todos",
   noneLabel = "Ninguno",
-  maxLabels = 2,
-  labelStyle,
   style,
-  buttonClassName
+  buttonClassName = "form-select",
+  className = "form-group"
 }) {
   const [open, setOpen] = useState2(false);
-  const [focused, setFocused] = useState2(false);
-  const id = useId2();
   const rootRef = useRef(null);
   const selectedValues = value ?? selected ?? [];
   const effectivePlaceholder = emptyLabel ?? placeholder;
-  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
-  const selectedLabels = useMemo(() => {
-    const byValue = new Map(options.map((o) => [o.value, o.label]));
-    return selectedValues.map((v) => byValue.get(v) ?? v);
-  }, [options, selectedValues]);
-  const allValues = useMemo(() => options.map((o) => o.value), [options]);
-  const isAllSelected = useMemo(
-    () => selectedValues.length > 0 && selectedValues.length === allValues.length,
-    [selectedValues, allValues]
-  );
+  const isAllSelected = options.length > 0 && selectedValues.length === options.length;
+  const isNoneSelected = selectedValues.length === 0;
   useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
@@ -364,154 +219,366 @@ function MultiSelectDropdown({
   }, [open]);
   const toggleValue = (v) => {
     if (disabled) return;
-    const next = selectedSet.has(v) ? selectedValues.filter((x) => x !== v) : [...selectedValues, v];
-    onChange(next);
-  };
-  const applyAllNone = (mode) => {
-    if (disabled) return;
-    if (mode === "all") onChange(allValues);
-    else onChange([]);
+    if (selectedValues.includes(v)) onChange(selectedValues.filter((x) => x !== v));
+    else onChange([...selectedValues, v]);
   };
-  const summary = (() => {
-    if (selectedValues.length === 0) return effectivePlaceholder;
-    if (isAllSelected) return allLabel;
-    const shown = selectedLabels.slice(0, Math.max(1, maxLabels));
-    const extra = selectedLabels.length - shown.length;
-    return extra > 0 ? `${shown.join(", ")} +${extra} mas` : shown.join(", ");
-  })();
-  const checkboxStyle = {
-    accentColor: "var(--color-primary, #CC032E)",
-    margin: 0
-  };
-  const chevron = open ? "expand_less" : "expand_more";
-  const triggerStyle = buttonClassName ? appButtonStyle(disabled) : baseControlStyle(disabled, focused);
-  const mergedLabelStyle = label ? { ...defaultLabelStyle, ...labelStyle } : void 0;
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: { display: "flex", flexDirection: "column", width: "100%", position: "relative", ...style },
-      ref: rootRef,
-      children: [
-        label ? /* @__PURE__ */ jsx2("label", { htmlFor: id, style: mergedLabelStyle, children: label }) : null,
-        /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsxs2(
-            "button",
+  const buttonLabel = selectedValues.length === 0 ? effectivePlaceholder : selectedValues.map((v) => options.find((o) => o.value === v)?.label ?? v).join(", ");
+  return /* @__PURE__ */ jsxs2("div", { ref: rootRef, className, style: { position: "relative", ...style ?? {} }, children: [
+    label ? /* @__PURE__ */ jsx2("label", { className: "form-label-dropdown", children: label }) : null,
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: buttonClassName,
+        onClick: () => {
+          if (disabled) return;
+          setOpen((o) => !o);
+        },
+        disabled,
+        style: {
+          width: "100%",
+          textAlign: "left",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "0.5rem",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.6 : 1
+        },
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "span",
             {
-              id,
-              type: "button",
-              className: buttonClassName,
-              disabled,
-              style: triggerStyle,
-              onClick: () => setOpen((v) => !v),
-              onFocus: () => setFocused(true),
-              onBlur: () => setFocused(false),
-              "aria-haspopup": "listbox",
-              "aria-expanded": open,
+              style: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                color: selectedValues.length === 0 ? "var(--color-text-muted)" : "var(--color-text-primary)"
+              },
+              children: buttonLabel
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "material-symbols-outlined", style: { fontSize: "1rem", color: "var(--color-text-secondary)", flexShrink: 0 }, children: open ? "expand_less" : "expand_more" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "form-dropdown-panel",
+        style: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          minWidth: "100%",
+          maxHeight: "220px",
+          overflowY: "auto",
+          border: "1px solid var(--color-border)",
+          borderRadius: "var(--radius-md)",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+          marginTop: "2px"
+        },
+        children: [
+          allowAllNone && options.length > 0 && /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "0.35rem", padding: "0.35rem 0.6rem", borderBottom: "1px solid var(--color-border)", fontSize: "0.75rem" }, children: [
+            /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                onClick: () => onChange(options.map((o) => o.value)),
+                style: {
+                  background: "none",
+                  border: "none",
+                  color: isAllSelected ? "var(--color-success)" : "var(--color-text-secondary)",
+                  cursor: "pointer",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "0.2rem",
+                  padding: 0,
+                  fontWeight: isAllSelected ? 600 : 500
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("span", { className: "material-symbols-outlined", style: { fontSize: "0.9rem" }, children: "check" }),
+                  /* @__PURE__ */ jsx2("span", { children: allLabel })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2("span", { style: { color: "var(--color-text-muted)" }, children: "|" }),
+            /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                onClick: () => onChange([]),
+                style: {
+                  background: "none",
+                  border: "none",
+                  color: isNoneSelected ? "var(--color-danger)" : "var(--color-text-secondary)",
+                  cursor: "pointer",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "0.2rem",
+                  padding: 0,
+                  fontWeight: isNoneSelected ? 600 : 500
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("span", { className: "material-symbols-outlined", style: { fontSize: "0.9rem" }, children: "close" }),
+                  /* @__PURE__ */ jsx2("span", { children: noneLabel })
+                ]
+              }
+            )
+          ] }),
+          options.length === 0 ? /* @__PURE__ */ jsx2("div", { style: { padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-text-muted)" }, children: "Sin opciones" }) : null,
+          options.map((opt) => /* @__PURE__ */ jsxs2(
+            "label",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                padding: "0.4rem 0.75rem",
+                cursor: "pointer",
+                fontSize: "0.875rem",
+                color: selectedValues.includes(opt.value) ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+                background: selectedValues.includes(opt.value) ? "var(--color-accent-bg)" : "transparent"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = selectedValues.includes(opt.value) ? "var(--color-accent-bg)" : "var(--color-bg-hover)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = selectedValues.includes(opt.value) ? "var(--color-accent-bg)" : "transparent";
+              },
               children: [
-                /* @__PURE__ */ jsx2("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: summary }),
                 /* @__PURE__ */ jsx2(
-                  "span",
+                  "input",
                   {
-                    className: "material-symbols-outlined",
-                    style: { fontSize: "1.1rem", color: "var(--color-text-muted, #6b6b6b)", opacity: buttonClassName ? 0.7 : void 0 },
-                    "aria-hidden": "true",
-                    children: chevron
+                    type: "checkbox",
+                    checked: selectedValues.includes(opt.value),
+                    onChange: () => toggleValue(opt.value),
+                    style: { width: "auto", margin: 0, accentColor: "var(--color-primary)" }
                   }
-                )
+                ),
+                opt.label
               ]
-            }
-          ),
-          open ? /* @__PURE__ */ jsx2("div", { style: popoverStyle(), role: "listbox", "aria-multiselectable": "true", children: options.length === 0 ? /* @__PURE__ */ jsx2(
-            "div",
+            },
+            opt.value
+          ))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/forms/SingleSelectDropdown.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SingleSelectDropdown({
+  options,
+  value,
+  selected,
+  onChange,
+  placeholder = "Seleccionar",
+  emptyValue = "",
+  allowEmptyOption = true,
+  disabled,
+  label,
+  style,
+  buttonClassName = "form-select",
+  dataTestId,
+  title,
+  ariaLabel,
+  buttonStyle,
+  className = "form-group"
+}) {
+  const [open, setOpen] = useState3(false);
+  const rootRef = useRef2(null);
+  const currentValue = value ?? selected ?? emptyValue;
+  const selectedOption = options.find((o) => o.value === currentValue);
+  const buttonLabel = selectedOption?.label ?? placeholder;
+  const renderedOptions = allowEmptyOption ? [{ value: emptyValue, label: placeholder }, ...options] : options;
+  useEffect2(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      const el = rootRef.current;
+      if (!el) return;
+      const target = e.target;
+      if (target && el.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+  return /* @__PURE__ */ jsxs3("div", { ref: rootRef, className, style: { position: "relative", ...style ?? {} }, children: [
+    label ? /* @__PURE__ */ jsx3("label", { className: "form-label-dropdown", children: label }) : null,
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        className: buttonClassName,
+        "data-testid": dataTestId,
+        title,
+        "aria-label": ariaLabel,
+        onClick: () => {
+          if (disabled) return;
+          setOpen((o) => !o);
+        },
+        disabled,
+        style: {
+          width: "100%",
+          textAlign: "left",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "0.5rem",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.6 : 1,
+          ...buttonStyle ?? {}
+        },
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx3(
+            "span",
             {
               style: {
-                padding: "0.75rem",
-                fontSize: "0.875rem",
-                color: "var(--color-text-muted, #6b6b6b)"
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                color: currentValue === emptyValue ? "var(--color-text-muted)" : "var(--color-text-primary)"
               },
-              children: effectivePlaceholder
+              children: buttonLabel
             }
-          ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-            allowAllNone ? /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "var(--space-2, 8px)", marginBottom: "var(--space-2, 8px)" }, children: [
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  type: "button",
-                  style: {
-                    padding: "var(--space-1, .25rem) var(--space-2, 8px)",
-                    borderRadius: "var(--radius-md, 6px)",
-                    border: "1.5px solid var(--color-border, #e0e0e0)",
-                    background: "var(--color-neutral-100, #f5f5f5)",
-                    cursor: disabled ? "not-allowed" : "pointer",
-                    color: "var(--color-text, #1a1a1a)",
-                    fontFamily: "var(--font-sans, system-ui)",
-                    fontSize: "var(--text-sm, 13px)",
-                    fontWeight: "var(--weight-medium, 500)"
-                  },
-                  onClick: () => applyAllNone("all"),
-                  disabled,
-                  children: allLabel
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  type: "button",
-                  style: {
-                    padding: "var(--space-1, .25rem) var(--space-2, 8px)",
-                    borderRadius: "var(--radius-md, 6px)",
-                    border: "1.5px solid var(--color-border, #e0e0e0)",
-                    background: "var(--color-neutral-100, #f5f5f5)",
-                    cursor: disabled ? "not-allowed" : "pointer",
-                    color: "var(--color-text, #1a1a1a)",
-                    fontFamily: "var(--font-sans, system-ui)",
-                    fontSize: "var(--text-sm, 13px)",
-                    fontWeight: "var(--weight-medium, 500)"
-                  },
-                  onClick: () => applyAllNone("none"),
-                  disabled,
-                  children: noneLabel
-                }
-              )
-            ] }) : null,
-            options.map((opt) => {
-              const checked = selectedSet.has(opt.value);
-              return /* @__PURE__ */ jsxs2(
-                "div",
-                {
-                  style: itemRowStyle(checked),
-                  role: "option",
-                  "aria-selected": checked,
-                  onClick: () => toggleValue(opt.value),
-                  children: [
-                    /* @__PURE__ */ jsx2("input", { type: "checkbox", checked, readOnly: true, style: checkboxStyle, "aria-label": opt.label }),
-                    /* @__PURE__ */ jsx2(
-                      "span",
-                      {
-                        style: {
-                          fontFamily: "var(--font-sans, system-ui)",
-                          fontSize: "var(--text-sm, 13px)",
-                          fontWeight: "var(--weight-medium, 500)"
-                        },
-                        children: opt.label
-                      }
-                    )
-                  ]
+          ),
+          /* @__PURE__ */ jsx3("span", { className: "material-symbols-outlined", style: { fontSize: "1rem", color: "var(--color-text-secondary)", flexShrink: 0 }, children: open ? "expand_less" : "expand_more" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "form-dropdown-panel",
+        style: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          minWidth: "100%",
+          maxHeight: "220px",
+          overflowY: "auto",
+          border: "1px solid var(--color-border)",
+          borderRadius: "var(--radius-md)",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+          marginTop: "2px"
+        },
+        role: "listbox",
+        children: [
+          renderedOptions.length === 0 ? /* @__PURE__ */ jsx3("div", { style: { padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-text-muted)" }, children: "Sin opciones" }) : null,
+          renderedOptions.map((opt) => {
+            const isSelected = opt.value === currentValue;
+            return /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                role: "option",
+                "aria-selected": isSelected,
+                onClick: () => {
+                  onChange(opt.value);
+                  setOpen(false);
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = isSelected ? "var(--color-accent-bg)" : "var(--color-bg-hover)";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = isSelected ? "var(--color-accent-bg)" : "transparent";
                 },
-                opt.value
-              );
-            })
-          ] }) }) : null
-        ] })
-      ]
-    }
-  );
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.5rem",
+                  padding: "0.4rem 0.75rem",
+                  cursor: "pointer",
+                  fontSize: "0.875rem",
+                  color: isSelected ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+                  background: isSelected ? "var(--color-accent-bg)" : "transparent",
+                  userSelect: "none"
+                },
+                children: [
+                  isSelected ? /* @__PURE__ */ jsx3("span", { className: "material-symbols-outlined", style: { fontSize: "0.95rem" }, children: "check" }) : null,
+                  opt.label
+                ]
+              },
+              opt.value
+            );
+          })
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/components/forms/EmailInput.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function EmailInput({
+  value,
+  onChange,
+  placeholder = "correo@ejemplo.com",
+  label = "Correo electr\xF3nico",
+  hint,
+  error,
+  disabled,
+  required,
+  ariaLabel,
+  id: idProp,
+  leftIcon = "mail",
+  className = "form-group",
+  inputClassName = "form-input",
+  autoComplete = "email",
+  "data-testid": dataTestId
+}) {
+  const genId = useId2();
+  const id = idProp ?? genId;
+  return /* @__PURE__ */ jsxs4("div", { className, children: [
+    label ? /* @__PURE__ */ jsxs4("label", { className: "form-label-app", htmlFor: id, children: [
+      label,
+      required ? /* @__PURE__ */ jsxs4("span", { className: "required-mark", "aria-hidden": true, children: [
+        " ",
+        "*"
+      ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs4("div", { className: "input-with-icon", children: [
+      /* @__PURE__ */ jsx4("span", { className: "material-symbols-outlined", "aria-hidden": true, children: leftIcon }),
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          id,
+          "data-testid": dataTestId,
+          type: "email",
+          value,
+          onChange: (e) => onChange(e.target.value),
+          placeholder,
+          className: inputClassName,
+          required,
+          disabled,
+          autoComplete,
+          "aria-label": ariaLabel ?? label ?? "Email"
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx4("p", { role: "alert", style: { marginTop: "0.35rem", fontSize: "0.8125rem", color: "var(--color-error)" }, children: error }) : hint ? /* @__PURE__ */ jsx4("p", { style: { marginTop: "0.35rem", fontSize: "0.8125rem", color: "var(--color-text-muted)" }, children: hint }) : null
+  ] });
 }
 export {
+  EmailInput,
   MultiSelectDropdown,
   PASSWORD_HINT,
   PASSWORD_RULES,
   PasswordInput,
+  SingleSelectDropdown,
   getPasswordValid,
   isPasswordValid,
   validatePassword