@base-framework/ui 1.1.14 → 1.1.15

package/dist/signature-panel-CVq5N5M1.js

@@ -0,0 +1,1364 @@
+import { Div as l, Button as b, On as j, Span as T, Nav as f, Ul as p, Section as y, Li as w, Canvas as z } from "@base-framework/atoms";
+import { Component as k, Data as I, DateTime as U, router as v, NavLink as S, base as L, Dom as B } from "@base-framework/base";
+import { B as C } from "./buttons-snATS4J5.js";
+import { Icons as D } from "./icons.es.js";
+import { O as A } from "./simple-search-input-CuC8q0fJ.js";
+import { V as u, H as F } from "./image-BhZbKYDj.js";
+import { IntervalTimer as O } from "@base-framework/organisms";
+class Pt extends k {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.class = "";
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return l({ class: this.class || "" }, this.children);
+  }
+}
+const Y = (s) => {
+  const t = new Date(s, 11, 31), e = new Date(s, 0, 1);
+  return t.getDay() === 4 || // December 31 is a Thursday
+  e.getDay() === 4;
+}, R = (s) => {
+  const t = new Date(s.valueOf()), e = (t.getDay() + 6) % 7;
+  t.setDate(t.getDate() - e + 3);
+  const i = t.getFullYear(), a = new Date(i, 0, 4);
+  a.setDate(a.getDate() - (a.getDay() + 6) % 7);
+  const n = Math.ceil((t - a) / 6048e5) + 1;
+  return n > 52 && !Y(i) ? {
+    weekNumber: 1,
+    year: i + 1
+  } : {
+    weekNumber: n,
+    year: i
+  };
+}, E = (s, t, e) => {
+  if (e === 0) return [];
+  const i = new Date(s, t, 0).getDate();
+  return Array.from(
+    { length: e },
+    (a, n) => new Date(s, t - 1, i - e + n + 1)
+  );
+}, G = (s, t, e) => Array.from({ length: e }, (i, a) => new Date(s, t + 1, a + 1)), P = (s, t) => {
+  const e = new Date(t, 0, 4), i = (e.getDay() + 6) % 7, a = new Date(e);
+  a.setDate(e.getDate() - i);
+  const n = new Date(a);
+  return n.setDate(a.getDate() + (s - 1) * 7), n;
+}, Wt = (s, t) => {
+  const e = new Date(s, t, 1).getDay(), i = new Date(s, t + 1, 0).getDate(), a = [];
+  let n = [];
+  for (let o = 1 - e; o <= i; o++) {
+    const h = new Date(s, t, o);
+    n.push(o > 0 ? h : null), (n.length === 7 || o === i) && (a.push([...n]), n = []);
+  }
+  return a;
+}, Tt = (s, t) => {
+  const e = new Date(s, t + 1, 0).getDate(), i = [];
+  let a = [];
+  for (let n = 1; n <= e; n++)
+    a.push(new Date(s, t, n)), a.length === 7 && (i.push(a), a = []);
+  return a.length > 0 && i.push(a), i;
+}, V = (s, t, e) => {
+  const i = /* @__PURE__ */ new Date();
+  return i.getDate() === s && i.getMonth() === t && i.getFullYear() === e;
+}, X = ({ day: s, month: t, year: e, weekNumber: i, selectWeek: a }) => {
+  const n = V(s, t, e);
+  return b({
+    text: s || "",
+    disabled: !s,
+    class: `
+			px-2 py-1 text-center rounded-md
+			${n ? "bg-accent text-accent-foreground" : ""}
+			hover:bg-primary hover:text-primary-foreground
+		`,
+    click: () => a(i, e)
+  });
+}, H = (s, t) => {
+  const e = new Date(s, t, 1).getDay(), i = new Date(s, t + 1, 0).getDate(), a = E(s, t, e), n = Array.from({ length: i }, (c, m) => new Date(s, t, m + 1)), o = (a.length + n.length) % 7, h = o === 0 ? 0 : 7 - o, r = G(s, t, h), d = [...a, ...n, ...r], g = [];
+  for (let c = 0; c < d.length; c += 7) {
+    const m = d.slice(c, c + 7), x = m.find((N) => N) || new Date(s, t, 1), { weekNumber: M, year: $ } = R(x);
+    g.push({
+      weekNumber: M,
+      year: $,
+      days: m
+    });
+  }
+  return g;
+}, q = ({ selectWeek: s }) => j("month", (t, e, { data: i }) => {
+  const { year: a, month: n, currentDate: o } = i, h = H(a, n);
+  return l(
+    { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
+    [
+      // Header row: "Week" label + day-of-week labels
+      l({ class: "text-xs text-center col-span-1 text-muted-foreground flex items-center" }, "Week"),
+      l(
+        {
+          class: "grid grid-cols-7 col-span-7 text-center text-muted-foreground items-center"
+        },
+        ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(
+          (r) => T({ class: "px-1 py-1", text: r })
+        )
+      ),
+      // Render each "week" row
+      ...h.map(
+        ({ weekNumber: r, days: d, year: g }) => l({
+          class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
+          onSet: ["currentWeek", {
+            ring: r
+          }]
+        }, [
+          // Left column: ISO week number
+          l({
+            class: "font-medium text-center col-span-1 rounded-sm cursor-pointer",
+            click: () => s(r, g),
+            // If you have a 'currentWeek' state, you can highlight it with 'onSet'
+            onSet: ["currentWeek", {
+              "text-primary-foreground": r,
+              "bg-primary": r
+            }],
+            text: r ? `W${r}` : ""
+          }),
+          // The 7 cells for each day in the row
+          l(
+            { class: "grid grid-cols-7 col-span-7 text-center" },
+            d.map(
+              (c) => X({
+                year: c?.getFullYear() || null,
+                month: c?.getMonth() || null,
+                day: c?.getDate() || null,
+                weekNumber: r,
+                selectWeek: s
+              })
+            )
+          )
+        ])
+      )
+    ]
+  );
+}), W = ({ label: s, click: t }) => C(
+  {
+    class: `
+			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
+			opacity-50 hover:opacity-100 text-muted-foreground absolute
+			${s === "Previous" ? "left-1" : "right-1"}
+			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+		  `,
+    click: t,
+    "aria-label": `${s} month`,
+    variant: "icon",
+    icon: s === "Previous" ? D.chevron.single.left : D.chevron.single.right
+  }
+), _ = ({ next: s, previous: t }) => l({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+  T("[[monthName]] [[year]]"),
+  W({
+    label: "Previous",
+    click: t
+  }),
+  W({
+    label: "Next",
+    click: s
+  })
+]);
+class Ct extends k {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.selectedDate = null, this.selectedWeek = null, this.selectedCallBack = null;
+  }
+  /**
+   * Initializes the calendar data.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    const t = /* @__PURE__ */ new Date(), e = this.selectedWeek || this.calculateCurrentWeek(t), i = P(e, t.getFullYear());
+    return new I({
+      monthName: this.getMonthName(i.getMonth()),
+      year: i.getFullYear(),
+      month: i.getMonth(),
+      currentDate: i.getDate(),
+      currentWeek: e
+    });
+  }
+  /**
+   * Determines the current selected date.
+   *
+   * @param {Date} today
+   * @returns {Date}
+   */
+  getSelectedDate(t) {
+    const e = this.selectedDate ? new Date(this.selectedDate) : t;
+    return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+  }
+  /**
+   * Calculates the ISO week number for a given date.
+   *
+   * @param {Date} date
+   * @returns {number}
+   */
+  calculateCurrentWeek(t) {
+    const e = new Date(t.valueOf()), i = (t.getDay() + 6) % 7;
+    e.setDate(e.getDate() - i + 3);
+    const a = e.valueOf();
+    return e.setMonth(0, 1), e.getDay() !== 4 && e.setMonth(0, 1 + (4 - e.getDay() + 7) % 7), 1 + Math.ceil((a - e) / 6048e5);
+  }
+  /**
+   * Gets the name of the month.
+   *
+   * @param {number} month
+   * @returns {string}
+   */
+  getMonthName(t) {
+    return U.monthNames[t];
+  }
+  /**
+   * Updates the calendar to show the previous month.
+   *
+   * @returns {void}
+   */
+  goToPreviousMonth() {
+    const t = this.data;
+    let { year: e, month: i } = t;
+    i === 0 ? (i = 11, e--) : i--, this.setDate(i, e);
+  }
+  /**
+   * Updates the calendar to show the next month.
+   *
+   * @returns {void}
+   */
+  goToNextMonth() {
+    const t = this.data;
+    let { year: e, month: i } = t;
+    i === 11 ? (i = 0, e++) : i++, this.setDate(i, e);
+  }
+  /**
+   * Sets the selected date.
+   *
+   * @param {number} month
+   * @param {number} year
+   * @param {number|null} [date=null]
+   * @returns {void}
+   */
+  setDate(t, e, i) {
+    this.data.set({
+      year: e,
+      month: t,
+      monthName: this.getMonthName(t)
+    }), i && (this.data.currentDate = i);
+  }
+  /**
+   * Handles week selection.
+   *
+   * @param {number} weekNumber
+   * @returns {void}
+   */
+  selectWeek(t, e) {
+    this.data.currentWeek = t;
+    const i = P(t, e);
+    this.setDate(i.getMonth(), i.getFullYear(), i.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(t);
+  }
+  /**
+   * Renders the WeekCalendar component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return l({ class: "week-calendar-container border rounded-md p-3" }, [
+      _({
+        next: () => this.goToNextMonth(),
+        previous: () => this.goToPreviousMonth()
+      }),
+      q({
+        selectWeek: (t, e) => this.selectWeek(t, e)
+      })
+    ]);
+  }
+}
+const J = (s, t) => t.includes(s), K = (s, t, e) => s.exact ? e === t : J(t, e), Q = ({ text: s, href: t, exact: e, hidden: i }) => new S({
+  text: s,
+  href: t,
+  exact: e,
+  dataSet: ["selected", ["state", !0, "active"]],
+  class: `${i ? "hidden" : "inline-flex"} items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring focus-visible:ring-offset-background hover:bg-primary hover:text-primary-foreground disabled:opacity-50 disabled:pointer-events-none data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm`
+});
+class Mt extends k {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "";
+  }
+  /**
+   * This will configure the links.
+   */
+  beforeSetup() {
+    this.links = [];
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return f(
+      { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
+      [
+        p({
+          class: "flex gap-x-4",
+          map: [this.options, (t) => this.addLink(t)],
+          watch: {
+            value: ["[[path]]", v.data],
+            callBack: this.updateLinks.bind(this)
+          }
+        })
+      ]
+    );
+  }
+  /**
+   * This will update the links.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const t = v.data.path;
+    this.updateLinks(t);
+  }
+  /**
+   * This will update the links based on the current path.
+   *
+   * @param {string} path
+   * @returns {void}
+   */
+  updateLinks(t) {
+    let e = !1;
+    this.deactivateAllLinks();
+    for (const i of this.links) {
+      if (!i.rendered)
+        continue;
+      K(i, i.getLinkPath(), t) ? (this.updateLink(i, !0), e = !0) : this.updateLink(i, !1);
+    }
+    !e && this.links[0] && this.updateLink(this.links[0], !0);
+  }
+  /**
+   * This will deactivate all links.
+   *
+   * @returns {void}
+   */
+  deactivateAllLinks() {
+    for (const t of this.links)
+      this.updateLink(t, !1);
+  }
+  /**
+   * This will update the link's active state.
+   *
+   * @param {object} link
+   * @param {boolean} selected
+   * @returns {void}
+   */
+  updateLink(t, e) {
+    t.update(e);
+  }
+  /**
+   * This will add a link to the navigation.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addLink({ label: t, href: e, exact: i, hidden: a }) {
+    const n = Q({ text: t, href: e, exact: i, hidden: a });
+    return this.links.push(n), n;
+  }
+  /**
+   * This will clear the links.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.links = [];
+  }
+}
+class $t extends A {
+  /**
+   * This will get the overlay type.
+   *
+   * @returns {string}
+   */
+  getClassName() {
+    return "overlay relative inline top-[0px] left-0 bottom-0 right-0 flex-col bg-background z-20 lg:left-[64px] lg:top-0 will-change-contents " + (this.class || "");
+  }
+  /**
+   * This will setup and render the component.
+   *
+   * @param {object} container
+   * @returns {void}
+   */
+  setup(t) {
+    this.container = t, this.initialize();
+  }
+}
+const Z = (s) => w(
+  {
+    class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
+    dataStateSet: ["selected", ["state", s.value, "active"]]
+  },
+  [
+    b({
+      class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md",
+      onState: ["selected", { selected: s.value }],
+      click: (t) => s.callBack(s.value)
+    }, s.label)
+  ]
+), tt = (s, t) => (s.callBack = t, Z(s)), et = (s) => f({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${s.class}` }, [
+  p({ class: "flex flex-auto flex-row", map: [s.options, (t) => tt(t, s.callBack)] })
+]);
+class Nt extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.callBack = null;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.select.bind(this);
+    return l({ class: "" }, [
+      et({
+        class: this.class,
+        options: this.options,
+        callBack: t
+      }),
+      y({
+        class: "tab-content",
+        onState: ["selected", this.updateContent.bind(this)]
+      })
+    ]);
+  }
+  /**
+   * This will get the first value.
+   *
+   * @returns {*}
+   */
+  getFirstValue() {
+    return this.options[0]?.value;
+  }
+  /**
+   * This will update the component.
+   *
+   * @returns {void}
+   */
+  update() {
+    const t = this.state.get("selected");
+    this.select(null), this.select(t);
+  }
+  /**
+   * This will select a value.
+   *
+   * @param {*} value
+   * @returns {void}
+   */
+  select(t) {
+    this.state.selected = t;
+    const e = this.onSelect;
+    typeof e == "function" && e(t, this.parent);
+  }
+  /**
+   * This will update the content.
+   *
+   * @param {*} value
+   * @returns {object}
+   */
+  updateContent(t) {
+    const e = this.options;
+    if (!e || e.length < 1)
+      return;
+    const i = e[0];
+    for (const a of e)
+      if (a.value === t)
+        return a.layout;
+    return i.layout;
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    const t = this.callBack, e = typeof t;
+    return {
+      selected: {
+        state: this.getFirstValue(),
+        callBack(i) {
+          e === "function" && t(i);
+        }
+      }
+    };
+  }
+}
+const st = (s) => w(
+  {
+    class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
+    dataStateSet: ["selected", ["state", s.value, "active"]]
+  },
+  [
+    b({
+      class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
+      onState: ["selected", { selected: s.value }],
+      click: (t) => s.callBack(s.value),
+      disabled: s.disabled
+    }, s.label)
+  ]
+), it = (s, t) => (s.callBack = t, st(s)), at = (s) => f({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${s.class}` }, [
+  p({ class: "flex flex-auto flex-row", map: [s.options, (t) => it(t, s.callBack)] })
+]);
+class jt extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.onSelect = null;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.select.bind(this);
+    return at({
+      class: this.class,
+      options: this.options,
+      callBack: t
+    });
+  }
+  /**
+   * This will select a value.
+   *
+   * @param {*} value
+   * @returns {void}
+   */
+  select(t) {
+    this.state.selected = t, typeof this.onSelect == "function" && this.onSelect(t, this.parent);
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      selected: this.options[0]?.value || null
+    };
+  }
+}
+const nt = (s, t) => new RegExp(`${s}($|/|\\.).*`).test(t), ot = (s, t) => {
+  const e = s.getLinkPath();
+  return s.exact ? t === e : nt(e, t);
+}, rt = ({ text: s, href: t, exact: e }) => new S({
+  text: s,
+  href: t,
+  exact: e,
+  dataSet: ["selected", ["state", !0, "active"]],
+  class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm"
+});
+class lt extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.onSelect = null;
+  }
+  /**
+   * This will configure the links.
+   */
+  beforeSetup() {
+    this.links = [];
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return f({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
+      p({
+        class: "flex flex-auto flex-row",
+        map: [this.options, (t) => this.addLink(t)],
+        watch: {
+          value: ["[[path]]", v.data],
+          callBack: this.updateLinks.bind(this)
+        }
+      })
+    ]);
+  }
+  /**
+   * This will update the links.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const t = v.data.path;
+    this.updateLinks(t);
+  }
+  /**
+   * This will update the links.
+   *
+   * @param {string} value
+   * @returns {void}
+   */
+  updateLinks(t) {
+    let e = !1, i = this.links[0];
+    this.deactivateAllLinks();
+    for (const a of this.links)
+      if (a.rendered !== !1 && (e = ot(a, t), e === !0)) {
+        this.updateLink(a, !0);
+        break;
+      }
+    e !== !0 && i && this.updateLink(i, !0);
+  }
+  /**
+   * This will deactivate all links.
+   *
+   * @returns {void}
+   */
+  deactivateAllLinks() {
+    for (const t of this.links)
+      this.updateLink(t, !1);
+  }
+  /**
+   * This will update the link.
+   *
+   * @param {object} link
+   * @param {boolean} selected
+   * @returns {void}
+   */
+  updateLink(t, e) {
+    t.update(e);
+  }
+  /**
+   * This will add a link.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addLink({ label: t, href: e, exact: i }) {
+    const a = rt({ text: t, href: e, exact: i });
+    return this.links.push(a), a;
+  }
+  /**
+   * This will remove all the links.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.links = [];
+  }
+}
+class zt extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "";
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return l({ class: "tab-panel" }, [
+      new lt({
+        class: this.class,
+        options: this.options
+      }),
+      y({
+        class: "tab-content",
+        switch: this.addGroup()
+      })
+    ]);
+  }
+  /**
+   * This will add the group.
+   *
+   * @returns {array}
+   */
+  addGroup() {
+    let t;
+    const e = [], i = this.options;
+    for (let a = 0, n = i.length; a < n; a++)
+      t = i[a], e.push(
+        {
+          uri: t.uri || t.href,
+          component: t.component,
+          title: t.title || null,
+          persist: !0
+        }
+      );
+    return e;
+  }
+}
+const ct = (s) => w(
+  {
+    class: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100",
+    dataStateSet: ["selected", ["state", s.value, "active"]]
+  },
+  [
+    b({
+      class: "flex flex-auto justify-center items-center px-4 py-3 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+      onState: ["selected", { selected: s.value }],
+      click: (t) => s.callBack(s.value)
+    }, s.label)
+  ]
+), ht = (s, t) => (s.callBack = t, ct(s)), dt = (s) => f({ class: `border-b border-border ${s.class}` }, [
+  p({ class: "flex flex-row items-center", map: [s.options, (t) => ht(t, s.callBack)] })
+]);
+class It extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.onSelect = null;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.select.bind(this);
+    return l({ class: "underlined-button-tab-panel flex flex-auto flex-col" }, [
+      dt({
+        class: this.class,
+        options: this.options,
+        callBack: t
+      }),
+      y({
+        class: "tab-content pt-6 flex flex-auto flex-col",
+        onState: ["selected", this.updateContent.bind(this)]
+      })
+    ]);
+  }
+  /**
+   * This will get the first value.
+   *
+   * @returns {*}
+   */
+  getFirstValue() {
+    return this.options[0]?.value;
+  }
+  /**
+   * This will select an option.
+   *
+   * @param {*} value
+   * @returns {void}
+   */
+  select(t) {
+    this.state.selected = t;
+    const e = this.onSelect;
+    typeof e == "function" && e(t, this.parent);
+  }
+  /**
+   * This will update the content.
+   *
+   * @param {*} value
+   * @returns {object}
+   */
+  updateContent(t) {
+    const e = this.options;
+    if (!e || e.length < 1)
+      return;
+    const i = e[0];
+    for (const a of e)
+      if (a.value === t)
+        return a.component;
+    return i.component;
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    const t = this.onSelect, e = typeof t;
+    return {
+      selected: {
+        state: this.getFirstValue(),
+        callBack(i) {
+          e === "function" && t(i);
+        }
+      }
+    };
+  }
+}
+const ut = (s) => w(
+  {
+    class: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100",
+    dataStateSet: ["selected", ["state", s.value, "active"]]
+  },
+  [
+    b({
+      class: "flex flex-auto justify-center items-center px-4 py-3 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
+      onState: ["selected", { selected: s.value }],
+      click: (t) => s.callBack(s.value),
+      disabled: s.disabled
+    }, s.label)
+  ]
+), ft = (s, t) => (s.callBack = t, ut(s)), pt = (s) => f({ class: `border-b border-border ${s.class}` }, [
+  p({ class: "flex flex-row items-center", map: [s.options, (t) => ft(t, s.callBack)] })
+]);
+class Ut extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.onSelect = null;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.select.bind(this);
+    return pt({
+      class: this.class,
+      options: this.options,
+      callBack: t
+    });
+  }
+  /**
+   * This will select an option.
+   *
+   * @param {*} value
+   * @returns {void}
+   */
+  select(t) {
+    this.state.selected = t, typeof this.onSelect == "function" && this.onSelect(t, this.parent);
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      selected: this.options[0]?.value || null
+    };
+  }
+}
+const gt = (s, t) => new RegExp(`${s}($|/|\\.).*`).test(t), mt = (s, t) => {
+  const e = s.getLinkPath();
+  return s.exact ? t === e : gt(e, t);
+}, vt = ({ text: s, href: t, exact: e }) => new S({
+  text: s,
+  href: t,
+  exact: e,
+  dataSet: ["selected", ["state", !0, "active"]],
+  class: "relative inline-flex items-center justify-center whitespace-nowrap px-4 py-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100"
+});
+class bt extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.onSelect = null;
+  }
+  /**
+   * This will configure the links.
+   */
+  beforeSetup() {
+    this.links = [];
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return f({ class: `border-b border-border ${this.class}` }, [
+      p({
+        class: "flex flex-row items-center",
+        map: [this.options, (t) => this.addLink(t)],
+        watch: {
+          value: ["[[path]]", v.data],
+          callBack: this.updateLinks.bind(this)
+        }
+      })
+    ]);
+  }
+  /**
+   * This will update the links.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const t = v.data.path;
+    this.updateLinks(t);
+  }
+  /**
+   * This will update the links.
+   *
+   * @param {string} value
+   * @returns {void}
+   */
+  updateLinks(t) {
+    let e = !1, i = this.links[0];
+    this.deactivateAllLinks();
+    for (const a of this.links)
+      if (a.rendered !== !1 && (e = mt(a, t), e === !0)) {
+        this.updateLink(a, !0);
+        break;
+      }
+    e !== !0 && i && this.updateLink(i, !0);
+  }
+  /**
+   * This will deactivate all links.
+   *
+   * @returns {void}
+   */
+  deactivateAllLinks() {
+    for (const t of this.links)
+      this.updateLink(t, !1);
+  }
+  /**
+   * This will update the link.
+   *
+   * @param {object} link
+   * @param {boolean} selected
+   * @returns {void}
+   */
+  updateLink(t, e) {
+    t.update(e);
+  }
+  /**
+   * This will add a link.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addLink({ label: t, href: e, exact: i }) {
+    const a = vt({ text: t, href: e, exact: i });
+    return this.links.push(a), a;
+  }
+  /**
+   * This will remove all the links.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.links = [];
+  }
+}
+class At extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "";
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return l({ class: "underlined-tab-panel flex flex-auto flex-col" }, [
+      new bt({
+        class: this.class,
+        options: this.options
+      }),
+      y({
+        class: "tab-content pt-6 flex flex-auto flex-col",
+        switch: this.addGroup()
+      })
+    ]);
+  }
+  /**
+   * This will add the group.
+   *
+   * @returns {array}
+   */
+  addGroup() {
+    let t;
+    const e = [], i = this.options;
+    for (let a = 0, n = i.length; a < n; a++)
+      t = i[a], e.push(
+        {
+          uri: t.uri || t.href,
+          component: t.component,
+          title: t.title || null,
+          persist: !0
+        }
+      );
+    return e;
+  }
+}
+class kt extends k {
+  /**
+   * Runs before rendering, sets up defaults, a timer for drawing,
+   * and basic canvas properties.
+   *
+   * @returns {void}
+   */
+  onCreated() {
+    this.lineWidth = this.lineWidth || 3, this.lineColor = this.lineColor || "#000000", this.canvas = null, this.ctx = null, this.status = "stopped";
+    const t = 1e3 / 60;
+    this.timer = new O(t, this.draw.bind(this)), this.width = 0, this.height = 0, this.signed = !1, this.mouse = { x: 0, y: 0, status: "up" }, this.margin = this.margin || { x: 40, y: 60 }, this.targetSize = this.targetSize || { width: 740, height: 345 }, this.baseLineWidth = this.baseLineWidth || 2, this.baseStrokeColor = this.baseStrokeColor || "#000000";
+  }
+  /**
+   * Renders a <canvas> element.
+   *
+   * @returns {object} Layout definition for the canvas.
+   */
+  render() {
+    return z({
+      style: "touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;"
+    });
+  }
+  /**
+   * Called before the component is destroyed. Stops the timer
+   * to prevent memory leaks or ongoing animation.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.stopTimer();
+  }
+  /**
+   * Called after component setup. Initializes canvas context,
+   * schedules a resize, and draws the initial content.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    this.canvas = this.panel, this.ctx = this.canvas.getContext("2d"), globalThis.setTimeout(() => {
+      this.resize(), this.draw();
+    }, 1);
+  }
+  /**
+   * Defines the DOM events to set up for this canvas component.
+   *
+   * @returns {Array} An array of [eventName, element, callback] definitions.
+   */
+  setupEvents() {
+    const t = this.panel, e = this.pointerPosition.bind(this), i = this.pointerUp.bind(this), a = this.pointerDown.bind(this), n = this.resize.bind(this), o = { passive: !1 };
+    return [
+      ["pointermove", t, e, o],
+      ["pointerup", t, i],
+      ["pointerdown", t, a, o],
+      ["pointerout", t, i],
+      ["resize", globalThis, n]
+    ];
+  }
+  /**
+   * Calculates and saves the current pointer position in canvas coordinates.
+   *
+   * @param {Event} e The event object (mouse or touch).
+   * @returns {void}
+   */
+  getEventPosition(t) {
+    let e, i;
+    const a = this.canvas, n = a.width / parseInt(a.style.width), o = a.getBoundingClientRect();
+    if (t.touches && t.touches.length) {
+      const d = t.touches[0];
+      e = d.clientX, i = d.clientY;
+    } else
+      e = t.x || t.clientX, i = t.y || t.clientY;
+    const h = parseInt((e - o.left) * n), r = parseInt((i - o.top) * n);
+    this.mouse.x = h, this.mouse.y = r;
+  }
+  /**
+   * Called when the pointer goes down on the canvas.
+   * Begins a new path, sets the mouse status, and starts the timer.
+   *
+   * @param {Event} e The event object.
+   * @returns {void}
+   */
+  pointerDown(t) {
+    t.preventDefault(), t.stopPropagation(), this.getEventPosition(t);
+    const { ctx: e, mouse: i } = this;
+    e.beginPath(), e.moveTo(i.x, i.y), i.status = "down", this.startTimer();
+  }
+  /**
+   * Called when the pointer goes up or leaves the canvas area.
+   * Closes the path and stops the drawing timer.
+   *
+   * @param {Event} e The event object.
+   * @returns {void}
+   */
+  pointerUp(t) {
+    t.preventDefault(), t.stopPropagation(), this.ctx.closePath(), this.mouse.status = "up", this.stopTimer();
+  }
+  /**
+   * Tracks pointer movement, updates position in real time.
+   *
+   * @param {Event} e The event object.
+   * @returns {void}
+   */
+  pointerPosition(t) {
+    this.getEventPosition(t), this.mouse.status === "down" && (t.preventDefault(), t.stopPropagation());
+  }
+  /**
+   * Resizes the canvas, preserves existing drawing by converting
+   * it to a data URL, then re-drawing.
+   *
+   * @returns {void}
+   */
+  resize() {
+    const { canvas: t, ctx: e } = this, i = t.toDataURL();
+    if (this.scale(), this.setupBackground(e), i !== "data:,") {
+      const a = new globalThis.Image();
+      L.on("load", a, function n() {
+        e.drawImage(a, 0, 0), L.off("load", a, n);
+      }), a.src = i;
+    }
+    this.draw();
+  }
+  /**
+   * Returns a JPEG data URL of the current canvas content.
+   *
+   * @returns {string} The signature image as a data URL.
+   */
+  getImage() {
+    return this.canvas.toDataURL("image/jpeg", 0.7);
+  }
+  /**
+   * (Deprecated approach) Resize the canvas to the container size
+   * without scaling logic.
+   *
+   * @returns {void}
+   */
+  noScaleResize() {
+    const t = B.getSize(container);
+    this.width = canvas.width = t.width, this.height = canvas.height = t.height;
+  }
+  /**
+   * Scales the canvas to fit within its container, preserving aspect ratio
+   * relative to this.targetSize.
+   *
+   * @returns {void}
+   */
+  scale() {
+    const t = this.canvas, e = this.container, i = B.getSize(e), a = this.targetSize, n = a.width, o = a.height;
+    let h = n + "px", r = o + "px";
+    if (this.width = t.width = n, this.height = t.height = o, i.width !== 0 && i.height !== 0) {
+      const d = i.width, g = i.height, c = d / n, m = g / o, x = Math.min(c, m);
+      h = n * x + "px", r = o * x + "px";
+    }
+    t.style.width = h, t.style.height = r;
+  }
+  /**
+   * Main drawing loop. If the mouse is down, adds a line
+   * from the last point to the current pointer position.
+   *
+   * @returns {void}
+   */
+  draw() {
+    this.mouse.status === "down" && this.addLine(this.ctx, this.mouse.x, this.mouse.y, this.lineColor);
+  }
+  /**
+   * Draws the baseline at the bottom of the canvas.
+   *
+   * @param {CanvasRenderingContext2D} ctx The canvas 2D context.
+   * @returns {void}
+   */
+  drawBottomLine(t) {
+    const e = this.canvas;
+    t.globalAlpha = 1, t.shadowBlur = 0;
+    const i = this.margin.x, a = this.height - this.margin.y;
+    t.beginPath(), t.moveTo(i, a), t.lineTo(e.width - this.margin.x, a), t.lineWidth = this.baseLineWidth, t.strokeStyle = this.baseStrokeColor, t.stroke(), t.closePath();
+  }
+  /**
+   * Adds a line to the current path, updating the 'signed' status.
+   *
+   * @param {CanvasRenderingContext2D} ctx The canvas context.
+   * @param {number} px The x-coordinate.
+   * @param {number} py The y-coordinate.
+   * @param {string} color The stroke color.
+   * @returns {void}
+   */
+  addLine(t, e, i, a) {
+    this.signed || (this.signed = !0);
+    const n = Math.round(e), o = Math.round(i);
+    t.lineWidth = this.lineWidth, t.strokeStyle = a, t.lineTo(n, o), t.stroke();
+  }
+  /**
+   * Clears the canvas, sets signed to false, and re-initializes
+   * the background for a fresh signature.
+   *
+   * @returns {void}
+   */
+  reset() {
+    this.signed = !1;
+    const { ctx: t } = this;
+    t.clearRect(0, 0, this.width, this.height), this.setupBackground(t);
+  }
+  /**
+   * Fills the canvas background with white and draws the baseline.
+   *
+   * @param {CanvasRenderingContext2D} ctx The canvas context.
+   * @returns {void}
+   */
+  setupBackground(t) {
+    t.fillStyle = "transparent", t.fillRect(0, 0, this.width, this.height), this.drawBottomLine(t);
+  }
+  /**
+   * Starts the drawing timer so new lines can be added as pointer moves.
+   *
+   * @returns {void}
+   */
+  startTimer() {
+    this.stopTimer(), this.draw(), this.timer.start(), this.status = "started";
+  }
+  /**
+   * Stops the drawing timer.
+   *
+   * @returns {void}
+   */
+  stopTimer() {
+    this.timer.stop(), this.status = "stopped";
+  }
+}
+class Ft extends k {
+  /**
+   * Sets up default properties for the signature panel.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.data = null, this.lineColor = null, this.lineWidth = null, this.baseLineWidth = null, this.baseStrokeColor = null, this.margin = null, this.targetSize = null, this.callBackData = null, this.pointerUp = null, this.path = null, this.canvasLayer = null;
+  }
+  /**
+   * Renders the main layout for the signature panel,
+   * including a hidden input and a reset button.
+   *
+   * @returns {object} The layout object for the component.
+   */
+  render() {
+    return l({ class: "signature-panel relative flex flex-auto overflow-hidden select-none" }, [
+      F({
+        cache: "hiddenInput",
+        required: !0,
+        bind: this.path + ".data"
+      }),
+      l({ class: "absolute top-2 right-2" }, [
+        C({
+          variant: "icon",
+          icon: D.circleX,
+          click: this.reset.bind(this)
+        })
+      ]),
+      new kt({
+        cache: "canvasLayer",
+        margin: this.margin,
+        targetSize: this.targetSize,
+        lineColor: this.lineColor,
+        lineWidth: this.lineWidth,
+        baseLineWidth: this.baseLineWidth,
+        baseStrokeColor: this.baseStrokeColor,
+        pointerUpCallBack: this.pointerUp,
+        callBackData: this.callBackData
+      })
+    ]);
+  }
+  /**
+   * Called after component setup. Resizes the signature canvas once
+   * everything is ready.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    this.canvasLayer.resize();
+  }
+  /**
+   * Gets the signature image from the canvas layer, as a data URL.
+   *
+   * @returns {string} The signature image data URL.
+   */
+  getImage() {
+    return this.canvasLayer.getImage();
+  }
+  /**
+   * Checks if the user has drawn anything on the signature canvas.
+   *
+   * @returns {boolean} True if the canvas has been signed, otherwise false.
+   */
+  isSigned() {
+    return this.canvasLayer ? this.canvasLayer.signed : !1;
+  }
+  /**
+   * Resets the signature canvas to a blank state.
+   *
+   * @param {Event} [e] The event object (if called by a click event).
+   * @returns {void}
+   */
+  reset(t) {
+    if (this.canvasLayer)
+      return this.canvasLayer.reset();
+  }
+  /**
+   * Cleans up references before destroying the component.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.canvasLayer = null, this.hiddenInput = null;
+  }
+}
+export {
+  Nt as B,
+  $t as I,
+  Mt as N,
+  Pt as P,
+  Ft as S,
+  zt as T,
+  It as U,
+  Ct as W,
+  jt as a,
+  lt as b,
+  At as c,
+  Ut as d,
+  bt as e,
+  X as f,
+  q as g,
+  _ as h,
+  R as i,
+  Wt as j,
+  P as k,
+  Tt as l,
+  G as m,
+  E as n
+};