vue3-spinners/dist/index.d.mts

Spinners for Vue 3.

import * as vue from 'vue';
import { ExtractPropTypes, defineComponent, h, ComputedGetter, toRef, computed, createElementBlock, openBlock, normalizeStyle, Fragment, renderList, createElementVNode, useCssVars, unref, Plugin } from 'vue';
import range from 'just-range';

declare const spinnerProps: {
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
};
declare function useSpinner(props: ExtractPropTypes<typeof spinnerProps>): {
    cSize: vue.ComputedRef<string | number>;
    classes: vue.ComputedRef<string>;
    style: vue.ComputedRef<{
        color: string | undefined;
    }>;
};

var _sfc_main$k = defineComponent({
  name: "VueSpinner",
  props: {
    ...spinnerProps,
    thickness: {
      type: Number,
      default: 5
    }
  },
  setup(props) {
    const { cSize, classes, style } = useSpinner(props);
    return () => h(
      "svg",
      {
        style: style.value,
        class: classes.value + " vue-spinner-mat",
        width: cSize.value,
        height: cSize.value,
        viewBox: "25 25 50 50"
      },
      [
        h("circle", {
          class: "path",
          cx: "50",
          cy: "50",
          r: "20",
          fill: "none",
          stroke: "currentColor",
          "stroke-width": props.thickness,
          "stroke-miterlimit": "10"
        })
      ]
    );
  }
});

var _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};

var vueSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner.vue"]]);

declare const _default$l: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const _default$k: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

interface UseSpinnerPropsProps {
    margin?: string;
    size?: string | number;
    height?: string | number;
    width?: string | number;
    radius?: string | number;
}
declare function useSpinnerProps<T extends UseSpinnerPropsProps>(props: T): {
    color: {
        type: StringConstructor;
        default: string;
    };
} & { [K in "size" | "margin" | "height" | "width" | "radius" as T[K] extends NonNullable<UseSpinnerPropsProps[K]> ? K : never]: {
    size: {
        type: (StringConstructor | NumberConstructor)[];
        default: string | number | undefined;
    };
    margin: {
        type: StringConstructor;
        default: string | undefined;
    };
    height: {
        type: (StringConstructor | NumberConstructor)[];
        default: string | number | undefined;
    };
    width: {
        type: (StringConstructor | NumberConstructor)[];
        default: string | number | undefined;
    };
    radius: {
        type: (StringConstructor | NumberConstructor)[];
        default: string | number | undefined;
    };
}[K]; };

declare const calculateRgba: (input: string, opacity: number) => string;

declare function useSize(sizeGetter: ComputedGetter<string | number>): vue.ComputedRef<{
    value: number;
    unit: string;
    string: string;
}>;

const __default__$i = { name: "VueSpinnerBar" };
var _sfc_main$j = /* @__PURE__ */ defineComponent({
  ...__default__$i,
  props: useSpinnerProps({ height: 4, width: 100 }),
  setup(__props, { expose: __expose }) {
    __expose();
    const heightProp = toRef(__props, "height");
    const widthProp = toRef(__props, "width");
    const width = useSize(() => __props.width);
    const height = useSize(() => __props.height);
    const wrapperStyle = computed(
      () => ({
        position: "relative",
        width: width.value.string,
        height: height.value.string,
        overflow: "hidden",
        backgroundColor: calculateRgba(__props.color),
        backgroundClip: "padding-box"
      })
    );
    const getBarStyle = (version) => ({
      position: "absolute",
      height: height.value.string,
      overflow: "hidden",
      backgroundColor: __props.color,
      backgroundClip: "padding-box",
      display: "block",
      borderRadius: "2px",
      willChange: "left, right",
      animationFillMode: "forwards",
      animation: ` ${version === 1 ? "vue-spinner-long" : "vue-spinner-short"} 2.1s ${version === 2 ? `1.15s` : ``} ${version === 1 ? `cubic-bezier(0.65, 0.815, 0.735, 0.395)` : `cubic-bezier(0.165, 0.84, 0.44, 1)`} infinite`
    });
    const __returned__ = { heightProp, widthProp, width, height, wrapperStyle, getBarStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.wrapperStyle)
    },
    [
      (openBlock(), createElementBlock(
        Fragment,
        null,
        renderList(2, (n) => {
          return createElementVNode(
            "div",
            {
              key: n,
              style: normalizeStyle($setup.getBarStyle(n))
            },
            null,
            4
            /* STYLE */
          );
        }),
        64
        /* STABLE_FRAGMENT */
      ))
    ],
    4
    /* STYLE */
  );
}
var vueSpinnerBar = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-bar.vue"]]);

