@privyid/persona 0.3.0

package/dist/components/caption/Caption.vue.d.ts

@@ -0,0 +1,16 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    bold: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    bold: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    bold: boolean;
+}>;
+export default _default;

package/dist/components/card/Card.vue

@@ -0,0 +1,247 @@
+<template>
+  <component
+    :is="elementNames"
+    v-if="show"
+    data-testid="card"
+    :class="classNames">
+    <header
+      v-if="$slots.header"
+      data-testid="card-header"
+      class="card__header">
+      <slot name="header" />
+    </header>
+
+    <header
+      v-else-if="title"
+      class="card__header card__header--default">
+      <Heading element="h6">
+        {{ title }}
+      </Heading>
+
+      <span
+        v-if="$slots.action && !callout"
+        data-testid="card-header-action"
+        class="card__header__action">
+        <slot name="action" />
+      </span>
+
+      <span
+        v-if="dismissable && callout"
+        data-testid="card-callout-dismiss"
+        class="card__header__dismiss"
+        @click="close()">
+        <IconClose />
+      </span>
+    </header>
+
+    <div
+      v-if="!sectioned"
+      class="card__body">
+      <slot />
+    </div>
+    <slot v-else />
+
+    <footer
+      v-if="$slots.footer"
+      data-testid="card-footer"
+      class="card__footer">
+      <slot name="footer" />
+    </footer>
+  </component>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  ref
+} from "vue-demi";
+import IconClose from "@carbon/icons-vue/lib/close/16";
+import Heading from "../heading/Heading.vue";
+export default defineComponent({
+  components: { Heading, IconClose },
+  props: {
+    element: {
+      type: String,
+      default: "section"
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    sectioned: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    callout: {
+      type: Boolean,
+      default: false
+    },
+    dismissable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["dismissed"],
+  setup(props, { emit }) {
+    const show = ref(true);
+    const classNames = computed(() => {
+      const result = ["card"];
+      if (props.sectioned)
+        result.push("card--sectioned");
+      if (props.disabled)
+        result.push("card--disabled");
+      if (props.callout)
+        result.push("card--callout");
+      return result;
+    });
+    const elementNames = computed(() => {
+      return props.element;
+    });
+    function close() {
+      show.value = false;
+      emit("dismissed");
+    }
+    return {
+      classNames,
+      elementNames,
+      show,
+      close
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+/**
+* Component Name: Card
+* Component URI : https : //www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=294%3A5079
+* Date Created  : May 22, 2022
+* Last Update   : May 23, 2022
+*/
+.card {
+  @apply border bg-white border-secondary-5 rounded-md;
+
+  /*
+  * Card Body & Card Header
+  * by default have 24px (1.5rem) padding
+  */
+  &__header,
+  &__body {
+    @apply pt-6 px-6;
+  }
+
+  &__body {
+    @apply pb-6;
+
+    > .card__section {
+      @apply pt-0;
+    }
+
+    .card__section {
+      @apply border-b border-black border-opacity-10;
+
+      /**
+      * Adding border-top in the first element
+      * of Card Sub-Section and provide 24px (1.5rem)
+      * of margin-top
+      */
+      &:first-child {
+        @apply border-t mt-6;
+      }
+
+      &:last-child {
+        /**
+        * Remove padding-bottom of Card Body
+        * from the last element of Card Sub-Section
+        */
+        .card__body {
+          @apply pb-0;
+        }
+      }
+
+      /**
+      * Remove padding-left-right Card Body
+      * in Card Sub-Section
+      */
+      .card__body {
+        @apply px-0;
+      }
+    }
+  }
+
+  /**
+  * If Card have Section,
+  * padding of card-body-top-parent set to 0
+  */
+  &&--sectioned {
+    > .card__body {
+      @apply p-0;
+    }
+  }
+
+  /**
+  * Give background background-100 (#f5f5f5)
+  * If Card disabled
+  */
+  &&--disabled {
+    @apply bg-background-100;
+  }
+
+  /**
+  * Provide box-shadow when
+  * Card Callout is enable
+  */
+  &&--callout {
+    @apply shadow;
+  }
+
+  &__header {
+    &&--default {
+      @apply flex justify-between items-center;
+    }
+
+    &,
+    &__action {
+      a {
+        &:not(.btn) {
+          @apply text-xs;
+        }
+
+        + a {
+          @apply pl-3;
+        }
+      }
+    }
+
+    &__dismiss {
+      @apply text-secondary-50 hover:text-secondary-100 hover:cursor-pointer;
+    }
+  }
+
+  &__section {
+    @apply border-b border-black border-opacity-10;
+
+    &:last-child {
+      @apply border-b-0;
+    }
+
+    &&--disabled,
+    &.card--disabled {
+      @apply bg-background-100;
+    }
+
+    &.card--disabled {
+      @apply px-6 pb-6;
+    }
+  }
+
+  &__footer {
+    @apply pb-6 px-6 pt-3;
+  }
+}
+</style>

package/dist/components/card/Card.vue.d.ts

@@ -0,0 +1,68 @@
+import { PropType } from 'vue-demi';
+declare type ElementVariant = 'div' | 'section' | 'article';
+declare const _default: import("vue-demi").DefineComponent<{
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: any;
+    };
+    sectioned: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    callout: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    elementNames: import("vue-demi").ComputedRef<ElementVariant>;
+    show: import("vue-demi").Ref<boolean>;
+    close: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "dismissed"[], "dismissed", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: any;
+    };
+    sectioned: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    callout: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onDismissed?: (...args: any[]) => any;
+}, {
+    dismissable: boolean;
+    disabled: boolean;
+    title: string;
+    element: ElementVariant;
+    sectioned: boolean;
+    callout: boolean;
+}>;
+export default _default;

package/dist/components/card/CardSection.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    data-testid="card-section"
+    :class="classNames">
+    <div
+      v-if="$slots.header"
+      data-testid="card-header"
+      class="card__header">
+      <slot name="header" />
+    </div>
+
+    <div
+      v-else-if="title"
+      class="card__header card__header--default">
+      <Subheading
+        overline="medium">
+        {{ title }}
+      </Subheading>
+
+      <span
+        v-if="$slots.action"
+        data-testid="card-header-action"
+        class="card__header__action">
+        <slot name="action" />
+      </span>
+    </div>
+
+    <div class="card__body">
+      <slot />
+    </div>
+
+    <footer
+      v-if="$slots.footer"
+      data-testid="card-footer"
+      class="card__footer">
+      <slot name="footer" />
+    </footer>
+  </div>
+</template>
+
+<script>
+import Subheading from "../subheading/Subheading.vue";
+import { defineComponent, computed } from "vue-demi";
+export default defineComponent({
+  components: { Subheading },
+  props: {
+    title: {
+      type: String,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = ["card__section"];
+      if (props.disabled)
+        result.push("card__section--disabled");
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>

package/dist/components/card/CardSection.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    title: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<String[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    disabled: boolean;
+    title: string;
+}>;
+export default _default;

package/dist/components/card/assets/images/img-card-callout-01.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="121" height="128" fill="none" viewBox="0 0 121 128"><g clip-path="url(#clip0_644_13029)"><g clip-path="url(#clip1_644_13029)"><rect width="121" height="121" y="6.5" fill="url(#paint0_linear_644_13029)" rx="60.124"/><rect width="121" height="121" y="6.5" fill="#fff" fill-opacity=".8" rx="60.124"/><path fill="#8AAED8" d="M9 54.5001H61H113V123.369C113 125.641 111.158 127.483 108.886 127.483H13.1138C10.8418 127.483 9 125.641 9 123.369V54.5001Z"/><rect width="104" height="25" x="9" y="29.5" fill="#BFD6F0"/><rect width="84" height="54" x="22" y="18.5" fill="#DDE6F4" rx="4.509"/><path fill="#fff" d="M9 54.5H11C13.7614 54.5 16 56.7386 16 59.5V127.5H9V54.5Z"/><path fill="#fff" d="M113 54.5H111C108.239 54.5 106 56.7386 106 59.5V127.5H113V54.5Z"/><path fill="#F5F7F9" d="M9 64.5C9 62.2909 10.7909 60.5 13 60.5H109C111.209 60.5 113 62.2909 113 64.5V127.5H9V64.5Z"/><path fill="url(#paint1_radial_644_13029)" d="M9 64.5C9 62.2909 10.7909 60.5 13 60.5H57C59.2091 60.5 61 62.2909 61 64.5V127.5H9V64.5Z"/><path fill="url(#paint2_radial_644_13029)" d="M113 64.5C113 62.2909 111.209 60.5 109 60.5H65C62.7909 60.5 61 62.2909 61 64.5V127.5H113V64.5Z"/></g><path fill="#BFD6F0" d="M9 30.5C9 28.2909 10.7909 26.5 13 26.5H109C111.209 26.5 113 28.2909 113 30.5V41.5H9V30.5Z"/><rect width="80" height="35" x="26" y="12.5" fill="#DDE6F4" rx="4.509"/><g filter="url(#filter0_f_644_13029)"><circle cx="9.5" cy="12" r="8.5" fill="#91ACF1"/><path fill="#fff" d="M12.9098 15.8141H6.09022C6.03664 15.8141 5.98367 15.8028 5.93475 15.781C5.88583 15.7591 5.84206 15.7272 5.80629 15.6873C5.77052 15.6475 5.74355 15.6005 5.72714 15.5495C5.71073 15.4985 5.70524 15.4446 5.71104 15.3914C5.81463 14.4589 6.25842 13.5974 6.95749 12.9717C7.65656 12.346 8.56181 12 9.5 12C10.4382 12 11.3434 12.346 12.0425 12.9717C12.7416 13.5974 13.1854 14.4589 13.289 15.3914C13.2948 15.4446 13.2893 15.4985 13.2729 15.5495C13.2565 15.6005 13.2295 15.6475 13.1937 15.6873C13.1579 15.7272 13.1142 15.7591 13.0653 15.781C13.0163 15.8028 12.9634 15.8141 12.9098 15.8141Z"/><path fill="#fff" d="M9.77006 14.4054L11.5649 12.6072C10.9488 12.2105 10.2316 11.9998 9.49887 12C8.76618 12.0002 8.04905 12.2115 7.43323 12.6085L9.23037 14.4056C9.30188 14.4771 9.39888 14.5173 9.50002 14.5174H9.50021C9.60144 14.5173 9.69849 14.477 9.77006 14.4054Z"/><path fill="#fff" d="M9.49818 12.7628C9.04556 12.7628 8.60311 12.6286 8.22678 12.3771C7.85044 12.1256 7.55712 11.7682 7.38392 11.3501C7.21071 10.9319 7.16539 10.4718 7.25369 10.0279C7.34199 9.58394 7.55995 9.17617 7.87999 8.85613C8.20004 8.53608 8.6078 8.31813 9.05172 8.22983C9.49564 8.14152 9.95577 8.18684 10.3739 8.36005C10.7921 8.53326 11.1495 8.82658 11.401 9.20291C11.6524 9.57925 11.7866 10.0217 11.7866 10.4743C11.786 11.081 11.5447 11.6627 11.1156 12.0918C10.6866 12.5208 10.1049 12.7621 9.49818 12.7628Z"/><path fill="#fff" d="M7.24591 10.8558C7.33546 11.3889 7.61105 11.873 8.02374 12.2221C8.43642 12.5712 8.95948 12.7628 9.50005 12.7628C10.0406 12.7628 10.5637 12.5712 10.9764 12.2221C11.389 11.873 11.6646 11.3889 11.7542 10.8558H7.24591Z"/></g><g filter="url(#filter1_d_644_13029)"><rect width="86" height="66" x="18" y=".5" fill="#fff" rx="4.509"/><rect width="85.248" height="65.248" x="18.376" y=".876" stroke="#F4F6F7" stroke-width=".752" rx="4.134"/></g><path fill="#F5F7F9" d="M9 64.5C9 62.2909 10.7909 60.5 13 60.5H109C111.209 60.5 113 62.2909 113 64.5V87.5H9V64.5Z"/><path stroke="#EAECF0" d="M61 60.5V127"/><rect width="12" height="12" x="55" y="80.5" fill="#235AE3" rx="6"/><rect width="4" height="4" x="59" y="84.5" fill="#C8D6F8" rx="2"/><rect width="2" height="2" x="60" y="85.5" fill="#fff" rx="1"/><rect width="32.107" height="4" x="25" y="8.5" fill="#AAB8C5" rx="1.503"/><rect width="51.6" height="4" x="25" y="15.5" fill="#D7DDE2" rx="1.503"/><rect width="72" height="4" x="25" y="29.5" fill="#D7DDE2" rx="1.503"/><rect width="72" height="4" x="25" y="37.5" fill="#D7DDE2" rx="1.503"/><rect width="72" height="4" x="25" y="45.5" fill="#D7DDE2" rx="1.503"/><rect width="72" height="4" x="25" y="53.5" fill="#D7DDE2" rx="1.503"/><g filter="url(#filter2_f_644_13029)"><circle cx="106.5" cy="20" r="8.5" fill="#F6D789"/><path fill="#fff" d="M109.91 23.8141H103.09C103.037 23.8141 102.984 23.8028 102.935 23.781C102.886 23.7591 102.842 23.7272 102.806 23.6873C102.771 23.6475 102.744 23.6005 102.727 23.5495C102.711 23.4985 102.705 23.4446 102.711 23.3914C102.815 22.4589 103.258 21.5974 103.957 20.9717C104.657 20.346 105.562 20 106.5 20C107.438 20 108.343 20.346 109.043 20.9717C109.742 21.5974 110.185 22.4589 110.289 23.3914C110.295 23.4446 110.289 23.4985 110.273 23.5495C110.256 23.6005 110.229 23.6475 110.194 23.6873C110.158 23.7272 110.114 23.7591 110.065 23.781C110.016 23.8028 109.963 23.8141 109.91 23.8141Z"/><path fill="#fff" d="M106.77 22.4054L108.565 20.6072C107.949 20.2105 107.232 19.9998 106.499 20C105.766 20.0002 105.049 20.2115 104.433 20.6085L106.23 22.4056C106.302 22.4771 106.399 22.5173 106.5 22.5174H106.5C106.601 22.5173 106.698 22.477 106.77 22.4054Z"/><path fill="#fff" d="M106.498 20.7628C106.046 20.7628 105.603 20.6286 105.227 20.3771C104.85 20.1256 104.557 19.7682 104.384 19.3501C104.211 18.9319 104.165 18.4718 104.254 18.0279C104.342 17.5839 104.56 17.1762 104.88 16.8561C105.2 16.5361 105.608 16.3181 106.052 16.2298C106.496 16.1415 106.956 16.1868 107.374 16.3601C107.792 16.5333 108.15 16.8266 108.401 17.2029C108.652 17.5792 108.787 18.0217 108.787 18.4743C108.786 19.081 108.545 19.6627 108.116 20.0918C107.687 20.5208 107.105 20.7621 106.498 20.7628Z"/><path fill="#fff" d="M104.246 18.8558C104.335 19.3889 104.611 19.873 105.024 20.2221C105.436 20.5712 105.959 20.7628 106.5 20.7628C107.041 20.7628 107.564 20.5712 107.976 20.2221C108.389 19.873 108.665 19.3889 108.754 18.8558H104.246Z"/></g><g filter="url(#filter3_d_644_13029)"><path fill="#fff" d="M39.2355 35.8645C38.9692 35.6491 38.6581 35.4962 38.325 35.4168C37.9918 35.3375 37.6452 35.3339 37.3105 35.4062C34.8617 35.9194 32.3337 35.9259 29.8823 35.4254C27.4309 34.9248 25.1079 33.9278 23.0563 32.4957C22.6727 32.2296 22.2169 32.087 21.75 32.087C21.2831 32.087 20.8274 32.2296 20.4438 32.4957C18.3922 33.9278 16.0692 34.9248 13.6177 35.4254C11.1663 35.9259 8.63841 35.9194 6.18962 35.4062C5.85489 35.3339 5.50822 35.3375 5.1751 35.4168C4.84197 35.4962 4.53085 35.6491 4.26462 35.8645C3.99874 36.0802 3.78456 36.3527 3.63783 36.662C3.4911 36.9714 3.41554 37.3096 3.4167 37.652V54.7249C3.41466 58.0106 4.19764 61.2492 5.70043 64.1711C7.20321 67.0929 9.38232 69.6135 12.0563 71.5228L20.4209 77.4812C20.809 77.7575 21.2736 77.906 21.75 77.906C22.2265 77.906 22.6911 77.7575 23.0792 77.4812L31.4438 71.5228C34.1177 69.6135 36.2969 67.0929 37.7996 64.1711C39.3024 61.2492 40.0854 58.0106 40.0834 54.7249V37.652C40.0845 37.3096 40.009 36.9714 39.8622 36.662C39.7155 36.3527 39.5013 36.0802 39.2355 35.8645Z"/></g><path fill="#5AC571" d="M34.8002 62.7084C36.0729 60.2324 36.7359 57.4883 36.734 54.7044V38.9713C31.4985 39.4194 26.2551 38.2047 21.75 35.5C17.245 38.2047 12.0016 39.4194 6.76612 38.9713V54.7044C6.7642 57.4883 7.42719 60.2324 8.69992 62.7084C10.3004 65.5592 11.4661 66.9373 14.0833 68.9391L21.75 74.4083L29.4168 68.9391C32.1196 66.7259 33.2884 65.3445 34.8002 62.7084Z"/><path fill="#fff" d="M29.6571 48.8529C29.2 48.3824 28.5143 48.3824 28.0571 48.8529L19.4857 57.6765L15.9429 54.0294C15.4857 53.5588 14.8 53.5588 14.3429 54.0294C13.8857 54.5 13.8857 55.2059 14.3429 55.6765L18.6857 60.1471C18.9143 60.3824 19.1429 60.5 19.4857 60.5C19.8286 60.5 20.0571 60.3824 20.2857 60.1471L29.6571 50.5C30.1143 50.0294 30.1143 49.3235 29.6571 48.8529Z"/></g><defs><filter id="filter0_f_644_13029" width="23" height="23" x="-2" y=".5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_644_13029" stdDeviation="1.5"/></filter><filter id="filter1_d_644_13029" width="110" height="90" x="6" y="-3.5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feMorphology in="SourceAlpha" operator="erode" radius="5" result="effect1_dropShadow_644_13029"/><feOffset dy="8"/><feGaussianBlur stdDeviation="8.5"/><feColorMatrix type="matrix" values="0 0 0 0 0.568627 0 0 0 0 0.592157 0 0 0 0 0.639216 0 0 0 0.5 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_644_13029"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_644_13029" mode="normal" result="shape"/></filter><filter id="filter2_f_644_13029" width="19" height="19" x="97" y="10.5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_644_13029" stdDeviation=".5"/></filter><filter id="filter3_d_644_13029" width="48.667" height="57.819" x="-2.583" y="28.087" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2"/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="0 0 0 0 0.155625 0 0 0 0 0.273375 0 0 0 0 0.45 0 0 0 0.21 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_644_13029"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_644_13029" mode="normal" result="shape"/></filter><linearGradient id="paint0_linear_644_13029" x1="60.5" x2="60.5" y1="6.5" y2="127.5" gradientUnits="userSpaceOnUse"><stop stop-color="#BCCEDF"/><stop offset="1" stop-color="#2869A5"/></linearGradient><radialGradient id="paint1_radial_644_13029" cx="0" cy="0" r="1" gradientTransform="translate(61 77) rotate(160.229) scale(115.296 89.4837)" gradientUnits="userSpaceOnUse"><stop offset=".418" stop-color="#C4C4C4" stop-opacity="0"/><stop offset="1" stop-color="#C4C4C4"/></radialGradient><radialGradient id="paint2_radial_644_13029" cx="0" cy="0" r="1" gradientTransform="translate(61 77) rotate(19.7708) scale(115.296 89.4837)" gradientUnits="userSpaceOnUse"><stop offset=".418" stop-color="#C4C4C4" stop-opacity="0"/><stop offset="1" stop-color="#C4C4C4"/></radialGradient><clipPath id="clip0_644_13029"><rect width="121" height="127" fill="#fff" transform="translate(0 0.5)"/></clipPath><clipPath id="clip1_644_13029"><rect width="121" height="121" y="6.5" fill="#fff" rx="60.124"/></clipPath></defs></svg>

package/dist/components/chart/Chart.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="chart"
+    data-testid="chart"
+    :class="classNames">
+    <slot />
+    <canvas
+      ref="canvas"
+      data-testid="chart-canvas"
+      class="chart__canvas" />
+  </div>
+</template>
+
+<script>
+import { templateRef, watchPausable } from "@vueuse/core";
+import {
+  defineComponent,
+  onMounted,
+  watch,
+  shallowRef,
+  onBeforeUnmount,
+  toRef,
+  computed,
+  nextTick
+} from "vue-demi";
+import getAdapter from "./adapter/index";
+import { createChart } from "./use-chart";
+export default defineComponent({
+  props: {
+    variant: {
+      type: String,
+      default: "line"
+    },
+    legend: {
+      type: String,
+      default: "bottom"
+    }
+  },
+  setup(props, { slots }) {
+    const instance = shallowRef();
+    const canvas = templateRef("canvas");
+    const variant = toRef(props, "variant");
+    const legend = toRef(props, "legend");
+    const classNames = computed(() => {
+      const result = [];
+      if (props.variant)
+        result.push(`chart--${props.variant}`);
+      if (props.legend)
+        result.push(`chart--${props.legend}`);
+      return result;
+    });
+    const data = computed(() => {
+      return getAdapter(variant.value).getDatasets(slots.default());
+    });
+    async function initChart() {
+      if (instance.value)
+        instance.value.destroy();
+      instance.value = await createChart(
+        canvas.value,
+        variant.value,
+        data.value,
+        {
+          plugins: {
+            legend: {
+              display: legend.value !== "none",
+              position: legend.value !== "none" ? legend.value : void 0,
+              labels: {
+                color: "#9CA3AF",
+                font: {
+                  family: "DM Sans",
+                  size: 12,
+                  weight: "600"
+                }
+              }
+            }
+          },
+          ...getAdapter(variant.value).getStyle()
+        }
+      );
+    }
+    const dataWatcher = watchPausable(data, (newData) => {
+      if (instance.value) {
+        instance.value.data = newData;
+        instance.value.update();
+      }
+    });
+    watch([variant, legend], async () => {
+      dataWatcher.pause();
+      await initChart();
+      await nextTick();
+      dataWatcher.resume();
+    }, { flush: "pre" });
+    onMounted(() => {
+      initChart();
+    });
+    onBeforeUnmount(() => {
+      if (instance.value)
+        instance.value.destroy();
+    });
+    return { canvas, classNames };
+  }
+});
+</script>
+
+<style lang="postcss">
+.chart {
+  @apply w-full aspect-video bg-white;
+}
+</style>

package/dist/components/chart/Chart.vue.d.ts

@@ -0,0 +1,30 @@
+import type { LayoutPosition } from 'chart.js/auto';
+import { PropType } from 'vue-demi';
+import { ChartType } from './adapter/index';
+export declare type LegendPosition = 'none' | LayoutPosition;
+declare const _default: import("vue-demi").DefineComponent<{
+    variant: {
+        type: PropType<ChartType>;
+        default: string;
+    };
+    legend: {
+        type: PropType<LegendPosition>;
+        default: string;
+    };
+}, {
+    canvas: Readonly<import("vue-demi").Ref<HTMLCanvasElement>>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<ChartType>;
+        default: string;
+    };
+    legend: {
+        type: PropType<LegendPosition>;
+        default: string;
+    };
+}>>, {
+    variant: ChartType;
+    legend: LegendPosition;
+}>;
+export default _default;

package/dist/components/chart/ChartSet.vue

@@ -0,0 +1,16 @@
+<template>
+  <slot />
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+export default defineComponent({
+  name: "ChartSet",
+  props: {
+    name: {
+      type: [String, Number],
+      required: true
+    }
+  }
+});
+</script>

package/dist/components/chart/ChartSet.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    name: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+}, unknown, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    name: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/dist/components/chart/ChartVal.vue

@@ -0,0 +1,24 @@
+<template>
+  <slot />
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+export default defineComponent({
+  name: "ChartVal",
+  props: {
+    name: {
+      type: [String, Number],
+      required: true
+    },
+    value: {
+      type: [String, Number],
+      required: true
+    },
+    color: {
+      type: String,
+      default: void 0
+    }
+  }
+});
+</script>

package/dist/components/chart/ChartVal.vue.d.ts

@@ -0,0 +1,30 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    name: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    color: {
+        type: StringConstructor;
+        default: any;
+    };
+}, unknown, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    name: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    color: {
+        type: StringConstructor;
+        default: any;
+    };
+}>>, {
+    color: string;
+}>;
+export default _default;

package/dist/components/chart/adapter/adapter.d.ts

@@ -0,0 +1,7 @@
+import type { ChartData, ChartOptions } from 'chart.js/auto';
+import { VNode } from 'vue-demi';
+export interface ChartAdapter {
+    getStyle: () => ChartOptions;
+    getDatasets: (vnodes: VNode[]) => ChartData;
+}
+export declare function defineAdapter(adapter: ChartAdapter): ChartAdapter;