@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/module.d.cts

@@ -0,0 +1,2 @@
+export * from "/Users/azzam_hanif/Documents/01_Privy/design-system/packages/persona/src/module.js";
+export { default } from "/Users/azzam_hanif/Documents/01_Privy/design-system/packages/persona/src/module.js";

package/dist/module.d.mts

@@ -1,27 +1,2 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-interface ModuleOptions {
-    /**
-     * Include font
-     * @default true
-     */
-    font?: boolean;
-    /**
-     * Component prefix
-     * @default 'p'
-     */
-    prefix?: string;
-    /**
-     * Use local pdf worker
-     * @default false
-     */
-    useLocalPdfWorker?: boolean;
-}
-interface ModulePublicRuntimeConfig {
-    persona: {
-        cdnURL: string;
-    };
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
-
-export { type ModuleOptions, type ModulePublicRuntimeConfig, _default as default };
+export * from "/Users/azzam_hanif/Documents/01_Privy/design-system/packages/persona/src/module.js";
+export { default } from "/Users/azzam_hanif/Documents/01_Privy/design-system/packages/persona/src/module.js";

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@privyid/persona",
+  "configKey": "persona",
+  "compatibility": {
+    "nuxt": ">=3.4.0"
+  },
+  "version": "1.2.1-rc.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
+  }
+}

package/dist/module.mjs

@@ -1,97 +1,18 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, extendViteConfig } from '@nuxt/kit';
-import { join } from 'pathe';
-import { defu } from 'defu';
-import { joinURL } from 'ufo';
-import { version } from 'pdfjs-dist/legacy/build/pdf.mjs';
-import { version as version$1 } from 'pspdfkit/package.json';
+import { createJiti } from "../node_modules/jiti/lib/jiti.mjs";
 
