@conatel-sa/react-ui 0.2.2 → 0.2.4

package/dist/forms.umd.js

@@ -0,0 +1,562 @@
+"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, {
+    MultiSelectDropdown: () => MultiSelectDropdown,
+    PASSWORD_HINT: () => PASSWORD_HINT,
+    PASSWORD_RULES: () => PASSWORD_RULES,
+    PasswordInput: () => PasswordInput,
+    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,
+    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 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
+  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] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const id = useId();
+    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__ */ jsxs(
+      "div",
+      {
+        style: { display: "flex", flexDirection: "column", width: "100%", position: "relative", ...style },
+        ref: rootRef,
+        children: [
+          label ? /* @__PURE__ */ jsx("label", { htmlFor: id, style: mergedLabelStyle, children: label }) : null,
+          /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsxs(
+              "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__ */ jsx("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: summary }),
+                  /* @__PURE__ */ jsx(
+                    "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__ */ jsx("div", { style: popoverStyle(), role: "listbox", "aria-multiselectable": "true", children: options.length === 0 ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "0.75rem",
+                  fontSize: "0.875rem",
+                  color: "var(--color-text-muted, #6b6b6b)"
+                },
+                children: effectivePlaceholder
+              }
+            ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+              allowAllNone ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "var(--space-2, 8px)", marginBottom: "var(--space-2, 8px)" }, children: [
+                /* @__PURE__ */ jsx(
+                  "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__ */ jsx(
+                  "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__ */ jsxs(
+                  "div",
+                  {
+                    style: itemRowStyle(checked),
+                    role: "option",
+                    "aria-selected": checked,
+                    onClick: () => toggleValue(opt.value),
+                    children: [
+                      /* @__PURE__ */ jsx("input", { type: "checkbox", checked, readOnly: true, style: checkboxStyle, "aria-label": opt.label }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontFamily: "var(--font-sans, system-ui)",
+                            fontSize: "var(--text-sm, 13px)",
+                            fontWeight: "var(--weight-medium, 500)"
+                          },
+                          children: opt.label
+                        }
+                      )
+                    ]
+                  },
+                  opt.value
+                );
+              })
+            ] }) }) : 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;