@base-framework/ui 1.0.1727 → 1.0.2000

package/dist/calendar-DQXME-2u.js

@@ -1,440 +0,0 @@
-import { Div as i, Img as F, Span as M, Button as j } from "@base-framework/atoms";
-import { Component as N, Data as z, Atom as k, DateTime as I } from "@base-framework/base";
-import { B as Y } from "./buttons-Cm9etaEG.js";
-import { Icons as T } from "./icons.es.js";
-const W = (e, t) => {
-  const s = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, n = t.getBoundingClientRect(), o = 10, r = globalThis.scrollX, l = globalThis.scrollY;
-  let c = s.left + r, f = s.bottom + l;
-  const h = globalThis.innerHeight - s.bottom, d = s.top;
-  return c + n.width > globalThis.innerWidth && (c = globalThis.innerWidth - n.width - o), h < n.height && d > h ? f = s.top + l - n.height - o : h < n.height && (f = s.bottom + l - (n.height - h) - o), { x: c, y: f };
-};
-class lt 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 i({
-      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: (s, { state: n }) => s.newState === "closed" ? n.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: (n) => {
-          this.state.open === !1 && this.destroy();
-        }
-      }
-    };
-  }
-  /**
-   * Updates the dropdown position.
-   *
-   * @returns {void}
-   */
-  updatePosition() {
-    const t = this.button ?? null, s = this.panel, n = W(t, s);
-    this.data.position = n;
-  }
-  /**
-   * 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 H = k(({ src: e, alt: t }) => e ? F({
-  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: (s) => s.target.style.display = "none"
-}) : null), R = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), B = (e) => !e || e.length < 2 ? e : R(e), X = (e) => M([e, (t, s) => {
-  s.textContent = B(t);
-}]), S = {
-  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"
-}, P = {
-  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"
-}, E = (e) => S[e] || S.default, G = (e) => P[e] || P.default, L = (e, t = null, s = "md") => {
-  const n = B(e), o = G(s);
-  return i(
-    {
-      class: `
-			flex items-center justify-center w-full h-full rounded-full
-			bg-muted text-muted-foreground font-medium
-			${o}
-		`
-    },
-    [
-      t ? X(t) : M({ class: "uppercase" }, n)
-    ]
-  );
-}, ct = k(({ src: e, alt: t, fallbackText: s, watcherFallback: n, size: o }) => {
-  const r = E(o);
-  return i(
-    {
-      class: `relative flex items-center justify-center ${r}`
-    },
-    [
-      H({ src: e, alt: t }),
-      L(s, n, o)
-    ]
-  );
-}), x = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), U = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), m = (e, t, s) => `${e}-${x(t + 1)}-${x(s)}`, q = (e) => e ? "bg-accent text-primary" : "", J = (e) => e ? "text-muted-foreground opacity-50" : "", K = (e, t) => e === t, Q = (e, t) => K(e, t) ? "bg-primary text-primary-foreground" : "", V = (e, t, s, n) => {
-  const o = Q(t, n);
-  return o || (e ? q(e) : s ? J(s) : "text-foreground");
-}, v = (e) => {
-  const {
-    day: t,
-    currentDate: s,
-    date: n,
-    isToday: o,
-    isOutsideMonth: r,
-    select: l,
-    disabled: c
-  } = e;
-  return j(
-    {
-      class: `
-				flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md
-				${V(o, s, r, n)}
-				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 && l(n)
-    },
-    t.toString()
-  );
-}, C = (e, t, s, n) => e === n.date && t === n.month && s === n.year, Z = (e, t, s, n = !1) => {
-  const { year: o, month: r } = e, l = m(o, r, e.date), c = new Date(o, r, 1).getDay(), f = new Date(o, r + 1, 0).getDate(), h = new Date(o, r, 0).getDate(), d = [], D = r === 0 ? 11 : r - 1, y = r === 0 ? o - 1 : o;
-  for (let a = c - 1; a >= 0; a--) {
-    const u = h - a, g = C(u, D, y, t), p = new Date(y, D, u) < new Date(t.year, t.month, t.date), A = n && p;
-    d.push(
-      v({
-        day: u,
-        currentDate: l,
-        date: m(y, D, u),
-        isToday: g,
-        isOutsideMonth: !0,
-        select: s,
-        disabled: A
-      })
-    );
-  }
-  for (let a = 1; a <= f; a++) {
-    const u = C(a, r, o, t), g = new Date(o, r, a) < new Date(t.year, t.month, t.date), p = n && g;
-    d.push(
-      v({
-        day: a,
-        currentDate: l,
-        date: m(o, r, a),
-        isToday: u,
-        isOutsideMonth: !1,
-        select: s,
-        disabled: p
-      })
-    );
-  }
-  const w = r === 11 ? 0 : r + 1, b = r === 11 ? o + 1 : o, O = (7 - d.length % 7) % 7;
-  for (let a = 1; a <= O; a++) {
-    const u = C(a, w, b, t), g = new Date(b, w, a) < new Date(t.year, t.month, t.date), p = n && g;
-    d.push(
-      v({
-        day: a,
-        currentDate: l,
-        date: m(b, w, a),
-        isToday: u,
-        isOutsideMonth: !0,
-        select: s,
-        disabled: p
-      })
-    );
-  }
-  return d;
-}, _ = (e) => i(
-  { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
-  e
-), $ = ({ label: e, click: t }) => Y(
-  {
-    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" ? T.chevron.single.left : T.chevron.single.right
-  }
-), tt = ({ next: e, previous: t }) => i({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
-  M("[[monthName]] [[current.year]]"),
-  $({
-    label: "Previous",
-    click: t
-  }),
-  $({
-    label: "Next",
-    click: e
-  })
-]), et = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(_), st = (e) => i({ class: "rdp w-full space-y-1" }, [
-  tt({
-    next: e.next,
-    previous: e.previous
-  }),
-  i({
-    class: "flex flex-auto flex-col w-full",
-    onSet: [
-      "currentDate",
-      () => [
-        i({ class: "grid grid-cols-7" }, et()),
-        i(
-          { class: "grid grid-cols-7" },
-          Z(
-            e.current,
-            e.today,
-            e.select,
-            e.blockPriorDates
-          )
-        )
-      ]
-    ]
-  })
-]);
-class ut 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 s = this.selectedDate ? new Date(U(this.selectedDate)) : t;
-    return new Date(s.getFullYear(), s.getMonth(), s.getDate());
-  }
-  /**
-   * This will set up the data for the calendar.
-   *
-   * @returns {Data}
-   */
-  setData() {
-    const t = /* @__PURE__ */ new Date(), s = this.getSelectedDate(t), n = s.getMonth();
-    return new z({
-      monthName: this.getMonthName(n),
-      currentDate: `${s.getFullYear()}-${n + 1}-${s.getDate()}`,
-      current: {
-        date: s.getDate(),
-        year: s.getFullYear(),
-        month: n
-      },
-      today: {
-        date: t.getDate(),
-        month: t.getMonth(),
-        year: t.getFullYear()
-      }
-    });
-  }
-  /**
-   * This will get the name of the month.
-   *
-   * @param {number} month
-   * @returns {string}
-   */
-  getMonthName(t) {
-    return I.monthNames[t];
-  }
-  /**
-   * This will go to the previous month.
-   *
-   * @returns {void}
-   */
-  goToPreviousMonth() {
-    const t = this.data;
-    let s = t.current.month, n = t.current.year;
-    s === 0 ? (s = 11, n--) : s--, this.setCurrentDate(s, n);
-  }
-  /**
-   * This will go to the next month.
-   *
-   * @returns {void}
-   */
-  goToNextMonth() {
-    const t = this.data;
-    let s = t.current.month, n = t.current.year;
-    s === 11 ? (s = 0, n++) : s++, this.setCurrentDate(s, n);
-  }
-  /**
-   * This will set the current month and year.
-   *
-   * @param {number} month
-   * @param {number} year
-   * @param {number} [date=null]
-   * @returns {void}
-   */
-  setCurrentDate(t, s, n = null) {
-    const o = this.data;
-    o.current.month = t, o.current.year = s, typeof n == "number" && (o.current.date = x(n)), o.currentDate = `${s}-${x(t + 1)}-${o.current.date}`, o.monthName = this.getMonthName(t);
-  }
-  /**
-   * This will select a date.
-   *
-   * @param {string} date
-   * @returns {void}
-   */
-  selectDate(t) {
-    const s = /* @__PURE__ */ new Date(t + "T00:00:00");
-    this.setCurrentDate(s.getMonth(), s.getFullYear(), s.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(this.data.currentDate);
-  }
-  /**
-   * This will render the calendar.
-   *
-   * @returns {object}
-   */
-  render() {
-    return i({ class: "calendar-container p-3 rounded-md border min-w-80" }, [
-      st({
-        current: this.data.current,
-        today: this.data.today,
-        select: (t) => this.selectDate(t),
-        next: () => this.goToNextMonth(),
-        previous: () => this.goToPreviousMonth(),
-        blockPriorDates: this.blockPriorDates || !1
-      })
-    ]);
-  }
-}
-export {
-  ct as A,
-  Z as C,
-  v as D,
-  m as F,
-  st as M,
-  lt as P,
-  _ as a,
-  ut as b,
-  U as c,
-  W as g,
-  x as p
-};

