@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/camera/adapter/liveness.mjs

@@ -0,0 +1,46 @@
+import { fromBase64 } from "../../utils/base64.mjs";
+import {
+  createTemplate,
+  motionDetection,
+  MOTION_AREA_SIZE,
+  MOTION_FPS,
+  MOTION_THRESHOLD,
+  takeSample
+} from "../utils/motion.mjs";
+import { takePicture } from "../utils/take-picture.mjs";
+import { defineAdapter } from "./adapter.mjs";
+export default defineAdapter({
+  meta: {
+    mask: "round",
+    mirror: true,
+    facingMode: "user"
+  },
+  async run({ video, toast, meta, modifier }) {
+    return await new Promise((resolve) => {
+      const isMirrored = !!(meta.value.mirror && meta.value.mirror !== "preview");
+      const photoA = takePicture(video.value, isMirrored);
+      const canvas = document.createElement("canvas");
+      canvas.width = MOTION_AREA_SIZE;
+      canvas.height = MOTION_AREA_SIZE;
+      let template;
+      const interval = setInterval(function processFrame() {
+        if (video.value) {
+          const imageData = takeSample(canvas, video.value);
+          if (!template)
+            template = createTemplate(imageData);
+          else if (motionDetection(imageData, template) > MOTION_THRESHOLD) {
+            const photoB = takePicture(video.value, isMirrored);
+            const result = modifier.value.base64 ? [photoB, photoA] : [fromBase64(photoB), fromBase64(photoA)];
+            clearInterval(interval);
+            toast("");
+            resolve({
+              preview: photoB,
+              result
+            });
+          }
+        }
+      }, 1e3 / MOTION_FPS);
+      toast("Move your head slowly. Your photo will be taken automatically");
+    });
+  }
+});

package/dist/components/camera/adapter/qr-code.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./adapter").Adapter;
+export default _default;

package/dist/components/camera/adapter/qr-code.mjs

@@ -0,0 +1,19 @@
+import { defineAdapter } from "./adapter.mjs";
+import { takePicture } from "../utils/take-picture.mjs";
+export default defineAdapter({
+  meta: {
+    mask: "square",
+    facingMode: "environment",
+    autoStart: true
+  },
+  async run({ video, toast, meta }) {
+    const isMirrored = !!(meta.value.mirror && meta.value.mirror !== "preview");
+    const { BrowserQRCodeReader } = await import("@zxing/browser");
+    const reader = new BrowserQRCodeReader();
+    const result = await reader.decodeOnceFromVideoElement(video.value);
+    const image = takePicture(video.value, isMirrored);
+    const text = result.getText();
+    toast(text);
+    return { preview: image, result: text };
+  }
+});

package/dist/components/camera/utils/motion.d.ts

@@ -0,0 +1,29 @@
+export interface MotionTemplate {
+    centerX: number;
+    centerY: number;
+    width: number;
+    height: number;
+    xPos: number;
+    yPos: number;
+    buffer: Uint8ClampedArray;
+}
+export declare const MOTION_THRESHOLD = 40;
+export declare const MOTION_FPS = 15;
+export declare const MOTION_AREA_SIZE = 160;
+/**
+ * Capture and create sample image from HTML Video Element
+ * @param canvas Canvas 2d context
+ * @param video Html Video element
+ */
+export declare function takeSample(canvas: HTMLCanvasElement, video: HTMLVideoElement): ImageData;
+/**
+ * create motion template
+ * @param imageData sample imagedata
+ */
+export declare function createTemplate(imageData: ImageData): MotionTemplate;
+/**
+ * Compare image with Motion template and return the movement distance
+ * @param imageData new sample's imagedata
+ * @param template motion template to compare
+ */
+export declare function motionDetection(imageData: ImageData, template: MotionTemplate): number;

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

