@gradient-ui/core 0.6.0 → 1.0.0

package/dist/mask-D4VYR8fo.js

@@ -0,0 +1,541 @@
+import { a as resolveGradientValue, r as resolveColorValue } from "./colorResolver-BBj51UAZ.js";
+import { createLinearGradient } from "@gradient-ui/gradient-engine";
+import { ref, h } from "vue";
+import { _ as _sfc_main } from "./GLoading.vue_vue_type_style_index_0_lang-BNOsRA0v.js";
+import { m as mountClientComponent } from "./mount-CqN_WfIk.js";
+import { b as getClientWindow } from "./environment-o0e-UUbv.js";
+import GTooltip from "./components/GTooltip.mjs";
+import { d as defaultMaskTokens, a as applyMask } from "./index-DQ6stZ3U.js";
+const DEFAULT_GRADIENT = "var(--g-gradient-current, var(--g-gradient-main))", DEFAULT_DIRECTION = "135deg";
+function getStateMap() {
+  return /* @__PURE__ */ new WeakMap();
+}
+function createGradientTextDirective(defaultSelector) {
+  const stateMap = getStateMap();
+  function cleanup(el) {
+    const state = stateMap.get(el);
+    if (state) {
+      for (const [target, styles] of state.targets)
+        restoreStyles(target, styles);
+      stateMap.delete(el);
+    }
+  }
+  function update2(el, value) {
+    const options = getOptions(value, defaultSelector);
+    if (cleanup(el), options.disabled) return;
+    const targets = getTargets(el, options.selector), state = {
+      targets: /* @__PURE__ */ new Map()
+    };
+    for (const target of targets)
+      state.targets.set(target, readStyles(target)), applyGradient(target, options.gradient);
+    stateMap.set(el, state);
+  }
+  return {
+    mounted(el, binding) {
+      update2(el, binding.value);
+    },
+    updated(el, binding) {
+      update2(el, binding.value);
+    },
+    unmounted(el) {
+      cleanup(el);
+    }
+  };
+}
+function getOptions(value, defaultSelector) {
+  if (typeof value == "string")
+    return {
+      gradient: resolveGradientValue(value),
+      disabled: !1,
+      selector: defaultSelector
+    };
+  if (!value)
+    return {
+      gradient: DEFAULT_GRADIENT,
+      disabled: !1,
+      selector: defaultSelector
+    };
+  const colors = getGradientColors(value);
+  return {
+    gradient: value.gradient ?? (colors.length ? createResolvedGradient(colors, value.direction) : void 0) ?? resolveGradientValue(value.state ?? value.color) ?? DEFAULT_GRADIENT,
+    disabled: value.disabled ?? !1,
+    selector: value.selector ?? defaultSelector
+  };
+}
+function getGradientColors(value) {
+  var _a;
+  return (_a = value.colors) != null && _a.length ? value.colors : [value.from, value.to].filter(
+    (color) => !!color
+  );
+}
+function createResolvedGradient(colors, direction = DEFAULT_DIRECTION) {
+  const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors;
+  return createLinearGradient(
+    gradientColors.map((color) => resolveColorValue(color)),
+    direction
+  );
+}
+function getTargets(el, selector) {
+  if (!selector)
+    return [el];
+  const targets = [];
+  return el.matches(selector) && targets.push(el), targets.push(...Array.from(el.querySelectorAll(selector))), targets;
+}
+function readStyles(target) {
+  return {
+    backgroundClip: target.style.backgroundClip,
+    backgroundImage: target.style.backgroundImage,
+    color: target.style.color,
+    webkitBackgroundClip: target.style.getPropertyValue(
+      "-webkit-background-clip"
+    ),
+    webkitTextFillColor: target.style.getPropertyValue(
+      "-webkit-text-fill-color"
+    )
+  };
+}
+function restoreStyles(target, styles) {
+  target.style.backgroundClip = styles.backgroundClip, target.style.backgroundImage = styles.backgroundImage, target.style.color = styles.color, target.style.setProperty(
+    "-webkit-background-clip",
+    styles.webkitBackgroundClip
+  ), target.style.setProperty(
+    "-webkit-text-fill-color",
+    styles.webkitTextFillColor
+  );
+}
+function applyGradient(target, gradient) {
+  target.style.backgroundImage = gradient, target.style.backgroundClip = "text", target.style.color = "transparent", target.style.setProperty("-webkit-background-clip", "text"), target.style.setProperty("-webkit-text-fill-color", "transparent");
+}
+const vGradientText = createGradientTextDirective(), gradientIcon = createGradientTextDirective(".mdi");
+function getExposedVisibility(component) {
+  const exposedVisibility = component == null ? void 0 : component.isVisible;
+  return typeof exposedVisibility == "object" && exposedVisibility !== null && "value" in exposedVisibility ? !!exposedVisibility.value : !!exposedVisibility;
+}
+const DEFAULT_OPTIONS$2 = {
+  active: !1,
+  text: "Loading...",
+  noText: !1,
+  color: "primary",
+  dark: !1,
+  opacity: void 0,
+  blur: void 0,
+  progressView: "glow"
+};
+function resolveOptions$2(value, modifiers = {}) {
+  const source = typeof value == "object" && value !== null ? value : {}, active = typeof value == "boolean" ? value : source.active ?? source.value ?? !1;
+  return {
+    ...DEFAULT_OPTIONS$2,
+    ...source,
+    active,
+    dark: source.dark ?? !!modifiers.dark,
+    noText: source.noText ?? !!modifiers.noText
+  };
+}
+function getOptionsKey(options) {
+  return JSON.stringify({
+    text: options.text,
+    noText: options.noText,
+    color: options.color,
+    dark: options.dark,
+    opacity: options.opacity,
+    blur: options.blur,
+    progressView: options.progressView
+  });
+}
+function hasValidPosition(el) {
+  const clientWindow = getClientWindow();
+  return clientWindow ? ["relative", "absolute", "fixed", "sticky"].includes(
+    clientWindow.getComputedStyle(el).position
+  ) : !0;
+}
+function ensureHostStyles$2(el) {
+  hasValidPosition(el) || (el.style.position = "relative");
+}
+function destroy(el) {
+  var _a;
+  const state = el.__gLoading__;
+  state && ((_a = state.mount) == null || _a.unmount(), state.mount = void 0, state.component = void 0, state.optionsKey = void 0, el.style.position = state.originalPosition);
+}
+function hide$1(el) {
+  const state = el.__gLoading__;
+  if (state) {
+    if (!state.component) {
+      destroy(el);
+      return;
+    }
+    state.component.hide();
+  }
+}
+function show$1(el, options) {
+  const state = el.__gLoading__;
+  if (!state) return;
+  ensureHostStyles$2(el);
+  const mount = mountClientComponent(_sfc_main, {
+    containerClass: "g-loading__container",
+    target: el,
+    props: {
+      text: options.text,
+      noText: options.noText,
+      color: options.color,
+      dark: options.dark,
+      opacity: options.opacity,
+      blur: options.blur,
+      progressView: options.progressView,
+      onClose: () => {
+        getExposedVisibility(state.component) || destroy(el);
+      }
+    }
+  });
+  mount && (state.mount = mount, state.optionsKey = getOptionsKey(options), state.component = mount.instance, state.component.show());
+}
+function sync(el, value, modifiers) {
+  var _a;
+  const state = el.__gLoading__;
+  if (!state) return;
+  const options = resolveOptions$2(value, modifiers), optionsKey = getOptionsKey(options);
+  if (!options.active) {
+    hide$1(el);
+    return;
+  }
+  if (state.mount && state.optionsKey === optionsKey) {
+    (_a = state.component) == null || _a.show();
+    return;
+  }
+  destroy(el), show$1(el, options);
+}
+const loading = {
+  mounted(el, binding) {
+    el.__gLoading__ = {
+      originalPosition: el.style.position
+    }, sync(el, binding.value, binding.modifiers);
+  },
+  updated(el, binding) {
+    binding.value === binding.oldValue && (typeof binding.value != "object" || binding.value === null) || sync(el, binding.value, binding.modifiers);
+  },
+  unmounted(el) {
+    destroy(el), delete el.__gLoading__;
+  }
+}, DEFAULT_OPTIONS$1 = {
+  center: !1,
+  color: "currentcolor",
+  disabled: !1,
+  duration: 520,
+  easing: "var(--g-token-easing-standard)",
+  opacity: 0.16
+};
+function resolveOptions$1(value) {
+  if (typeof value == "boolean")
+    return {
+      ...DEFAULT_OPTIONS$1,
+      disabled: !value
+    };
+  if (typeof value == "string")
+    return {
+      ...DEFAULT_OPTIONS$1,
+      color: resolveColorValue(value)
+    };
+  const color = value != null && value.color ? resolveColorValue(value.color) : DEFAULT_OPTIONS$1.color;
+  return {
+    ...DEFAULT_OPTIONS$1,
+    ...value,
+    color
+  };
+}
+function ensureHostStyles$1(el) {
+  getComputedStyle(el).position === "static" && (el.style.position = "relative");
+}
+function toCssDuration$1(value) {
+  return typeof value == "number" ? `${value}ms` : value;
+}
+function toDurationMs(value) {
+  if (typeof value == "number") return value;
+  const normalizedValue = value.trim();
+  if (normalizedValue.endsWith("ms"))
+    return Number.parseFloat(normalizedValue);
+  if (normalizedValue.endsWith("s"))
+    return Number.parseFloat(normalizedValue) * 1e3;
+  const parsedValue = Number.parseFloat(normalizedValue);
+  return Number.isNaN(parsedValue) ? Number(DEFAULT_OPTIONS$1.duration) : parsedValue;
+}
+function createRipple(el, origin, options) {
+  const rect = el.getBoundingClientRect(), size = Math.hypot(rect.width, rect.height) * 2, x = origin.x - rect.left - size / 2, y = origin.y - rect.top - size / 2, containerEl = document.createElement("span"), animationEl = document.createElement("span");
+  return containerEl.className = "g-ripple__container", containerEl.style.setProperty("--g-ripple-color", options.color), containerEl.style.setProperty(
+    "--g-ripple-duration",
+    toCssDuration$1(options.duration)
+  ), containerEl.style.setProperty("--g-ripple-easing", options.easing), containerEl.style.setProperty(
+    "--g-ripple-opacity",
+    String(options.opacity)
+  ), animationEl.className = "g-ripple__animation", animationEl.style.width = `${size}px`, animationEl.style.height = `${size}px`, animationEl.style.left = `${x}px`, animationEl.style.top = `${y}px`, containerEl.appendChild(animationEl), el.appendChild(containerEl), containerEl;
+}
+function removeRipple(el, rippleEl) {
+  var _a;
+  rippleEl.remove(), (_a = el.__gRipple__) == null || _a.ripples.delete(rippleEl);
+}
+function clearRipples(el) {
+  const state = el.__gRipple__;
+  if (state) {
+    for (const rippleEl of state.ripples)
+      rippleEl.remove();
+    state.ripples.clear();
+  }
+}
+function getCenteredOrigin(el) {
+  const rect = el.getBoundingClientRect();
+  return {
+    x: rect.left + rect.width / 2,
+    y: rect.top + rect.height / 2
+  };
+}
+function isElementDisabled$1(el) {
+  return el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true" || el.classList.contains("g-button_disabled");
+}
+function triggerRipple(el, origin, options) {
+  var _a;
+  if (options.disabled || isElementDisabled$1(el)) return;
+  ensureHostStyles$1(el);
+  const rippleEl = createRipple(el, origin, options);
+  (_a = el.__gRipple__) == null || _a.ripples.add(rippleEl), window.setTimeout(
+    () => removeRipple(el, rippleEl),
+    toDurationMs(options.duration)
+  );
+}
+function bind$1(el, value) {
+  if (el.__gRipple__) {
+    update$1(el, value);
+    return;
+  }
+  const options = resolveOptions$1(value), state = {
+    originalPosition: el.style.position,
+    options,
+    onKeyDown: (event) => {
+      event.key !== "Enter" && event.key !== " " || triggerRipple(el, getCenteredOrigin(el), state.options);
+    },
+    onPointerDown: (event) => {
+      event.button !== 0 || el.hasAttribute("disabled") || triggerRipple(
+        el,
+        state.options.center ? getCenteredOrigin(el) : { x: event.clientX, y: event.clientY },
+        state.options
+      );
+    },
+    ripples: /* @__PURE__ */ new Set()
+  };
+  el.addEventListener("pointerdown", state.onPointerDown), el.addEventListener("keydown", state.onKeyDown), el.__gRipple__ = state;
+}
+function update$1(el, value) {
+  const state = el.__gRipple__;
+  state && (state.options = resolveOptions$1(value), state.options.disabled && clearRipples(el));
+}
+function unbind$1(el) {
+  const state = el.__gRipple__;
+  state && (el.removeEventListener("pointerdown", state.onPointerDown), el.removeEventListener("keydown", state.onKeyDown), clearRipples(el), el.style.position = state.originalPosition, delete el.__gRipple__);
+}
+const ripple = {
+  mounted(el, binding) {
+    bind$1(el, binding.value);
+  },
+  updated(el, binding) {
+    update$1(el, binding.value);
+  },
+  unmounted(el) {
+    unbind$1(el);
+  }
+}, DEFAULT_OPTIONS = {
+  color: "var(--g-color, var(--g-gradient-material-color, currentcolor))",
+  disabled: !1,
+  duration: 180,
+  easing: "var(--g-token-easing-standard)",
+  opacity: 0.28,
+  size: "140px"
+};
+function resolveOptions(value) {
+  if (typeof value == "boolean")
+    return {
+      ...DEFAULT_OPTIONS,
+      disabled: !value
+    };
+  if (typeof value == "string")
+    return {
+      ...DEFAULT_OPTIONS,
+      color: resolveColorValue(value)
+    };
+  const color = value != null && value.color ? resolveColorValue(value.color) : DEFAULT_OPTIONS.color;
+  return {
+    ...DEFAULT_OPTIONS,
+    ...value,
+    color
+  };
+}
+function ensureHostStyles(el) {
+  getComputedStyle(el).position === "static" && (el.style.position = "relative");
+}
+function toCssLength(value) {
+  return typeof value == "number" ? `${value}px` : value;
+}
+function toCssDuration(value) {
+  return typeof value == "number" ? `${value}ms` : value;
+}
+function isElementDisabled(el) {
+  return el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true" || el.classList.contains("g-button_disabled");
+}
+function applyOptions(el, options) {
+  el.style.setProperty("--g-specular-color", options.color), el.style.setProperty("--g-specular-size", toCssLength(options.size)), el.style.setProperty(
+    "--g-specular-duration",
+    toCssDuration(options.duration)
+  ), el.style.setProperty("--g-specular-easing", options.easing), el.style.setProperty("--g-specular-max-opacity", String(options.opacity));
+}
+function setOrigin(el, x, y) {
+  const rect = el.getBoundingClientRect();
+  el.style.setProperty("--g-specular-x", `${x - rect.left}px`), el.style.setProperty("--g-specular-y", `${y - rect.top}px`);
+}
+function setCenteredOrigin(el) {
+  const rect = el.getBoundingClientRect();
+  el.style.setProperty("--g-specular-x", `${rect.width / 2}px`), el.style.setProperty("--g-specular-y", `${rect.height / 2}px`);
+}
+function show(el) {
+  const state = el.__gSpecular__;
+  !state || state.options.disabled || isElementDisabled(el) || el.setAttribute("data-g-specular-active", "true");
+}
+function hide(el) {
+  el.removeAttribute("data-g-specular-active");
+}
+function createHighlight() {
+  const containerEl = document.createElement("span"), highlightEl = document.createElement("span");
+  return containerEl.className = "g-specular__container", highlightEl.className = "g-specular__highlight", containerEl.appendChild(highlightEl), {
+    containerEl,
+    highlightEl
+  };
+}
+function bind(el, value) {
+  if (el.__gSpecular__) {
+    update(el, value);
+    return;
+  }
+  const options = resolveOptions(value), { containerEl, highlightEl } = createHighlight();
+  ensureHostStyles(el), applyOptions(el, options), setCenteredOrigin(el), el.classList.add("g-specular"), el.appendChild(containerEl);
+  const state = {
+    containerEl,
+    highlightEl,
+    options,
+    originalPosition: el.style.position,
+    onBlur: () => hide(el),
+    onFocus: () => {
+      setCenteredOrigin(el), show(el);
+    },
+    onPointerEnter: (event) => {
+      setOrigin(el, event.clientX, event.clientY), show(el);
+    },
+    onPointerLeave: () => hide(el),
+    onPointerMove: (event) => {
+      setOrigin(el, event.clientX, event.clientY);
+    }
+  };
+  el.addEventListener("blur", state.onBlur), el.addEventListener("focus", state.onFocus), el.addEventListener("pointerenter", state.onPointerEnter), el.addEventListener("pointerleave", state.onPointerLeave), el.addEventListener("pointermove", state.onPointerMove), el.__gSpecular__ = state;
+}
+function update(el, value) {
+  const state = el.__gSpecular__;
+  state && (state.options = resolveOptions(value), applyOptions(el, state.options), state.options.disabled && hide(el));
+}
+function unbind(el) {
+  const state = el.__gSpecular__;
+  state && (el.removeEventListener("blur", state.onBlur), el.removeEventListener("focus", state.onFocus), el.removeEventListener("pointerenter", state.onPointerEnter), el.removeEventListener("pointerleave", state.onPointerLeave), el.removeEventListener("pointermove", state.onPointerMove), state.containerEl.remove(), el.classList.remove("g-specular"), hide(el), el.style.position = state.originalPosition, el.style.removeProperty("--g-specular-color"), el.style.removeProperty("--g-specular-duration"), el.style.removeProperty("--g-specular-easing"), el.style.removeProperty("--g-specular-max-opacity"), el.style.removeProperty("--g-specular-size"), el.style.removeProperty("--g-specular-x"), el.style.removeProperty("--g-specular-y"), delete el.__gSpecular__);
+}
+const specular = {
+  mounted(el, binding) {
+    binding.value !== !1 && bind(el, binding.value);
+  },
+  updated(el, binding) {
+    if (binding.value === !1) {
+      unbind(el);
+      return;
+    }
+    bind(el, binding.value);
+  },
+  unmounted(el) {
+    unbind(el);
+  }
+}, vTooltip = {
+  mounted(el, binding) {
+    if (!binding.value) return;
+    const options = typeof binding.value == "string" ? { content: binding.value } : binding.value, tooltipRef = ref(null), mount = mountClientComponent({
+      setup() {
+        return () => h(
+          GTooltip,
+          {
+            ...options,
+            reference: el,
+            ref: (instance) => {
+              instance && (tooltipRef.value = instance);
+            }
+          },
+          {
+            reference: ({
+              ref: ref2
+            }) => (ref2(el), el)
+          }
+        );
+      }
+    });
+    if (!mount) return;
+    const show2 = () => {
+      tooltipRef.value && tooltipRef.value.show();
+    }, hide2 = () => {
+      tooltipRef.value && tooltipRef.value.hide();
+    };
+    el.addEventListener("mouseenter", show2), el.addEventListener("mouseleave", hide2), el.addEventListener("focus", show2), el.addEventListener("blur", hide2), el.__tooltip__ = {
+      mount,
+      cleanup() {
+        el.removeEventListener("mouseenter", show2), el.removeEventListener("mouseleave", hide2), el.removeEventListener("focus", show2), el.removeEventListener("blur", hide2), mount.unmount();
+      }
+    };
+  },
+  unmounted(el) {
+    var _a;
+    (_a = el.__tooltip__) == null || _a.cleanup();
+  }
+};
+function resolveBinding(value) {
+  return typeof value == "string" || Array.isArray(value) || value === void 0 ? {
+    mask: value
+  } : value;
+}
+function getControl(el) {
+  return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement ? el : el.querySelector("input, textarea");
+}
+function formatElement(el, binding) {
+  const control = getControl(el);
+  if (!control) return;
+  const options = resolveBinding(binding.value), tokens = {
+    ...defaultMaskTokens,
+    ...options.tokens ?? {}
+  }, maskedValue = applyMask(control.value, options.mask, tokens);
+  control.value !== maskedValue && (control.value = maskedValue);
+}
+function bindMask(el, binding) {
+  const control = getControl(el);
+  if (!control) return;
+  const onInput = () => {
+    el._gMaskFormatting || (el._gMaskFormatting = !0, formatElement(el, binding), control.dispatchEvent(new Event("input", { bubbles: !0 })), el._gMaskFormatting = !1);
+  };
+  control.addEventListener("input", onInput), el._gMaskCleanup = () => {
+    control.removeEventListener("input", onInput);
+  }, formatElement(el, binding);
+}
+const vMask = {
+  mounted: bindMask,
+  updated(el, binding) {
+    formatElement(el, binding);
+  },
+  beforeUnmount(el) {
+    var _a;
+    (_a = el._gMaskCleanup) == null || _a.call(el), delete el._gMaskCleanup, delete el._gMaskFormatting;
+  }
+};
+export {
+  vMask as a,
+  vTooltip as b,
+  gradientIcon as g,
+  loading as l,
+  ripple as r,
+  specular as s,
+  vGradientText as v
+};

