@base-framework/ui 1.2.2 → 1.2.4

package/dist/atoms.es.js

@@ -1,44 +1,47 @@
-import { B as e, C as t, a as o, F as n, b as r, L as p, P as I, R as i, S as u, T as l } from "./tooltip-BFST5Fcz.js";
-import { B as m, I as c, L as T, M as g, U as x, i as B, a as C } from "./buttons-Dxnuce2_.js";
-import { C as F, a as M, D as S, b, E as L, F as P, H as R, I as U, c as h, M as k, N as D, P as H, R as V, T as E, d as G, e as N, U as W, V as v, f as w, W as J } from "./image-T4fJLqgd.js";
-import { S as q } from "./skeleton-BlY3opxG.js";
+import { B as e, C as t, a as o, F as n, b as r, L as i, P as p, R as u, S as I, T as l } from "./tooltip-vxHsNvfy.js";
+import { B as d, C as g, a as m, I as T, L as B, M as C, T as x, U as b, i as f, b as F } from "./buttons-DthWscX3.js";
+import { C as S, a as L, D as P, b as R, E as U, F as h, H as k, I as D, c as H, M as V, N as E, P as G, R as N, T as W, d as v, e as w, U as J, V as j, f as q, W as y } from "./image-T4fJLqgd.js";
+import { S as A } from "./skeleton-BlY3opxG.js";
 export {
   e as Badge,
-  m as Button,
+  d as Button,
   t as Card,
-  F as Checkbox,
+  S as Checkbox,
+  g as CircleButton,
   o as CircleGraph,
-  M as ColorInput,
-  S as DateInput,
-  b as DateTimeInput,
-  L as EmailInput,
+  m as CircleToggleButton,
+  L as ColorInput,
+  P as DateInput,
+  R as DateTimeInput,
+  U as EmailInput,
   n as Fieldset,
-  P as FileInput,
+  h as FileInput,
   r as FormGroup,
-  R as HiddenInput,
-  c as Icon,
-  U as Image,
-  h as Input,
-  p as Legend,
-  T as LoadingButton,
-  g as MaterialIcon,
-  k as MonthInput,
-  D as NumberInput,
-  H as PasswordInput,
-  I as ProgressBar,
-  V as Radio,
-  i as RangeSlider,
-  u as Select,
-  q as Skeleton,
-  E as TelInput,
-  G as Textarea,
-  N as TimeInput,
+  k as HiddenInput,
+  T as Icon,
+  D as Image,
+  H as Input,
+  i as Legend,
+  B as LoadingButton,
+  C as MaterialIcon,
+  V as MonthInput,
+  E as NumberInput,
+  G as PasswordInput,
+  p as ProgressBar,
+  N as Radio,
+  u as RangeSlider,
+  I as Select,
+  A as Skeleton,
+  W as TelInput,
+  v as Textarea,
+  w as TimeInput,
+  x as ToggleButton,
   l as Tooltip,
-  x as UniversalIcon,
-  W as UrlInput,
-  v as Veil,
-  w as VeilJot,
-  J as WeekInput,
-  B as isHeroicon,
-  C as isMaterialIcon
+  b as UniversalIcon,
+  J as UrlInput,
+  j as Veil,
+  q as VeilJot,
+  y as WeekInput,
+  f as isHeroicon,
+  F as isMaterialIcon
 };

package/dist/buttons-DthWscX3.js