@@ -0,0 +1,88 @@
+export const MOTION_THRESHOLD = 40;
+export const MOTION_FPS = 15;
+export const MOTION_AREA_SIZE = 160;
+export function takeSample(canvas, video) {
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  context.drawImage(
+    video,
+    video.videoWidth / 2 - MOTION_AREA_SIZE,
+    video.videoHeight / 2 - MOTION_AREA_SIZE,
+    MOTION_AREA_SIZE,
+    MOTION_AREA_SIZE,
+    0,
+    0,
+    MOTION_AREA_SIZE,
+    MOTION_AREA_SIZE
+  );
+  return context.getImageData(0, 0, canvas.width, canvas.height);
+}
+export function createTemplate(imageData) {
+  const centerX = imageData.width / 2;
+  const centerY = imageData.height / 2;
+  const width = imageData.width / 4;
+  const height = imageData.height / 4;
+  const xPos = centerX - width / 2;
+  const yPos = centerY - height / 2;
+  const buffer = new Uint8ClampedArray(width * height);
+  const template = {
+    centerX,
+    centerY,
+    width,
+    height,
+    xPos,
+    yPos,
+    buffer
+  };
+  const p = imageData.data;
+  let counter = 0;
+  for (let y = template.yPos; y < template.yPos + template.height; y++) {
+    let bufferIndex = y * imageData.width * 4 + template.xPos * 4 + 1;
+    for (let x = template.xPos; x < template.xPos + template.width; x++) {
+      template.buffer[counter++] = p[bufferIndex];
+      bufferIndex += 4;
+    }
+  }
+  return template;
+}
+export function motionDetection(imageData, template) {
+  let bestHitX = 0;
+  let bestHitY = 0;
+  let maxCorr = 0;
+  const searchWidth = imageData.width / 4;
+  const searchHeight = imageData.height / 4;
+  const p = imageData.data;
+  for (let y = template.centerY - searchHeight; y <= template.centerY + searchHeight - template.height; y++) {
+    for (let x = template.centerX - searchWidth; x <= template.centerX + searchWidth - template.width; x++) {
+      let nominator = 0;
+      let denominator = 0;
+      let templateIndex = 0;
+      for (let ty = 0; ty < template.height; ty++) {
+        let bufferIndex = x * 4 + 1 + (y + ty) * imageData.width * 4;
+        for (let tx = 0; tx < template.width; tx++) {
+          const imagepixel = p[bufferIndex];
+          nominator += template.buffer[templateIndex++] * imagepixel;
+          denominator += imagepixel * imagepixel;
+          bufferIndex += 4;
+        }
+      }
+      let ncc = 0;
+      if (denominator > 0)
+        ncc = nominator * nominator / denominator;
+      if (ncc > maxCorr) {
+        maxCorr = ncc;
+        bestHitX = x;
+        bestHitY = y;
+      }
+    }
+  }
+  const distX = bestHitX - template.xPos;
+  const distY = bestHitY - template.yPos;
+  const movementDiff = Math.hypot(distX, distY);
+  const maxDistX = searchWidth - template.width / 2;
+  const maxDistY = searchHeight - template.height / 2;
+  const maximumMovement = Math.hypot(maxDistX, maxDistY);
+  let movementPercentage = movementDiff / maximumMovement * 100;
+  if (movementPercentage > 100)
+    movementPercentage = 100;
+  return movementPercentage;
+}

package/dist/components/camera/utils/take-picture.d.ts

@@ -0,0 +1 @@
+export declare function takePicture(video: HTMLVideoElement, mirror?: boolean): string;

package/dist/components/camera/utils/take-picture.mjs

@@ -0,0 +1,14 @@
+export function takePicture(video, mirror = false) {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  if (mirror) {
+    context.save();
+    context.scale(-1, 1);
+    context.drawImage(video, 0, 0, canvas.width * -1, canvas.height);
+    context.restore();
+  } else
+    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  return canvas.toDataURL("image/jpeg");
+}

package/dist/components/caption/Caption.vue

