@privyid/persona 1.2.0 → 1.2.1

package/dist/components/label/index.md

@@ -1,228 +0,0 @@
----
-title: Label · Components
-description: Label for status and state of something.
----
-
-<script setup>
-  import pLabel from './Label.vue'
-  import pBanner from '../banner/Banner.vue'
-  import IconCheck from '@privyid/persona-icon/vue/checkmark-circle-solid/16.vue'
-</script>
-
-<style scoped lang="postcss">
-  .preview {
-    .label {
-      @apply mr-4;
-
-      &:last-child {
-        @apply mr-0;
-      }
-    }
-  }
-</style>
-
-# Label
-
-> Label for status and state of something.
-
-## Usage
-
-### Basic Usage
-
-Default color of label is `black`
-
-<preview class="flex-col space-y-4">
-  <p-label>Label</p-label>
-  <p-label>
-    <span>Label</span>
-    <IconCheck />
-  </p-label>
-</preview>
-
-```vue
-<template>
-  <p-label>Label</p-label>
-  <p-label>
-    <span>Label</span>
-    <pi-checkmark-circle-solid-16 />
-  </p-label>
-</template>
-```
-
-## Colors
-Label available in 4 different colors. There are `primary`, `info`, `success`, `warning`, and `danger`.
-
-<preview>
-  <p-label color="primary">Label</p-label>
-  <p-label color="info">Label</p-label>
-  <p-label color="success">Label</p-label>
-  <p-label color="warning">Label</p-label>
-  <p-label color="danger">Label</p-label>
-</preview>
-
-```vue
-<template>
-  <p-label color="primary">Label</p-label>
-  <p-label color="info">Label</p-label>
-  <p-label color="success">Label</p-label>
-  <p-label color="warning">Label</p-label>
-  <p-label color="danger">Label</p-label>
-</template>
-```
-<p-banner>
-  It's possible to make customizable and or optional color refers to what state the user is in or objects being tagged by using default color Badge with variables or class
-</p-banner>
-
-### Custom Color
-
-<preview>
-  <div class="flex flex-wrap space-gap-3">
-    <p-label class="bg-gold-40">label</p-label>
-    <p-label class="text-yellow-30">label</p-label>
-    <p-label class="bg-purple-0 text-purple-40 dark:bg-purple-50 dark:text-purple-20">label</p-label>
-  </div>
-</preview>
-
-```vue
-<template>
-  <p-label class="bg-gold-40">label</p-label>
-  <p-label class="text-yellow-30">label</p-label>
-  <p-label 
-    class="bg-purple-0 text-purple-40 dark:bg-purple-50 dark:text-purple-20">
-    label
-  </p-label>
-</template>
-```
-
-## Variants
-Label has 3 variants namely `default`, `light` and `dot`. When variant is not set, label will looks as a `default`
-
-<preview>
-  <p-label>Label</p-label>
-  <p-label variant="light">Label</p-label>
-  <p-label variant="dot">Label</p-label>
-</preview>
-
-```vue
-<template>
-  <p-label>Label</p-label>
-  <p-label variant="light">Label</p-label>
-  <p-label variant="dot">Label</p-label>
-</template>
-```
-
-### Sample Light Variant
-
-<preview>
-  <p-label color="primary" variant="light">Label</p-label>
-  <p-label color="info" variant="light">Label</p-label>
-  <p-label color="warning" variant="light">Label</p-label>
-  <p-label color="success" variant="light">Label</p-label>
-  <p-label color="danger" variant="light">Label</p-label>
-</preview>
-
-```vue
-<template>
-  <p-label color="primary" variant="light">Label</p-label>
-  <p-label color="info" variant="light">Label</p-label>
-  <p-label color="warning" variant="light">Label</p-label>
-  <p-label color="success" variant="light">Label</p-label>
-  <p-label color="danger" variant="light">Label</p-label>
-</template>
-```
-
-### Sample Dot Variant
-
-<preview>
-  <p-label color="primary" variant="dot">Label</p-label>
-  <p-label color="info" variant="dot">Label</p-label>
-  <p-label color="warning" variant="dot">Label</p-label>
-  <p-label color="success" variant="dot">Label</p-label>
-  <p-label color="danger" variant="dot">Label</p-label>
-</preview>
-
-```vue
-<template>
-  <p-label color="primary" variant="dot">Label</p-label>
-  <p-label color="info" variant="dot">Label</p-label>
-  <p-label color="warning" variant="dot">Label</p-label>
-  <p-label color="success" variant="dot">Label</p-label>
-  <p-label color="danger" variant="dot">Label</p-label>
-</template>
-```
-
-## Sizing
-Label has 4 size, namely `lg`, `md`, `sm` and `xs`. When size is not set, default label is `md`
-
-<preview>
-  <p-label color="info" size="lg">Label</p-label>
-  <p-label color="info" size="md">Label</p-label>
-  <p-label color="info" size="sm">Label</p-label>
-  <p-label color="info" size="xs">Label</p-label>
-</preview>
-
-```vue
-<template>
-  <p-label color="info" size="lg">Label</p-label>
-  <p-label color="info" size="md">Label</p-label>
-  <p-label color="info" size="sm">Label</p-label>
-  <p-label color="info" size="xs">Label</p-label>
-</template>
-```
-
-## Dismissible
-Label has dismiss feature. It can be show or hide by `dismissable` props. If `dismissable` set to `true`, dismiss button will show.
-
-<preview>
-  <p-label color="info" :dismissable="true">Label</p-label>
-  <p-label color="info" variant="light" :dismissable="true">Label</p-label>
-  <p-label color="info" variant="dot" :dismissable="true">Label</p-label>
-</preview>
-
-```vue
-<template>
-  <p-label color="info" :dismissable="true">Label</p-label>
-  <p-label color="info" variant="light" :dismissable="true">Label</p-label>
-  <p-label color="info" variant="dot" :dismissable="true">Label</p-label>
-</template>
-```
-
-## Variables
-Label use local CSS variables for enhanced real-time customization.
-Use this variable for level color (like badge) customization.
-
-### `.label.label--default`
-```sass
---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);
-```
-
-### `.label.label--variant-dot`
-```sass
---p-label-dot-default: theme(backgroundColor.inverse);
---p-label-dot-dark-default: theme(backgroundColor.dark.inverse);
-```
-## API
-
-### Props
-
-| Props         |   Type    |  Default  | Description                                                                                                |
-|---------------|:---------:|:---------:|---------------------------------------------------------------------------------------------------------------------|
-| `color`       | `String`  | `-` | Label color variant, valid value is `primary`, `info`, `success`, `warning` and `danger` |
-| `variant`     | `String`  | `default` | Label variant, valid value is `default`, `light` and `dot`.                |
-| `size`        | `String`  |   `md`    | Label variant, valid value is `lg`, `md`, `sm` and `xs`.                   |
-| `dismissable` | `Boolean` |  `false`  | Show / Hide dismiss button                                                 |
-
-### Slots
-
-| Name      | Description               |
-|-----------|---------------------------|
-| `default` | Content to place in badge |
-
-### Events
-
-| Name        | Arguments | Description                     |
-|-------------|-----------|---------------------------------|
-| `dismissed` | -         | Event when close button clicked |

