@privyid/persona 1.1.2 → 1.2.1

package/dist/components/heading/Heading.vue

@@ -1,140 +0,0 @@
-<template>
-  <component
-    :is="elementNames"
-    data-testid="heading"
-    class="heading"
-    :class="classNames">
-    <slot />
-  </component>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type {
-  ElementVariant,
-  TransformVariant,
-  WeightVariant,
-} from '.'
-
-const props = defineProps({
-  element: {
-    type   : String as PropType<ElementVariant>,
-    default: 'h3',
-  },
-  weight: {
-    type   : String as PropType<WeightVariant>,
-    default: 'normal',
-  },
-  transform: {
-    type   : String as PropType<TransformVariant>,
-    default: 'normalcase',
-  },
-})
-
-const elementNames = computed(() => {
-  return props.element
-})
-
-const classNames = computed(() => {
-  const result: string[] = [`${props.element}`]
-
-  if (props.transform)
-    result.push(`heading--${props.transform}`)
-
-  if (props.weight)
-    result.push(`heading--${props.weight}`)
-
-  return result
-})
-</script>
-
-<style lang="postcss">
-.h {
-  &1 {
-    @apply text-7xl;
-  }
-  &2 {
-    @apply text-6xl;
-  }
-  &3 {
-    @apply text-5xl;
-  }
-  &4 {
-    @apply text-4xl;
-  }
-  &5 {
-    @apply text-2xl;
-  }
-  &6 {
-    @apply text-xl;
-  }
-
-  &eading {
-    /**
-    * Weight variant
-    * of heading
-    */
-    &:not([class^='text-'], [class*='text-']) {
-      @apply text-default;
-      @apply dark:text-dark-default;
-    }
-
-    &--thin {
-      @apply font-thin;
-    }
-
-    &--extralight {
-      @apply font-extralight;
-    }
-
-    &--light {
-      @apply font-light;
-    }
-
-    &--normal {
-      @apply font-normal;
-    }
-
-    &--semibold {
-      @apply font-semibold;
-    }
-
-    &--medium {
-      @apply font-medium;
-    }
-
-    &--bold {
-      @apply font-bold;
-    }
-
-    &--extrabold {
-      @apply font-extrabold;
-    }
-
-    &--black {
-      @apply font-black;
-    }
-
-    /**
-    * Text transform
-    * of heading
-    */
-    &--normalcase {
-      @apply normal-case;
-    }
-
-    &--lowercase {
-      @apply lowercase;
-    }
-
-    &--capitalize {
-      @apply capitalize;
-    }
-
-    &--uppercase {
-      @apply uppercase;
-    }
-  }
-}
-</style>

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

@@ -1,3 +0,0 @@
-export type ElementVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type WeightVariant = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
-export type TransformVariant = 'normalcase' | 'lowercase' | 'capitalize' | 'uppercase';

package/dist/components/input/Input.vue

