@privyid/persona 0.9.0 → 0.11.0

package/dist/components/avatar/Avatar.vue

@@ -116,6 +116,7 @@ export default defineComponent({
 <style lang="postcss">
 .avatar {
   @apply rounded-full inline-flex items-center justify-center overflow-hidden text-subtle bg-subtle;
+  @apply dark:text-dark-subtle dark:bg-dark-subtle;
 
   &__image {
     @apply w-full h-full object-cover;

package/dist/components/avatar/Avatar.vue.d.ts

@@ -3,11 +3,11 @@ import { TypeVariant, SizeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<TypeVariant>;
-        default: any;
+        default: undefined;
     };
     src: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     fallbackSrc: {
         type: StringConstructor;
@@ -15,15 +15,15 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     name: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     size: {
         type: PropType<SizeVariant>;
         default: string;
     };
     imgClass: {
-        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
-        default: any;
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
@@ -32,11 +32,11 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("imgloaded" | "imgerror")[], "imgloaded" | "imgerror", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<TypeVariant>;
-        default: any;
+        default: undefined;
     };
     src: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     fallbackSrc: {
         type: StringConstructor;
@@ -44,23 +44,23 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     name: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     size: {
         type: PropType<SizeVariant>;
         default: string;
     };
     imgClass: {
-        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
-        default: any;
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
     };
 }>> & {
-    onImgloaded?: (...args: any[]) => any;
-    onImgerror?: (...args: any[]) => any;
+    onImgloaded?: ((...args: any[]) => any) | undefined;
+    onImgerror?: ((...args: any[]) => any) | undefined;
 }, {
-    src: string;
     name: string;
     variant: TypeVariant;
+    src: string;
     fallbackSrc: string;
     size: SizeVariant;
     imgClass: string | unknown[] | Record<string, any>;

package/dist/components/avatar/index.d.ts

@@ -1,2 +1,2 @@
-export declare type TypeVariant = 'image' | 'alias';
-export declare type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TypeVariant = 'image' | 'alias';
+export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/badge/Badge.vue

@@ -48,7 +48,10 @@ export default defineComponent({
   * Set global style
   * of badge
   */
-  @apply inline-block font-bold text-xs px-2 py-0.5 text-on-emphasis rounded-full;
+  --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;
 
   /**
   * Provide colors variant
@@ -59,23 +62,35 @@ export default defineComponent({
   &&--variant-default {
     &.badge {
       &--default {
-        @apply bg-emphasis-subtle;
+        --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;
       }
 
       &--primary {
-        @apply bg-accent-emphasis;
+        @apply bg-brand-accent;
+        @apply dark:bg-dark-brand-accent;
+      }
+
+      &--info {
+        @apply bg-info-emphasis;
+        @apply dark:bg-dark-info-emphasis;
       }
 
       &--success {
         @apply bg-success-emphasis;
+        @apply dark:bg-dark-success-emphasis;
       }
 
       &--warning {
         @apply bg-warning-emphasis;
+        @apply dark:bg-dark-warning-emphasis;
       }
 
       &--danger {
         @apply bg-danger-emphasis;
+        @apply dark:bg-dark-danger-emphasis;
       }
     }
   }
@@ -88,23 +103,35 @@ export default defineComponent({
   &&--variant-inverse {
     &.badge {
       &--default {
-        @apply text-subtle;
+        --p-color-variant-inverse: theme(textColor.subtle);
+        --p-color-dark-variant-inverse: theme(textColor.dark.subtle);
+        @apply text-[color:var(--p-color-variant-inverse)];
+        @apply dark:text-[color:var(--p-color-dark-variant-inverse)];
       }
 
       &--primary {
-        @apply text-accent;
+        @apply text-brand-accent;
+        @apply dark:text-dark-brand-accent;
+      }
+
+      &--info {
+        @apply text-info;
+        @apply dark:text-dark-info;
       }
 
       &--success {
         @apply text-success;
+        @apply dark:text-dark-success;
       }
 
       &--warning {
         @apply text-warning;
+        @apply dark:text-dark-warning;
       }
 
       &--danger {
         @apply text-danger;
+        @apply dark:text-dark-danger;
       }
     }
   }
@@ -115,24 +142,36 @@ export default defineComponent({
   */
   &--variant-light {
     &.badge {
+      &--default {
+        --p-bg-variant-light: theme(backgroundColor.subtle.alpha);
+        --p-bg-dark-variant-light: theme(backgroundColor.dark.subtle.alpha);
+        @apply bg-[color:var(--p-bg-variant-light)];
+        @apply dark:bg-[color:var(--p-bg-dark-variant-light)];
+      }
+
       &--primary {
-        @apply bg-accent;
+        @apply bg-[color:var(--p-color-primary-light)];
+        @apply dark:bg-[color:var(--p-color-dark-primary-light)];
       }
 
-      &--default {
-        @apply bg-base-black/5;
+      &--info {
+        @apply bg-info;
+        @apply dark:bg-dark-info;
       }
 
       &--success {
         @apply bg-success;
+        @apply dark:bg-dark-success;
       }
 
       &--warning {
         @apply bg-warning;
+        @apply dark:bg-dark-warning;
       }
 
       &--danger {
         @apply bg-danger;
+        @apply dark:bg-dark-danger;
       }
     }
   }
@@ -143,6 +182,7 @@ export default defineComponent({
   */
   &:where(.badge--variant-inverse, .badge--dot) {
     @apply bg-default;
+    @apply dark:bg-dark-default;
   }
 
   /**

package/dist/components/badge/Badge.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
-import { ColorVariant, StyleVariant } from '.';
+import { StyleVariant } from '.';
+import { ColorVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     color: {
         type: PropType<ColorVariant>;

package/dist/components/badge/index.d.ts

@@ -1,2 +1 @@
-export declare type ColorVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger';
-export declare type StyleVariant = 'default' | 'light' | 'inverse';
+export type StyleVariant = 'default' | 'light' | 'inverse';

package/dist/components/banner/Banner.vue

@@ -3,10 +3,15 @@
     v-if="show"
     data-testid="banner"
     :class="classNames">
-    <div class="banner__icon">
-      <component
-        :is="icon"
-        v-if="icon" />
+    <div
+      class="banner__icon"
+      data-testid="banner-icon"
+      :class="{ 'banner__icon--custom' : $slots.icon }">
+      <slot name="icon">
+        <component
+          :is="icon"
+          v-if="icon" />
+      </slot>
     </div>
     <div class="banner__body">
       <slot :close="close" />
@@ -79,10 +84,12 @@ export default defineComponent({
 <style lang="postcss">
 .banner {
   @apply p-4 flex space-x-2 rounded text-subtle;
+  @apply dark:text-dark-subtle;
 
   a {
     &:not(.btn) {
-      @apply underline decoration-solid text-accent;
+      @apply underline decoration-solid text-info;
+      @apply dark:text-dark-info;
     }
   }
 
@@ -95,18 +102,22 @@ export default defineComponent({
   }
 
   &&--info {
-    @apply bg-subtle;
+    @apply bg-base;
+    @apply dark:bg-dark-base;
 
     .banner__icon {
-      @apply text-accent;
+      @apply text-info;
+      @apply dark:text-dark-info;
     }
   }
 
   &&--danger {
     @apply bg-danger;
+    @apply dark:bg-dark-danger;
 
     .banner__icon {
       @apply text-danger;
+      @apply dark:text-dark-danger;
     }
   }
 
@@ -121,6 +132,7 @@ export default defineComponent({
 
   &__close {
     @apply cursor-pointer text-default/30 hover:text-default/50;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
   }
 }
 </style>

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

@@ -24,7 +24,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onDismissed?: (...args: any[]) => any;
+    onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
     dismissable: boolean;

package/dist/components/banner/index.d.ts

@@ -1 +1 @@
-export declare type StyleVariant = 'info' | 'danger';
+export type StyleVariant = 'info' | 'danger';

package/dist/components/breadcrumbs/Breadcrumb.vue

@@ -0,0 +1,60 @@
+<template>
+  <ul
+    class="breadcrumbs"
+    data-testid="breadcrumbs">
+    <slot>
+      <template
+        v-for="(item, id) in items"
+        :key="id">
+        <BreadcrumbItemDropdown
+          v-if="item.subitem"
+          :text="item.text"
+          :active="item.active"
+          :href="item.href">
+          <template
+            v-for="(subitem, idx) in item.subitem"
+            :key="idx">
+            <DropdownItem
+              :active="subitem.active"
+              :href="subitem.href">
+              {{ subitem.text }}
+            </DropdownItem>
+          </template>
+        </BreadcrumbItemDropdown>
+        <BreadcrumbItem
+          v-else
+          :active="item.active"
+          :href="item.href">
+          {{ item.text }}
+        </BreadcrumbItem>
+      </template>
+    </slot>
+  </ul>
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+import BreadcrumbItem from "./BreadcrumbItem.vue";
+import BreadcrumbItemDropdown from "./BreadcrumbItemDropdown.vue";
+import DropdownItem from "../dropdown/DropdownItem.vue";
+export default defineComponent({
+  components: {
+    BreadcrumbItem,
+    BreadcrumbItemDropdown,
+    DropdownItem
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => {
+      }
+    }
+  }
+});
+</script>
+
+<style lang="postcss">
+.breadcrumbs {
+  @apply flex space-x-3 items-center;
+}
+</style>

package/dist/components/breadcrumbs/Breadcrumb.vue.d.ts

@@ -0,0 +1,41 @@
+import { BreadcrumbItems } from '.';
+declare const _default: import("vue-demi").DefineComponent<{
+    items: {
+        type: {
+            (arrayLength: number): BreadcrumbItems[];
+            (...items: BreadcrumbItems[]): BreadcrumbItems[];
+            new (arrayLength: number): BreadcrumbItems[];
+            new (...items: BreadcrumbItems[]): BreadcrumbItems[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => void;
+    };
+}, 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<{
+    items: {
+        type: {
+            (arrayLength: number): BreadcrumbItems[];
+            (...items: BreadcrumbItems[]): BreadcrumbItems[];
+            new (arrayLength: number): BreadcrumbItems[];
+            new (...items: BreadcrumbItems[]): BreadcrumbItems[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => void;
+    };
+}>>, {
+    items: BreadcrumbItems[];
+}>;
+export default _default;

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -0,0 +1,87 @@
+<template>
+  <li
+    data-testid="breadcrumbs-item"
+    class="breadcrumbs__item"
+    :class="classNames">
+    <component
+      :is="tagName"
+      :href="permalink">
+      <slot />
+    </component>
+    <IconChevron
+      v-if="!active"
+      data-testid="breadcrumbs-icon"
+      class="breadcrumbs__item__icon" />
+  </li>
+</template>
+
+<script>
+import { defineComponent, computed } from "vue-demi";
+import IconChevron from "@carbon/icons-vue/lib/chevron--right/16";
+export default defineComponent({
+  components: { IconChevron },
+  props: {
+    href: {
+      type: String,
+      default: "#"
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = [""];
+      if (props.active)
+        result.push("breadcrumbs__item--active");
+      return result;
+    });
+    const tagName = computed(() => {
+      let tag = "a";
+      if (props.active)
+        tag = "span";
+      return tag;
+    });
+    const permalink = computed(() => {
+      if (props.active)
+        return;
+      return props.href;
+    });
+    return {
+      classNames,
+      tagName,
+      permalink
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.breadcrumbs {
+  &__item {
+    @apply inline-flex text-sm items-center;
+
+    &:last-child {
+      & > .breadcrumbs__item__icon {
+        @apply hidden;
+      }
+    }
+
+    &:not(:last-child) {
+      & > .breadcrumbs__item__icon {
+        @apply inline-flex ml-3;
+      }
+    }
+
+    & > a {
+      @apply text-subtle cursor-pointer underline decoration-solid hover:no-underline;
+      @apply dark:text-dark-subtle;
+    }
+
+    & > span {
+      @apply font-bold cursor-default;
+    }
+  }
+}
+</style>

package/dist/components/breadcrumbs/BreadcrumbItem.vue.d.ts

@@ -0,0 +1,28 @@
+import { TagVariant } from '.';
+declare const _default: import("vue-demi").DefineComponent<{
+    href: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    tagName: import("vue-demi").ComputedRef<TagVariant>;
+    permalink: import("vue-demi").ComputedRef<string | undefined>;
+}, 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<{
+    href: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    href: string;
+    active: boolean;
+}>;
+export default _default;

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -0,0 +1,68 @@
+<template>
+  <li
+    data-testid="breadcrumbs-dropdown"
+    class="breadcrumbs__item"
+    :class="classNames">
+    <Dropdown
+      :text="text"
+      placement="bottom-end"
+      size="xs">
+      <slot />
+    </Dropdown>
+    <IconChevron
+      v-if="!active"
+      data-testid="breadcrumbs-icon"
+      class="breadcrumbs__item__icon" />
+  </li>
+</template>
+
+<script>
+import { defineComponent, computed } from "vue-demi";
+import Dropdown from "../dropdown/Dropdown.vue";
+import IconChevron from "@carbon/icons-vue/lib/chevron--right/16";
+export default defineComponent({
+  components: { Dropdown, IconChevron },
+  props: {
+    text: {
+      type: String,
+      default: ""
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = ["breadcrumbs__item--dropdown"];
+      if (props.active)
+        result.push("breadcrumbs__item--active");
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>
+
+<style lang="postcss">
+.breadcrumbs__item {
+  &&--dropdown {
+    .dropdown__activator {
+      @apply px-0 text-subtle bg-transparent border-transparent hover:shadow-none hover:border-transparent hover:bg-transparent focus:shadow-none focus:border-transparent focus:bg-transparent;
+      @apply dark:text-dark-subtle dark:bg-transparent dark:border-transparent hover:dark:border-transparent hover:dark:bg-transparent focus:dark:border-transparent focus:dark:bg-transparent;
+    }
+  }
+
+  &&--active {
+    .dropdown__activator {
+      @apply text-default;
+      @apply dark:text-dark-default;
+
+      & > .dropdown__caret {
+        @apply text-subtle;
+        @apply dark:text-dark-subtle;
+      }
+    }
+  }
+}
+</style>

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: {
+        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<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    active: boolean;
+    text: string;
+}>;
+export default _default;

package/dist/components/breadcrumbs/index.d.ts

@@ -0,0 +1,11 @@
+interface Breadcrumb {
+    text: string;
+    href?: string;
+    active?: boolean;
+}
+export interface BreadcrumbItems extends Breadcrumb {
+    subitem?: Breadcrumb[];
+}
+export type TagVariant = 'a' | 'span';
+export declare function defineNavigation(navigation: BreadcrumbItems[]): BreadcrumbItems[];
+export {};

package/dist/components/breadcrumbs/index.mjs

@@ -0,0 +1,3 @@
+export function defineNavigation(navigation) {
+  return navigation;
+}