declare namespace __spinners_vue_spinner_bar_vue {
  export {
    vueSpinnerBar as default,
  };
}

declare const _default$j: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

var _sfc_main$i = /* @__PURE__ */ defineComponent({
  __name: "vue-spinner-beat",
  props: useSpinnerProps({ size: 15, margin: "2px" }),
  setup(__props, { expose: __expose }) {
    __expose();
    const marginProp = toRef(__props, "margin");
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const margin = useSize(() => __props.margin);
    const getCircleStyle = (version) => ({
      animation: `vue-spinner-beat 0.7s ${version % 2 ? `0s` : `0.35s`} infinite linear`,
      display: "inline-block",
      backgroundColor: __props.color,
      width: size.value.string,
      height: size.value.string,
      margin: margin.value.string,
      borderRadius: "100%",
      animationFillMode: "both"
    });
    const __returned__ = { marginProp, sizeProp, size, margin, getCircleStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", null, [
    (openBlock(), createElementBlock(
      Fragment,
      null,
      renderList(3, (n) => {
        return createElementVNode(
          "div",
          {
            key: n,
            style: normalizeStyle($setup.getCircleStyle(n))
          },
          null,
          4
          /* STYLE */
        );
      }),
      64
      /* STABLE_FRAGMENT */
    ))
  ]);
}
var vueSpinnerBeat = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-beat.vue"]]);

declare namespace __spinners_vue_spinner_beat_vue {
  export {
    vueSpinnerBeat as default,
  };
}

const __default__$h = { name: "VueSpinnerBeat" };
var _sfc_main$h = /* @__PURE__ */ defineComponent({
  ...__default__$h,
  props: useSpinnerProps({ size: 60 }),
  setup(__props, { expose: __expose }) {
    __expose();
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const getCircleStyle = (version) => ({
      position: "absolute",
      width: size.value.string,
      height: size.value.string,
      backgroundColor: __props.color,
      borderRadius: "100%",
      opacity: 0.6,
      top: 0,
      left: 0,
      animationFillMode: "both",
      animation: `vue-spinner-bounce 2.1s ${version === 1 ? `1s` : `0s`} infinite ease-in-out`
    });
    const wrapperStyle = computed(
      () => ({
        position: "relative",
        width: size.value.string,
        height: size.value.string
      })
    );
    const __returned__ = { sizeProp, size, getCircleStyle, wrapperStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.wrapperStyle)
    },
    [
      (openBlock(), createElementBlock(
        Fragment,
        null,
        renderList(2, (n) => {
          return createElementVNode(
            "div",
            {
              key: n,
              style: normalizeStyle($setup.getCircleStyle(n))
            },
            null,
            4
            /* STYLE */
          );
        }),
        64
        /* STABLE_FRAGMENT */
      ))
    ],
    4
    /* STYLE */
  );
}
var vueSpinnerBounce = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-bounce.vue"]]);

declare const _default$i: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

const __default__$g = { name: "VueSpinnerCircle" };
var _sfc_main$g = /* @__PURE__ */ defineComponent({
  ...__default__$g,
  props: useSpinnerProps({ size: 50 }),
  setup(__props, { expose: __expose }) {
    __expose();
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const getRingStyle = (version) => ({
      position: "absolute",
      border: `1px solid ${__props.color}`,
      borderRadius: "100%",
      transition: "2s",
      borderBottom: "none",
      borderRight: "none",
      animationFillMode: "",
      height: `${size.value.value * (1 - version / 10)}${size.value.unit}`,
      width: `${size.value.value * (1 - version / 10)}${size.value.unit}`,
      top: `${version * 0.7 * 2.5}%`,
      left: `${version * 0.35 * 2.5}%`,
      animation: `vue-spinner-circle 1s ${version * 0.2}s infinite linear`
    });
    const wrapperStyle = computed(
      () => ({
        position: "relative",
        width: size.value.string,
        height: size.value.string
      })
    );
    const __returned__ = { sizeProp, size, getRingStyle, wrapperStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.wrapperStyle)
    },
    [
      (openBlock(), createElementBlock(
        Fragment,
        null,
        renderList(5, (i) => {
          return createElementVNode(
            "div",
            {
              key: i,
              style: normalizeStyle($setup.getRingStyle(i))
            },
            null,
            4
            /* STYLE */
          );
        }),
        64
        /* STABLE_FRAGMENT */
      ))
    ],
    4
    /* STYLE */
  );
}
var vueSpinnerCircle = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-circle.vue"]]);

declare namespace __spinners_vue_spinner_circle_vue {
  export {
    vueSpinnerCircle as default,
  };
}

const __default__$f = { name: "VueSpinnerClimbingBox" };
var _sfc_main$f = /* @__PURE__ */ defineComponent({
  ...__default__$f,
  props: useSpinnerProps({ size: 15 }),
  setup(__props, { expose: __expose }) {
    __expose();
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const containerStyle = computed(
      () => ({
        position: "relative",
        width: "7.1em",
        height: "7.1em"
      })
    );
    const wrapperStyle = computed(
      () => ({
        position: "absolute",
        top: "50%",
        left: "50%",
        marginTop: "-2.7em",
        marginLeft: "-2.7em",
        width: "5.4em",
        height: "5.4em",
        fontSize: size.value.string
      })
    );
    const boxStyle = computed(
      () => ({
        position: "absolute",
        left: "0",
        bottom: "-0.1em",
        height: "1em",
        width: "1em",
        backgroundColor: "transparent",
        borderRadius: "15%",
        border: `0.25em solid ${__props.color}`,
        transform: "translate(0, -1em) rotate(-45deg)",
        animationFillMode: "both",
        animation: "vue-spinner-climbing-box 2.5s infinite cubic-bezier(0.79, 0, 0.47, 0.97)"
      })
    );
    const hillStyle = computed(
      () => ({
        position: "absolute",
        width: "7.1em",
        height: "7.1em",
        top: "1.7em",
        left: "1.7em",
        borderLeft: `0.25em solid ${__props.color}`,
        transform: "rotate(45deg)"
      })
    );
    const __returned__ = { sizeProp, size, containerStyle, wrapperStyle, boxStyle, hillStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.containerStyle)
    },
    [
      createElementVNode(
        "div",
        {
          style: normalizeStyle($setup.wrapperStyle)
        },
        [
          createElementVNode(
            "div",
            {
              style: normalizeStyle($setup.boxStyle)
            },
            null,
            4
            /* STYLE */
          ),
          createElementVNode(
            "div",
            {
              style: normalizeStyle($setup.hillStyle)
            },
            null,
            4
            /* STYLE */
          )
        ],
        4
        /* STYLE */
      )
    ],
    4
    /* STYLE */
  );
}
var vueSpinnerClimbingBox = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-climbing-box.vue"]]);

declare namespace __spinners_vue_spinner_climbing_box_vue {
  export {
    vueSpinnerClimbingBox as default,
  };
}

const __default__$e = { name: "VueSpinnerClip" };
var _sfc_main$e = /* @__PURE__ */ defineComponent({
  ...__default__$e,
  props: useSpinnerProps({ size: 35 }),
  setup(__props, { expose: __expose }) {
    __expose();
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const ringStyle = computed(() => ({
      background: "transparent !important",
      width: size.value.string,
      height: size.value.string,
      borderRadius: "100%",
      border: `2px solid ${__props.color}`,
      borderBottomColor: "transparent",
      display: "inline-block",
      animation: "vue-spinner-clip 0.75s 0s infinite linear",
      animationFillMode: "both"
    }));
    const __returned__ = { sizeProp, size, ringStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.ringStyle)
    },
    null,
    4
    /* STYLE */
  );
}
var vueSpinnerClip = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-clip.vue"]]);

declare namespace __spinners_vue_spinner_clip_vue {
  export {
    vueSpinnerClip as default,
  };
}

declare const _default$h: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const _default$g: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const _default$f: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

const __default__$d = { name: "VueSpinnerDot" };
var _sfc_main$d = /* @__PURE__ */ defineComponent({
  ...__default__$d,
  props: useSpinnerProps({ size: 60 }),
  setup(__props, { expose: __expose }) {
    __expose();
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const getCircleStyle = (version) => ({
      position: "absolute",
      height: `${size.value.value / 2}${size.value.unit}`,
      width: `${size.value.value / 2}${size.value.unit}`,
      backgroundColor: __props.color,
      borderRadius: "100%",
      animationFillMode: "forwards",
      top: version % 2 ? "0" : "auto",
      bottom: version % 2 ? `auto` : `0`,
      animation: `vue-spinner-bounce 2s ${version === 2 ? `-1s` : `0s`} infinite linear`
    });
    const wrapperStyle = computed(
      () => ({
        position: "relative",
        width: size.value.string,
        height: size.value.string,
        animationFillMode: "forwards",
        animation: "vue-spinner-rotate 2s 0s infinite linear"
      })
    );
    const __returned__ = { sizeProp, size, getCircleStyle, wrapperStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.wrapperStyle)
    },
    [
      (openBlock(), createElementBlock(
        Fragment,
        null,
        renderList(2, (n) => {
          return createElementVNode(
            "div",
            {
              key: n,
              style: normalizeStyle($setup.getCircleStyle(n))
            },
            null,
            4
            /* STYLE */
          );
        }),
        64
        /* STABLE_FRAGMENT */
      ))
    ],
    4
    /* STYLE */
  );
}
var vueSpinnerDot = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-dot.vue"]]);

declare namespace __spinners_vue_spinner_dot_vue {
  export {
    vueSpinnerDot as default,
  };
}

declare const _default$e: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const _default$d: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

const __default__$c = { name: "VueSpinnerFade" };
const rad = 20;
var _sfc_main$c = /* @__PURE__ */ defineComponent({
  ...__default__$c,
  props: useSpinnerProps({
    color: "#000000",
    height: "15px",
    width: "5px",
    margin: "2px",
    radius: "2px"
  }),
  setup(__props, { expose: __expose }) {
    __expose();
    const radiusProp = toRef(__props, "radius");
    const marginProp = toRef(__props, "margin");
    const widthProp = toRef(__props, "width");
    const heightProp = toRef(__props, "height");
    const height = useSize(() => __props.height);
    const width = useSize(() => __props.width);
    const margin = useSize(() => __props.margin);
    const radius = useSize(() => __props.radius);
    const quarter = rad / 2 + rad / 5.5;
    const wrapperStyle = {
      top: `${rad}px`,
      left: `${rad}px`,
      width: `${rad * 3}px`,
      height: `${rad * 3}px`,
      position: "relative",
      fontSize: 0
    };
    const styles = {
      a: {
        top: `${rad}px`,
        left: 0
      },
      b: {
        top: `${quarter}px`,
        left: `${quarter}px`,
        transform: "rotate(-45deg)"
      },
      c: {
        top: 0,
        left: `${rad}px`,
        transform: "rotate(90deg)"
      },
      d: {
        top: `${ -13.636363636363637}px`,
        left: `${quarter}px`,
        transform: "rotate(45deg)"
      },
      e: {
        top: `${ -20}px`,
        left: 0
      },
      f: {
        top: `${ -13.636363636363637}px`,
        left: `${ -13.636363636363637}px`,
        transform: "rotate(-45deg)"
      },
      g: {
        top: 0,
        left: `${ -20}px`,
        transform: "rotate(90deg)"
      },
      h: {
        top: `${quarter}px`,
        left: `${ -13.636363636363637}px`,
        transform: "rotate(45deg)"
      }
    };
    const getBarStyle = (variation, version) => ({
      position: "absolute",
      width: width.value.string,
      height: height.value.string,
      margin: margin.value.string,
      backgroundColor: __props.color,
      borderRadius: radius.value.string,
      transition: "2s",
      animationFillMode: "both",
      animation: `vue-spinner-fade 1.2s ${version * 0.12}s infinite ease-in-out`,
      ...styles[variation]
    });
    const __returned__ = { rad, radiusProp, marginProp, widthProp, heightProp, height, width, margin, radius, quarter, wrapperStyle, styles, getBarStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", { style: $setup.wrapperStyle }, [
    (openBlock(true), createElementBlock(
      Fragment,
      null,
      renderList(Object.keys($setup.styles), (letter, i) => {
        return openBlock(), createElementBlock(
          "div",
          {
            key: i,
            style: normalizeStyle($setup.getBarStyle(letter, i))
          },
          null,
          4
          /* STYLE */
        );
      }),
      128
      /* KEYED_FRAGMENT */
    ))
  ]);
}
var vueSpinnerFade = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-fade.vue"]]);

declare namespace __spinners_vue_spinner_fade_vue {
  export {
    vueSpinnerFade as default,
  };
}

declare const _default$c: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const _default$b: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

const __default__$b = { name: "VueSpinnerGridPop" };
var _sfc_main$b = /* @__PURE__ */ defineComponent({
  ...__default__$b,
  props: useSpinnerProps({ size: 15, margin: "2px" }),
  setup(__props, { expose: __expose }) {
    __expose();
    const marginProp = toRef(__props, "margin");
    const sizeProp = toRef(__props, "size");
    const random = (top) => Math.random() * top;
    const size = useSize(() => __props.size);
    const margin = useSize(() => __props.margin);
    const wrapperWidth = computed(() => size.value.value * 3 + margin.value.value * 6);
    const getCircleStyle = (rand) => ({
      display: "inline-block",
      backgroundColor: __props.color,
      width: size.value.string,
      height: size.value.string,
      margin: margin.value.string,
      borderRadius: "100%",
      animationFillMode: "both",
      animation: `vue-spinner-grid ${rand / 100 + 0.6}s ${rand / 100 - 0.2}s infinite ease`
    });
    const wrapperStyle = computed(() => ({
      width: `${wrapperWidth.value}px`,
      fontSize: 0
    }));
    const __returned__ = { marginProp, sizeProp, random, size, margin, wrapperWidth, getCircleStyle, wrapperStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.wrapperStyle)
    },
    [
      (openBlock(), createElementBlock(
        Fragment,
        null,
        renderList(9, (n) => {
          return createElementVNode(
            "div",
            {
              key: n,
              style: normalizeStyle($setup.getCircleStyle($setup.random(100)))
            },
            null,
            4
            /* STYLE */
          );
        }),
        64
        /* STABLE_FRAGMENT */
      ))
    ],
    4
    /* STYLE */
  );
}
var vueSpinnerGridPop = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-grid-pop.vue"]]);

declare namespace __spinners_vue_spinner_grid_pop_vue {
  export {
    vueSpinnerGridPop as default,
  };
}

declare const _default$a: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const _default$9: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const _default$8: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const _default$7: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

const __default__$a = { name: "VueSpinnerMoon" };
var _sfc_main$a = /* @__PURE__ */ defineComponent({
  ...__default__$a,
  props: useSpinnerProps({ size: 60 }),
  setup(__props, { expose: __expose }) {
    __expose();
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const moonSize = (size2) => size2 / 7;
    const wrapperStyle = computed(
      () => ({
        position: "relative",
        width: `${size.value.value + moonSize(size.value.value) * 2}${size.value.unit}`,
        height: `${size.value.value + moonSize(size.value.value) * 2}${size.value.unit}`,
        animation: "vue-spinner-moon 0.6s linear 0s infinite normal forwards running",
        boxSizing: "content-box"
      })
    );
    const moonStyle = computed(
      () => ({
        position: "absolute",
        top: `${size.value.value / 2 - moonSize(size.value.value)}${size.value.unit}`,
        backgroundColor: __props.color,
        opacity: "0.8",
        animation: "vue-spinner-moon 0.6s linear 0s infinite normal forwards running",
        boxSizing: "content-box",
        width: `${moonSize(size.value.value)}${size.value.unit}`,
        height: `${moonSize(size.value.value)}${size.value.unit}`,
        borderRadius: "100%"
      })
    );
    const ringStyle = computed(
      () => ({
        borderWidth: `${moonSize(size.value.value)}${size.value.unit}`,
        borderStyle: "solid",
        borderColor: __props.color,
        borderImage: "initial",
        opacity: "0.1",
        boxSizing: "content-box",
        width: size.value.string,
        height: size.value.string,
        borderRadius: "100%"
      })
    );
    const __returned__ = { sizeProp, size, moonSize, wrapperStyle, moonStyle, ringStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.wrapperStyle)
    },
    [
      createElementVNode(
        "div",
        {
          style: normalizeStyle($setup.moonStyle)
        },
        null,
        4
        /* STYLE */
      ),
      createElementVNode(
        "div",
        {
          style: normalizeStyle($setup.ringStyle)
        },
        null,
        4
        /* STYLE */
      )
    ],
    4
    /* STYLE */
  );
}
var vueSpinnerMoon = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-moon.vue"]]);

declare namespace __spinners_vue_spinner_moon_vue {
  export {
    vueSpinnerMoon as default,
  };
}

declare const _default$6: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare const _default$5: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

const __default__$9 = { name: "VueSpinnerPacman" };
var _sfc_main$9 = /* @__PURE__ */ defineComponent({
  ...__default__$9,
  props: useSpinnerProps({ size: "25px", margin: "2px" }),
  setup(__props, { expose: __expose }) {
    __expose();
    useCssVars((_ctx) => ({
      "c8cb0e22-`${-4 * size.value}${size.unit}`": `${ -4 * unref(size).value}${unref(size).unit}`,
      "c8cb0e22-`${-size.value / 4}${size.unit}`": `${-unref(size).value / 4}${unref(size).unit}`
    }));
    const marginProp = toRef(__props, "margin");
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const margin = useSize(() => __props.margin);
    const s1 = (sizeString) => `${sizeString} solid transparent`;
    const s2 = (sizeString, color) => `${sizeString} solid ${color}`;
    const getPacmanStyle = (version) => ({
      position: "absolute",
      width: 0,
      height: 0,
      borderTop: version === 0 ? s1(size.value.string) : s2(size.value.string, __props.color),
      borderLeft: s2(size.value.string, __props.color),
      borderBottom: version === 0 ? s2(size.value.string, __props.color) : s1(size.value.string),
      borderRight: s1(size.value.string),
      borderRadius: size.value.string,
      animation: `vue-spinner-pacman${version} ease-in-out 0.8s infinite normal both running`
    });
    const getBallStyle = (version) => ({
      position: "absolute",
      top: size.value.string,
      left: `${size.value.value * 4}${size.value.unit}`,
      width: `${size.value.value / 2.5}${size.value.unit}`,
      height: `${size.value.value / 2.5}${size.value.unit}`,
      margin: margin.value.string,
      borderRadius: "100%",
      backgroundColor: __props.color,
      transform: `translate(0, ${-size.value.value / 4}${size.value.unit})`,
      animation: `vue-spinner-pacman-ball-animation 1s linear ${version * 0.25}s infinite normal both running`
    });
    const wrapperStyle = computed(
      () => ({
        position: "relative",
        width: size.value.string,
        height: size.value.string,
        fontSize: 0
      })
    );
    const __returned__ = { marginProp, sizeProp, size, margin, s1, s2, getPacmanStyle, getBallStyle, wrapperStyle, get range() {
      return range;
    } };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.wrapperStyle)
    },
    [
      createElementVNode(
        "div",
        {
          style: normalizeStyle($setup.getPacmanStyle(0))
        },
        null,
        4
        /* STYLE */
      ),
      createElementVNode(
        "div",
        {
          style: normalizeStyle($setup.getPacmanStyle(1))
        },
        null,
        4
        /* STYLE */
      ),
      (openBlock(true), createElementBlock(
        Fragment,
        null,
        renderList($setup.range(2, 7), (n) => {
          return openBlock(), createElementBlock(
            "div",
            {
              key: n,
              style: normalizeStyle($setup.getBallStyle(n))
            },
            null,
            4
            /* STYLE */
          );
        }),
        128
        /* KEYED_FRAGMENT */
      ))
    ],
    4
    /* STYLE */
  );
}
var vueSpinnerPacman = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-pacman.vue"]]);

declare namespace __spinners_vue_spinner_pacman_vue {
  export {
    vueSpinnerPacman as default,
  };
}

declare const _default$4: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

const __default__$8 = { name: "VueSpinnerPropagate" };
var _sfc_main$8 = /* @__PURE__ */ defineComponent({
  ...__default__$8,
  props: useSpinnerProps({
    size: "15px"
  }),
  setup(__props, { expose: __expose }) {
    __expose();
    useCssVars((_ctx) => ({
      '5639d928-getDistance(0, "left")': getDistance(0, "left"),
      '5639d928-getDistance(1, "left")': getDistance(1, "left"),
      '5639d928-getDistance(2, "left")': getDistance(2, "left"),
      '5639d928-getDistance(0, "right")': getDistance(0, "right"),
      '5639d928-getDistance(1, "right")': getDistance(1, "right"),
      '5639d928-getDistance(2, "right")': getDistance(2, "right")
    }));
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const distance = [1, 3, 5];
    const getCircleStyle = (version) => ({
      position: "absolute",
      width: size.value.string,
      height: size.value.string,
      borderRadius: "50%",
      background: __props.color,
      fontSize: `${size.value.value / 3}${size.value.unit}`,
      animationFillMode: "forwards",
      animation: `vue-spinner-propagate${version} 1.5s infinite`
    });
    const getDistance = (index, direction) => `${distance[index] * (direction === "left" ? -1 : 1)}rem`;
    const wrapperStyle = computed(
      () => ({
        position: "relative"
      })
    );
    const __returned__ = { sizeProp, size, distance, getCircleStyle, getDistance, wrapperStyle, get range() {
      return range;
    } };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.wrapperStyle)
    },
    [
      (openBlock(true), createElementBlock(
        Fragment,
        null,
        renderList($setup.range(0, 6), (n) => {
          return openBlock(), createElementBlock(
            "div",
            {
              key: n,
              style: normalizeStyle($setup.getCircleStyle(n))
            },
            null,
            4
            /* STYLE */
          );
        }),
        128
        /* KEYED_FRAGMENT */
      ))
    ],
    4
    /* STYLE */
  );
}
var vueSpinnerPropagate = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-propagate.vue"]]);

