@base-framework/ui 0.0.0

package/dist/mobile-nav-wrapper-7Qul1-mt.js

@@ -0,0 +1,578 @@
+var w = Object.defineProperty;
+var S = (t, s, e) => s in t ? w(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var l = (t, s, e) => S(t, typeof s != "symbol" ? s + "" : s, e);
+import { I as N, Label as B, Span as L, Ul as r, H4 as C, Nav as h, Div as o, Header as y, H1 as I, H3 as f, OnState as $ } from "@base-framework/atoms";
+import { Component as i, Atom as c, NavLink as H, router as p } from "@base-framework/base";
+import { I as x, B as m } from "./icon-B9QUT2NY.js";
+import { Icons as u } from "./icons.es.js";
+class M extends i {
+  constructor() {
+    super(...arguments);
+    /**
+     * This will set the class.
+     * @member {string} class
+     * @default ''
+     */
+    l(this, "class", "");
+    /**
+     * This will set the check callback.
+     * @member {function} checkCallBack
+     * @default null
+     */
+    l(this, "checkCallBack", null);
+  }
+  /**
+   * This will render the component.
+   *
+   * @override
+   * @returns {object}
+   */
+  render() {
+    const e = this.state;
+    return {
+      class: this.class || "",
+      onState: [
+        ["selected", {
+          selected: !0
+        }],
+        ["active", {
+          active: !0
+        }]
+      ],
+      click: () => {
+        if (e.toggle("active"), !this.checkCallBack)
+          return;
+        const a = e.active ? this : null;
+        this.checkCallBack(a);
+      },
+      children: this.children
+    };
+  }
+  /**
+   * This will set up the states.
+   *
+   * @override
+   * @protected
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      selected: !1,
+      active: !1
+    };
+  }
+  /**
+   * This will update the states.
+   *
+   * @param {object} selected
+   * @returns {void}
+   */
+  update(e) {
+    this.state.set({
+      selected: e,
+      active: e
+    });
+  }
+}
+const O = c(({ options: t, click: s }, e) => ({
+  tag: "li",
+  ...{
+    class: `relative flex flex-row w-auto text-left p-0 overflow-hidden transition-all cursor-pointer min-w-[48px] rounded-md option${t ? " sub" : ""}`,
+    click: s
+  },
+  children: e
+})), z = (t, s = null, e = !1) => [
+  s && N({
+    class: "icon w-12 rounded-md flex items-center justify-center",
+    onState: ["selected", {
+      selected: !0
+    }],
+    html: s
+  }),
+  B({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, t),
+  e && L(
+    {
+      class: "flex justify-center items-center px-1 transition-all text-muted-foreground mr-2",
+      onState: [
+        ["selected", {
+          rotate: !0
+        }],
+        ["active", {
+          rotate: !0
+        }]
+      ]
+    },
+    [
+      x({ size: "xs" }, u.chevron.single.down)
+    ]
+  )
+];
+class g extends i {
+  constructor() {
+    super(...arguments);
+    /**
+     * This will set the label.
+     * @member {string} label
+     * @default ''
+     */
+    l(this, "label", "");
+    /**
+     * This will set the icon.
+     * @member {string} icon
+     * @default null
+     */
+    l(this, "icon", null);
+    /**
+     * This will set the href.
+     * @member {string} href
+     * @default null
+     */
+    l(this, "href", null);
+    /**
+     * This will set the exact.
+     * @member {boolean} exact
+     * @default false
+     */
+    l(this, "exact", !1);
+    /**
+     * This will set the options.
+     * @member {array} options
+     */
+    l(this, "options", []);
+    /**
+     * This will set the content.
+     * @member {array} content
+     * @default null
+     */
+    l(this, "content", null);
+    /**
+     * This will set the call back.
+     * @member {function} callBack
+     */
+    l(this, "callBack", null);
+    /**
+     * This will set the check call back.
+     * @member {function} checkCallBack
+     */
+    l(this, "checkCallBack", null);
+    /**
+     * This will set the link.
+     * @member {object} link
+     */
+    l(this, "link", null);
+  }
+  /**
+   * This will render the component.
+   *
+   * @override
+   * @returns {object}
+   */
+  render() {
+    const e = !this.options && this.callBack;
+    return O(
+      { options: this.options, click: e },
+      [
+        this.addLink()
+      ]
+    );
+  }
+  /**
+   * This will add the link.
+   *
+   * @returns {object}
+   * @protected
+   */
+  addLink() {
+    const e = this.options && this.options.length > 0, a = this.content || z(this.label, this.icon, e);
+    return this.href ? new H(
+      {
+        class: "flex flex-auto flex-row",
+        cache: "link",
+        href: this.href,
+        activeClass: "selected",
+        exact: this.exact || !1
+      },
+      a
+    ) : new M({
+      class: "flex flex-auto flex-row",
+      cache: "link",
+      checkCallBack: this.checkCallBack
+    }, a);
+  }
+  /**
+   * This will check if the link is selected.
+   *
+   * @returns {boolean}
+   */
+  isSelected() {
+    return this.link.state.get("selected");
+  }
+  update(e) {
+    this.link.update(e);
+  }
+}
+const E = c(({ map: t }, s) => r({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: t }, [
+  C({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, s)
+]));
+class P extends i {
+  constructor() {
+    super(...arguments);
+    /**
+     * This will set the options.
+     * @member {array} options
+     */
+    l(this, "options", []);
+    /**
+     * This will set the class.
+     * @member {string} class
+     */
+    l(this, "class", "");
+    /**
+     * This will set the mobile border.
+     * @member {boolean} mobileBorder
+     * @default false
+     */
+    l(this, "mobileBorder", !1);
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.mapOptions(this.options), a = this.class || "", n = this.mobileBorder ? "border md:border-0 rounded-md" : "";
+    return h({ class: `navigation flex flex-auto flex-col ${a}` }, [
+      r({
+        class: `relative group flex flex-col gap-2 py-2 px-2 list-none m-0 ${n}`,
+        map: e
+      }),
+      ...this.addSubs()
+    ]);
+  }
+  /**
+   * This will get the options.
+   *
+   * @param {array} options
+   * @returns {array}
+   */
+  mapOptions(e = []) {
+    return [e.map((n) => n.group ? this.addGroup(n) : this.addLink(n)), (n) => n];
+  }
+  /**
+   * This will get the subs.
+   *
+   * @returns {array}
+   */
+  addSubs() {
+    return [];
+  }
+  /**
+   * This will add a group.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addGroup(e) {
+    const a = this.mapOptions(e.options);
+    return E({ map: a }, e.group);
+  }
+  /**
+   * This will add a link.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addLink(e) {
+    return new g(e);
+  }
+}
+class d extends P {
+  onCreated() {
+    this.links = [];
+  }
+  /**
+   * This will set up the sub nav.
+   *
+   * @param {object} link
+   * @returns {object}
+   */
+  setupSubNav(s) {
+    return new G(
+      {
+        parentLink: s,
+        options: s.options
+      }
+    );
+  }
+  /**
+   * This will add a sub navigation.
+   *
+   * @param {object} link
+   * @returns {object}
+   */
+  addSubNav(s) {
+    const e = this.setupSubNav(s);
+    return s.sub = e, e;
+  }
+  /**
+   * This will add a link.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addLink(s) {
+    const e = new g(s);
+    if (this.links.push(e), !e.options)
+      return e;
+    const a = this.addSubNav(e);
+    return {
+      class: "child-group",
+      link: e,
+      sub: a
+    };
+  }
+}
+const T = (t, s) => new RegExp(`${t}($|/|\\.).*`).test(s), A = (t, s) => {
+  const e = t.link.panel.pathname;
+  return !e && t.isSelected() ? !0 : t.exact ? s === e : T(e, s);
+};
+class G extends d {
+  constructor() {
+    super(...arguments);
+    /**
+     * This will set the parent link.
+     * @member {object} parentLink
+     * @default null
+     */
+    l(this, "parentLink", null);
+    /**
+     * This will set the main class name.
+     * @member {string} mainClassName
+     * @default ''
+     */
+    l(this, "mainClassName", "");
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = `navigation flex flex-auto flex-col sub ${this.mainClassName || ""}`, a = this.mapOptions(this.options);
+    return h({ class: e, onState: this.onState() }, [
+      r({ class: "relative group flex flex-col gap-2 py-2 px-0 list-none m-0" }, [...a, ...this.addSubs(), this.addWatcher()])
+    ]);
+  }
+  /**
+   * This will add awatcher to update the links
+   * when the path changes.
+   *
+   * @returns {object}
+   */
+  addWatcher() {
+    return {
+      watch: {
+        value: ["[[path]]", p.data],
+        callBack: this.updateLinks.bind(this)
+      }
+    };
+  }
+  /**
+   * This will set up the on state.
+   *
+   * @returns {array}
+   */
+  onState() {
+    return [
+      ["selected", { active: !0 }],
+      ["active", { active: !0 }]
+    ];
+  }
+  /**
+   * This will set up the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      remotes: [
+        {
+          /**
+           * This will link the state to the parent link.
+           */
+          id: this.parentLink.link.getId(),
+          selected: null,
+          active: null
+        }
+      ]
+    };
+  }
+  /**
+   * This will update the links after setup.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const e = p.data.get("path");
+    this.updateLinks(e);
+  }
+  /**
+   * This will update the links.
+   *
+   * @param {string} value
+   * @returns {void}
+   */
+  updateLinks(e) {
+    let a = !1;
+    for (const n of this.links)
+      if (n.rendered && (a = A(n, e), a === !0))
+        break;
+    this.parentLink.update(a);
+  }
+}
+const V = ({ title: t, options: s, class: e = "", mobileBorder: a = !1, sticky: n = !1 }) => o({ class: `pb-12 p-4 pt-0 lg:p-6 lg:border-r w-full lg:max-w-[300px] h-full ${e}` }, [
+  t && y({ class: "pb-4 md:pb-2 px-6 flex flex-col" }, [
+    I({ class: "scroll-m-20 text-3xl lg:text-2xl font-bold tracking-tight" }, t)
+  ]),
+  new d({ options: s, mobileBorder: a, class: n ? "sticky top-0" : "" })
+]), W = (t) => f({ class: "text-lg ml-2" }, t), j = (t) => o({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
+  m({
+    variant: "icon",
+    class: "m-2",
+    click: (s, { state: e }) => e.toggle("open"),
+    icon: u.arrows.left
+  }),
+  t.title && W(t.title)
+]), Y = () => o({
+  class: `
+            absolute inset-0 bg-black/40 z-[-1] fadeIn
+            transition-opacity duration-200
+        `,
+  click: (t, { state: s }) => s.open = !1
+});
+class D extends i {
+  constructor() {
+    super(...arguments);
+    /**
+     * This will set the title.
+     * @member {string} title
+     */
+    l(this, "title", "");
+  }
+  /**
+  * This will render the modal component.
+  *
+  * @returns {object}
+  */
+  render() {
+    return o({
+      class: "fixed inset-0 z-50",
+      style: "[[typeClass]]"
+    }, [
+      Y(),
+      // Popover Content
+      o({
+        class: `
+                    absolute popIn w-auto p-0 bg-popover m-auto shadow-lg rounded-md top-0 bottom-0 left-2 right-2 max-h-[85vh] text-inherit block
+                `,
+        dataSet: ["open", ["expanded", !0, "true"]]
+      }, [
+        o({ class: "flex flex-auto flex-col w-full h-full overflow-y-auto max-h-[85vh] rounded-md bg-popover border" }, [
+          j({ title: this.title }),
+          o({ class: "flex flex-auto flex-col" }, this.children)
+        ])
+      ])
+    ]);
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: {
+        id: this.parent.getId(),
+        callBack: (n) => {
+          n === !1 && (document.documentElement.style.overflowY = "auto", this.destroy());
+        }
+      }
+    };
+  }
+  /**
+   * This will add the body scroll lock.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    document.documentElement.style.overflowY = "hidden";
+  }
+  /**
+      * This will override the set up to use the body.
+      *
+      * @param {object} container
+      */
+  setContainer(e) {
+    this.container = app.root;
+  }
+}
+const k = (t) => m({ class: "m-2", variant: "ghost", addState() {
+  return {
+    open: !1
+  };
+}, click: (s, { state: e }) => e.toggle("open") }, [
+  x(u.bar.three)
+]), R = (t) => f({ class: "text-lg ml-2" }, t), U = (t) => o({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
+  k(),
+  t.title && R(t.title)
+]), v = (t, s) => {
+  t.forEach((e) => {
+    if (e.options) {
+      v(e.options, s);
+      return;
+    }
+    e.callBack = s;
+  });
+}, b = (t) => {
+  const s = (e, { parent: a }) => a.parent.state.open = !1;
+  return v(t.options, s), o({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
+    $(
+      "open",
+      (e) => e ? [
+        new D({ title: t.title }, [
+          new d(
+            {
+              options: t.options
+            }
+          )
+        ])
+      ] : null
+    )
+  ]);
+}, X = c((t) => o({ cache: "mobileNav", class: "inline-flex relative lg:hidden" }, [
+  o([
+    k(),
+    b(t)
+  ])
+])), Z = c((t) => o({ cache: "mobileNav", class: "flex flex-auto flex-col w-full relative lg:hidden" }, [
+  o({ class: "flex flex-auto flex-col w-full" }, [
+    U(t),
+    b(t)
+  ])
+]));
+export {
+  Y as B,
+  d as I,
+  g as M,
+  M as N,
+  j as P,
+  G as S,
+  U as T,
+  E as a,
+  P as b,
+  V as c,
+  X as d,
+  Z as e,
+  D as f,
+  k as g
+};

