@base-framework/ui 1.0.85 → 1.0.87

package/dist/{confirmation-DgARq0AK.js → confirmation-D29rC-Ec.js}

@@ -1,5 +1,5 @@
-import { Div as n, H5 as _, P as b, I as f, Li as O, Span as a, Ul as V, Button as h, OnState as v, Label as R, Form as W, H2 as B, Header as $, Footer as M, A as Y, H3 as G, Checkbox as J, Nav as K, Input as C, Time as Q, Dialog as X } from "@base-framework/atoms";
-import { Atom as c, Component as p, Html as L, Dom as Z, base as ee, Data as k, Builder as q, Jot as S, DateTime as A } from "@base-framework/base";
+import { Div as n, H5 as _, P as b, I as f, Li as O, Span as a, Ul as V, Button as h, OnState as v, Label as W, Form as R, H2 as A, Header as B, Footer as M, A as Y, H3 as G, Checkbox as J, Nav as K, Input as C, Time as Q, Dialog as X } from "@base-framework/atoms";
+import { Atom as c, Component as p, Html as L, Dom as Z, base as ee, Data as k, Builder as q, Jot as S, DateTime as $ } from "@base-framework/base";
 import { P as D, b as te } from "./calendar-BDqm833e.js";
 import { B as u, I as x } from "./buttons-CVEwmPAi.js";
 import { Icons as d } from "./icons.es.js";
@@ -166,7 +166,7 @@ class mt extends p {
     ]);
   }
 }