@@ -0,0 +1,254 @@
+import { I as $, Span as h, Button as r, OnState as w, On as B } from "@base-framework/atoms";
+import { Atom as i, Component as y } from "@base-framework/base";
+import { Icons as k } from "./icons.es.js";
+const S = {
+  xs: "w-4 h-4",
+  sm: "w-6 h-6",
+  md: "w-8 h-8",
+  lg: "w-10 h-10",
+  xl: "w-12 h-12",
+  "2xl": "w-14 h-14",
+  "3xl": "w-16 h-16"
+}, d = i((s, t) => {
+  const n = S[s.size || "sm"];
+  return $({
+    ...s,
+    // @ts-ignore
+    class: `stroke-current icon-size ${n} ${s.class || ""}`,
+    html: t[0]?.textContent
+  });
+}), f = {
+  xs: "w-4 h-4",
+  // 16px - matches Icon
+  sm: "w-6 h-6",
+  // 24px - matches Icon
+  md: "w-8 h-8",
+  // 32px - matches Icon
+  lg: "w-10 h-10",
+  // 40px - matches Icon
+  xl: "w-12 h-12",
+  // 48px - matches Icon
+  "2xl": "w-14 h-14",
+  // 56px - matches Icon
+  "3xl": "w-16 h-16"
+  // 64px - matches Icon
+}, m = {
+  xs: "16px",
+  sm: "24px",
+  md: "32px",
+  lg: "40px",
+  xl: "48px",
+  "2xl": "56px",
+  "3xl": "64px"
+}, b = {
+  outlined: "material-symbols-outlined",
+  filled: "material-symbols-filled",
+  rounded: "material-symbols-rounded",
+  sharp: "material-symbols-sharp"
+}, v = i((s) => {
+  const t = s.size || "sm", n = s.variant || "outlined", e = f[t] || f.sm, l = m[t] || m.sm, c = b[n] || b.outlined;
+  return h({
+    ...s,
+    // @ts-ignore
+    class: `inline-flex items-center justify-center ${c} ${e} ${s.class || ""}`,
+    // @ts-ignore
+    style: `font-size: ${l}; ${s.style || ""}`,
+    // Remove props that shouldn't be passed to the DOM element
+    size: void 0,
+    variant: void 0,
+    name: void 0
+    // @ts-ignore
+  }, s.name);
+}), o = (s = {}, t) => t ? typeof t == "string" && t.includes("<svg") ? d(s, t) : typeof t == "object" && t.name ? v({
+  ...s,
+  name: t.name,
+  variant: t.variant || s.variant || "outlined"
+}) : typeof t == "string" ? v({
+  ...s,
+  name: t
+}) : d(s, t) : null, M = (s) => s ? !!(typeof s == "object" && s.name || typeof s == "string" && !s.includes("<svg")) : !1, N = (s) => typeof s == "string" && s.includes("<svg");
+class O extends y {
+  /**
+   * Declare public props and their defaults.
+   */
+  declareProps() {
+    this.icon = null, this.activeIcon = null, this.value = null, this.dataKey = null, this.active = !1, this.toggle = null, this.size = "sm";
+  }
+  /**
+   * Set up internal states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      active: this.active ?? !1
+    };
+  }
+  /**
+   * Toggle the active state and fire the callback.
+   *
+   * @returns {void}
+   */
+  handleToggle() {
+    this.state.active = !this.state.active, typeof this.toggle == "function" && this.toggle(this.state.active);
+  }
+  /**
+   * Render the toggle button.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.size, n = this.icon, e = this.activeIcon || this.icon, l = this.dataKey ? h({ class: "toggle-btn-value text-sm tabular-nums" }, [
+      B(this.dataKey, (c) => String(c))
+    ]) : this.value !== null && this.value !== void 0 ? h({ class: "toggle-btn-value text-sm tabular-nums" }, String(this.value)) : null;
+    return r({
+      click: () => this.handleToggle(),
+      // @ts-ignore
+      class: `toggle-btn inline-flex items-center gap-1.5 bg-transparent border-0 p-0 cursor-pointer text-foreground/70 hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${this.class || ""}`
+    }, [
+      w(
+        "active",
+        (c) => o({ size: t }, c ? e : n)
+      ),
+      l
+    ]);
+  }
+}
+const u = {
+  xs: "w-6 h-6",
+  sm: "w-8 h-8",
+  md: "w-10 h-10",
+  lg: "w-12 h-12",
+  xl: "w-14 h-14",
+  "2xl": "w-16 h-16"
+};
+class E extends y {
+  /**
+   * Declare public props.
+   */
+  declareProps() {
+    this.icon = null, this.activeIcon = null, this.active = !1, this.size = "md", this.activeClass = "", this.toggle = null;
+  }
+  /**
+   * Set up internal states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      active: this.active ?? !1
+    };
+  }
+  /**
+   * Toggle active state and fire callback.
+   *
+   * @returns {void}
+   */
+  handleToggle() {
+    this.state.active = !this.state.active, typeof this.toggle == "function" && this.toggle(this.state.active);
+  }
+  /**
+   * Render the circular toggle button.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.icon, n = this.activeIcon || this.icon, e = u[this.size] || u.md, l = ["xs", "sm"].includes(this.size) ? "xs" : "sm", c = "bg-background/40 backdrop-blur-sm text-foreground", C = this.activeClass || c;
+    return r({
+      click: () => this.handleToggle(),
+      // @ts-ignore
+      class: `circle-toggle-btn inline-flex items-center justify-center rounded-full border-0 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 ${e} ${this.class || ""}`
+    }, [
+      w("active", (g) => [
+        o({
+          size: l,
+          class: `transition-colors ${g ? C : c}`
+        }, g ? n : t)
+      ])
+    ]);
+  }
+}
+const H = i((s, t) => {
+  const n = s.size || "md", e = u[n] || u.md, l = ["xs", "sm"].includes(n) ? "xs" : "sm";
+  return r({
+    ...s,
+    // @ts-ignore
+    class: `circle-btn inline-flex items-center justify-center rounded-full border-0 bg-background/40 backdrop-blur-sm text-foreground cursor-pointer transition-colors hover:bg-background/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 ${e} ${s.class || ""}`
+  }, [
+    // @ts-ignore
+    s.icon ? o({ size: l }, s.icon) : null,
+    ...t || []
+  ]);
+}), a = (s) => i((t, n) => r({
+  ...s,
+  ...t,
+  // @ts-ignore
+  class: `bttn ${s.class} ${t.class || ""}`
+}, n)), I = i(
+  (s, t) => r({
+    ...s,
+    // @ts-ignore
+    class: s.class
+  }, [
+    // @ts-ignore
+    s.icon && s.position !== "right" ? o({ size: s.size || "sm", class: s.animation ?? null }, s.icon) : null,
+    ...t || [],
+    // @ts-ignore
+    s.icon && s.position === "right" ? o({ size: s.size || "sm", class: s.animation ?? null }, s.icon) : null
+  ])
+), x = (s) => i((t, n) => I({
+  ...s,
+  ...t,
+  // @ts-ignore
+  class: `bttn ${s.class} ${t.class || ""}`
+}, n)), T = (s) => () => {
+  if (s.allowHistory === !0 && globalThis.history.length > 2) {
+    globalThis.history.back();
+    return;
+  }
+  s.backUrl && app.navigate(s.backUrl);
+}, V = (s) => i((t, n) => (t.icon = t.icon || k.arrows.left, t.click = t.click || T(t), I({
+  ...s,
+  ...t
+}, n))), j = i((s, t) => {
+  const n = s.size || "md", e = {
+    xs: "w-6 h-6",
+    sm: "w-8 h-8",
+    md: "w-10 h-10",
+    lg: "w-12 h-12",
+    xl: "w-14 h-14"
+  }, l = s.backgroundClass || "bg-background/30 hover:bg-background/50";
+  return r({
+    ...s,
+    // @ts-ignore
+    class: `circle-icon-btn inline-flex items-center justify-center rounded-full ${l} text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50 cursor-pointer ${e[n] || e.md} ${s.class || ""}`
+  }, [
+    // @ts-ignore
+    s.icon ? o({ size: n === "xs" ? "xs" : "sm" }, s.icon) : null,
+    ...t || []
+  ]);
+}), z = {
+  primary: a({ class: "primary" }),
+  secondary: a({ class: "secondary" }),
+  destructive: a({ class: "destructive" }),
+  warning: a({ class: "warning" }),
+  outline: a({ class: "outline" }),
+  ghost: a({ class: "ghost" }),
+  link: a({ class: "link" }),
+  icon: x({ class: "icon" }),
+  withIcon: x({ class: "with-icon" }),
+  back: V({ class: "with-icon back-button" }),
+  circleIcon: j
+}, U = i((s, t) => (z[s.variant] || z.primary)(s, t)), _ = i((s, t) => U({ ...s, variant: "withIcon", icon: k.loading, animation: "animate-spin" }, t));
+export {
+  U as B,
+  H as C,
+  d as I,
+  _ as L,
+  v as M,
+  O as T,
+  o as U,
+  E as a,
+  M as b,
+  N as i
+};

package/dist/{empty-state-CWha-IxF.js → empty-state-h7KNXNy2.js}

@@ -1,13 +1,13 @@
 import { Atom as c, Component as y, Html as A, Dom as Z, base as tt, Data as k, Builder as H, Jot as w, Events as g, DateTime as M } from "@base-framework/base";
 import { Div as n, H5 as et, P as b, Li as q, Span as a, Ul as V, Button as p, I as T, OnState as I, Label as P, H2 as v, Form as st, Header as B, Footer as L, A as G, H3 as ot, Checkbox as nt, Input as f, Img as W, Nav as it, UseParent as _, OnStateOpen as O, Time as rt, Dialog as lt } from "@base-framework/atoms";
-import { P as S, C as at, R as ct } from "./simple-search-input-Dbk3_QiK.js";
-import { U as m, B as h, I as dt } from "./buttons-Dxnuce2_.js";
+import { P as S, C as at, R as ct } from "./simple-search-input-gDRD6pEN.js";
+import { U as m, B as h, I as dt } from "./buttons-DthWscX3.js";
 import { Timer as ut, List as ht, DynamicTime as mt } from "@base-framework/organisms";
-import { C as ft, b as pt } from "./tooltip-BFST5Fcz.js";
+import { C as ft, b as pt } from "./tooltip-vxHsNvfy.js";
 import { f as C } from "./image-T4fJLqgd.js";
 import { Icons as u } from "./icons.es.js";
 import { F as z } from "./format-DE4rFWuD.js";
-import "./mobile-nav-wrapper-DxcNwPu2.js";
+import "./mobile-nav-wrapper-9VRCW4oA.js";
 import "./aside-template-B9V-0xle.js";
 import "./full-page-CgVI1G7F.js";
 import "./bside-template-oLChzjxQ.js";