@base-framework/ui 1.0.1726 → 1.0.2000

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
+};

package/dist/format-BLolnx9j.js

@@ -0,0 +1,122 @@
+import { DateTime as e } from "@base-framework/base";
+const a = (t, n) => (typeof t == "string" && (t = [t]), Array.isArray(t) ? (t.push(n), t) : {
+  ...t,
+  callBack: n
+}), s = (t, n = "") => t != null && t !== "" ? t : n, B = {
+  /**
+   * Formats a number with commas.
+   *
+   * @param {string|number|object|array} watcher
+   * @param {string|null} defaultValue - Value if original is null or undefined.
+   * @returns {object|array}
+   */
+  number(t, n = null) {
+    return a(t, (r) => {
+      if (!isNaN(r)) {
+        const c = /\B(?=(\d{3})+(?!\d))/g;
+        return r.toString().replace(c, ",");
+      }
+      return n || "";
+    });
+  },
+  /**
+   * Formats a boolean value as a yes/no string.
+   *
+   * @param {string|number|object|array} watcher
+   * @param {string} yes - Text for true values.
+   * @param {string} no - Text for false values.
+   * @returns {object|array}
+   */
+  yesno(t, n = "Yes", l = "No") {
+    return a(t, (c) => c ? n : l);
+  },
+  /**
+   * Formats a value as money with two decimals.
+   *
+   * @param {string|number|object|array} watcher
+   * @param {string} currency - Currency symbol.
+   * @param {*} defaultValue - Value if original is invalid.
+   * @returns {object|array}
+   */
+  money(t, n = "$", l = null) {
+    return a(t, (c) => {
+      const o = parseFloat(c);
+      if (isNaN(o))
+        return n + l || "";
+      const i = /\B(?=(\d{3})+(?!\d))/g;
+      return n + o.toFixed(2).toString().replace(i, ",");
+    });
+  },
+  /**
+   * Formats a value as a US phone number (10 digits).
+   *
+   * @param {string|object|array} watcher
+   * @param {*} defaultValue - Value if original is invalid.
+   * @returns {object|array}
+   */
+  phone(t, n = null) {
+    return a(t, (r) => {
+      r = r || "";
+      const c = String(r.toString()).replace(/\D/g, "");
+      return c.length === 10 ? "(" + c.slice(0, 3) + ") " + c.slice(3, 6) + "-" + c.slice(6) : r || n;
+    });
+  },
+  /**
+   * Formats a value as an integer (rounds down).
+   *
+   * @param {string|number|object|array} watcher
+   * @param {*} defaultValue - Value if original is invalid.
+   * @returns {object|array}
+   */
+  integer(t, n = null) {
+    return a(t, (r) => {
+      r = s(r, n);
+      const c = parseInt(r, 10);
+      return isNaN(c) ? n : c.toString();
+    });
+  },
+  /**
+   * Formats a date value to a standard date format.
+   *
+   * @param {string|number|object|array} watcher
+   * @param {*} defaultValue - Value if original is invalid.
+   * @returns {object|array}
+   */
+  date(t, n = null) {
+    return a(t, (r) => r ? e.format("standard", r) : n || "");
+  },
+  /**
+   * Formats a date and time value to a standard date and time format.
+   *
+   * @param {string|number|object|array} watcher
+   * @param {*} defaultValue - Value if original is invalid.
+   * @returns {object|array}
+   */
+  dateTime(t, n = null) {
+    return a(t, (r) => r ? e.format("standard", r) + " " + e.formatTime(r, 12) : n || "");
+  },
+  /**
+   * Formats a time value to a standard time format.
+   *
+   * @param {string|number|object|array} watcher
+   * @param {*} defaultValue - Value if original is invalid.
+   * @returns {object|array}
+   */
+  time(t, n = null) {
+    return a(t, (r) => r ? e.formatTime(r, 12) : n || "");
+  },
+  /**
+   * Formats a value with a default value if null or undefined.
+   *
+   * @param {string|number|object|array} watcher
+   * @param {string|null} defaultValue - Value if original is null or undefined.
+   * @returns {object|array}
+   */
+  default(t, n = null) {
+    return a(t, (r) => s(r, n));
+  }
+};
+export {
+  B as F,
+  a as c
+};

package/dist/icons.es.js

