@privyid/persona 1.2.1 → 1.2.2-dev.2

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

@@ -0,0 +1,108 @@
+import type { PropType, VNode } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+import type { ColorVariant, SizeVariant, StyleVariant, TypeVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        loading(): VNode[];
+        default(): VNode[];
+    }> & {
+        loading(): VNode[];
+        default(): VNode[];
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: SizeVariant;
+    type: TypeVariant;
+    disabled: boolean;
+    icon: boolean;
+    pill: boolean;
+    variant: StyleVariant;
+    href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    color: ColorVariant;
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,5 @@
+export type StyleVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'input';
+export type ColorVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'emphasis';
+export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
+export type TagVariant = 'a' | 'button';
+export type TypeVariant = 'button' | 'menu' | 'reset' | 'submit';

package/dist/components/button-group/ButtonGroup.vue

@@ -0,0 +1,211 @@
+<template>
+  <div
+    data-testid="btn-group"
+    :class="classNames">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  provide,
+  toRef
+} from "vue";
+import { BUTTONGROUP_SETTING } from ".";
+const props = defineProps({
+  size: {
+    type: String,
+    default: "md"
+  },
+  pill: {
+    type: Boolean,
+    default: false
+  }
+});
+const classNames = computed(() => {
+  const result = ["btn-group"];
+  if (props.size)
+    result.push(`btn-group--${props.size}`);
+  if (props.pill)
+    result.push("btn-group--pill");
+  return result;
+});
+provide(BUTTONGROUP_SETTING, { size: toRef(props, "size") });
+</script>
+
+<style lang="postcss">
+.btn-group {
+  @apply relative inline-flex items-center;
+
+  > .btn {
+    @apply relative flex-auto;
+
+    /**
+    * Set right radius to 0 when button is
+    * not the last child
+    */
+    &:not(:last-child) {
+      @apply rounded-r-none;
+    }
+
+    /**
+    * Set left radius to 0 when button is:
+    * - the third or more child
+    * - not the first child
+    * - the next button are dropdown
+    */
+    &:nth-child(n + 3),
+    &:not(:first-child),
+    + .dropdown > .btn {
+      @apply rounded-l-none;
+    }
+
+    /**
+    * Bring the hover, focus, and active button
+    * to the front to overlay borders
+    */
+    &:is(:hover, :focus, :active, .active) {
+      @apply z-1;
+    }
+
+    /**
+    * Prevent double borders
+    * when buttons are next to each other
+    * and give darken color of left border
+    * to separate each other
+    */
+    &:not(:first-child) {
+      @apply -ml-[1px];
+
+      &.btn--primary,
+      &.btn--info,
+      &.btn--success,
+      &.btn--warning,
+      &.btn--danger {
+        @apply border-l-subtle-alpha;
+        @apply dark:border-l-dark-subtle-alpha;
+      }
+    }
+  }
+
+  /**
+  * Right radius should be 0 when dropdown
+  * is not the last child
+  * Left radius should be 0 if dropdown is
+  * not the first child
+  */
+  > .dropdown {
+    &:not(:last-child) {
+      .btn {
+        @apply rounded-r-none;
+      }
+    }
+
+    /**
+    * Prevent double borders
+    * when dropdowns are next to each other
+    * Give darken color of left border
+    * to separate each other
+    */
+    &:not(:first-child) {
+      .btn {
+        @apply -ml-[1px] rounded-l-none border-l-subtle-alpha;
+        @apply dark:border-l-dark-subtle-alpha;
+      }
+    }
+  }
+
+  /**
+  * Sizing the button group,
+  * and set rounded of first
+  * & last button in each size
+  */
+  &&--xs:not(&--pill) {
+    .btn {
+      &:not(.btn--icon),
+      .dropdown .btn {
+        &:first-child {
+          @apply rounded-l-xs;
+        }
+
+        &:last-child {
+          @apply rounded-r-xs;
+        }
+      }
+
+      &:is(.btn--icon) {
+        @apply p-[.1rem];
+      }
+    }
+  }
+
+  &&--sm:not(&--pill) {
+    .btn {
+      &:not(.btn--icon),
+      .dropdown .btn {
+        &:first-child {
+          @apply rounded-l-sm;
+        }
+
+        &:last-child {
+          @apply rounded-r-sm;
+        }
+      }
+
+      &:is(.btn--icon) {
+        @apply p-[6px];
+      }
+    }
+  }
+
+  &&--md:not(&--pill),
+  &&--lg:not(&--pill) {
+    .btn {
+      &:not(.btn--icon),
+      .dropdown .btn {
+        &:first-child {
+          @apply rounded-l;
+        }
+
+        &:last-child {
+          @apply rounded-r;
+        }
+      }
+    }
+  }
+
+  &&--md {
+    .btn {
+      &:is(.btn--icon) {
+        @apply p-[12px];
+      }
+    }
+  }
+
+  &&--lg:not(&--pill) {
+    .btn {
+      &:is(.btn--icon) {
+        @apply p-[18px];
+      }
+    }
+  }
+
+  /**
+  * The left radius of first child and
+  * the right radius of the last child
+  * should be fully rounded in pill variant
+  */
+  &&--pill {
+    > .btn {
+      &:first-child {
+        @apply rounded-l-full;
+      }
+
+      &:last-child {
+        @apply rounded-r-full;
+      }
+    }
+  }
+}
+</style>

package/dist/components/button-group/ButtonGroup.vue.d.ts

@@ -0,0 +1,40 @@
+import type { PropType } from 'vue';
+import type { SizeVariant } from '../button';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: SizeVariant;
+    pill: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -0,0 +1 @@
+export const BUTTONGROUP_SETTING = Symbol("ButtonGroupSetting");