@base-framework/ui 1.0.231 → 1.0.233

package/dist/types/components/molecules/date-time/date-range-picker.d.ts

@@ -0,0 +1,10 @@
+/**
+ * DateRangePicker Atom
+ *
+ * This will create a date picker component.
+ *
+ * @type {typeof Veil}
+ */
+export const DateRangePicker: typeof Veil;
+export default DateRangePicker;
+import { Veil } from '../../atoms/veil.js';

package/dist/types/components/molecules/molecules.d.ts

@@ -24,6 +24,7 @@ export * from "./combobox/combobox.js";
 export * from "./counters/atoms.js";
 export * from "./counters/counter.js";
 export * from "./date-time/date-picker.js";
+export * from "./date-time/date-range-picker.js";
 export * from "./date-time/time-frame.js";
 export * from "./date-time/time-picker.js";
 export * from "./dialogs/confirmation.js";

package/dist/utils.es.js

@@ -1,6 +1,7 @@
-import { F as r, I as c, c as t } from "./image-scaler-BQ7WdtlV.js";
+import { F as e, c } from "./format-BueUWxwT.js";
+import { I as t } from "./image-scaler-DNyRgMye.js";
 export {
-  r as Format,
-  c as ImageScaler,
-  t as createWatcherCallback
+  e as Format,
+  t as ImageScaler,
+  c as createWatcherCallback
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.231",
+	"version": "1.0.233",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {

package/dist/calendar-Bn55oWBo.js

@@ -1,510 +0,0 @@
-import { Div as l, Img as j, Span as $, Button as I, OnState as W } from "@base-framework/atoms";
-import { Component as N, Data as z, Atom as Y, DateTime as B } from "@base-framework/base";
-import { B as m } from "./buttons-Cm9etaEG.js";
-import { Icons as S } from "./icons.es.js";
-const H = (e, t) => {
-  const n = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, s = t.getBoundingClientRect(), a = 10, r = globalThis.scrollX, i = globalThis.scrollY;
-  let c = n.left + r, g = n.bottom + i;
-  const d = globalThis.innerHeight - n.bottom, h = n.top;
-  return c + s.width > globalThis.innerWidth && (c = globalThis.innerWidth - s.width - a), d < s.height && h > d ? g = n.top + i - s.height - a : d < s.height && (g = n.bottom + i - (s.height - d) - a), { x: c, y: g };
-};
-class ht extends N {
-  /**
-   * This will set up the data.
-   *
-   * @returns {object}
-   */
-  setData() {
-    const t = this.parent.data || new z();
-    return t.set({
-      position: { x: 0, y: 0 }
-    }), t;
-  }
-  /**
-   * This will get the class size.
-   *
-   * @returns {string}
-   */
-  getSize() {
-    switch (this.size || "lg") {
-      // @ts-ignore
-      case "sm":
-        return "w-48";
-      // @ts-ignore
-      case "md":
-        return "w-64";
-      case "lg":
-        return "w-[250px]";
-      // @ts-ignore
-      case "xl":
-        return "w-96";
-      // @ts-ignore
-      case "2xl":
-        return "w-[400px]";
-      // @ts-ignore
-      case "fit":
-        return "w-fit";
-      // @ts-ignore
-      case "full":
-        return "w-full";
-    }
-  }
-  /**
-   * This will render the modal component.
-   *
-   * @returns {object}
-   */
-  render() {
-    const t = this.getSize();
-    return l({
-      class: `absolute inset-auto fadeIn mt-2 rounded-md p-0 shadow-lg bg-popover min-h-12 backdrop:bg-transparent text-inherit r z-30 ${t}`,
-      popover: "manual",
-      toggle: (n, { state: s }) => n.newState === "closed" ? s.open = !1 : null,
-      style: "top: [[position.y]]px; left: [[position.x]]px"
-    }, this.children);
-  }
-  /**
-   * This will setup the states.
-   *
-   * @returns {object}
-   */
-  setupStates() {
-    return {
-      open: {
-        id: this.parent.getId(),
-        callBack: (s) => {
-          this.state.open === !1 && this.destroy();
-        }
-      }
-    };
-  }
-  /**
-   * Updates the dropdown position.
-   *
-   * @returns {void}
-   */
-  updatePosition() {
-    const t = this.button ?? null, n = this.panel, s = H(t, n);
-    this.data.position = s;
-  }
-  /**
-   * This will run after the setup.
-   *
-   * @returns {void}
-   */
-  afterSetup() {
-    this.panel.showPopover(), this.updatePosition();
-  }
-  /**
-   * This will check if the element clicked was in the
-   * component of the button.
-   *
-   * @param {object} element
-   * @returns {boolean}
-   */
-  isOutsideClick(t) {
-    return !this.panel.contains(t) && this.button && !this.button.contains(t);
-  }
-  /**
-   * This will set up the events.
-   *
-   * @returns {array}
-   */
-  setupEvents() {
-    return [
-      ["click", document, (t) => {
-        this.isOutsideClick(t.target) && (this.state.open = !1);
-      }],
-      ["resize", globalThis, (t) => this.updatePosition()],
-      ["scroll", document, (t) => this.updatePosition()]
-    ];
-  }
-  /**
-   * This will override the set up to use the app shell.
-   *
-   * @param {object} container
-   */
-  setContainer(t) {
-    this.container = app.root;
-  }
-  /**
-   * This will hide the popover before destroying.
-   *
-   * @returns {void}
-   */
-  beforeDestroy() {
-    this.panel.hidePopover();
-  }
-}
-const R = Y(({ src: e, alt: t }) => e ? j({
-  class: "absolute w-full h-full rounded-full object-cover fadeIn",
-  src: e,
-  alt: t,
-  /**
-   * If there's an error loading the image, hide it.
-   */
-  error: (n) => n.target.style.display = "none"
-}) : null), X = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), O = (e) => !e || e.length < 2 ? e : X(e), E = (e) => $([e, (t, n) => {
-  n.textContent = O(t);
-}]), T = {
-  xs: "h-6 w-6",
-  sm: "h-8 w-8",
-  md: "h-12 w-12",
-  lg: "h-16 w-16",
-  xl: "h-24 w-24",
-  "2xl": "h-32 w-32",
-  "3xl": "h-48 w-48",
-  "4xl": "h-64 w-64",
-  default: "h-12 w-12"
-}, k = {
-  xs: "text-[7px]",
-  sm: "text-xs",
-  md: "text-base",
-  lg: "text-xl",
-  xl: "text-2xl",
-  "2xl": "text-3xl",
-  "3xl": "text-4xl",
-  "4xl": "text-5xl",
-  default: "text-base"
-}, G = (e) => T[e] || T.default, L = (e) => k[e] || k.default, U = (e, t = null, n = "md") => {
-  const s = O(e), a = L(n);
-  return l(
-    {
-      class: `
-			flex items-center justify-center w-full h-full rounded-full
-			bg-muted text-muted-foreground font-medium
-			${a}
-		`
-    },
-    [
-      t ? E(t) : $({ class: "uppercase" }, s)
-    ]
-  );
-}, dt = Y(({ src: e, alt: t, fallbackText: n, watcherFallback: s, size: a }) => {
-  const r = G(a);
-  return l(
-    {
-      class: `relative flex items-center justify-center ${r}`
-    },
-    [
-      R({ src: e, alt: t }),
-      U(n, s, a)
-    ]
-  );
-}), _ = ({ currentMonth: e, currentYear: t, onSelect: n }) => l(
-  { class: "grid grid-cols-3 gap-2" },
-  B.monthNames.map(
-    (s, a) => m(
-      {
-        click: (r) => {
-          r.preventDefault(), r.stopPropagation(), n(a);
-        },
-        variant: e === a ? "primary" : "ghost",
-        "aria-label": `Select ${s} ${t}`
-      },
-      s.substring(0, 3)
-    )
-  )
-), x = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), q = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), D = (e, t, n) => `${e}-${x(t + 1)}-${x(n)}`, J = (e) => e ? "bg-accent text-primary" : "", K = (e) => e ? "text-muted-foreground opacity-50" : "", Q = (e, t) => e === t, V = (e, t) => Q(e, t) ? "bg-primary text-primary-foreground" : "", Z = (e, t, n, s) => {
-  const a = V(t, s);
-  return a || (e ? J(e) : n ? K(n) : "text-foreground");
-}, C = (e) => {
-  const {
-    day: t,
-    currentDate: n,
-    date: s,
-    isToday: a,
-    isOutsideMonth: r,
-    select: i,
-    disabled: c
-  } = e;
-  return I(
-    {
-      class: `
-				flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md
-				${Z(a, n, r, s)}
-				hover:bg-muted/50 hover:text-muted-foreground focus:z-10
-                disabled:pointer-events-none disabled:opacity-50
-			`,
-      disabled: c || t === null,
-      "aria-label": t ? `Day ${t}` : null,
-      // Only call select if it's not disabled.
-      click: () => !c && i(s)
-    },
-    t.toString()
-  );
-}, M = (e, t, n, s) => e === s.date && t === s.month && n === s.year, tt = (e, t, n, s = !1) => {
-  const { year: a, month: r } = e, i = D(a, r, e.date), c = new Date(a, r, 1).getDay(), g = new Date(a, r + 1, 0).getDate(), d = new Date(a, r, 0).getDate(), h = [], y = r === 0 ? 11 : r - 1, w = r === 0 ? a - 1 : a;
-  for (let o = c - 1; o >= 0; o--) {
-    const u = d - o, f = M(u, y, w, t), p = new Date(w, y, u) < new Date(t.year, t.month, t.date), F = s && p;
-    h.push(
-      C({
-        day: u,
-        currentDate: i,
-        date: D(w, y, u),
-        isToday: f,
-        isOutsideMonth: !0,
-        select: n,
-        disabled: F
-      })
-    );
-  }
-  for (let o = 1; o <= g; o++) {
-    const u = M(o, r, a, t), f = new Date(a, r, o) < new Date(t.year, t.month, t.date), p = s && f;
-    h.push(
-      C({
-        day: o,
-        currentDate: i,
-        date: D(a, r, o),
-        isToday: u,
-        isOutsideMonth: !1,
-        select: n,
-        disabled: p
-      })
-    );
-  }
-  const v = r === 11 ? 0 : r + 1, b = r === 11 ? a + 1 : a, A = (7 - h.length % 7) % 7;
-  for (let o = 1; o <= A; o++) {
-    const u = M(o, v, b, t), f = new Date(b, v, o) < new Date(t.year, t.month, t.date), p = s && f;
-    h.push(
-      C({
-        day: o,
-        currentDate: i,
-        date: D(b, v, o),
-        isToday: u,
-        isOutsideMonth: !0,
-        select: n,
-        disabled: p
-      })
-    );
-  }
-  return h;
-}, P = ({ label: e, click: t }) => m(
-  {
-    class: `
-			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
-			opacity-50 hover:opacity-100 text-muted-foreground absolute
-			${e === "Previous" ? "left-1" : "right-1"}
-			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
-		  `,
-    click: t,
-    "aria-label": `${e} month`,
-    variant: "icon",
-    icon: e === "Previous" ? S.chevron.single.left : S.chevron.single.right
-  }
-), et = ({ onMonthClick: e, onYearClick: t, next: n, previous: s }) => l({ class: "flex items-center justify-center space-x-2 relative min-h-12 text-sm font-medium" }, [
-  m({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
-  m({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
-  P({ label: "Previous", click: s }),
-  P({ label: "Next", click: n })
-]), nt = (e) => l(
-  { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
-  e
-), st = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(nt), at = (e) => l({ class: "rdp w-full space-y-1" }, [
-  et({
-    onMonthClick: e.onMonthClick,
-    onYearClick: e.onYearClick,
-    next: e.next,
-    previous: e.previous
-  }),
-  l({
-    class: "flex flex-auto flex-col w-full",
-    onSet: [
-      "currentDate",
-      () => [
-        l({ class: "grid grid-cols-7" }, st()),
-        l(
-          { class: "grid grid-cols-7" },
-          tt(
-            e.current,
-            e.today,
-            e.select,
-            e.blockPriorDates
-          )
-        )
-      ]
-    ]
-  })
-]), rt = ({ currentMonth: e, currentYear: t, onSelect: n }) => {
-  const s = t - 50, a = Array.from({ length: 101 }, (r, i) => s + i);
-  return l(
-    { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
-    a.map(
-      (r) => m(
-        {
-          click: (i) => {
-            i.preventDefault(), i.stopPropagation(), n(r);
-          },
-          variant: r === t ? "primary" : "ghost",
-          "aria-label": `Select ${r}`
-        },
-        r.toString()
-      )
-    )
-  );
-};
-class gt extends N {
-  /**
-   * This will declare the props for the compiler.
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    this.selectedDate = null, this.selectedCallBack = null, this.blockPriorDates = !1;
-  }
-  /**
-   * This will get the selected data.
-   *
-   * @param {object} today
-   * @returns {Date}
-   */
-  getSelectedDate(t) {
-    const n = this.selectedDate ? new Date(q(this.selectedDate)) : t;
-    return new Date(n.getFullYear(), n.getMonth(), n.getDate());
-  }
-  /**
-   * This will set up the data for the calendar.
-   *
-   * @returns {Data}
-   */
-  setData() {
-    const t = /* @__PURE__ */ new Date(), n = this.getSelectedDate(t), s = n.getMonth();
-    return new z({
-      monthName: this.getMonthName(s),
-      currentDate: `${n.getFullYear()}-${s + 1}-${n.getDate()}`,
-      current: {
-        date: n.getDate(),
-        year: n.getFullYear(),
-        month: s
-      },
-      today: {
-        date: t.getDate(),
-        month: t.getMonth(),
-        year: t.getFullYear()
-      }
-    });
-  }
-  /**
-   * This will set up the states for the calendar.
-   *
-   * @return {object}
-   */
-  setupStates() {
-    return {
-      view: "calendar"
-      // 'calendar' | 'months' | 'years'
-    };
-  }
-  /**
-   * This will get the name of the month.
-   *
-   * @param {number} month
-   * @returns {string}
-   */
-  getMonthName(t) {
-    return B.monthNames[t];
-  }
-  /**
-   * This will go to the previous month.
-   *
-   * @returns {void}
-   */
-  goToPreviousMonth() {
-    const t = this.data;
-    let n = t.current.month, s = t.current.year;
-    n === 0 ? (n = 11, s--) : n--, this.setCurrentDate(n, s);
-  }
-  /**
-   * This will go to the next month.
-   *
-   * @returns {void}
-   */
-  goToNextMonth() {
-    const t = this.data;
-    let n = t.current.month, s = t.current.year;
-    n === 11 ? (n = 0, s++) : n++, this.setCurrentDate(n, s);
-  }
-  /**
-   * This will set the current month and year.
-   *
-   * @param {number} month
-   * @param {number} year
-   * @param {number} [date=null]
-   * @returns {void}
-   */
-  setCurrentDate(t, n, s = null) {
-    const a = this.data;
-    a.current.month = t, a.current.year = n, typeof s == "number" && (a.current.date = x(s)), a.currentDate = `${n}-${x(t + 1)}-${a.current.date}`, a.monthName = this.getMonthName(t);
-  }
-  /**
-   * This will select a date.
-   *
-   * @param {string} date
-   * @returns {void}
-   */
-  selectDate(t) {
-    const n = /* @__PURE__ */ new Date(t + "T00:00:00");
-    this.setCurrentDate(n.getMonth(), n.getFullYear(), n.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(this.data.currentDate);
-  }
-  /**
-   * This will render the calendar.
-   *
-   * @returns {object}
-   */
-  render() {
-    return l({ class: "calendar-container p-3 rounded-md border min-w-80" }, [
-      W("view", (t) => {
-        switch (t) {
-          case "months":
-            return _(
-              {
-                currentMonth: this.data.current.month,
-                currentYear: this.data.current.year,
-                onSelect: (n) => {
-                  this.setCurrentDate(n, this.data.current.year), this.state.view = "calendar";
-                }
-              }
-            );
-          case "years":
-            return rt(
-              {
-                currentMonth: this.data.current.month,
-                currentYear: this.data.current.year,
-                onSelect: (n) => {
-                  this.setCurrentDate(this.data.current.month, n), this.state.view = "calendar";
-                }
-              }
-            );
-          default:
-            return at({
-              current: this.data.current,
-              today: this.data.today,
-              select: (n) => this.selectDate(n),
-              next: () => this.goToNextMonth(),
-              previous: () => this.goToPreviousMonth(),
-              blockPriorDates: this.blockPriorDates || !1,
-              onMonthClick: (n) => {
-                n.preventDefault(), n.stopPropagation(), this.state.view = "months";
-              },
-              onYearClick: (n) => {
-                n.preventDefault(), n.stopPropagation(), this.state.view = "years";
-              }
-            });
-        }
-      })
-    ]);
-  }
-}
-export {
-  dt as A,
-  tt as C,
-  C as D,
-  D as F,
-  at as M,
-  ht as P,
-  nt as a,
-  gt as b,
-  q as c,
-  H as g,
-  x as p
-};