@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/label/Label.vue

@@ -1,265 +0,0 @@
-<template>
-  <div
-    v-if="show"
-    data-testid="label"
-    :class="classNames">
-    <Dot
-      v-if="variant === 'dot'"
-      data-testid="dot"
-      :color="color" /> <slot />
-
-    <span
-      v-if="dismissable"
-      data-testid="label-dismiss"
-      class="label__dismiss"
-      @click="close">
-      <IconClose />
-    </span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed, ref } from 'vue-demi'
-import Dot from '../dot/Dot.vue'
-import type { StyleVariant } from '.'
-import type { ColorVariant, SizeVariant } from '../button'
-import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-
-const props = defineProps({
-  color: {
-    type   : String as PropType<ColorVariant>,
-    default: 'default',
-  },
-  variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'default',
-  },
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-  dismissable: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'dismissed': [MouseEvent],
-}>()
-
-const show = ref(true)
-
-const classNames = computed(() => {
-  const result: string[] = ['label']
-
-  if (props.color)
-    result.push(`label--${props.color}`)
-
-  if (props.variant)
-    result.push(`label--variant-${props.variant}`)
-
-  // eslint-disable-next-line unicorn/explicit-length-check
-  if (props.size)
-    result.push(`label--${props.size}`)
-
-  return result
-})
-
-function close (event: MouseEvent): void {
-  emit('dismissed', event)
-
-  if (!event.defaultPrevented)
-    show.value = false
-}
-</script>
-
-<style lang="postcss">
-/**
-* Component Name: Label
-* Component URI : https://www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=308%3A15173
-* Date Created  : June 2, 2022
-* Last Update   : June 24, 2022
-*/
-
-.label {
-  --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-flex items-center border border-transparent;
-
-  &:not(.label--variant-dot) {
-    @apply space-x-[6px];
-  }
-
-  /**
-  * Add dismiss button
-  */
-  &__dismiss {
-    @apply border-l ml-2 pl-1.5 hover:cursor-pointer border-subtle-alpha text-default/30 hover:text-default/50;
-    @apply dark:border-dark-subtle-alpha dark:text-dark-default/30 hover:dark:text-dark-default/50;
-  }
-
-  /**
-  * Provide size of label
-  * There are lg, md,
-  * sm and xs
-  */
-  &--lg {
-    @apply text-base px-3 py-1 rounded;
-  }
-
-  &--md {
-    @apply text-sm px-2 py-[2px] rounded-sm;
-  }
-
-  &--sm {
-    @apply text-xs px-[6px] py-[2px] rounded-xs;
-  }
-
-  &--xs {
-    @apply px-1 py-0 text-tn rounded-tn;
-  }
-
-  /**
-  * Set default label with
-  * color variant
-  */
-  &--variant-default {
-    &:not(&.label--default) {
-      @apply text-state-emphasis;
-      @apply dark:text-dark-state-emphasis;
-    }
-
-    &.label {
-      &--default {
-        --p-label-bg-variant-default: theme(backgroundColor.inverse);
-        --p-label-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
-        --p-label-text-variant-default: theme(textColor.on-emphasis);
-        --p-label-text-dark-variant-default: theme(textColor.dark.on-emphasis);
-
-        &:not([class^='bg-'], [class*='bg-']) {
-          @apply bg-[color:var(--p-label-bg-variant-default)];
-          @apply dark:bg-[color:var(--p-label-bg-dark-variant-default)];
-        }
-
-        &:not([class^='text-'], [class*='text-']) {
-          @apply text-[color:var(--p-label-text-variant-default)];
-          @apply dark:text-[color:var(--p-label-text-dark-variant-default)];
-        }
-
-        .label__dismiss {
-          @apply border-default/30 text-on-emphasis/30 hover:text-on-emphasis/50;
-          @apply dark:border-dark-default/30 dark:text-dark-on-emphasis/30 hover:dark:text-dark-on-emphasis/50;
-        }
-      }
-
-      &--primary {
-        @apply bg-brand-accent;
-        @apply dark:bg-dark-brand-accent;
-      }
-
-      &--info {
-        @apply bg-info-emphasis;
-        @apply dark:bg-dark-info-emphasis;
-      }
-
-      &--success {
-        @apply bg-success-emphasis;
-        @apply dark:bg-dark-success-emphasis;
-      }
-
-      &--warning {
-        @apply bg-warning-emphasis;
-        @apply dark:bg-dark-warning-emphasis;
-      }
-
-      &--danger {
-        @apply bg-danger-emphasis;
-        @apply dark:bg-dark-danger-emphasis;
-      }
-    }
-  }
-
-  /**
-  * Provide light variant
-  * in all color
-  */
-  &--variant-light {
-    &.label {
-      &--default {
-        @apply bg-emphasis-alpha text-subtle;
-        @apply dark:bg-dark-emphasis-alpha dark:text-dark-subtle;
-      }
-
-      &--primary {
-        @apply bg-[color:var(--p-color-primary-light)] text-brand-accent;
-        @apply dark:bg-[color:var(--p-color-dark-primary-light)] dark:text-dark-brand-accent;
-      }
-
-      &--info {
-        @apply bg-info text-info;
-        @apply dark:bg-dark-info dark:text-dark-info;
-      }
-
-      &--success {
-        @apply bg-success text-success;
-        @apply dark:bg-dark-success dark:text-dark-success;
-      }
-
-      &--warning {
-        @apply bg-warning text-warning;
-        @apply dark:bg-dark-warning dark:text-dark-warning;
-      }
-
-      &--danger {
-        @apply bg-danger text-danger;
-        @apply dark:bg-dark-danger dark:text-dark-danger;
-      }
-    }
-  }
-
-  /**
-  * Provide dot variant
-  * in all color
-  */
-  &--variant-dot {
-    --p-label-dot-default: theme(backgroundColor.inverse);
-    --p-label-dot-dark-default: theme(backgroundColor.dark.inverse);
-
-    .dot--variant-default {
-      --p-dot-bg-default: var(--p-label-dot-default);
-      --p-dot-bg-dark-default: var(--p-label-dot-dark-default);
-    }
-
-    /**
-    * Dot variant have
-    * white background and bordered
-    */
-    @apply bg-default text-default border-default;
-    @apply dark:bg-dark-default dark:text-dark-default dark:border-dark-default;
-
-    &.label {
-      &--lg,
-      &--md {
-        .dot {
-          @apply mr-2;
-        }
-      }
-
-      &--sm {
-        .dot {
-          @apply mr-1.5;
-        }
-      }
-
-      &--xs {
-        .dot {
-          @apply mr-1;
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -1 +0,0 @@
-export type StyleVariant = 'default' | 'light' | 'dot';

package/dist/components/list-group/ListGroup.vue

@@ -1,75 +0,0 @@
-<template>
-  <span
-    class="list-group"
-    data-testid="list-group"
-    :class="classNames">
-    <slot />
-  </span>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue-demi'
-
-const props = defineProps({
-  flush: {
-    type   : Boolean,
-    default: false,
-  },
-  horizontal: {
-    type   : Boolean,
-    default: false,
-  },
-  borderless: {
-    type   : Boolean,
-    default: false,
-  },
-  rounded: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const classNames = computed(() => {
-  const result: string[] = ['']
-
-  if (props.flush)
-    result.push('list-group--flush')
-  if (props.horizontal)
-    result.push('list-group--horizontal')
-  if (props.borderless)
-    result.push('list-group--borderless')
-  if (props.rounded)
-    result.push('list-group--rounded')
-
-  return result
-})
-</script>
-<style lang="postcss">
-.list-group {
-  --p-list-group-bg: theme(backgroundColor.default.DEFAULT);
-  --p-list-group-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
-
-  @apply flex flex-col max-w-full divide-y divide-default border border-default rounded-md bg-[color:var(--p-list-group-bg)];
-  @apply dark:border-dark-default dark:divide-dark-default dark:bg-[color:var(--p-list-group-bg-dark)];
-
-  &--flush {
-    @apply border-0 rounded-none;
-  }
-
-  &--horizontal {
-    @apply flex-row divide-x divide-y-0;
-  }
-
-  &--borderless {
-    @apply border-0 divide-y-0;
-  }
-
-  &--rounded {
-    @apply divide-y-0;
-
-    > :not([hidden]) ~ :not([hidden]),
-    > :first-child {
-      @apply rounded-md;
-    }
-  }
-}
-</style>

package/dist/components/list-group/ListGroupItem.vue

@@ -1,88 +0,0 @@
-<template>
-  <component
-    :is="elementNames"
-    data-testid="list-group-item"
-    class="list-group__item"
-    :aria-current="active"
-    :aria-disabled="disabled"
-    :class="classNames">
-    <slot />
-  </component>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed, resolveComponent } from 'vue-demi'
-import type { ElementVariant } from '.'
-
-const props = defineProps({
-  active: {
-    type   : Boolean,
-    default: undefined,
-  },
-  disabled: {
-    type   : Boolean,
-    default: undefined,
-  },
-  element: {
-    type   : String as PropType<ElementVariant>,
-    default: 'span',
-  },
-})
-
-const classNames = computed(() => {
-  const result: string[] = ['']
-
-  if (props.active)
-    result.push('list-group__item--active')
-
-  if (props.disabled)
-    result.push('list-group__item--disabled')
-
-  return result
-})
-
-const elementNames = computed(() => {
-  return props.element === 'link'
-    ? resolveComponent('nuxt-link')
-    : props.element
-})
-</script>
-<style lang="postcss">
-.list-group {
-  &__item {
-    --p-list-item-bg: theme(backgroundColor.default.DEFAULT);
-    --p-list-item-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
-    --p-list-item-bg-active: theme(backgroundColor.default.alpha);
-    --p-list-item-bg-active-dark: theme(backgroundColor.dark.default.alpha);
-    --p-list-item-padding-x: theme(spacing.4);
-    --p-list-item-padding-y: theme(spacing.2);
-
-    @apply relative block px-[var(--p-list-item-padding-x)] py-[--p-list-item-padding-y] bg-[color:var(--p-list-item-bg)] first:rounded-t-md last:rounded-b-md text-default;
-    @apply dark:bg-[color:var(--p-list-item-bg-dark)] dark:text-dark-default;
-
-    .list-group--flush & {
-      @apply first:rounded-none last:rounded-none;
-    }
-
-    .list-group--horizontal & {
-      @apply first:rounded-l-md last:rounded-r-md first:rounded-tr-none last:rounded-bl-none;
-    }
-
-    a& {
-      @apply no-underline hover:no-underline cursor-pointer text-default hover:bg-default-alpha;
-      @apply dark:text-dark-default dark:hover:bg-dark-default-alpha;
-    }
-
-    &:is(&--active) {
-      @apply bg-[color:var(--p-list-item-bg-active)] cursor-default;
-      @apply dark:bg-[color:var(--p-list-item-bg-active-dark)];
-    }
-
-    &:is(&--disabled) {
-      @apply cursor-default bg-[color:var(--p-list-item-bg)/50] hover:bg-[color:var(--p-list-item-bg)/50] text-subtlest hover:text-subtlest;
-      @apply dark:bg-[color:var(--p-list-item-bg-dark)/50] dark:hover:bg-[color:var(--p-list-item-bg-dark)/50] dark:text-dark-subtlest dark:hover:text-dark-subtlest;
-    }
-  }
-}
-</style>

package/dist/components/list-group/index.d.ts

@@ -1 +0,0 @@
-export type ElementVariant = 'div' | 'span' | 'link';

package/dist/components/main/Main.vue

@@ -1,66 +0,0 @@
-<template>
-  <main class="main">
-    <slot />
-  </main>
-</template>
-
-<style lang="postcss">
-.main {
-  --p-spacer: 1rem;
-
-  /**
-  * Heading
-  */
-  h1, h2, h3, h4, h5, h6 {
-    &:not(.dropdown__header, .accordion__item__title, .card__header__title, .tour__title) {
-      --p-heading-margin-bottom: calc(var(--p-spacer) * .5);
-      @apply mb-[var(--p-heading-margin-bottom)];
-    }
-  }
-
-  /**
-  * Permalink
-  */
-  a {
-    &:not(.navbar__brand, .sidebar__brand, .dropdown__item, .list-group__item, .btn, .nav__link, .breadcrumbs__item__link) {
-      --p-color-link-hover: darken(theme(textColor.link.DEFAULT), 5%);
-      --p-color-dark-link-hover: darken(theme(textColor.link.DEFAULT), 5%);
-
-      @apply underline text-link hover:text-[color:var(--p-color-link-hover)];
-      @apply dark:text-dark-link hover:dark:text-[color:var(--p-color-dark-link-hover)];
-    }
-  }
-
-  /**
-  * Paragraph
-  */
-  p {
-    --p-paragraph-margin-bottom: var(--p-spacer);
-    @apply mt-0 mb-[var(--p-paragraph-margin-bottom)] text-base text-default;
-    @apply dark:text-dark-default;
-  }
-
-  /**
-  * Small
-  */
-  small {
-    @apply text-tn;
-  }
-
-  /**
-  * Strong
-  */
-  strong {
-    @apply font-bold;
-  }
-
-  /**
-  * Caption
-  */
-  caption {
-    @apply text-xs text-muted;
-    @apply dark:text-dark-muted;
-  }
-}
-
-</style>

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

@@ -1,29 +0,0 @@
-import type { Directive } from 'vue-demi';
-import type { MarkedOptions } from 'marked';
-export interface MarkdownOption {
-    /**
-     * Use inline parsing
-     * @link https://marked.js.org/using_advanced#inline
-     */
-    inline: boolean;
-    /**
-     * Escape value char before encode
-     */
-    escape: boolean;
-    /**
-     * Disabled sanitize HTML result
-     */
-    unsecure: boolean;
-    /**
-     * marked options
-     */
-    marked: MarkedOptions;
-}
-/**
- * Parse markdown to html string
- * @param text markdown string
- * @param options parsing options
- */
-export declare function markdown(text?: string, _option?: Partial<MarkdownOption>): string;
-export declare const pMd: Directive<HTMLElement, string>;
-export declare const vPMd: import("vue-demi").FunctionDirective<HTMLElement, string, string, string>;

package/dist/components/markdown/index.mjs

@@ -1,25 +0,0 @@
-import { parse, parseInline } from "marked";
-import { sanitize } from "@jill64/universal-sanitizer";
-import defu from "defu";
-import { escape } from "html-escaper";
-export function markdown(text = "", _option = {}) {
-  const options = defu(_option, {
-    inline: false,
-    escape: false,
-    unsecure: false,
-    marked: { mangle: false, headerIds: false }
-  });
-  const value = options.escape ? escape(text) : text;
-  const html = options.inline ? parseInline(value, options.marked) : parse(value, options.marked);
-  if (html && !options.unsecure)
-    return sanitize(html);
-  return html;
-}
-export const pMd = (el, { value, modifiers }) => {
-  el.innerHTML = markdown(value, {
-    escape: modifiers.escape,
-    inline: modifiers.inline,
-    unsecure: modifiers.unsecure
-  });
-};
-export const vPMd = pMd;