@conatel-sa/react-ui 0.2.3 → 0.2.4

package/dist/forms.mjs

@@ -0,0 +1,518 @@
+// 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 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,
+  placeholder = "Contrase\xF1a",
+  label,
+  hint,
+  error,
+  disabled,
+  required,
+  ariaLabel,
+  showValidation = false,
+  id: idProp,
+  inputClassName,
+  className,
+  minLength = 8,
+  "data-testid": dataTestId
+}) {
+  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: [
+      label,
+      required ? /* @__PURE__ */ jsxs("span", { style: { color: "var(--color-error, #dc2626)" }, "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(
+            "span",
+            {
+              className: "material-symbols-outlined",
+              style: { fontSize: "1.1rem", lineHeight: 1 },
+              "aria-hidden": "true",
+              children: revealed ? "visibility_off" : "visibility"
+            }
+          )
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx("p", { role: "alert", style: metaStyle, children: error }) : hint ? /* @__PURE__ */ jsx("p", { style: metaStyle, 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"
+};
+function MultiSelectDropdown({
+  label,
+  options,
+  value,
+  selected,
+  onChange,
+  placeholder = "Seleccionar\u2026",
+  emptyLabel,
+  disabled,
+  allowAllNone = true,
+  allLabel = "Todos",
+  noneLabel = "Ninguno",
+  maxLabels = 2,
+  labelStyle,
+  style,
+  buttonClassName
+}) {
+  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]
+  );
+  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;
+    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([]);
+  };
+  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",
+            {
+              id,
+              type: "button",
+              className: buttonClassName,
+              disabled,
+              style: triggerStyle,
+              onClick: () => setOpen((v) => !v),
+              onFocus: () => setFocused(true),
+              onBlur: () => setFocused(false),
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              children: [
+                /* @__PURE__ */ jsx2("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: summary }),
+                /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    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
+                  }
+                )
+              ]
+            }
+          ),
+          open ? /* @__PURE__ */ jsx2("div", { style: popoverStyle(), role: "listbox", "aria-multiselectable": "true", children: options.length === 0 ? /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                padding: "0.75rem",
+                fontSize: "0.875rem",
+                color: "var(--color-text-muted, #6b6b6b)"
+              },
+              children: effectivePlaceholder
+            }
+          ) : /* @__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
+                      }
+                    )
+                  ]
+                },
+                opt.value
+              );
+            })
+          ] }) }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MultiSelectDropdown,
+  PASSWORD_HINT,
+  PASSWORD_RULES,
+  PasswordInput,
+  getPasswordValid,
+  isPasswordValid,
+  validatePassword
+};