prometeo-design-system 2.9.5 → 2.9.7

package/dist/RecurrentDatePicker.es.js

@@ -0,0 +1,694 @@
+import { j as r } from "./jsx-runtime-DKDX3adD.js";
+import O, { useMemo as D, memo as b, useRef as M, useCallback as g, useState as L, useEffect as W } from "react";
+import { D as I } from "./DatePicker-CbXUUnv7.js";
+import { S as f } from "./Select-DeKi15Iu.js";
+import { I as R } from "./Input-Cf8P1QJv.js";
+import _ from "./CheckBox.es.js";
+import { c as p } from "./cn-B6yFEsav.js";
+import { H as A } from "./HelperComponent-BeNlTMqI.js";
+import w from "./RadioButton.es.js";
+const B = [
+  {
+    value: "monday",
+    label: "Lunes",
+    short: "L"
+  },
+  {
+    value: "tuesday",
+    label: "Martes",
+    short: "M"
+  },
+  {
+    value: "wednesday",
+    label: "Miércoles",
+    short: "M"
+  },
+  {
+    value: "thursday",
+    label: "Jueves",
+    short: "J"
+  },
+  {
+    value: "friday",
+    label: "Viernes",
+    short: "V"
+  },
+  {
+    value: "saturday",
+    label: "Sábado",
+    short: "S"
+  },
+  {
+    value: "sunday",
+    label: "Domingo",
+    short: "D"
+  }
+], E = (e) => {
+  const {
+    options: a = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"],
+    labelVariant: s = "short",
+    value: u = [],
+    onChange: c,
+    label: d,
+    required: m = !1,
+    error: h
+  } = e, o = D(
+    () => B.filter((n) => a.includes(n.value)),
+    [a]
+  ), i = (n) => {
+    const t = n.target.value;
+    if (!t) return u;
+    const l = n.target.checked ? [...u, t] : u.filter((y) => y !== t);
+    c(l);
+  };
+  return /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: p(
+        "flex flex-col gap-1 relative"
+      ),
+      children: [
+        d && /* @__PURE__ */ r.jsxs(
+          "p",
+          {
+            className: p(
+              "ml-3",
+              "prometeo-fonts-label-large text-neutral-medium-default"
+            ),
+            children: [
+              d,
+              m && /* @__PURE__ */ r.jsx("span", { children: " *" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r.jsx("div", { className: "flex gap-2 justify-between w-full", children: o?.map((n) => /* @__PURE__ */ r.jsxs(
+          "div",
+          {
+            className: p(
+              "flex flex-col items-center justify-center gap-1",
+              "h-18 w-12"
+            ),
+            children: [
+              /* @__PURE__ */ r.jsx(
+                _,
+                {
+                  value: n.value,
+                  onChange: i,
+                  checked: u.includes(n.value)
+                }
+              ),
+              /* @__PURE__ */ r.jsx(
+                "p",
+                {
+                  className: p(
+                    "z-20",
+                    s === "large" && "text-[11px]"
+                  ),
+                  children: s === "short" ? n.short : n.label
+                }
+              )
+            ]
+          },
+          n.value
+        )) }),
+        h && /* @__PURE__ */ r.jsx(A, { variant: "error", children: h })
+      ]
+    }
+  );
+}, x = O.memo(E, (e, a) => e.value === a.value);
+x.displayName = "WeekdaysSelector";
+const P = ({ value: e, onChange: a, errors: s }) => {
+  const u = [
+    {
+      singularLabel: "Semana",
+      pluralLabel: "Semanas",
+      value: "weekly",
+      maxInterval: 52
+    },
+    {
+      singularLabel: "Mes",
+      pluralLabel: "Meses",
+      value: "monthly",
+      maxInterval: 12
+    }
+  ], c = D(
+    () => u.find((n) => n.value === e?.frequency)?.maxInterval,
+    [e?.frequency]
+  ), d = (n) => {
+    if (n === "") {
+      a({
+        kind: "setInterval",
+        interval: 1
+      });
+      return;
+    }
+    const t = Number(n);
+    if (console.log("parsedValue", t), Number.isNaN(t))
+      return;
+    let l = t;
+    if (c && t > c && e?.interval === c) {
+      const k = n[n.length - 1], S = Number(k);
+      Number.isNaN(S) || (l = S);
+    }
+    let y = l;
+    c ? y < 1 ? y = 1 : y > c && (y = c) : y < 1 && (y = 1), a({
+      kind: "setInterval",
+      interval: y
+    });
+  }, m = (n) => {
+    if (!n)
+      return;
+    const t = {
+      kind: "setFrequency",
+      frequency: n.value
+    };
+    a(t);
+  }, h = (n) => {
+    a({
+      kind: "setWeekdays",
+      weekdays: n
+    });
+  }, o = (n) => {
+    if (!n)
+      return;
+    const t = {
+      kind: "setDayOfMonth",
+      dayOfMonth: n.value
+    };
+    a(t);
+  }, i = Array.from(
+    { length: 28 },
+    (n, t) => t + 1
+  ).map((n) => ({ value: n.toString(), label: n.toString() })).concat([{ value: "last", label: "último" }]);
+  return /* @__PURE__ */ r.jsxs("div", { children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "flex items-start gap-2 w-full mb-5", children: [
+      /* @__PURE__ */ r.jsx(
+        R,
+        {
+          type: "number",
+          min: 1,
+          max: c,
+          label: "Cada",
+          onChange: (n) => d(n.target.value),
+          value: e?.interval?.toString(),
+          name: "interval",
+          labelVariant: "static",
+          className: "w-1/2",
+          variant: s?.interval ? "error" : "default",
+          errorComponent: s?.interval
+        }
+      ),
+      /* @__PURE__ */ r.jsx("div", { className: "pt-2 w-1/2", children: /* @__PURE__ */ r.jsx(
+        f,
+        {
+          label: "",
+          labelVariant: "static",
+          options: u,
+          optionLabel: (n) => Number(e?.interval) > 1 ? n.pluralLabel : n.singularLabel,
+          optionValue: "value",
+          value: e?.frequency,
+          onChange: m,
+          name: "frequency",
+          dropdownOptions: {
+            hideSearchBar: !0
+          }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ r.jsxs("div", { children: [
+      e?.frequency === "weekly" && /* @__PURE__ */ r.jsx(
+        x,
+        {
+          label: "Los días",
+          value: e?.weekdays,
+          onChange: h,
+          required: !0,
+          error: s?.weekdays
+        }
+      ),
+      e?.frequency === "monthly" && /* @__PURE__ */ r.jsx(
+        f,
+        {
+          options: i,
+          optionLabel: "label",
+          optionValue: "value",
+          label: "El día",
+          value: e?.dayOfMonth?.toString(),
+          onChange: o,
+          name: "dayOfMonth",
+          variant: s?.dayOfMonth ? "error" : "default",
+          errorComponent: s?.dayOfMonth,
+          dropdownOptions: { hideSearchBar: !0 }
+        }
+      )
+    ] })
+  ] });
+}, C = O.memo(
+  P,
+  (e, a) => e.value === a.value
+);
+C.displayName = "CustomFrequencySettings";
+const T = [
+  {
+    value: "first",
+    label: "Primer"
+  },
+  {
+    value: "second",
+    label: "Segundo"
+  },
+  {
+    value: "third",
+    label: "Tercer"
+  },
+  {
+    value: "fourth",
+    label: "Cuarto"
+  },
+  {
+    value: "last",
+    label: "Último"
+  }
+], z = [
+  { value: "monday", label: "Lunes" },
+  { value: "tuesday", label: "Martes" },
+  { value: "wednesday", label: "Miércoles" },
+  { value: "thursday", label: "Jueves" },
+  { value: "friday", label: "Viernes" },
+  { value: "saturday", label: "Sábado" },
+  { value: "sunday", label: "Domingo" }
+], J = ({ value: e, onChange: a, errors: s }) => {
+  const u = M(e);
+  u.current = e;
+  const c = g((i) => {
+    const n = i.target.value;
+    a({ kind: "setType", newType: n });
+  }, [a]), d = g((i) => {
+    !i || !u.current || u.current.type !== "relative" || a({ kind: "setRelativeDayOrder", newDayOrder: i.value });
+  }, [a, e]), m = g((i) => {
+    !i || !u.current || u.current.type !== "relative" || a({ kind: "setRelativeWeekDay", newWeekDay: i.value });
+  }, [a, e]), h = g((i) => {
+    !i || !u.current || u.current.type !== "absolute" || a({ kind: "setAbsoluteDayOfMonth", newDayOfMonth: i.value });
+  }, [a, e]), o = Array.from({ length: 28 }, (i, n) => n + 1).map((i) => ({ value: String(i), label: i.toString() })).concat([
+    { value: "last", label: "Último" }
+  ]);
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-6 items-start", children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 items-start relative  w-full", children: [
+      /* @__PURE__ */ r.jsx(
+        w,
+        {
+          name: "monthly-type",
+          value: "relative",
+          className: "mt-7",
+          onChange: c,
+          checked: e?.type === "relative"
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        f,
+        {
+          label: "El",
+          options: T,
+          optionLabel: "label",
+          optionValue: "value",
+          value: e?.type === "relative" ? e.dayOrder : void 0,
+          onChange: d,
+          labelVariant: "static",
+          disabled: e?.type !== "relative",
+          variant: s?.dayOrder ? "error" : "default",
+          errorComponent: s?.dayOrder,
+          dropdownOptions: {
+            hideSearchBar: !0
+          }
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        f,
+        {
+          label: " ",
+          labelVariant: "static",
+          options: z,
+          optionLabel: "label",
+          optionValue: "value",
+          value: e?.type === "relative" ? e.weekDay : void 0,
+          disabled: e?.type !== "relative",
+          dropdownOptions: {
+            hideSearchBar: !0
+          },
+          onChange: m,
+          variant: s?.weekDay ? "error" : "default",
+          errorComponent: s?.weekDay,
+          className: "pt-6"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex items-start w-full gap-2", children: [
+      /* @__PURE__ */ r.jsx(
+        w,
+        {
+          name: "monthly-type",
+          className: "mt-7",
+          value: "absolute",
+          onChange: c,
+          checked: e?.type === "absolute"
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        f,
+        {
+          label: "El día",
+          options: o,
+          optionLabel: "label",
+          optionValue: "value",
+          value: e?.type === "absolute" ? String(e.dayOfMonth) : void 0,
+          onChange: h,
+          labelVariant: "static",
+          disabled: e?.type !== "absolute",
+          variant: s?.dayOfMonth ? "error" : "default",
+          errorComponent: s?.dayOfMonth,
+          dropdownOptions: {
+            hideSearchBar: !0
+          }
+        }
+      )
+    ] })
+  ] });
+}, j = b(J);
+j.displayName = "MonthlyFrequencySettings";
+const Y = ({ value: e, onChange: a, error: s }) => /* @__PURE__ */ r.jsx(
+  x,
+  {
+    label: "Los días",
+    value: e,
+    onChange: a,
+    required: !0,
+    error: s
+  }
+), N = b(Y);
+N.displayName = "WeeklyFrequencySettings";
+const H = [
+  { value: 1, label: "Enero" },
+  { value: 2, label: "Febrero" },
+  { value: 3, label: "Marzo" },
+  { value: 4, label: "Abril" },
+  { value: 5, label: "Mayo" },
+  { value: 6, label: "Junio" },
+  { value: 7, label: "Julio" },
+  { value: 8, label: "Agosto" },
+  { value: 9, label: "Septiembre" },
+  { value: 10, label: "Octubre" },
+  { value: 11, label: "Noviembre" },
+  { value: 12, label: "Diciembre" }
+], $ = ({ value: e, onChange: a, errors: s }) => {
+  const u = (o) => {
+    o && a({ kind: "setDay", newDay: o.value });
+  }, c = (o) => {
+    o && (e?.day && !d(o.value) ? a({ kind: "setMonth", newMonth: o.value, newDay: void 0 }) : a({ kind: "setMonth", newMonth: o.value }));
+  }, d = (o) => o ? m[e?.month]?.includes(o) : !1, m = {
+    2: [29, 30, 31],
+    4: [31],
+    6: [31],
+    9: [31],
+    11: [31]
+  }, h = [...Array.from({ length: 31 }, (o, i) => i + 1).filter((o) => !m[e?.month]?.includes(o))];
+  return /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: "flex items-start gap-2",
+      children: [
+        /* @__PURE__ */ r.jsx(
+          f,
+          {
+            name: "day",
+            label: "Día",
+            options: h,
+            optionLabel: (o) => o.toString(),
+            optionValue: (o) => o.toString(),
+            value: e?.day,
+            onChange: u,
+            labelVariant: "static",
+            variant: s?.day ? "error" : "default",
+            errorComponent: s?.day,
+            dropdownOptions: {
+              hideSearchBar: !0
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          f,
+          {
+            name: "month",
+            label: "Mes",
+            options: H,
+            optionLabel: "label",
+            optionValue: "value",
+            value: e?.month,
+            onChange: c,
+            labelVariant: "static",
+            variant: s?.month ? "error" : "default",
+            errorComponent: s?.month,
+            dropdownOptions: {
+              hideSearchBar: !0
+            }
+          }
+        )
+      ]
+    }
+  );
+}, V = b($);
+V.displayName = "YearlyFrequencySettings";
+const G = {
+  weekly: "El ticket se generará los días que seleccione todas las semanas",
+  monthly: "El ticket se generará todos los meses en la frecuencia que seleccione",
+  yearly: "El ticket se generará una vez por año en el día y mes que seleccione",
+  custom: "El ticket se generará de acuerdo al intervalo y unidad de tiempo que seleccione"
+}, K = (e) => {
+  const { frequency: a } = e, s = {
+    type: "relative",
+    dayOrder: "first",
+    weekDay: "monday"
+  }, u = {
+    type: "absolute",
+    dayOfMonth: "1"
+  }, c = (t, l) => {
+    const y = t.type === "relative" ? t : s, v = t.type === "absolute" ? t : u;
+    switch (l.kind) {
+      case "setType":
+        return l.newType === "relative" ? y : v;
+      case "setRelativeDayOrder":
+        return { ...y, dayOrder: l.newDayOrder };
+      case "setRelativeWeekDay":
+        return { ...y, weekDay: l.newWeekDay };
+      case "setAbsoluteDayOfMonth":
+        return { ...v, dayOfMonth: l.newDayOfMonth };
+    }
+  }, d = (t) => {
+    e.onChange((l) => c(l, t));
+  }, m = (t, l) => {
+    switch (l.kind) {
+      case "setMonth":
+        return l.newMonth ? { ...t, month: l.newMonth, day: l?.newDay || t?.day } : t;
+      case "setDay":
+        return l.newDay ? { ...t, day: l.newDay } : t;
+    }
+  }, h = (t) => {
+    e.onChange((l) => m(l, t));
+  }, o = (t) => {
+    e.onChange(t);
+  }, i = (t, l) => {
+    switch (l.kind) {
+      case "setInterval":
+        return { ...t, interval: l.interval };
+      case "setFrequency":
+        return { ...t, frequency: l.frequency, interval: 1 };
+      case "setWeekdays":
+        return { ...t, weekdays: l.weekdays };
+      case "setDayOfMonth":
+        return { ...t, dayOfMonth: l.dayOfMonth };
+    }
+  }, n = (t) => {
+    e.onChange((l) => i(l, t));
+  };
+  return /* @__PURE__ */ r.jsxs("div", { children: [
+    /* @__PURE__ */ r.jsx("p", { className: " prometeo-fonts-body-large mb-6", children: G[a] }),
+    a === "weekly" && /* @__PURE__ */ r.jsx(
+      N,
+      {
+        value: e.frequencySettings,
+        onChange: o,
+        error: e.errors?.weeklyWeekdays
+      }
+    ),
+    a === "monthly" && /* @__PURE__ */ r.jsx(
+      j,
+      {
+        onChange: d,
+        value: e.frequencySettings,
+        errors: {
+          dayOrder: e.errors?.monthlyDayOrder,
+          weekDay: e.errors?.monthlyWeekDay,
+          dayOfMonth: e.errors?.monthlyDayOfMonth
+        }
+      }
+    ),
+    a === "yearly" && /* @__PURE__ */ r.jsx(
+      V,
+      {
+        onChange: h,
+        value: e.frequencySettings,
+        errors: {
+          month: e.errors?.yearlyMonth,
+          day: e.errors?.yearlyDay
+        }
+      }
+    ),
+    a === "custom" && /* @__PURE__ */ r.jsx(
+      C,
+      {
+        onChange: n,
+        value: e.frequencySettings,
+        errors: {
+          interval: e.errors?.customInterval,
+          weekdays: e.errors?.customWeekdays,
+          dayOfMonth: e.errors?.customDayOfMonth
+        }
+      }
+    )
+  ] });
+}, F = b(
+  K,
+  (e, a) => e.frequency === a.frequency && e.frequencySettings === a.frequencySettings && e.onChange === a.onChange && e.errors === a.errors
+);
+F.displayName = "FrequencySettings";
+const Q = [
+  {
+    label: "Semanalmente",
+    value: "weekly"
+  },
+  {
+    label: "Mensualmente",
+    value: "monthly"
+  },
+  {
+    label: "Anualmente",
+    value: "yearly"
+  },
+  {
+    label: "Personalizado",
+    value: "custom"
+  }
+], q = {
+  weekly: [],
+  monthly: {
+    type: "relative",
+    dayOrder: "first",
+    weekDay: "monday"
+  },
+  yearly: {
+    month: 1,
+    day: void 0
+  },
+  custom: {
+    interval: 1,
+    frequency: "weekly",
+    weekdays: []
+  }
+}, U = (e) => {
+  const a = e.value, s = a !== void 0, [u, c] = L(
+    () => e.value ?? e.defaultValue ?? {
+      frequency: "weekly",
+      startDate: /* @__PURE__ */ new Date(),
+      frequencySettings: q.weekly
+    }
+  ), d = s ? a : u, m = M(!1);
+  W(() => {
+    if (!s) {
+      if (!m.current) {
+        m.current = !0;
+        return;
+      }
+      e.onChange?.(u);
+    }
+  }, [u, s, e.onChange]);
+  const h = (t) => {
+    if (s) {
+      const y = typeof t == "function" ? t(a ?? u) : t;
+      e.onChange?.(y);
+      return;
+    }
+    c(typeof t == "function" ? (l) => t(l) : t);
+  }, o = (t) => {
+    if (!t)
+      return;
+    const l = t.value, y = q[l];
+    h((v) => ({
+      ...v,
+      frequency: l,
+      frequencySettings: y
+    }));
+  }, i = (t) => {
+    h(typeof t == "function" ? (l) => ({ ...l, frequencySettings: t(l.frequencySettings) }) : (l) => ({ ...l, frequencySettings: t }));
+  }, n = (t) => {
+    t && h((l) => ({
+      ...l,
+      startDate: t
+    }));
+  };
+  return /* @__PURE__ */ r.jsxs("div", { className: "w-full flex flex-col gap-6", children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "flex max-w-full  flex-wrap gap-4", children: [
+      /* @__PURE__ */ r.jsx("div", { className: "flex gap-2 items-end w-full justify-between", children: /* @__PURE__ */ r.jsx(
+        I,
+        {
+          selected: d?.startDate,
+          onSelect: n,
+          label: "Fecha inicio de generación",
+          inputProps: {
+            autoComplete: "off",
+            labelVariant: "static",
+            className: "mt-[11px] flex-1",
+            ...e.errors?.startDate ? {
+              variant: "error",
+              errorComponent: e.errors.startDate
+            } : {}
+          }
+        }
+      ) }),
+      /* @__PURE__ */ r.jsx(
+        f,
+        {
+          className: "min-w-full",
+          multiple: !1,
+          value: d.frequency,
+          options: Q,
+          label: "Repetir",
+          optionLabel: "label",
+          optionValue: "value",
+          onChange: o,
+          labelVariant: "static",
+          dropdownOptions: {
+            hideSearchBar: !0
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        className: "border-b border-neutral-strong-default w-full min-w-full "
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      F,
+      {
+        frequency: d.frequency,
+        frequencySettings: d.frequencySettings,
+        onChange: i,
+        errors: e.errors?.frequencySettings
+      }
+    )
+  ] });
+}, X = b(U);
+X.displayName = "RecurrentDatePicker";
+export {
+  X as RecurrentDatePicker
+};

package/dist/RecurrentDatePickerRRule.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/RecurrentDatePickerRRule'
+export {}