@base-framework/ui 1.0.273 → 1.0.274

package/dist/{inputs-DYxmO1rQ.js → skeleton-CLm2c9Bc.js}

@@ -1,7 +1,7 @@
-import { Div as u, Label as h, Checkbox as m, Span as $, OnState as p, I as x, Input as r, Textarea as k } from "@base-framework/atoms";
+import { Div as u, Label as m, Checkbox as f, Span as b, OnState as p, I as x, Input as n, Textarea as k } from "@base-framework/atoms";
 import { Jot as g, Atom as s } from "@base-framework/base";
 import { Icons as y } from "./icons.es.js";
-const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-border bg-input", o = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", a = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", l = "placeholder:text-muted-foreground", f = `${I} ${n} ${o} ${l} ${a}`, C = ({ id: e, checked: c, bind: t, required: d }) => m({
+const I = "flex h-10 w-full px-3 py-2 text-sm", r = "rounded-md border border-border bg-input", o = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", c = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", l = "placeholder:text-muted-foreground", $ = `${I} ${r} ${o} ${l} ${c}`, C = ({ id: e, checked: a, bind: t, required: d }) => f({
   id: e,
   cache: "checkbox",
   class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
@@ -9,9 +9,9 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
     checked: ["checked"]
   },
   required: d,
-  checked: c,
+  checked: a,
   bind: t
-}), v = () => $({ class: "absolute text-xs pointer-events-none" }, [
+}), v = () => b({ class: "absolute text-xs pointer-events-none" }, [
   p(
     "checked",
     (e) => e ? x({
@@ -19,11 +19,11 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
       html: y.check
     }) : null
   )
-]), w = ({ id: e, bind: c, checked: t, required: d, clickHandler: b }) => u({
+]), w = ({ id: e, bind: a, checked: t, required: d, clickHandler: h }) => u({
   class: `relative flex items-center justify-center w-5 h-5 transition-colors duration-200 hover:border-accent-foreground
 			rounded-md border
 			${o}
-			${a}`.trim(),
+			${c}`.trim(),
   onState: [
     "checked",
     {
@@ -37,15 +37,15 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
     checked: ["checked"]
   },
   tabIndex: 0,
-  click: b
+  click: h
 }, [
-  C({ bind: c, checked: t, id: e, required: d }),
+  C({ bind: a, checked: t, id: e, required: d }),
   v()
-]), T = ({ id: e, label: c, clickHandler: t }) => h({
+]), T = ({ id: e, label: a, clickHandler: t }) => m({
   class: "text-base cursor-pointer",
   htmlFor: e,
   click: t
-}, c), L = g(
+}, a), F = g(
   {
     /**
      * This will initialize the state of the checkbox.
@@ -82,7 +82,7 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
      * @returns {object}
      */
     render() {
-      const e = this.getId(), c = (t) => this.clickHandler(t);
+      const e = this.getId(), a = (t) => this.clickHandler(t);
       return u({ class: `flex items-center space-x-2 cursor-pointer ${this.class || ""}` }, [
         w({
           id: e,
@@ -93,10 +93,10 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
           // @ts-ignore
           required: this.required,
           // @ts-ignore
-          clickHandler: c
+          clickHandler: a
         }),
         // @ts-ignore
-        this.label && T({ id: e, label: this.label, clickHandler: c })
+        this.label && T({ id: e, label: this.label, clickHandler: a })
       ]);
     }
   }
@@ -105,12 +105,12 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
   const t = e.replace(/\D/g, "").match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
   return t ? t[2] ? `(${t[1]}) ${t[2]}${t[3] ? "-" + t[3] : ""}` : t[1] || "" : e;
 }, D = (e) => {
-  const c = e.target, t = H(c.value);
-  t && (c.value = t);
-}, i = s((e) => r({
+  const a = e.target, t = H(a.value);
+  t && (a.value = t);
+}, i = s((e) => n({
   ...e,
-  class: `${f} ${e.class || ""}`.trim()
-})), M = s((e) => i({
+  class: `${$} ${e.class || ""}`.trim()
+})), L = s((e) => i({
   ...e,
   type: "tel",
   name: e.name || "Phone",
@@ -118,7 +118,7 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
   placeholder: "(555) 555-5555",
   pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
   keyup: D
-})), S = s((e) => i({
+})), M = s((e) => i({
   ...e,
   type: "email",
   name: e.name || "Email",
@@ -127,34 +127,34 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
 })), q = s((e) => k({
   ...e,
   as: "textarea",
-  class: `flex w-full h-24 px-3 py-2 text-sm ${n} ${o} ${l} ${a} ${e.class || ""}`.trim()
+  class: `flex w-full h-24 px-3 py-2 text-sm ${r} ${o} ${l} ${c} ${e.class || ""}`.trim()
 })), R = (e = {}) => u({ class: "flex items-center space-x-2" }, [
-  r({
+  n({
     ...e,
     type: "radio",
     class: "cursor-pointer appearance-none h-4 w-4 border rounded-full checked:border-primary checked:bg-primary focus:ring focus:ring-primary".trim()
   }),
-  e.label && h({ forHTML: e.value, class: "cursor-pointer" }, e.label)
-]), U = s((e) => r({
+  e.label && m({ forHTML: e.value, class: "cursor-pointer" }, e.label)
+]), U = s((e) => n({
   ...e,
   type: "date",
-  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), W = s((e) => r({
+  class: `${r} ${o} ${l} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), W = s((e) => n({
   ...e,
   type: "time",
-  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), j = s((e) => r({
+  class: `${r} ${o} ${l} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), j = s((e) => n({
   ...e,
   type: "datetime-local",
-  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), z = s((e) => r({
+  class: `${r} ${o} ${l} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), z = s((e) => n({
   ...e,
   type: "month",
-  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), A = s((e) => r({
+  class: `${r} ${o} ${l} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), A = s((e) => n({
   ...e,
   type: "week",
-  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+  class: `${r} ${o} ${l} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
 })), B = s((e) => i({
   ...e,
   type: "number"
@@ -172,24 +172,26 @@ const O = s((e) => i({
 })), G = s((e) => i({
   ...e,
   type: "hidden"
-})), K = s((e) => r({
+})), K = s((e) => n({
   ...e,
   type: "color",
-  class: `${n} text-foreground p-0 ${a} ${e.class || ""}`.trim()
+  class: `${r} text-foreground p-0 ${c} ${e.class || ""}`.trim()
 }));
-s((e) => m({
+s((e) => f({
   ...e,
-  class: `flex h-4 w-4 text-foreground ${n} ${o} ${a} ${e.class || ""}`.trim()
+  class: `flex h-4 w-4 text-foreground ${r} ${o} ${c} ${e.class || ""}`.trim()
 }));
-const E = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", Q = s((e) => r({
+const E = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", Q = s((e) => n({
   ...e,
   type: "file",
-  class: `${f} ${E} ${e.class || ""}`.trim()
-}));
+  class: `${$} ${E} ${e.class || ""}`.trim()
+})), V = ({ class: e, shape: a = "rectangle", width: t = "w-full", height: d = "h-4" }) => u({
+  class: `bg-muted animate-pulse ${t} ${d} ${a === "circle" ? "rounded-full" : "rounded-md"} ${e || ""}`
+});
 export {
-  L as C,
+  F as C,
   U as D,
-  S as E,
+  M as E,
   Q as F,
   G as H,
   i as I,
@@ -197,14 +199,15 @@ export {
   B as N,
   J as P,
   R,
-  M as T,
+  V as S,
+  L as T,
   O as U,
   A as W,
   q as a,
   W as b,
   j as c,
   K as d,
-  a as e,
+  c as e,
   o as f,
-  f as g
+  $ as g
 };

package/dist/{tooltip-Cok_NM7z.js → tooltip-nLqurlbX.js}

@@ -1,7 +1,7 @@
-import { Span as c, Legend as b, Fieldset as C, Div as l, UseParent as u, Input as x } from "@base-framework/atoms";
+import { Span as c, Legend as f, Fieldset as x, Div as l, UseParent as u, Input as C } from "@base-framework/atoms";
 import { Atom as s, Html as p } from "@base-framework/base";
 import { a as d } from "./veil-tVDPinrr.js";
-import { f as h, e as y, g as k } from "./inputs-DYxmO1rQ.js";
+import { f as h, e as y, g as k } from "./skeleton-CLm2c9Bc.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",
@@ -78,22 +78,22 @@ const a = {
     textColor: "text-primary",
     ringColor: "ring-background"
   }
-}, w = (t) => a[t] || a.gray, $ = (t) => {
+}, w = (t) => a[t] || a.gray, v = (t) => {
   const { backgroundColor: e, textColor: r, ringColor: o } = w(t);
   return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${e} ${r} ${o}`;
 }, T = s((t, e) => {
-  const r = $(t == null ? void 0 : t.type);
+  const r = v(t == null ? void 0 : t.type);
   return c({ ...t, class: r }, e);
-}), v = s((t, e) => b({
+}), P = s((t, e) => f({
   ...t,
   class: ` font-medium -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
 }, e)), L = s((t, e) => {
   const r = t.border === "full" ? "border rounded-md" : "border-t";
-  return C({
+  return x({
     ...t,
     class: `p-6 ${r} ${t.class || ""}`
   }, [
-    t.legend && v(t.legend),
+    t.legend && P(t.legend),
     l({ class: "flex flex-auto flex-col space-y-6" }, e)
   ]);
 }), I = d(
@@ -146,7 +146,7 @@ const a = {
             style: ["left: [[filledPercentage]]%", t]
           }),
           // Hidden Range Input
-          x({
+          C({
             type: "range",
             min: ["[[min]]", t],
             max: ["[[max]]", t],
@@ -175,8 +175,8 @@ const a = {
   },
   ...t,
   class: `${k} ${t.class || ""}`.trim()
-})), P = (t) => !t || isNaN(t) ? null : t, i = (t, e) => {
-  const r = t, o = 16, n = 2 * Math.PI * o, m = r / 100 * n, f = `
+})), $ = (t) => !t || isNaN(t) ? null : t, i = (t, e) => {
+  const r = t, o = 16, n = 2 * Math.PI * o, m = r / 100 * n, b = `
 	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 		<!-- Background Circle -->
 		<circle
@@ -216,7 +216,7 @@ const a = {
 	`;
   return l({
     class: "circle-graph text-inherit",
-    html: f
+    html: b
   });
 }, R = s((t) => {
   const e = t.progress || 0, r = t.class || "", o = i(e, r);
@@ -224,7 +224,7 @@ const a = {
     class: "circle-graph-wrap",
     onSet: [
       t.prop,
-      (n) => (n = P(n), n ? i(n, r) : o)
+      (n) => (n = $(n), n ? i(n, r) : o)
     ]
   }, [o]);
 }), S = () => u(({ state: t }) => l({
@@ -282,9 +282,7 @@ const a = {
       t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
     }
   }
-), V = ({ class: t, shape: e = "rectangle", width: r = "w-full", height: o = "h-4" }) => l({
-  class: `bg-muted animate-pulse ${r} ${o} ${e === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
-}), g = {
+), g = {
   top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
   "top-right": "bottom-full left-full transform -translate-x-1 mb-2",
   "top-left": "bottom-full right-full transform translate-x-1 mb-2",
@@ -293,7 +291,7 @@ const a = {
   "bottom-left": "top-full right-full transform translate-x-1 mt-2",
   left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
   right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
-}, E = (t) => g[t] || g.top, D = s(({ position: t = "top", content: e }, r) => {
+}, E = (t) => g[t] || g.top, V = s(({ position: t = "top", content: e }, r) => {
   const o = E(t);
   return Array.isArray(r) === !1 && (r = [r]), l({ class: "relative group inline-block" }, [
     ...r,
@@ -310,10 +308,9 @@ export {
   T as B,
   R as C,
   L as F,
-  v as L,
+  P as L,
   O as P,
   I as R,
   G as S,
-  D as T,
-  V as a
+  V as T
 };

package/dist/types/components/organisms/lists/data-table.d.ts

@@ -4,6 +4,7 @@
  * Manages data, filtering, pagination, and selection within a table.
  *
  * @param {object} props
+ * @param {boolean|object} [props.skeleton] - Skeleton configuration. Can be true for default or object with { number: 5, row: customRowFunction }
  * @returns {object}
  */
 export class DataTable extends Component {
@@ -25,6 +26,18 @@ export class DataTable extends Component {
      * @returns {void}
      */
     updateSelected(): void;
+    /**
+     * Generates skeleton rows for the table.
+     *
+     * @returns {Array}
+     */
+    generateSkeletonRows(): any[];
+    /**
+     * Removes skeleton rows and shows real content.
+     *
+     * @returns {void}
+     */
+    removeSkeleton(): void;
     /**
      * This will get the selected rows.
      *

package/dist/types/components/organisms/lists/dynamic-data-table.d.ts

@@ -18,6 +18,7 @@
  * @property {object} [props.data] - The table data.
  * @property {string} [props.cache] - The table cache identifier.
  * @property {object|null} [props.emptyState] - The empty state to show when there are no items.
+ * @property {boolean|object} [props.skeleton] - Skeleton configuration. Can be true for default or object with { number: 5, row: customRowFunction }
  * @returns {object}
  */
 export const DynamicDataTable: Function;

package/dist/types/components/organisms/lists/dynamic-table.d.ts

@@ -15,6 +15,7 @@ export function DynamicTableBody(props: object): object;
  * @property {function} [props.rowItem] - The row item.
  * @property {string} [props.containerClass] - The class to add to the scroll container.
  * @property {object|null} [props.emptyState] - The empty state to show when there are no items.
+ * @property {boolean|object} [props.skeleton] - Skeleton configuration. Can be true for default or object with { number: 5, row: customRowFunction }
  * @returns {object}
  */
 export class DynamicTable extends DataTable {

package/dist/types/components/organisms/lists/scrollable-data-table.d.ts

@@ -19,6 +19,7 @@
  * @property {object} [props.data] - The table data.
  * @property {string} [props.cache] - The table cache identifier.
  * @property {object|null} [props.emptyState] - The empty state to show when there are no items.
+ * @property {boolean|object} [props.skeleton] - Skeleton configuration. Can be true for default or object with { number: 5, row: customRowFunction }
  * @returns {object}
  */
 export const ScrollableDataTable: Function;

package/dist/types/components/organisms/lists/scrollable-table.d.ts

@@ -16,6 +16,7 @@ export function ScrollableDataTableBody(props: object): object;
  * @property {function} [props.rowItem] - The row item.
  * @property {string} [props.containerClass] - The class to add to the scroll container.
  * @property {array} [props.emptyState] - The empty state to show when there are no items.
+ * @property {boolean|object} [props.skeleton] - Skeleton configuration. Can be true for default or object with { number: 5, row: customRowFunction }
  * @returns {object}
  */
 export class ScrollableTable extends DataTable {

package/dist/types/components/organisms/lists/skeleton-examples.d.ts

@@ -0,0 +1,12 @@
+export function BasicSkeletonExample(): DataTable;
+export function CustomCountExample(): DataTable;
+export function CustomSkeletonRowExample(): DataTable;
+export function demonstrateSkeletonUsage(): DataTable;
+declare namespace _default {
+    export { BasicSkeletonExample };
+    export { CustomCountExample };
+    export { CustomSkeletonRowExample };
+    export { demonstrateSkeletonUsage };
+}
+export default _default;
+import { DataTable } from './data-table.js';

package/dist/types/components/organisms/lists/skeleton-table-row.d.ts

@@ -0,0 +1,6 @@
+export function SkeletonTableRow({ columnCount, customCell, key }: {
+    columnCount?: number;
+    customCell?: Function;
+    key?: string;
+}): object;
+export default SkeletonTableRow;

package/package.json

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