@privyid/persona 0.8.0 → 0.10.0

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,86 @@
+<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;
+    }
+
+    & > 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>;
+}, 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,65 @@
+<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;
+    }
+  }
+
+  &&--active {
+    .dropdown__activator {
+      @apply text-default;
+
+      & > .dropdown__caret {
+        @apply text-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 declare 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;
+}

package/dist/components/button/Button.vue

@@ -1,9 +1,11 @@
 <template>
-  <button
+  <component
+    :is="tagName"
+    :href="href"
     data-testid="btn"
     :class="classNames">
     <slot />
-  </button>
+  </component>
 </template>
 
 <script>
@@ -32,6 +34,10 @@ export default defineComponent({
     pill: {
       type: Boolean,
       default: false
+    },
+    href: {
+      type: String,
+      default: void 0
     }
   },
   setup(props) {
@@ -49,7 +55,13 @@ export default defineComponent({
         result.push("btn--pill");
       return result;
     });
-    return { classNames };
+    const tagName = computed(() => {
+      let tag = "button";
+      if (props.href)
+        tag = "a";
+      return tag;
+    });
+    return { classNames, tagName };
   }
 });
 </script>
@@ -77,16 +89,20 @@ export default defineComponent({
     @apply self-center;
   }
 
+  > * {
+    @apply relative z-[2];
+  }
+
   /*
   * Button has 4 different sizing
   * eg: xs, sm, md, and lg
   */
   &&--xs {
-    @apply px-2 py-[2px] gap-1 text-sm rounded-[6px];
+    @apply px-2 py-[2px] gap-1 text-sm rounded-xs;
   }
 
   &&--sm {
-    @apply px-4 py-1 gap-2 text-base tracking-wider rounded-[7px];
+    @apply px-4 py-1 gap-2 text-base tracking-wider rounded-sm;
   }
 
   &&--md {
@@ -106,7 +122,7 @@ export default defineComponent({
 
     &.btn {
       &--default {
-        @apply bg-default-alpha hover:bg-subtle-alpha focus:bg-subtle-alpha active:bg-subtle-alpha text-subtle hover:text-default focus:text-default;
+        @apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha text-subtle hover:text-default focus:text-default;
       }
 
       &--primary {

package/dist/components/button/Button.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { ColorVariant, SizeVariant, StyleVariant } from '.';
+import { ColorVariant, SizeVariant, StyleVariant, TagVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;
@@ -21,8 +21,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    href: {
+        type: StringConstructor;
+        default: any;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
+    tagName: import("vue-demi").ComputedRef<TagVariant>;
 }, 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<StyleVariant>;
@@ -44,11 +49,16 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    href: {
+        type: StringConstructor;
+        default: any;
+    };
 }>>, {
     icon: boolean;
     variant: StyleVariant;
     size: SizeVariant;
     color: ColorVariant;
+    href: string;
     pill: boolean;
 }>;
 export default _default;

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

@@ -1,3 +1,4 @@
 export declare type StyleVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'input';
 export declare type ColorVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger';
 export declare type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
+export declare type TagVariant = 'a' | 'button';

package/dist/components/button-group/ButtonGroup.vue

@@ -127,11 +127,11 @@ export default defineComponent({
         @apply px-2 py-[2px] gap-1 text-sm;
 
         &:first-child {
-          @apply rounded-l-[6px];
+          @apply rounded-l-xs;
         }
 
         &:last-child {
-          @apply rounded-r-[6px];
+          @apply rounded-r-xs;
         }
       }
 
@@ -148,11 +148,11 @@ export default defineComponent({
         @apply px-4 py-1 gap-2 text-base;
 
         &:first-child {
-          @apply rounded-l-[7px];
+          @apply rounded-l-sm;
         }
 
         &:last-child {
-          @apply rounded-r-[7px];
+          @apply rounded-r-sm;
         }
       }
 

package/dist/components/camera/Camera.vue

@@ -376,7 +376,7 @@ export default defineComponent({
     @apply absolute bottom-20 left-0 right-0 text-center text-on-emphasis px-4;
 
     &-text {
-      @apply bg-emphasis bg-opacity-80 px-4 py-1 text-sm rounded shadow-md inline-block max-w-full truncate;
+      @apply bg-emphasis/80 px-4 py-1 text-sm rounded shadow-md inline-block max-w-full truncate;
     }
   }
 }

package/dist/components/card/Card.vue

@@ -203,7 +203,7 @@ export default defineComponent({
   * Card Callout is enable
   */
   &&--callout {
-    @apply shadow;
+    @apply shadow-sm;
   }
 
   &__header {

package/dist/components/checkbox/Checkbox.vue

@@ -152,7 +152,7 @@ export default defineComponent({
   * with custom icon
   */
   &__icon {
-    @apply w-5 h-5 border rounded-sm border-subtle inline-flex items-center justify-center bg-default;
+    @apply w-5 h-5 border rounded-tn border-subtle inline-flex items-center justify-center bg-default;
 
     > svg {
       @apply w-3 fill-default;

package/dist/components/divider/Divider.vue

@@ -30,7 +30,11 @@ export default defineComponent({
 
 <style lang="postcss">
 .divider {
-  @apply bg-subtle-alpha my-2 w-[1px];
+  @apply bg-subtle-alpha my-2;
+
+  &&--horizontal {
+    @apply w-full h-[1px];
+  }
 
   &&--vertical,
   .input-group > & {

package/dist/components/dropdown/Dropdown.vue

@@ -38,7 +38,7 @@
         class="dropdown__menu">
         <DropdownGroup
           ref="wizard"
-          class="dropdown__menu-container">
+          class="dropdown__menu__container">
           <slot />
         </DropdownGroup>
       </div>
@@ -251,16 +251,16 @@ export default defineComponent({
   &__menu {
     @apply max-h-64 border rounded w-full min-w-[15rem] bg-default z-10 border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
 
-    &-container {
+    &__container {
       > .dropdown__item {
         &:first-child,
         .dropdown__subitem:first-child & {
-          @apply rounded-t-[7px];
+          @apply rounded-t-sm;
         }
 
         &:last-child,
         .dropdown__subitem:last-child & {
-          @apply rounded-b-[7px];
+          @apply rounded-b-sm;
         }
       }
     }
@@ -273,7 +273,7 @@ export default defineComponent({
   &&--divider {
     .dropdown {
       &__menu {
-        :where(.checkbox, .radio) {
+        :where(.checkbox, .radio, .dropdown__item) {
           @apply border-b border-solid border-b-subtle-alpha last:border-b-0;
         }
       }

package/dist/components/dropdown/Dropdown.vue.d.ts

@@ -106,10 +106,10 @@ declare const _default: import("vue-demi").DefineComponent<{
     variant: StyleVariant;
     size: SizeVariant;
     color: ColorVariant;
+    text: string;
     pill: boolean;
     disabled: boolean;
     modelValue: boolean;
-    text: string;
     divider: boolean;
     placement: Placement;
     noCaret: boolean;

package/dist/components/dropdown/DropdownItem.vue

@@ -1,22 +1,37 @@
 <template>
-  <button
+  <component
+    :is="tagName"
     data-testid="dropdown-item"
     class="dropdown__item"
+    :class="classNames"
+    :href="href"
     @click="handleOnClick">
     <slot>
       {{ text }}
     </slot>
-  </button>
+  </component>
 </template>
 
 <script>
-import { defineComponent, inject } from "vue-demi";
+import {
+  defineComponent,
+  inject,
+  computed
+} from "vue-demi";
 import { DROPDOWN_CONTEXT } from ".";
 export default defineComponent({
   props: {
     text: {
       type: String,
       default: ""
+    },
+    href: {
+      type: String,
+      default: void 0
+    },
+    active: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["click"],
@@ -24,21 +39,45 @@ export default defineComponent({
     const context = inject(DROPDOWN_CONTEXT, void 0, true);
     function handleOnClick(event) {
       emit("click", event);
-      if (context?.close && !event.defaultPrevented)
+      if (context?.close && !event.defaultPrevented || event.defaultPrevented && props.href)
         context.close();
     }
-    return { handleOnClick };
+    const classNames = computed(() => {
+      const result = [""];
+      if (props.active)
+        result.push("dropdown__item--active");
+      return result;
+    });
+    const tagName = computed(() => {
+      let tag = "button";
+      if (props.href)
+        tag = "a";
+      return tag;
+    });
+    return {
+      handleOnClick,
+      classNames,
+      tagName
+    };
   }
 });
 </script>
 
 <style lang="postcss">
 .dropdown__item {
-  @apply px-3 py-2 cursor-pointer text-default w-full select-none text-left;
+  @apply px-4 py-2 block cursor-pointer text-default w-full select-none text-left;
+
+  &:is(a) {
+    @apply hover:text-default;
+  }
 
   &:hover,
   &:focus-visible {
     @apply bg-default-alpha;
   }
+
+  &&--active {
+    @apply bg-default-alpha cursor-default;
+  }
 }
 </style>