@mekari/pixel3-loader 0.0.1

package/dist/chunk-6Q7HPFR6.mjs

@@ -0,0 +1,22 @@
+// src/modules/loader.props.ts
+var loaderProps = {
+  id: {
+    type: String
+  },
+  size: {
+    type: [Number],
+    default: 24
+  },
+  spacing: {
+    type: [Number],
+    default: 12
+  },
+  duration: {
+    type: String,
+    default: "1250ms"
+  }
+};
+
+export {
+  loaderProps
+};

package/dist/chunk-HTTW3RII.mjs

@@ -0,0 +1,31 @@
+import {
+  loaderProps
+} from "./chunk-6Q7HPFR6.mjs";
+import {
+  useLoader
+} from "./chunk-YF2MAEL3.mjs";
+
+// src/loader.tsx
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { defineComponent } from "vue";
+var MpLoader = defineComponent({
+  name: "MpLoader",
+  props: loaderProps,
+  setup(props) {
+    const {
+      wrapperAttrs,
+      loaderAttrs
+    } = useLoader(props);
+    return () => {
+      return _createVNode("div", _mergeProps({
+        "data-pixel-component": "MpLoader"
+      }, wrapperAttrs.value), [_createVNode("div", _mergeProps({
+        "data-pixel-component": "MpLoaderDot"
+      }, loaderAttrs.value), null)]);
+    };
+  }
+});
+
+export {
+  MpLoader
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/chunk-YF2MAEL3.mjs

@@ -0,0 +1,136 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/useLoader.ts
+import { computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { useStyleTag, useId } from "@mekari/pixel3-utils";
+function useLoader(props) {
+  const identifierClass = `pixel-loader-${useId(4)}`;
+  const colors = {
+    mekari: "var(--mp-colors-brand-mekari)",
+    talenta: "var(--mp-colors-brand-talenta)",
+    jurnal: "var(--mp-colors-brand-jurnal)",
+    klikpajak: "var(--mp-colors-brand-klikpajak)"
+  };
+  const getLoaderData = computed(() => {
+    const jumpHeight = -(2.5 * props.size);
+    const bounceHeight = Math.floor(props.size * 0.2) + props.size;
+    const dotCalculation = {
+      first: 0,
+      second: props.spacing + props.size,
+      third: 2 * (props.spacing + props.size),
+      fourth: 3 * (props.spacing + props.size)
+    };
+    const maxWidth = 3 * (props.size + props.spacing) + props.size;
+    const keyframeStyle = `@keyframes animation-pixel-loader {
+      0% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      15% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px ${jumpHeight}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      30% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px ${jumpHeight}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      45% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${bounceHeight}px 0px 0px,
+        ${colors.talenta}${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px ${jumpHeight}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      60% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${bounceHeight}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px ${jumpHeight}px 0px 0px;
+      }
+      75% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${bounceHeight}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      90% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${bounceHeight}px 0px 0px;
+      }
+      100% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+    }`;
+    const loaderStyle = `
+    ${keyframeStyle}
+
+    .${identifierClass} {
+      border-radius: 999px;
+      background: transparent;
+      width: ${props.size}px;
+      height: ${props.size}px;
+      position: absolute;
+      transform: translateY(${props.size}px);
+      animation: 1250ms ease 0s infinite normal backwards running animation-pixel-loader;
+    }`;
+    return {
+      jumpHeight,
+      bounceHeight,
+      dotCalculation,
+      maxWidth,
+      loaderStyle
+    };
+  });
+  const {
+    css,
+    load,
+    unload,
+    isLoaded
+  } = useStyleTag(getLoaderData.value.loaderStyle, {
+    id: identifierClass
+  });
+  const wrapperAttrs = computed(() => {
+    return {
+      style: {
+        position: "absolute",
+        height: props.size + "px",
+        width: getLoaderData.value.maxWidth + "px"
+      }
+    };
+  });
+  const loaderAttrs = computed(() => {
+    return {
+      class: isLoaded.value ? identifierClass : ""
+    };
+  });
+  onMounted(() => {
+    load();
+  });
+  onBeforeUnmount(() => {
+    unload();
+  });
+  watch(() => getLoaderData.value.loaderStyle, () => {
+    css.value = getLoaderData.value.loaderStyle;
+  });
+  return {
+    wrapperAttrs,
+    loaderAttrs
+  };
+}
+__name(useLoader, "useLoader");
+
+export {
+  useLoader
+};

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+export { MpLoader } from './loader.mjs';
+import 'vue/jsx-runtime';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MpLoader } from './loader.js';
+import 'vue/jsx-runtime';
+import 'vue';

package/dist/index.js

@@ -0,0 +1,201 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MpLoader: () => MpLoader
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/loader.tsx
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+
+// src/modules/useLoader.ts
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+function useLoader(props) {
+  const identifierClass = `pixel-loader-${(0, import_pixel3_utils.useId)(4)}`;
+  const colors = {
+    mekari: "var(--mp-colors-brand-mekari)",
+    talenta: "var(--mp-colors-brand-talenta)",
+    jurnal: "var(--mp-colors-brand-jurnal)",
+    klikpajak: "var(--mp-colors-brand-klikpajak)"
+  };
+  const getLoaderData = (0, import_vue.computed)(() => {
+    const jumpHeight = -(2.5 * props.size);
+    const bounceHeight = Math.floor(props.size * 0.2) + props.size;
+    const dotCalculation = {
+      first: 0,
+      second: props.spacing + props.size,
+      third: 2 * (props.spacing + props.size),
+      fourth: 3 * (props.spacing + props.size)
+    };
+    const maxWidth = 3 * (props.size + props.spacing) + props.size;
+    const keyframeStyle = `@keyframes animation-pixel-loader {
+      0% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      15% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px ${jumpHeight}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      30% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px ${jumpHeight}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      45% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${bounceHeight}px 0px 0px,
+        ${colors.talenta}${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px ${jumpHeight}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      60% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${bounceHeight}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px ${jumpHeight}px 0px 0px;
+      }
+      75% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${bounceHeight}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      90% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${bounceHeight}px 0px 0px;
+      }
+      100% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+    }`;
+    const loaderStyle = `
+    ${keyframeStyle}
+
+    .${identifierClass} {
+      border-radius: 999px;
+      background: transparent;
+      width: ${props.size}px;
+      height: ${props.size}px;
+      position: absolute;
+      transform: translateY(${props.size}px);
+      animation: 1250ms ease 0s infinite normal backwards running animation-pixel-loader;
+    }`;
+    return {
+      jumpHeight,
+      bounceHeight,
+      dotCalculation,
+      maxWidth,
+      loaderStyle
+    };
+  });
+  const {
+    css,
+    load,
+    unload,
+    isLoaded
+  } = (0, import_pixel3_utils.useStyleTag)(getLoaderData.value.loaderStyle, {
+    id: identifierClass
+  });
+  const wrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      style: {
+        position: "absolute",
+        height: props.size + "px",
+        width: getLoaderData.value.maxWidth + "px"
+      }
+    };
+  });
+  const loaderAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: isLoaded.value ? identifierClass : ""
+    };
+  });
+  (0, import_vue.onMounted)(() => {
+    load();
+  });
+  (0, import_vue.onBeforeUnmount)(() => {
+    unload();
+  });
+  (0, import_vue.watch)(() => getLoaderData.value.loaderStyle, () => {
+    css.value = getLoaderData.value.loaderStyle;
+  });
+  return {
+    wrapperAttrs,
+    loaderAttrs
+  };
+}
+__name(useLoader, "useLoader");
+
+// src/modules/loader.props.ts
+var loaderProps = {
+  id: {
+    type: String
+  },
+  size: {
+    type: [Number],
+    default: 24
+  },
+  spacing: {
+    type: [Number],
+    default: 12
+  },
+  duration: {
+    type: String,
+    default: "1250ms"
+  }
+};
+
+// src/loader.tsx
+var MpLoader = (0, import_vue3.defineComponent)({
+  name: "MpLoader",
+  props: loaderProps,
+  setup(props) {
+    const {
+      wrapperAttrs,
+      loaderAttrs
+    } = useLoader(props);
+    return () => {
+      return (0, import_vue2.createVNode)("div", (0, import_vue2.mergeProps)({
+        "data-pixel-component": "MpLoader"
+      }, wrapperAttrs.value), [(0, import_vue2.createVNode)("div", (0, import_vue2.mergeProps)({
+        "data-pixel-component": "MpLoaderDot"
+      }, loaderAttrs.value), null)]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpLoader
+});

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import {
+  MpLoader
+} from "./chunk-HTTW3RII.mjs";
+import "./chunk-6Q7HPFR6.mjs";
+import "./chunk-YF2MAEL3.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpLoader
+};

package/dist/loader.d.mts

@@ -0,0 +1,42 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpLoader: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+    };
+    size: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    spacing: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+    };
+    size: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    spacing: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+}>>, {
+    size: number;
+    spacing: number;
+    duration: string;
+}>;
+
+export { MpLoader };

