@privyid/persona 0.9.0 → 0.11.0

package/dist/components/button/Button.vue

@@ -1,16 +1,21 @@
 <template>
-  <button
+  <component
+    :is="tagName"
+    :href="href"
     data-testid="btn"
     :class="classNames">
     <slot />
-  </button>
+  </component>
 </template>
 
 <script>
 import {
   computed,
-  defineComponent
+  defineComponent,
+  inject
 } from "vue-demi";
+import { BUTTONGROUP_SETTING } from "../button-group";
+import { INPUTGROUP_SETTING } from "../input-group";
 export default defineComponent({
   props: {
     variant: {
@@ -32,16 +37,26 @@ export default defineComponent({
     pill: {
       type: Boolean,
       default: false
+    },
+    href: {
+      type: String,
+      default: void 0
     }
   },
   setup(props) {
+    const inputSetting = inject(INPUTGROUP_SETTING, void 0, false);
+    const buttonSetting = inject(BUTTONGROUP_SETTING, void 0, false);
     const classNames = computed(() => {
       const result = ["btn"];
       if (props.color)
         result.push(`btn--${props.color}`);
       if (props.variant)
         result.push(`btn--variant-${props.variant}`);
-      if (props.size)
+      if (inputSetting?.size.value)
+        result.push(`btn--${inputSetting?.size.value}`);
+      else if (buttonSetting?.size.value)
+        result.push(`btn--${buttonSetting?.size.value}`);
+      else if (props.size)
         result.push(`btn--${props.size}`);
       if (props.icon)
         result.push("btn--icon");
@@ -49,7 +64,13 @@ export default defineComponent({
         result.push("btn--pill");
       return result;
     });
-    return { classNames };
+    const tagName = computed(() => {
+      let tag = "button";
+      if (props.href)
+        tag = "a";
+      return tag;
+    });
+    return { classNames, tagName };
   }
 });
 </script>
@@ -62,14 +83,26 @@ export default defineComponent({
 * Last Update   : Nov 21, 2022
 */
 .btn {
-  --p-color-primary-hover: darken(theme(backgroundColor.accent.emphasis), 5%);
-  --p-color-primary-focus: darken(theme(backgroundColor.accent.emphasis), 10%);
+  --p-color-primary-hover: darken(theme(colors.brand.accent), 5%);
+  --p-color-dark-primary-hover: darken(theme(colors.dark.brand.accent), 5%);
+  --p-color-primary-focus: darken(theme(colors.brand.accent), 10%);
+  --p-color-dark-primary-focus: darken(theme(colors.dark.brand.accent), 10%);
+  --p-color-info-hover: darken(theme(backgroundColor.info.emphasis), 5%);
+  --p-color-dark-info-hover: darken(theme(backgroundColor.dark.info.emphasis), 5%);
+  --p-color-info-focus: darken(theme(backgroundColor.info.emphasis), 10%);
+  --p-color-dark-info-focus: darken(theme(backgroundColor.dark.info.emphasis), 10%);
   --p-color-success-hover: darken(theme(backgroundColor.success.emphasis), 5%);
+  --p-color-dark-success-hover: darken(theme(backgroundColor.dark.success.emphasis), 5%);
   --p-color-success-focus: darken(theme(backgroundColor.success.emphasis), 10%);
+  --p-color-dark-success-focus: darken(theme(backgroundColor.dark.success.emphasis), 10%);
   --p-color-warning-hover: darken(theme(backgroundColor.warning.emphasis), 5%);
+  --p-color-dark-warning-hover: darken(theme(backgroundColor.dark.warning.emphasis), 5%);
   --p-color-warning-focus: darken(theme(backgroundColor.warning.emphasis), 10%);
+  --p-color-dark-warning-focus: darken(theme(backgroundColor.dark.warning.emphasis), 10%);
   --p-color-danger-hover: darken(theme(backgroundColor.danger.emphasis), 5%);
+  --p-color-dark-danger-hover: darken(theme(backgroundColor.dark.danger.emphasis), 5%);
   --p-color-danger-focus: darken(theme(backgroundColor.danger.emphasis), 10%);
+  --p-color-dark-danger-focus: darken(theme(backgroundColor.dark.danger.emphasis), 10%);
 
   @apply inline-flex align-middle font-medium disabled:opacity-50 disabled:pointer-events-none transition-all ease-in-out duration-200;
 
@@ -106,27 +139,38 @@ export default defineComponent({
   * default style variant
   */
   &&--variant-solid {
-    @apply border border-solid hover:shadow-lg focus:shadow-none active:shadow-none text-on-emphasis;
+    @apply border border-solid hover:shadow-lg focus:shadow-none active:shadow-none text-state-emphasis;
+    @apply dark:text-dark-state-emphasis;
 
     &.btn {
       &--default {
         @apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha text-subtle hover:text-default focus:text-default;
+        @apply dark:bg-dark-default-alpha focus:dark:bg-dark-subtle-alpha active:dark:bg-dark-subtle-alpha dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default;
       }
 
       &--primary {
-        @apply bg-accent-emphasis hover:bg-[color:var(--p-color-primary-hover)] focus:bg-[color:var(--p-color-primary-focus)] active:bg-[color:var(--p-color-primary-focus)];
+        @apply bg-brand-accent hover:bg-[color:var(--p-color-primary-hover)] focus:bg-[color:var(--p-color-primary-focus)] active:bg-[color:var(--p-color-primary-focus)];
+        @apply dark:bg-dark-brand-accent hover:dark:bg-[color:var(--p-color-dark-primary-hover)] focus:dark:bg-[color:var(--p-color-dark-primary-focus)] active:dark:bg-[color:var(--p-color-dark-primary-focus)];
+      }
+
+      &--info {
+        @apply bg-info-emphasis hover:bg-[color:var(--p-color-info-hover)] focus:bg-[color:var(--p-color-info-focus)] active:bg-[color:var(--p-color-info-focus)];
+        @apply dark:bg-dark-info-emphasis hover:dark:bg-[color:var(--p-color-dark-info-hover)] focus:dark:bg-[color:var(--p-color-dark-info-focus)] active:dark:bg-[color:var(--p-color-dark-info-focus)];
       }
 
       &--success {
         @apply bg-success-emphasis hover:bg-[color:var(--p-color-success-hover)] focus:bg-[color:var(--p-color-success-focus)] active:bg-[color:var(--p-color-success-focus)];
+        @apply dark:bg-dark-success-emphasis hover:dark:bg-[color:var(--p-color-dark-success-hover)] focus:dark:bg-[color:var(--p-color-dark-success-focus)] active:dark:bg-[color:var(--p-color-dark-success-focus)]
       }
 
       &--warning {
         @apply bg-warning-emphasis hover:bg-[color:var(--p-color-warning-hover)] focus:bg-[color:var(--p-color-warning-focus)] active:bg-[color:var(--p-color-warning-focus)];
+        @apply dark:bg-dark-warning-emphasis hover:dark:bg-[color:var(--p-color-dark-warning-hover)] focus:dark:bg-[color:var(--p-color-dark-warning-focus)] active:dark:bg-[color:var(--p-color-dark-warning-focus)];
       }
 
       &--danger {
         @apply bg-danger-emphasis hover:bg-[color:var(--p-color-danger-hover)] focus:bg-[color:var(--p-color-danger-focus)] active:bg-[color:var(--p-color-danger-focus)];
+        @apply dark:bg-dark-danger-emphasis hover:dark:bg-[color:var(--p-color-dark-danger-hover)] focus:dark:bg-[color:var(--p-color-dark-danger-focus)] active:dark:bg-[color:var(--p-color-dark-danger-focus)]
       }
     }
   }
@@ -134,6 +178,7 @@ export default defineComponent({
   &&--variant-outline,
   &&--variant-ghost {
     @apply border border-solid text-subtle hover:text-default hover:shadow-lg focus:shadow-none active:shadow-none focus:text-default active:text-default;
+    @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
   }
 
   /**
@@ -147,22 +192,32 @@ export default defineComponent({
     &.btn {
       &--default {
         @apply border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
+        @apply dark:border-dark-default-alpha hover:dark:border-dark-subtle-alpha active:dark:border-dark-subtle-alpha focus:dark:border-dark-subtle-alpha;
       }
 
       &--primary {
-        @apply border-accent-emphasis hover:border-[color:var(--p-color-primary-hover)] focus:border-[color:var(--p-color-primary-focus)] active:border-[color:var(--p-color-primary-focus)];
+        @apply border-brand-accent hover:border-[color:var(--p-color-primary-hover)] focus:border-[color:var(--p-color-primary-focus)] active:border-[color:var(--p-color-primary-focus)];
+        @apply dark:border-dark-brand-accent hover:dark:border-[color:var(--p-color-dark-primary-hover)] focus:dark:border-[color:var(--p-color-dark-primary-focus)] active:dark:border-[color:var(--p-color-dark-primary-focus)];
+      }
+
+      &--info {
+        @apply border-info-emphasis hover:border-[color:var(--p-color-info-hover)] focus:border-[color:var(--p-color-info-focus)] active:border-[color:var(--p-color-info-focus)];
+        @apply dark:border-dark-info-emphasis hover:dark:border-[color:var(--p-color-dark-info-hover)] focus:dark:border-[color:var(--p-color-dark-info-focus)] active:dark:border-[color:var(--p-color-dark-info-focus)];
       }
 
       &--success {
         @apply border-success-emphasis hover:border-[color:var(--p-color-success-hover)] focus:border-[color:var(--p-color-success-focus)] active:border-[color:var(--p-color-success-focus)];
+        @apply dark:border-dark-success-emphasis hover:dark:border-[color:var(--p-color-dark-success-hover)] focus:dark:border-[color:var(--p-color-dark-success-focus)] active:dark:border-[color:var(--p-color-dark-success-fucus)];
       }
 
       &--warning {
         @apply border-warning-emphasis hover:border-[color:var(--p-color-warning-hover)] focus:border-[color:var(--p-color-warning-focus)] active:border-[color:var(--p-color-warning-focus)];
+        @apply dark:border-dark-warning-emphasis hover:dark:border-[color:var(--p-color-dark-warning-hover)] focus:dark:border-[color:var(--p-color-dark-warning-focus)] active:dark:border-[color:var(--p-color-dark-warning-focus)]
       }
 
       &--danger {
         @apply border-danger-emphasis hover:border-[color:var(--p-color-danger-hover)] focus:border-[color:var(--p-color-danger-focus)] active:border-[color:var(--p-color-danger-focus)];
+        @apply dark:border-dark-danger-emphasis hover:dark:border-[color:var(--p-color-dark-danger-hover)] focus:dark:border-[color:var(--p-color-dark-danger-focus)] active:dark:border-[color:var(--p-color-dark-danger-focus)];
       }
     }
   }
@@ -171,7 +226,8 @@ export default defineComponent({
   * Button ghost variant
   */
   &&--variant-ghost {
-    @apply border-transparent bg-transparent hover:border-default-alpha hover:bg-default-alpha active:bg-default-alpha focus:bg-default-alpha active:border-default-alpha focus:border-default-alpha;
+    @apply border-transparent bg-transparent hover:border-default-alpha hover:bg-default-alpha active:bg-default-alpha focus:bg-default-alpha active:border-default-alpha focus:border-default-alpha ;
+    @apply dark:border-transparent dark:bg-transparent hover:dark:border-dark-default-alpha hover:dark:bg-dark-default-alpha active:dark:bg-dark-default-alpha focus:dark:bg-dark-default-alpha active:dark:border-dark-default-alpha focus:dark:border-dark-default-alpha;
   }
 
   /**
@@ -183,39 +239,53 @@ export default defineComponent({
 
     &.btn {
       &--default {
-        @apply text-subtle hover:text-default focus:text-default active:text-default;
+        @apply text-subtle hover:text-default focus:text-default active:text-default ;
+        @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
       }
 
       &--primary {
-        @apply text-accent hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
+        @apply text-brand-accent hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
+        @apply dark:text-dark-brand-accent hover:dark:text-[color:var(--p-color-dark-primary-hover)] focus:dark:text-[color:var(--p-color-dark-primary-focus)] active:dark:text-[color:var(--p-color-dark-primary-focus)];
+      }
+
+      &--info {
+        @apply text-info hover:text-[color:var(--p-color-info-hover)] focus:text-[color:var(--p-color-info-focus)] active:text-[color:var(--p-color-info-focus)];
+        @apply dark:text-dark-info hover:dark:text-[color:var(--p-color-dark-info-hover)] focus:dark:text-[color:var(--p-color-dark-info-focus)] active:dark:text-[color:var(--p-color-dark-info-focus)];
       }
 
       &--success {
         @apply text-success hover:text-[color:var(--p-color-success-hover)] focus:text-[color:var(--p-color-success-focus)] active:text-[color:var(--p-color-success-focus)];
+        @apply dark:text-dark-success hover:dark:text-[color:var(--p-color-dark-success-hover)] focus:dark:text-[color:var(--p-color-dark-success-focus)] active:dark:text-[color:var(--p-color-dark-success-focus)];
       }
 
       &--warning {
         @apply text-warning hover:text-[color:var(--p-color-warning-hover)] focus:text-[color:var(--p-color-warning-focus)] active:text-[color:var(--p-color-warning-focus)];
+        @apply dark:text-dark-warning hover:dark:text-[color:var(--p-color-dark-warning-hover)] focus:dark:text-[color:var(--p-color-dark-warning-focus)] active:dark:text-[color:var(--p-color-dark-warning-focus)];
       }
 
       &--danger {
         @apply text-danger hover:text-[color:var(--p-color-danger-hover)] focus:text-[color:var(--p-color-danger-focus)] active:text-[color:var(--p-color-danger-focus)];
+        @apply dark:text-dark-danger hover:dark:text-[color:var(--p-color-dark-danger-hover)] focus:dark:text-[color:var(--p-color-dark-danger-focus)] active:dark:text-[color:var(--p-color-dark-danger-focus)];
       }
     }
   }
 
   &&--variant-input {
     @apply border border-solid border-muted text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
+    @apply dark:border-dark-muted dark:text-dark-subtle dark:bg-dark-default hover:dark:border-dark-subtle focus:dark:border-dark-subtle active:dark:outline-dark-default;
 
     .state--disabled & {
-      @apply bg-muted border-muted pointer-events-none text-muted;
+      @apply bg-subtle border-muted pointer-events-none text-muted;
+      @apply dark:bg-dark-subtle dark:border-dark-muted dark:text-dark-muted;
     }
 
     .state--error & {
       @apply border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis;
 
       &:focus {
         @apply ring-danger border-danger-emphasis;
+        @apply dark:ring-dark-danger dark:border-dark-danger-emphasis;
       }
     }
   }

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { ColorVariant, SizeVariant, StyleVariant } from '.';
+import { ColorVariant, SizeVariant, StyleVariant, TagVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;
@@ -21,8 +21,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    href: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
+    tagName: import("vue-demi").ComputedRef<TagVariant>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<StyleVariant>;
@@ -44,10 +49,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    href: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>>, {
-    icon: boolean;
     variant: StyleVariant;
     size: SizeVariant;
+    icon: boolean;
+    href: string;
     color: ColorVariant;
     pill: boolean;
 }>;

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

@@ -1,3 +1,4 @@
-export declare type StyleVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'input';
-export declare type ColorVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger';
-export declare type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
+export type StyleVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'input';
+export type ColorVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
+export type TagVariant = 'a' | 'button';

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

@@ -9,8 +9,11 @@
 <script>
 import {
   defineComponent,
-  computed
+  computed,
+  provide,
+  toRef
 } from "vue-demi";
+import { BUTTONGROUP_SETTING } from ".";
 export default defineComponent({
   props: {
     size: {
@@ -23,6 +26,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    provide(BUTTONGROUP_SETTING, { size: toRef(props, "size") });
     const classNames = computed(() => {
       const result = ["btn-group"];
       if (props.size)
@@ -81,10 +85,12 @@ export default defineComponent({
       @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;
       }
     }
   }
@@ -111,21 +117,20 @@ export default defineComponent({
     &: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 overwrite the default size
-  * of buttons
+  * Sizing the button group,
+  * and set rounded of first
+  * & last button in each size
   */
   &&--xs:not(&--pill) {
     .btn {
       &:not(.btn--icon),
       .dropdown .btn {
-        @apply px-2 py-[2px] gap-1 text-sm;
-
         &:first-child {
           @apply rounded-l-xs;
         }
@@ -145,8 +150,6 @@ export default defineComponent({
     .btn {
       &:not(.btn--icon),
       .dropdown .btn {
-        @apply px-4 py-1 gap-2 text-base;
-
         &:first-child {
           @apply rounded-l-sm;
         }
@@ -180,11 +183,6 @@ export default defineComponent({
 
   &&--md {
     .btn {
-      &:not(.btn--icon),
-      .dropdown .btn {
-        @apply px-5 py-[10px] gap-3 text-base;
-      }
-
       &:is(.btn--icon) {
         @apply p-[12px];
       }
@@ -193,11 +191,6 @@ export default defineComponent({
 
   &&--lg:not(&--pill) {
     .btn {
-      &:not(.btn--icon),
-      .dropdown .btn {
-        @apply px-8 py-4 gap-4 text-base;
-      }
-
       &:is(.btn--icon) {
         @apply p-[18px];
       }

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

@@ -0,0 +1,6 @@
+import { InjectionKey, Ref } from 'vue-demi';
+import { 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");

package/dist/components/calendar/Calendar.vue

@@ -89,6 +89,7 @@ const Adapters = {
 };
 export default defineComponent({
   components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
     Button,
     Card,
     IconNext,
@@ -124,7 +125,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const viewmode = ref(props.mode);
     const transition = ref("slide-left");
-    const cursor = ref(startOfMonth(props.modelValue ?? new Date()));
+    const cursor = ref(startOfMonth(props.modelValue ?? /* @__PURE__ */ new Date()));
     const model = useVModel(props);
     const context = {
       cursor,
@@ -214,6 +215,7 @@ export default defineComponent({
 <style lang="postcss">
 .calendar {
   @apply flex flex-col space-y-2 text-sm shadow-xl border-transparent;
+  @apply dark:border-transparent;
 
   &__nav {
     @apply flex justify-between space-x-2 mb-2;
@@ -223,22 +225,25 @@ export default defineComponent({
     }
   }
 
-  .btn--variant-solid {
+  .btn.btn--variant-solid {
     @apply justify-center;
 
     &.btn--default {
       @apply border-transparent bg-transparent text-default font-normal;
+      @apply dark:border-transparent dark:bg-transparent dark:text-dark-subtle hover:dark:text-dark-default;
 
       &.calendar__nav-title {
         @apply font-medium;
       }
 
       &[active="true"] {
-        @apply bg-accent-emphasis border-accent-emphasis text-on-emphasis cursor-default;
+        @apply bg-info-emphasis border-info-emphasis text-state-emphasis cursor-default;
+        @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis dark:text-dark-state-emphasis;
       }
 
       &[disabled][active="false"] {
         @apply text-muted;
+        @apply dark:text-dark-muted;
       }
     }
 

package/dist/components/calendar/Calendar.vue.d.ts

@@ -1,26 +1,26 @@
 import { PropType } from 'vue-demi';
 import { CalendarItem } from './adapter/adapter';
-declare type TransitionMode = 'slide-left' | 'slide-right' | 'zoom-in' | 'zoom-out';
+type TransitionMode = 'slide-left' | 'slide-right' | 'zoom-in' | 'zoom-out';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: DateConstructor;
-        default: any;
+        default: undefined;
     };
     disabled: {
         type: BooleanConstructor;
-        default: any;
+        default: undefined;
     };
     readonly: {
         type: BooleanConstructor;
-        default: any;
+        default: undefined;
     };
     max: {
         type: DateConstructor;
-        default: any;
+        default: undefined;
     };
     min: {
         type: DateConstructor;
-        default: any;
+        default: undefined;
     };
     mode: {
         type: PropType<"date" | "month" | "year">;
@@ -37,18 +37,18 @@ declare const _default: import("vue-demi").DefineComponent<{
         toTimeString: () => string;
         toLocaleString: {
             (): string;
-            (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
-            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
         };
         toLocaleDateString: {
             (): string;
-            (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
-            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
         };
         toLocaleTimeString: {
             (): string;
-            (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
-            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
         };
         valueOf: () => number;
         getTime: () => number;
@@ -72,18 +72,18 @@ declare const _default: import("vue-demi").DefineComponent<{
         setTime: (time: number) => number;
         setMilliseconds: (ms: number) => number;
         setUTCMilliseconds: (ms: number) => number;
-        setSeconds: (sec: number, ms?: number) => number;
-        setUTCSeconds: (sec: number, ms?: number) => number;
-        setMinutes: (min: number, sec?: number, ms?: number) => number;
-        setUTCMinutes: (min: number, sec?: number, ms?: number) => number;
-        setHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
-        setUTCHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+        setSeconds: (sec: number, ms?: number | undefined) => number;
+        setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+        setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
         setDate: (date: number) => number;
         setUTCDate: (date: number) => number;
-        setMonth: (month: number, date?: number) => number;
-        setUTCMonth: (month: number, date?: number) => number;
-        setFullYear: (year: number, month?: number, date?: number) => number;
-        setUTCFullYear: (year: number, month?: number, date?: number) => number;
+        setMonth: (month: number, date?: number | undefined) => number;
+        setUTCMonth: (month: number, date?: number | undefined) => number;
+        setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
         toUTCString: () => string;
         toISOString: () => string;
         toJSON: (key?: any) => string;
@@ -97,7 +97,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     }>;
     canNext: import("vue-demi").ComputedRef<boolean>;
     canPrev: import("vue-demi").ComputedRef<boolean>;
-    classNames: import("vue-demi").ComputedRef<any[]>;
+    classNames: import("vue-demi").ComputedRef<never[]>;
     next: () => void;
     prev: () => void;
     changeMode: (step?: number) => void;
@@ -105,36 +105,36 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: DateConstructor;
-        default: any;
+        default: undefined;
     };
     disabled: {
         type: BooleanConstructor;
-        default: any;
+        default: undefined;
     };
     readonly: {
         type: BooleanConstructor;
-        default: any;
+        default: undefined;
     };
     max: {
         type: DateConstructor;
-        default: any;
+        default: undefined;
     };
     min: {
         type: DateConstructor;
-        default: any;
+        default: undefined;
     };
     mode: {
         type: PropType<"date" | "month" | "year">;
         default: string;
     };
 }>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
     min: Date;
     max: Date;
     modelValue: Date;
+    disabled: boolean;
     readonly: boolean;
     mode: "date" | "month" | "year";
 }>;

package/dist/components/calendar/adapter/adapter.d.ts

@@ -21,7 +21,7 @@ export interface CalendarAdapter {
     canPrev: (this: this, context: CalendarContext) => boolean;
 }
 export declare const CalendarFormat: readonly ["date", "month", "year"];
-export declare type CalendarMode = typeof CalendarFormat[number];
+export type CalendarMode = typeof CalendarFormat[number];
 export declare function defineAdapter(adapter: CalendarAdapter): CalendarAdapter;
 /**
  * Format date using date-fns/format,

package/dist/components/calendar/adapter/date.mjs

@@ -17,7 +17,7 @@ import {
 import {
   defineAdapter,
   formatDate
-} from "./adapter";
+} from "./adapter.mjs";
 function getInterval(date) {
   const start = startOfWeek(startOfMonth(date), { weekStartsOn: 1 });
   const end = endOfWeek(endOfMonth(date), { weekStartsOn: 1 });

package/dist/components/camera/Camera.vue

@@ -324,7 +324,8 @@ export default defineComponent({
 
 <style lang="postcss">
 .camera {
-  @apply bg-emphasis w-full flex flex-col select-none relative overflow-hidden;
+  @apply bg-inverse w-full flex flex-col select-none relative overflow-hidden;
+  @apply dark:bg-dark-inverse;
 
   &__video {
     @apply flex-grow min-h-full max-w-full h-auto object-cover;
@@ -366,6 +367,7 @@ export default defineComponent({
 
   &__off-info {
     @apply absolute bottom-20 text-on-emphasis left-0 right-0 text-center text-sm;
+    @apply dark:text-dark-on-emphasis;
   }
 
   &__controls {
@@ -373,10 +375,12 @@ export default defineComponent({
   }
 
   &__toast {
-    @apply absolute bottom-20 left-0 right-0 text-center text-on-emphasis px-4;
+    @apply absolute bottom-20 left-0 right-0 text-center text-on-emphasis;
+    @apply dark:text-dark-on-emphasis px-4;
 
     &-text {
-      @apply bg-emphasis bg-opacity-80 px-4 py-1 text-sm rounded shadow-md inline-block max-w-full truncate;
+      @apply bg-inverse/80 px-4 py-1 text-sm rounded shadow-md inline-block max-w-full truncate;
+      @apply dark:bg-dark-inverse/80;
     }
   }
 }