package/dist/molecules.es.js

@@ -0,0 +1,45 @@
+import { A as o, B as t, C as e, z as i, u as r, v as n, w as m, D as l, j as S, k as D, G as c, E as u, s as d, c as g, a as p, b as C, i as F, g as T, e as A, h as P, F as f, d as b, f as w, t as B, M as I, l as M, N as x, P as y, p as k, q as v, S as N, n as h, o as E, T as L, x as U, y as j, m as q, r as z } from "./confirmation-D1Y_SgzE.js";
+import { A as O, P as R, g as _ } from "./calendar-DR_svCOR.js";
+export {
+  o as Alert,
+  O as Avatar,
+  t as Breadcrumb,
+  e as Combobox,
+  i as Confirmation,
+  r as CountDisplay,
+  n as Counter,
+  m as DatePicker,
+  l as DelayComponent,
+  S as DetailBody,
+  D as DetailSection,
+  c as Dialog,
+  u as DialogContainer,
+  d as DotsIndicator,
+  g as Dropdown,
+  p as DropdownItem,
+  C as DropdownMenu,
+  F as Form,
+  T as FormControl,
+  A as FormDescription,
+  P as FormField,
+  f as FormItem,
+  b as FormLabel,
+  w as FormMessage,
+  B as MinusButton,
+  I as Modal,
+  M as Notification,
+  x as NotificationContainer,
+  y as PlusButton,
+  R as PopOver,
+  k as STATUSES,
+  v as STATUS_CLASS,
+  N as SplitRow,
+  h as StaticStatusIndicator,
+  E as StatusIndicator,
+  L as ThemeToggle,
+  U as TimeFrame,
+  j as TimePicker,
+  q as Toggle,
+  _ as getPosition,
+  z as getStatusClass
+};

