@base-framework/ui 1.2.2 → 1.2.4

package/dist/{tooltip-BFST5Fcz.js → tooltip-vxHsNvfy.js}

@@ -1,7 +1,8 @@
-import { Span as c, Div as o, Legend as f, Fieldset as x, H4 as C, P as h, UseParent as u, Input as y } from "@base-framework/atoms";
-import { Atom as s, Html as p } from "@base-framework/base";
-import { f as d, g as k, h as w, i as $ } from "./image-T4fJLqgd.js";
-const a = {
+import { Span as d, Div as n, Legend as h, Fieldset as p, H4 as y, P as k, UseParent as b, Input as w } from "@base-framework/atoms";
+import { Atom as s, Html as $ } from "@base-framework/base";
+import { U as v } from "./buttons-DthWscX3.js";
+import { f as m, g as P, h as S, i as E } from "./image-T4fJLqgd.js";
+const g = {
   gray: {
     backgroundColor: "bg-gray-50",
     textColor: "text-gray-600",
@@ -76,58 +77,66 @@ const a = {
     backgroundColor: "bg-background",
     textColor: "text-primary",
     ringColor: "ring-background"
+  },
+  blur: {
+    backgroundColor: "bg-background/40 backdrop-blur-sm",
+    textColor: "text-foreground",
+    ringColor: "ring-white/10"
   }
-}, v = (r) => a[r] || a.gray, P = (r) => {
-  const { backgroundColor: e, textColor: t, ringColor: l } = v(r);
-  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${e} ${t} ${l}`;
-}, L = s((r, e) => {
-  const t = P(r?.type);
-  return c({ ...r, class: t }, e);
-}), G = s((r, e) => {
-  const t = r.margin ?? "my-5 mx-5", l = r.padding ?? "p-4", n = r.border ?? "border-border";
-  return r.hover && (r.class += " hover:shadow-lg hover:bg-muted/50"), o({
+}, B = (r) => g[r] || g.gray, F = (r, e = {}) => {
+  const t = B(r), o = e.backgroundColor ?? t.backgroundColor, l = e.textColor ?? t.textColor, a = e.ringColor ?? t.ringColor;
+  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${o} ${l} ${a}`;
+}, U = s((r, e) => {
+  const { type: t, icon: o, size: l = "xs", backgroundColor: a, textColor: i, ringColor: f, ...x } = r, C = F(t, { backgroundColor: a, textColor: i, ringColor: f });
+  return d({ ...x, class: C }, [
+    o ? v({ size: l, class: "mr-1" }, o) : null,
+    ...e || []
+  ]);
+}), V = s((r, e) => {
+  const t = r.margin ?? "my-5 mx-5", o = r.padding ?? "p-4", l = r.border ?? "border-border";
+  return r.hover && (r.class += " hover:shadow-lg hover:bg-muted/50"), n({
     ...r,
     // @ts-ignore
-    class: `rounded-lg ${n} bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${t} ${l} ${r.class || ""}`
+    class: `rounded-lg ${l} bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${t} ${o} ${r.class || ""}`
   }, e);
-}), S = s((r, e) => f({
+}), N = s((r, e) => h({
   ...r,
   // @ts-ignore
   class: ` font-medium -mt-4 -mx-1 px-2 py-2 ${r.class || ""}`
-}, e)), I = s((r, e) => {
+}, e)), _ = s((r, e) => {
   const t = r.border === "full" ? "border rounded-md" : "border-t";
-  return x({
+  return p({
     ...r,
     // @ts-ignore
     class: `p-6 ${t} ${r.class || ""}`
   }, [
     // @ts-ignore
-    r.legend && S(r.legend),
-    o({ class: "flex flex-auto flex-col gap-y-6" }, e)
+    r.legend && N(r.legend),
+    n({ class: "flex flex-auto flex-col gap-y-6" }, e)
   ]);
-}), R = s((r, e) => {
+}), z = s((r, e) => {
   const t = r.border === !0 ? "border-t" : "";
-  return o({
+  return n({
     ...r,
     // @ts-ignore
     class: `grid grid-cols-1 gap-y-4 sm:grid-cols-[1fr_2fr] sm:gap-x-6 pt-8 ${t} ${r.class || ""}`
   }, [
     // @ts-ignore
-    r.label && o({
+    r.label && n({
       // @ts-ignore
       ...r.labelProps,
       // @ts-ignore
       class: `flex flex-auto flex-col gap-y-1 ${r.labelProps?.class || ""}`
     }, [
       // @ts-ignore
-      C({ class: "text-base" }, r.label),
+      y({ class: "text-base" }, r.label),
       // @ts-ignore
-      r.description && h({ class: "text-sm text-muted-foreground" }, r.description)
+      r.description && k({ class: "text-sm text-muted-foreground" }, r.description)
     ]),
     // Controls container: grows to fill remaining space, spacing between items
-    o({ class: "flex flex-col gap-y-4" }, e)
+    n({ class: "flex flex-col gap-y-4" }, e)
   ]);
-}), O = d(
+}), D = m(
   {
     /**
      * This will create the initial state of the RangeSlider.
@@ -157,17 +166,17 @@ const a = {
      * @returns {object}
      */
     render() {
-      return o({ class: "relative w-full h-4 flex items-center" }, [
+      return n({ class: "relative w-full h-4 flex items-center" }, [
         // Track
-        o({ class: "absolute h-2 w-full rounded-full bg-muted" }),
-        u(({ state: r }) => [
+        n({ class: "absolute h-2 w-full rounded-full bg-muted" }),
+        b(({ state: r }) => [
           // Filled Track
-          o({
+          n({
             class: "absolute h-2 bg-primary rounded-full",
             style: ["width: [[filledPercentage]]%", r]
           }),
           // Thumb
-          o({
+          n({
             class: `
 						absolute block h-5 w-5 rounded-full border-2 border-primary bg-background
 						ring-offset-background transition-colors focus-visible:outline-none
@@ -177,7 +186,7 @@ const a = {
             style: ["left: [[filledPercentage]]%", r]
           }),
           // Hidden Range Input
-          y({
+          w({
             type: "range",
             min: ["[[min]]", r],
             max: ["[[max]]", r],
@@ -185,8 +194,8 @@ const a = {
             // Incorporate your new classes here
             class: `
 						absolute w-full h-full opacity-0 cursor-pointer
-						${k}
-						${w}
+						${P}
+						${S}
 						${this.class || ""}
 					`.trim(),
             bind: this.bind,
@@ -199,22 +208,22 @@ const a = {
       ]);
     }
   }
-), V = s((r) => ({
+), H = s((r) => ({
   tag: "select",
   onCreated(e) {
-    r.options && p.setupSelectOptions(e, r.options);
+    r.options && $.setupSelectOptions(e, r.options);
   },
   ...r,
   // @ts-ignore
-  class: `${$} ${r.class || ""}`.trim()
-})), E = (r) => !r || isNaN(r) ? null : r, i = (r, e) => {
-  const t = r, l = 16, n = 2 * Math.PI * l, b = t / 100 * n, m = `
+  class: `${E} ${r.class || ""}`.trim()
+})), A = (r) => !r || isNaN(r) ? null : r, c = (r, e) => {
+  const t = r, o = 16, l = 2 * Math.PI * o, a = t / 100 * l, i = `
 	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 		<!-- Background Circle -->
 		<circle
 			cx="18"
 			cy="18"
-			r="${l}"
+			r="${o}"
 			fill="none"
 			stroke="currentColor"
 			stroke-width="4"
@@ -225,13 +234,13 @@ const a = {
 		<circle
 			cx="18"
 			cy="18"
-			r="${l}"
+			r="${o}"
 			fill="none"
 			stroke="currentColor"
 			stroke-width="4"
 			class="stroke-primary"
-			stroke-dasharray="${n}"
-			stroke-dashoffset="${n - b}"
+			stroke-dasharray="${l}"
+			stroke-dashoffset="${l - a}"
 			stroke-linecap="round"
 			class="${e}"
 		/>
@@ -246,24 +255,24 @@ const a = {
 		</text>
 	</svg>
 	`;
-  return o({
+  return n({
     class: "circle-graph text-inherit",
-    html: m
+    html: i
   });
-}, _ = s((r) => {
-  const e = r.progress || 0, t = r.class || "", l = i(e, t);
-  return o({
+}, M = s((r) => {
+  const e = r.progress || 0, t = r.class || "", o = c(e, t);
+  return n({
     class: "circle-graph-wrap",
     onSet: [
       // @ts-ignore
       r.prop,
-      (n) => (n = E(n), n ? i(n, t) : l)
+      (l) => (l = A(l), l ? c(l, t) : o)
     ]
-  }, [l]);
-}), B = () => u(({ state: r }) => o({
+  }, [o]);
+}), T = () => b(({ state: r }) => n({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
   style: ["width: [[progress]]%;", r]
-})), D = d(
+})), J = m(
   {
     /**
      * This will render the progress bar component.
@@ -271,8 +280,8 @@ const a = {
      * @returns {object}
      */
     render() {
-      return o({ class: "relative w-full h-4 rounded-full bg-muted" }, [
-        B()
+      return n({ class: "relative w-full h-4 rounded-full bg-muted" }, [
+        T()
       ]);
     },
     /**
@@ -315,7 +324,7 @@ const a = {
       r < 0 && (r = 0), r > 100 && (r = 100), this.state.progress = r;
     }
   }
-), g = {
+), u = {
   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",
@@ -324,28 +333,28 @@ 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"
-}, F = (r) => g[String(r)] || g.top, H = s(({ position: r = "top", content: e }, t) => {
-  const l = F(r);
-  return Array.isArray(t) === !1 && (t = [t]), o({ class: "relative group inline-block" }, [
+}, I = (r) => u[String(r)] || u.top, Y = s(({ position: r = "top", content: e }, t) => {
+  const o = I(r);
+  return Array.isArray(t) === !1 && (t = [t]), n({ class: "relative group inline-block" }, [
     ...t,
     // Tooltip box
-    c({
+    d({
       class: `
 				absolute z-20 px-2 py-1 border text-sm bg-background rounded shadow-md opacity-0 whitespace-nowrap
-				group-hover:opacity-100 transition-opacity duration-200 ${l} pointer-events-none
+				group-hover:opacity-100 transition-opacity duration-200 ${o} pointer-events-none
 			`
     }, e)
   ]);
 });
 export {
-  L as B,
-  G as C,
-  I as F,
-  S as L,
-  D as P,
-  O as R,
-  V as S,
-  H as T,
-  _ as a,
-  R as b
+  U as B,
+  V as C,
+  _ as F,
+  N as L,
+  J as P,
+  D as R,
+  H as S,
+  Y as T,
+  M as a,
+  z as b
 };

package/dist/types/components/atoms/buttons/buttons.d.ts

@@ -15,3 +15,4 @@ export default Button;
  * @returns {object}
  */
 export const LoadingButton: (...args: any[]) => object;
+export { CircleButton, CircleToggleButton, ToggleButton } from "./toggle-button.js";

package/dist/types/components/atoms/buttons/toggle-button.d.ts

@@ -0,0 +1,104 @@
+/**
+ * ToggleButton
+ *
+ * A social-action style button (like, comment, share) with:
+ *  - An icon that switches between inactive/active states on click
+ *  - An optional value/count displayed alongside the icon
+ *  - Reactive value support via `dataKey` to watch a parent data property
+ *  - A `toggle` callback called with the new boolean state on each click
+ *
+ * @example
+ * // Static value
+ * new ToggleButton({ icon: Icons.heart, activeIcon: Icons.heartSolid, value: 234, toggle: (active) => {} })
+ *
+ * // Reactive value from parent data (watches `likeCount` key)
+ * new ToggleButton({ icon: Icons.heart, dataKey: 'likeCount', toggle: (active) => {} })
+ */
+export class ToggleButton extends Component {
+    /** @type {string|null} SVG icon string for the inactive state */
+    icon: string | null;
+    /** @type {string|null} SVG icon string for the active state. Falls back to `icon` when not set. */
+    activeIcon: string | null;
+    /** @type {string|number|null} Static count/value displayed next to the icon */
+    value: string | number | null;
+    /** @type {string|null} Data key to reactively watch for the displayed value */
+    dataKey: string | null;
+    /** @type {boolean} Initial active state */
+    active: boolean;
+    /** @type {Function|null} Called with the new boolean active state after each toggle */
+    toggle: Function | null;
+    /** @type {string} Icon size: xs | sm | md | lg */
+    size: string;
+    /**
+     * Set up internal states.
+     *
+     * @returns {object}
+     */
+    setupStates(): object;
+    /**
+     * Toggle the active state and fire the callback.
+     *
+     * @returns {void}
+     */
+    handleToggle(): void;
+    /**
+     * Render the toggle button.
+     *
+     * @returns {object}
+     */
+    render(): object;
+}
+/**
+ * CircleToggleButton
+ *
+ * A circular blur/tint button like the overlay controls in image viewers or media players.
+ * Defaults to `bg-background/40 backdrop-blur-sm text-foreground`.
+ * When active, applies the `activeClass` you supply (e.g. `bg-background text-foreground`).
+ *
+ * @example
+ * new CircleToggleButton({ icon: Icons.heart, size: 'md', activeClass: 'bg-background', toggle: (active) => {} })
+ * new CircleToggleButton({ icon: Icons.arrows.left, size: 'md' })
+ */
+export class CircleToggleButton extends Component {
+    /** @type {string|null} Icon for inactive state */
+    icon: string | null;
+    /** @type {string|null} Icon for active state — falls back to `icon` */
+    activeIcon: string | null;
+    /** @type {boolean} Initial active state */
+    active: boolean;
+    /** @type {string} Size token: xs | sm | md | lg | xl | 2xl */
+    size: string;
+    /** @type {string} Extra Tailwind classes applied when active */
+    activeClass: string;
+    /** @type {Function|null} Called with the new boolean state on each click */
+    toggle: Function | null;
+    /**
+     * Set up internal states.
+     *
+     * @returns {object}
+     */
+    setupStates(): object;
+    /**
+     * Toggle active state and fire callback.
+     *
+     * @returns {void}
+     */
+    handleToggle(): void;
+    /**
+     * Render the circular toggle button.
+     *
+     * @returns {object}
+     */
+    render(): object;
+}
+/**
+ * CircleButton
+ *
+ * A non-toggling circular blur/tint button (e.g. back, share, menu).
+ * Same visual style as CircleToggleButton without the toggle state.
+ *
+ * @example
+ * CircleButton({ icon: Icons.arrows.left, size: 'md', click: () => {} })
+ */
+export const CircleButton: (...args: any[]) => object;
+import { Component } from '@base-framework/base';

package/package.json

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

package/dist/buttons-Dxnuce2_.js

@@ -1,138 +0,0 @@
-import { I as y, Span as v, Button as o } from "@base-framework/atoms";
-import { Atom as i } from "@base-framework/base";
-import { Icons as b } from "./icons.es.js";
-const z = {
-  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"
-}, r = i((n, s) => {
-  const t = z[n.size || "sm"];
-  return y({
-    ...n,
-    // @ts-ignore
-    class: `stroke-current icon-size ${t} ${n.class || ""}`,
-    html: s[0]?.textContent
-  });
-}), u = {
-  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"
-}, d = {
-  outlined: "material-symbols-outlined",
-  filled: "material-symbols-filled",
-  rounded: "material-symbols-rounded",
-  sharp: "material-symbols-sharp"
-}, f = i((n) => {
-  const s = n.size || "sm", t = n.variant || "outlined", l = u[s] || u.sm, a = m[s] || m.sm, w = d[t] || d.outlined;
-  return v({
-    ...n,
-    // @ts-ignore
-    class: `inline-flex items-center justify-center ${w} ${l} ${n.class || ""}`,
-    // @ts-ignore
-    style: `font-size: ${a}; ${n.style || ""}`,
-    // Remove props that shouldn't be passed to the DOM element
-    size: void 0,
-    variant: void 0,
-    name: void 0
-    // @ts-ignore
-  }, n.name);
-}), c = (n = {}, s) => s ? typeof s == "string" && s.includes("<svg") ? r(n, s) : typeof s == "object" && s.name ? f({
-  ...n,
-  name: s.name,
-  variant: s.variant || n.variant || "outlined"
-}) : typeof s == "string" ? f({
-  ...n,
-  name: s
-}) : r(n, s) : null, U = (n) => n ? !!(typeof n == "object" && n.name || typeof n == "string" && !n.includes("<svg")) : !1, j = (n) => typeof n == "string" && n.includes("<svg"), e = (n) => i((s, t) => o({
-  ...n,
-  ...s,
-  // @ts-ignore
-  class: `bttn ${n.class} ${s.class || ""}`
-}, t)), x = i(
-  (n, s) => o({
-    ...n,
-    // @ts-ignore
-    class: n.class
-  }, [
-    // @ts-ignore
-    n.icon && n.position !== "right" ? c({ size: n.size || "sm", class: n.animation ?? null }, n.icon) : null,
-    ...s || [],
-    // @ts-ignore
-    n.icon && n.position === "right" ? c({ size: n.size || "sm", class: n.animation ?? null }, n.icon) : null
-  ])
-), h = (n) => i((s, t) => x({
-  ...n,
-  ...s,
-  // @ts-ignore
-  class: `bttn ${n.class} ${s.class || ""}`
-}, t)), k = (n) => () => {
-  if (n.allowHistory === !0 && globalThis.history.length > 2) {
-    globalThis.history.back();
-    return;
-  }
-  n.backUrl && app.navigate(n.backUrl);
-}, $ = (n) => i((s, t) => (s.icon = s.icon || b.arrows.left, s.click = s.click || k(s), x({
-  ...n,
-  ...s
-}, t))), I = i((n, s) => {
-  const t = n.size || "md", l = {
-    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"
-  }, a = n.backgroundClass || "bg-background/30 hover:bg-background/50";
-  return o({
-    ...n,
-    // @ts-ignore
-    class: `circle-icon-btn inline-flex items-center justify-center rounded-full ${a} 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 ${l[t] || l.md} ${n.class || ""}`
-  }, [
-    // @ts-ignore
-    n.icon ? c({ size: t === "xs" ? "xs" : "sm" }, n.icon) : null,
-    ...s || []
-  ]);
-}), g = {
-  primary: e({ class: "primary" }),
-  secondary: e({ class: "secondary" }),
-  destructive: e({ class: "destructive" }),
-  warning: e({ class: "warning" }),
-  outline: e({ class: "outline" }),
-  ghost: e({ class: "ghost" }),
-  link: e({ class: "link" }),
-  icon: h({ class: "icon" }),
-  withIcon: h({ class: "with-icon" }),
-  back: $({ class: "with-icon back-button" }),
-  circleIcon: I
-}, B = i((n, s) => (g[n.variant] || g.primary)(n, s)), S = i((n, s) => B({ ...n, variant: "withIcon", icon: b.loading, animation: "animate-spin" }, s));
-export {
-  B,
-  r as I,
-  S as L,
-  f as M,
-  c as U,
-  U as a,
-  j as i
-};