@base-framework/ui 1.0.310 → 1.0.312

package/dist/{signature-panel-DWBWqY8V.js → signature-panel-1P_xBZA9.js}

@@ -1,16 +1,16 @@
-import { Button as w, Div as o, On as S, Span as C, Th as z, UseParent as F, I as E, Thead as Q, Tr as G, Table as I, P as x, Li as y, Time as X, Nav as m, Ul as g, Section as L, Canvas as q } from "@base-framework/atoms";
-import { Atom as h, Component as c, Data as B, DateTime as K, router as k, NavLink as T, DataTracker as N, Jot as V, base as R, Dom as O } from "@base-framework/base";
+import { Button as k, Div as o, On as S, Span as C, Th as z, UseParent as F, I as E, Thead as Q, Tr as G, Table as I, P as y, Li as w, Time as X, Nav as m, Ul as g, Section as L, Canvas as q } from "@base-framework/atoms";
+import { Atom as h, Component as c, Data as B, DateTime as K, router as x, NavLink as T, DataTracker as N, Jot as V, base as R, Dom as O } from "@base-framework/base";
 import { B as M, I as _ } from "./buttons-CHEs54Wl.js";
 import { Icons as D } from "./icons.es.js";
 import { TableBody as J, DataTableBody as Z, ScrollableTableBody as ee, List as te, IntervalTimer as se } from "@base-framework/organisms";
 import { C as ae, I as ie, H as ne } from "./inputs-9udyzkHR.js";
-import { A as oe, P as le } from "./range-calendar-CnBylqhu.js";
+import { A as oe, P as le } from "./range-calendar-BMWSJTE0.js";
 h((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
   children: e
 }));
