@base-framework/ui 1.0.322 → 1.0.324

package/dist/atoms.es.js

@@ -1,39 +1,40 @@
-import { B as e, C as t, F as o, L as n, P as r, R as p, S as u, a as I, T as i } from "./tooltip-B5hKQNZQ.js";
-import { B as d, I as m, L as C } from "./buttons-CHEs54Wl.js";
-import { C as x, F as B, V as F, a as c } from "./veil-CVCuKSvj.js";
-import { C as f, d as L, D as P, c as R, E as S, F as b, H as h, I as k, M as D, N as V, P as E, R as G, T as H, a as M, b as N, U, W } from "./inputs-9udyzkHR.js";
+import { B as e, C as t, F as o, L as r, P as n, R as p, S as u, a as I, T as i } from "./tooltip-PupzYM1r.js";
+import { B as d, I as m, L as x } from "./buttons-CHEs54Wl.js";
+import { C as T, F as B } from "./form-group-CJzpq9Us.js";
+import { C as c, d as f, D as g, c as L, E as P, F as R, H as S, I as b, M as h, N as k, P as D, R as V, T as E, a as G, b as H, U as M, W as N } from "./inputs-9udyzkHR.js";
+import { V as W, a as w } from "./veil-CqnAmj-D.js";
 export {
   e as Badge,
   d as Button,
-  x as Card,
-  f as Checkbox,
+  T as Card,
+  c as Checkbox,
   t as CircleGraph,
-  L as ColorInput,
-  P as DateInput,
-  R as DateTimeInput,
-  S as EmailInput,
+  f as ColorInput,
+  g as DateInput,
+  L as DateTimeInput,
+  P as EmailInput,
   o as Fieldset,
-  b as FileInput,
+  R as FileInput,
   B as FormGroup,
-  h as HiddenInput,
+  S as HiddenInput,
   m as Icon,
-  k as Input,
-  n as Legend,
-  C as LoadingButton,
-  D as MonthInput,
-  V as NumberInput,
-  E as PasswordInput,
-  r as ProgressBar,
-  G as Radio,
+  b as Input,
+  r as Legend,
+  x as LoadingButton,
+  h as MonthInput,
+  k as NumberInput,
+  D as PasswordInput,
+  n as ProgressBar,
+  V as Radio,
   p as RangeSlider,
   u as Select,
   I as Skeleton,
-  H as TelInput,
-  M as Textarea,
-  N as TimeInput,
+  E as TelInput,
+  G as Textarea,
+  H as TimeInput,
   i as Tooltip,
-  U as UrlInput,
-  F as Veil,
-  c as VeilJot,
-  W as WeekInput
+  M as UrlInput,
+  W as Veil,
+  w as VeilJot,
+  N as WeekInput
 };

package/dist/{empty-state-C5ekpz8A.js → empty-state-ByQ_GcoM.js}

@@ -1,10 +1,11 @@
 import { Div as l, H5 as se, P as w, I as C, Li as W, Span as c, Ul as G, Button as b, OnState as B, Label as O, H2 as $, Form as oe, Header as L, Footer as z, A as J, H3 as ne, Checkbox as le, Input as f, Img as K, Nav as re, UseParent as Q, OnStateOpen as E, Time as ie, Dialog as ae } from "@base-framework/atoms";
 import { Atom as u, Component as k, Html as N, Dom as ce, base as ue, Data as A, Builder as X, Jot as I, Events as y, DateTime as j } from "@base-framework/base";
 import { P as F, b as de, R as he } from "./range-calendar-BMWSJTE0.js";
-import { C as fe, F as me, a as D } from "./veil-CVCuKSvj.js";
+import { C as fe, F as me } from "./form-group-CJzpq9Us.js";
 import { B as h, I as x } from "./buttons-CHEs54Wl.js";
 import { Icons as d } from "./icons.es.js";
 import { Timer as ge, List as pe, DynamicTime as be } from "@base-framework/organisms";
+import { a as D } from "./veil-CqnAmj-D.js";
 import { F as U } from "./format-DnofNaaz.js";
 const V = {
   info: {
@@ -34,7 +35,7 @@ const V = {
   }
 }, xe = (e, t) => l({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   C({ html: e })
-]), ve = (e) => se({ class: "font-semibold" }, e), ye = (e) => w({ class: "text-sm text-muted-foreground" }, e), Bt = u(({ title: e, description: t, icon: s, type: o = "default" }) => {
+]), ve = (e) => se({ class: "font-semibold" }, e), ye = (e) => w({ class: "text-sm text-muted-foreground" }, e), Lt = u(({ title: e, description: t, icon: s, type: o = "default" }) => {
   const { borderColor: n, bgColor: r, iconColor: i } = V[o] || V.default;
   return l({ class: `flex items-start p-4 border rounded-lg ${r} ${n}` }, [
     // Icon and content
@@ -45,7 +46,7 @@ const V = {
     ])
   ]);
 });