declare namespace __spinners_vue_spinner_propagate_vue {
  export {
    vueSpinnerPropagate as default,
  };
}

declare const _default$3: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

const __default__$7 = { name: "VueSpinnerPulse" };
var _sfc_main$7 = /* @__PURE__ */ defineComponent({
  ...__default__$7,
  props: useSpinnerProps({ size: "15px", margin: "2px" }),
  setup(__props, { expose: __expose }) {
    __expose();
    const marginProp = toRef(__props, "margin");
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const margin = useSize(() => __props.margin);
    const getCircleStyle = (version) => ({
      display: "inline-block",
      width: size.value.string,
      height: size.value.string,
      margin: margin.value.string,
      borderRadius: "100%",
      backgroundColor: __props.color,
      animationFillMode: "both",
      animation: `vue-spinner-pulse 0.75s ${version * 0.12}s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)`
    });
    const __returned__ = { marginProp, sizeProp, size, margin, getCircleStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", null, [
    (openBlock(), createElementBlock(
      Fragment,
      null,
      renderList(3, (n) => {
        return createElementVNode(
          "div",
          {
            key: n,
            class: "circle",
            style: normalizeStyle($setup.getCircleStyle(n + 1))
          },
          null,
          4
          /* STYLE */
        );
      }),
      64
      /* STABLE_FRAGMENT */
    ))
  ]);
}
var vueSpinnerPulse = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/vue-spinner-pulse.vue"]]);

declare namespace __spinners_vue_spinner_pulse_vue {
  export {
    vueSpinnerPulse as default,
  };
}

declare const _default$2: vue.DefineComponent<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    size: {
        type: (NumberConstructor | StringConstructor)[];
        default: string;
    };
    color: StringConstructor;
}>> & Readonly<{}>, {
    size: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

const __default__$6 = { name: "VueSpinnerRing" };
var _sfc_main$6 = /* @__PURE__ */ defineComponent({
  ...__default__$6,
  props: useSpinnerProps({ size: "60px" }),
  setup(__props, { expose: __expose }) {
    __expose();
    const sizeProp = toRef(__props, "size");
    const size = useSize(() => __props.size);
    const getRingStyle = (version) => ({
      position: "absolute",
      top: "0",
      left: "0",
      width: size.value.string,
      height: size.value.string,
      border: `${size.value.value / 10}${size.value.unit} solid ${__props.color}`,
      borderRadius: "100%",
      opacity: "0.4",
      animationFillMode: "forwards",
      perspective: "800px",
      animation: `${version === 1 ? "vue-spinner-right" : "vue-spinner-left"} 2s 0s infinite linear`
    });
    const wrapperStyle = computed(
      () => ({
        position: "relative",
        width: size.value.string,
        height: size.value.string
      })
    );
    const __returned__ = { sizeProp, size, getRingStyle, wrapperStyle };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock(
    "div",
    {
      style: normalizeStyle($setup.wrapperStyle)
    },
    [
      (openBlock(), createElementBlock(
        Fragment,
        null,
        renderList(2, (n) => {
          return createElementVNode(
            "div",
            {
              key: n,
              style: normalizeStyle($setup.getRingStyle(n))
            },
            null,
            4
            /* STYLE */
          );
        }),
        64
        /* STABLE_FRAGMENT */
      ))
    ],
    4
    /* STYLE */
  );
}
var vueSpinnerRing = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__file", "/Users/leonsilicon/Developer/github/leonsilicon/vue3-spinners/packages/vue3-spinners/src/spinners/v