@anthonybir/birhaus-provider
Version:
BIRHAUS Provider - Context provider for real-time UX validation and cognitive load monitoring
399 lines (375 loc) • 91.3 kB
JavaScript
"use strict";
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/index.ts
var index_exports = {};
__export(index_exports, {
BIRHAUS_ENV_CONFIG: () => Ws,
BIRHAUS_PERFORMANCE: () => ke,
BIRHAUS_SCORING: () => Xs,
BirhausProvider: () => BirhausProvider,
DEFAULT_BIRHAUS_CONFIG: () => et,
Provider: () => BirhausProvider_default,
useBirhaus: () => useBirhaus
});
module.exports = __toCommonJS(index_exports);
// src/BirhausProvider.tsx
var import_react3 = require("react");
// ../primitives/dist/index.mjs
var import_react2 = require("react");
// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
var import_react = require("react");
// ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
var defaultAttributes = {
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round"
};
// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().trim();
var createLucideIcon = (iconName, iconNode) => {
const Component = (0, import_react.forwardRef)(
({ color = "currentColor", size = 24, strokeWidth = 2, absoluteStrokeWidth, className = "", children, ...rest }, ref) => (0, import_react.createElement)(
"svg",
{
ref,
...defaultAttributes,
width: size,
height: size,
stroke: color,
strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
className: ["lucide", `lucide-${toKebabCase(iconName)}`, className].join(" "),
...rest
},
[
...iconNode.map(([tag, attrs]) => (0, import_react.createElement)(tag, attrs)),
...Array.isArray(children) ? children : [children]
]
)
);
Component.displayName = `${iconName}`;
return Component;
};
// ../../node_modules/lucide-react/dist/esm/icons/alert-circle.js
var AlertCircle = createLucideIcon("AlertCircle", [
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/alert-triangle.js
var AlertTriangle = createLucideIcon("AlertTriangle", [
[
"path",
{
d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
key: "c3ski4"
}
],
["path", { d: "M12 9v4", key: "juzpu7" }],
["path", { d: "M12 17h.01", key: "p32p05" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/check-circle-2.js
var CheckCircle2 = createLucideIcon("CheckCircle2", [
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/check.js
var Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
// ../../node_modules/lucide-react/dist/esm/icons/chevron-down.js
var ChevronDown = createLucideIcon("ChevronDown", [
["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/chevron-up.js
var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
// ../../node_modules/lucide-react/dist/esm/icons/clock.js
var Clock = createLucideIcon("Clock", [
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
["polyline", { points: "12 6 12 12 16 14", key: "68esgv" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/eye-off.js
var EyeOff = createLucideIcon("EyeOff", [
["path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24", key: "1jxqfv" }],
[
"path",
{
d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68",
key: "9wicm4"
}
],
[
"path",
{ d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61", key: "1jreej" }
],
["line", { x1: "2", x2: "22", y1: "2", y2: "22", key: "a6p6uj" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/eye.js
var Eye = createLucideIcon("Eye", [
["path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z", key: "rwhkz3" }],
["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/info.js
var Info = createLucideIcon("Info", [
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
["path", { d: "M12 16v-4", key: "1dtifu" }],
["path", { d: "M12 8h.01", key: "e9boi3" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/loader-2.js
var Loader2 = createLucideIcon("Loader2", [
["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/minus.js
var Minus = createLucideIcon("Minus", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
// ../../node_modules/lucide-react/dist/esm/icons/more-horizontal.js
var MoreHorizontal = createLucideIcon("MoreHorizontal", [
["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/more-vertical.js
var MoreVertical = createLucideIcon("MoreVertical", [
["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/search.js
var Search = createLucideIcon("Search", [
["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/undo-2.js
var Undo2 = createLucideIcon("Undo2", [
["path", { d: "M9 14 4 9l5-5", key: "102s5s" }],
["path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11", key: "llx8ln" }]
]);
// ../../node_modules/lucide-react/dist/esm/icons/x.js
var X = createLucideIcon("X", [
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
]);
// ../primitives/dist/index.mjs
var import_jsx_runtime = require("react/jsx-runtime");
function Pt(...e) {
return e.filter(Boolean).join(" ");
}
var at = (0, import_react2.forwardRef)(({ label: e, labelEs: s, labelEn: n, variant: a = "secondary", size: l = "md", isPrimaryAction: S = false, loading: c = false, loadingText: R, loadingTextEs: v, loadingTextEn: h, destructive: K = false, undoAction: Z, undoTimeoutMs: j = 1e4, showSuccessState: T = false, successText: H, successTextEs: V, successTextEn: o, describedBy: _, describedByEs: b, describedByEn: q, icon: B, iconPosition: F = "left", fullWidth: se = false, trackCognitiveLoad: Y = false, cognitiveLoadLevel: z = "medium", className: D, disabled: ae, onClick: P, children: J, ...U }, Q) => {
let [E, N] = (0, import_react2.useState)(false), [w, O] = (0, import_react2.useState)(false), [y, X2] = (0, import_react2.useState)(false), t = (0, import_react2.useRef)(), m = (ie, r, p) => ie || s || r || n || p || "", u = m(s, n, e), i = m(v || "Procesando...", h || "Processing...", R), d = m(V || "Completado", o || "Completed", H), L = m(b, q, _), ee = `
inline-flex items-center justify-center gap-2 rounded-lg font-medium
transition-all duration-200 ease-in-out
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
disabled:pointer-events-none disabled:opacity-50
${se ? "w-full" : ""}
`.trim(), M = { xs: "h-7 px-2 text-xs", sm: "h-8 px-3 text-sm", md: "h-10 px-4 text-sm", lg: "h-11 px-6 text-base", xl: "h-12 px-8 text-base" }, A = { primary: S ? "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500 shadow-md hover:shadow-lg" : "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500", secondary: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 focus-visible:ring-gray-500", destructive: "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500", outline: "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus-visible:ring-gray-500", ghost: "text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-500" }, ue = Y ? { low: "ring-1 ring-green-300", medium: "ring-1 ring-yellow-300", high: "ring-1 ring-red-300" }[z] : "", pe = async (ie) => {
if (K && Z && !E) {
await P?.(ie), N(true), t.current = setTimeout(() => {
N(false);
}, j);
return;
}
let r = P?.(ie);
if (T && r && typeof r == "object" && "then" in r) try {
await r, X2(true), setTimeout(() => X2(false), 2e3);
} catch (p) {
console.error("Action failed:", p);
}
}, ge = async () => {
if (Z) {
O(true);
try {
await Z(), N(false), t.current && clearTimeout(t.current);
} catch (ie) {
console.error("Undo failed:", ie);
} finally {
O(false);
}
}
};
return (0, import_react2.useEffect)(() => () => {
t.current && clearTimeout(t.current);
}, []), E ? (0, import_jsx_runtime.jsxs)("div", { className: "inline-flex items-center gap-2 p-2 bg-red-50 border border-red-200 rounded-lg", children: [(0, import_jsx_runtime.jsx)(AlertTriangle, { className: "h-4 w-4 text-red-600" }), (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-red-800", children: "Acci\xF3n completada" }), (0, import_jsx_runtime.jsxs)("button", { onClick: ge, disabled: w, className: "inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-red-700 bg-white border border-red-300 rounded hover:bg-red-50 disabled:opacity-50", children: [(0, import_jsx_runtime.jsx)(Undo2, { className: "h-3 w-3" }), w ? "Deshaciendo..." : "Deshacer"] })] }) : (0, import_jsx_runtime.jsxs)("button", { ref: Q, className: Pt(ee, M[l], A[a], ue, D), disabled: ae || c, onClick: pe, "aria-describedby": L ? `${U.id}-desc` : void 0, "data-birhaus-component": "button", "data-birhaus-variant": a, "data-birhaus-primary": S, "data-cognitive-load": Y ? z : void 0, ...U, children: [c && (0, import_jsx_runtime.jsx)(Loader2, { className: "h-4 w-4 animate-spin" }), y && (0, import_jsx_runtime.jsx)(Check, { className: "h-4 w-4 text-green-600" }), B && F === "left" && !c && !y && (0, import_jsx_runtime.jsx)("span", { className: "flex-shrink-0", children: B }), (0, import_jsx_runtime.jsx)("span", { children: c ? i : y ? d : J || u }), B && F === "right" && !c && !y && (0, import_jsx_runtime.jsx)("span", { className: "flex-shrink-0", children: B }), L && (0, import_jsx_runtime.jsx)("span", { id: `${U.id}-desc`, className: "sr-only", children: L })] });
});
at.displayName = "BirhausButton";
function st(...e) {
return e.filter(Boolean).join(" ");
}
var lt = (0, import_react2.forwardRef)(({ label: e, labelEs: s, labelEn: n, description: a, descriptionEs: l, descriptionEn: S, error: c, errorEs: R, errorEn: v, solution: h, solutionEs: K, solutionEn: Z, autoSave: j = false, autoSaveDelay: T = 1e3, onAutoSave: H, validateOnChange: V = true, validateOnBlur: o = true, validationRules: _ = [], size: b = "md", variant: q = "default", prefix: B, suffix: F, showPasswordToggle: se = false, showClearButton: Y = false, helpText: z, helpTextEs: D, helpTextEn: ae, loading: P = false, success: J = false, fieldPriority: U = "optional", cognitiveWeight: Q = 1, className: E, type: N = "text", value: w, defaultValue: O, onChange: y, onBlur: X$1, onFocus: t, disabled: m, required: u, ...i }, d) => {
let [L, ee] = (0, import_react2.useState)(w || O || ""), [M, A] = (0, import_react2.useState)(false), [ue, pe] = (0, import_react2.useState)(false), [ge, ie] = (0, import_react2.useState)(""), [r, p] = (0, import_react2.useState)(""), [f, $] = (0, import_react2.useState)("idle"), C = (0, import_react2.useRef)(), be = (0, import_react2.useRef)(null), le = (we, Ce, It) => we || Ce || It || "", ye = le(s, n, e), Se = le(l, S, a), Me = le(R, v, c) || ge, Ie = le(K, Z, h) || r, Ne = le(D, ae, z), Re = (we) => {
if (_.length) {
for (let Ce of _) if (!Ce.test(we)) {
ie(Ce.errorEs || Ce.errorEn || ""), p(Ce.solutionEs || Ce.solutionEn || "");
return;
}
ie(""), p("");
}
}, Xe = (we) => {
!j || !H || (C.current && clearTimeout(C.current), C.current = setTimeout(async () => {
$("saving");
try {
await H(we), $("saved"), setTimeout(() => $("idle"), 2e3);
} catch {
$("error"), setTimeout(() => $("idle"), 3e3);
}
}, T));
}, g = (we) => {
let Ce = we.target.value;
ee(Ce), V && Re(Ce), j && Xe(Ce), y?.(we);
}, W = (we) => {
pe(false), o && Re(L), X$1?.(we);
}, Ee = (we) => {
pe(true), t?.(we);
}, x = () => {
ee(""), ie(""), p(""), be.current && be.current.focus();
};
(0, import_react2.useEffect)(() => () => {
C.current && clearTimeout(C.current);
}, []);
let k = { sm: "h-8 px-3 text-sm", md: "h-10 px-4 text-sm", lg: "h-12 px-4 text-base" }, he = { default: "border border-gray-300 bg-white", filled: "border-0 bg-gray-100", minimal: "border-0 border-b border-gray-300 bg-transparent rounded-none" }, Ae = !!(Me || c), Ze = J && !Ae, St = Ae ? "border-red-500 focus:border-red-500 focus:ring-red-500" : Ze ? "border-green-500 focus:border-green-500 focus:ring-green-500" : "focus:border-blue-500 focus:ring-blue-500", Bt = { required: "ring-2 ring-red-100", optional: "", progressive: "ring-1 ring-blue-100" }, Mt = st("w-full rounded-lg transition-all duration-200", "focus:outline-none focus:ring-2 focus:ring-offset-1", "disabled:cursor-not-allowed disabled:opacity-50", "placeholder:text-gray-400", k[b], he[q], St, Bt[U], E);
return (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [ye && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [(0, import_jsx_runtime.jsxs)("label", { htmlFor: i.id, className: st("block text-sm font-medium text-gray-700", u && "after:content-['*'] after:ml-1 after:text-red-500"), children: [ye, U === "required" && (0, import_jsx_runtime.jsx)("span", { className: "ml-1 text-xs text-red-600", children: "(requerido)" }), U === "optional" && (0, import_jsx_runtime.jsx)("span", { className: "ml-1 text-xs text-gray-500", children: "(opcional)" })] }), j && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 text-xs", children: [f === "saving" && (0, import_jsx_runtime.jsx)("span", { className: "text-blue-600", children: "Guardando..." }), f === "saved" && (0, import_jsx_runtime.jsxs)("span", { className: "text-green-600 flex items-center gap-1", children: [(0, import_jsx_runtime.jsx)(CheckCircle2, { className: "h-3 w-3" }), "Guardado"] }), f === "error" && (0, import_jsx_runtime.jsx)("span", { className: "text-red-600", children: "Error al guardar" })] })] }), Se && (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-gray-600", children: Se }), (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [B && (0, import_jsx_runtime.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", children: B }), (0, import_jsx_runtime.jsx)("input", { ref: d || be, type: se ? M ? "text" : "password" : N, value: w || L, onChange: g, onBlur: W, onFocus: Ee, disabled: m || P, required: u, className: st(Mt, B ? "pl-10" : "", F || se || Y ? "pr-10" : ""), "data-birhaus-component": "input", "data-birhaus-priority": U, "data-cognitive-weight": Q, ...i }), P && (0, import_jsx_runtime.jsx)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: (0, import_jsx_runtime.jsx)("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600" }) }), Ze && (0, import_jsx_runtime.jsx)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: (0, import_jsx_runtime.jsx)(CheckCircle2, { className: "h-4 w-4 text-green-500" }) }), Ae && (0, import_jsx_runtime.jsx)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: (0, import_jsx_runtime.jsx)(AlertCircle, { className: "h-4 w-4 text-red-500" }) }), se && N === "password" && !P && !Ae && !Ze && (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => A(!M), className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600", "aria-label": M ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a", children: M ? (0, import_jsx_runtime.jsx)(EyeOff, { className: "h-4 w-4" }) : (0, import_jsx_runtime.jsx)(Eye, { className: "h-4 w-4" }) }), Y && L && !P && !Ae && !se && (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: x, className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600", "aria-label": "Limpiar campo", children: (0, import_jsx_runtime.jsx)(X, { className: "h-4 w-4" }) }), F && !se && !Y && !P && !Ae && !Ze && (0, import_jsx_runtime.jsx)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400", children: F })] }), Me && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-2 p-3 bg-red-50 border border-red-200 rounded-lg", children: [(0, import_jsx_runtime.jsx)(AlertCircle, { className: "h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" }), (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 text-sm", children: [(0, import_jsx_runtime.jsxs)("p", { className: "text-red-800 font-medium", children: ["Qu\xE9 pas\xF3: ", Me] }), Ie && (0, import_jsx_runtime.jsxs)("p", { className: "text-red-700 mt-1", children: ["C\xF3mo resolver: ", Ie] })] })] }), Ne && !Me && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-2 text-sm text-gray-600", children: [(0, import_jsx_runtime.jsx)(Info, { className: "h-4 w-4 mt-0.5 flex-shrink-0" }), (0, import_jsx_runtime.jsx)("p", { children: Ne })] })] });
});
lt.displayName = "BirhausInput";
function Ge(...e) {
return e.filter(Boolean).join(" ");
}
var gt = (0, import_react2.forwardRef)(({ label: e, labelEs: s, labelEn: n, description: a, descriptionEs: l, descriptionEn: S, options: c = [], value: R, defaultValue: v, onChange: h, error: K, errorEs: Z, errorEn: j, placeholder: T, placeholderEs: H, placeholderEn: V, multiple: o = false, maxSelections: _, searchable: b = false, searchPlaceholder: q, searchPlaceholderEs: B, searchPlaceholderEn: F, size: se = "md", variant: Y = "default", helpText: z, helpTextEs: D, helpTextEn: ae, disabled: P = false, required: J = false, loading: U = false, cognitiveLoadLevel: Q = "medium", showCognitiveWarning: E = true, clearable: N = false, closeOnSelect: w = true, className: O, id: y }, X$1) => {
let [t, m] = (0, import_react2.useState)(false), [u, i] = (0, import_react2.useState)(""), [d, L] = (0, import_react2.useState)(Array.isArray(R) ? R : Array.isArray(v) ? v : R ? [R] : v ? [v] : []), ee = (0, import_react2.useRef)(null), M = (0, import_react2.useRef)(null), A = (x, k, he) => x || k || he || "", ue = A(s, n, e), pe = A(l, S, a), ge = A(Z, j, K), ie = A(H || "Seleccionar opci\xF3n...", V || "Select option...", T), r = A(B || "Buscar opciones...", F || "Search options...", q), p = A(D, ae, z), f = 7, $ = c.filter((x) => u === "" || x.label.toLowerCase().includes(u.toLowerCase()) || x.labelEs?.toLowerCase().includes(u.toLowerCase()) || x.labelEn?.toLowerCase().includes(u.toLowerCase())), C = $.slice(0, b ? $.length : f), be = $.length > f, le = c.length > f ? "high" : c.length > 4 ? "medium" : "low", ye = (x) => {
let k;
if (o) if (d.includes(x)) k = d.filter((he) => he !== x);
else {
if (_ && d.length >= _) return;
k = [...d, x];
}
else k = [x], w && m(false);
L(k), h?.(o ? k : k[0] || "");
}, Se = () => {
L([]), h?.(o ? [] : "");
};
(0, import_react2.useEffect)(() => {
let x = (k) => {
ee.current && !ee.current.contains(k.target) && m(false);
};
return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
}, []), (0, import_react2.useEffect)(() => {
t && b && M.current && M.current.focus();
}, [t, b]);
let Ie = d.map((x) => {
let k = c.find((he) => he.value === x);
return k ? k.labelEs || k.label : x;
}), Ne = Ie.length > 0 ? Ie.join(", ") : ie, Re = { sm: "h-8 px-3 text-sm", md: "h-10 px-4 text-sm", lg: "h-12 px-4 text-base" }, Xe = { default: "border border-gray-300 bg-white", filled: "border-0 bg-gray-100", minimal: "border-0 border-b border-gray-300 bg-transparent rounded-none" }, W = !!ge ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "focus:border-blue-500 focus:ring-blue-500", Ee = Ge("w-full rounded-lg transition-all duration-200 flex items-center justify-between", "focus:outline-none focus:ring-2 focus:ring-offset-1", "disabled:cursor-not-allowed disabled:opacity-50", Re[se], Xe[Y], W, O);
return (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [(ue || E && le === "high") && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [ue && (0, import_jsx_runtime.jsx)("label", { htmlFor: y, className: Ge("block text-sm font-medium text-gray-700", J && "after:content-['*'] after:ml-1 after:text-red-500"), children: ue }), E && le === "high" && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 text-xs text-amber-600", children: [(0, import_jsx_runtime.jsx)(AlertCircle, { className: "h-3 w-3" }), (0, import_jsx_runtime.jsxs)("span", { children: ["+", c.length - f, " opciones (considera agrupar)"] })] })] }), pe && (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-gray-600", children: pe }), (0, import_jsx_runtime.jsxs)("div", { ref: ee, className: "relative", children: [(0, import_jsx_runtime.jsxs)("button", { ref: X$1, type: "button", onClick: () => m(!t), disabled: P || U, className: Ee, "data-birhaus-component": "select", "data-cognitive-load": le, "aria-expanded": t, "aria-haspopup": "listbox", id: y, children: [(0, import_jsx_runtime.jsx)("span", { className: Ge("truncate text-left", d.length === 0 && "text-gray-400"), children: Ne }), (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [N && d.length > 0 && (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: (x) => {
x.stopPropagation(), Se();
}, className: "text-gray-400 hover:text-gray-600", "aria-label": "Limpiar selecci\xF3n", children: (0, import_jsx_runtime.jsx)(X, { className: "h-4 w-4" }) }), U ? (0, import_jsx_runtime.jsx)("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600" }) : (0, import_jsx_runtime.jsx)(ChevronDown, { className: Ge("h-4 w-4 text-gray-400 transition-transform duration-200", t && "rotate-180") })] })] }), t && (0, import_jsx_runtime.jsxs)("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-hidden", children: [b && (0, import_jsx_runtime.jsx)("div", { className: "p-2 border-b border-gray-200", children: (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [(0, import_jsx_runtime.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), (0, import_jsx_runtime.jsx)("input", { ref: M, type: "text", value: u, onChange: (x) => i(x.target.value), placeholder: r, className: "w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" })] }) }), (0, import_jsx_runtime.jsxs)("div", { className: "max-h-48 overflow-y-auto", children: [C.length === 0 ? (0, import_jsx_runtime.jsx)("div", { className: "p-3 text-sm text-gray-500 text-center", children: u ? "No se encontraron opciones" : "No hay opciones disponibles" }) : C.map((x) => {
let k = d.includes(x.value), he = x.labelEs || x.label, Ae = x.descriptionEs || x.description;
return (0, import_jsx_runtime.jsxs)("button", { type: "button", onClick: () => ye(x.value), disabled: x.disabled, className: Ge("w-full px-3 py-2 text-left flex items-center gap-3 hover:bg-gray-50", "focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed", k && "bg-blue-50 text-blue-700"), role: "option", "aria-selected": k, children: [x.icon && (0, import_jsx_runtime.jsx)("span", { className: "flex-shrink-0", children: x.icon }), (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [(0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium truncate", children: he }), k && (0, import_jsx_runtime.jsx)(Check, { className: "h-4 w-4 text-blue-600" })] }), Ae && (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-gray-500 truncate", children: Ae })] })] }, x.value);
}), be && !b && (0, import_jsx_runtime.jsxs)("div", { className: "p-2 border-t border-gray-200 bg-gray-50 text-center", children: [(0, import_jsx_runtime.jsxs)("p", { className: "text-xs text-gray-600", children: ["+", $.length - f, " opciones m\xE1s"] }), (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-gray-500", children: "Habilita b\xFAsqueda para ver todas" })] })] })] })] }), ge && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-2 p-3 bg-red-50 border border-red-200 rounded-lg", children: [(0, import_jsx_runtime.jsx)(AlertCircle, { className: "h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" }), (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-red-800", children: ge })] }), p && !ge && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-2 text-sm text-gray-600", children: [(0, import_jsx_runtime.jsx)(Info, { className: "h-4 w-4 mt-0.5 flex-shrink-0" }), (0, import_jsx_runtime.jsx)("p", { children: p })] }), o && d.length > 0 && (0, import_jsx_runtime.jsxs)("div", { className: "text-xs text-gray-600", children: [d.length, " de ", _ || "\u221E", " seleccionado", d.length !== 1 ? "s" : ""] })] });
});
gt.displayName = "BirhausSelect";
function Ye(...e) {
return e.filter(Boolean).join(" ");
}
var mt = (0, import_react2.forwardRef)(({ title: e, titleEs: s, titleEn: n, subtitle: a, subtitleEs: l, subtitleEn: S, description: c, descriptionEs: R, descriptionEn: v, children: h, header: K, footer: Z, aside: j, primaryAction: T, secondaryActions: H = [], collapsible: V = false, defaultExpanded: o = true, expandedContent: _, status: b = "neutral", statusMessage: q, statusMessageEs: B, statusMessageEn: F, variant: se = "default", size: Y = "md", loading: z = false, skeleton: D = false, lazyLoad: ae = false, selectable: P = false, selected: J = false, onSelect: U, badge: Q, badgeVariant: E = "neutral", timestamp: N, author: w, category: O, informationDensity: y = "medium", className: X2, ...t }, m) => {
let [u, i] = (0, import_react2.useState)(o), d = (C, be, le) => C || be || le || "", L = d(s, n, e), ee = d(l, S, a), M = d(R, v, c), A = d(B, F, q), ue = (T ? 1 : 0) + H.length;
ue > 4 && console.warn(`BIRHAUS 4-3-1 Rule Warning: Card has ${ue} actions (recommended: max 4)`);
let pe = { sm: "p-4", md: "p-6", lg: "p-8" }, ge = { default: "bg-white border border-gray-200 shadow-sm", elevated: "bg-white border border-gray-200 shadow-md hover:shadow-lg transition-shadow", outlined: "bg-white border-2 border-gray-300", minimal: "bg-transparent border-0" }, ie = { neutral: "", success: "border-green-200 bg-green-50", warning: "border-yellow-200 bg-yellow-50", error: "border-red-200 bg-red-50", info: "border-blue-200 bg-blue-50" }, r = { neutral: null, success: (0, import_jsx_runtime.jsx)(CheckCircle2, { className: "h-4 w-4 text-green-600" }), warning: (0, import_jsx_runtime.jsx)(AlertTriangle, { className: "h-4 w-4 text-yellow-600" }), error: (0, import_jsx_runtime.jsx)(AlertTriangle, { className: "h-4 w-4 text-red-600" }), info: (0, import_jsx_runtime.jsx)(Info, { className: "h-4 w-4 text-blue-600" }) }, p = { neutral: "bg-gray-100 text-gray-800", success: "bg-green-100 text-green-800", warning: "bg-yellow-100 text-yellow-800", error: "bg-red-100 text-red-800" }, f = { low: "space-y-6", medium: "space-y-4", high: "space-y-2" }, $ = Ye("rounded-lg transition-all duration-200", pe[Y], ge[se], b !== "neutral" && ie[b], P && "cursor-pointer hover:border-blue-300", J && "ring-2 ring-blue-500 border-blue-300", y && f[y], X2);
return D || z ? (0, import_jsx_runtime.jsx)("div", { ref: m, className: $, ...t, children: (0, import_jsx_runtime.jsxs)("div", { className: "animate-pulse space-y-4", children: [(0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [(0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [(0, import_jsx_runtime.jsx)("div", { className: "h-4 bg-gray-200 rounded w-3/4" }), (0, import_jsx_runtime.jsx)("div", { className: "h-3 bg-gray-200 rounded w-1/2" })] }), (0, import_jsx_runtime.jsx)("div", { className: "h-8 w-8 bg-gray-200 rounded" })] }), (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [(0, import_jsx_runtime.jsx)("div", { className: "h-3 bg-gray-200 rounded" }), (0, import_jsx_runtime.jsx)("div", { className: "h-3 bg-gray-200 rounded w-5/6" })] }), (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-end gap-2", children: [(0, import_jsx_runtime.jsx)("div", { className: "h-8 w-16 bg-gray-200 rounded" }), (0, import_jsx_runtime.jsx)("div", { className: "h-8 w-20 bg-gray-200 rounded" })] })] }) }) : (0, import_jsx_runtime.jsxs)("div", { ref: m, className: $, onClick: P ? U : void 0, "data-birhaus-component": "card", "data-information-density": y, "data-selected": J, ...t, children: [K && (0, import_jsx_runtime.jsx)("div", { className: "mb-4 pb-4 border-b border-gray-200", children: K }), (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between mb-4", children: [(0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [Q && (0, import_jsx_runtime.jsx)("div", { className: "mb-2", children: (0, import_jsx_runtime.jsx)("span", { className: Ye("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", p[E]), children: Q }) }), L && (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-semibold text-gray-900 truncate", children: L }), ee && (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-gray-600 mt-1", children: ee }), (N || w || O) && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 mt-2 text-xs text-gray-500", children: [N && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [(0, import_jsx_runtime.jsx)(Clock, { className: "h-3 w-3" }), (0, import_jsx_runtime.jsx)("span", { children: N.toLocaleDateString("es-ES") })] }), w && (0, import_jsx_runtime.jsxs)("span", { children: ["por ", w] }), O && (0, import_jsx_runtime.jsx)("span", { className: "px-2 py-0.5 bg-gray-100 rounded-full", children: O })] })] }), (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 ml-4", children: [T && (0, import_jsx_runtime.jsxs)("button", { onClick: T.onClick, disabled: T.disabled || T.loading, className: Ye("inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors", "focus:outline-none focus:ring-2 focus:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", T.variant === "primary" && "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500", T.variant === "destructive" && "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500", (!T.variant || T.variant === "secondary") && "bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500"), children: [T.loading ? (0, import_jsx_runtime.jsx)("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-current" }) : T.icon, T.labelEs || T.label] }), H.length > 0 && (0, import_jsx_runtime.jsx)("div", { className: "relative", children: (0, import_jsx_runtime.jsx)("button", { className: "p-1 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded", "aria-label": "M\xE1s acciones", children: (0, import_jsx_runtime.jsx)(MoreVertical, { className: "h-4 w-4" }) }) }), V && (0, import_jsx_runtime.jsx)("button", { onClick: () => i(!u), className: "p-1 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded", "aria-label": u ? "Contraer" : "Expandir", children: u ? (0, import_jsx_runtime.jsx)(ChevronUp, { className: "h-4 w-4" }) : (0, import_jsx_runtime.jsx)(ChevronDown, { className: "h-4 w-4" }) })] })] }), A && (0, import_jsx_runtime.jsxs)("div", { className: Ye("flex items-center gap-2 p-3 rounded-lg mb-4 text-sm", b === "success" && "bg-green-100 text-green-800", b === "warning" && "bg-yellow-100 text-yellow-800", b === "error" && "bg-red-100 text-red-800", b === "info" && "bg-blue-100 text-blue-800"), children: [r[b], (0, import_jsx_runtime.jsx)("span", { children: A })] }), M && (0, import_jsx_runtime.jsx)("p", { className: "text-gray-600 text-sm mb-4", children: M }), j && (0, import_jsx_runtime.jsx)("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg", children: j }), h && (0, import_jsx_runtime.jsx)("div", { className: "mb-4", children: h }), V && _ && u && (0, import_jsx_runtime.jsx)("div", { className: "border-t border-gray-200 pt-4 mt-4", children: _ }), Z && (0, import_jsx_runtime.jsx)("div", { className: "mt-4 pt-4 border-t border-gray-200", children: Z })] });
});
mt.displayName = "BirhausCard";
function Pe(...e) {
return e.filter(Boolean).join(" ");
}
var xt = (0, import_react2.forwardRef)(({ open: e = false, onOpenChange: s, title: n, titleEs: a, titleEn: l, description: S, descriptionEs: c, descriptionEn: R, children: v, undoConfig: h, variant: K = "default", size: Z = "md", position: j = "center", closeOnOverlayClick: T = true, closeOnEscape: H = true, persistent: V = false, primaryAction: o, secondaryActions: _ = [], role: b = "dialog", ariaLabelledBy: q, ariaDescribedBy: B, className: F, overlayClassName: se }, Y) => {
let [z, D] = (0, import_react2.useState)(false), [ae, P] = (0, import_react2.useState)(0), [J, U] = (0, import_react2.useState)(false), Q = (i, d, L) => i || d || L || "", E = Q(a, l, n), N = Q(c, R, S);
(0, import_react2.useEffect)(() => {
if (!z || !h?.enabled) return;
let i = h.timeoutMs || 1e4;
P(i);
let d = setInterval(() => {
P((L) => L <= 1e3 ? (D(false), clearInterval(d), 0) : L - 1e3);
}, 1e3);
return () => clearInterval(d);
}, [z, h?.enabled, h?.timeoutMs]), (0, import_react2.useEffect)(() => {
if (!e) return;
let i = (d) => {
d.key === "Escape" && H && !V && s?.(false);
};
return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
}, [e, H, V, s]);
let w = async () => {
if (h?.undoAction) {
U(true);
try {
await h.undoAction(), D(false), s?.(false);
} catch (i) {
console.error("BIRHAUS Dialog: Undo action failed:", i);
} finally {
U(false);
}
}
}, O = async (i) => {
if (!(i.disabled || i.loading)) try {
await i.onClick(), i.variant === "destructive" && h?.enabled ? D(true) : s?.(false);
} catch (d) {
console.error("BIRHAUS Dialog: Action failed:", d);
}
}, y = (o ? 1 : 0) + _.length;
y > 4 && console.warn(`BIRHAUS 4-3-1 Rule Warning: Dialog has ${y} actions (recommended: max 4)`);
let X$1 = { sm: "max-w-sm", md: "max-w-md", lg: "max-w-lg", xl: "max-w-xl", full: "max-w-full mx-4" }, t = { center: "items-center justify-center", top: "items-start justify-center pt-16", bottom: "items-end justify-center pb-16" }, u = { default: { icon: null, headerBg: "bg-gray-50", borderColor: "border-gray-200" }, success: { icon: (0, import_jsx_runtime.jsx)(CheckCircle2, { className: "h-5 w-5 text-green-600" }), headerBg: "bg-green-50", borderColor: "border-green-200" }, warning: { icon: (0, import_jsx_runtime.jsx)(AlertTriangle, { className: "h-5 w-5 text-yellow-600" }), headerBg: "bg-yellow-50", borderColor: "border-yellow-200" }, error: { icon: (0, import_jsx_runtime.jsx)(AlertTriangle, { className: "h-5 w-5 text-red-600" }), headerBg: "bg-red-50", borderColor: "border-red-200" }, info: { icon: (0, import_jsx_runtime.jsx)(Info, { className: "h-5 w-5 text-blue-600" }), headerBg: "bg-blue-50", borderColor: "border-blue-200" } }[K];
if (!e) return null;
if (z && h?.enabled) {
let i = Q(h.messageEs, h.messageEn, "Acci\xF3n completada. Presiona deshacer si fue un error."), d = Q(h.labelEs, h.labelEn, "Deshacer");
return (0, import_jsx_runtime.jsx)("div", { className: "fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4", children: (0, import_jsx_runtime.jsx)("div", { ref: Y, className: Pe("bg-white rounded-lg shadow-lg border-2 border-green-200 p-6 max-w-md w-full", F), role: "alertdialog", "aria-labelledby": "undo-title", "aria-describedby": "undo-description", children: (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-4", children: [(0, import_jsx_runtime.jsx)("div", { className: "flex-shrink-0", children: (0, import_jsx_runtime.jsx)(CheckCircle2, { className: "h-6 w-6 text-green-600" }) }), (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, import_jsx_runtime.jsx)("h3", { id: "undo-title", className: "text-lg font-semibold text-gray-900 mb-2", children: "\xA1Acci\xF3n completada!" }), (0, import_jsx_runtime.jsx)("p", { id: "undo-description", className: "text-sm text-gray-600 mb-4", children: i }), (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [(0, import_jsx_runtime.jsxs)("button", { onClick: w, disabled: J, className: Pe("inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md", "bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500", "disabled:pointer-events-none disabled:opacity-50"), children: [J ? (0, import_jsx_runtime.jsx)("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }) : (0, import_jsx_runtime.jsx)(Undo2, { className: "h-4 w-4" }), J ? "Deshaciendo..." : d] }), (0, import_jsx_runtime.jsxs)("div", { className: "text-sm text-gray-500", children: ["Auto-cierre en ", Math.ceil(ae / 1e3), "s"] })] })] })] }) }) });
}
return (0, import_jsx_runtime.jsx)("div", { className: Pe("fixed inset-0 z-50 bg-black/50 flex", t[j], se), onClick: T ? () => s?.(false) : void 0, children: (0, import_jsx_runtime.jsxs)("div", { ref: Y, className: Pe("bg-white rounded-lg shadow-xl border", X$1[Z], u.borderColor, "w-full overflow-hidden", F), onClick: (i) => i.stopPropagation(), role: b, "aria-labelledby": q || "dialog-title", "aria-describedby": B || "dialog-description", "data-birhaus-component": "dialog", "data-variant": K, children: [(E || u.icon) && (0, import_jsx_runtime.jsx)("div", { className: Pe("px-6 py-4 border-b border-gray-200", u.headerBg), children: (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [(0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [u.icon, E && (0, import_jsx_runtime.jsx)("h2", { id: q || "dialog-title", className: "text-lg font-semibold text-gray-900", children: E })] }), !V && (0, import_jsx_runtime.jsx)("button", { onClick: () => s?.(false), className: "text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded p-1", "aria-label": "Cerrar di\xE1logo", children: (0, import_jsx_runtime.jsx)(X, { className: "h-5 w-5" }) })] }) }), (0, import_jsx_runtime.jsxs)("div", { className: "px-6 py-4", children: [N && (0, import_jsx_runtime.jsx)("p", { id: B || "dialog-description", className: "text-gray-600 mb-4", children: N }), v] }), (o || _.length > 0) && (0, import_jsx_runtime.jsx)("div", { className: "px-6 py-4 bg-gray-50 border-t border-gray-200", children: (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-end gap-3", children: [_.map((i) => (0, import_jsx_runtime.jsxs)("button", { onClick: () => O(i), disabled: i.disabled || i.loading, className: Pe("inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md", "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50", "focus:outline-none focus:ring-2 focus:ring-gray-500", "disabled:pointer-events-none disabled:opacity-50"), children: [i.loading ? (0, import_jsx_runtime.jsx)("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-current" }) : i.icon, i.labelEs || i.label] }, i.id)), o && (0, import_jsx_runtime.jsxs)("button", { onClick: () => O(o), disabled: o.disabled || o.loading, className: Pe("inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md", "focus:outline-none focus:ring-2 focus:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", o.variant === "primary" && "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500", o.variant === "destructive" && "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500", (!o.variant || o.variant === "secondary") && "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500"), children: [o.loading ? (0, import_jsx_runtime.jsx)("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-current" }) : o.icon, o.labelEs || o.label] })] }) })] }) });
});
xt.displayName = "BirhausDialog";
function qe(...e) {
return e.filter(Boolean).join(" ");
}
var vt = (0, import_react2.forwardRef)(({ data: e, columns: s, emptyMessage: n, emptyMessageEs: a, emptyMessageEn: l, loadingMessage: S, loadingMessageEs: c, loadingMessageEn: R, maxVisibleColumns: v = 7, showCognitiveWarning: h = true, sortable: K = true, filterable: Z = false, searchable: j = false, selectable: T = false, loading: H = false, selectedRows: V = /* @__PURE__ */ new Set(), onRowSelect: o, onRowsSelect: _, pagination: b, sortConfig: q, onSort: B, filters: F = {}, onFilter: se, searchValue: Y = "", onSearch: z, getRowId: D = (E, N) => N, rowActions: ae = [], variant: P = "default", size: J = "md", className: U }, Q) => {
let [E, N] = (0, import_react2.useState)(/* @__PURE__ */ new Set()), [w, O] = (0, import_react2.useState)(Y), [y, X2] = (0, import_react2.useState)(q), t = (r, p, f) => r || p || f || "", m = t(a, l, n || "No hay datos disponibles"), u = t(c, R, S || "Cargando datos..."), { visibleColumns: i, hiddenColumnCount: d, cognitiveLoad: L } = (0, import_react2.useMemo)(() => {
let r = { high: 1, medium: 2, low: 3 }, p = [...s].sort((ye, Se) => {
let Me = r[ye.priority || "medium"], Ie = r[Se.priority || "medium"];
if (Me !== Ie) return Me - Ie;
let Ne = ye.cognitiveWeight || 5, Re = Se.cognitiveWeight || 5;
return Ne - Re;
}), f = p.filter((ye) => !E.has(ye.id)).slice(0, v), $ = p.length - f.length, be = f.reduce((ye, Se) => ye + (Se.cognitiveWeight || 5), 0) / f.length, le = f.length > 7 ? "high" : f.length > 5 ? "medium" : "low";
return { visibleColumns: f, hiddenColumnCount: $, cognitiveLoad: le, avgCognitiveWeight: be };
}, [s, E, v]);
h && i.length > 7 && console.warn(`BIRHAUS Miller's Law Warning: Table shows ${i.length} columns (recommended: max 7)`);
let ee = (r) => {
if (!s.find((C) => C.id === r)?.sortable) return;
let f = y?.key === r && y.direction === "asc" ? "desc" : "asc";
X2({ key: r, direction: f }), B?.(r, f);
}, M = (r, p) => {
o?.(r, p);
}, A = (r) => {
let p = e.map((f, $) => D(f, $));
_?.(p, r);
}, ue = (r, p) => typeof p.accessor == "function" ? p.accessor(r) : r[p.accessor], pe = (r, p, f) => p.cell ? p.cell(r, f) : p.isCurrency && typeof r == "number" ? new Intl.NumberFormat("es-PY", { style: "currency", currency: "PYG", minimumFractionDigits: 0 }).format(r) : p.isPercentage && typeof r == "number" ? `${(r * 100).toFixed(1)}%` : p.isDate && r ? new Date(r).toLocaleDateString("es-ES") : r?.toString() || "", ge = { sm: "text-xs", md: "text-sm", lg: "text-base" }, ie = { default: "border border-gray-200", striped: "border border-gray-200", bordered: "border-2 border-gray-300", minimal: "border-0" };
return H ? (0, import_jsx_runtime.jsxs)("div", { className: "w-full", children: [(0, import_jsx_runtime.jsxs)("div", { className: "animate-pulse space-y-4", children: [(0, import_jsx_runtime.jsx)("div", { className: "h-10 bg-gray-200 rounded" }), [...Array(5)].map((r, p) => (0, import_jsx_runtime.jsx)("div", { className: "h-8 bg-gray-100 rounded" }, p))] }), (0, import_jsx_runtime.jsx)("p", { className: "text-center text-gray-500 mt-4", children: u })] }) : e.length === 0 ? (0, import_jsx_runtime.jsx)("div", { className: "w-full text-center py-12", children: (0, import_jsx_runtime.jsx)("p", { className: "text-gray-500 text-lg", children: m }) }) : (0, import_jsx_runtime.jsxs)("div", { className: "w-full space-y-4", children: [h && L === "high" && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg", children: [(0, import_jsx_runtime.jsx)(AlertTriangle, { className: "h-4 w-4 text-yellow-600" }), (0, import_jsx_runtime.jsxs)("span", { className: "text-sm text-yellow-800", children: ["Mostrando ", i.length, " columnas (m\xE1ximo recomendado: 7).", d > 0 && ` ${d} columnas ocultas.`] })] }), (j || Z || d > 0) && (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [j && (0, import_jsx_runtime.jsxs)("div", { className: "relative flex-1 max-w-sm", children: [(0, import_jsx_runtime.jsx)(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), (0, import_jsx_runtime.jsx)("input", { type: "text", value: w, onChange: (r) => {
O(r.target.value), z?.(r.target.value);
}, placeholder: "Buscar...", className: "w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" })] }), d > 0 && (0, import_jsx_runtime.jsxs)("button", { onClick: () => N(/* @__PURE__ */ new Set()), className: "inline-flex items-center gap-2 px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50", children: [(0, import_jsx_runtime.jsx)(MoreHorizontal, { className: "h-4 w-4" }), "Mostrar ", d, " columnas m\xE1s"] })] }), (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto rounded-lg border border-gray-200", children: (0, import_jsx_runtime.jsxs)("table", { ref: Q, className: qe("w-full table-auto", ge[J], ie[P], U), "data-birhaus-component": "table", "data-cognitive-load": L, "data-visible-columns": i.length, children: [(0, import_jsx_runtime.jsx)("thead", { className: "bg-gray-50", children: (0, import_jsx_runtime.jsxs)("tr", { children: [T && (0, import_jsx_runtime.jsx)("th", { className: "px-4 py-3 text-left", children: (0, import_jsx_runtime.jsx)("input", { type: "checkbox", onChange: (r) => A(r.target.checked), className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500" }) }), i.map((r) => (0, import_jsx_runtime.jsx)("th", { className: qe("px-4 py-3 font-medium text-gray-900", r.align === "center" && "text-center", r.align === "right" && "text-right", r.sortable && "cursor-pointer hover:bg-gray-100"), style: { width: r.width }, onClick: () => r.sortable && ee(r.id), children: (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [(0, import_jsx_runtime.jsx)("span", { children: r.headerEs || r.header }), r.sortable && y?.key === r.id && (y.direction === "asc" ? (0, import_jsx_runtime.jsx)(ChevronUp, { className: "h-4 w-4" }) : (0, import_jsx_runtime.jsx)(ChevronDown, { className: "h-4 w-4" }))] }) }, r.id)), ae.length > 0 && (0, import_jsx_runtime.jsx)("th", { className: "px-4 py-3 text-right font-medium text-gray-900", children: "Acciones" })] }) }), (0, import_jsx_runtime.jsx)("tbody", { className: "divide-y divide-gray-200", children: e.map((r, p) => {
let f = D(r, p), $ = V.has(f);
return (0, import_jsx_runtime.jsxs)("tr", { className: qe("hover:bg-gray-50", P === "striped" && p % 2 === 1 && "bg-gray-50", $ && "bg-blue-50"), children: [T && (0, import_jsx_runtime.jsx)("td", { className: "px-4 py-3", children: (0, import_jsx_runtime.jsx)("input", { type: "checkbox", checked: $, onChange: (C) => M(f, C.target.checked), className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500" }) }), i.map((C) => {
let be = ue(r, C), le = pe(be, C, r);
return (0, import_jsx_runtime.jsx)("td", { className: qe("px-4 py-3 text-gray-900", C.align === "center" && "text-center", C.align === "right" && "text-right", C.isCurrency && "font-mono"), children: le }, C.id);
}), ae.length > 0 && (0, import_jsx_runtime.jsx)("td", { className: "px-4 py-3 text-right", children: (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-end gap-2", children: ae.map((C) => (0, import_jsx_runtime.jsxs)("button", { onClick: () => C.onClick(r), disabled: C.disabled?.(r), className: qe("inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded", "focus:outline-none focus:ring-2 focus:ring-offset-1", "disabled:pointer-events-none disabled:opacity-50", C.variant === "primary" && "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500", C.variant === "destructive" && "bg-red-600 text-whit