package/dist/components/list-group/ListGroup.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/list-group/ListGroup.spec.mjs

@@ -1,47 +0,0 @@
-import { render } from "@testing-library/vue";
-import pListGroup from "./ListGroup.vue";
-it("should render properly without any props", () => {
-  const screen = render({
-    components: { pListGroup },
-    template: "<p-list-group />"
-  });
-  const listGroup = screen.getByTestId("list-group");
-  expect(listGroup).toBeInTheDocument();
-  expect(listGroup).toHaveClass("list-group");
-});
-it("should be able to make horizontal list-group via `horizontal` props", () => {
-  const screen = render({
-    components: { pListGroup },
-    template: "<p-list-group horizontal />"
-  });
-  const listGroup = screen.getByTestId("list-group");
-  expect(listGroup).toBeInTheDocument();
-  expect(listGroup).toHaveClass("list-group", "list-group--horizontal");
-});
-it("should be able to make list group without borderdered-container via `flush` props", () => {
-  const screen = render({
-    components: { pListGroup },
-    template: "<p-list-group flush />"
-  });
-  const listGroup = screen.getByTestId("list-group");
-  expect(listGroup).toBeInTheDocument();
-  expect(listGroup).toHaveClass("list-group", "list-group--flush");
-});
-it("should be able to make list group without border via `borderless` props", () => {
-  const screen = render({
-    components: { pListGroup },
-    template: "<p-list-group borderless />"
-  });
-  const listGroup = screen.getByTestId("list-group");
-  expect(listGroup).toBeInTheDocument();
-  expect(listGroup).toHaveClass("list-group", "list-group--borderless");
-});
-it("should be able to make list group item rounded via `rounded` props", () => {
-  const screen = render({
-    components: { pListGroup },
-    template: "<p-list-group rounded />"
-  });
-  const listGroup = screen.getByTestId("list-group");
-  expect(listGroup).toBeInTheDocument();
-  expect(listGroup).toHaveClass("list-group", "list-group--rounded");
-});

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

