@privyid/persona 0.13.1 → 0.14.0

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -60,7 +60,7 @@ export default defineComponent({
 <style lang="postcss">
 .breadcrumbs {
   &__item {
-    @apply inline-flex text-sm items-center;
+    @apply inline-flex text-sm items-center capitalize;
 
     &:last-child {
       & > .breadcrumbs__item__icon {

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -48,15 +48,19 @@ export default defineComponent({
 .breadcrumbs__item {
   &&--dropdown {
     .dropdown__activator {
-      @apply px-0 text-subtle bg-transparent border-transparent hover:shadow-none hover:border-transparent hover:bg-transparent focus:shadow-none focus:border-transparent focus:bg-transparent;
-      @apply dark:text-dark-subtle dark:bg-transparent dark:border-transparent hover:dark:border-transparent hover:dark:bg-transparent focus:dark:border-transparent focus:dark:bg-transparent;
+      &.btn.btn--default.btn--variant-solid {
+        @apply px-0 text-subtle bg-transparent border-transparent hover:shadow-none hover:border-transparent hover:bg-transparent focus:shadow-none focus:border-transparent focus:bg-transparent;
+        @apply dark:text-dark-subtle dark:bg-transparent dark:border-transparent hover:dark:border-transparent hover:dark:bg-transparent focus:dark:border-transparent focus:dark:bg-transparent;
+      }
     }
   }
 
   &&--active {
     .dropdown__activator {
-      @apply text-default;
-      @apply dark:text-dark-default;
+      &.btn.btn--default.btn--variant-solid {
+        @apply text-default;
+        @apply dark:text-dark-default;
+      }
 
       & > .dropdown__caret {
         @apply text-subtle;

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

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

package/dist/components/collapse/Collapse.vue

@@ -80,14 +80,4 @@ export default defineComponent({
     @apply hidden;
   }
 }
-
-.navbar {
-  &--collapse {
-    @apply basis-full flex-grow items-center;
-
-    &.collapse--show {
-      @apply pt-3;
-    }
-  }
-}
 </style>

package/dist/components/cropper/Cropper.vue

@@ -366,8 +366,7 @@ export default defineComponent({
   }
 
   &__preview {
-    background-image: url("./assets/ps-neutral.png");
-
+    @apply bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAGklEQVR4AWNYJYoK92ihwpGiAF0AXcMIUQAAbIfSgRmCFqkAAAAASUVORK5CYII=)];
     @apply flex w-full overflow-hidden h-auto relative aspect-compat-square select-none;
   }
 

package/dist/components/dropdown/Dropdown.vue

@@ -36,7 +36,7 @@
         ref="menu"
         data-testid="dropdown-menu"
         class="dropdown__menu"
-        :class="menuClass">
+        :class="[menuClass, containerSize]">
         <DropdownGroup
           ref="wizard"
           class="dropdown__menu__container">
@@ -132,6 +132,10 @@ export default defineComponent({
         Object
       ],
       default: void 0
+    },
+    menuSize: {
+      type: String,
+      default: "sm"
     }
   },
   models: {
@@ -156,6 +160,12 @@ export default defineComponent({
         result.push("dropdown--divider");
       return result;
     });
+    const containerSize = computed(() => {
+      const result = [""];
+      if (props.menuSize)
+        result.push(`dropdown__menu--${props.menuSize}`);
+      return result;
+    });
     function toggle() {
       if (!props.disabled) {
         if (isOpen.value)
@@ -247,6 +257,7 @@ export default defineComponent({
     return {
       isOpen,
       classNames,
+      containerSize,
       toggle,
       open,
       close
@@ -257,10 +268,14 @@ export default defineComponent({
 
 <style lang="postcss">
 .dropdown {
+  --p-dropdown-size-lg: 30rem; /* 480px */
+  --p-dropdown-size-md: 20rem; /* 320px */
+  --p-dropdown-size-sm: 15rem; /* 240px */
+
   @apply relative inline-flex;
 
   &__menu {
-    @apply max-h-64 border rounded w-full min-w-[15rem] bg-default z-10 border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
+    @apply max-h-64 border rounded bg-default z-10 border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
     @apply dark:bg-dark-default dark:border-dark-default;
 
     &__container {
@@ -276,6 +291,18 @@ export default defineComponent({
         }
       }
     }
+
+    &--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 {

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

@@ -1,6 +1,7 @@
 import { PropType } from 'vue-demi';
 import { Placement } from '@floating-ui/dom';
 import type { StyleVariant, ColorVariant, SizeVariant } from '../button';
+import type { MenuSizeVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
@@ -50,9 +51,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
+    menuSize: {
+        type: PropType<MenuSizeVariant>;
+        default: string;
+    };
 }, {
     isOpen: import("vue-demi").Ref<boolean>;
     classNames: import("vue-demi").ComputedRef<string[]>;
+    containerSize: import("vue-demi").ComputedRef<string[]>;
     toggle: () => void;
     open: () => void;
     close: () => void;
@@ -105,6 +111,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;
     onShow?: ((...args: any[]) => any) | undefined;
@@ -113,8 +123,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     variant: StyleVariant;
     size: SizeVariant;
     color: ColorVariant;
-    icon: boolean;
     text: string;
+    icon: boolean;
     pill: boolean;
     modelValue: boolean;
     disabled: boolean;
@@ -122,5 +132,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     noCaret: boolean;
     divider: boolean;
     menuClass: string | Record<string, any> | unknown[];
+    menuSize: MenuSizeVariant;
 }, {}>;
 export default _default;

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

@@ -1,4 +1,5 @@
 import { Ref, InjectionKey } from 'vue-demi';
+export type MenuSizeVariant = 'sm' | 'md' | 'lg';
 interface DropdownContext {
     close: () => void;
     open: () => void;

package/dist/components/modal/Modal.vue.d.ts

@@ -92,9 +92,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     size: SizeVariant;
+    text: string;
     dismissable: boolean;
     banner: boolean;
-    text: string;
     modelValue: boolean;
     title: string;
     centered: boolean;

package/dist/components/nav/NavItemDropdown.vue

@@ -82,6 +82,14 @@ export default defineComponent({
   &__item {
     &--dropdown {
       @apply ml-auto;
+
+      .dropdown {
+        &__menu {
+          .dropdown__item {
+            @apply px-3;
+          }
+        }
+      }
     }
   }
 

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

@@ -74,8 +74,8 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     variant: StyleVariant;
     size: SizeVariant;
-    icon: boolean;
     text: string;
+    icon: boolean;
     modelValue: boolean;
     placement: Placement;
     noCaret: boolean;

package/dist/components/navbar/Navbar.vue

@@ -82,6 +82,7 @@ export default defineComponent({
 <style lang="postcss">
 .navbar {
   --p-navbar-z-index: theme(zIndex.fixed);
+  --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;
   @apply dark:bg-dark-default;
@@ -151,5 +152,103 @@ export default defineComponent({
       }
     }
   }
+
+  &--collapse {
+    @apply basis-full flex-grow items-center max-h-[var(--p-navbar-collapse-max-height)] overflow-y-auto;
+
+    &.collapse--show {
+      @apply mt-3;
+
+      .nav__item--dropdown {
+        @apply ml-0;
+
+        .dropdown,
+        .btn {
+          @apply flex w-full;
+        }
+
+        .dropdown {
+          @apply flex-col;
+
+          &__menu {
+            @apply static shadow-none border-0 bg-base rounded-t-none;
+            @apply dark:bg-dark-base;
+
+            &__container {
+              .dropdown__item {
+                @apply first:rounded-t-none;
+              }
+            }
+          }
+
+          &.dropdown--open {
+            .dropdown__activator.btn.btn--md {
+              @apply rounded-b-none bg-base;
+              @apply dark:bg-dark-base;
+            }
+          }
+        }
+
+        &-icon {
+          .dropdown__menu__container {
+            .dropdown__item {
+              @apply px-11;
+            }
+          }
+        }
+
+        .btn {
+          @apply justify-start;
+
+          .dropdown__caret {
+            @apply ml-auto;
+          }
+        }
+      }
+
+      .nav__item,
+      .nav__text,
+      .nav__form {
+        @apply w-full;
+      }
+    }
+  }
+
+  &&--lines {
+    .navbar--collapse {
+
+      &.collapse--show {
+
+        .nav__item--dropdown {
+
+          .dropdown {
+            &__menu {
+              @apply rounded mt-2;
+
+              &__container {
+                .dropdown__item {
+                  @apply first:rounded-t;
+                }
+              }
+            }
+
+            &.dropdown--open {
+              .dropdown__activator.btn.btn--md {
+                @apply rounded-b-none bg-transparent;
+              }
+            }
+          }
+
+          &-icon {
+            .dropdown__menu__container {
+              .dropdown__item {
+                @apply px-3;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>

package/dist/components/sidebar/Sidebar.vue

@@ -1,18 +1,23 @@
 <template>
   <aside
+    ref="sidebar"
     data-testid="sidebar"
     class="sidebar"
     :class="classNames">
-    <slot name="brand" />
+    <slot
+      v-if="$slots.brand"
+      name="brand" />
     <div
       ref="sidebarMenus"
       data-testid="sidebar-menus"
+      :data-sidebar-menu="brandHeight"
       class="sidebar__menus"
-      :style="`padding-bottom: ${height+40}px`">
+      :style="{ 'padding-bottom': bottomHeight }">
       <slot />
 
       <div
         v-if="$slots.bottom"
+        data-testid="sidebar-bottom"
         class="sidebar__bottom">
         <slot name="bottom" />
       </div>
@@ -62,17 +67,24 @@ export default defineComponent({
     event: "update:modelValue"
   },
   emits: ["update:modelValue"],
-  setup(props) {
+  setup(props, { slots }) {
     provide(SIDEBAR_SETTINGS, {
       variant: props.variant,
       align: props.align,
       type: props.type
     });
+    const sidebar = templateRef("sidebar");
+    const sidebarBrand = useSelector(".sidebar__brand", sidebar);
     const sidebarMenus = templateRef("sidebarMenus");
     const sidebarBottom = useSelector(".sidebar__bottom", sidebarMenus);
-    const {
-      height
-    } = useElementSize(sidebarBottom);
+    const { height } = useElementSize(sidebarBottom);
+    const brand = useElementSize(sidebarBrand);
+    const brandHeight = computed(() => {
+      return slots.brand ? `${brand.height.value + 16}px` : 0;
+    });
+    const bottomHeight = computed(() => {
+      return slots.bottom && !slots.default ? 0 : `${height.value + 24}px`;
+    });
     const model = useVModel(props);
     const classNames = computed(() => {
       const result = [""];
@@ -90,7 +102,11 @@ export default defineComponent({
         result.push("sidebar--show");
       return result;
     });
-    return { classNames, height };
+    return {
+      classNames,
+      bottomHeight,
+      brandHeight
+    };
   }
 });
 </script>
@@ -130,7 +146,7 @@ export default defineComponent({
     @apply fixed z-[var(--p-sidebar-z-index)] top-0 h-full shadow-lg overflow-y-auto;
 
     .sidebar__menus {
-      @apply relative min-h-full;
+      @apply relative min-h-[calc(100%-v-bind(brandHeight))];
     }
 
     &:not(.sidebar--right) {
@@ -138,7 +154,7 @@ export default defineComponent({
     }
 
     .sidebar__bottom {
-      @apply absolute -bottom-4 pb-4 w-[calc(100%+1rem)] -left-2 bg-[color:var(--p-sidebar-bg)];
+      @apply absolute -bottom-4 w-[calc(100%+1rem)] -left-2 bg-[color:var(--p-sidebar-bg)];
       @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
     }
 

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

@@ -29,7 +29,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-    height: import("vue-demi").Ref<number>;
+    bottomHeight: import("vue-demi").ComputedRef<string | 0>;
+    brandHeight: import("vue-demi").ComputedRef<string | 0>;
 }, 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>;

package/dist/components/sidebar/SidebarNav.vue

@@ -80,10 +80,6 @@ export default defineComponent({
         @apply pr-3;
       }
     }
-
-    /* &&--bottom {
-      @apply absolute bottom-0;
-    } */
   }
 
   &&--narrow {

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

@@ -59,7 +59,9 @@
         </NavItem>
       </template>
     </SidebarNav>
-    <template #bottom>
+    <template
+      v-if="$slots.bottom"
+      #bottom>
       <slot name="bottom" />
     </template>
   </Sidebar>

package/dist/components/signature-text/utils/formatter.d.ts

@@ -1,2 +1,2 @@
-export declare function capitalize(text: string): string;
-export declare function formatName(text: string): string;
+export declare function capitalize(text: string): any;
+export declare function formatName(text: string): any;

package/dist/components/signature-text/utils/formatter.mjs

@@ -1,8 +1,8 @@
 export function capitalize(text) {
-  return String(text).toLowerCase().replace(/^\w|([\s,.])(\w)/gm, (i) => i.toUpperCase());
+  return String(text).toLowerCase().replaceAll(/^\w|([\s,.])(\w)/gm, (i) => i.toUpperCase());
 }
 export function formatName(text) {
   if (!text)
     return "";
-  return capitalize(String(text).trim().replace(/[^\s,.A-Za-z]+/g, ""));
+  return capitalize(String(text).trim().replaceAll(/[^\s,.A-Za-z]+/g, ""));
 }

package/dist/components/tour/TourDialog.vue.d.ts

@@ -94,8 +94,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     onPrev?: ((...args: any[]) => any) | undefined;
 }, {
     image: string;
-    dismissable: boolean;
     text: string;
+    dismissable: boolean;
     title: string;
     step: number;
     highlight: boolean;

package/dist/module.json

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -88,7 +88,7 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/tailwind-preset": "^0.13.1",
+    "@privyid/tailwind-preset": "^0.14.0",
     "postcss-custom-properties": "^12.1.11",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
@@ -99,8 +99,8 @@
     "@nuxt/module-builder": "^0.3.0",
     "@nuxt/schema": "3.3.3",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^0.13.1",
-    "@privyid/tailwind-preset": "^0.13.1",
+    "@privyid/browserslist-config": "^0.14.0",
+    "@privyid/tailwind-preset": "^0.14.0",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^1.2.0",
     "nuxt": "3.3.3",