@base-framework/ui 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 chris
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,106 @@
+# Base UI
+
+**Version**: 1.0.0
+
+## Overview
+This documentation aims to guide the enhancement of component scalability and reusability within your projects through the use of organisms. Organisms are designed to function as the medium building blocks in a component-based architecture.
+
+This module will add default organisms to your project.
+
+## Atomic Design
+If you need to learn about atomic design, please refer to the [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) documentation.
+
+To learn more about Base framework or how to build atoms, refer to the [Base](https://github.com/chrisdurfee/base/wiki) documentation.
+
+### Oragnism Structure
+Organisms can be created using atoms, other organisms, and components. Atoms are the smallest building blocks of a component, while components are composed of atoms and other components. Organisms are a collection of atoms and components that form a larger structure.
+
+```typescript
+// Atom
+const Link = Atom((props, children) => ({
+    ...props,
+    children,
+    tag: 'a',
+}));
+
+// Organism Atom
+const Link = Atom((props, children) => (
+    Link({...props }, [
+        Icon({ class: 'icon' }),
+        children
+    ])
+));
+
+// Organism Atom with Component
+const Link = Atom((props, children) => (
+    Nav([
+        Ul([
+            Li([
+                Link([
+                    Icon({ class: 'icon' }),
+                    Span('Text')
+                ])
+            ])
+        ])
+    ]),
+    new List({...props }, [
+        children
+    ])
+));
+
+// Organism Function with Component
+const List = (props, children) => Div([
+    Header([
+        H1('Title')
+    ]),
+    new List({...props }, [
+        children
+    ])
+]);
+```
+
+#### Organisms Nesting
+Organisms should use composition to nest other atoms, organisms, or components.
+
+```typescript
+const SecondaryButton = Atom((props, children) => (Button({
+    ...props,
+    class: 'secondary-btn',
+    children
+}));
+```
+
+## Utilization of Organisms
+To leverage an organism, invoke its function and pass the requisite values via a props and children. The organisms created with the Atom callback functions support passing optional props or children to the atom. The props object should always be first but if the atom does not require props, the children array or string can be passed as the first argument.
+
+```javascript
+// props only
+Div({class: 'text'});
+
+// text child only
+Div('test');
+
+// array child only
+Div([
+    Div('test')
+]);
+
+// props and text child
+Div({class: 'text'}, 'test');
+
+// props and array children
+Div({class: 'text'}, [
+    Div('test'),
+    Div('test')
+]);
+```
+
+### Example of Atom Utilization
+```typescript
+SecondaryButton({
+    click(e) =>
+    {
+        // Handle the click event
+    }
+})
+```

package/dist/aside-template-D0KANPjh.js

@@ -0,0 +1,35 @@
+import { Atom as a } from "@base-framework/base";
+import { Header as c, H1 as f } from "@base-framework/atoms";
+const o = a((l, e) => ({
+  tag: "section",
+  ...l,
+  children: e
+})), n = a((l, e) => o({
+  class: "body full-container flex flex-auto flex-col " + l.class,
+  ...l
+}, e)), s = a((l, e) => (l.class = "row flex flex-auto flex-col lg:flex-row " + (l.class || ""), {
+  ...l,
+  children: e
+})), u = a((l, e) => c([
+  f({ watch: l.watch }, l.text)
+], e)), t = a((l, e) => (l.class = "col flex flex-auto flex-col " + (l.class || ""), {
+  ...l,
+  children: e
+})), m = a((l, e) => o({ class: "body aside-container flex flex-auto flex-col max-w-[100vw] h-full" }, [
+  s({ class: "flex flex-auto flex-col lg:flex-row" }, [
+    t({ class: "drawer control flex flex-auto w-full md:max-w-[320px]" }, [
+      l.left
+    ]),
+    t({ class: "flex flex-grow flex-col" }, [
+      l.right
+    ])
+  ])
+]));
+export {
+  m as A,
+  n as F,
+  t as M,
+  s as R,
+  u as T,
+  o as a
+};

package/dist/atoms.es.js

@@ -0,0 +1,39 @@
+import { B as e, C as t, a as n, F as o, L as p, P as r, R as u, S as I, b as i, T as l } from "./tooltip-DCszmsxe.js";
+import { B as m, I as T, L as c } from "./icon-B9QUT2NY.js";
+import { C as B, d as C, D as S, c as g, E as b, F as f, H as h, I as F, M as L, N as P, P as R, R as k, S as D, T as V, a as E, b as H, U as M, W as N } from "./inputs-BF3C3KfF.js";
+import { V as W, a as w } from "./veil-B9GQfH0d.js";
+export {
+  e as Badge,
+  m as Button,
+  t as Card,
+  B as Checkbox,
+  n as CircleGraph,
+  C as ColorInput,
+  S as DateInput,
+  g as DateTimeInput,
+  b as EmailInput,
+  o as Fieldset,
+  f as FileInput,
+  h as HiddenInput,
+  T as Icon,
+  F as Input,
+  p as Legend,
+  c as LoadingButton,
+  L as MonthInput,
+  P as NumberInput,
+  R as PasswordInput,
+  r as ProgressBar,
+  k as Radio,
+  u as RangeSlider,
+  D as SearchInput,
+  I as Select,
+  i as Skeleton,
+  V as TelInput,
+  E as Textarea,
+  H as TimeInput,
+  l as Tooltip,
+  M as UrlInput,
+  W as Veil,
+  w as VeilJot,
+  N as WeekInput
+};

package/dist/bside-template-CDbINL4X.js

@@ -0,0 +1,15 @@
+import { Atom as t } from "@base-framework/base";
+import { a, R as l, M as o } from "./aside-template-D0KANPjh.js";
+const s = t((e, r) => a({ class: "body bside-container flex flex-auto flex-col" }, [
+  l([
+    o([
+      e.left
+    ]),
+    o([
+      e.right
+    ])
+  ])
+]));
+export {
+  s as B
+};

package/dist/calendar-DR_svCOR.js

@@ -0,0 +1,424 @@
+var F = Object.defineProperty;
+var O = (t, s, n) => s in t ? F(t, s, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[s] = n;
+var p = (t, s, n) => O(t, typeof s != "symbol" ? s + "" : s, n);
+import { Div as l, Img as B, Span as w, Button as I } from "@base-framework/atoms";
+import { Component as P, Data as z, Atom as N, DateTime as Y } from "@base-framework/base";
+import { B as j } from "./icon-B9QUT2NY.js";
+import { Icons as M } from "./icons.es.js";
+const A = (t, s) => {
+  const n = t ? t.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, e = s.getBoundingClientRect(), o = 10, r = window.scrollX, c = window.scrollY;
+  let d = n.left + r, u = n.bottom + c;
+  const i = window.innerHeight - n.bottom, f = n.top;
+  return d + e.width > window.innerWidth && (d = window.innerWidth - e.width - o), i < e.height && f > i ? u = n.top + c - e.height - o : i < e.height && (u = n.bottom + c - (e.height - i) - o), { x: d, y: u };
+};
+class lt extends P {
+  /**
+   * This will set up the data.
+   *
+   * @returns {object}
+   */
+  setData() {
+    const s = this.parent.data || new z();
+    return s.set({
+      position: { x: 0, y: 0 }
+    }), s;
+  }
+  /**
+   * This will get the class size.
+   *
+   * @returns {string}
+   */
+  getSize() {
+    switch (this.size || "lg") {
+      case "sm":
+        return "w-48";
+      case "md":
+        return "w-64";
+      case "lg":
+        return "w-[250px]";
+      case "xl":
+        return "w-96";
+      case "2xl":
+        return "w-[400px]";
+      case "fit":
+        return "w-fit";
+      case "full":
+        return "w-full";
+    }
+  }
+  /**
+   * This will render the modal component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const s = 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 ${s}`,
+      popover: "auto",
+      toggle: (n, { state: e }) => n.newState === "closed" ? e.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: (e) => {
+          this.state.open === !1 && this.destroy();
+        }
+      }
+    };
+  }
+  /**
+   * Updates the dropdown position.
+   *
+   * @returns {void}
+   */
+  updatePosition() {
+    const s = this.button ?? null, n = this.panel, e = A(s, n);
+    this.data.position = e;
+  }
+  /**
+   * 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(s) {
+    return !this.panel.contains(s) && this.button && !this.button.contains(s);
+  }
+  /**
+   * This will set up the events.
+   *
+   * @returns {array}
+   */
+  setupEvents() {
+    return [
+      ["click", document, (s) => {
+        this.isOutsideClick(s.target) && (this.state.open = !1);
+      }],
+      ["resize", window, (s) => this.updatePosition()],
+      ["scroll", document, (s) => this.updatePosition()]
+    ];
+  }
+  /**
+   * This will override the set up to use the app shell.
+   *
+   * @param {object} container
+   */
+  setContainer(s) {
+    this.container = app.root;
+  }
+  /**
+   * This will hide the popover before destroying.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.panel.hidePopover();
+  }
+}
+const W = N(({ src: t, alt: s }) => t ? B({
+  class: "absolute w-full h-full rounded-full object-cover fadeIn",
+  src: t,
+  alt: s,
+  /**
+   * If there's an error loading the image, hide it.
+   */
+  error: (n) => n.target.style.display = "none"
+}) : null), H = (t) => t.split(" ").map((s) => s.charAt(0)).join(""), T = (t) => !t || t.length < 2 ? t : H(t), R = (t) => w([t, (s, n) => {
+  n.textContent = T(s);
+}]), b = {
+  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",
+  default: "h-12 w-12"
+}, S = {
+  xs: "text-[7px]",
+  sm: "text-xs",
+  md: "text-base",
+  lg: "text-xl",
+  xl: "text-2xl",
+  "2xl": "text-3xl",
+  "3xl": "text-4xl",
+  default: "text-base"
+}, X = (t) => b[t] || b.default, E = (t) => S[t] || S.default, G = (t, s = null, n = "md") => {
+  const e = T(t), o = E(n);
+  return l(
+    {
+      class: `
+            flex items-center justify-center w-full h-full rounded-full
+            bg-muted text-muted-foreground font-medium
+            ${o}
+        `
+    },
+    [
+      s ? R(s) : w(e)
+    ]
+  );
+}, ct = N(({ src: t, alt: s, fallbackText: n, watcherFallback: e, size: o }) => {
+  const r = X(o);
+  return l(
+    {
+      class: `relative flex items-center justify-center ${r}`
+    },
+    [
+      W({ src: t, alt: s }),
+      G(n, e, o)
+    ]
+  );
+}), m = (t) => (t *= 1, t < 10 ? `0${t}` : String(t)), L = (t) => (t.indexOf("T") === -1 && t.indexOf(" ") === -1 && (t += "T00:00:01"), t.replace(" ", "T"), t), g = (t, s, n) => `${t}-${m(s + 1)}-${m(n)}`, q = (t) => t ? "bg-accent text-primary" : "", J = (t) => t ? "text-muted-foreground opacity-50" : "", K = (t, s) => t === s, Q = (t, s) => K(t, s) ? "bg-primary text-primary-foreground" : "", U = (t, s, n, e) => {
+  const o = Q(s, e);
+  if (o)
+    return o;
+  const r = q(t);
+  if (t)
+    return r;
+  const c = J(n);
+  return n ? c : "text-foreground";
+}, x = ({ day: t, currentDate: s, date: n, isToday: e, isOutsideMonth: o, select: r }) => I(
+  {
+    class: `
+        flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md
+        ${U(e, s, o, n)}
+        hover:bg-muted/50 focus:z-10
+      `,
+    disabled: t === null,
+    "aria-label": t ? `Day ${t}` : null,
+    click: () => r(n)
+  },
+  t.toString()
+), D = (t, s, n, e) => t === e.date && s === e.month && n === e.year, V = (t, s, n) => {
+  const { year: e, month: o } = t, r = g(e, o, t.date), c = new Date(e, o, 1).getDay(), d = new Date(e, o + 1, 0).getDate(), u = new Date(e, o, 0).getDate(), i = [], f = o === 0 ? 11 : o - 1, y = o === 0 ? e - 1 : e;
+  for (let a = c - 1; a >= 0; a--) {
+    const h = D(u - a, f, y, s);
+    i.push(
+      x({
+        day: u - a,
+        currentDate: r,
+        date: g(y, f, u - a),
+        isToday: h,
+        isOutsideMonth: !0,
+        select: n
+      })
+    );
+  }
+  for (let a = 1; a <= d; a++) {
+    const h = D(a, o, e, s);
+    i.push(
+      x({
+        day: a,
+        currentDate: r,
+        date: g(e, o, a),
+        isToday: h,
+        isOutsideMonth: !1,
+        select: n
+      })
+    );
+  }
+  const C = o === 11 ? 0 : o + 1, v = o === 11 ? e + 1 : e, k = (7 - i.length % 7) % 7;
+  for (let a = 1; a <= k; a++) {
+    const h = D(a, C, v, s);
+    i.push(
+      x({
+        day: a,
+        currentDate: r,
+        date: g(v, C, a),
+        isToday: h,
+        isOutsideMonth: !0,
+        select: n
+      })
+    );
+  }
+  return i;
+}, Z = (t) => l(
+  { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
+  t
+), $ = ({ label: t, click: s }) => j(
+  {
+    class: `
+            inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
+            opacity-50 hover:opacity-100 text-muted-foreground absolute
+            ${t === "Previous" ? "left-1" : "right-1"}
+            focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+          `,
+    click: s,
+    "aria-label": `${t} month`,
+    variant: "icon",
+    icon: t === "Previous" ? M.chevron.single.left : M.chevron.single.right
+  }
+), _ = ({ next: t, previous: s }) => l({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+  w("[[monthName]] [[current.year]]"),
+  $({
+    label: "Previous",
+    click: s
+  }),
+  $({
+    label: "Next",
+    click: t
+  })
+]), tt = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(Z), et = (t) => l({ class: "rdp w-full space-y-1" }, [
+  _({
+    next: t.next,
+    previous: t.previous
+  }),
+  l({
+    class: "flex flex-auto flex-col w-full",
+    onSet: ["currentDate", () => [
+      l({ class: "grid grid-cols-7" }, tt()),
+      l({ class: "grid grid-cols-7" }, V(
+        t.current,
+        t.today,
+        t.select
+      ))
+    ]]
+  })
+]);
+class ut extends P {
+  constructor() {
+    super(...arguments);
+    /**
+     * This will set the selected date.
+     * @member {string} selectedDate
+     * @default null
+     */
+    p(this, "selectedDate", null);
+    /**
+     * This will set the selected call back.
+     * @member {function} selectedCallBack
+     * @default null
+     */
+    p(this, "selectedCallBack", null);
+  }
+  /**
+   * This will get the selected data.
+   *
+   * @param {object} today
+   * @returns {Date}
+   */
+  getSelectedDate(n) {
+    const e = this.selectedDate ? new Date(L(this.selectedDate)) : n;
+    return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+  }
+  /**
+   * This will set up the data for the calendar.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    const n = /* @__PURE__ */ new Date(), e = this.getSelectedDate(n), o = e.getMonth();
+    return new z({
+      monthName: this.getMonthName(o),
+      currentDate: `${e.getFullYear()}-${o + 1}-${e.getDate()}`,
+      current: {
+        date: e.getDate(),
+        year: e.getFullYear(),
+        month: o
+      },
+      today: {
+        date: n.getDate(),
+        month: n.getMonth(),
+        year: n.getFullYear()
+      }
+    });
+  }
+  /**
+   * This will get the name of the month.
+   *
+   * @param {number} month
+   * @returns {string}
+   */
+  getMonthName(n) {
+    return Y.monthNames[n];
+  }
+  /**
+   * This will go to the previous month.
+   *
+   * @returns {void}
+   */
+  goToPreviousMonth() {
+    const n = this.data;
+    let e = n.current.month, o = n.current.year;
+    e === 0 ? (e = 11, o--) : e--, this.setCurrentDate(e, o);
+  }
+  /**
+   * This will go to the next month.
+   *
+   * @returns {void}
+   */
+  goToNextMonth() {
+    const n = this.data;
+    let e = n.current.month, o = n.current.year;
+    e === 11 ? (e = 0, o++) : e++, this.setCurrentDate(e, o);
+  }
+  /**
+   * This will set the current month and year.
+   *
+   * @param {number} month
+   * @param {number} year
+   * @param {number} [date=null]
+   * @returns {void}
+   */
+  setCurrentDate(n, e, o = null) {
+    const r = this.data;
+    r.current.month = n, r.current.year = e, typeof o == "number" && (r.current.date = m(o)), r.currentDate = `${e}-${m(n + 1)}-${r.current.date}`, r.monthName = this.getMonthName(n);
+  }
+  /**
+   * This will select a date.
+   *
+   * @param {string} date
+   * @returns {void}
+   */
+  selectDate(n) {
+    const e = /* @__PURE__ */ new Date(n + "T00:00:00");
+    this.setCurrentDate(e.getMonth(), e.getFullYear(), e.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" }, [
+      et({
+        current: this.data.current,
+        today: this.data.today,
+        select: (n) => this.selectDate(n),
+        next: () => this.goToNextMonth(),
+        previous: () => this.goToPreviousMonth()
+      })
+    ]);
+  }
+}
+export {
+  ct as A,
+  V as C,
+  x as D,
+  g as F,
+  et as M,
+  lt as P,
+  Z as a,
+  ut as b,
+  L as c,
+  A as g,
+  m as p
+};