@conatel-sa/react-ui 0.2.3 → 0.2.5

package/dist/forms.mjs

@@ -0,0 +1,585 @@
+// src/components/forms/PasswordInput.tsx
+import { useId, useState } from "react";
+
+// src/components/forms/passwordValidation.ts
+var SPECIAL_REGEX = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~`]/;
+function validatePassword(password) {
+  return {
+    minLength: password.length >= 8,
+    hasLower: /[a-z]/.test(password),
+    hasUpper: /[A-Z]/.test(password),
+    hasDigit: /[0-9]/.test(password),
+    hasSpecial: SPECIAL_REGEX.test(password)
+  };
+}
+function isPasswordValid(checks) {
+  return checks.minLength && checks.hasLower && checks.hasUpper && checks.hasDigit && checks.hasSpecial;
+}
+function getPasswordValid(password) {
+  return isPasswordValid(validatePassword(password));
+}
+var PASSWORD_RULES = [
+  { key: "minLength", label: "M\xEDnimo 8 caracteres", ok: (c) => c.minLength },
+  { key: "hasLower", label: "Al menos una min\xFAscula", ok: (c) => c.hasLower },
+  { key: "hasUpper", label: "Al menos una may\xFAscula", ok: (c) => c.hasUpper },
+  { key: "hasDigit", label: "Al menos un n\xFAmero", ok: (c) => c.hasDigit },
+  { key: "hasSpecial", label: "Al menos un car\xE1cter especial (!@#$%^&* etc.)", ok: (c) => c.hasSpecial }
+];
+var PASSWORD_HINT = "M\xEDn. 8 caracteres, may\xFAscula, min\xFAscula, n\xFAmero y un car\xE1cter especial.";
+
+// src/components/forms/PasswordInput.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PasswordInput({
+  value,
+  onChange,
+  placeholder = "Contrase\xF1a",
+  label,
+  hint,
+  error,
+  disabled,
+  required,
+  ariaLabel,
+  showValidation = false,
+  id: idProp,
+  inputClassName = "form-input",
+  className = "form-group",
+  minLength = 8,
+  "data-testid": dataTestId,
+  leftIcon = "lock"
+}) {
+  const [revealed, setRevealed] = useState(false);
+  const genId = useId();
+  const id = idProp ?? genId;
+  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", { className: "required-mark", "aria-hidden": true, children: [
+        " ",
+        "*"
+      ] }) : null
+    ] }) : null,
+    /* @__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: {
+                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" })
+            }
+          )
+        ]
+      }
+    ),
+    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, useRef, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function MultiSelectDropdown({
+  label,
+  options,
+  value,
+  selected,
+  onChange,
+  placeholder = "Seleccionar\u2026",
+  emptyLabel,
+  disabled,
+  allowAllNone = true,
+  allLabel = "Todos",
+  noneLabel = "Ninguno",
+  style,
+  buttonClassName = "form-select",
+  className = "form-group"
+}) {
+  const [open, setOpen] = useState2(false);
+  const rootRef = useRef(null);
+  const selectedValues = value ?? selected ?? [];
+  const effectivePlaceholder = emptyLabel ?? placeholder;
+  const isAllSelected = options.length > 0 && selectedValues.length === options.length;
+  const isNoneSelected = selectedValues.length === 0;
+  useEffect(() => {
+    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]);
+  const toggleValue = (v) => {
+    if (disabled) return;
+    if (selectedValues.includes(v)) onChange(selectedValues.filter((x) => x !== v));
+    else onChange([...selectedValues, v]);
+  };
+  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",
+            {
+              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(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: selectedValues.includes(opt.value),
+                    onChange: () => toggleValue(opt.value),
+                    style: { width: "auto", margin: 0, accentColor: "var(--color-primary)" }
+                  }
+                ),
+                opt.label
+              ]
+            },
+            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: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                color: currentValue === emptyValue ? "var(--color-text-muted)" : "var(--color-text-primary)"
+              },
+              children: buttonLabel
+            }
+          ),
+          /* @__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";
+                },
+                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
+};