package/dist/material-CkThdnz0.cjs

@@ -0,0 +1 @@
+"use strict";const propsFactory=require("./propsFactory-DT6-QS4L.cjs"),vue=require("vue"),gradientMaterial=require("./gradientMaterial-DrttA9E_.cjs"),environment=require("./environment-Dr5kpq3D.cjs"),mount=require("./mount-qFaEMFZj.cjs"),STYLE_ATTR="data-gradient-engine-style",SVG_ATTR="data-gradient-engine-svg",styleRegistry=mount.createClientElementRegistry(),svgRegistry=mount.createClientElementRegistry(),mountGradientCss=(id,cssText)=>!environment.canUseDom()||!cssText.trim()?()=>{}:styleRegistry.mount(id,clientDocument=>{const style=clientDocument.createElement("style");return style.setAttribute(STYLE_ATTR,id),style.textContent=cssText,style}),mountGradientSvg=(id,svgText)=>!environment.canUseDom()||!svgText.trim()?()=>{}:svgRegistry.mount(id,clientDocument=>{const wrapper=clientDocument.createElement("div");return wrapper.setAttribute(SVG_ATTR,id),wrapper.style.position="absolute",wrapper.style.width="0",wrapper.style.height="0",wrapper.style.overflow="hidden",wrapper.innerHTML=svgText,wrapper}),mountGradientMaterial=material=>{var _a,_b;if(!environment.canUseDom())return{dispose:()=>{},id:material.id};const disposeCss=mountGradientCss(material.id,material.cssText),disposeSvg=(_b=(_a=material.effects)==null?void 0:_a.morph)!=null&&_b.svg?mountGradientSvg(`${material.id}-morph`,material.effects.morph.svg):()=>{};return{dispose:()=>{disposeSvg(),disposeCss()},id:material.id}},useGradientRuntime=(options={})=>{let handle=null;const enabled=vue.computed(()=>!!vue.toValue(options.enabled)),material=vue.computed(()=>vue.toValue(options.material)??null),morphEnabled=vue.computed(()=>{var _a,_b;return!!vue.toValue(options.morph)&&!!((_b=(_a=material.value)==null?void 0:_a.morphBlobs)!=null&&_b.length)}),morphBlobs=vue.computed(()=>{var _a;return morphEnabled.value?((_a=material.value)==null?void 0:_a.morphBlobs)??[]:[]}),dispose=()=>{handle==null||handle.dispose(),handle=null};return vue.watch(()=>{var _a;return[enabled.value,(_a=material.value)==null?void 0:_a.id]},()=>{dispose(),enabled.value&&material.value&&(handle=mountGradientMaterial(material.value))},{immediate:!0}),vue.onBeforeUnmount(dispose),{morphBlobs,morphEnabled}},useMaterialLayers=(baseClass="g-material")=>{const materialGlowClasses=vue.computed(()=>[`${baseClass}__material-glow`]),materialGlowBaseClasses=vue.computed(()=>[`${baseClass}__material-glow-base`]),materialGlowMorphClasses=vue.computed(()=>[`${baseClass}__material-glow-morph`]),materialGlowMorphBlobClasses=vue.computed(()=>[`${baseClass}__material-glow-morph-blob`]),materialMorphClasses=vue.computed(()=>[`${baseClass}__material-morph`]),materialMorphBlobClasses=vue.computed(()=>[`${baseClass}__material-morph-blob`]);return{materialContentClasses:vue.computed(()=>[`${baseClass}__material-content`]),materialGlowBaseClasses,materialGlowClasses,materialGlowMorphBlobClasses,materialGlowMorphClasses,materialMorphBlobClasses,materialMorphClasses}},makeMaterialProps=propsFactory.propsFactory({materialKind:{type:String,default:"surface"},gradientRecipe:String,borderRadius:{type:[Number,String],default:8},padding:{type:[Number,String],default:0},shadow:Boolean,dropShadow:Boolean,morph:Boolean,animationOptions:Object,shadowOptions:Object,dropShadowOptions:Object,morphOptions:Object}),toDuration=duration=>typeof duration=="number"?`${duration}ms`:duration,getMorphBlobStyle=blob=>({"--g-gradient-morph-blob-color":blob.color,"--g-gradient-morph-x":`${blob.dx}%`,"--g-gradient-morph-x2":`${blob.dx2}%`,"--g-gradient-morph-y":`${blob.dy}%`,"--g-gradient-morph-y2":`${blob.dy2}%`,"--g-gradient-morph-origin-x":blob.originX,"--g-gradient-morph-origin-y":blob.originY,"--g-gradient-morph-animation":blob.animationName,"--g-gradient-morph-blur":`${blob.blur}px`,"--g-gradient-morph-opacity":blob.opacity,"--g-gradient-morph-rotate-mid":`${blob.rotateMid}deg`,"--g-gradient-morph-rotate-to":`${blob.rotateTo}deg`,"--g-gradient-morph-scale-mid":blob.scaleMid,"--g-gradient-morph-scale":blob.scaleTo,animationDelay:`${blob.delay}ms`,animationDuration:toDuration(blob.duration),left:`${blob.x}%`,top:`${blob.y}%`,width:`${blob.size}%`}),resolveMorphOptions=morph=>typeof morph=="object"?morph:morph?{}:void 0,toPx=value=>value==null?"":typeof value=="number"?`${value}px`:/^\d+(\.\d+)?$/.test(value)?`${value}px`:value,useMaterial=(options={})=>{const baseClass=vue.computed(()=>options.baseClass??"g-material"),{materialContentClasses,materialGlowBaseClasses,materialGlowClasses,materialGlowMorphBlobClasses,materialGlowMorphClasses,materialMorphBlobClasses,materialMorphClasses}=useMaterialLayers(baseClass.value),borderRadius=vue.computed(()=>toPx(vue.toValue(options.borderRadius))),padding=vue.computed(()=>toPx(vue.toValue(options.padding))),morphOptions=vue.computed(()=>resolveMorphOptions(vue.toValue(options.morph))),hasMorph=vue.computed(()=>!!morphOptions.value),hasEffects=vue.computed(()=>!!(vue.toValue(options.effects)||vue.toValue(options.shadow)||vue.toValue(options.dropShadow)||hasMorph.value)),hasAnimations=vue.computed(()=>!!vue.toValue(options.animations)),{gradientMaterial:gradientMaterial$1,gradientMaterialStyles}=gradientMaterial.useGradientMaterial({color:()=>vue.toValue(options.color)??vue.toValue(options.state),kind:()=>vue.toValue(options.kind),recipe:()=>vue.toValue(options.recipe),effects:hasEffects,animations:hasAnimations,shadow:()=>vue.toValue(options.shadow),dropShadow:()=>vue.toValue(options.dropShadow),animation:()=>vue.toValue(options.animation),morph:morphOptions,options:()=>vue.toValue(options.options)}),{morphBlobs,morphEnabled}=useGradientRuntime({enabled:()=>!!(hasAnimations.value||hasMorph.value),material:gradientMaterial$1,morph:hasMorph}),materialClasses=vue.computed(()=>[`${baseClass.value}_surface`]),materialStyles=vue.computed(()=>{const styles={...gradientMaterialStyles.value??{}};return borderRadius.value&&(styles["--g-gradient-material-radius"]=borderRadius.value),padding.value&&(styles["--g-gradient-material-padding"]=padding.value),Object.keys(styles).length?styles:void 0});return{getMorphBlobStyle,gradientMaterial:gradientMaterial$1,materialClasses,materialContentClasses,materialGlowBaseClasses,materialGlowClasses,materialGlowMorphBlobClasses,materialGlowMorphClasses,materialMorphBlobClasses,materialMorphClasses,materialStyles,morphBlobs,morphEnabled}};exports.makeMaterialProps=makeMaterialProps;exports.mountGradientCss=mountGradientCss;exports.mountGradientMaterial=mountGradientMaterial;exports.mountGradientSvg=mountGradientSvg;exports.useGradientRuntime=useGradientRuntime;exports.useMaterial=useMaterial;exports.useMaterialLayers=useMaterialLayers;