framepexls-ui-lib 0.1.8 → 0.1.10

package/dist/MultiComboSelect.mjs

@@ -0,0 +1,122 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import ComboSelect from "./ComboSelect";
+import Dialog from "./Dialog";
+import Badge from "./Badge";
+function MultiComboSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Selecciona\u2026",
+  disabled,
+  loading,
+  className,
+  noResultsText,
+  maxVisibleTags = 3,
+  enableDialog = true,
+  dialogTitle = "Seleccionadas"
+}) {
+  const selectedSet = React.useMemo(() => new Set(value), [value]);
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const toggle = React.useCallback(
+    (val) => {
+      if (val == null) return;
+      const next = new Set(selectedSet);
+      if (next.has(val)) next.delete(val);
+      else next.add(val);
+      onChange(Array.from(next));
+    },
+    [selectedSet, onChange]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ComboSelect,
+      {
+        options,
+        value: null,
+        onChange: (v) => toggle(v),
+        placeholder: value.length === 0 ? placeholder : "",
+        disabled,
+        loading,
+        className,
+        noResultsText,
+        closeOnSelect: false,
+        keepFocusOnSelect: true,
+        clearQueryOnSelect: false,
+        renderTags: null,
+        renderOption: (opt) => {
+          var _a;
+          const isSel = selectedSet.has(opt.value);
+          const color = (_a = opt.color) != null ? _a : void 0;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-block h-2.5 w-2.5 rounded-full", style: { background: color } }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label })
+            ] }),
+            isSel && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) })
+          ] });
+        }
+      }
+    ),
+    value.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+      value.slice(0, Math.max(0, maxVisibleTags)).map((v) => {
+        const opt = options.find((o) => o.value === v);
+        if (!opt) return null;
+        return /* @__PURE__ */ jsx(Badge, { tone: "slate", size: "sm", onClick: () => toggle(v), title: "Quitar", children: opt.label }, v);
+      }),
+      enableDialog && value.length > maxVisibleTags && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-0.5 text-xs text-slate-700 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/10 dark:text-slate-200",
+          onClick: () => setDialogOpen(true),
+          title: "Ver todas",
+          children: [
+            "+",
+            value.length - Math.max(0, maxVisibleTags)
+          ]
+        }
+      )
+    ] }),
+    enableDialog && /* @__PURE__ */ jsxs(Dialog, { open: dialogOpen, onClose: () => setDialogOpen(false), size: "sm", children: [
+      /* @__PURE__ */ jsx(Dialog.Header, { title: dialogTitle, onClose: () => setDialogOpen(false) }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        value.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: "Sin seleccionadas" }),
+        value.map((v) => {
+          var _a;
+          const opt = options.find((o) => o.value === v);
+          if (!opt) return null;
+          const color = (_a = opt.color) != null ? _a : void 0;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-block h-2.5 w-2.5 rounded-full", style: { background: color } }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex h-8 items-center justify-center rounded-lg border border-slate-300/80 bg-white px-2 text-xs text-slate-700 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+                onClick: () => toggle(v),
+                children: "Quitar"
+              }
+            )
+          ] }, v);
+        })
+      ] }) }),
+      /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+          onClick: () => setDialogOpen(false),
+          children: "Cerrar"
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  MultiComboSelect as default
+};

package/dist/ReviewHistory.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ReviewItem = {
+    id: number;
+    status: "pendiente" | "en_revision" | "aprobado" | "rechazado";
+    comment?: string | null;
+    by_name?: string | null;
+    by_email?: string | null;
+    user_id?: number | null;
+    created_at: string;
+};
+declare function ReviewHistory({ items, loading, onViewAll, }: {
+    items: ReviewItem[];
+    loading?: boolean;
+    onViewAll?: () => void;
+}): react_jsx_runtime.JSX.Element;
+declare function ReviewHistoryDialog({ open, onClose, items, }: {
+    open: boolean;
+    onClose: () => void;
+    items: ReviewItem[];
+}): react_jsx_runtime.JSX.Element;
+
+export { ReviewHistoryDialog, type ReviewItem, ReviewHistory as default };

