prometeo-design-system 8.2.5 → 8.3.0

package/dist/ChipSelect.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/ChipSelect'
+export {}
+import PrometeoDesignSystem from './exports/ChipSelect'
+export default PrometeoDesignSystem
+export * from './exports/ChipSelect'
+export {}

package/dist/ChipSelect.es.js

@@ -0,0 +1,197 @@
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { c as I } from "./cn-B6yFEsav.js";
+import { g as n } from "./utils-X4-h3cum.js";
+import { useRef as m, useState as Q, useMemo as re, useEffect as le } from "react";
+import ae from "./Popover.es.js";
+import { Search as ne } from "./Icon-Search.es.js";
+import { CheckSmall as oe } from "./Icon-CheckSmall.es.js";
+function se({
+  label: o,
+  icon: T,
+  display: G,
+  error: U,
+  disabled: x,
+  isLoading: a,
+  searchable: y,
+  emptyMessage: V = "No hay opciones disponibles",
+  options: s,
+  optionValue: $,
+  optionLabel: b,
+  optionGroup: N,
+  optionLeading: k,
+  selectedValues: C,
+  multiple: H,
+  onToggle: J,
+  onClear: S,
+  disabledReason: M,
+  readOnly: W,
+  limitReached: D,
+  limitMessage: A,
+  searchValue: X,
+  onSearchChange: h,
+  className: Y
+}) {
+  const g = m(null), q = m(null), v = m(null), j = m(null), [u, B] = Q(!1), [c, E] = Q(""), w = C.length > 0, i = h !== void 0, Z = i ? X ?? "" : c, R = re(() => {
+    if (i || !c.trim()) return s;
+    const e = c.trim().toLowerCase();
+    return s.filter(
+      (r) => n(r, b).toLowerCase().includes(e)
+    );
+  }, [s, c, i, b]);
+  le(() => {
+    u && requestAnimationFrame(() => {
+      if (y && j.current) {
+        j.current.focus();
+        return;
+      }
+      v.current?.querySelector('[role="option"]')?.focus();
+    });
+  }, [u, y]);
+  const d = () => {
+    q.current?.close(), g.current?.focus();
+  }, K = (e) => {
+    const r = Array.from(
+      v.current?.querySelectorAll('[role="option"]') ?? []
+    );
+    if (r.length === 0) return;
+    const f = document.activeElement, l = f ? r.indexOf(f) : -1;
+    r[(l + e + r.length) % r.length]?.focus();
+  }, _ = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation(), d();
+      return;
+    }
+    e.key === "ArrowDown" && (e.preventDefault(), K(1)), e.key === "ArrowUp" && (e.preventDefault(), K(-1));
+  }, L = (e) => {
+    e.key === "Escape" && u && (e.stopPropagation(), d());
+  }, ee = (e) => {
+    J(e), H || d();
+  }, O = !!x || !!W;
+  let P;
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
+      "button",
+      {
+        ref: g,
+        type: "button",
+        disabled: O,
+        "aria-label": o,
+        "aria-haspopup": "listbox",
+        "aria-expanded": u,
+        title: x ? M : void 0,
+        onKeyDown: L,
+        className: I(
+          "inline-flex h-8 items-center gap-1.5 rounded-full border px-3 transition-colors",
+          "pyrion-fonts-label-medium",
+          O ? "cursor-default" : "cursor-pointer",
+          w ? "bg-neutral-secondary-default border-neutral-default-default text-neutral-secondary-default" : "border-dashed border-neutral-default-default bg-transparent text-neutral-tertiary-default",
+          U && "border-dashed border-(--text-semantic-error-onneutral-default) text-semantic-error-onneutral-default",
+          // En lectura el chip no se apaga: el valor tiene que seguir legible.
+          // El que se atenúa es el deshabilitado, que sí es un bloqueo temporal.
+          x && "opacity-50",
+          Y
+        ),
+        children: [
+          T,
+          w ? G : o
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      ae,
+      {
+        ref: q,
+        triggerRef: g,
+        trigger: "click",
+        hideIndicator: !0,
+        zIndex: 60,
+        onOpen: () => B(!0),
+        onClose: () => {
+          B(!1), E(""), h?.("");
+        },
+        className: "p-0!",
+        children: /* @__PURE__ */ t.jsxs(
+          "div",
+          {
+            onKeyDown: _,
+            className: "bg-neutral-primary-default border-neutral-default-default radius-large flex w-72 flex-col overflow-hidden border",
+            children: [
+              y && /* @__PURE__ */ t.jsxs("div", { className: "border-neutral-default-default flex items-center gap-2 border-b px-3 py-2", children: [
+                /* @__PURE__ */ t.jsx(ne, { size: 16, className: "text-neutral-tertiary-default shrink-0" }),
+                /* @__PURE__ */ t.jsx(
+                  "input",
+                  {
+                    ref: j,
+                    value: Z,
+                    onChange: (e) => i ? h?.(e.target.value) : E(e.target.value),
+                    placeholder: `Buscar ${o.toLowerCase()}…`,
+                    className: "pyrion-fonts-body-small text-neutral-primary-default placeholder:text-neutral-tertiary-default w-full bg-transparent outline-none"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t.jsxs(
+                "div",
+                {
+                  ref: v,
+                  role: "listbox",
+                  "aria-label": o,
+                  className: "max-h-72 overflow-y-auto p-1",
+                  children: [
+                    a && /* @__PURE__ */ t.jsx("p", { className: "pyrion-fonts-body-small text-neutral-tertiary-default px-3 py-2", children: "Cargando…" }),
+                    !a && R.length === 0 && /* @__PURE__ */ t.jsx("p", { className: "pyrion-fonts-body-small text-neutral-tertiary-default px-3 py-2", children: V }),
+                    !a && R.map((e) => {
+                      const r = n(e, $), f = n(e, b), l = N ? n(e, N) : void 0, z = k ? n(e, k) : void 0, p = C.includes(r), F = !!D && !p, te = l !== void 0 && l !== P;
+                      return P = l, /* @__PURE__ */ t.jsxs("div", { children: [
+                        te && /* @__PURE__ */ t.jsx("p", { className: "pyrion-fonts-label-small text-neutral-tertiary-default px-3 pt-2 pb-1", children: l }),
+                        /* @__PURE__ */ t.jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            role: "option",
+                            "aria-selected": p,
+                            disabled: F,
+                            onClick: () => ee(r),
+                            className: I(
+                              "radius-medium flex w-full items-center gap-2 px-3 py-2 text-left transition-colors",
+                              "pyrion-fonts-body-small text-neutral-primary-default",
+                              "outline-none",
+                              F ? "cursor-default opacity-45" : "hover:bg-neutral-secondary-default focus-visible:bg-neutral-secondary-default",
+                              p && "bg-neutral-secondary-default"
+                            ),
+                            children: [
+                              z,
+                              /* @__PURE__ */ t.jsx("span", { className: "flex-1 truncate", children: f }),
+                              p && /* @__PURE__ */ t.jsx(oe, { size: 16, className: "shrink-0" })
+                            ]
+                          }
+                        )
+                      ] }, r);
+                    }),
+                    D && A && !a && /* @__PURE__ */ t.jsx("p", { className: "pyrion-fonts-label-small border-neutral-default-default mt-1 border-t px-3 pt-2 pb-1 text-(--text-semantic-warning-onneutral-default)", children: A }),
+                    S && w && !a && /* @__PURE__ */ t.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "option",
+                        "aria-selected": !1,
+                        onClick: () => {
+                          S(), d();
+                        },
+                        className: "radius-medium pyrion-fonts-body-small text-neutral-tertiary-default hover:bg-neutral-secondary-default focus-visible:bg-neutral-secondary-default border-neutral-default-default mt-1 flex w-full items-center gap-2 border-t px-3 py-2 text-left outline-none",
+                        children: "Quitar selección"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+se.displayName = "ChipSelect";
+export {
+  se as default
+};

package/dist/DatePickerPill.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/DatePickerPill'
+export {}
+import PrometeoDesignSystem from './exports/DatePickerPill'
+export default PrometeoDesignSystem
+export * from './exports/DatePickerPill'
+export {}

package/dist/DatePickerPill.es.js

@@ -0,0 +1,111 @@
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { c as k } from "./cn-B6yFEsav.js";
+import { useRef as p, useState as D } from "react";
+import { D as P } from "./DatePicker-CdLqTQWn.js";
+import w from "./Popover.es.js";
+import { CalendarToday as N } from "./Icon-CalendarToday.es.js";
+import { CloseSmall as R } from "./Icon-CloseSmall.es.js";
+const I = new Intl.DateTimeFormat("es-AR", { day: "numeric", month: "short" });
+function K({
+  label: s,
+  value: t,
+  onChange: i,
+  error: m,
+  disabled: a,
+  disabledReason: x,
+  readOnly: n,
+  disabledDates: b,
+  clearLabel: y = "Quitar fecha",
+  className: g
+}) {
+  const l = p(null), d = p(null), [c, u] = D(!1), f = !!a || !!n, o = () => {
+    d.current?.close(), l.current?.focus();
+  }, h = (r) => {
+    r.key === "Escape" && (r.stopPropagation(), o());
+  }, j = (r) => {
+    r.key === "Escape" && c && (r.stopPropagation(), o());
+  };
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        ref: l,
+        type: "button",
+        disabled: f,
+        "aria-label": s,
+        "aria-haspopup": "dialog",
+        "aria-expanded": c,
+        title: a ? x : void 0,
+        onKeyDown: j,
+        className: k(
+          "inline-flex h-8 items-center gap-1.5 rounded-full border px-3 transition-colors",
+          "pyrion-fonts-label-medium",
+          f ? "cursor-default" : "cursor-pointer",
+          t ? "bg-neutral-secondary-default border-neutral-default-default text-neutral-secondary-default" : "border-dashed border-neutral-default-default bg-transparent text-neutral-tertiary-default",
+          m && "border-dashed border-(--text-semantic-error-onneutral-default) text-semantic-error-onneutral-default",
+          // En lectura el chip no se apaga: el valor tiene que seguir legible.
+          // El que se atenúa es el deshabilitado, que sí es un bloqueo temporal.
+          a && "opacity-50",
+          g
+        ),
+        children: t ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx(N, { size: 14, className: "shrink-0" }),
+          I.format(t)
+        ] }) : `+ ${s}`
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      w,
+      {
+        ref: d,
+        triggerRef: l,
+        trigger: "click",
+        hideIndicator: !0,
+        zIndex: 60,
+        onOpen: () => u(!0),
+        onClose: () => u(!1),
+        className: "p-0!",
+        children: /* @__PURE__ */ e.jsxs(
+          "div",
+          {
+            onKeyDown: h,
+            className: "bg-neutral-primary-default border-neutral-default-default radius-large flex flex-col overflow-hidden border",
+            children: [
+              /* @__PURE__ */ e.jsx(
+                P,
+                {
+                  variant: "only-calendar",
+                  mode: "single",
+                  selected: t,
+                  onSelect: (r) => {
+                    i(r ?? void 0), o();
+                  },
+                  disabledDates: b,
+                  disabled: n
+                }
+              ),
+              t && !n && /* @__PURE__ */ e.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    i(void 0), o();
+                  },
+                  className: "pyrion-fonts-body-small text-neutral-tertiary-default hover:bg-neutral-secondary-default border-neutral-default-default flex items-center gap-2 border-t px-3 py-2 text-left",
+                  children: [
+                    /* @__PURE__ */ e.jsx(R, { size: 14 }),
+                    y
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+K.displayName = "DatePickerPill";
+export {
+  K as default
+};

package/dist/FileChip.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/FileChip'
+export {}
+import PrometeoDesignSystem from './exports/FileChip'
+export default PrometeoDesignSystem
+export * from './exports/FileChip'
+export {}

package/dist/FileChip.es.js

@@ -0,0 +1,89 @@
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { c as o } from "./cn-B6yFEsav.js";
+import { useState as p, useEffect as f } from "react";
+import j from "./Spinner.es.js";
+import { CloseSmall as y } from "./Icon-CloseSmall.es.js";
+import { File as N } from "./Icon-File.es.js";
+function F(e) {
+  return e instanceof globalThis.File ? e.type.startsWith("image/") : /\.(png|jpe?g|gif|webp|svg|bmp|ico)$/i.test(e.name);
+}
+function R({
+  file: e,
+  onOpenThumbnail: c,
+  onRemove: m,
+  isUploading: n = !1,
+  className: b
+}) {
+  const l = F(e), [h, u] = p("");
+  f(() => {
+    if (!(e instanceof globalThis.File) || !l) {
+      u("");
+      return;
+    }
+    const a = URL.createObjectURL(e);
+    return u(a), () => URL.revokeObjectURL(a);
+  }, [e, l]);
+  const i = e instanceof globalThis.File ? h : e.url ?? "", [g, d] = p(!1);
+  f(() => {
+    d(!1);
+  }, [i]);
+  const x = l && !!i && !g, r = o(
+    "bg-neutral-primary-default grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-md"
+  );
+  let s;
+  if (n)
+    s = /* @__PURE__ */ t.jsx("span", { className: r, children: /* @__PURE__ */ t.jsx(j, { size: "small", variant: "sync" }) });
+  else if (x) {
+    const a = (
+      // biome-ignore lint/a11y/noNoninteractiveElementInteractions: onError es manejo de carga, no interacción
+      /* @__PURE__ */ t.jsx(
+        "img",
+        {
+          src: i,
+          alt: e.name,
+          draggable: !1,
+          onError: () => d(!0),
+          className: "h-full w-full object-cover"
+        }
+      )
+    );
+    s = c ? /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: c,
+        "aria-label": `Ver ${e.name}`,
+        className: o(r, "cursor-pointer transition-opacity hover:opacity-80"),
+        children: a
+      }
+    ) : /* @__PURE__ */ t.jsx("span", { className: r, children: a });
+  } else
+    s = /* @__PURE__ */ t.jsx("span", { className: r, children: /* @__PURE__ */ t.jsx(N, { size: 16, className: "text-neutral-tertiary-default" }) });
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: o(
+        "inline-flex max-w-60 items-center gap-2 rounded-lg border border-neutral-default-default bg-neutral-secondary-default p-1 pr-2",
+        n && "opacity-60",
+        b
+      ),
+      children: [
+        s,
+        /* @__PURE__ */ t.jsx("span", { className: "pyrion-fonts-body-small text-neutral-secondary-default truncate", children: e.name }),
+        m && !n && /* @__PURE__ */ t.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Quitar ${e.name}`,
+            onClick: m,
+            className: "text-neutral-tertiary-default hover:text-neutral-primary-default shrink-0 cursor-pointer",
+            children: /* @__PURE__ */ t.jsx(y, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  R as default
+};