@@ -1,243 +0,0 @@
-<template>
-  <div
-    class="input"
-    :class="containerClass"
-    data-testid="input-container">
-    <span
-      v-if="$slots.prepend"
-      class="input__prepend">
-      <slot name="prepend" />
-    </span>
-    <input
-      ref="input"
-      v-model="model"
-      class="input__form"
-      data-testid="input"
-      :disabled="disabled"
-      :readonly="readonly"
-      :class="classNames"
-      v-bind="$attrs"
-      @beforeinput="checkOnInput(accept, $event)">
-    <IconClear
-      v-show="(clearable && model)"
-      class="input__clear"
-      data-testid="input-clear"
-      @click="clear" />
-    <span
-      v-if="$slots.append"
-      class="input__append">
-      <slot name="append" />
-    </span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
-import {
-  computed,
-  inject,
-  ref,
-} from 'vue-demi'
-import { useVModel } from '.'
-import type { SizeVariant } from '../button'
-import IconClear from '@privyid/persona-icon/vue/close-circle-solid/20.vue'
-import { INPUTGROUP_SETTING } from '../input-group'
-import type { AcceptVariant } from './utils/accept'
-import { checkOnInput } from './utils/accept'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps({
-  modelValue: {
-    type   : [String, Number],
-    default: undefined,
-  },
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  readonly: {
-    type   : Boolean,
-    default: false,
-  },
-  error: {
-    type   : Boolean,
-    default: false,
-  },
-  clearable: {
-    type   : Boolean,
-    default: false,
-  },
-  containerClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  accept: {
-    type   : String as PropType<AcceptVariant>,
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [string | number],
-  'clear': [MouseEvent],
-}>()
-
-const slots = defineSlots<{
-  'prepend'(): VNode[],
-  'append'(): VNode[],
-}>()
-
-const input   = ref<HTMLInputElement>()
-const model   = useVModel(props)
-const setting = inject(INPUTGROUP_SETTING, undefined, false)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  // eslint-disable-next-line unicorn/explicit-length-check
-  if (setting?.size.value)
-    result.push(`input--${setting?.size.value}`)
-  // eslint-disable-next-line unicorn/explicit-length-check
-  else if (props.size)
-    result.push(`input--${props.size}`)
-
-  if (props.disabled)
-    result.push('input--disabled')
-
-  if (props.readonly)
-    result.push('input--readonly')
-
-  if (props.error)
-    result.push('input--error', 'state--error')
-
-  if (props.clearable)
-    result.push('input--clearable')
-
-  if (slots.prepend)
-    result.push('input--has-prepend')
-
-  if (slots.append)
-    result.push('input--has-append')
-
-  return result
-})
-
-function clear (event: MouseEvent) {
-  emit('clear', event)
-
-  if (!props.disabled && !props.readonly && !event.defaultPrevented)
-    model.value = ''
-}
-
-defineExpose({
-  input,
-  clear,
-})
-</script>
-
-<style lang="postcss">
-.input {
-  @apply w-full relative bg-default rounded;
-  @apply dark:bg-dark-default;
-
-  &__form {
-    @apply py-[10px] px-3 text-base relative rounded border border-solid border-subtlest hover:border-subtle text-default w-full outline-none bg-transparent;
-    @apply dark:border-dark-subtlest hover:dark:border-dark-subtle dark:text-dark-default dark:bg-transparent;
-
-    &::placeholder,
-    &__placeholder {
-      @apply text-muted;
-      @apply dark:text-dark-muted;
-    }
-
-    &:disabled,
-    &--disabled,
-    &[disabled="true"],
-    .state--disabled & {
-      @apply bg-base border-subtle pointer-events-none text-muted;
-      @apply dark:bg-dark-base dark:border-dark-subtle  dark:text-dark-muted;
-    }
-
-    &:focus {
-      @apply border-subtle ring-4 ring-subtle/10 z-1;
-      @apply dark:border-dark-subtle dark:ring-dark-subtle/10;
-    }
-  }
-
-  &--xs {
-    @apply text-sm py-[2px] rounded-xs;
-  }
-
-  &--sm {
-    @apply py-[4px] rounded-sm;
-  }
-
-  &--md {
-    @apply py-[10px];
-  }
-
-  &--lg {
-    @apply py-4;
-  }
-
-  .state--error,
-  .state--error & > &__form:not(.no--error),
-  &--error,
-  &-group--error.input-group .input > .input__form:not(.no--error) {
-    @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
-    @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
-  }
-
-  .input__clear {
-    @apply text-default/30 cursor-pointer hover:text-danger z-[2];
-    @apply dark:text-dark-default/30 hover:dark:text-dark-danger;
-  }
-
-  &__prepend,
-  &__append {
-    @apply absolute top-0 h-full flex items-center z-[2];
-  }
-
-  &__prepend {
-    @apply left-3;
-  }
-
-  &__append {
-    @apply right-3;
-  }
-
-  &--has {
-    &-prepend {
-      @apply pl-9;
-    }
-
-    &-append {
-      @apply pr-9;
-    }
-  }
-
-  &--clearable {
-    @apply pr-9;
-
-    + .input__clear {
-      @apply absolute right-3 top-1/2 -translate-y-1/2;
-    }
-
-    &:where(.input--has-append) {
-      @apply pr-[4.15rem];
-      + .input__clear {
-        @apply right-[2.45rem];
-      }
-    }
-  }
-}
-</style>

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

@@ -1,6 +0,0 @@
-import type { Ref } from 'vue-demi';
-export interface InputProps<V = string> {
-    modelValue?: V;
-}
-export declare function useVModel<V>(props: InputProps<V>): Ref<V>;
-export { type AcceptVariant, isAccepted, removeUnaccepted, checkOnInput, } from './utils/accept';

package/dist/components/input/index.mjs

@@ -1,25 +0,0 @@
-import { syncRef } from "@vueuse/core";
-import {
-  computed,
-  getCurrentInstance,
-  ref
-} from "vue-demi";
-export function useVModel(props) {
-  const localValue = ref(props.modelValue);
-  const { emit } = getCurrentInstance();
-  const model = computed({
-    get() {
-      return props.modelValue;
-    },
-    set(value) {
-      emit("update:modelValue", value);
-    }
-  });
-  syncRef(localValue, model, { immediate: false });
-  return localValue;
-}
-export {
-  isAccepted,
-  removeUnaccepted,
-  checkOnInput
-} from "./utils/accept.mjs";

package/dist/components/input/utils/accept.d.ts