-const pe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), xe = c((e, t) => R({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), we = c((e, t) => b({ ...e, class: "text-sm text-muted-foreground italic" }, t)), ye = c((e, t) => b({ ...e, class: "text-sm text-destructive" }, t)), ve = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", H = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = H(o.children, t, s)), o.required && ve(o) ? {
+const pe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), xe = c((e, t) => W({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), we = c((e, t) => b({ ...e, class: "text-sm text-muted-foreground italic" }, t)), ye = c((e, t) => b({ ...e, class: "text-sm text-destructive" }, t)), ve = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", H = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = H(o.children, t, s)), o.required && ve(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
@@ -225,14 +225,14 @@ const pe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
 ), ke = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
 }, Se = c(
-  (e, t) => W({ ...e, submit: (s, o) => ke(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+  (e, t) => R({ ...e, submit: (s, o) => ke(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
 ), gt = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), bt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
-  e.title && B({ class: "font-semibold" }, e.title),
+  e.title && A({ class: "font-semibold" }, e.title),
   ...t
 ])), pt = (e, t) => n({ class: "flex justify-between" }, [
   a({ class: "text-muted-foreground" }, e),
   a(t)
-]), De = ({ title: e, description: t, back: s, icon: o, options: r = [] }) => $({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+]), De = ({ title: e, description: t, back: s, icon: o, options: r = [] }) => B({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
@@ -246,7 +246,7 @@ const pe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
    */
   n({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
     n({ class: "flex flex-auto flex-col" }, [
-      B({ class: "text-lg font-semibold m-0" }, e),
+      A({ class: "text-lg font-semibold m-0" }, e),
       t && n({ class: "text-sm text-muted-foreground" }, t)
     ]),
     ...r
@@ -415,7 +415,7 @@ class xt extends p {
     this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(), document.documentElement.style.overflowY = "auto";
   }
 }
-const z = {
+const N = {
   info: {
     bgColor: "bg-muted/10",
     borderColor: "border-blue-500",
@@ -441,13 +441,13 @@ const z = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Ae = (e) => $({ class: "flex justify-center" }, [
+}, $e = (e) => B({ class: "flex justify-center" }, [
   G({ class: "text-lg font-bold mb-0" }, e)
-]), Be = c(({ href: e, class: t }, s) => Y({
+]), Ae = c(({ href: e, class: t }, s) => Y({
   class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
   href: e,
   role: "alert"
-}, s)), $e = c(({ close: e, class: t }, s) => n({
+}, s)), Be = c(({ close: e, class: t }, s) => n({
   class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
   click: () => e(),
   role: "alert"
@@ -476,10 +476,10 @@ class Me extends ae {
    */
   render() {
     const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, l = this.getChildren(o);
-    return r ? Be({
+    return r ? Ae({
       href: r,
       class: `${t} ${s}`
-    }, l) : $e({
+    }, l) : Be({
       close: this.close.bind(this),
       class: `${t} ${s}`
     }, l);
@@ -500,7 +500,7 @@ class Me extends ae {
    */
   getTypeStyles() {
     const t = this.type || "default";
-    return z[t] || z.default;
+    return N[t] || N.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -527,7 +527,7 @@ class Me extends ae {
         this.icon && f({ class: `mr-4 ${t}`, html: this.icon }),
         n({ class: "flex flex-auto flex-col" }, [
           n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
-            this.title && Ae(this.title)
+            this.title && $e(this.title)
           ]),
           b({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
           (this.primary || this.secondary) && M({ class: "margin-top-24 flex align-center" }, this.getButtons())
@@ -587,7 +587,7 @@ class wt extends p {
     this.list.delete(t.id);
   }
 }
-const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
+const z = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
   class: 'text-sm gap-1 font-medium leading-none disabled:cursor-not-allowed disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 bg-popover p-4 hover:bg-accent hover:text-accent-foreground data-[state="active"]:border-primary [&:has([data-state="active"])]:border-primary',
   onState: ["method", { active: e }],
   dataSet: ["method", ["state", e, "active"]],
@@ -600,7 +600,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
 ])), Pe = (e) => {
   var o;
   const t = document.documentElement;
-  if (e === "system" && (e = (o = window.matchMedia) != null && o.call(window, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), N && !N("(prefers-color-scheme: " + e + ")").matches) {
+  if (e === "system" && (e = (o = window.matchMedia) != null && o.call(window, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), z && !z("(prefers-color-scheme: " + e + ")").matches) {
     t.classList.add(e);
     return;
   }
@@ -695,8 +695,8 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, ze = (e = "") => (e = e.toUpperCase(), m[e] || m.OFFLINE), Ct = (e) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${ze(e)}`
+}, Ne = (e = "") => (e = e.toUpperCase(), m[e] || m.OFFLINE), Ct = (e) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ne(e)}`
 }), kt = ({ propName: e = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
@@ -705,7 +705,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
     [m.BUSY]: y.BUSY,
     [m.AWAY]: y.AWAY
   }]
-}), Ne = (e, t) => Y(
+}), ze = (e, t) => Y(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
@@ -718,7 +718,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
   "aria-hidden": !0,
   size: "xs"
 }, d.chevron.single.right), Ee = (e) => n({ class: "flex items-center" }, [
-  e.href ? Ne(e.href, e.label) : a(e.label),
+  e.href ? ze(e.href, e.label) : a(e.label),
   e.separator && Fe()
 ]), St = S(
   {
@@ -874,9 +874,18 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
      * @param {object} item
      * @returns {void}
      */
-    handleSelect(e) {
+    select(e) {
       const t = this.state;
-      t.selectedValue = e.value, t.selectedLabel = e.label, t.open = !1, typeof this.onSelect == "function" && this.onSelect(e);
+      t.selectedValue = e.value, t.selectedLabel = e.label, t.open = !1, typeof this.onSelect == "function" && this.onSelect(e, parent);
+    },
+    /**
+     * Selects the first item in the list.
+     *
+     * @returns {void}
+     */
+    selectFirstItem() {
+      const e = this.data.items[0];
+      this.select(e);
     },
     /**
      * Toggles the dropdown open state.
@@ -892,14 +901,15 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
      * @returns {object}
      */
     render() {
-      return n({ class: "relative w-full flex flex-auto flex-col max-w-[250px]" }, [
+      const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
+      return n({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
         // @ts-ignore
         Ye({ toggleDropdown: this.toggleDropdown.bind(this) }),
         Ue({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
-          onSelect: this.handleSelect.bind(this)
+          onSelect: this.select.bind(this)
         }),
         // Hidden required input for form validation
         // @ts-ignore
@@ -925,11 +935,11 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
   icon: d.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), Re = ({ click: e }) => U({
+}), We = ({ click: e }) => U({
   icon: d.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), We = ({ bind: e, min: t, max: s, readonly: o = !1 }) => C({
+}), Re = ({ bind: e, min: t, max: s, readonly: o = !1 }) => C({
   value: "[[count]]",
   bind: e,
   blur: (r, { state: l }) => {
@@ -966,13 +976,13 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
       const e = this.class ?? "";
       return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
         _e({ click: () => this.state.decrement("count") }),
-        We({
+        Re({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        Re({ click: () => this.state.increment("count") })
+        We({ click: () => this.state.increment("count") })
       ]);
     }
   }
@@ -987,7 +997,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
 }, [
   Ge({ bind: e, required: t }),
   a({
-    onState: ["selectedDate", (o) => o ? A.format("standard", o) : "Pick a date"]
+    onState: ["selectedDate", (o) => o ? $.format("standard", o) : "Pick a date"]
   }),
   f({ html: d.calendar.days })
 ]), Ke = ({ handleDateSelect: e, blockPriorDates: t }) => n({ class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" }, [
@@ -1006,7 +1016,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
       })
     ]) : null
   )
-]), At = w(
+]), $t = w(
   {
     /**
      * The initial state of the DatePicker.
@@ -1050,12 +1060,12 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
       ]);
     }
   }
-), Bt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => Q([
+), At = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => Q([
   new ne({
     dateTime: e,
     filter: s || ((o) => {
-      const r = A.getLocalTime(o, !0, !1, t);
-      return A.getTimeFrame(r);
+      const r = $.getLocalTime(o, !0, !1, t);
+      return $.getTimeFrame(r);
     })
   })
 ]);
@@ -1162,7 +1172,7 @@ function E(e) {
     meridian: l
   });
 }
-const $t = w(
+const Bt = w(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1224,8 +1234,8 @@ const $t = w(
   }
 ), et = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
   x({ size: "lg" }, e)
-]), tt = ({ title: e }) => $({ class: "flex flex-auto items-center" }, [
-  B({ class: "text-lg font-semibold" }, e)
+]), tt = ({ title: e }) => B({ class: "flex flex-auto items-center" }, [
+  A({ class: "text-lg font-semibold" }, e)
 ]), st = c((e, t) => X(
   {
     class: `fixed pullUpIn z-30 w-[98%] border md:w-full max-w-lg bg-popover text-foreground shadow-lg duration-200
@@ -1388,7 +1398,7 @@ export {
   nt as G,
   xt as M,
   wt as N,
-  Re as P,
+  We as P,
   pt as S,
   yt as T,
   he as a,
@@ -1408,13 +1418,13 @@ export {
   kt as o,
   y as p,
   m as q,
-  ze as r,
+  Ne as r,
   Dt as s,
   _e as t,
-  We as u,
+  Re as u,
   Tt as v,
-  At as w,
-  Bt as x,
-  $t as y,
+  $t as w,
+  At as x,
+  Bt as y,
   Mt as z
 };

package/dist/index.es.js

@@ -3,7 +3,7 @@ import { B as g, I as T, L as c } from "./buttons-CVEwmPAi.js";
 import { C as b, d as D, D as S, c as I, E as B, F as P, H as F, I as M, M as k, N, P as v, R as f, S as x, T as h, a as y, b as W, U as L, W as A } from "./inputs-DmJuUwS9.js";
 import { V as w, a as U } from "./veil-D4dRxILB.js";
 import { Icons as R } from "./icons.es.js";
-import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ta, p as ca, q as Ca, S as ba, n as Da, o as Sa, T as Ia, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-DgARq0AK.js";
+import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ta, p as ca, q as Ca, S as ba, n as Da, o as Sa, T as Ia, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-D29rC-Ec.js";
 import { A as Na, b as va, C as fa, D as xa, a as ha, F as ya, M as Wa, P as La, c as Aa, g as Ha, p as wa } from "./calendar-BDqm833e.js";
 import { B as Oa, n as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, m as Xa, r as Ya, q as Za, o as $a, p as as, T as ss, k as es, U as os, W as ts, f as rs, h as ns, i as is, c as ls, d as ps, b as us, e as ms, a as ds, g as gs } from "./signature-panel-CrKk8upb.js";
 import { B as cs, I as Cs, M as bs, d as Ds, e as Ss, g as Is, N as Bs, b as Ps, a as Fs, f as Ms, P as ks, c as Ns, S as vs, T as fs } from "./mobile-nav-wrapper-BE_hr65B.js";

package/dist/molecules.es.js

@@ -1,4 +1,4 @@
-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-DgARq0AK.js";
+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-D29rC-Ec.js";
 import { A as O, P as R, g as _ } from "./calendar-BDqm833e.js";
 export {
   o as Alert,

package/dist/types/components/molecules/combobox/combobox-atoms.d.ts

@@ -0,0 +1,4 @@
+export function DropdownButton({ toggleDropdown }: object): object;
+export function ComboboxItem(item: object, onSelect: Function, state: any): object;
+export function ComboboxDropdown(handleSelect: Function, state: object): object;
+export function DropdownContainer({ onSelect, state }: object): object;

package/package.json

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