-h(({ value: t, label: e }) => w({
+h(({ value: t, label: e }) => k({
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-md px-8 py-1 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-background data-[state=active]:text-foreground data-[state=active]:shadow",
   onState: ["performance", { active: t }],
   dataSet: ["performance", ["state", t, "active"]],
@@ -82,7 +82,7 @@ const re = (t) => {
   return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
 }, fe = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
   const n = ue(t, e, s);
-  return w({
+  return k({
     text: t || "",
     disabled: !t,
     class: `
@@ -299,9 +299,9 @@ class pt extends c {
 const be = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, ke = (t) => z({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+}, xe = (t) => z({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
   F((e) => new ae({ class: "mr-2", onChange: (s, a) => be(e, a) }))
-]), we = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
+]), ke = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
   return z({
     class: `cursor-pointer py-3 px-4 text-base ${n || ""}`,
@@ -317,7 +317,7 @@ const be = (t, e) => {
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
-      (e) => e.label === "checkbox" ? ke({ toggle: t.toggle }) : we({
+      (e) => e.label === "checkbox" ? xe({ toggle: t.toggle }) : ke({
         align: e.align,
         sortable: e.sortable,
         key: e.key,
@@ -326,7 +326,7 @@ const be = (t, e) => {
       })
     ]
   })
-]), ye = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new J({
+]), we = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new J({
   cache: "list",
   key: t,
   items: e,
@@ -422,7 +422,7 @@ class U extends c {
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          ye({
+          we({
             // @ts-ignore
             key: this.key,
             // @ts-ignore
@@ -501,7 +501,7 @@ class U extends c {
     this.data.selectedRows = [];
   }
 }
-const xe = (t) => new Z({
+const ye = (t) => new Z({
   cache: "list",
   loadMoreItems: t.loadMoreItems,
   offset: t.offset,
@@ -530,7 +530,7 @@ class ve extends U {
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          xe({
+          ye({
             // @ts-ignore
             loadMoreItems: this.loadMoreItems,
             // @ts-ignore
@@ -651,7 +651,7 @@ class Se extends U {
     this.list.refresh();
   }
 }
-const kt = h((t) => new Se(
+const xt = h((t) => new Se(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -670,20 +670,20 @@ const kt = h((t) => new Se(
     skeleton: t.skeleton
   }
 )), Ce = h(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
-  x({ class: "text-base font-semibold leading-6 m-0" }, t),
-  x({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
+  y({ class: "text-base font-semibold leading-6 m-0" }, t),
+  y({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
 ])), Le = () => o({ class: "flex items-center gap-x-1.5" }, [
   o({ class: "flex-none rounded-full bg-emerald-500/20 p-1" }, [
     o({ class: "h-1.5 w-1.5 rounded-full bg-emerald-500" })
   ]),
-  x({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), Ie = (t) => x({ class: "text-xs leading-5 text-muted-foreground" }, [
+  y({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), Ie = (t) => y({ class: "text-xs leading-5 text-muted-foreground" }, [
   C("Last seen "),
   X({ datetime: t }, "3h ago")
 ]), Be = (t, e) => t === "online" ? Le() : Ie(e), Te = h(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
-  x({ class: "text-sm leading-6 m-0" }, t),
+  y({ class: "text-sm leading-6 m-0" }, t),
   Be(s, e)
-])), Me = (t) => t.split(" ").map((s) => s[0]).join(""), Pe = h((t) => y({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+])), Me = (t) => t.split(" ").map((s) => s[0]).join(""), Pe = h((t) => w({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
   o({ class: "flex min-w-0 gap-x-4" }, [
     oe({ src: t.image, alt: t.name, fallbackText: Me(t.name) }),
     Ce({ name: t.name, email: t.email })
@@ -693,7 +693,7 @@ const kt = h((t) => new Se(
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), wt = h((t) => new te({
+])), kt = h((t) => new te({
   cache: "list",
   key: "name",
   items: t.users,
@@ -707,7 +707,7 @@ const kt = h((t) => new Se(
   dataSet: ["selected", ["state", !0, "active"]],
   class: `${a ? "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 yt extends c {
+class wt extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -735,7 +735,7 @@ class yt extends c {
           class: "flex gap-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
-            value: ["[[path]]", k.data],
+            value: ["[[path]]", x.data],
             callBack: this.updateLinks.bind(this)
           }
         })
@@ -748,7 +748,7 @@ class yt extends c {
    * @returns {void}
    */
   afterSetup() {
-    const e = k.data.path;
+    const e = x.data.path;
     this.updateLinks(e);
   }
   /**
@@ -805,7 +805,7 @@ class yt extends c {
     this.links = [];
   }
 }
-const xt = h((t) => {
+const yt = h((t) => {
   const e = t.margin || "m-4 ml-0";
   return t.allowHistory = t.allowHistory === !0, o({ class: `flex-none ${e}` }, [
     M({ variant: "back", class: "ghost", ...t })
@@ -1032,7 +1032,7 @@ class Dt extends j {
     this.container = e, this.initialize();
   }
 }
-const $e = h(({ index: t, click: e, state: s }, a) => y({
+const $e = h(({ index: t, click: e, state: s }, a) => w({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -1196,13 +1196,13 @@ const $e = h(({ index: t, click: e, state: s }, a) => y({
       ]);
     }
   }
-), je = (t) => y(
+), je = (t) => 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",
     dataSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    w({
+    k({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
@@ -1298,13 +1298,13 @@ class Ct extends c {
     };
   }
 }
-const Ye = (t) => y(
+const Ye = (t) => 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",
     dataSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    w({
+    k({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
@@ -1392,7 +1392,7 @@ class qe extends c {
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", k.data],
+          value: ["[[path]]", x.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1404,7 +1404,7 @@ class qe extends c {
    * @returns {void}
    */
   afterSetup() {
-    const e = k.data.path;
+    const e = x.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1507,13 +1507,13 @@ class It extends c {
     return s;
   }
 }
-const Ke = (t) => y(
+const Ke = (t) => 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",
     dataSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    w({
+    k({
       class: "flex flex-auto justify-center items-center px-4 py-3",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
@@ -1600,13 +1600,13 @@ class Bt extends c {
     };
   }
 }
-const Je = (t) => y(
+const Je = (t) => 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",
     dataSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    w({
+    k({
       class: "flex flex-auto justify-center items-center px-4 py-3 disabled:opacity-50 disabled:cursor-not-allowed",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
@@ -1694,7 +1694,7 @@ class it extends c {
         class: "flex flex-row items-center",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", k.data],
+          value: ["[[path]]", x.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1706,7 +1706,7 @@ class it extends c {
    * @returns {void}
    */
   afterSetup() {
-    const e = k.data.path;
+    const e = x.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1778,13 +1778,13 @@ class Mt extends c {
    * @returns {object}
    */
   render() {
-    return o({ class: "underlined-tab-panel" }, [
+    return o({ class: "underlined-tab-panel flex flex-auto flex-col" }, [
       new it({
         class: this.class,
         options: this.options
       }),
       L({
-        class: "tab-content pt-6",
+        class: "tab-content pt-6 flex flex-auto flex-col",
         switch: this.addGroup()
       })
     ]);
@@ -2114,15 +2114,15 @@ class Pt extends c {
   }
 }
 export {
-  xt as B,
-  ke as C,
-  ye as D,
-  we as H,
+  yt as B,
+  xe as C,
+  we as D,
+  ke as H,
   Dt as I,
-  yt as N,
+  wt as N,
   j as O,
   ft as P,
-  kt as S,
+  xt as S,
   P as T,
   Pe as U,
   pt as W,
@@ -2137,7 +2137,7 @@ export {
   pe as i,
   U as j,
   bt as k,
-  wt as l,
+  kt as l,
   vt as m,
   St as n,
   Ne as o,

package/dist/types/components/molecules/image/image-uploader.d.ts

@@ -0,0 +1,9 @@
+/**
+ * ImageUploader
+ *
+ * Upload button for image files, styled with a dashed circular drop zone.
+ *
+ * @type {typeof Component}
+ */
+export const ImageUploader: typeof Component;
+import { Component } from '@base-framework/base';

package/dist/types/components/molecules/molecules.d.ts

@@ -19,6 +19,7 @@ export * from "./avatars/avatar.js";
 export * from "./avatars/static-status-indicator.js";
 export * from "./avatars/status-indicator.js";
 export * from "./avatars/statuses.js";
+export * from "./image/image-uploader.js";
 export * from "./image/logo-uploader.js";
 export * from "./breadcrumb/breadcrumb.js";
 export * from "./breadcrumb/dots-indicator.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.310",
+	"version": "1.0.312",
 	"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": {