@privyid/persona 0.14.0 → 0.15.0

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

@@ -56,8 +56,8 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>>, {
     variant: StyleVariant;
     size: SizeVariant;
-    color: ColorVariant;
     href: string;
+    color: ColorVariant;
     icon: boolean;
     pill: boolean;
 }, {}>;

package/dist/components/dropdown/Dropdown.vue

@@ -268,6 +268,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .dropdown {
+  --p-dropdown-z-index: theme(zIndex.dropdown);
   --p-dropdown-size-lg: 30rem; /* 480px */
   --p-dropdown-size-md: 20rem; /* 320px */
   --p-dropdown-size-sm: 15rem; /* 240px */
@@ -275,7 +276,7 @@ export default defineComponent({
   @apply relative inline-flex;
 
   &__menu {
-    @apply max-h-64 border rounded bg-default z-10 border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
+    @apply max-h-64 border rounded bg-default z-[var(--p-dropdown-z-index)] border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
     @apply dark:bg-dark-default dark:border-dark-default;
 
     &__container {

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

@@ -122,8 +122,8 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     variant: StyleVariant;
     size: SizeVariant;
-    color: ColorVariant;
     text: string;
+    color: ColorVariant;
     icon: boolean;
     pill: boolean;
     modelValue: boolean;

package/dist/components/nav/NavItemDropdown.vue

@@ -10,7 +10,8 @@
       :size="size"
       :placement="placement"
       :no-caret="noCaret"
-      :menu-class="menuClass">
+      :menu-class="menuClass"
+      :menu-size="menuSize">
       <template #button-content>
         <slot name="button-content">
           {{ text }}
@@ -63,6 +64,10 @@ export default defineComponent({
         Object
       ],
       default: void 0
+    },
+    menuSize: {
+      type: String,
+      default: "sm"
     }
   },
   models: {

package/dist/components/nav/NavItemDropdown.vue.d.ts

@@ -1,6 +1,7 @@
 import { PropType } from 'vue-demi';
 import { Placement } from '@floating-ui/core';
 import type { SizeVariant, StyleVariant } from '../button';
+import { MenuSizeVariant } from '../dropdown';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
@@ -34,6 +35,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
+    menuSize: {
+        type: PropType<MenuSizeVariant>;
+        default: string;
+    };
 }, {
     model: import("vue-demi").Ref<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
@@ -69,6 +74,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
+    menuSize: {
+        type: PropType<MenuSizeVariant>;
+        default: string;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -80,5 +89,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     placement: Placement;
     noCaret: boolean;
     menuClass: string | Record<string, any> | unknown[];
+    menuSize: MenuSizeVariant;
 }, {}>;
 export default _default;

package/dist/components/navbar/Navbar.vue

@@ -38,6 +38,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    sticky: {
+      type: Boolean,
+      default: false
+    },
     condensed: {
       type: Boolean,
       default: false
@@ -56,6 +60,8 @@ export default defineComponent({
       const result = [""];
       if (props.fixed)
         result.push("navbar--fixed");
+      if (props.sticky)
+        result.push("navbar--sticky");
       if (props.variant)
         result.push(`navbar--${props.variant}`);
       if (props.toggleable)
@@ -82,6 +88,7 @@ export default defineComponent({
 <style lang="postcss">
 .navbar {
   --p-navbar-z-index: theme(zIndex.fixed);
+  --p-navbar-sticky-top: theme(spacing.0);
   --p-navbar-collapse-max-height: 20rem; /** 320px */
 
   @apply bg-default relative p-3 flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
@@ -91,6 +98,10 @@ export default defineComponent({
     @apply fixed left-0 top-0 w-full z-[var(--p-navbar-z-index)];
   }
 
+  &&--sticky {
+    @apply sticky top-[var(--p-navbar-sticky-top)] z-sticky;
+  }
+
   &&--shadow {
     @apply shadow-lg transition-shadow duration-150 ease-in-out;
   }
@@ -174,6 +185,10 @@ export default defineComponent({
             @apply static shadow-none border-0 bg-base rounded-t-none;
             @apply dark:bg-dark-base;
 
+            &:where(.dropdown__menu--sm, .dropdown__menu--md, .dropdown__menu--lg) {
+              @apply w-full;
+            }
+
             &__container {
               .dropdown__item {
                 @apply first:rounded-t-none;
@@ -206,9 +221,7 @@ export default defineComponent({
         }
       }
 
-      .nav__item,
-      .nav__text,
-      .nav__form {
+      :where(.nav__item, .nav__text, .nav__form) {
         @apply w-full;
       }
     }

package/dist/components/navbar/Navbar.vue.d.ts

@@ -14,6 +14,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     condensed: {
         type: BooleanConstructor;
         default: boolean;
@@ -35,6 +39,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     condensed: {
         type: BooleanConstructor;
         default: boolean;
@@ -44,5 +52,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     variant: StyleVariant;
     toggleable: ToggleableVariant | undefined;
     condensed: boolean;
+    sticky: boolean;
 }, {}>;
 export default _default;

package/dist/components/pdf-text/PdfText.vue.d.ts

@@ -148,8 +148,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     size: number;
-    color: string;
     text: string;
+    color: string;
     modelValue: string | File;
     label: string;
     modelModifiers: ModelModifier;

package/dist/components/sidebar/Sidebar.vue

@@ -11,6 +11,7 @@
       ref="sidebarMenus"
       data-testid="sidebar-menus"
       :data-sidebar-menu="brandHeight"
+      :data-bottom-menu="isBottomMenu"
       class="sidebar__menus"
       :style="{ 'padding-bottom': bottomHeight }">
       <slot />
@@ -30,7 +31,9 @@ import { templateRef, useElementSize } from "@vueuse/core";
 import {
   defineComponent,
   computed,
-  provide
+  ref,
+  provide,
+  onMounted
 } from "vue-demi";
 import { SIDEBAR_SETTINGS } from ".";
 import { useSelector } from "../pdf-object/utils/use-selector";
@@ -53,6 +56,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    sticky: {
+      type: Boolean,
+      default: false
+    },
     toggleable: {
       type: String,
       default: void 0
@@ -75,15 +82,15 @@ export default defineComponent({
     });
     const sidebar = templateRef("sidebar");
     const sidebarBrand = useSelector(".sidebar__brand", sidebar);
+    const brand = useElementSize(sidebarBrand);
     const sidebarMenus = templateRef("sidebarMenus");
     const sidebarBottom = useSelector(".sidebar__bottom", sidebarMenus);
     const { height } = useElementSize(sidebarBottom);
-    const brand = useElementSize(sidebarBrand);
     const brandHeight = computed(() => {
-      return slots.brand ? `${brand.height.value + 16}px` : 0;
+      return slots.brand ? `${brand.height.value + titleHeight.value + 16}px` : 0;
     });
     const bottomHeight = computed(() => {
-      return slots.bottom && !slots.default ? 0 : `${height.value + 24}px`;
+      return isBottomMenu.value && !isDefault.value || !isBottomMenu.value && isDefault.value ? 0 : `${height.value + 16}px`;
     });
     const model = useVModel(props);
     const classNames = computed(() => {
@@ -96,16 +103,28 @@ export default defineComponent({
         result.push(`sidebar--${props.variant}`);
       if (props.fixed)
         result.push("sidebar--fixed");
+      if (props.sticky)
+        result.push("sidebar--sticky");
       if (props.toggleable)
         result.push(`sidebar--toggleable sidebar--toggleable-${props.toggleable}`);
       if (props.toggleable && props.fixed && model.value)
         result.push("sidebar--show");
       return result;
     });
+    const titleHeight = ref(0);
+    const isBottomMenu = ref(false);
+    const isDefault = ref(false);
+    onMounted(() => {
+      titleHeight.value = document.querySelectorAll(".sidebar .nav--has-title").length * 0.25 * 20;
+      isBottomMenu.value = document.querySelectorAll(".sidebar .sidebar__nav--bottom").length > 0;
+      isDefault.value = document.querySelectorAll(".sidebar .sidebar__nav:not(.sidebar__nav--bottom)").length > 0;
+    });
     return {
       classNames,
       bottomHeight,
-      brandHeight
+      brandHeight,
+      isBottomMenu,
+      isDefault
     };
   }
 });
@@ -118,6 +137,7 @@ export default defineComponent({
   --p-sidebar-bg: theme(backgroundColor.DEFAULT);
   --p-sidebar-bg-dark: theme(backgroundColor.dark.DEFAULT);
   --p-sidebar-z-index: theme(zIndex.fixed);
+  --p-sidebar-sticky-top: theme(spacing.0);
 
   @apply bg-[color:var(--p-sidebar-bg)] px-2 py-4;
   @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
@@ -154,8 +174,12 @@ export default defineComponent({
     }
 
     .sidebar__bottom {
-      @apply absolute -bottom-4 w-[calc(100%+1rem)] -left-2 bg-[color:var(--p-sidebar-bg)];
+      @apply absolute -bottom-2 w-[calc(100%+1rem)] -left-2 bg-[color:var(--p-sidebar-bg)];
       @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
+
+      .sidebar__nav {
+        @apply px-2;
+      }
     }
 
     /**
@@ -193,6 +217,13 @@ export default defineComponent({
     }
   }
 
+  /**
+  * Sticky sidebar
+  */
+  &&--sticky {
+    @apply sticky top-[var(--p-sidebar-sticky-top)] z-sticky;
+  }
+
   /**
   * Narrow sidebar
   * is 60px width

package/dist/components/sidebar/Sidebar.vue.d.ts

@@ -19,6 +19,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     toggleable: {
         type: PropType<ToggleableVariant>;
         default: undefined;
@@ -31,6 +35,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     classNames: import("vue-demi").ComputedRef<string[]>;
     bottomHeight: import("vue-demi").ComputedRef<string | 0>;
     brandHeight: import("vue-demi").ComputedRef<string | 0>;
+    isBottomMenu: import("vue-demi").Ref<boolean>;
+    isDefault: import("vue-demi").Ref<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<StyleVariant>;
@@ -48,6 +54,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     toggleable: {
         type: PropType<ToggleableVariant>;
         default: undefined;
@@ -65,5 +75,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     modelValue: boolean;
     align: AlignVariant;
     toggleable: ToggleableVariant;
+    sticky: boolean;
 }, {}>;
 export default _default;

package/dist/components/sidebar/SidebarBrand.vue

@@ -57,9 +57,19 @@ export default defineComponent({
 
     a {
       @apply no-underline;
+
+      & > img {
+        @apply max-w-full h-auto;
+      }
+
+      .sidebar--wide & {
+        & > img {
+          @apply h-7 w-auto;
+        }
+      }
     }
 
-    img {
+    & > img {
       @apply max-w-full h-auto;
     }
 
@@ -78,7 +88,7 @@ export default defineComponent({
     .sidebar--wide & {
       @apply px-3;
 
-      img {
+      & > img {
         @apply h-7 w-auto;
       }
     }

package/dist/components/sidebar-menu/SidebarMenu.vue

@@ -3,6 +3,7 @@
     data-testid="sidebar-menu"
     :type="type"
     :fixed="fixed"
+    :sticky="sticky"
     :toggleable="toggleable"
     :align="align">
     <template #brand>
@@ -89,6 +90,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    sticky: {
+      type: Boolean,
+      default: false
+    },
     type: {
       type: String,
       default: "wide"

package/dist/components/sidebar-menu/SidebarMenu.vue.d.ts

@@ -12,6 +12,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     type: {
         type: PropType<TypeVariant>;
         default: string;
@@ -33,6 +37,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     type: {
         type: PropType<TypeVariant>;
         default: string;
@@ -50,6 +58,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     type: TypeVariant;
     align: AlignVariant;
     toggleable: ToggleableVariant;
+    sticky: boolean;
     menus: Menu[];
 }, {}>;
 export default _default;

package/dist/components/signature-text/SignatureText.vue.d.ts

@@ -84,8 +84,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>>, {
-    color: string;
     text: string;
+    color: string;
     modelValue: string | File;
     modelModifiers: ModelModifier;
     font: string;

package/dist/components/toast/Toast.vue

@@ -110,8 +110,6 @@ export default defineComponent({
   * global style
   * of toast
   */
-  --p-toast-z-index: theme(zIndex.toast);
-
   @apply flex shadow-xl rounded w-72 md:w-96 overflow-hidden;
 
   .toast__icon,

package/dist/components/toast/ToastContainer.vue

@@ -44,6 +44,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .toast-container {
+  --p-toast-z-index: theme(zIndex.toast);
   @apply z-[var(--p-toast-z-index)] fixed top-0 right-0 flex flex-col space-y-2 max-h-screen overflow-visible;
 }
 

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.14.0"
+  "version": "0.15.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -67,7 +67,7 @@
     "@zxing/library": "0.20.0",
     "chart.js": "4.3.0",
     "core-js": "3",
-    "date-fns": "2.29.3",
+    "date-fns": "2.30.0",
     "defu": "6.1.2",
     "fast-equals": "^4.0.3",
     "fuse.js": "6.6.2",
@@ -88,7 +88,7 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/tailwind-preset": "^0.14.0",
+    "@privyid/tailwind-preset": "^0.15.0",
     "postcss-custom-properties": "^12.1.11",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
@@ -96,11 +96,11 @@
     "vue-router": ">=4.0.0"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.3.0",
+    "@nuxt/module-builder": "^0.4.0",
     "@nuxt/schema": "3.3.3",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^0.14.0",
-    "@privyid/tailwind-preset": "^0.14.0",
+    "@privyid/browserslist-config": "^0.15.0",
+    "@privyid/tailwind-preset": "^0.15.0",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^1.2.0",
     "nuxt": "3.3.3",