package/dist/loader.d.ts

@@ -0,0 +1,42 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpLoader: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+    };
+    size: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    spacing: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+    };
+    size: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    spacing: {
+        type: vue.PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+}>>, {
+    size: number;
+    spacing: number;
+    duration: string;
+}>;
+
+export { MpLoader };

package/dist/loader.js

@@ -0,0 +1,199 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/loader.tsx
+var loader_exports = {};
+__export(loader_exports, {
+  MpLoader: () => MpLoader
+});
+module.exports = __toCommonJS(loader_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+
+// src/modules/useLoader.ts
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+function useLoader(props) {
+  const identifierClass = `pixel-loader-${(0, import_pixel3_utils.useId)(4)}`;
+  const colors = {
+    mekari: "var(--mp-colors-brand-mekari)",
+    talenta: "var(--mp-colors-brand-talenta)",
+    jurnal: "var(--mp-colors-brand-jurnal)",
+    klikpajak: "var(--mp-colors-brand-klikpajak)"
+  };
+  const getLoaderData = (0, import_vue.computed)(() => {
+    const jumpHeight = -(2.5 * props.size);
+    const bounceHeight = Math.floor(props.size * 0.2) + props.size;
+    const dotCalculation = {
+      first: 0,
+      second: props.spacing + props.size,
+      third: 2 * (props.spacing + props.size),
+      fourth: 3 * (props.spacing + props.size)
+    };
+    const maxWidth = 3 * (props.size + props.spacing) + props.size;
+    const keyframeStyle = `@keyframes animation-pixel-loader {
+      0% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      15% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px ${jumpHeight}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      30% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px ${jumpHeight}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      45% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${bounceHeight}px 0px 0px,
+        ${colors.talenta}${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px ${jumpHeight}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      60% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${bounceHeight}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px ${jumpHeight}px 0px 0px;
+      }
+      75% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${bounceHeight}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      90% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${bounceHeight}px 0px 0px;
+      }
+      100% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+    }`;
+    const loaderStyle = `
+    ${keyframeStyle}
+
+    .${identifierClass} {
+      border-radius: 999px;
+      background: transparent;
+      width: ${props.size}px;
+      height: ${props.size}px;
+      position: absolute;
+      transform: translateY(${props.size}px);
+      animation: 1250ms ease 0s infinite normal backwards running animation-pixel-loader;
+    }`;
+    return {
+      jumpHeight,
+      bounceHeight,
+      dotCalculation,
+      maxWidth,
+      loaderStyle
+    };
+  });
+  const {
+    css,
+    load,
+    unload,
+    isLoaded
+  } = (0, import_pixel3_utils.useStyleTag)(getLoaderData.value.loaderStyle, {
+    id: identifierClass
+  });
+  const wrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      style: {
+        position: "absolute",
+        height: props.size + "px",
+        width: getLoaderData.value.maxWidth + "px"
+      }
+    };
+  });
+  const loaderAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: isLoaded.value ? identifierClass : ""
+    };
+  });
+  (0, import_vue.onMounted)(() => {
+    load();
+  });
+  (0, import_vue.onBeforeUnmount)(() => {
+    unload();
+  });
+  (0, import_vue.watch)(() => getLoaderData.value.loaderStyle, () => {
+    css.value = getLoaderData.value.loaderStyle;
+  });
+  return {
+    wrapperAttrs,
+    loaderAttrs
+  };
+}
+__name(useLoader, "useLoader");
+
+// src/modules/loader.props.ts
+var loaderProps = {
+  id: {
+    type: String
+  },
+  size: {
+    type: [Number],
+    default: 24
+  },
+  spacing: {
+    type: [Number],
+    default: 12
+  },
+  duration: {
+    type: String,
+    default: "1250ms"
+  }
+};
+
+// src/loader.tsx
+var MpLoader = (0, import_vue3.defineComponent)({
+  name: "MpLoader",
+  props: loaderProps,
+  setup(props) {
+    const {
+      wrapperAttrs,
+      loaderAttrs
+    } = useLoader(props);
+    return () => {
+      return (0, import_vue2.createVNode)("div", (0, import_vue2.mergeProps)({
+        "data-pixel-component": "MpLoader"
+      }, wrapperAttrs.value), [(0, import_vue2.createVNode)("div", (0, import_vue2.mergeProps)({
+        "data-pixel-component": "MpLoaderDot"
+      }, loaderAttrs.value), null)]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpLoader
+});

package/dist/loader.mjs

@@ -0,0 +1,9 @@
+import {
+  MpLoader
+} from "./chunk-HTTW3RII.mjs";
+import "./chunk-6Q7HPFR6.mjs";
+import "./chunk-YF2MAEL3.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpLoader
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/useLoader.ts":{"bytes":5037,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/loader.props.ts":{"bytes":516,"imports":[],"format":"esm"},"src/loader.tsx":{"bytes":754,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/useLoader.ts","kind":"import-statement","original":"./modules/useLoader"},{"path":"src/modules/loader.props.ts","kind":"import-statement","original":"./modules/loader.props"}],"format":"esm"},"src/index.ts":{"bytes":110,"imports":[{"path":"src/loader.tsx","kind":"import-statement","original":"./loader"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":121},"src/loader.tsx":{"bytesInOutput":590},"src/modules/useLoader.ts":{"bytesInOutput":4936},"src/modules/loader.props.ts":{"bytesInOutput":216}},"bytes":6970},"dist/loader.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/loader.tsx","inputs":{"src/loader.tsx":{"bytesInOutput":720},"src/modules/useLoader.ts":{"bytesInOutput":4936},"src/modules/loader.props.ts":{"bytesInOutput":216}},"bytes":6962},"dist/modules/loader.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/loader.props.ts","inputs":{"src/modules/loader.props.ts":{"bytesInOutput":370}},"bytes":1306},"dist/modules/useLoader.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/useLoader.ts","inputs":{"src/modules/useLoader.ts":{"bytesInOutput":5077}},"bytes":6098}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/useLoader.ts":{"bytes":5037,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/loader.props.ts":{"bytes":516,"imports":[],"format":"esm"},"src/loader.tsx":{"bytes":754,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/useLoader.ts","kind":"import-statement","original":"./modules/useLoader"},{"path":"src/modules/loader.props.ts","kind":"import-statement","original":"./modules/loader.props"}],"format":"esm"},"src/index.ts":{"bytes":110,"imports":[{"path":"src/loader.tsx","kind":"import-statement","original":"./loader"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-HTTW3RII.mjs","kind":"import-statement"},{"path":"dist/chunk-6Q7HPFR6.mjs","kind":"import-statement"},{"path":"dist/chunk-YF2MAEL3.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpLoader"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":167},"dist/loader.mjs":{"imports":[{"path":"dist/chunk-HTTW3RII.mjs","kind":"import-statement"},{"path":"dist/chunk-6Q7HPFR6.mjs","kind":"import-statement"},{"path":"dist/chunk-YF2MAEL3.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpLoader"],"entryPoint":"src/loader.tsx","inputs":{},"bytes":167},"dist/chunk-HTTW3RII.mjs":{"imports":[{"path":"dist/chunk-6Q7HPFR6.mjs","kind":"import-statement"},{"path":"dist/chunk-YF2MAEL3.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpLoader"],"inputs":{"src/loader.tsx":{"bytesInOutput":558}},"bytes":707},"dist/modules/loader.props.mjs":{"imports":[{"path":"dist/chunk-6Q7HPFR6.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["loaderProps"],"entryPoint":"src/modules/loader.props.ts","inputs":{},"bytes":113},"dist/chunk-6Q7HPFR6.mjs":{"imports":[],"exports":["loaderProps"],"inputs":{"src/modules/loader.props.ts":{"bytesInOutput":216}},"bytes":274},"dist/modules/useLoader.mjs":{"imports":[{"path":"dist/chunk-YF2MAEL3.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useLoader"],"entryPoint":"src/modules/useLoader.ts","inputs":{},"bytes":109},"dist/chunk-YF2MAEL3.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["useLoader"],"inputs":{"src/modules/useLoader.ts":{"bytesInOutput":4824}},"bytes":4927},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

package/dist/modules/loader.props.d.mts

@@ -0,0 +1,22 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+declare const loaderProps: {
+    id: {
+        type: PropType<string>;
+    };
+    size: {
+        type: PropType<number>;
+        default: number;
+    };
+    spacing: {
+        type: PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: PropType<string>;
+        default: string;
+    };
+};
+type LoaderProps = ExtractPropTypes<typeof loaderProps>;
+
+export { LoaderProps, loaderProps };

package/dist/modules/loader.props.d.ts

@@ -0,0 +1,22 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+declare const loaderProps: {
+    id: {
+        type: PropType<string>;
+    };
+    size: {
+        type: PropType<number>;
+        default: number;
+    };
+    spacing: {
+        type: PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: PropType<string>;
+        default: string;
+    };
+};
+type LoaderProps = ExtractPropTypes<typeof loaderProps>;
+
+export { LoaderProps, loaderProps };

package/dist/modules/loader.props.js

@@ -0,0 +1,46 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/loader.props.ts
+var loader_props_exports = {};
+__export(loader_props_exports, {
+  loaderProps: () => loaderProps
+});
+module.exports = __toCommonJS(loader_props_exports);
+var loaderProps = {
+  id: {
+    type: String
+  },
+  size: {
+    type: [Number],
+    default: 24
+  },
+  spacing: {
+    type: [Number],
+    default: 12
+  },
+  duration: {
+    type: String,
+    default: "1250ms"
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  loaderProps
+});

package/dist/modules/loader.props.mjs

@@ -0,0 +1,7 @@
+import {
+  loaderProps
+} from "../chunk-6Q7HPFR6.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  loaderProps
+};