-const module = defineNuxtModule({
-  meta: {
-    name: "@privyid/persona",
-    configKey: "persona",
-    compatibility: { nuxt: ">=3.4.0" }
+const jiti = createJiti(import.meta.url, {
+  "interopDefault": true,
+  "alias": {
+    "@privyid/persona": "/Users/azzam_hanif/Documents/01_Privy/design-system/packages/persona"
   },
-  defaults: {
-    font: true,
-    prefix: "p",
-    useLocalPdfWorker: false
-  },
-  async setup(options, nuxt) {
-    const { resolve, resolvePath } = createResolver(import.meta.url);
-    if (options.font) {
-      nuxt.options.app.head.link?.push(
-        { rel: "preconnect", href: "https://fonts.googleapis.com" },
-        {
-          rel: "preconnect",
-          href: "https://fonts.gstatic.com",
-          crossorigin: ""
-        },
-        { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap" }
-      );
-    }
-    await addComponentsDir({
-      path: resolve("./components"),
-      pathPrefix: false,
-      prefix: options.prefix,
-      extensions: ["vue"]
-    });
-    addPlugin({ src: resolve("./runtime/plugins/persona") });
-    extendViteConfig((config) => {
-      config.optimizeDeps = {
-        ...config.optimizeDeps,
-        exclude: [...config.optimizeDeps?.exclude ?? [], "@privyid/persona"],
-        include: [
-          ...config.optimizeDeps?.include ?? [],
-          "@testing-library/user-event",
-          "interactjs",
-          "@jill64/universal-sanitizer",
-          "scroll-into-view",
-          "webfontloader",
-          "zxcvbn",
-          "pdfjs-dist",
-          "pdfjs-dist/web/pdf_viewer",
-          "vuedraggable"
-        ]
-      };
-    });
-    if (options.useLocalPdfWorker) {
-      nuxt.options.runtimeConfig.public.persona = defu(
-        { cdnURL: "./_persona" },
-        nuxt.options.runtimeConfig.public.persona
-      );
-      nuxt.hook("nitro:config", async (nitroConfig) => {
-        nitroConfig.publicAssets ||= [];
-        const baseURL = "_persona";
-        const pdfjsDir = join(await resolvePath("pdfjs-dist"), "../../");
-        const pdfjsBaseURL = joinURL(baseURL, `pdfjs-dist@${version}`);
-        const pspdfDir = join(await resolvePath("pspdfkit"), "../../");
-        const pspdfBaseURL = joinURL(baseURL, `pspdfkit@${version$1}`);
-        const assetsMaxAge = 60 * 60 * 24 * 30;
-        nitroConfig.publicAssets.push(
-          {
-            baseURL: joinURL(pdfjsBaseURL, "build"),
-            dir: join(pdfjsDir, "build"),
-            maxAge: assetsMaxAge
-          },
-          {
-            baseURL: joinURL(pdfjsBaseURL, "legacy"),
-            dir: join(pdfjsDir, "legacy"),
-            maxAge: assetsMaxAge
-          },
-          {
-            baseURL: joinURL(pdfjsBaseURL, "cmaps"),
-            dir: join(pdfjsDir, "cmaps"),
-            maxAge: assetsMaxAge
-          },
-          {
-            baseURL: joinURL(pspdfBaseURL, "dist"),
-            dir: join(pspdfDir, "dist"),
-            maxAge: assetsMaxAge
-          }
-        );
-      });
+  "transformOptions": {
+    "babel": {
+      "plugins": []
     }
   }
-});
+})
+
+/** @type {import("/Users/azzam_hanif/Documents/01_Privy/design-system/packages/persona/src/module.js")} */
+const _module = await jiti.import("/Users/azzam_hanif/Documents/01_Privy/design-system/packages/persona/src/module.ts");
 
-export { module as default };
+export default _module?.default ?? _module;

package/dist/types.d.mts

@@ -0,0 +1,13 @@
+import type { ModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.mjs'
+
+declare module '#app' {
+  interface RuntimeNuxtHooks extends ModuleRuntimeHooks {}
+}
+
+declare module '@nuxt/schema' {
+  interface NuxtHooks extends ModuleHooks {}
+  interface RuntimeConfig extends ModuleRuntimeConfig {}
+  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
+}
+
+export * from "./module.mjs"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "1.1.2",
+  "version": "1.2.1-rc.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -16,12 +16,8 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs",
-      "types": {
-        "import": "./dist/module.d.mts",
-        "require": "./dist/module.d.ts"
-      }
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
     },
     "./core": {
       "import": "./dist/core/index.mjs",
@@ -33,11 +29,14 @@
     },
     "./components/*": "./dist/components/*"
   },
-  "main": "./dist/module.cjs",
+  "main": "./dist/module.mjs",
   "module": "./dist/module.mjs",
-  "types": "./dist/module.d.ts",
+  "types": "./dist/types.d.mts",
   "typesVersions": {
     "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ],
       "core": [
         "./dist/core/index.d.ts"
       ],
@@ -59,9 +58,9 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.6.13",
-    "@jill64/universal-sanitizer": "1.4.2",
+    "@jill64/universal-sanitizer": "1.4.4",
     "@juggle/resize-observer": "3.4.0",
-    "@nuxt/kit": "3.16.1",
+    "@nuxt/kit": "3.17.1",
     "@splidejs/splide": "4.1.4",
     "@testing-library/dom": "10.4.0",
     "@testing-library/user-event": "14.6.1",
@@ -84,7 +83,7 @@
     "@vueuse/math": "11.1.0",
     "@zxing/browser": "0.1.5",
     "@zxing/library": "0.21.3",
-    "chart.js": "4.4.8",
+    "chart.js": "4.4.9",
     "core-js": "3",
     "date-fns": "4.1.0",
     "defu": "6.1.4",
@@ -93,17 +92,16 @@
     "html-escaper": "^3.0.3",
     "interactjs": "1.10.27",
     "lodash-es": "4.17.21",
-    "marked": "15.0.7",
+    "marked": "15.0.11",
     "nanodelay": "2.0.2",
     "pathe": "^2.0.0",
-    "pdfjs-dist": "5.0.375",
+    "pdfjs-dist": "5.2.133",
     "pspdfkit": "^2024.6.0",
     "scroll-into-view": "1.16.2",
     "tabbable": "6.2.0",
     "tiptap-extension-font-size": "^1.2.0",
     "ufo": "^1.5.4",
     "vue-collapsed": "1.3.4",
-    "vue-demi": "0.14.10",
     "vuedraggable": "next",
     "webfontloader": "1.6.28",
     "zxcvbn": "4.4.2"
@@ -112,27 +110,27 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/browserslist-config": "^1.1.2",
-    "@privyid/tailwind-preset": "^1.1.2",
+    "@privyid/browserslist-config": "workspace:^",
+    "@privyid/tailwind-preset": "workspace:^",
     "postcss-custom-properties": "^12.1.11 || ^13.0.0 || ^14.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
-    "tailwind": ">=3.0.0",
+    "tailwindcss": "^3.0.0",
     "vue-router": ">=4.0.0"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "0.8.4",
-    "@nuxt/schema": "3.16.1",
-    "@nuxtjs/tailwindcss": "6.13.2",
-    "@privyid/browserslist-config": "^1.1.2",
-    "@privyid/tailwind-preset": "^1.1.2",
-    "@types/sanitize-html": "2.13.0",
+    "@nuxt/module-builder": "1.0.1",
+    "@nuxt/schema": "3.17.1",
+    "@nuxtjs/tailwindcss": "6.14.0",
+    "@privyid/browserslist-config": "workspace:^",
+    "@privyid/tailwind-preset": "workspace:^",
+    "@types/sanitize-html": "2.15.0",
     "browserslist-to-esbuild": "2.1.1",
-    "nuxt": "3.16.1",
+    "nuxt": "3.17.1",
     "postcss-custom-properties": "14.0.4",
     "postcss-hexrgba": "2.1.0",
     "postcss-lighten-darken": "0.9.0",
-    "tailwind": "4.0.0"
+    "tailwindcss": "3"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"
@@ -140,4 +138,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/dist/components/accordion/Accordion.vue

@@ -1,121 +0,0 @@
-<template>
-  <div
-    :class="classNames"
-    data-testid="accordion">
-    <AccordionItems
-      v-model="model"
-      :no-caret="noCaret"
-      :multiple="multiple">
-      <slot>
-        <Item
-          v-for="(item, i) in items"
-          :key="i"
-          :title="item.title"
-          :disabled="item.disabled">
-          <div class="p-4">
-            {{ item.content }}
-          </div>
-        </Item>
-      </slot>
-    </AccordionItems>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useVModel } from '../input'
-import { type AccordionItem } from '.'
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import Item from './AccordionItem.vue'
-import AccordionItems from './AccordionItems.vue'
-
-const props = defineProps({
-  modelValue: {
-    type   : [Number, Array] as PropType<number | number[]>,
-    default: undefined,
-  },
-  multiple: {
-    type   : Boolean,
-    default: false,
-  },
-  flush: {
-    type   : Boolean,
-    default: false,
-  },
-  pill: {
-    type   : Boolean,
-    default: false,
-  },
-  noCaret: {
-    type   : Boolean,
-    default: false,
-  },
-  items: {
-    type   : Array as PropType<AccordionItem[]>,
-    default: () => ([] as AccordionItem[]),
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [unknown],
-}>()
-
-const model = useVModel(props)
-
-const classNames = computed(() => {
-  const result: string[] = ['accordion']
-
-  if (props.flush)
-    result.push('accordion--flush')
-
-  if (props.pill)
-    result.push('accordion--pills')
-
-  return result
-})
-</script>
-
-<style lang="postcss">
-.accordion {
-  --p-accordion-border: theme(borderColor.default.DEFAULT);
-  --p-accordion-border-dark: theme(borderColor.dark.default.DEFAULT);
-  --p-accordion-item-border: theme(borderColor.default.DEFAULT);
-  --p-accordion-item-border-dark: theme(borderColor.dark.default.DEFAULT);
-  --p-accordion-divide: theme(divideColor.default.DEFAULT);
-  --p-accordion-divide-dark: theme(divideColor.dark.default.DEFAULT);
-
-  @apply flex flex-col w-full;
-  @apply border border-[var(--p-accordion-border)] rounded;
-  @apply dark:border-[var(--p-accordion-border-dark)];
-
-  & > &__item {
-    @apply first:rounded-t last:rounded-b;
-  }
-
-  &--pills {
-    @apply gap-2 border-0 rounded-none;
-
-    > .accordion__item {
-      @apply border rounded border-[var(--p-accordion-item-border)];
-      @apply dark:border-[var(--p-accordion-item-border-dark)];
-
-      > .accordion__item__activator {
-        @apply rounded-t-sm;
-      }
-    }
-  }
-
-  &:not(&--pills) {
-    @apply divide-y divide-[var(--p-accordion-divide)];
-    @apply dark:divide-[var(--p-accordion-divide-dark)];
-  }
-
-  &--flush {
-    @apply border-0 rounded-none;
-
-    > .accordion__item {
-      @apply first:rounded-none last:rounded-none;
-    }
-  }
-}
-</style>

package/dist/components/accordion/AccordionItem.vue

@@ -1,250 +0,0 @@
-<template>
-  <div
-    :class="classNames"
-    data-testid="accordion-item"
-    :disabled="disabled">
-    <slot
-      name="activator"
-      :toggle="toggle"
-      :expanded="model">
-      <div
-        class="accordion__item__activator"
-        data-testid="accordion-item-activator"
-        @click="toggle">
-        <div
-          class="accordion__item__title"
-          :class="titleClass"
-          data-testid="accordion-item-title">
-          <div
-            v-if="accordionIcon"
-            class="accordion__item__icon"
-            data-testid="accordion-item-icon"
-            :class="iconClass">
-            <component
-              :is="accordionIcon" />
-          </div>
-          <slot name="title">
-            <Subheading>
-              {{ title }}
-            </Subheading>
-          </slot>
-        </div>
-        <slot
-          v-if="!noCaret"
-          name="caret"
-          :expanded="model">
-          <ChevronUp
-            v-if="model"
-            class="accordion__item__caret"
-            data-testid="accordion-item-caret" />
-          <ChevronDown
-            v-else
-            class="accordion__item__caret"
-            data-testid="accordion-item-caret" />
-        </slot>
-      </div>
-    </slot>
-
-    <p-collapse
-      :model-value="model"
-      class="accordion__item__content"
-      :class="contentClass"
-      data-testid="accordion-item-content">
-      <slot :expanded="model" />
-    </p-collapse>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useVModel } from '../input'
-import type {
-  VNode,
-  PropType,
-  Component,
-} from 'vue-demi'
-import {
-  computed,
-  watch,
-  h,
-} from 'vue-demi'
-import Subheading from '../subheading/Subheading.vue'
-import pCollapse from '../collapse/Collapse.vue'
-import ChevronUp from '@privyid/persona-icon/vue/chevron-up/16.vue'
-import ChevronDown from '@privyid/persona-icon/vue/chevron-down/16.vue'
-
-defineOptions({ name: 'AccordionItem' })
-
-const props = defineProps({
-  modelValue: {
-    type   : Boolean,
-    default: false,
-  },
-  title: {
-    type   : String,
-    default: '',
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  noCaret: {
-    type   : Boolean,
-    default: false,
-  },
-  icon: {
-    type: [
-      String,
-      Object,
-      Function,
-    ] as PropType<string | Component>,
-    default: undefined,
-  },
-  titleClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  contentClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  iconClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [boolean],
-  'expand': [],
-  'collapse': [],
-}>()
-
-const model = useVModel(props)
-
-const classNames = computed(() => {
-  const result: string[] = ['accordion__item']
-
-  if (props.disabled)
-    result.push('accordion__item--disabled')
-
-  if (model.value)
-    result.push('expanded')
-  else
-    result.push('collapsed')
-
-  return result
-})
-
-const accordionIcon = computed(() => {
-  if (props.icon) {
-    if (typeof props.icon === 'string') {
-      return () => h('img', {
-        'src'        : props.icon,
-        'max-width'  : '100%',
-        'height'     : 'auto',
-        'data-testid': 'accordion-item-icon-image',
-      })
-    }
-
-    return props.icon
-  }
-})
-
-function toggle () {
-  if (!props.disabled)
-    model.value = !model.value
-}
-
-watch(model, (value) => {
-  if (value)
-    emit('expand')
-  else
-    emit('collapse')
-})
-
-defineSlots<{
-  'activator'(props: { toggle: () => void, expanded: boolean }): VNode[],
-  'caret'(props: { expanded: boolean }): VNode[],
-  'default'(props: { expanded: boolean }): VNode[],
-}>()
-</script>
-
-<style lang="postcss">
-.accordion__item {
-  --p-accordion-bg: theme(backgroundColor.default.DEFAULT);
-  --p-accordion-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
-  --p-accordion-collapsed-border: theme(borderColor.default.DEFAULT);
-  --p-accordion-collapsed-border-dark: theme(borderColor.dark.default.DEFAULT);
-  --p-accordion-expanded-border: theme(borderColor.default.DEFAULT);
-  --p-accordion-expanded-border-dark: theme(borderColor.dark.default.DEFAULT);
-  --p-accordion-expanded-activator-bg: theme(backgroundColor.default.alpha);
-  --p-accordion-expanded-activator-bg-dark: theme(backgroundColor.dark.default.alpha);
-  --p-accordion-expanded-activator-color: theme(textColor.default);
-  --p-accordion-expanded-activator-color-dark: theme(textColor.dark.default);
-
-  @apply w-full bg-[color:var(--p-accordion-bg)];
-  @apply dark:bg-[color:var(--p-accordion-bg-dark)];
-
-  &:not(.accordion &) {
-    @apply rounded border;
-
-    &.collapsed {
-      @apply border-[color:var(--p-accordion-collapsed-border)];
-      @apply dark:border-[color:var(--p-accordion-collapsed-border-dark)];
-    }
-
-    &.expanded {
-      @apply border-[color:var(--p-accordion-expanded-border)];
-      @apply dark:border-[color:var(--p-accordion-expanded-border-dark)];
-    }
-
-    .accordion__item__activator {
-      @apply bg-[color:var(--p-accordion-expanded-activator-bg)];
-      @apply dark:bg-[color:var(--p-accordion-expanded-activator-bg-dark)];
-    }
-  }
-
-  &__activator {
-    @apply flex justify-between items-center p-4 cursor-pointer space-x-2;
-
-    .expanded & {
-      @apply bg-[color:var(--p-accordion-expanded-activator-bg)];
-      @apply dark:bg-[color:var(--p-accordion-expanded-activator-bg-dark)];
-
-      .accordion__item__title,
-      .subheading {
-        @apply text-[color:var(--p-accordion-expanded-activator-color)];
-        @apply dark:text-[color:var(--p-accordion-expanded-activator-color-dark)];
-      }
-    }
-  }
-
-  &__title {
-    @apply grow flex;
-  }
-
-  &__caret {
-    @apply flex-shrink-0;
-  }
-
-  &:is(&--disabled) {
-    @apply pointer-events-none;
-
-    > .accordion__item__activator {
-      @apply opacity-50;
-    }
-  }
-}
-</style>