-class Lt extends k {
+class At extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -104,7 +105,7 @@ const we = (e) => c({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
     ]) : null
   )
 ]);
-class At extends k {
+class Mt extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -167,13 +168,13 @@ class At extends k {
     ]);
   }
 }
-const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Be = u((e, t) => O({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Le = u((e, t) => w({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Ae = u((e, t) => w({ ...e, class: "text-sm text-destructive" }, t)), Mt = u((e, t = []) => fe({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
+const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Be = u((e, t) => O({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Le = u((e, t) => w({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Ae = u((e, t) => w({ ...e, class: "text-sm text-destructive" }, t)), Pt = u((e, t = []) => fe({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
   e.title && $({ class: "text-lg font-semibold py-4 px-6" }, e.title),
   e.description && w({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
   ...t
-])), Pt = u((e, t = []) => me({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
+])), jt = u((e, t = []) => me({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
   l({ class: "flex flex-col gap-y-6" }, t)
-])), jt = u((e, t = []) => {
+])), Ot = u((e, t = []) => {
   const s = e.border ? "border-t" : "";
   return l({ ...e, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${e.class || ""}` }, t);
 }), Me = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", Z = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = Z(o.children, t, s)), !o.required) ? o : Me(o) ? {
@@ -193,7 +194,7 @@ const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     ...e,
     class: "w-full"
   }, n);
-}), Ot = D(
+}), zt = D(
   {
     /**
      * The initial state of the FormField.
@@ -236,13 +237,13 @@ const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
 }, ee = u(
   (e, t) => oe({ ...e, submit: (s, o) => je(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
-), zt = u((e, t) => l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Et = u((e, t = []) => l({ class: "flex flex-col gap-y-3 py-4" }, [
+), Et = u((e, t) => l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Nt = u((e, t = []) => l({ class: "flex flex-col gap-y-3 py-4" }, [
   e.title && $({ class: "font-semibold" }, e.title),
   ...t
-])), Nt = (e, t) => l({ class: "flex justify-between" }, [
+])), Ut = (e, t) => l({ class: "flex justify-between" }, [
   c({ class: "text-muted-foreground" }, e),
   c(t)
-]), Ut = (e, t) => l({ class: "flex" }, [
+]), Vt = (e, t) => l({ class: "flex" }, [
   c({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
   c(t)
 ]), Oe = ({ title: e, description: t, back: s, icon: o, options: n = [] }) => L({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
@@ -277,7 +278,7 @@ const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     z({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
   ])
 ])), Ee = (e) => X.render(e, app.root);
-class Vt extends k {
+class Rt extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -578,7 +579,7 @@ class Re extends k {
   }
 }
 let He = 0;
-class Rt extends k {
+class Ht extends k {
   /**
    * This will render the component.
    *
@@ -631,7 +632,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, Ht = I(
+}, qt = I(
   {
     /**
      * This will render the component.
@@ -658,7 +659,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       };
     }
   }
-), qt = D(
+), Yt = D(
   {
     /**
      * The initial state of the Toggle.
@@ -720,9 +721,9 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Ye = (e = "") => (e = e.toUpperCase(), S[e] || S.OFFLINE), Yt = (e) => l({
+}, Ye = (e = "") => (e = e.toUpperCase(), S[e] || S.OFFLINE), _t = (e) => l({
   class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ye(e)}`
-}), _t = ({ propName: e = "status" } = {}) => l({
+}), Wt = ({ propName: e = "status" } = {}) => l({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
     [S.ONLINE]: T.ONLINE,
@@ -730,7 +731,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
     [S.BUSY]: T.BUSY,
     [S.AWAY]: T.AWAY
   }]
-}), _e = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1, Wt = I(
+}), _e = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1, Gt = I(
   {
     /**
      * Get the initial state for the component.
@@ -801,7 +802,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       ]);
     }
   }
-), Gt = I(
+), Jt = I(
   {
     /**
      * Get the initial state for the component.
@@ -890,7 +891,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
 }, d.chevron.single.right), Je = (e) => l({ class: "flex items-center" }, [
   e.href ? We(e.href, e.label) : c(e.label),
   e.separator && Ge()
-]), Jt = I(
+]), Kt = I(
   {
     /**
      * Set initial data
@@ -952,7 +953,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
 ]), Xe = (e, t) => Array.from({ length: e }, (s, o) => Qe({
   index: o,
   size: t
-})), Kt = I(
+})), Qt = I(
   {
     /**
      * Defines component data (props).
@@ -1013,7 +1014,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       tt(e, t)
     ]) : null
   )
-]), Qt = I(
+]), Xt = I(
   {
     /**
      * This will set up the data.
@@ -1142,7 +1143,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), Xt = D(
+})), Zt = D(
   {
     /**
      * Initial state for the counter component.
@@ -1218,7 +1219,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       blockPriorDates: t
     })
   ])
-), Zt = D(
+), es = D(
   {
     /**
      * The initial state of the DatePicker.
@@ -1308,7 +1309,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
     onRangeSelect: e,
     blockPriorDates: t
   })
-])), es = D(
+])), ts = D(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1356,7 +1357,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       ]);
     }
   }
-), ts = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => ie([
+), ss = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => ie([
   new be({
     dateTime: e,
     filter: s || ((o) => {
@@ -1477,7 +1478,7 @@ function Y(e) {
     meridian: r
   });
 }
-const ss = D(
+const os = D(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1685,7 +1686,7 @@ class wt extends k {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class os extends wt {
+class ns extends wt {
   /**
    * This will declare the props for the compiler.
    *
@@ -1715,7 +1716,7 @@ class os extends wt {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const ns = u((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
+const ls = u((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
   ee({ class: "flex flex-auto flex-col" }, [
     l({ class: "flex flex-auto flex-col gap-y-4" }, [
       l({ class: "flex flex-auto items-center justify-center" }, [
@@ -1732,50 +1733,50 @@ const ns = u((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
   ])
 ]));
 export {
-  Bt as A,
-  Jt as B,
-  Ut as C,
-  Lt as D,
-  Zt as E,
+  Lt as A,
+  Kt as B,
+  Vt as C,
+  At as D,
+  es as E,
   Te as F,
-  es as G,
-  ts as H,
-  Wt as I,
-  ss as J,
-  os as K,
-  Gt as L,
-  Vt as M,
-  Rt as N,
+  ts as G,
+  ss as H,
+  Gt as I,
+  os as J,
+  ns as K,
+  Jt as L,
+  Rt as M,
+  Ht as N,
   vt as O,
   nt as P,
   wt as Q,
-  ns as R,
-  Nt as S,
-  Ht as T,
+  ls as R,
+  Ut as S,
+  qt as T,
   ke as a,
-  At as b,
+  Mt as b,
   De as c,
   Be as d,
   Le as e,
   Ae as f,
-  Mt as g,
-  Pt as h,
-  jt as i,
+  Pt as g,
+  jt as h,
+  Ot as i,
   Pe as j,
-  Ot as k,
+  zt as k,
   ee as l,
-  zt as m,
-  Et as n,
+  Et as m,
+  Nt as n,
   Re as o,
-  qt as p,
-  Yt as q,
-  _t as r,
+  Yt as p,
+  _t as q,
+  Wt as r,
   T as s,
   S as t,
   Ye as u,
-  Kt as v,
-  Qt as w,
+  Qt as v,
+  Xt as w,
   ot as x,
   lt as y,
-  Xt as z
+  Zt as z
 };

package/dist/form-group-CJzpq9Us.js

@@ -0,0 +1,29 @@
+import { Div as a, H4 as d, P as c } from "@base-framework/atoms";
+import { Atom as t } from "@base-framework/base";
+const n = t((e, l) => {
+  const r = e.margin ?? "my-5 mx-5", s = e.padding ?? "p-4";
+  return e.hover && (e.class += " hover:shadow-lg hover:bg-muted/50"), a({
+    ...e,
+    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${r} ${s} ${e.class || ""}`
+  }, l);
+}), g = t((e, l) => {
+  const r = e.border === !0 ? "border-t" : "";
+  return a({
+    ...e,
+    class: `grid grid-cols-1 gap-y-4 sm:grid-cols-[1fr_2fr] sm:gap-x-6 pt-8 ${r} ${e.class || ""}`
+  }, [
+    e.label && a({
+      ...e.labelProps,
+      class: `flex flex-auto flex-col gap-y-1 ${e.labelProps?.class || ""}`
+    }, [
+      d({ class: "text-base" }, e.label),
+      e.description && c({ class: "text-sm text-muted-foreground" }, e.description)
+    ]),
+    // Controls container: grows to fill remaining space, spacing between items
+    a({ class: "flex flex-col gap-y-4" }, l)
+  ]);
+});
+export {
+  n as C,
+  g as F
+};