@privyid/persona 1.0.0-rc.9 → 1.1.0

package/dist/components/accordion/AccordionItems.vue.d.ts

@@ -3,7 +3,7 @@
  * https://github.com/vuejs/rfcs/discussions/585
  */
 import type { PropType } from 'vue-demi';
-declare const _default: import("vue-demi").DefineComponent<{
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<number | number[]>;
         default: undefined;
@@ -16,9 +16,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
+}>, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
     [key: string]: any;
-}>[], unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}>[], {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<number | number[]>;
         default: undefined;
@@ -31,11 +31,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & {
+}>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     modelValue: number | number[];
     multiple: boolean;
     noCaret: boolean;
-}, {}>;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/aspect-ratio/index.d.ts

@@ -1,3 +1,3 @@
 import type { Directive } from 'vue-demi';
 export declare const pAspectRatio: Directive<HTMLElement, number>;
-export declare const vPAspectRatio: import("vue-demi").ObjectDirective<HTMLElement, number>;
+export declare const vPAspectRatio: import("vue-demi").ObjectDirective<HTMLElement, number, string, string>;

package/dist/components/avatar/Avatar.vue

@@ -138,8 +138,8 @@ onMounted(() => {
 
 <style lang="postcss">
 .avatar {
-  @apply inline-flex items-center justify-center overflow-hidden text-subtle bg-subtle;
-  @apply dark:text-dark-subtle dark:bg-dark-subtle;
+  @apply inline-flex items-center justify-center overflow-hidden text-subtle bg-base;
+  @apply dark:text-dark-subtle dark:bg-dark-base;
 
   &:not(&--square) {
     @apply rounded-full;

package/dist/components/avatar/AvatarTruncate.vue.d.ts

@@ -4,28 +4,28 @@
  */
 import type { PropType } from 'vue-demi';
 import type { SizeVariant } from '.';
-declare const _default: import("vue-demi").DefineComponent<{
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
     size: {
         type: PropType<SizeVariant>;
         default: string;
     };
     length: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-}, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
+}>, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
     [key: string]: any;
-}>[], unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}>[], {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
     size: {
         type: PropType<SizeVariant>;
         default: string;
     };
     length: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-}>>, {
+}>> & Readonly<{}>, {
     size: SizeVariant;
     length: string | number;
-}, {}>;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/badge/Badge.vue

@@ -48,8 +48,8 @@ const classNames = computed(() => {
   * Set global style
   * of badge
   */
-  --p-color-primary-light: lighten(theme(colors.brand.accent), 40%);
-  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent), 40%);
+  --p-color-primary-light: lighten(theme(colors.brand.accent.DEFAULT), 40%);
+  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent.DEFAULT), 40%);
 
   @apply inline-block font-bold text-xs px-2 py-0.5 rounded-full space-x-1 align-middle;
 