package/dist/ReviewHistory.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ReviewItem = {
+    id: number;
+    status: "pendiente" | "en_revision" | "aprobado" | "rechazado";
+    comment?: string | null;
+    by_name?: string | null;
+    by_email?: string | null;
+    user_id?: number | null;
+    created_at: string;
+};
+declare function ReviewHistory({ items, loading, onViewAll, }: {
+    items: ReviewItem[];
+    loading?: boolean;
+    onViewAll?: () => void;
+}): react_jsx_runtime.JSX.Element;
+declare function ReviewHistoryDialog({ open, onClose, items, }: {
+    open: boolean;
+    onClose: () => void;
+    items: ReviewItem[];
+}): react_jsx_runtime.JSX.Element;
+
+export { ReviewHistoryDialog, type ReviewItem, ReviewHistory as default };

package/dist/ReviewHistory.js

@@ -0,0 +1,137 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ReviewHistory_exports = {};
+__export(ReviewHistory_exports, {
+  ReviewHistoryDialog: () => ReviewHistoryDialog,
+  default: () => ReviewHistory
+});
+module.exports = __toCommonJS(ReviewHistory_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_Dialog = __toESM(require("./Dialog"));
+var import_Badge = __toESM(require("./Badge"));
+function ReviewHistory({
+  items,
+  loading,
+  onViewAll
+}) {
+  const latest = (items != null ? items : []).slice(0, 3);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: "Historial de estado" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-muted", children: loading ? "Cargando\u2026" : `${items.length} total` })
+    ] }),
+    latest.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-muted", children: "Sin registros" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-2", children: latest.map((r) => {
+      var _a;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: statusTone(r.status), children: statusLabel(r.status) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-muted", children: formatDateTime(r.created_at) })
+        ] }),
+        r.comment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-sm text-foreground whitespace-pre-line", children: r.comment }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-muted", children: r.by_name || r.by_email ? `${(_a = r.by_name) != null ? _a : ""} ${r.by_email ? `\xB7 ${r.by_email}` : ""}` : r.user_id ? "Usuario interno" : "Invitado" })
+      ] }, r.id);
+    }) }),
+    items.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
+  ] });
+}
+function ReviewHistoryDialog({
+  open,
+  onClose,
+  items
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default, { open, onClose, size: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Header, { title: "Historial de estado", onClose, showClose: true, compact: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-2", children: [
+      items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-muted", children: "Sin registros" }),
+      items.map((r) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: statusTone(r.status), children: statusLabel(r.status) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-muted", children: formatDateTime(r.created_at) })
+          ] }),
+          r.comment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-sm text-foreground whitespace-pre-line", children: r.comment }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-muted", children: r.by_name || r.by_email ? `${(_a = r.by_name) != null ? _a : ""} ${r.by_email ? `\xB7 ${r.by_email}` : ""}` : r.user_id ? "Usuario interno" : "Invitado" })
+        ] }, r.id);
+      })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+        onClick: onClose,
+        children: "Cerrar"
+      }
+    ) })
+  ] });
+}
+function formatDateTime(value) {
+  try {
+    return new Date(value).toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
+  } catch {
+    return value;
+  }
+}
+function ucfirst(s) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
+}
+function statusLabel(s) {
+  switch (s) {
+    case "pendiente":
+      return "Pendiente";
+    case "en_revision":
+      return "En revisi\xF3n";
+    case "aprobado":
+      return "Aprobado";
+    case "rechazado":
+      return "Rechazado";
+    default:
+      return ucfirst(String(s));
+  }
+}
+function statusTone(s) {
+  switch (s) {
+    case "pendiente":
+      return "sky";
+    case "en_revision":
+      return "amber";
+    case "aprobado":
+      return "emerald";
+    case "rechazado":
+      return "rose";
+    default:
+      return "slate";
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReviewHistoryDialog
+});