package/dist/inputs-Dmu4Z-7-.js

@@ -1,209 +0,0 @@
-import { Div as l, Label as d, Checkbox as u, Span as g, OnState as p, I as x, Input as r, Textarea as k } from "@base-framework/atoms";
-import { Jot as y, Atom as s } from "@base-framework/base";
-import { Icons as v } from "./icons.es.js";
-const $ = "flex h-10 w-full px-3 py-2 text-sm", b = "rounded-md border border-input bg-background", n = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", a = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", f = "placeholder:text-muted-foreground", h = `${$} ${b} ${n} ${f} ${a}`, I = ({ id: e, checked: o, bind: t, required: i }) => u({
-  id: e,
-  cache: "checkbox",
-  class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
-  aria: {
-    checked: ["checked"]
-  },
-  required: i,
-  checked: o,
-  bind: t
-}), C = () => g({ class: "absolute text-xs pointer-events-none" }, [
-  p(
-    "checked",
-    (e) => e ? x({
-      class: "w-2 h-2 pointer-events-none",
-      html: v.check
-    }) : null
-  )
-]), w = ({ id: e, bind: o, checked: t, required: i, clickHandler: m }) => l({
-  class: `relative flex items-center justify-center w-5 h-5 transition-colors duration-200 border-primary hover:border-accent-foreground
-			${b}
-			${n}
-			${a}`.trim(),
-  onState: [
-    "checked",
-    {
-      "bg-primary": !0,
-      "text-primary-foreground": !0,
-      "border-primary": !0
-    }
-  ],
-  role: "checkbox",
-  aria: {
-    checked: ["checked"]
-  },
-  tabIndex: 0,
-  click: m
-}, [
-  I({ bind: o, checked: t, id: e, required: i }),
-  C()
-]), T = ({ id: e, label: o, clickHandler: t }) => d({
-  class: "text-base cursor-pointer",
-  htmlFor: e,
-  click: t
-}, o), F = y(
-  {
-    /**
-     * This will initialize the state of the checkbox.
-     *
-     * @returns {object}
-     */
-    state() {
-      return {
-        // @ts-ignore
-        checked: this.checked ?? !1
-      };
-    },
-    /**
-     * This is added to check the checkbox after the component is rendered
-     * to see if the bind updated the checked value.
-     *
-     * @returns {void}
-     */
-    after() {
-      this.state.checked = this.checkbox.checked;
-    },
-    /**
-     * This will handle the click event for the checkbox.
-     *
-     * @param {object} e
-     * @returns {void}
-     */
-    clickHandler(e) {
-      e.preventDefault(), e.stopPropagation(), this.state.toggle("checked"), this.checkbox.checked = this.state.checked, typeof this.onChange == "function" && this.onChange(this.state.checked, this);
-    },
-    /**
-     * This will render the checkbox component.
-     *
-     * @returns {object}
-     */
-    render() {
-      const e = this.getId(), o = (t) => this.clickHandler(t);
-      return l({ class: `flex items-center space-x-2 cursor-pointer ${this.class || ""}` }, [
-        w({
-          id: e,
-          // @ts-ignore
-          bind: this.bind,
-          // @ts-ignore
-          checked: this.state.checked,
-          // @ts-ignore
-          required: this.required,
-          // @ts-ignore
-          clickHandler: o
-        }),
-        // @ts-ignore
-        this.label && T({ id: e, label: this.label, clickHandler: o })
-      ]);
-    }
-  }
-), H = (e) => {
-  if (!e || e.length === 0) return "";
-  const t = e.replace(/\D/g, "").match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
-  return t ? t[2] ? `(${t[1]}) ${t[2]}${t[3] ? "-" + t[3] : ""}` : t[1] || "" : e;
-}, D = (e) => {
-  const o = e.target, t = H(o.value);
-  t && (o.value = t);
-}, c = s((e) => r({
-  ...e,
-  class: `${h} ${e.class || ""}`.trim()
-})), L = s((e) => c({
-  ...e,
-  type: "tel",
-  name: e.name || "Phone",
-  label: e.label || "Phone",
-  placeholder: "(555) 555-5555",
-  pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
-  keyup: D
-})), M = s((e) => c({
-  ...e,
-  type: "email",
-  name: e.name || "Email",
-  label: e.label || "Email",
-  placeholder: "Email address"
-})), q = s((e) => k({
-  ...e,
-  as: "textarea",
-  class: `flex w-full h-24 px-3 py-2 text-sm rounded-md border border-input bg-background ${n} ${f} ${a} ${e.class || ""}`.trim()
-})), R = (e = {}) => l({ class: "flex items-center space-x-2" }, [
-  r({
-    ...e,
-    type: "radio",
-    class: "cursor-pointer appearance-none h-4 w-4 border rounded-full checked:border-primary checked:bg-primary focus:ring focus:ring-primary".trim()
-  }),
-  e.label && d({ forHTML: e.value, class: "cursor-pointer" }, e.label)
-]), U = s((e) => r({
-  ...e,
-  type: "date",
-  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
-})), W = s((e) => r({
-  ...e,
-  type: "time",
-  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
-})), j = s((e) => r({
-  ...e,
-  type: "datetime-local",
-  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
-})), z = s((e) => r({
-  ...e,
-  type: "month",
-  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
-})), A = s((e) => r({
-  ...e,
-  type: "week",
-  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
-})), B = s((e) => c({
-  ...e,
-  type: "number"
-})), J = s((e) => c({
-  ...e,
-  type: "password"
-})), O = s((e) => c({
-  ...e,
-  type: "search"
-})), G = s((e) => c({
-  ...e,
-  type: "url"
-})), K = s((e) => c({
-  ...e,
-  type: "hidden"
-})), Q = s((e) => r({
-  ...e,
-  type: "color",
-  class: `border rounded-md border-input bg-background text-foreground p-0 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
-}));
-s((e) => u({
-  ...e,
-  class: `flex h-4 w-4 rounded-md border border-input bg-background text-foreground ${n} ${a} ${e.class || ""}`.trim()
-}));
-const E = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", V = s((e) => r({
-  ...e,
-  type: "file",
-  class: `${h} ${E} ${e.class || ""}`.trim()
-}));
-export {
-  F as C,
-  U as D,
-  M as E,
-  V as F,
-  K as H,
-  c as I,
-  z as M,
-  B as N,
-  J as P,
-  R,
-  O as S,
-  L as T,
-  G as U,
-  A as W,
-  q as a,
-  W as b,
-  j as c,
-  Q as d,
-  a as e,
-  n as f,
-  h as g
-};

package/dist/veil-D4dRxILB.js

@@ -1,21 +0,0 @@
-import { Jot as r, Component as i } from "@base-framework/base";
-class l extends i {
-  /**
-   * This will set the component context.
-   *
-   * @param {object|null} context
-   * @returns {object|null}
-   */
-  setContext(p) {
-    var n, a, s, o;
-    if (this.data)
-      return null;
-    const e = ((n = this == null ? void 0 : this.parent) == null ? void 0 : n.data) ?? ((s = (a = this == null ? void 0 : this.parent) == null ? void 0 : a.context) == null ? void 0 : s.data) ?? ((o = this == null ? void 0 : this.parent) == null ? void 0 : o.state) ?? null;
-    return e ? { data: e } : null;
-  }
-}
-const c = (t) => r(t, l);
-export {
-  l as V,
-  c as a
-};