@@ -161,8 +161,8 @@ const classNames = computed(() => {
   &--variant-light {
     &.badge {
       &--default {
-        --p-bg-variant-light: theme(backgroundColor.subtle.alpha);
-        --p-bg-dark-variant-light: theme(backgroundColor.dark.subtle.alpha);
+        --p-bg-variant-light: theme(backgroundColor.emphasis-alpha);
+        --p-bg-dark-variant-light: theme(backgroundColor.dark.emphasis-alpha);
         @apply bg-[color:var(--p-bg-variant-light)];
         @apply dark:bg-[color:var(--p-bg-dark-variant-light)];
       }

package/dist/components/banner/Banner.vue

@@ -167,8 +167,8 @@ defineSlots<{
   }
 
   &&--info {
-    @apply bg-base;
-    @apply dark:bg-dark-base;
+    @apply bg-ground;
+    @apply dark:bg-dark-ground;
 
     .banner__icon {
       @apply text-info;

package/dist/components/button/Button.vue

@@ -165,6 +165,15 @@ defineSlots<{
   --p-button-md-padding-x: theme(spacing.5);
   --p-button-lg-padding-x: theme(spacing.8);
 
+  /**
+  * only for button
+  * variant link
+  */
+  --p-button-xs-padding-y: theme(spacing[0.5]);
+  --p-button-sm-padding-y: theme(spacing.1);
+  --p-button-md-padding-y: theme(spacing[2.5]);
+  --p-button-lg-padding-y: theme(spacing.4);
+
   @apply inline-flex align-middle justify-center font-medium no-underline hover:no-underline disabled:opacity-50 disabled:pointer-events-none transition-all ease-in-out duration-200;
 
   > svg {
@@ -181,18 +190,34 @@ defineSlots<{
   */
   &&--xs {
     @apply px-[var(--p-button-xs-padding-x)] py-[2px] gap-1 text-sm rounded-xs;
+
+    &:where(.btn--variant-link) {
+      @apply py-[var(--p-button-xs-padding-y)];
+    }
   }
 
   &&--sm {
     @apply px-[var(--p-button-sm-padding-x)] py-1 gap-2 text-base tracking-wider rounded-sm;
+
+    &:where(.btn--variant-link) {
+      @apply py-[var(--p-button-sm-padding-y)];
+    }
   }
 
   &&--md {
     @apply px-[var(--p-button-md-padding-x)] py-[10px] gap-3 text-base tracking-wider rounded;
+
+    &:where(.btn--variant-link) {
+      @apply py-[var(--p-button-md-padding-y)];
+    }
   }
 
   &&--lg {
     @apply px-[var(--p-button-lg-padding-x)] py-4 gap-4 text-base tracking-wider rounded;
+
+    &:where(.btn--variant-link) {
+      @apply py-[var(--p-button-lg-padding-y)];
+    }
   }
 
   /*
@@ -205,8 +230,8 @@ defineSlots<{
 
     &.btn {
       &--default {
-        @apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha hover:text-default focus:text-default;
-        @apply dark:bg-dark-default-alpha focus:dark:bg-dark-subtle-alpha active:dark:bg-dark-subtle-alpha hover:dark:text-dark-default focus:dark:text-dark-default;
+        @apply bg-default-alpha focus:bg-default-alpha active:bg-default-alpha hover:text-default focus:text-default;
+        @apply dark:bg-dark-default-alpha focus:dark:bg-dark-default-alpha active:dark:bg-dark-default-alpha hover:dark:text-dark-default focus:dark:text-dark-default;
 
         /* Border */
         @apply text-default border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
@@ -342,12 +367,12 @@ defineSlots<{
   * Button input variant
   */
   &&--variant-input {
-    @apply border border-solid border-muted text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
-    @apply dark:border-dark-muted dark:text-dark-subtle dark:bg-dark-default hover:dark:border-dark-subtle focus:dark:border-dark-subtle active:dark:outline-dark-default;
+    @apply border border-solid border-subtlest text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
+    @apply dark:border-dark-subtlest dark:text-dark-subtle dark:bg-dark-default hover:dark:border-dark-subtle focus:dark:border-dark-subtle active:dark:outline-dark-default;
 
     .state--disabled & {
-      @apply bg-subtle border-muted pointer-events-none text-muted;
-      @apply dark:bg-dark-subtle dark:border-dark-muted dark:text-dark-muted;
+      @apply bg-base border-subtlest pointer-events-none text-muted;
+      @apply dark:bg-dark-base dark:border-dark-subtlest dark:text-dark-muted;
     }
 
     .state--error & {

package/dist/components/card/Card.vue

@@ -57,7 +57,7 @@ import type { PropType, VNode } from 'vue-demi'
 import { computed, ref } from 'vue-demi'
 import IconClose from '@privyid/persona-icon/vue/close/16.vue'
 import Heading from '../heading/Heading.vue'
-import type { ElementVariant } from '.'
+import type { ElementVariant, SpacingVariant } from '.'
 
 const props = defineProps({
   element: {
@@ -76,6 +76,10 @@ const props = defineProps({
     type   : Boolean,
     default: false,
   },
+  readonly: {
+    type   : Boolean,
+    default: false,
+  },
   callout: {
     type   : Boolean,
     default: false,
@@ -88,6 +92,10 @@ const props = defineProps({
     type   : [String, Array],
     default: undefined,
   },
+  spacing: {
+    type   : String as PropType<SpacingVariant>,
+    default: 'md',
+  },
 })
 
 const emit = defineEmits<{
@@ -105,9 +113,15 @@ const classNames = computed(() => {
   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
 })
 
@@ -136,7 +150,7 @@ defineSlots<{
 * 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   : May 23, 2022
+* Last Update   : Nov 08, 2024
 */
 .card {
   --p-card-padding-x: theme(spacing.6);
@@ -147,8 +161,10 @@ defineSlots<{
   --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-md;
+  @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)];
 
   /**
@@ -156,7 +172,29 @@ defineSlots<{
   * has 8px rounded
   */
   .card {
-    @apply rounded;
+    @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);
+    }
   }
 
   /*
@@ -213,6 +251,15 @@ defineSlots<{
   * 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;
     }
@@ -223,8 +270,16 @@ defineSlots<{
   * If Card disabled
   */
   &&--disabled {
-    @apply bg-subtle;
-    @apply dark:bg-dark-subtle;
+    @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;
   }
 
   /**
@@ -236,6 +291,10 @@ defineSlots<{
   }
 
   &__header {
+    .heading {
+      @apply font-medium leading-none;
+    }
+
     &&--default {
       @apply flex justify-between items-center;
     }
@@ -257,6 +316,11 @@ defineSlots<{
       @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 {
@@ -269,8 +333,13 @@ defineSlots<{
 
     &&--disabled,
     &.card--disabled {
-      @apply bg-subtle;
-      @apply dark:bg-dark-subtle;
+      @apply opacity-50 cursor-not-allowed;
+    }
+
+    &&--readonly,
+    &.card--readonly {
+      @apply bg-ground cursor-not-allowed;
+      @apply dark:bg-dark-ground;
     }
 
     &.card--disabled {
@@ -279,7 +348,7 @@ defineSlots<{
   }
 
   &__footer {
-    @apply pb-[var(--p-card-padding-y)] px-[var(--p-card-padding-x)] pt-3;
+    @apply pb-[var(--p-card-padding-y)] px-[var(--p-card-padding-x)] pt-8;
   }
 }
 </style>

package/dist/components/card/CardSection.vue

@@ -54,6 +54,10 @@ const props = defineProps({
     type   : Boolean,
     default: false,
   },
+  readonly: {
+    type   : Boolean,
+    default: false,
+  },
 })
 
 const classNames = computed(() => {
@@ -62,6 +66,9 @@ const classNames = computed(() => {
   if (props.disabled)
     result.push('card__section--disabled')
 
+  if (props.readonly)
+    result.push('card__section--readonly')
+
   return result
 })
 

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

@@ -1 +1,2 @@
 export type ElementVariant = 'div' | 'section' | 'article';
+export type SpacingVariant = 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/checkbox/Checkbox.vue

@@ -191,12 +191,12 @@ defineSlots<{
 
     &:not(.checkbox--checked, .checkbox--indeterminate) {
       .checkbox__icon {
-        @apply bg-subtle border-subtle;
-        @apply dark:bg-dark-subtle dark:border-dark-subtle;
+        @apply bg-base border-subtle;
+        @apply dark:bg-dark-base dark:border-dark-subtle;
 
         > svg {
-          @apply fill-subtle;
-          @apply dark:fill-dark-subtle;
+          @apply fill-base;
+          @apply dark:fill-dark-base;
         }
       }
     }

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

@@ -4,4 +4,4 @@ export interface CheckboxProps extends InputProps<unknown> {
     value: unknown;
     uncheckedValue: unknown;
 }
-export declare function useVModel(props: CheckboxProps): import("vue-demi").Ref<boolean>;
+export declare function useVModel(props: CheckboxProps): import("vue-demi").Ref<boolean, boolean>;

package/dist/components/contextual-bar/ContextualBar.vue

@@ -402,8 +402,8 @@ defineSlots<{
   * and neutral
   */
   &&--info {
-    @apply bg-base text-default;
-    @apply dark:bg-dark-base dark:text-dark-default;
+    @apply bg-ground text-default;
+    @apply dark:bg-dark-ground dark:text-dark-default;
 
     .contextual-bar {
       &__icon {

package/dist/components/datepicker/Datepicker.vue

@@ -4,6 +4,7 @@
     class="datepicker"
     data-testid="datepicker"
     aria-label="datepicker"
+    :placement="placement"
     :class="classNames"
     :disabled="disabled">
     <template #activator>
@@ -63,6 +64,7 @@ import type { CalendarMode } from '../calendar/adapter/adapter'
 import { useVModel } from '../input'
 import IconCalendar from '@privyid/persona-icon/vue/calendar/16.vue'
 import type { SizeVariant } from '../button'
+import type { Placement } from '@floating-ui/dom'
 
 defineOptions({ inheritAttrs: false })
 
@@ -139,6 +141,10 @@ const props = defineProps({
     type   : String,
     default: undefined,
   },
+  placement: {
+    type   : String as PropType<Placement>,
+    default: 'bottom-start',
+  },
 })
 
 const emit = defineEmits<{

package/dist/components/dialog/Dialog.vue

@@ -4,7 +4,7 @@
     :key="id"
     v-model="modal"
     v-bind="context.attrs"
-    class="dialog"
+    class="modal-dialog"
     :title="context.title"
     :size="context.size"
     :centered="context.centered"
@@ -15,7 +15,7 @@
     @close="onCancel">
     <template #header>
       <template v-if="dialogIcon">
-        <div class="dialog__icon">
+        <div class="modal-dialog__icon">
           <component
             :is="dialogIcon"
             :class="context.iconClass"
@@ -139,7 +139,7 @@ defineExpose({
 </script>
 
 <style lang="postcss">
-.dialog {
+.modal-dialog {
   --p-modal-z-index: theme(zIndex.dialog);
 
   &__icon {

package/dist/components/dialog/DialogFooter.vue

@@ -96,10 +96,10 @@ const emit = defineEmits<{
 }>()
 
 const footerClassNames = computed(() => {
-  const result: string[] = ['footer']
+  const result: string[] = ['modal-dialog__footer']
 
   if (props.align)
-    result.push(`footer--align-${props.align}`)
+    result.push(`modal-dialog__footer--align-${props.align}`)
 
   return result
 })
@@ -114,22 +114,24 @@ function confirm (): void {
 </script>
 
 <style lang="postcss">
-.footer {
-  @apply flex items-center space-x-3;
+.modal-dialog {
+  &__footer {
+    @apply flex items-center space-x-3;
 
-  &--align {
-    &-left,
-    &-start {
-      @apply justify-start;
-    }
+    &--align {
+      &-left,
+      &-start {
+        @apply justify-start;
+      }
 
-    &-right,
-    &-end {
-      @apply justify-end;
-    }
+      &-right,
+      &-end {
+        @apply justify-end;
+      }
 
-    &-center {
-      @apply justify-center;
+      &-center {
+        @apply justify-center;
+      }
     }
   }
 }

package/dist/components/divider/Divider.vue

@@ -29,8 +29,8 @@ const classNames = computed(() => {
 
 <style lang="postcss">
 .divider {
-  @apply bg-subtle-alpha;
-  @apply dark:bg-dark-subtle-alpha my-2;
+  @apply bg-emphasis-alpha;
+  @apply dark:bg-dark-emphasis-alpha my-2;
 
   &&--horizontal {
     @apply w-full h-[1px];
@@ -42,8 +42,8 @@ const classNames = computed(() => {
     @apply dark:border-dark-subtle dark:bg-transparent;
 
     &::before {
-      @apply content-[''] bg-subtle-alpha w-[1px] h-full;
-      @apply dark:bg-dark-subtle-alpha;
+      @apply content-[''] bg-emphasis-alpha w-[1px] h-full;
+      @apply dark:bg-dark-emphasis-alpha;
     }
   }
 
@@ -58,8 +58,8 @@ const classNames = computed(() => {
   }
 
   .state--disabled & {
-    @apply bg-subtle border-subtle pointer-events-none text-muted;
-    @apply dark:bg-dark-subtle dark:border-dark-subtle dark:text-dark-muted;
+    @apply bg-base border-subtle pointer-events-none text-muted;
+    @apply dark:bg-dark-base dark:border-dark-subtle dark:text-dark-muted;
   }
 }
 </style>

package/dist/components/dropzone/Dropzone.vue

@@ -213,10 +213,10 @@ defineSlots<{
 
 <style lang="postcss">
 .dropzone {
-  @apply cursor-pointer block w-full;
+  @apply cursor-pointer block w-full relative;
 
   &__input {
-    @apply hidden;
+    @apply absolute w-[.1px] h-[.1px] opacity-0 overflow-hidden -z-1 bottom-0 right-0;
   }
 
   * {

package/dist/components/filterbar/Filterbar.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue-demi';
 import type { FilterItem } from '.';
-declare const _default: import("vue-demi").DefineComponent<{
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
     schema: {
         type: PropType<FilterItem[]>;
         default: () => never[];
@@ -9,13 +9,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<Record<string, unknown>>;
         default: () => {};
     };
-}, {
-    model: import("vue-demi").Ref<Record<string, unknown>>;
+}>, {
+    model: import("vue-demi").Ref<Record<string, unknown>, Record<string, unknown>>;
     pinnedItems: import("vue-demi").ComputedRef<FilterItem[]>;
     getValue: (key: string) => unknown;
     setValue: (key: string, value: unknown) => void;
     reset: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
     schema: {
         type: PropType<FilterItem[]>;
         default: () => never[];
@@ -24,10 +24,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<Record<string, unknown>>;
         default: () => {};
     };
-}>> & {
+}>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     modelValue: Record<string, unknown>;
     schema: FilterItem[];
-}, {}>;
+}, {}, {
+    Button: any;
+    Dropdown: any;
+    Date: any;
+    Select: any;
+    Multiselect: any;
+    Toggle: any;
+}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
 export default _default;