package/dist/modules/useLoader.d.mts

@@ -0,0 +1,10 @@
+import * as vue from 'vue';
+import { HTMLAttributes } from 'vue';
+import { LoaderProps } from './loader.props.mjs';
+
+declare function useLoader(props: LoaderProps): {
+    wrapperAttrs: vue.ComputedRef<HTMLAttributes>;
+    loaderAttrs: vue.ComputedRef<HTMLAttributes>;
+};
+
+export { useLoader };

package/dist/modules/useLoader.d.ts

@@ -0,0 +1,10 @@
+import * as vue from 'vue';
+import { HTMLAttributes } from 'vue';
+import { LoaderProps } from './loader.props.js';
+
+declare function useLoader(props: LoaderProps): {
+    wrapperAttrs: vue.ComputedRef<HTMLAttributes>;
+    loaderAttrs: vue.ComputedRef<HTMLAttributes>;
+};
+
+export { useLoader };

package/dist/modules/useLoader.js

@@ -0,0 +1,157 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/useLoader.ts
+var useLoader_exports = {};
+__export(useLoader_exports, {
+  useLoader: () => useLoader
+});
+module.exports = __toCommonJS(useLoader_exports);
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+function useLoader(props) {
+  const identifierClass = `pixel-loader-${(0, import_pixel3_utils.useId)(4)}`;
+  const colors = {
+    mekari: "var(--mp-colors-brand-mekari)",
+    talenta: "var(--mp-colors-brand-talenta)",
+    jurnal: "var(--mp-colors-brand-jurnal)",
+    klikpajak: "var(--mp-colors-brand-klikpajak)"
+  };
+  const getLoaderData = (0, import_vue.computed)(() => {
+    const jumpHeight = -(2.5 * props.size);
+    const bounceHeight = Math.floor(props.size * 0.2) + props.size;
+    const dotCalculation = {
+      first: 0,
+      second: props.spacing + props.size,
+      third: 2 * (props.spacing + props.size),
+      fourth: 3 * (props.spacing + props.size)
+    };
+    const maxWidth = 3 * (props.size + props.spacing) + props.size;
+    const keyframeStyle = `@keyframes animation-pixel-loader {
+      0% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      15% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px ${jumpHeight}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      30% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px ${jumpHeight}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      45% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${bounceHeight}px 0px 0px,
+        ${colors.talenta}${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px ${jumpHeight}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      60% {
+        box-shadow: ${colors.mekari} ${dotCalculation.first}px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${bounceHeight}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px ${jumpHeight}px 0px 0px;
+      }
+      75% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${bounceHeight}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+      90% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${bounceHeight}px 0px 0px;
+      }
+      100% {
+        box-shadow: ${colors.mekari} 0px -${props.size}px 0px 0px,
+        ${colors.talenta} ${dotCalculation.second}px -${props.size}px 0px 0px,
+        ${colors.jurnal} ${dotCalculation.third}px -${props.size}px 0px 0px,
+        ${colors.klikpajak} ${dotCalculation.fourth}px -${props.size}px 0px 0px;
+      }
+    }`;
+    const loaderStyle = `
+    ${keyframeStyle}
+
+    .${identifierClass} {
+      border-radius: 999px;
+      background: transparent;
+      width: ${props.size}px;
+      height: ${props.size}px;
+      position: absolute;
+      transform: translateY(${props.size}px);
+      animation: 1250ms ease 0s infinite normal backwards running animation-pixel-loader;
+    }`;
+    return {
+      jumpHeight,
+      bounceHeight,
+      dotCalculation,
+      maxWidth,
+      loaderStyle
+    };
+  });
+  const {
+    css,
+    load,
+    unload,
+    isLoaded
+  } = (0, import_pixel3_utils.useStyleTag)(getLoaderData.value.loaderStyle, {
+    id: identifierClass
+  });
+  const wrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      style: {
+        position: "absolute",
+        height: props.size + "px",
+        width: getLoaderData.value.maxWidth + "px"
+      }
+    };
+  });
+  const loaderAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: isLoaded.value ? identifierClass : ""
+    };
+  });
+  (0, import_vue.onMounted)(() => {
+    load();
+  });
+  (0, import_vue.onBeforeUnmount)(() => {
+    unload();
+  });
+  (0, import_vue.watch)(() => getLoaderData.value.loaderStyle, () => {
+    css.value = getLoaderData.value.loaderStyle;
+  });
+  return {
+    wrapperAttrs,
+    loaderAttrs
+  };
+}
+__name(useLoader, "useLoader");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useLoader
+});

package/dist/modules/useLoader.mjs

@@ -0,0 +1,7 @@
+import {
+  useLoader
+} from "../chunk-YF2MAEL3.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useLoader
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@mekari/pixel3-loader",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@mekari/pixel3-styled-system": "0.0.1",
+    "@mekari/pixel3-utils": "0.0.2"
+  },
+  "peerDependencies": {
+    "vue": "3.2.47"
+  },
+  "devDependencies": {
+    "vue": "3.2.47"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "build:external": "tsup src/index.tsx --external @acme-org/styled-system",
+    "types:check": "tsc --noEmit",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}