package/dist/organisms.es.js

@@ -0,0 +1,55 @@
+import { B as s, m as o, C as t, j as r, D as n, l, H as i, I as d, N as b, O as v, P as p, S as N, p as g, n as k, o as u, T as C, k as D, U as M, W as T, f as c, h as B, i as m, c as y, d as W, b as h, e as H, a as P, g as f } from "./tab-C_dZb2qH.js";
+import { b as I, C as S, D as L, a as O, F, M as U, c as G, p as j } from "./calendar-DR_svCOR.js";
+import { B as q, I as z, M as A, d as E, e as J, g as K, N as Q, b as R, a as V, f as X, P as Y, c as Z, S as _, T as $ } from "./mobile-nav-wrapper-7Qul1-mt.js";
+export {
+  s as BackButton,
+  q as Backdrop,
+  o as ButtonTab,
+  I as Calendar,
+  S as CalendarCells,
+  t as CheckboxCol,
+  r as DataTable,
+  n as DataTableBody,
+  L as DayCell,
+  O as DayHeader,
+  l as DockableOverlay,
+  F as FormatDate,
+  i as HeaderCol,
+  z as InlineNavigation,
+  d as InlineOverlay,
+  A as MainLink,
+  E as MobileNavButton,
+  J as MobileNavWrapper,
+  U as MonthCalendar,
+  K as NavButton,
+  Q as NavButtonLink,
+  R as Navigation,
+  V as NavigationGroup,
+  b as NavigationMenu,
+  X as NavigationPopover,
+  v as Overlay,
+  p as Panel,
+  Y as PopupHeader,
+  N as SearchDropdown,
+  Z as SidebarMenu,
+  _ as SubNavigation,
+  g as Tab,
+  k as TabGroup,
+  u as TabNavigation,
+  C as TableHeader,
+  $ as TitleHeader,
+  D as UserList,
+  M as UserListItem,
+  T as WeekCalendar,
+  c as WeekCell,
+  B as WeekCells,
+  m as WeekHeader,
+  G as addTime,
+  y as calculateWeekNumber,
+  W as generateWeeks,
+  h as getDateFromWeek,
+  H as getMonthDays,
+  P as getNextMonthDays,
+  f as getPreviousMonthDays,
+  j as pad
+};

package/dist/pages.es.js

@@ -0,0 +1,12 @@
+import { B as s, a as P, C as g, F as n, b as l, c as i, M as r, P as c, S as o } from "./sidebar-menu-page-M8hr9onX.js";
+export {
+  s as BasicPage,
+  P as BlankPage,
+  g as CenterPage,
+  n as FullContainPage,
+  l as FullPage,
+  i as FullscreenPage,
+  r as MainSection,
+  c as Page,
+  o as SidebarMenuPage
+};