package/dist/ReviewHistory.mjs

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Dialog from "./Dialog";
+import Badge from "./Badge";
+function ReviewHistory({
+  items,
+  loading,
+  onViewAll
+}) {
+  const latest = (items != null ? items : []).slice(0, 3);
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: "Historial de estado" }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: loading ? "Cargando\u2026" : `${items.length} total` })
+    ] }),
+    latest.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: "Sin registros" }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: latest.map((r) => {
+      var _a;
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium", children: /* @__PURE__ */ jsx(Badge, { tone: statusTone(r.status), children: statusLabel(r.status) }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: formatDateTime(r.created_at) })
+        ] }),
+        r.comment && /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-foreground whitespace-pre-line", children: r.comment }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-muted", children: r.by_name || r.by_email ? `${(_a = r.by_name) != null ? _a : ""} ${r.by_email ? `\xB7 ${r.by_email}` : ""}` : r.user_id ? "Usuario interno" : "Invitado" })
+      ] }, r.id);
+    }) }),
+    items.length > 3 && /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx("button", { className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
+  ] });
+}
+function ReviewHistoryDialog({
+  open,
+  onClose,
+  items
+}) {
+  return /* @__PURE__ */ jsxs(Dialog, { open, onClose, size: "md", children: [
+    /* @__PURE__ */ jsx(Dialog.Header, { title: "Historial de estado", onClose, showClose: true, compact: true }),
+    /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+      items.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: "Sin registros" }),
+      items.map((r) => {
+        var _a;
+        return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium", children: /* @__PURE__ */ jsx(Badge, { tone: statusTone(r.status), children: statusLabel(r.status) }) }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: formatDateTime(r.created_at) })
+          ] }),
+          r.comment && /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-foreground whitespace-pre-line", children: r.comment }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-muted", children: r.by_name || r.by_email ? `${(_a = r.by_name) != null ? _a : ""} ${r.by_email ? `\xB7 ${r.by_email}` : ""}` : r.user_id ? "Usuario interno" : "Invitado" })
+        ] }, r.id);
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+        onClick: onClose,
+        children: "Cerrar"
+      }
+    ) })
+  ] });
+}
+function formatDateTime(value) {
+  try {
+    return new Date(value).toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
+  } catch {
+    return value;
+  }
+}
+function ucfirst(s) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
+}
+function statusLabel(s) {
+  switch (s) {
+    case "pendiente":
+      return "Pendiente";
+    case "en_revision":
+      return "En revisi\xF3n";
+    case "aprobado":
+      return "Aprobado";
+    case "rechazado":
+      return "Rechazado";
+    default:
+      return ucfirst(String(s));
+  }
+}
+function statusTone(s) {
+  switch (s) {
+    case "pendiente":
+      return "sky";
+    case "en_revision":
+      return "amber";
+    case "aprobado":
+      return "emerald";
+    case "rechazado":
+      return "rose";
+    default:
+      return "slate";
+  }
+}
+export {
+  ReviewHistoryDialog,
+  ReviewHistory as default
+};

package/dist/Sidebar.d.mts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type SidebarUser = {
+    name: string;
+    rol_principal: string;
+    avatarUrl?: string | null;
+};
+type SidebarItem = {
+    key: string;
+    label: string;
+    group: string;
+    icon?: React__default.ComponentType<{
+        className?: string;
+    }>;
+    path?: string;
+    children?: SidebarItem[];
+};
+type SidebarProps = {
+    items: SidebarItem[];
+    activeKey?: string;
+    onNavigate: (key: string) => void;
+    user?: SidebarUser;
+    userMenuSlot?: React__default.ReactNode;
+    onBrandClick?: () => void;
+    /** LocalStorage key para persistir colapsado */
+    collapsedKey?: string;
+    /** Rotulación de marca, valores por defecto mantienen estilos existentes */
+    brandInitials?: string;
+    brandTitle?: string;
+    brandSubtitle?: string;
+};
+declare function Sidebar({ items, activeKey, onNavigate, user, userMenuSlot, onBrandClick, collapsedKey, brandInitials, brandTitle, brandSubtitle, }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+export { type SidebarItem, type SidebarProps, type SidebarUser, Sidebar as default };

package/dist/Sidebar.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type SidebarUser = {
+    name: string;
+    rol_principal: string;
+    avatarUrl?: string | null;
+};
+type SidebarItem = {
+    key: string;
+    label: string;
+    group: string;
+    icon?: React__default.ComponentType<{
+        className?: string;
+    }>;
+    path?: string;
+    children?: SidebarItem[];
+};
+type SidebarProps = {
+    items: SidebarItem[];
+    activeKey?: string;
+    onNavigate: (key: string) => void;
+    user?: SidebarUser;
+    userMenuSlot?: React__default.ReactNode;
+    onBrandClick?: () => void;
+    /** LocalStorage key para persistir colapsado */
+    collapsedKey?: string;
+    /** Rotulación de marca, valores por defecto mantienen estilos existentes */
+    brandInitials?: string;
+    brandTitle?: string;
+    brandSubtitle?: string;
+};
+declare function Sidebar({ items, activeKey, onNavigate, user, userMenuSlot, onBrandClick, collapsedKey, brandInitials, brandTitle, brandSubtitle, }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+export { type SidebarItem, type SidebarProps, type SidebarUser, Sidebar as default };