@privyid/persona 0.24.0 → 0.25.0

package/dist/components/accordion/Accordion.vue

@@ -19,8 +19,8 @@
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
 import { type AccordionItem, ACCORDION_CONTEXT } from '.'
+import type { PropType } from 'vue-demi'
 import {
-  PropType,
   computed,
   provide,
   readonly,

package/dist/components/aspect-ratio/index.d.ts

@@ -1,3 +1,3 @@
-import { Directive } from 'vue-demi';
+import type { Directive } from 'vue-demi';
 export declare const pAspectRatio: Directive<HTMLElement, number>;
 export declare const vPAspectRatio: import("vue-demi").ObjectDirective<HTMLElement, number>;

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

@@ -1,5 +1,5 @@
-import { PropType } from 'vue-demi';
-import { TypeVariant, SizeVariant } from '.';
+import type { PropType } from 'vue-demi';
+import type { TypeVariant, SizeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<TypeVariant>;

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { BreadcrumbItems } from '.';
+import type { BreadcrumbItems } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     items: {
         type: {

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

@@ -1,4 +1,4 @@
-import { TagVariant } from '.';
+import type { TagVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     href: {
         type: StringConstructor;

package/dist/components/button/Button.vue

@@ -6,19 +6,26 @@
     data-testid="btn"
     :class="classNames"
     :disabled="loading || disabled">
-    <spinner v-if="loading" />
+    <slot
+      v-if="loading"
+      name="loading">
+      <spinner />
+    </slot>
     <slot v-else />
   </component>
 </template>
 
 <script lang="ts" setup>
+import type {
+  PropType,
+  VNode,
+} from 'vue-demi'
 import {
   computed,
-  PropType,
   inject,
 } from 'vue-demi'
 import type { RouteLocationRaw } from 'vue-router'
-import {
+import type {
   ColorVariant,
   SizeVariant,
   StyleVariant,
@@ -106,6 +113,11 @@ const tagName = computed(() => {
     ? 'nuxt-link'
     : 'button'
 })
+
+defineSlots<{
+  loading(): VNode[],
+  default(): VNode[],
+}>()
 </script>
 
 <style lang="postcss">

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue-demi';
+import type { PropType } from 'vue-demi';
 import type { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     size: {

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

@@ -1,5 +1,5 @@
-import { InjectionKey, Ref } from 'vue-demi';
-import { SizeVariant } from '../button';
+import type { InjectionKey, Ref } from 'vue-demi';
+import type { SizeVariant } from '../button';
 export interface ButtonGroupSetting {
     size?: Ref<SizeVariant>;
 }

package/dist/components/calendar/Calendar.vue.d.ts

@@ -1,5 +1,5 @@
-import { PropType } from 'vue-demi';
-import { CalendarItem } from './adapter/adapter';
+import type { PropType } from 'vue-demi';
+import type { CalendarItem } from './adapter/adapter';
 type TransitionMode = 'slide-left' | 'slide-right' | 'zoom-in' | 'zoom-out';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {

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

@@ -1,4 +1,4 @@
-import { Ref } from 'vue-demi';
+import type { Ref } from 'vue-demi';
 import { type Duration } from 'date-fns';
 export interface CalendarItem {
     value: Date;

package/dist/components/camera/Camera.vue.d.ts

@@ -1,5 +1,5 @@
-import { ComputedRef, PropType } from 'vue-demi';
-import { Adapter, MaskVariant, ModelModifier } from './adapter/adapter';
+import type { ComputedRef, PropType } from 'vue-demi';
+import type { Adapter, MaskVariant, ModelModifier } from './adapter/adapter';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<string | string[] | File | File[]>;

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

@@ -1,4 +1,4 @@
-import { ComputedRef, Ref } from 'vue-demi';
+import type { ComputedRef, Ref } from 'vue-demi';
 export type MaskVariant = 'square' | 'round' | 'card' | 'none';
 export type MirrorMode = boolean | 'preview' | 'all';
 export interface ModelModifier {

package/dist/components/camera/utils/motion.mjs

@@ -77,10 +77,10 @@ export function motionDetection(imageData, template) {
   }
   const distX = bestHitX - template.xPos;
   const distY = bestHitY - template.yPos;
-  const movementDiff = Math.sqrt(distX * distX + distY * distY);
+  const movementDiff = Math.hypot(distX, distY);
   const maxDistX = searchWidth - template.width / 2;
   const maxDistY = searchHeight - template.height / 2;
-  const maximumMovement = Math.sqrt(maxDistX * maxDistX + maxDistY * maxDistY);
+  const maximumMovement = Math.hypot(maxDistX, maxDistY);
   let movementPercentage = movementDiff / maximumMovement * 100;
   if (movementPercentage > 100)
     movementPercentage = 100;

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

@@ -1,6 +1,6 @@
-import { PropType } from 'vue-demi';
-import { WeightVariant, TransformVariant } from '../heading';
-import { SizeVariant } from '.';
+import type { PropType } from 'vue-demi';
+import type { WeightVariant, TransformVariant } from '../heading';
+import type { SizeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     weight: {
         type: PropType<WeightVariant>;

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

@@ -1,5 +1,5 @@
-import { PropType } from 'vue-demi';
-import { ElementVariant } from '.';
+import type { PropType } from 'vue-demi';
+import type { ElementVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     element: {
         type: PropType<ElementVariant>;

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

@@ -1,7 +1,7 @@
-import { PropType } from 'vue-demi';
-import { DirectionVariant } from '../steps';
+import type { PropType } from 'vue-demi';
+import type { DirectionVariant } from '../steps';
 import '@splidejs/splide/css/core';
-import { AlignmentVariant } from '.';
+import type { AlignmentVariant } from '.';
 import type { Options } from '@splidejs/splide';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
@@ -98,11 +98,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: number;
-    direction: DirectionVariant;
     align: AlignmentVariant;
     width: string | number;
-    height: string | number;
     loop: boolean;
+    height: string | number;
+    direction: DirectionVariant;
     autoplay: boolean;
     autoplayInterval: string | number;
     splideOptions: Options;

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

@@ -1,4 +1,4 @@
 import type { Splide } from '@splidejs/splide';
-import { InjectionKey, Ref } from 'vue-demi';
+import type { InjectionKey, Ref } from 'vue-demi';
 export type AlignmentVariant = 'start' | 'end';
 export declare const CAROUSEL_INSTANCE: InjectionKey<Ref<Splide>>;

package/dist/components/chart/Chart.vue

@@ -55,6 +55,25 @@ export default defineComponent({
     const data = computed(() => {
       return getAdapter(variant.value).getDatasets(slots.default());
     });
+    const options = computed(() => {
+      return {
+        plugins: {
+          legend: {
+            display: legend.value !== "none",
+            position: legend.value === "none" ? void 0 : legend.value,
+            labels: {
+              color: "#9CA3AF",
+              font: {
+                family: "DM Sans",
+                size: 12,
+                weight: "600"
+              }
+            }
+          }
+        },
+        ...getAdapter(variant.value).getStyle()
+      };
+    });
     async function initChart() {
       if (instance.value)
         instance.value.destroy();
@@ -62,23 +81,7 @@ export default defineComponent({
         canvas.value,
         variant.value,
         data.value,
-        {
-          plugins: {
-            legend: {
-              display: legend.value !== "none",
-              position: legend.value === "none" ? void 0 : legend.value,
-              labels: {
-                color: "#9CA3AF",
-                font: {
-                  family: "DM Sans",
-                  size: 12,
-                  weight: "600"
-                }
-              }
-            }
-          },
-          ...getAdapter(variant.value).getStyle()
-        }
+        options.value
       );
     }
     const dataWatcher = watchPausable(data, (newData) => {

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

@@ -1,6 +1,6 @@
-import { PropType } from 'vue-demi';
-import { ChartType } from './adapter/index';
-import { LegendPosition } from '.';
+import type { PropType } from 'vue-demi';
+import type { ChartType } from './adapter/index';
+import type { LegendPosition } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<ChartType>;

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

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

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

@@ -1,3 +1,3 @@
-import { ChartAdapter } from './adapter';
+import type { ChartAdapter } from './adapter';
 export type ChartType = 'line' | 'bar' | 'pie';
 export default function getAdapter(type: ChartType): ChartAdapter;

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

@@ -1,2 +1,2 @@
-import { LayoutPosition } from 'chart.js';
+import type { LayoutPosition } from 'chart.js';
 export type LegendPosition = 'none' | LayoutPosition;

package/dist/components/checkbox/Checkbox.vue

@@ -23,7 +23,8 @@
 
 <script lang="ts" setup>
 import { useVModel } from '.'
-import { PropType, computed } from 'vue-demi'
+import type { PropType } from 'vue-demi'
+import { computed } from 'vue-demi'
 import IconCheckbox from './icon/IconCheckbox.vue'
 import IconInderteminate from './icon/IconInderteminate.vue'
 
@@ -117,7 +118,7 @@ function toggle () {
   * with custom icon
   */
   &__icon {
-    @apply w-5 h-5 inline-flex shrink-0 border rounded-tn border-subtle items-center justify-center bg-default;
+    @apply w-4 h-4 inline-flex shrink-0 border rounded-tn border-subtle items-center justify-center bg-default;
     @apply dark:border-dark-subtle dark:bg-dark-default;
 
     > svg {

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

@@ -1,4 +1,4 @@
-import { InputProps } from '../input';
+import type { InputProps } from '../input';
 export interface CheckboxProps extends InputProps<unknown> {
     checked: boolean;
     value: unknown;

package/dist/components/contextual-bar/ContextualBar.vue.d.ts

@@ -1,6 +1,6 @@
-import { PropType } from 'vue-demi';
-import { AlignVariant } from '../nav';
-import { StyleVariant } from '.';
+import type { PropType } from 'vue-demi';
+import type { AlignVariant } from '../nav';
+import type { StyleVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     state: {
         type: PropType<StyleVariant>;
@@ -36,7 +36,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     close: (event: Event) => void;
     onEnter: (target: HTMLDivElement) => void;
     onLeave: (target: HTMLDivElement) => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("show" | "close" | "update:modelValue" | "hide")[], "show" | "close" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("close" | "show" | "update:modelValue" | "hide")[], "close" | "show" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     state: {
         type: PropType<StyleVariant>;
         default: string;
@@ -67,8 +67,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onShow?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
     onHide?: ((...args: any[]) => any) | undefined;
 }, {
     dismissable: boolean;

package/dist/components/cropper/Cropper.vue.d.ts

@@ -1,5 +1,5 @@
-import { PropType, StyleValue } from 'vue-demi';
-import { ModelModifier } from '../camera/adapter/adapter';
+import type { PropType, StyleValue } from 'vue-demi';
+import type { ModelModifier } from '../camera/adapter/adapter';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: (StringConstructor | {

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

@@ -1,3 +1,3 @@
-import { MaybeRef } from '@vueuse/core';
-import { Ref } from 'vue-demi';
+import type { MaybeRef } from '@vueuse/core';
+import type { Ref } from 'vue-demi';
 export declare function usePreview(file: MaybeRef<string | globalThis.File>, fallback?: string): Ref<string>;

package/dist/components/cropper/utils/use-pinch.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue-demi';
+import type { Ref } from 'vue-demi';
 import type { InteractEvent, GestureEvent } from '@interactjs/types';
 export interface EventHooks {
     onstart?: (event: InteractEvent) => void;

package/dist/components/cropper/utils/use-ratio.d.ts

@@ -1,4 +1,4 @@
-import { ComputedRef } from 'vue-demi';
+import type { ComputedRef } from 'vue-demi';
 export interface RatioProp {
     width?: number | string;
     height?: number | string;

package/dist/components/datepicker/Datepicker.vue

@@ -197,6 +197,7 @@ export default defineComponent({
   }
 
   > .dropdown__menu {
+    --p-dropdown-size: auto;
     --p-dropdown-max-height: 100%;
 
     @apply min-w-max max-h-min;

package/dist/components/datepicker/Datepicker.vue.d.ts

@@ -1,5 +1,5 @@
-import { PropType } from 'vue-demi';
-import { SizeVariant } from '../button';
+import type { PropType } from 'vue-demi';
+import type { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<Date | [Date, Date]>;
@@ -148,7 +148,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     range: boolean;
     minRange: string;
     maxRange: string;
-    format: string;
     placeholder: string;
+    format: string;
 }, {}>;
 export default _default;

package/dist/components/dialog/Dialog.vue

@@ -17,7 +17,12 @@
         element="h6" />
     </template>
     <template #default>
-      <span v-p-md.inline="context.text" />
+      <template v-if="(typeof context.content === 'function')">
+        <component :is="context.content" />
+      </template>
+      <template v-else>
+        <span v-p-md.inline="context.text" />
+      </template>
     </template>
     <template #footer>
       <dialog-footer
@@ -51,8 +56,8 @@ import { pMd } from "../markdown";
 export default defineComponent({
   components: {
     Modal,
-    DialogFooter,
-    Heading
+    Heading,
+    DialogFooter
   },
   directives: { pMd },
   setup() {

package/dist/components/dialog/Dialog.vue.d.ts

@@ -1,4 +1,4 @@
-import { DialogContext } from '.';
+import type { DialogContext } from '.';
 declare const _default: import("vue-demi").DefineComponent<{}, {
     id: import("vue-demi").Ref<symbol | undefined>;
     modal: import("vue-demi").Ref<boolean>;

package/dist/components/dialog/DialogFooter.vue.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue-demi';
+import type { PropType } from 'vue-demi';
 import type { StyleVariant as FooterButtonStyleVariant, ColorVariant as FooterButtonColorVariant } from '../button';
 export type FooterAlignVariant = 'start' | 'end';
 export type { StyleVariant as FooterButtonStyleVariant, ColorVariant as FooterButtonColorVariant, } from '../button';

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

@@ -1,5 +1,8 @@
 import type { FooterAlignVariant, FooterButtonColorVariant, FooterButtonStyleVariant } from './DialogFooter.vue';
 import type { SizeVariant } from '../modal';
+import type { SizeVariant as InputSizeVariant } from '../button';
+import type { VNode } from 'vue-demi';
+import type { AcceptVariant } from '../input';
 interface DialogButton {
     text?: string;
     visible?: boolean;
@@ -19,10 +22,24 @@ export interface DialogOptions {
     cancel?: DialogButton;
     confirm?: DialogButton;
 }
+export type DialogConfirmOption = DialogOptions;
+export type DialogAlertOption = Omit<DialogOptions, 'cancel'>;
+export interface DialogPromptOption extends DialogOptions {
+    value?: string;
+    input?: {
+        type?: string;
+        placeholder?: string;
+        size?: InputSizeVariant;
+        clearable?: boolean;
+        accept?: AcceptVariant;
+    };
+}
 export interface DialogContext extends DialogOptions {
     onConfirm: () => void;
     onCancel: () => void;
+    content?: () => VNode;
 }
-export declare function confirm(options: DialogOptions): Promise<boolean>;
-export declare function alert(options: Omit<DialogOptions, 'cancel'>): Promise<void>;
+export declare function confirm(options: DialogConfirmOption): Promise<boolean>;
+export declare function alert(options: DialogConfirmOption): Promise<void>;
+export declare function prompt(options: DialogPromptOption): Promise<string>;
 export {};

package/dist/components/dialog/index.mjs

@@ -1,5 +1,11 @@
 import { useSingleton } from "../global/use-singleton.mjs";
 import defu from "defu";
+import {
+  ref,
+  h
+} from "vue-demi";
+import pInput from "../input/Input.vue";
+import pFormGroup from "../form-group/FormGroup.vue";
 export async function confirm(options) {
   const { default: Dialog } = await import("./Dialog.vue");
   const modal = await useSingleton(Dialog);
@@ -30,3 +36,39 @@ export async function alert(options) {
     }
   ));
 }
+export async function prompt(options) {
+  const { default: Dialog } = await import("./Dialog.vue");
+  const model = ref(options.value);
+  const modal = await useSingleton(Dialog);
+  const result = await new Promise((resolve) => {
+    modal.show(defu(
+      {
+        content: () => {
+          return h(pFormGroup, { label: options.text }, () => [
+            h(pInput, {
+              "type": options.input?.type,
+              "placeholder": options.input?.placeholder,
+              "size": options.input?.size,
+              "clearable": options.input?.clearable,
+              "accept": options.input?.accept,
+              "modelValue": model.value,
+              "onUpdate:modelValue": (value) => {
+                model.value = value;
+              }
+            })
+          ]);
+        },
+        onConfirm: () => resolve(model.value),
+        onCancel: () => resolve("")
+      },
+      options,
+      {
+        title: "Question",
+        confirm: { text: "Submit" },
+        cancel: {},
+        centered: true
+      }
+    ));
+  });
+  return result;
+}

package/dist/components/dot/Dot.vue.d.ts

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

package/dist/components/dropdown/Dropdown.vue

@@ -67,15 +67,17 @@
 </template>
 
 <script lang="ts" setup>
-import {
+import type {
   PropType,
+  VNode,
+} from 'vue-demi'
+import {
   provide,
   watch,
   toRef,
   watchEffect,
   computed,
   ref,
-  VNode,
 } from 'vue-demi'
 import {
   onClickOutside,
@@ -84,8 +86,8 @@ import {
 import Button from '../button/Button.vue'
 import DropdownGroup from '../dropdown-subitem/DropdownSubitem.vue'
 import { useFocus } from './utils/use-focus'
+import type { Placement } from '@floating-ui/dom'
 import {
-  Placement,
   autoUpdate,
   computePosition,
   offset,
@@ -216,15 +218,15 @@ const classNames = computed(() => {
   if (props.divider)
     result.push('dropdown--divider')
 
+  if (props.menuSize)
+    result.push(`dropdown--menu-${props.menuSize}`)
+
   return result
 })
 
 const containerSize = computed(() => {
   const result: string[] = ['']
 
-  if (props.menuSize)
-    result.push(`dropdown__menu--${props.menuSize}`)
-
   if (slots.prepend)
     result.push('dropdown__menu--has-prepend')
 
@@ -360,8 +362,24 @@ defineExpose({
 
   @apply inline-flex;
 
+  &--menu-xl {
+    --p-dropdown-size: var(--p-dropdown-size-xl);
+  }
+
+  &--menu-lg {
+    --p-dropdown-size: var(--p-dropdown-size-lg);
+  }
+
+  &--menu-md {
+    --p-dropdown-size: var(--p-dropdown-size-md);
+  }
+
+  &--menu-sm {
+    --p-dropdown-size: var(--p-dropdown-size-sm);
+  }
+
   &__menu {
-    @apply border rounded bg-default z-[var(--p-dropdown-z-index)] border-default shadow-xl absolute flex flex-col overflow-hidden;
+    @apply border rounded bg-default z-[var(--p-dropdown-z-index)] border-default shadow-xl absolute flex flex-col overflow-hidden w-[var(--p-dropdown-size)];
     @apply dark:bg-dark-default dark:border-dark-default;
 
     &__prepend,
@@ -390,22 +408,6 @@ defineExpose({
         }
       }
     }
-
-    &--xl {
-      @apply w-[var(--p-dropdown-size-xl)];
-    }
-
-    &--lg {
-      @apply w-[var(--p-dropdown-size-lg)];
-    }
-
-    &--md {
-      @apply w-[var(--p-dropdown-size-md)];
-    }
-
-    &--sm {
-      @apply w-[var(--p-dropdown-size-sm)];
-    }
   }
 
   &__activator > &__caret {