@@ -1,73 +0,0 @@
-<template>
-  <span
-    class="list-group"
-    data-testid="list-group"
-    :class="classNames">
-    <slot />
-  </span>
-</template>
-
-<script 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 = [""];
-  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/ListGroup.vue.d.ts

@@ -1,56 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLSpanElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    flush: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    horizontal: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    borderless: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rounded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    flush: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    horizontal: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    borderless: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rounded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    flush: boolean;
-    horizontal: boolean;
-    rounded: boolean;
-    borderless: boolean;
-}, {}, {}, {}, string, import("vue-demi").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/list-group/ListGroupItem.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/list-group/ListGroupItem.spec.mjs

@@ -1,49 +0,0 @@
-import { render } from "@testing-library/vue";
-import pListGroupItem from "./ListGroupItem.vue";
-it("should render properly without any props", () => {
-  const screen = render({
-    components: { pListGroupItem },
-    template: "<p-list-group-item />"
-  });
-  const listGroup = screen.getByTestId("list-group-item");
-  expect(listGroup).toBeInTheDocument();
-  expect(listGroup).toHaveClass("list-group__item");
-});
-it("should be able to set active state via `active` props", () => {
-  const screen = render({
-    components: { pListGroupItem },
-    template: "<p-list-group-item active />"
-  });
-  const listGroup = screen.getByTestId("list-group-item");
-  expect(listGroup).toBeInTheDocument();
-  expect(listGroup).toHaveClass("list-group__item", "list-group__item--active");
-});
-it("should be able to set disable state via `disabled` props", () => {
-  const screen = render({
-    components: { pListGroupItem },
-    template: "<p-list-group-item disabled />"
-  });
-  const listGroup = screen.getByTestId("list-group-item");
-  expect(listGroup).toBeInTheDocument();
-  expect(listGroup).toHaveClass("list-group__item", "list-group__item--disabled");
-});
-it("should be able to change element of list group via `element` props", () => {
-  const screen = render({
-    components: { pListGroupItem },
-    template: '<p-list-group-item element="div" />'
-  });
-  const listGroup = screen.getByTestId("list-group-item");
-  expect(listGroup).toBeInTheDocument();
-  expect(listGroup).toHaveClass("list-group__item");
-  expect(listGroup).toContainHTML("div");
-});
-it("should be able to change element of list group with permalink via `element` props with `link` value", () => {
-  const screen = render({
-    components: { pListGroupItem },
-    template: '<p-list-group-item element="link" />'
-  });
-  const listGroup = screen.getByTestId("list-group-item");
-  expect(listGroup).toBeInTheDocument();
-  expect(listGroup).toHaveClass("list-group__item");
-  expect(listGroup).toContainHTML("a");
-});

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

@@ -1,79 +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 setup>
-import { computed, resolveComponent } from "vue-demi";
-const props = defineProps({
-  active: {
-    type: Boolean,
-    default: void 0
-  },
-  disabled: {
-    type: Boolean,
-    default: void 0
-  },
-  element: {
-    type: String,
-    default: "span"
-  }
-});
-const classNames = computed(() => {
-  const result = [""];
-  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/ListGroupItem.vue.d.ts

@@ -1,49 +0,0 @@
-import type { PropType } from 'vue-demi';
-import type { ElementVariant } from '.';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    active: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    element: {
-        type: PropType<ElementVariant>;
-        default: string;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    active: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    element: {
-        type: PropType<ElementVariant>;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    disabled: boolean;
-    active: boolean;
-    element: ElementVariant;
-}, {}, {}, {}, string, import("vue-demi").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/list-group/index.d.ts

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