@privyid/persona 0.21.0 → 0.22.0

package/dist/components/accordion/Accordion.vue

@@ -54,7 +54,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string],
+  'update:modelValue': [string],
 }>()
 
 const modelValue = useVModel(props, 'modelValue', emit, { passive: true })

package/dist/components/accordion/AccordionItem.vue

@@ -12,7 +12,7 @@
         class="accordion__item__activator"
         data-testid="accordion-item-activator"
         @click="toggle">
-        <Subheading>
+        <Subheading class="accordion__item__title">
           {{ title }}
         </Subheading>
         <slot
@@ -74,11 +74,11 @@ const props = defineProps({
     default: false,
   },
 })
-const emit  = defineEmits([
-  'update:modelValue',
-  'expand',
-  'collapse',
-])
+const emit  = defineEmits<{
+  'update:modelValue': [boolean],
+  'expand': [],
+  'collapse': [],
+}>()
 
 const model = useVModel(props, 'modelValue', emit, { passive: true })
 

package/dist/components/badge/Badge.vue

@@ -51,7 +51,17 @@ export default defineComponent({
   --p-color-primary-light: lighten(theme(colors.brand.accent), 40%);
   --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent), 40%);
 
-  @apply inline-block font-bold text-xs px-2 py-0.5 text-state-emphasis dark:text-dark-state-emphasis rounded-full;
+  @apply inline-block font-bold text-xs px-2 py-0.5 rounded-full space-x-1 align-middle;
+
+  > .persona-icon,
+  > svg {
+    @apply inline-block;
+  }
+
+  &:not(&--variant-default&--default) {
+    @apply text-state-emphasis;
+    @apply dark:text-dark-state-emphasis
+  }
 
   /**
   * Provide colors variant
@@ -64,8 +74,16 @@ export default defineComponent({
       &--default {
         --p-bg-variant-default: theme(backgroundColor.inverse);
         --p-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
-        @apply bg-[color:var(--p-bg-variant-default)];
-        @apply dark:bg-[color:var(--p-bg-dark-variant-default)] dark:text-dark-on-emphasis;
+
+        &:not([class^='bg-'], [class*='bg-']) {
+          @apply bg-[color:var(--p-bg-variant-default)];
+          @apply dark:bg-[color:var(--p-bg-dark-variant-default)];
+        }
+
+        &:not([class^='text-'], [class*='text-']) {
+          @apply text-state-emphasis;
+          @apply dark:text-dark-state-emphasis dark:text-dark-on-emphasis;
+        }
       }
 
       &--primary {

package/dist/components/banner/Banner.vue

@@ -4,6 +4,7 @@
     data-testid="banner"
     :class="classNames">
     <div
+      v-if="!noIcon"
       class="banner__icon"
       data-testid="banner-icon"
       :class="{ 'banner__icon--custom' : $slots.icon }">
@@ -53,6 +54,10 @@ export default defineComponent({
     dismissable: {
       type: Boolean,
       default: true
+    },
+    noIcon: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["dismissed"],

package/dist/components/banner/Banner.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    noIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
     show: import("vue-demi").Ref<boolean>;
@@ -23,10 +27,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    noIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
     dismissable: boolean;
+    noIcon: boolean;
 }, {}>;
 export default _default;

package/dist/components/button/Button.vue

@@ -116,10 +116,10 @@ const tagName = computed(() => {
 * Last Update   : Nov 21, 2022
 */
 .btn {
-  --p-color-primary-hover: darken(theme(colors.brand.accent), 5%);
-  --p-color-dark-primary-hover: darken(theme(colors.dark.brand.accent), 5%);
-  --p-color-primary-focus: darken(theme(colors.brand.accent), 10%);
-  --p-color-dark-primary-focus: darken(theme(colors.dark.brand.accent), 10%);
+  --p-color-primary-hover: darken(theme(colors.brand.action), 5%);
+  --p-color-dark-primary-hover: darken(theme(colors.dark.brand.action), 5%);
+  --p-color-primary-focus: darken(theme(colors.brand.action), 10%);
+  --p-color-dark-primary-focus: darken(theme(colors.dark.brand.action), 10%);
   --p-color-info-hover: darken(theme(backgroundColor.info.emphasis), 5%);
   --p-color-dark-info-hover: darken(theme(backgroundColor.dark.info.emphasis), 5%);
   --p-color-info-focus: darken(theme(backgroundColor.info.emphasis), 10%);
@@ -181,13 +181,13 @@ const tagName = computed(() => {
 
     &.btn {
       &--default {
-        @apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha text-subtle hover:text-default focus:text-default;
-        @apply dark:bg-dark-default-alpha focus:dark:bg-dark-subtle-alpha active:dark:bg-dark-subtle-alpha dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default;
+        @apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha hover:text-default focus:text-default;
+        @apply dark:bg-dark-default-alpha focus:dark:bg-dark-subtle-alpha active:dark:bg-dark-subtle-alpha hover:dark:text-dark-default focus:dark:text-dark-default;
       }
 
       &--primary {
-        @apply bg-brand-accent hover:bg-[color:var(--p-color-primary-hover)] focus:bg-[color:var(--p-color-primary-focus)] active:bg-[color:var(--p-color-primary-focus)];
-        @apply dark:bg-dark-brand-accent hover:dark:bg-[color:var(--p-color-dark-primary-hover)] focus:dark:bg-[color:var(--p-color-dark-primary-focus)] active:dark:bg-[color:var(--p-color-dark-primary-focus)];
+        @apply bg-brand-action hover:bg-[color:var(--p-color-primary-hover)] focus:bg-[color:var(--p-color-primary-focus)] active:bg-[color:var(--p-color-primary-focus)];
+        @apply dark:bg-dark-brand-action hover:dark:bg-[color:var(--p-color-dark-primary-hover)] focus:dark:bg-[color:var(--p-color-dark-primary-focus)] active:dark:bg-[color:var(--p-color-dark-primary-focus)];
       }
 
       &--info {
@@ -214,8 +214,8 @@ const tagName = computed(() => {
 
   &&--variant-outline,
   &&--variant-ghost {
-    @apply border border-solid text-subtle hover:text-default hover:shadow-lg focus:shadow-none active:shadow-none focus:text-default active:text-default;
-    @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
+    @apply border border-solid text-default hover:text-default hover:shadow-lg focus:shadow-none active:shadow-none focus:text-default active:text-default;
+    @apply dark:text-dark-default hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
   }
 
   /**
@@ -228,13 +228,13 @@ const tagName = computed(() => {
   &&--variant-outline {
     &.btn {
       &--default {
-        @apply border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
-        @apply dark:border-dark-default-alpha hover:dark:border-dark-subtle-alpha active:dark:border-dark-subtle-alpha focus:dark:border-dark-subtle-alpha;
+        @apply text-default border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
+        @apply dark:text-dark-default dark:border-dark-default-alpha hover:dark:border-dark-subtle-alpha active:dark:border-dark-subtle-alpha focus:dark:border-dark-subtle-alpha;
       }
 
       &--primary {
-        @apply border-brand-accent hover:border-[color:var(--p-color-primary-hover)] focus:border-[color:var(--p-color-primary-focus)] active:border-[color:var(--p-color-primary-focus)];
-        @apply dark:border-dark-brand-accent hover:dark:border-[color:var(--p-color-dark-primary-hover)] focus:dark:border-[color:var(--p-color-dark-primary-focus)] active:dark:border-[color:var(--p-color-dark-primary-focus)];
+        @apply border-brand-action hover:border-[color:var(--p-color-primary-hover)] focus:border-[color:var(--p-color-primary-focus)] active:border-[color:var(--p-color-primary-focus)];
+        @apply dark:border-dark-brand-action border-brand-action hover:dark:border-[color:var(--p-color-dark-primary-hover)] focus:dark:border-[color:var(--p-color-dark-primary-focus)] active:dark:border-[color:var(--p-color-dark-primary-focus)];
       }
 
       &--info {
@@ -276,13 +276,13 @@ const tagName = computed(() => {
 
     &.btn {
       &--default {
-        @apply text-subtle hover:text-default focus:text-default active:text-default ;
-        @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
+        @apply text-default hover:text-default focus:text-default active:text-default ;
+        @apply dark:text-dark-default hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
       }
 
       &--primary {
-        @apply text-brand-accent hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
-        @apply dark:text-dark-brand-accent hover:dark:text-[color:var(--p-color-dark-primary-hover)] focus:dark:text-[color:var(--p-color-dark-primary-focus)] active:dark:text-[color:var(--p-color-dark-primary-focus)];
+        @apply text-brand-action hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
+        @apply dark:text-dark-brand-action hover:dark:text-[color:var(--p-color-dark-primary-hover)] focus:dark:text-[color:var(--p-color-dark-primary-focus)] active:dark:text-[color:var(--p-color-dark-primary-focus)];
       }
 
       &--info {

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

@@ -1,5 +1,5 @@
 import { Ref } from 'vue-demi';
-import { Duration } from 'date-fns';
+import { type Duration } from 'date-fns';
 export interface CalendarItem {
     value: Date;
     text: string;
@@ -27,12 +27,5 @@ export interface CalendarAdapter {
 export declare const CalendarFormat: readonly ["date", "month", "year"];
 export type CalendarMode = typeof CalendarFormat[number];
 export declare function defineAdapter(adapter: CalendarAdapter): CalendarAdapter;
-/**
- * Format date using date-fns/format,
- * Automatically switch local following global lang setting.
- * @param date Date
- * @param formatStr date format
- */
-export declare function formatDate(date: Date, formatStr: string): string;
 export declare function validateDuration(duration?: string): boolean;
 export declare function parseDuration(duration?: string): Duration | undefined;

package/dist/components/calendar/adapter/adapter.mjs

@@ -1,11 +1,4 @@
-import {
-  format
-} from "date-fns";
-import id from "date-fns/locale/id/index";
-import en from "date-fns/locale/en-US/index";
-import { getLang } from "../../global/store.mjs";
 import { chunk } from "lodash-es";
-const localePacks = { en, id };
 export const CalendarFormat = [
   "date",
   "month",
@@ -14,9 +7,6 @@ export const CalendarFormat = [
 export function defineAdapter(adapter) {
   return adapter;
 }
-export function formatDate(date, formatStr) {
-  return format(date, formatStr, { locale: localePacks[getLang()] });
-}
 const DURATION_SUFFIX = {
   Y: "years",
   y: "years",

package/dist/components/calendar/adapter/date.mjs

@@ -13,9 +13,9 @@ import {
   isWithinInterval
 } from "date-fns";
 import {
-  defineAdapter,
-  formatDate
+  defineAdapter
 } from "./adapter.mjs";
+import { formatDate } from "../../utils/date.mjs";
 function getInterval(date) {
   const start = startOfWeek(startOfMonth(date), { weekStartsOn: 1 });
   const end = endOfWeek(endOfMonth(date), { weekStartsOn: 1 });

package/dist/components/calendar/adapter/month.mjs

@@ -10,9 +10,9 @@ import {
   subYears
 } from "date-fns";
 import {
-  defineAdapter,
-  formatDate
+  defineAdapter
 } from "./adapter.mjs";
+import { formatDate } from "../../utils/date.mjs";
 function getInterval(date) {
   const start = startOfYear(date);
   const end = endOfYear(date);

package/dist/components/card/CardSection.vue

@@ -13,6 +13,7 @@
       v-else-if="title"
       class="card__header card__header--default">
       <Subheading
+        class="card__header__title"
         weight="medium"
         overline>
         {{ title }}

package/dist/components/carousel/Carousel.vue.d.ts

@@ -17,11 +17,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     width: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     height: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     loop: {
@@ -33,7 +33,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     autoplayInterval: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     splideOptions: {
@@ -66,11 +66,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     width: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     height: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     loop: {
@@ -82,7 +82,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     autoplayInterval: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     splideOptions: {

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

@@ -1,11 +1,11 @@
 declare const _default: import("vue-demi").DefineComponent<{
     name: {
-        type: (NumberConstructor | StringConstructor)[];
+        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: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
 }>>, {}, {}>;

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

@@ -1,10 +1,10 @@
 declare const _default: import("vue-demi").DefineComponent<{
     name: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
     value: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
     color: {
@@ -13,11 +13,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, 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: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
     value: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
     color: {

package/dist/components/checkbox/Checkbox.vue

@@ -6,31 +6,8 @@
     @click.prevent="toggle">
     <span class="checkbox__icon">
       <!-- checked icon -->
-      <template v-if="indeterminate">
-        <svg
-          width="10"
-          height="10"
-          viewBox="0 0 14 2"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <rect
-            width="14"
-            height="2" />
-        </svg>
-      </template>
-      <template v-else>
-        <svg
-          width="10"
-          height="10"
-          viewBox="0 0 14 10"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M3.81581 8.48528L5.23002 9.8995L6.64423 8.48528L13.7153 1.41421L12.3011 0L5.23002 7.07107L1.69449 3.53553L0.280273 4.94975L3.81581 8.48528Z" />
-        </svg>
-      </template>
+      <icon-inderteminate v-if="indeterminate" />
+      <icon-checkbox v-else />
     </span>
     <span class="checkbox__label">
       <slot />
@@ -44,95 +21,104 @@
   </label>
 </template>
 
-<script>
-import { useVModel } from ".";
-import { computed, defineComponent } from "vue-demi";
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      default: void 0
-    },
-    modelValue: {
-      type: [
-        String,
-        Number,
-        Boolean,
-        Array,
-        Object,
-        Date
-      ],
-      default: false
-    },
-    value: {
-      type: [
-        String,
-        Number,
-        Boolean,
-        Array,
-        Object,
-        Date
-      ],
-      default: true
-    },
-    uncheckedValue: {
-      type: [
-        String,
-        Number,
-        Boolean,
-        Array,
-        Object,
-        Date
-      ],
-      default: false
-    },
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    indeterminate: {
-      type: Boolean,
-      default: false
-    }
-  },
+<script lang="ts" setup>
+import { useVModel } from '.'
+import { computed } from 'vue-demi'
+import IconCheckbox from './icon/IconCheckbox.vue'
+import IconInderteminate from './icon/IconInderteminate.vue'
+
+defineOptions({
   models: {
-    prop: "modelValue",
-    event: "update:modelValue"
+    prop : 'modelValue',
+    event: 'update:modelValue',
   },
-  emits: ["change", "update:modelValue"],
-  setup(props) {
-    const model = useVModel(props);
-    const classNames = computed(() => {
-      const result = [];
-      if (model.value)
-        result.push("checkbox--checked");
-      if (props.indeterminate)
-        result.push("checkbox--indeterminate");
-      if (props.disabled)
-        result.push("checkbox--disabled");
-      if (props.readonly)
-        result.push("checkbox--readonly");
-      return result;
-    });
-    function toggle() {
-      if (!props.readonly && !props.disabled)
-        model.value = !model.value;
-    }
-    return {
-      model,
-      classNames,
-      toggle
-    };
-  }
-});
+})
+
+const props = defineProps({
+  name: {
+    type   : String,
+    default: undefined,
+  },
+  modelValue: {
+    type: [
+      String,
+      Number,
+      Boolean,
+      Array,
+      Object,
+      Date,
+    ],
+    default: false,
+  },
+  value: {
+    type: [
+      String,
+      Number,
+      Boolean,
+      Array,
+      Object,
+      Date,
+    ],
+    default: true,
+  },
+  uncheckedValue: {
+    type: [
+      String,
+      Number,
+      Boolean,
+      Array,
+      Object,
+      Date,
+    ],
+    default: false,
+  },
+  checked: {
+    type   : Boolean,
+    default: false,
+  },
+  readonly: {
+    type   : Boolean,
+    default: false,
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+  indeterminate: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+defineEmits<{
+  'change': [boolean],
+  'update:modelValue': [unknown],
+}>()
+
+const model = useVModel(props)
+
+const classNames = computed(() => {
+  const result: string[] = []
+
+  if (model.value)
+    result.push('checkbox--checked')
+
+  if (props.indeterminate)
+    result.push('checkbox--indeterminate')
+
+  if (props.disabled)
+    result.push('checkbox--disabled')
+
+  if (props.readonly)
+    result.push('checkbox--readonly')
+
+  return result
+})
+
+function toggle () {
+  if (!props.readonly && !props.disabled)
+    model.value = !model.value
+}
 </script>
 
 <style lang="postcss">

package/dist/components/checkbox/icon/IconCheckbox.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 14 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.81581 8.48528L5.23002 9.8995L6.64423 8.48528L13.7153 1.41421L12.3011 0L5.23002 7.07107L1.69449 3.53553L0.280273 4.94975L3.81581 8.48528Z" />
+  </svg>
+</template>

package/dist/components/checkbox/icon/IconInderteminate.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 14 2"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect
+      width="14"
+      height="2" />
+  </svg>
+</template>