@@ -0,0 +1,112 @@
+<template>
+  <span
+    data-testid="caption"
+    :class="classNames">
+    <slot />
+  </span>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  weight: {
+    type: String,
+    default: "normal"
+  },
+  transform: {
+    type: String,
+    default: "normalcase"
+  },
+  size: {
+    type: String,
+    default: "xs"
+  }
+});
+const classNames = computed(() => {
+  const result = ["caption"];
+  if (props.transform)
+    result.push(`caption--${props.transform}`);
+  if (props.weight)
+    result.push(`caption--${props.weight}`);
+  if (props.size)
+    result.push(`caption--${props.size}`);
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.caption {
+  @apply block text-xs tracking-wide;
+
+  &:not([class^='text-'], [class*='text-']) {
+    @apply text-muted;
+    @apply dark:text-dark-muted;
+  }
+
+  /**
+  * Caption in tiny size
+  */
+  &--tn {
+    @apply text-tn tracking-wider;
+  }
+
+  /**
+  * Weight of caption
+  */
+  &--thin {
+    @apply font-thin;
+  }
+
+  &--extralight {
+    @apply font-extralight;
+  }
+
+  &--light {
+    @apply font-light;
+  }
+
+  &--normal {
+    @apply font-normal;
+  }
+
+  &--semibold {
+    @apply font-semibold;
+  }
+
+  &--medium {
+    @apply font-medium;
+  }
+
+  &--bold {
+    @apply font-bold;
+  }
+
+  &--extrabold {
+    @apply font-extrabold;
+  }
+
+  &--black {
+    @apply font-black;
+  }
+
+  /**
+  * Text transform
+  * of caption
+  */
+  &--normalcase {
+    @apply normal-case;
+  }
+
+  &--lowercase {
+    @apply lowercase;
+  }
+
+  &--capitalize {
+    @apply capitalize;
+  }
+
+  &--uppercase {
+    @apply uppercase;
+  }
+}
+</style>

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

@@ -0,0 +1,50 @@
+import type { PropType } from 'vue';
+import type { WeightVariant, TransformVariant } from '../heading';
+import type { SizeVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: SizeVariant;
+    weight: WeightVariant;
+    transform: TransformVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1 @@
+export type SizeVariant = 'xs' | 'tn';

package/dist/components/card/Card.vue

@@ -0,0 +1,330 @@
+<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"
+      data-testid="card-body"
+      class="card__body"
+      :class="bodyClass">
+      <slot />
+    </div>
+    <slot v-else />
+
+    <footer
+      v-if="$slots.footer"
+      data-testid="card-footer"
+      class="card__footer">
+      <slot name="footer" />
+    </footer>
+  </component>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
+import Heading from "../heading/Heading.vue";
+const props = defineProps({
+  element: {
+    type: String,
+    default: "section"
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  sectioned: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  callout: {
+    type: Boolean,
+    default: false
+  },
+  dismissable: {
+    type: Boolean,
+    default: true
+  },
+  bodyClass: {
+    type: [String, Array],
+    default: void 0
+  },
+  spacing: {
+    type: String,
+    default: "md"
+  }
+});
+const emit = defineEmits(["dismissed"]);
+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.readonly)
+    result.push("card--readonly");
+  if (props.callout)
+    result.push("card--callout");
+  if (props.spacing)
+    result.push(`card--spacing-${props.spacing}`);
+  return result;
+});
+const elementNames = computed(() => {
+  return props.element;
+});
+function close() {
+  show.value = false;
+  emit("dismissed");
+}
+defineExpose({ close });
+defineSlots();
+</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   : Nov 08, 2024
+*/
+.card {
+  --p-card-padding-x: theme(spacing.6);
+  --p-card-padding-y: theme(spacing.6);
+  --p-card-bg: theme(backgroundColor.default.DEFAULT);
+  --p-card-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+  --p-card-border: theme(borderColor.default.DEFAULT);
+  --p-card-border-dark: theme(borderColor.dark.default.DEFAULT);
+  --p-card-color: theme(textColor.default);
+  --p-card-color-dark: theme(textColor.dark.default);
+  --p-card-border-radius: theme(borderRadius.md);
+  --p-card-inside-border-radius: theme(borderRadius.DEFAULT);
+
+  @apply border bg-[color:var(--p-card-bg)] border-[color:var(--p-card-border)] text-[color:var(--p-card-color)] rounded-[var(--p-card-border-radius)];
+  @apply dark:bg-[color:var(--p-card-bg-dark)] dark:border-[color:var(--p-card-border-dark)] dark:text-[color:var(--p-card-color-dark)];
+
+  /**
+  * Card inside card
+  * has 8px rounded
+  */
+  .card {
+    @apply rounded-[var(--p-card-inside-border-radius)];
+  }
+
+  &&--spacing {
+    &-sm {
+      --p-card-padding-x: theme(spacing.4);
+      --p-card-padding-y: theme(spacing.4);
+    }
+
+    &-md {
+      --p-card-padding-x: theme(spacing.6);
+      --p-card-padding-y: theme(spacing.6);
+    }
+
+    &-lg {
+      --p-card-padding-x: theme(spacing.9);
+      --p-card-padding-y: theme(spacing.9);
+    }
+
+    &-xl {
+      --p-card-padding-x: theme(spacing.12);
+      --p-card-padding-y: theme(spacing.12);
+    }
+  }
+
+  /*
+  * Card Body & Card Header
+  * by default have 24px (1.5rem) padding
+  */
+  &__header,
+  &__body {
+    @apply pt-[var(--p-card-padding-y)] px-[var(--p-card-padding-x)];
+  }
+
+  &__body {
+    @apply pb-[var(--p-card-padding-y)];
+
+    > .card__section {
+      @apply pt-0;
+    }
+
+    .card__section {
+      @apply border-b border-subtle-alpha;
+      @apply dark:border-dark-subtle-alpha;
+
+      /**
+      * 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-[var(--p-card-padding-y)];
+      }
+
+      &: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 {
+    &:has(.card__section--readonly) {
+      .card__section:first-child:where(.card__section--readonly) {
+        @apply rounded-t-[var(--p-card-border-radius)];
+      }
+
+      .card__section:last-child:where(.card__section--readonly) {
+        @apply rounded-b-[var(--p-card-border-radius)];
+      }
+    }
+    > .card__body {
+      @apply p-0;
+    }
+  }
+
+  /**
+  * Give background muted
+  * If Card disabled
+  */
+  &&--disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  /**
+  * Give background base
+  * when Card are readonly
+  */
+  &&--readonly {
+    @apply bg-ground cursor-not-allowed;
+    @apply dark:bg-dark-ground;
+  }
+
+  /**
+  * Provide box-shadow when
+  * Card Callout is enable
+  */
+  &&--callout {
+    @apply shadow-sm;
+  }
+
+  &__header {
+    .heading {
+      @apply font-medium leading-none;
+    }
+
+    &&--default {
+      @apply flex justify-between items-center;
+    }
+
+    &,
+    &__action {
+      a {
+        &:not(.btn) {
+          @apply text-xs;
+        }
+
+        + a {
+          @apply pl-3;
+        }
+      }
+    }
+
+    &__dismiss {
+      @apply text-default/30 hover:text-default/50 hover:cursor-pointer;
+      @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
+    }
+
+    + .card__body,
+    + .card__section > .card__body {
+      @apply pt-4;
+    }
+  }
+
+  &__section {
+    @apply border-b border-subtle-alpha;
+    @apply dark:border-dark-subtle-alpha;
+
+    &:last-child {
+      @apply border-b-0;
+    }
+
+    &&--disabled,
+    &.card--disabled {
+      @apply opacity-50 cursor-not-allowed;
+    }
+
+    &&--readonly,
+    &.card--readonly {
+      @apply bg-ground cursor-not-allowed;
+      @apply dark:bg-dark-ground;
+    }
+
+    &.card--disabled {
+      @apply px-[var(--p-card-padding-x)] pb-[var(--p-card-padding-y)];
+    }
+  }
+
+  &__footer {
+    @apply pb-[var(--p-card-padding-y)] px-[var(--p-card-padding-x)] pt-8;
+  }
+}
+</style>