@conatel-sa/react-ui 0.2.3 → 0.2.5

package/dist/forms.umd.js

@@ -0,0 +1,626 @@
+"use strict";
+var ReactLibraryForms = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/forms-entry.ts
+  var forms_entry_exports = {};
+  __export(forms_entry_exports, {
+    EmailInput: () => EmailInput,
+    MultiSelectDropdown: () => MultiSelectDropdown,
+    PASSWORD_HINT: () => PASSWORD_HINT,
+    PASSWORD_RULES: () => PASSWORD_RULES,
+    PasswordInput: () => PasswordInput,
+    SingleSelectDropdown: () => SingleSelectDropdown,
+    getPasswordValid: () => getPasswordValid,
+    isPasswordValid: () => isPasswordValid,
+    validatePassword: () => validatePassword
+  });
+
+  // tools/react-shim.mjs
+  var R = typeof window !== "undefined" && window.React ? window.React : {};
+  var react_shim_default = R;
+  var {
+    useContext,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useState,
+    useRef,
+    useCallback,
+    useId,
+    createContext,
+    Fragment
+  } = R;
+
+  // 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.";
+
+  // tools/jsx-runtime-shim.mjs
+  function jsx(type, props, key) {
+    const p = key != null ? { ...props, key } : props;
+    return react_shim_default.createElement(type, p);
+  }
+  function jsxs(type, props, key) {
+    return jsx(type, props, key);
+  }
+  var Fragment2 = react_shim_default.Fragment;
+
+  // src/components/forms/PasswordInput.tsx
+  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
+  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] = useState(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__ */ jsxs("div", { ref: rootRef, className, style: { position: "relative", ...style ?? {} }, children: [
+      label ? /* @__PURE__ */ jsx("label", { className: "form-label-dropdown", children: label }) : null,
+      /* @__PURE__ */ jsxs(
+        "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__ */ jsx(
+              "span",
+              {
+                style: {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  color: selectedValues.length === 0 ? "var(--color-text-muted)" : "var(--color-text-primary)"
+                },
+                children: buttonLabel
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "1rem", color: "var(--color-text-secondary)", flexShrink: 0 }, children: open ? "expand_less" : "expand_more" })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxs(
+        "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__ */ jsxs("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__ */ jsxs(
+                "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__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "0.9rem" }, children: "check" }),
+                    /* @__PURE__ */ jsx("span", { children: allLabel })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--color-text-muted)" }, children: "|" }),
+              /* @__PURE__ */ jsxs(
+                "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__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "0.9rem" }, children: "close" }),
+                    /* @__PURE__ */ jsx("span", { children: noneLabel })
+                  ]
+                }
+              )
+            ] }),
+            options.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "0.5rem 0.75rem", fontSize: "0.875rem", color: "var(--color-text-muted)" }, children: "Sin opciones" }) : null,
+            options.map((opt) => /* @__PURE__ */ jsxs(
+              "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__ */ jsx(
+                    "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
+  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] = useState(false);
+    const rootRef = useRef(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;
+    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]);
+    return /* @__PURE__ */ jsxs("div", { ref: rootRef, className, style: { position: "relative", ...style ?? {} }, children: [
+      label ? /* @__PURE__ */ jsx("label", { className: "form-label-dropdown", children: label }) : null,
+      /* @__PURE__ */ jsxs(
+        "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__ */ jsx(
+              "span",
+              {
+                style: {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  color: currentValue === emptyValue ? "var(--color-text-muted)" : "var(--color-text-primary)"
+                },
+                children: buttonLabel
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "1rem", color: "var(--color-text-secondary)", flexShrink: 0 }, children: open ? "expand_less" : "expand_more" })
+          ]
+        }
+      ),
+      open ? /* @__PURE__ */ jsxs(
+        "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__ */ jsx("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__ */ jsxs(
+                "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__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "0.95rem" }, children: "check" }) : null,
+                    opt.label
+                  ]
+                },
+                opt.value
+              );
+            })
+          ]
+        }
+      ) : null
+    ] });
+  }
+
+  // src/components/forms/EmailInput.tsx
+  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 = useId();
+    const id = idProp ?? genId;
+    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: "input-with-icon", children: [
+        /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": true, children: leftIcon }),
+        /* @__PURE__ */ jsx(
+          "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__ */ 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
+    ] });
+  }
+  return __toCommonJS(forms_entry_exports);
+})();

package/dist/icons.d.ts

@@ -0,0 +1,50 @@
+import type { ComponentType, Context, CSSProperties, ReactNode } from 'react';
+
+export type IconSize = 'sm' | 'md' | 'lg' | number;
+
+export interface IconContextValue {
+  fontHref: string;
+  injectStylesheet: boolean;
+  defaultSize: IconSize;
+  className?: string;
+}
+
+export interface IconProps {
+  name: string;
+  size?: IconSize;
+  fill?: 0 | 1;
+  className?: string;
+  style?: CSSProperties;
+  'aria-label'?: string;
+}
+
+export interface LucideIconProps {
+  as: ComponentType<{
+    className?: string;
+    size?: number | string;
+    strokeWidth?: number;
+    'aria-hidden'?: boolean;
+    'aria-label'?: string;
+  }>;
+  size?: IconSize;
+  className?: string;
+  strokeWidth?: number;
+  'aria-label'?: string;
+}
+
+export interface IconProviderProps {
+  children: ReactNode;
+  fontHref?: string;
+  injectStylesheet?: boolean;
+  defaultSize?: IconContextValue['defaultSize'];
+  className?: string;
+}
+
+export declare const DEFAULT_FONT_HREF: string;
+export declare const defaultIconContext: IconContextValue;
+export declare const IconContext: Context<IconContextValue>;
+
+export declare function IconProvider(props: IconProviderProps): JSX.Element;
+export declare function Icon(props: IconProps): JSX.Element;
+export declare function LucideIcon(props: LucideIconProps): JSX.Element;
+export declare function useIconContext(): IconContextValue;