@privyid/persona 0.10.0 → 0.12.0

package/dist/components/heading/Heading.vue

@@ -73,6 +73,12 @@ export default defineComponent({
     * Weight variant
     * of heading
     */
+
+    :where(&--normal, &--medium, &--bold) {
+      @apply text-default;
+      @apply dark:text-dark-default;
+    }
+
     &--normal {
       @apply font-normal;
     }

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

@@ -1,3 +1,3 @@
-export declare type ElementVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export declare type WeightVariant = 'normal' | 'medium' | 'bold';
-export declare type TransformVariant = 'normalcase' | 'lowercase' | 'capitalize' | 'uppercase';
+export type ElementVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type WeightVariant = 'normal' | 'medium' | 'bold';
+export type TransformVariant = 'normalcase' | 'lowercase' | 'capitalize' | 'uppercase';

package/dist/components/input/Input.vue

@@ -2,7 +2,11 @@
   <div
     class="input"
     data-testid="input-container">
-    <slot name="prepend" />
+    <span
+      v-if="$slots.prepend"
+      class="input__prepend">
+      <slot name="prepend" />
+    </span>
     <input
       v-model="model"
       class="input__form"
@@ -16,17 +20,23 @@
       class="input__clear"
       data-testid="input-clear"
       @click="clear" />
-    <slot name="append" />
+    <span
+      v-if="$slots.append"
+      class="input__append">
+      <slot name="append" />
+    </span>
   </div>
 </template>
 
 <script>
 import {
   computed,
-  defineComponent
+  defineComponent,
+  inject
 } from "vue-demi";
 import { useVModel } from ".";
 import IconClear from "@carbon/icons-vue/lib/close--filled/16";
+import { INPUTGROUP_SETTING } from "../input-group";
 export default defineComponent({
   components: { IconClear },
   inheritAttrs: false,
@@ -61,11 +71,14 @@ export default defineComponent({
     event: "update:modelValue"
   },
   emits: ["update:modelValue", "clear"],
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const model = useVModel(props);
+    const setting = inject(INPUTGROUP_SETTING, void 0, false);
     const classNames = computed(() => {
       const result = [];
-      if (props.size)
+      if (setting?.size.value)
+        result.push(`input--${setting?.size.value}`);
+      else if (props.size)
         result.push(`input--${props.size}`);
       if (props.disabled)
         result.push("input--disabled");
@@ -75,6 +88,10 @@ export default defineComponent({
         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) {
@@ -94,48 +111,51 @@ export default defineComponent({
 <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-muted hover:border-subtle placeholder:text-muted w-full outline-none;
+    @apply py-[10px] px-3 text-base relative rounded border border-solid border-muted hover:border-subtle text-default placeholder:text-muted w-full outline-none;
+    @apply dark:border-dark-muted hover:dark:border-dark-subtle dark:text-dark-default placeholder:dark:text-dark-muted;
 
     &:disabled,
     &--disabled,
     .state--disabled & {
-      @apply bg-muted border-muted pointer-events-none text-muted;
+      @apply bg-subtle border-subtle pointer-events-none text-muted;
+      @apply dark:bg-dark-subtle 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-xs px-3 py-2;
+    @apply text-sm py-[2px] rounded-xs;
   }
 
   &--sm {
-    @apply px-3 py-2;
+    @apply py-[4px] rounded-sm;
   }
 
   &--md {
-    @apply px-3 py-3;
+    @apply py-[10px];
   }
 
   &--lg {
-    @apply px-3 py-4;
+    @apply py-4;
   }
 
-  .state--error &__form,
-  &--error {
-    @apply border-danger-emphasis hover:border-danger-emphasis;
-
-    &:focus {
-      @apply ring-danger border-danger-emphasis;
-    }
+  .state--error,
+  &--error,
+  &-group--error.input-group .input > .input__form {
+    @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 cursor-pointer hover:text-danger z-1;
+    @apply text-default/30 cursor-pointer hover:text-danger z-1;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-danger;
   }
 
   &--clearable {
@@ -144,6 +164,35 @@ export default defineComponent({
     + .input__clear {
       @apply absolute right-3 top-1/2 -translate-y-1/2;
     }
+
+    &:where(.input--has-append) {
+      + .input__clear {
+        @apply right-10;
+      }
+    }
+  }
+
+  &__prepend,
+  &__append {
+    @apply absolute top-0 h-full flex items-center;
+  }
+
+  &__prepend {
+    @apply left-3;
+  }
+
+  &__append {
+    @apply right-3;
+  }
+
+  &--has {
+    &-prepend {
+      @apply pl-9;
+    }
+
+    &-append {
+      @apply pr-9;
+    }
   }
 }
 </style>

package/dist/components/input/Input.vue.d.ts

@@ -55,13 +55,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    onClear?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     size: SizeVariant;
-    disabled: boolean;
     modelValue: string | number;
+    disabled: boolean;
     readonly: boolean;
     clearable: boolean;
 }>;

package/dist/components/input-file/InputFile.vue

@@ -154,7 +154,7 @@ export default defineComponent({
 <style lang="postcss">
 .input-file {
   > .input-group > .input-group__addon {
-    @apply p-1;
+    @apply py-1 pl-1 pr-2;
 
     > .btn {
       @apply py-0 px-3 h-full items-center mr-4;
@@ -169,7 +169,16 @@ export default defineComponent({
   &:disabled {
     .input-group__addon,
     .input-group .input__form {
-      @apply bg-muted border-muted text-muted;
+      @apply bg-subtle text-muted;
+      @apply dark:bg-dark-subtle dark:text-dark-muted;
+    }
+
+    .input-group__addon {
+      @apply rounded-l-sm;
+
+      + .input {
+        @apply rounded-r-sm;
+      }
     }
   }
 
@@ -177,6 +186,7 @@ export default defineComponent({
     .input-group__addon,
     .input-group .input__form {
       @apply border-subtle;
+      @apply dark:border-dark-subtle;
     }
   }
 
@@ -190,6 +200,7 @@ export default defineComponent({
     .input-group__addon,
     .input-group .input__form {
       @apply border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis;
     }
   }
 }

package/dist/components/input-file/InputFile.vue.d.ts

@@ -4,7 +4,7 @@ import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<string | string[] | File | File[]>;
-        default: any;
+        default: undefined;
     };
     modelModifiers: {
         type: PropType<ModelModifier>;
@@ -16,7 +16,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     maxlength: {
         type: (NumberConstructor | StringConstructor)[];
-        default: any;
+        default: undefined;
     };
     accept: {
         type: StringConstructor;
@@ -55,14 +55,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }, {
-    model: import("vue-demi").Ref<string | string[] | File | File[]>;
+    model: import("vue-demi").Ref<string | string[] | File | File[] | undefined>;
     classNames: import("vue-demi").ComputedRef<string[]>;
     getFileNames: (files: Array<globalThis.File> | globalThis.File) => string;
     clear: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "cancel" | "clear")[], "change" | "update:modelValue" | "cancel" | "clear", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("cancel" | "change" | "update:modelValue" | "clear")[], "cancel" | "change" | "update:modelValue" | "clear", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<string | string[] | File | File[]>;
-        default: any;
+        default: undefined;
     };
     modelModifiers: {
         type: PropType<ModelModifier>;
@@ -74,7 +74,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     maxlength: {
         type: (NumberConstructor | StringConstructor)[];
-        default: any;
+        default: undefined;
     };
     accept: {
         type: StringConstructor;
@@ -113,21 +113,21 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    onCancel?: (...args: any[]) => any;
-    onClear?: (...args: any[]) => any;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     size: SizeVariant;
-    disabled: boolean;
     modelValue: string | string[] | File | File[];
+    disabled: boolean;
     readonly: boolean;
     modelModifiers: ModelModifier;
     multiple: boolean | MultipleType;
     placeholder: string;
-    accept: string;
     maxlength: string | number;
+    accept: string;
     clearOnCancel: boolean;
     clearable: boolean;
     browseLabel: string;

package/dist/components/input-group/InputGroup.vue

@@ -10,8 +10,11 @@
 <script>
 import {
   computed,
-  defineComponent
+  defineComponent,
+  provide,
+  toRef
 } from "vue-demi";
+import { INPUTGROUP_SETTING } from ".";
 export default defineComponent({
   props: {
     size: {
@@ -32,6 +35,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    provide(INPUTGROUP_SETTING, { size: toRef(props, "size") });
     const classNames = computed(() => {
       const result = [];
       if (props.size)
@@ -55,9 +59,11 @@ export default defineComponent({
 
   &:has(:first-child:is(.input-group__addon):nth-last-child(2)) {
     @apply rounded bg-default focus-within:ring-4 focus-within:ring-subtle/10 border border-solid border-muted hover:border-subtle focus-within:border-subtle;
+    @apply dark:bg-dark-default focus-within:dark:ring-dark-subtle/10 dark:border-dark-muted hover:dark:border-dark-subtle focus-within:dark:border-dark-subtle;
 
     .input {
       @apply bg-transparent;
+      @apply dark:bg-transparent;
     }
 
     .input > .input__form,
@@ -68,21 +74,34 @@ export default defineComponent({
     .input > .input__form {
       @apply focus:ring-0;
     }
+
+    &.input-group--disabled {
+      @apply border-subtle;
+      @apply dark:border-dark-subtle;
+    }
+
+    &.state--error,
+    &.input-group--error {
+      @apply border-danger-emphasis hover:border-danger-emphasis focus-within:ring-danger focus-within:border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus-within:dark:ring-dark-danger focus-within:dark:border-dark-danger-emphasis;
+    }
   }
 
   & > .input-group__addon:not(:first-child),
   & > .input:not(:first-child) > .input__form,
   & > .select:not(:first-child) > .input > .input__form {
     @apply rounded-l-none border-l-transparent;
+    @apply dark:border-l-transparent;
   }
 
   & > .input-group__addon:not(:last-child),
   & > .input:not(:last-child) > .input__form {
     @apply rounded-r-none border-r-transparent;
+    @apply dark:border-r-transparent;
   }
 
   & > .select:not(:last-child) > .input > .input__form {
-    @apply rounded-r-none;
+    @apply rounded-r-none z-1;
   }
 
   & > .input-group__addon,
@@ -96,16 +115,27 @@ export default defineComponent({
 
   .input,
   .select > .input {
+    @apply rounded-none;
+
+    &:first-child {
+      @apply rounded-l;
+    }
+
+    &:last-child {
+      @apply rounded-r;
+    }
+
     > .input__form {
       &:hover,
       &:focus {
         @apply z-[2] border-l-subtle border-r-subtle;
+        @apply dark:border-l-dark-subtle dark:border-r-dark-subtle;
       }
     }
   }
 
   & > .btn {
-    @apply z-[1];
+    @apply z-1;
 
     &:not(:first-child) {
       @apply rounded-l-none -ml-[1px];
@@ -116,53 +146,37 @@ export default defineComponent({
     }
   }
 
-  &:is(&--xs, &--sm, &--md, &--lg) > &__addon {
-    @apply flex-shrink-0;
+  &&--disabled {
+    @apply border-subtle border-solid border rounded;
+    @apply dark:border-dark-subtle;
 
-    + .input {
-      > .input__form {
-        @apply pl-0;
-      }
+    > .input > .input__form,
+    > .input-group__addon,
+    > .btn.btn--variant-input {
+      @apply border-transparent;
+      @apply dark:border-transparent;
     }
-  }
 
-  &&--xs {
-    .input > .input__form {
-      @apply text-xs px-3 py-2;
+    > .input:first-child .input__form,
+    > .input-group__addon:first-child,
+    > .btn:first-child {
+      @apply rounded-l-sm;
     }
 
-    .btn {
-      @apply px-2 py-1 gap-1 text-sm;
+    > .input:last-child .input__form,
+    > .input-group__addon:last-child,
+    > .btn:last-child {
+      @apply rounded-r-sm;
     }
   }
 
-  &&--sm {
-    .input > .input__form {
-      @apply px-3 py-2;
-    }
-
-    .btn {
-      @apply px-4 py-2 gap-2 text-base;
-    }
-  }
-
-  &&--md {
-    .input > .input__form {
-      @apply px-3 py-3;
-    }
-
-    .btn {
-      @apply px-5 py-3 gap-3 text-base;
-    }
-  }
-
-  &&--lg {
-    .input > .input__form {
-      @apply px-3 py-4;
-    }
+  &:is(&--xs, &--sm, &--md, &--lg) > &__addon {
+    @apply flex-shrink-0;
 
-    .btn {
-      @apply px-8 py-4 gap-4 text-base;
+    + .input {
+      > .input__form {
+        @apply pl-0;
+      }
     }
   }
 }

package/dist/components/input-group/InputGroupAddon.vue

@@ -7,36 +7,35 @@
 <style lang="postcss">
 .input-group {
   &__addon {
-    @apply flex items-center text-muted rounded border border-solid border-muted outline-none bg-default;
+    @apply flex px-3 items-center rounded border border-solid border-muted outline-none text-muted bg-default;
+    @apply dark:border-dark-muted dark:text-dark-muted dark:bg-dark-default;
 
     .input-group--xs > & {
-      @apply text-xs px-3 py-2;
+      @apply text-sm py-[2px];
     }
 
     .input-group--sm > & {
-      @apply px-3 py-2;
+      @apply py-1;
     }
 
     .input-group--md > & {
-      @apply px-3 py-3;
+      @apply py-[10px];
     }
 
     .input-group--lg > & {
-      @apply px-3 py-4;
+      @apply py-4;
     }
 
     .state--error &,
     .input-group--error & {
-      @apply border-danger-emphasis;
-
-      &:focus {
-        @apply ring-danger border-danger-emphasis;
-      }
+      @apply border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
     }
 
     .state--disabled &,
     .input-group--disabled & {
-      @apply bg-muted border-muted pointer-events-none text-muted;
+      @apply bg-subtle border-subtle pointer-events-none text-muted;
+      @apply dark:bg-dark-subtle dark:border-dark-subtle  dark:text-dark-muted;
     }
   }
 }

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

@@ -0,0 +1,6 @@
+import { InjectionKey, Ref } from 'vue-demi';
+import { SizeVariant } from '../button';
+export interface InputGroupSetting {
+    size?: Ref<SizeVariant>;
+}
+export declare const INPUTGROUP_SETTING: InjectionKey<InputGroupSetting>;

package/dist/components/input-group/index.mjs

@@ -0,0 +1 @@
+export const INPUTGROUP_SETTING = Symbol("InputGroupSetting");

package/dist/components/input-password/InputPassword.vue

@@ -44,10 +44,12 @@ export default defineComponent({
   @apply pr-9;
 
   &__toggle {
-    @apply absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-1;
+    @apply absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-1 text-default/30 hover:text-subtle;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-subtle;
 
     .input--disabled ~ & {
       @apply pointer-events-none text-muted;
+      @apply dark:text-dark-muted;
     }
   }
 

package/dist/components/input-pin/InputPin.vue

@@ -70,7 +70,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const root = templateRef("root");
     const num = useToNumber(toRef(props, "length"));
-    const localModel = ref([...props.modelValue].slice(0, num.value).map((val) => val.trim()));
+    const localModel = ref([...props.modelValue.padEnd(num.value)].slice(0, num.value));
     const classNames = computed(() => {
       const result = [];
       if (props.disabled)
@@ -84,7 +84,7 @@ export default defineComponent({
     const { next: nextFocus, prev: prevFocus } = useFocus(root, false);
     const model = computed({
       get() {
-        return [...props.modelValue].slice(0, num.value);
+        return [...props.modelValue.padEnd(num.value)].slice(0, num.value);
       },
       set(value) {
         const text = value.map((val) => val || " ").join("").trimEnd();
@@ -110,7 +110,7 @@ export default defineComponent({
       event.target.select();
     }
     function onDelete(event) {
-      if (root.value && !event.target.value)
+      if (root.value && !event.target.value.trim())
         prevFocus();
     }
     function onPaste(event) {

package/dist/components/input-pin/InputPin.vue.d.ts

@@ -52,13 +52,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    onClear?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
 }, {
-    error: boolean;
     length: string | number;
-    disabled: boolean;
+    error: boolean;
     modelValue: string;
+    disabled: boolean;
     readonly: boolean;
 }>;
 export default _default;

package/dist/components/input-range/InputRange.vue

@@ -233,14 +233,16 @@ export default defineComponent({
   @apply py-2 w-full;
 
   &__tracks {
-    @apply relative flex w-full bg-subtle cursor-pointer overflow-visible rounded;
+    @apply relative flex w-full bg-base cursor-pointer overflow-visible rounded;
+    @apply dark:bg-dark-base;
   }
 
   &__track {
     @apply h-2 rounded;
 
     &-active {
-      @apply bg-accent-emphasis relative text-center;
+      @apply bg-info-emphasis relative text-center;
+      @apply dark:bg-dark-info-emphasis;
     }
 
     &-upper {
@@ -249,12 +251,13 @@ export default defineComponent({
   }
 
   &__thumb {
-    @apply w-4 h-4 rounded-full bg-default shadow-sm absolute top-1/2 bottom-0 -translate-y-1/2 border border-gray-25;
-    @apply touch-none select-none;
+    @apply w-4 h-4 rounded-full bg-default shadow-sm absolute top-1/2 bottom-0 -translate-y-1/2 border border-muted touch-none select-none;
+    @apply dark:bg-dark-layer-2 dark:border-dark-subtle;
 
     &:hover,
     &:active {
-      @apply ring ring-accent border-accent-emphasis;
+      @apply ring ring-info border-info-emphasis;
+      @apply dark:ring-dark-info dark:border-dark-info-emphasis;
     }
 
     &-start {