@base-framework/ui 1.2.15 → 1.2.17

package/dist/tooltip-F0rUYr5J.js

@@ -1,404 +0,0 @@
-import { Span as m, Div as s, Legend as h, Fieldset as p, H4 as y, P as k, UseParent as x, Input as w } from "@base-framework/atoms";
-import { Atom as n, Html as $ } from "@base-framework/base";
-import { U as v } from "./buttons-C-_NH7ie.js";
-import { f as C, g as P, h as S, i as B } from "./image-XjAp5NjV.js";
-const d = {
-  gray: {
-    backgroundColor: "bg-gray-50",
-    textColor: "text-gray-600",
-    ringColor: "ring-gray-500/10"
-  },
-  red: {
-    backgroundColor: "bg-red-50",
-    textColor: "text-red-700",
-    ringColor: "ring-red-600/10"
-  },
-  yellow: {
-    backgroundColor: "bg-yellow-50",
-    textColor: "text-yellow-800",
-    ringColor: "ring-yellow-600/20"
-  },
-  green: {
-    backgroundColor: "bg-green-50",
-    textColor: "text-green-700",
-    ringColor: "ring-green-600/20"
-  },
-  blue: {
-    backgroundColor: "bg-blue-50",
-    textColor: "text-blue-700",
-    ringColor: "ring-blue-700/10"
-  },
-  indigo: {
-    backgroundColor: "bg-indigo-50",
-    textColor: "text-indigo-700",
-    ringColor: "ring-indigo-700/10"
-  },
-  purple: {
-    backgroundColor: "bg-purple-50",
-    textColor: "text-purple-700",
-    ringColor: "ring-purple-700/10"
-  },
-  pink: {
-    backgroundColor: "bg-pink-50",
-    textColor: "text-pink-700",
-    ringColor: "ring-pink-700/10"
-  },
-  primary: {
-    backgroundColor: "bg-primary",
-    textColor: "text-primary-foreground",
-    ringColor: "ring-primary/10"
-  },
-  secondary: {
-    backgroundColor: "bg-secondary",
-    textColor: "text-secondary-foreground",
-    ringColor: "ring-secondary/10"
-  },
-  destructive: {
-    backgroundColor: "bg-destructive",
-    textColor: "text-destructive-foreground",
-    ringColor: "ring-destructive/10"
-  },
-  warning: {
-    backgroundColor: "bg-warning",
-    textColor: "text-warning-foreground",
-    ringColor: "ring-warning/10"
-  },
-  outline: {
-    backgroundColor: "bg-background",
-    textColor: "text-primary",
-    ringColor: "ring-input"
-  },
-  ghost: {
-    backgroundColor: "bg-background",
-    textColor: "text-primary",
-    ringColor: "ring-background"
-  },
-  link: {
-    backgroundColor: "bg-background",
-    textColor: "text-primary",
-    ringColor: "ring-background"
-  },
-  blur: {
-    backgroundColor: "bg-background/40 backdrop-blur-sm",
-    textColor: "text-foreground",
-    ringColor: "ring-white/10"
-  }
-}, N = (r) => d[r] || d.gray, E = (r, e = {}) => {
-  const t = N(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}`;
-}, O = n((r, e) => {
-  const { type: t, icon: o, size: l = "xs", backgroundColor: a, textColor: i, ringColor: c, ...g } = r, u = E(t, { backgroundColor: a, textColor: i, ringColor: c });
-  return m({ ...g, class: u }, [
-    o ? v({ size: l, class: "mr-1" }, o) : null,
-    ...e || []
-  ]);
-}), U = n((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"), s({
-    ...r,
-    // @ts-ignore
-    class: `rounded-lg ${l} bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${t} ${o} ${r.class || ""}`
-  }, e);
-}), F = n((r, e) => h({
-  ...r,
-  // @ts-ignore
-  class: ` font-medium -mt-4 -mx-1 px-2 py-2 ${r.class || ""}`
-}, e)), V = n((r, e) => {
-  const t = r.border === "full" ? "border rounded-md" : "border-t";
-  return p({
-    ...r,
-    // @ts-ignore
-    class: `p-6 ${t} ${r.class || ""}`
-  }, [
-    // @ts-ignore
-    r.legend && F(r.legend),
-    s({ class: "flex flex-auto flex-col gap-y-6" }, e)
-  ]);
-}), _ = n((r, e) => {
-  const t = r.border === !0 ? "border-t" : "";
-  return s({
-    ...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 && s({
-      // @ts-ignore
-      ...r.labelProps,
-      // @ts-ignore
-      class: `flex flex-auto flex-col gap-y-1 ${r.labelProps?.class || ""}`
-    }, [
-      // @ts-ignore
-      y({ class: "text-base" }, r.label),
-      // @ts-ignore
-      r.description && k({ class: "text-sm text-muted-foreground" }, r.description)
-    ]),
-    // Controls container: grows to fill remaining space, spacing between items
-    s({ class: "flex flex-col gap-y-4" }, e)
-  ]);
-}), j = C(
-  {
-    /**
-     * This will create the initial state of the RangeSlider.
-     *
-     * @returns {object}
-     */
-    state() {
-      return {
-        value: this.value ?? 0,
-        min: this.min ?? 0,
-        max: this.max ?? 100,
-        filledPercentage: this.getFillPercentage(this.value)
-      };
-    },
-    /**
-     * This will get the fill percentage of the range slider.
-     *
-     * @param {number} value
-     * @returns {number}
-     */
-    getFillPercentage(r) {
-      return (r - this.min) / (this.max - this.min) * 100;
-    },
-    /**
-     * This will render the RangeSlider component.
-     *
-     * @returns {object}
-     */
-    render() {
-      return s({ class: "relative w-full h-4 flex items-center" }, [
-        // Track
-        s({ class: "absolute h-2 w-full rounded-full bg-muted" }),
-        x(({ state: r }) => [
-          // Filled Track
-          s({
-            class: "absolute h-2 bg-primary rounded-full",
-            style: ["width: [[filledPercentage]]%", r]
-          }),
-          // Thumb
-          s({
-            class: `
-						absolute block h-5 w-5 rounded-full border-2 border-primary bg-background
-						ring-offset-background transition-colors focus-visible:outline-none
-						focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-						disabled:pointer-events-none disabled:opacity-50 transform -translate-x-1/2
-					`.trim(),
-            style: ["left: [[filledPercentage]]%", r]
-          }),
-          // Hidden Range Input
-          w({
-            type: "range",
-            min: ["[[min]]", r],
-            max: ["[[max]]", r],
-            value: ["[[value]]", r],
-            // Incorporate your new classes here
-            class: `
-						absolute w-full h-full opacity-0 cursor-pointer
-						${P}
-						${S}
-						${this.class || ""}
-					`.trim(),
-            bind: this.bind,
-            input: (e) => {
-              const t = Number(e.target.value);
-              this.state.value = t, this.state.filledPercentage = this.getFillPercentage(t), typeof this.change == "function" && this.change(t);
-            }
-          })
-        ])
-      ]);
-    }
-  }
-), D = n((r) => ({
-  tag: "select",
-  onCreated(e) {
-    r.options && $.setupSelectOptions(e, r.options);
-  },
-  ...r,
-  // @ts-ignore
-  class: `${B} ${r.class || ""}`.trim()
-})), I = (r) => !r || isNaN(r) ? null : r, b = (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="${o}"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="4"
-			class="bg-muted"
-			stroke-opacity="0.2"
-		/>
-		<!-- Progress Circle -->
-		<circle
-			cx="18"
-			cy="18"
-			r="${o}"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="4"
-			class="stroke-primary"
-			stroke-dasharray="${l}"
-			stroke-dashoffset="${l - a}"
-			stroke-linecap="round"
-			class="${e}"
-		/>
-		<!-- Percentage Text -->
-		<text
-			x="18"
-			y="20"
-			class="text-[0.25em] font-medium fill-primary"
-			text-anchor="middle"
-			dominant-baseline="middle">
-			${t}%
-		</text>
-	</svg>
-	`;
-  return s({
-    class: "circle-graph text-inherit",
-    html: i
-  });
-}, H = n((r) => {
-  const e = r.progress || 0, t = r.class || "", o = b(e, t);
-  return s({
-    class: "circle-graph-wrap",
-    onSet: [
-      // @ts-ignore
-      r.prop,
-      (l) => (l = I(l), l ? b(l, t) : o)
-    ]
-  }, [o]);
-}), T = () => x(({ state: r }) => s({
-  class: "absolute h-full rounded-full bg-primary transition-all duration-300",
-  style: ["width: [[progress]]%;", r]
-})), M = C(
-  {
-    /**
-     * This will render the progress bar component.
-     *
-     * @returns {object}
-     */
-    render() {
-      return s({ class: "relative w-full h-4 rounded-full bg-muted" }, [
-        T()
-      ]);
-    },
-    /**
-     * This will initialize the state.
-     *
-     * @returns {object}
-     */
-    state() {
-      return {
-        progress: this.progress ?? 0
-      };
-    },
-    /**
-     * This will reset the progress bar.
-     *
-     * @returns {void}
-     */
-    reset() {
-      this.state.progress = 0;
-    },
-    /**
-     * This will update the progress bar from a file upload.
-     *
-     * @param {object} evt
-     * @returns {void}
-     */
-    uploadProgress(r) {
-      if (r.lengthComputable) {
-        const t = Math.round(r.loaded * 100 / r.total);
-        this.set(t);
-      }
-    },
-    /**
-     * This will set the progress of the progress bar.
-     *
-     * @param {number} progress
-     * @returns {void}
-     */
-    set(r) {
-      r < 0 && (r = 0), r > 100 && (r = 100), this.state.progress = r;
-    }
-  }
-), Z = n((r = {}) => {
-  const {
-    class: e = "",
-    background: t = !0,
-    blur: o = !0,
-    backgroundClass: l = "bg-background/95",
-    blurClass: a = "backdrop-blur",
-    zIndexClass: i = "z-9999",
-    style: c = ""
-  } = r, g = [
-    "sticky bottom-0 left-0 right-0 w-full",
-    i,
-    t ? l : "",
-    o ? a : "",
-    e
-  ].filter(Boolean).join(" "), u = `height: env(safe-area-inset-bottom, 0px);${c ? ` ${c}` : ""}`;
-  return s({
-    class: g,
-    style: u,
-    "aria-hidden": "true"
-  });
-}), J = n((r = {}) => {
-  const {
-    class: e = "",
-    background: t = !0,
-    blur: o = !0,
-    backgroundClass: l = "bg-background/95",
-    blurClass: a = "backdrop-blur",
-    zIndexClass: i = "z-9999",
-    style: c = ""
-  } = r, g = [
-    "fixed top-0 left-0 right-0 w-full",
-    i,
-    t ? l : "",
-    o ? a : "",
-    e
-  ].filter(Boolean).join(" "), u = `height: env(safe-area-inset-top, 0px);${c ? ` ${c}` : ""}`;
-  return s({
-    class: g,
-    style: u,
-    "aria-hidden": "true"
-  });
-}), f = {
-  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",
-  bottom: "top-full left-1/2 transform -translate-x-1/2 mt-2",
-  "bottom-right": "top-full left-full transform -translate-x-1 mt-2",
-  "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"
-}, A = (r) => f[String(r)] || f.top, Y = n(({ position: r = "top", content: e }, t) => {
-  const o = A(r);
-  return Array.isArray(t) === !1 && (t = [t]), s({ class: "relative group inline-block" }, [
-    ...t,
-    // Tooltip box
-    m({
-      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 ${o} pointer-events-none
-			`
-    }, e)
-  ]);
-});
-export {
-  O as B,
-  U as C,
-  V as F,
-  F as L,
-  M as P,
-  j as R,
-  Z as S,
-  Y as T,
-  H as a,
-  _ as b,
-  J as c,
-  D as d
-};