@@ -110,6 +110,9 @@ const o = {
 </svg>`
     }
   },
+  upload: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
+</svg>`,
   download: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
 </svg>`,
@@ -535,7 +538,7 @@ const o = {
   link: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
 </svg>`,
-  mignifingGlass: {
+  magnifyingGlass: {
     default: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
 </svg>`,

package/dist/image-scaler-1G-JzJVG.js

@@ -0,0 +1,530 @@
+import { base as r } from "@base-framework/base";
+class g {
+  /**
+   * Creates an instance of ElementScaler.
+   *
+   * @constructor
+   * @param {HTMLElement} element - The DOM element to scale.
+   */
+  constructor(t) {
+    this.element = t, this.elementBoundingBox = null, this.container = t.parentNode, this.containerSize = {
+      width: 0,
+      height: 0,
+      top: 0,
+      left: 0
+    }, this.setup();
+  }
+  /**
+   * Initializes the scaling behavior by removing margins
+   * and triggering a resize check.
+   *
+   * @returns {void}
+   */
+  setup() {
+    this.removeMargin(), this.resize();
+  }
+  /**
+   * Removes all margin from the element (top/right/bottom/left).
+   *
+   * @returns {void}
+   */
+  removeMargin() {
+    this.element.style.margin = "0px 0px 0px 0px";
+  }
+  /**
+   * Gets the current bounding box of the element.
+   *
+   * @returns {DOMRect|null} The bounding box or null if not set.
+   */
+  getSize() {
+    return this.elementBoundingBox;
+  }
+  /**
+   * Calculates and caches the bounding client rect for the element.
+   *
+   * @returns {void}
+   */
+  setBoundingBox() {
+    this.elementBoundingBox = this.element.getBoundingClientRect();
+  }
+  /**
+   * Applies translation and scaling (width/height) to the element.
+   *
+   * @param {number} x - The horizontal position (left).
+   * @param {number} y - The vertical position (top).
+   * @param {number} scale - Scale factor (e.g., 1.0 = 100%, 0.5 = 50%).
+   * @returns {{width: number, height: number}} The new width and height after scaling.
+   */
+  transform(t, e, s) {
+    const n = this.element, i = n.style;
+    i.top = e + "px", i.left = t + "px";
+    const o = n.naturalWidth * s, c = n.naturalHeight * s;
+    return i.width = o + "px", i.height = c + "px", { width: o, height: c };
+  }
+  /**
+   * Updates internal bounding boxes for both the element and its container.
+   *
+   * @returns {void}
+   */
+  resize() {
+    this.setBoundingBox(), this.containerSize = this.container.getBoundingClientRect();
+  }
+}
+class m {
+  /**
+   * Creates an EventController instance.
+   *
+   * @constructor
+   * @param {object} parent - The parent object (ImageScaler) that handles actions.
+   * @param {HTMLElement} container - The DOM element to attach events to.
+   */
+  constructor(t, e) {
+    this.parent = t, this.container = e, this.pointer = { x: 0, y: 0, status: "up" }, this.setup();
+  }
+  /**
+   * Initializes event setup.
+   *
+   * @returns {void}
+   */
+  setup() {
+    this.setupEvents();
+  }
+  /**
+   * Removes all event listeners.
+   *
+   * @returns {void}
+   */
+  remove() {
+    this.removeEvents();
+  }
+  /**
+   * Creates and binds all required event listeners.
+   *
+   * @returns {void}
+   */
+  setupEvents() {
+    const t = this.container, e = r.bind(this, this.pointerMove), s = r.bind(this, this.pointerUp), n = r.bind(this, this.pointerDown), i = r.bind(this, this.wheel), o = r.bind(this, this.resize);
+    this.addEvents = function() {
+      r.on(["mousemove", "touchmove"], t, e), r.on(["mouseup", "mouseout", "touchend", "touchcancel"], t, s), r.on(["mousedown", "touchstart"], t, n), r.onMouseWheel(i, t, !0), r.on("resize", globalThis, o);
+    }, this.addEvents(), this.removeEvents = function() {
+      r.off(["mousemove", "touchmove"], t, e), r.off(["mouseup", "mouseout", "touchend", "touchcancel"], t, s), r.off(["mousedown", "touchstart"], t, n), r.offMouseWheel(i, t), r.off("resize", globalThis, o);
+    };
+  }
+  /**
+   * Handles mouse wheel or pinch events.
+   *
+   * @param {number} delta - The wheel direction (positive or negative).
+   * @param {Event} e - The associated event.
+   * @returns {void}
+   */
+  wheel(t, e) {
+    this.parent.callAction("pinch", e, t);
+  }
+  /**
+   * Extracts the position from mouse or touch events and updates `this.pointer`.
+   *
+   * @param {Event} e - The event object.
+   * @returns {void}
+   */
+  getEventPosition(t) {
+    let e, s;
+    const n = t.touches;
+    if (n && n.length) {
+      const i = n[0];
+      e = i.clientX, s = i.clientY;
+    } else
+      e = t.clientX, s = t.clientY;
+    this.pointer.x = e, this.pointer.y = s;
+  }
+  /**
+   * Called when the pointer goes down (mouse/touch).
+   *
+   * @param {Event} e - The associated event.
+   * @returns {void}
+   */
+  pointerDown(t) {
+    this.getEventPosition(t), this.pointer.status = "down", this.isGesture(t) === !1 && this.parent.callAction("pointerDown", t);
+  }
+  /**
+   * Called when the pointer is released.
+   *
+   * @param {Event} e - The associated event.
+   * @returns {void}
+   */
+  pointerUp(t) {
+    this.pointer.status = "up", this.parent.callAction("pointerUp", t), this.pinchTracker.reset();
+  }
+  /**
+   * Handles window resize actions.
+   *
+   * @returns {void}
+   */
+  resize() {
+    this.parent.resize();
+  }
+  /**
+   * Tracks and measures distances between touches for pinch gestures.
+   */
+  pinchTracker = {
+    /** @type {number|null} */
+    previousDistance: null,
+    /** @type {number|null} */
+    currentDistance: null,
+    /**
+     * Calculates Euclidean distance between two points.
+     *
+     * @param {number} x1
+     * @param {number} y1
+     * @param {number} x2
+     * @param {number} y2
+     * @returns {number}
+     */
+    distance(t, e, s, n) {
+      return Math.sqrt(
+        (t - s) * (t - s) + (e - n) * (e - n)
+      );
+    },
+    /**
+     * If currentDistance is set, store it as previousDistance.
+     *
+     * @returns {void}
+     */
+    setPreviousDistance() {
+      this.currentDistance !== null && (this.previousDistance = this.currentDistance);
+    },
+    /**
+     * Sets the current distance between two touch points.
+     *
+     * @param {object} touch1
+     * @param {object} touch2
+     * @returns {void}
+     */
+    setCurrentDistance(t, e) {
+      this.currentDistance = this.distance(t.x, t.y, e.x, e.y);
+    },
+    /**
+     * Updates currentDistance and keeps track of the previous distance.
+     *
+     * @param {object} touch1
+     * @param {object} touch2
+     * @returns {number} The updated current distance.
+     */
+    updateCurrentDistance(t, e) {
+      return this.setPreviousDistance(), this.setCurrentDistance(t, e), this.currentDistance;
+    },
+    /**
+     * Determines the scale direction (zoom in/out) based on distance changes.
+     *
+     * @param {object} touch1
+     * @param {object} touch2
+     * @returns {number} 1 for zoom in, -1 for zoom out, 0 if below threshold.
+     */
+    getScale(t, e) {
+      let s = 0;
+      const n = this.updateCurrentDistance(t, e), i = this.previousDistance;
+      return i === null || Math.abs(n - i) < 2 || (n > i ? s = 1 : n < i && (s = -1)), s;
+    },
+    /**
+     * Resets the distance measurements.
+     *
+     * @returns {void}
+     */
+    reset() {
+      this.previousDistance = null, this.currentDistance = null;
+    }
+  };
+  /**
+   * Extracts all touches from the event object.
+   *
+   * @param {Event} e - The touch event.
+   * @returns {Array<object>} Array of touch points.
+   */
+  getTouches(t) {
+    const e = [], s = t.touches;
+    if (s && s.length)
+      for (let n = 0; n < s.length; n++)
+        e.push(s[n]);
+    return e;
+  }
+  /**
+   * Calculates the midpoint (center) between two sets of coordinates.
+   *
+   * @param {number} x1
+   * @param {number} y1
+   * @param {number} x2
+   * @param {number} y2
+   * @returns {{x: number, y: number}} The center coordinates.
+   */
+  getCenter(t, e, s, n) {
+    return {
+      x: (t + s) / 2,
+      y: (e + n) / 2
+    };
+  }
+  /**
+   * Attempts a pinch gesture if two touches are present.
+   *
+   * @param {Event} e - The touch event.
+   * @returns {void}
+   */
+  pinch(t) {
+    const e = this.getTouches(t);
+    if (e.length === 2) {
+      this.pointer.status = "down";
+      const s = e[0], n = e[1], i = this.getPosition(s.clientX, s.clientY), o = this.getPosition(n.clientX, n.clientY);
+      this.centerMousePinch(s, n);
+      const c = this.pinchTracker.getScale(i, o);
+      this.parent.callAction("pinch", t, c);
+    }
+  }
+  /**
+   * Creates a coordinate object from x/y.
+   *
+   * @param {number} eX
+   * @param {number} eY
+   * @returns {{x: number, y: number}}
+   */
+  getPosition(t, e) {
+    return {
+      x: parseInt(String(t)),
+      y: parseInt(String(e))
+    };
+  }
+  /**
+   * Moves pointer coordinates to the midpoint of two touches for pinch usage.
+   *
+   * @param {Touch} touch1
+   * @param {Touch} touch2
+   * @returns {void}
+   */
+  centerMousePinch(t, e) {
+    const s = this.getCenter(
+      t.clientX,
+      t.clientY,
+      e.clientX,
+      e.clientY
+    ), n = this.pointer;
+    n.x = s.x, n.y = s.y;
+  }
+  /**
+   * Called on a rotate gesture (currently not used).
+   *
+   * @param {Event} e - The associated event.
+   * @returns {void}
+   */
+  rotate(t) {
+    this.pointer.status = "down", this.parent.callAction("rotate", t);
+  }
+  /**
+   * Checks if the event is a multi-touch gesture. If yes, performs pinch logic.
+   *
+   * @param {Event} e - The event object.
+   * @returns {boolean} True if it was a gesture (pinch); false otherwise.
+   */
+  isGesture(t) {
+    let e = !1;
+    const s = t.touches;
+    return s && s.length > 1 && (t.preventDefault(), this.pinch(t), e = !0), e;
+  }
+  /**
+   * Called when the pointer moves (mouse/touch) but might also detect pinch.
+   *
+   * @param {Event} e - The associated event.
+   * @returns {void}
+   */
+  pointerMove(t) {
+    this.getEventPosition(t), this.isGesture(t) === !1 && this.parent.callAction("pointerMove", t);
+  }
+}
+class v {
+  /**
+   * Creates an instance of ImageScaler.
+   *
+   * @constructor
+   * @param {HTMLImageElement} element - The image element to scale.
+   */
+  constructor(t) {
+    this.elementScaler = new g(t), this.scale = this.getImageScale(t), this.panning = !1, this.events = null, this.start = { x: 0, y: 0 }, this.delta = { x: 0, y: 0 }, this.setup();
+  }
+  /**
+   * Initializes event handling and centers the image.
+   *
+   * @returns {void}
+   */
+  setup() {
+    this.setupEvents(), this.center();
+  }
+  /**
+   * Removes all event bindings.
+   *
+   * @returns {void}
+   */
+  remove() {
+    this.events.remove();
+  }
+  /**
+   * Invokes a method on this class by name, passing event/data.
+   *
+   * @param {string} action - The method name to call.
+   * @param {Event} e - The associated event object.
+   * @param {*} [data] - Additional data passed to the method.
+   * @returns {void}
+   */
+  callAction(t, e, s) {
+    this[t](e, s);
+  }
+  /**
+   * Sets up the event controller for the image.
+   *
+   * @returns {void}
+   */
+  setupEvents() {
+    this.events = new m(this, this.elementScaler.element);
+  }
+  /**
+   * Calculates an initial scale based on the element's offsetWidth vs. naturalWidth.
+   *
+   * @param {HTMLImageElement} element - The image element.
+   * @returns {number} The initial scale factor.
+   */
+  getImageScale(t) {
+    return t.offsetWidth / t.naturalWidth;
+  }
+  /**
+   * Gets the offset position of the pointer, adjusted by scale and delta.
+   *
+   * @param {Event} e - The associated event object.
+   * @returns {{x: number, y: number}} The pointer offset without scale.
+   */
+  getOffset(t) {
+    const e = this.scale, s = this.delta, n = this.getPointerPosition();
+    return {
+      x: (n.x - s.x) / e,
+      y: (n.y - s.y) / e
+    };
+  }
+  /**
+   * Transforms the element (x, y, scale) and then re-centers it if needed.
+   *
+   * @param {number} x - The new left offset.
+   * @param {number} y - The new top offset.
+   * @param {number} scale - The scale factor.
+   * @returns {void}
+   */
+  scaleElement(t, e, s) {
+    const n = this.elementScaler.transform(t, e, s);
+    this.center(n.width, n.height);
+  }
+  /**
+   * Attempts to center the scaled element within its container, respecting boundaries.
+   *
+   * @param {number} [width] - Width of the scaled element.
+   * @param {number} [height] - Height of the scaled element.
+   * @returns {void}
+   */
+  center(t, e) {
+    const s = this.elementScaler, n = s.containerSize, i = s.elementBoundingBox, o = this.delta;
+    t = t || i.width, e = e || i.height;
+    let c, h;
+    const a = n.width;
+    if (t < a)
+      c = a / 2 - t / 2, c = c > 0 ? c : 0;
+    else {
+      c = o.x;
+      const l = t + o.x;
+      l < a && (c = l + (a - l) - t), o.x > 0 && (c = 0);
+    }
+    const u = n.height;
+    if (e < u)
+      h = u / 2 - e / 2, h = h > 0 ? h : 0;
+    else {
+      h = o.y;
+      const l = e + o.y;
+      l < u && (h = l + (u - l) - e), o.y > 0 && (h = 0);
+    }
+    const f = s.element.style;
+    f.left = c + "px", f.top = h + "px", this.delta = { x: c, y: h };
+  }
+  /** @type {number} Minimum allowed scale factor. */
+  minScale = 0.2;
+  /**
+   * Updates the current scale (zoom) value based on scroll delta.
+   *
+   * @param {number} delta - Positive = zoom in, negative = zoom out.
+   * @returns {number} The updated scale factor.
+   */
+  updateScale(t) {
+    let e = this.scale;
+    return t !== 0 && (e = t > 0 ? this.scale *= 1.05 : this.scale /= 1.05), e <= this.minScale && (this.scale = this.minScale), this.scale;
+  }
+  /**
+   * Returns the pointer position relative to the container.
+   *
+   * @returns {{x: number, y: number}} The pointer coordinates.
+   */
+  getPointerPosition() {
+    const t = this.elementScaler.containerSize, e = this.events.pointer;
+    return {
+      x: e.x - t.left,
+      y: e.y - t.top
+    };
+  }
+  /**
+   * Called when the user presses down on the pointer (mouse/touch).
+   *
+   * @param {Event} e - The associated event object.
+   * @returns {void}
+   */
+  pointerDown(t) {
+    const e = this.delta, s = this.getPointerPosition();
+    this.start = {
+      x: s.x - e.x,
+      y: s.y - e.y
+    }, this.panning = !0;
+  }
+  /**
+   * Called when the user moves the pointer (mouse/touch).
+   *
+   * @param {Event} e - The associated event object.
+   * @returns {void}
+   */
+  pointerMove(t) {
+    if (t.preventDefault(), !this.panning)
+      return;
+    const e = this.getPointerPosition(), s = this.delta, n = this.start;
+    s.x = e.x - n.x, s.y = e.y - n.y, this.scaleElement(s.x, s.y, this.scale);
+  }
+  /**
+   * Called when the user releases the pointer (mouse/touch).
+   *
+   * @param {Event} e - The associated event object.
+   * @returns {void}
+   */
+  pointerUp(t) {
+    this.panning = !1;
+  }
+  /**
+   * Recalculates container/element bounding sizes, e.g., on window resize.
+   *
+   * @returns {void}
+   */
+  resize() {
+    this.elementScaler.resize();
+  }
+  /**
+   * Called on pinch gesture (usually from a wheel or multi-touch).
+   *
+   * @param {Event} e - The associated event.
+   * @param {number} delta - Positive = zoom in, negative = zoom out.
+   * @returns {void}
+   */
+  pinch(t, e) {
+    const s = this.getOffset(t);
+    t.preventDefault();
+    const n = this.updateScale(e), i = this.getPointerPosition(), o = this.delta;
+    o.x = i.x - s.x * n, o.y = i.y - s.y * n, this.scaleElement(o.x, o.y, n);
+  }
+}
+export {
+  v as I
+};