@@ -1,26 +0,0 @@
-import type { LiteralUnion } from 'type-fest';
-export declare const AcceptPresets: {
-    readonly num: "\\d";
-    readonly numeric: "\\d";
-    readonly digit: "\\d";
-    readonly alpha: "A-Za-z";
-    readonly 'alpha-num': "A-Za-z\\d";
-    readonly 'alpha-num-space': "A-Za-z\\d\\s";
-    readonly 'alpha-num-space-symbol': "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'alpha-numeric': "A-Za-z\\d";
-    readonly 'alpha-numeric-space': "A-Za-z\\d\\s";
-    readonly 'alpha-numeric-space-symbol': "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'alpha-space': "A-Za-z\\s";
-    readonly 'alpha-space-symbol': "A-Za-z\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'num-space': "\\d\\s";
-    readonly 'num-space-symbol': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'numeric-space': "\\d\\s";
-    readonly 'numeric-space-symbol': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'non-numeric': "A-Za-z\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'non-alpha': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly text: "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-};
-export type AcceptVariant = LiteralUnion<keyof typeof AcceptPresets, string>;
-export declare function isAccepted(accept: AcceptVariant | undefined, text: string): boolean;
-export declare function removeUnaccepted(accept: AcceptVariant | undefined, text: string): string;
-export declare function checkOnInput(accept: AcceptVariant | undefined, event: Event): void;

package/dist/components/input/utils/accept.mjs

@@ -1,81 +0,0 @@
-const ALPHA = "A-Za-z";
-const NUMERIC = "\\d";
-const SPACE = "\\s";
-const SYMBOL = "!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-const REGEX_ALPHA = `${ALPHA}`;
-const REGEX_NUMERIC = `${NUMERIC}`;
-const REGEX_ALPHA_NUMERIC = `${ALPHA}${NUMERIC}`;
-const REGEX_ALPHA_NUMERIC_SPACE = `${ALPHA}${NUMERIC}${SPACE}`;
-const REGEX_ALPHA_NUMERIC_SPACE_SYMBOL = `${ALPHA}${NUMERIC}${SPACE}${SYMBOL}`;
-const REGEX_ALPHA_SPACE = `${ALPHA}${SPACE}`;
-const REGEX_ALPHA_SPACE_SYMBOL = `${ALPHA}${SPACE}${SYMBOL}`;
-const REGEX_NUMERIC_SPACE = `${NUMERIC}${SPACE}`;
-const REGEX_NUMERIC_SPACE_SYMBOL = `${NUMERIC}${SPACE}${SYMBOL}`;
-export const AcceptPresets = {
-  "num": REGEX_NUMERIC,
-  "numeric": REGEX_NUMERIC,
-  "digit": REGEX_NUMERIC,
-  "alpha": REGEX_ALPHA,
-  "alpha-num": REGEX_ALPHA_NUMERIC,
-  "alpha-num-space": REGEX_ALPHA_NUMERIC_SPACE,
-  "alpha-num-space-symbol": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL,
-  "alpha-numeric": REGEX_ALPHA_NUMERIC,
-  "alpha-numeric-space": REGEX_ALPHA_NUMERIC_SPACE,
-  "alpha-numeric-space-symbol": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL,
-  "alpha-space": REGEX_ALPHA_SPACE,
-  "alpha-space-symbol": REGEX_ALPHA_SPACE_SYMBOL,
-  "num-space": REGEX_NUMERIC_SPACE,
-  "num-space-symbol": REGEX_NUMERIC_SPACE_SYMBOL,
-  "numeric-space": REGEX_NUMERIC_SPACE,
-  "numeric-space-symbol": REGEX_NUMERIC_SPACE_SYMBOL,
-  "non-numeric": REGEX_ALPHA_SPACE_SYMBOL,
-  "non-alpha": REGEX_NUMERIC_SPACE_SYMBOL,
-  "text": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL
-};
-export function isAccepted(accept, text) {
-  if (!accept)
-    return true;
-  try {
-    const regexStr = AcceptPresets[accept.toLowerCase()] ?? accept;
-    const regex = new RegExp(`^[${regexStr}]+$`);
-    return regex.test(text);
-  } catch (error) {
-    if (import.meta.env.DEV)
-      console.error(error);
-    return true;
-  }
-}
-export function removeUnaccepted(accept, text) {
-  if (!accept)
-    return text;
-  try {
-    const regexStr = AcceptPresets[accept.toLowerCase()] ?? accept;
-    const regex = new RegExp(`[^${regexStr}]+`, "g");
-    return text.replaceAll(regex, "");
-  } catch (error) {
-    if (import.meta.env.DEV)
-      console.error(error);
-    return text;
-  }
-}
-export function checkOnInput(accept, event) {
-  if (event.data && !isAccepted(accept, event.data)) {
-    event.preventDefault();
-    if (event.inputType === "insertFromPaste") {
-      const target = event.target;
-      const oldValue = target.value;
-      const value = removeUnaccepted(accept, event.data);
-      const ss = target.selectionStart;
-      const se = target.selectionEnd;
-      const nextValue = `${oldValue.slice(0, ss)}${value}${oldValue.slice(se)}`;
-      try {
-        target.value = nextValue;
-        target.dispatchEvent(new InputEvent("input"));
-        target.setSelectionRange(value.length + ss, value.length + ss);
-      } catch (error) {
-        if (import.meta.env.DEV)
-          console.error(error);
-      }
-    }
-  }
-}

package/dist/components/input-color/index.d.ts

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