@privyid/persona 1.2.1 → 1.2.2-rc.2

package/dist/components/richtext/tiptap/image-align.mjs

@@ -0,0 +1,60 @@
+import { Extension } from "@tiptap/core";
+export const Image = Extension.create({
+  name: "image-align",
+  addOptions() {
+    return {
+      types: ["image"],
+      alignments: [
+        "left",
+        "center",
+        "right"
+      ],
+      defaultAlignment: "center"
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          imageWidth: {
+            default: "100%",
+            parseHTML(element) {
+              return element.style.width;
+            },
+            renderHTML(attributes) {
+              return { style: `width: ${attributes.imageWidth}` };
+            }
+          },
+          imageAlign: {
+            default: this.options.defaultAlignment,
+            parseHTML(element) {
+              return element.dataset.align;
+            },
+            renderHTML(attributes) {
+              const marginLeft = attributes.imageAlign === "left" ? "0" : "auto";
+              const marginRight = attributes.imageAlign === "right" ? "0" : "auto";
+              return {
+                "data-align": attributes.align,
+                "style": `margin-left: ${marginLeft}; margin-right: ${marginRight}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setImageAlign: (align) => ({ commands }) => {
+        if (!this.options.alignments.includes(align))
+          return false;
+        return this.options.types.map((type) => commands.updateAttributes(type, { imageAlign: align })).every(Boolean);
+      },
+      unsetImageAlign: () => ({ commands }) => {
+        return this.options.types.map((type) => commands.resetAttributes(type, "imageAlign")).every(Boolean);
+      }
+    };
+  }
+});
+export default Image;

package/dist/components/ringbar/Ringbar.vue

@@ -0,0 +1,148 @@
+<template>
+  <svg
+    data-testid="ringbar"
+    class="ringbar"
+    :class="classNames"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle
+      class="ringbar__track"
+      cx="9"
+      cy="9"
+      r="8"
+      fill="transparent"
+      stroke-width="2px" />
+    <g class="ringbar__wrapper">
+      <circle
+        data-testid="ringbar-ring"
+        class="ringbar__ring"
+        cx="9"
+        cy="9"
+        r="8"
+        :stroke-dashoffset="(1 - presentage) * 50.2654825"
+        stroke-dasharray="50.2654825"
+        stroke-linecap="round"
+        stroke-width="2px"
+        fill="transparent" />
+    </g>
+  </svg>
+</template>
+
+<script setup>
+import { useProgressbar } from "../progressbar";
+import { computed } from "vue";
+import {} from "../button";
+const props = defineProps({
+  value: {
+    type: [Number, String],
+    default: 0
+  },
+  min: {
+    type: [Number, String],
+    default: 0
+  },
+  max: {
+    type: [Number, String],
+    default: 100
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  indeterminate: {
+    type: Boolean,
+    default: false
+  },
+  direction: {
+    type: String,
+    default: "cw"
+  }
+});
+const presentage = useProgressbar(props);
+const classNames = computed(() => {
+  const result = [];
+  if (props.indeterminate)
+    result.push("ringbar--indeterminate");
+  if (props.size)
+    result.push(`ringbar--${props.size}`);
+  if (props.direction)
+    result.push(`ringbar--${props.direction}`);
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.ringbar {
+  &__track {
+    @apply stroke-[color:theme(backgroundColor.ground)];
+    @apply dark:stroke-[color:theme(backgroundColor.dark.ground)];
+  }
+
+  &__ring {
+    @apply transition-[stroke-dashoffset] will-change-[stroke-dashoffset] duration-75 ease-out;
+    @apply stroke-[color:theme(borderColor.info.emphasis)] origin-center;
+    @apply dark:stroke-[color:theme(borderColor.dark.info.emphasis)];
+  }
+
+  &__wrapper {
+    @apply origin-center -rotate-90;
+  }
+
+  &--indeterminate {
+    .ringbar__ring {
+      animation: 1.5s ease-in-out infinite spinner-ring;
+    }
+
+    .ringbar__wrapper {
+      animation: 2s spinner-spin linear infinite;
+    }
+  }
+
+  &--xs {
+    @apply w-4 h-4;
+  }
+
+  &--sm {
+    @apply w-5 h-5;
+  }
+
+  &--md {
+    @apply w-6 h-6;
+  }
+
+  &--lg {
+    @apply w-8 h-8;
+  }
+
+  &--ccw {
+    @apply -scale-x-100;
+  }
+}
+
+@keyframes spinner-spin {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-ring {
+  0% {
+    stroke-dashoffset: 45.2389342;
+    transform: rotate(0);
+  }
+
+  50% {
+    stroke-dashoffset: 5.02654825;
+    transform: rotate(45deg);
+  }
+
+  100% {
+    stroke-dashoffset: 45.2389342;
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/components/ringbar/Ringbar.vue.d.ts

@@ -0,0 +1,62 @@
+import type { PropType } from 'vue';
+import { type SizeVariant } from '../button';
+import type { DirectionVariant } from '.';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: SizeVariant;
+    value: string | number;
+    max: string | number;
+    min: string | number;
+    direction: DirectionVariant;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1 @@
+export type DirectionVariant = 'cw' | 'ccw';