paket-ui 0.0.1

package/dist/runtime/components/button/ButtonApplyVoucher.vue

@@ -0,0 +1,32 @@
+<script setup>
+const emit = defineEmits(["click"]);
+defineProps({
+  selected: { type: Boolean, required: false },
+  title: { type: String, required: true },
+  description: { type: String, required: false }
+});
+</script>
+
+<template>
+  <div
+    :class="[
+  'box-between w-full mb-3 px-3.5 gap-3 transition-all py-2 ring-1 rounded-lg relative',
+  {
+    'ring-flux-success bg-successContainer text-flux-success': selected,
+    'bg-background shadow ring-outline-variant': !selected
+  }
+]"
+  >
+    <UiIconVoucher />
+    <div class="grow">
+      <h4 class="font-semibold" v-text="title" />
+      <p v-if="description" v-text="description"></p>
+    </div>
+    <Icon name="material-symbols:chevron-right" size="24px" />
+    <button
+      type="button"
+      class="absolute inset-0"
+      @click="emit('click')"
+    ></button>
+  </div>
+</template>

package/dist/runtime/components/button/ButtonApplyVoucher.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    selected?: boolean;
+    title: string;
+    description?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/button/IconButton.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { iconSizeConfig, sizeConfig, variantConfig } from ".";
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  variant: { type: null, required: false, default: "primary" },
+  size: { type: null, required: false, default: "default" },
+  label: { type: String, required: false, default: "" },
+  iconName: { type: String, required: false, default: "mdi:circle" },
+  iconPosition: { type: String, required: false, default: "left" },
+  iconSize: { type: null, required: false, default: "default" },
+  iconClass: { type: null, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  labelClass: { type: null, required: false, default: void 0 }
+});
+</script>
+
+<template>
+  <button
+    :class="
+  cn(
+    'rounded-full flex justify-center items-center gap-2 text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed hover:saturate-150',
+    variantConfig[variant],
+    sizeConfig[size],
+    {
+      'flex-row-reverse': iconPosition === 'right'
+    },
+    props.class
+  )
+"
+    :disabled="disabled || loading"
+  >
+    <Icon
+      :name="loading ? 'svg-spinners:ring-resize' : iconName"
+      :size="iconSizeConfig[iconSize]"
+      :class="cn(props.iconClass)"
+    />
+    <span
+      v-if="label && label != ''"
+      :class="cn(props.labelClass)"
+      v-text="label"
+    ></span>
+  </button>
+</template>

package/dist/runtime/components/button/IconButton.vue.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'vue';
+import { iconSizeConfig, sizeConfig, variantConfig } from '.';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    variant?: keyof typeof variantConfig;
+    size?: keyof typeof sizeConfig;
+    label?: string;
+    iconName?: string;
+    iconPosition?: 'left' | 'right';
+    iconSize?: keyof typeof iconSizeConfig;
+    iconClass?: HTMLAttributes['class'];
+    disabled?: boolean;
+    loading?: boolean;
+    labelClass?: HTMLAttributes['class'];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    class: HTMLAttributes["class"];
+    size: keyof typeof sizeConfig;
+    iconName: string;
+    variant: keyof typeof variantConfig;
+    iconSize: keyof typeof iconSizeConfig;
+    iconPosition: "left" | "right";
+    iconClass: HTMLAttributes["class"];
+    labelClass: HTMLAttributes["class"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/button/LinkButton.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { iconSizeConfig, sizeConfig, variantConfig } from ".";
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  to: { type: null, required: true },
+  variant: { type: null, required: false, default: "primary" },
+  size: { type: null, required: false, default: "default" },
+  label: { type: String, required: false, default: "" },
+  icon: { type: String, required: false, default: void 0 },
+  target: { type: null, required: false, default: "_self" },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false }
+});
+</script>
+
+<template>
+  <NuxtLink
+    :to="to"
+    :class="
+  cn(
+    'rounded-full flex justify-center items-center gap-2 text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed hover:saturate-150',
+    variantConfig[variant],
+    sizeConfig[size],
+    {
+      'cursor-not-allowed': loading || disabled
+    },
+    props.class
+  )
+"
+    :target="target"
+  >
+    <Icon
+      v-if="loading"
+      name="svg-spinners:ring-resize"
+      :size="iconSizeConfig[size]"
+    />
+    <Icon v-if="icon && !loading" :name="icon" :size="iconSizeConfig[size]" />
+    {{ label }}
+  </NuxtLink>
+</template>

package/dist/runtime/components/button/LinkButton.vue.d.ts

@@ -0,0 +1,23 @@
+import type { AnchorHTMLAttributes, HTMLAttributes } from 'vue';
+import { sizeConfig, variantConfig } from '.';
+import type { RouteLocationRaw } from 'vue-router';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    to: RouteLocationRaw;
+    variant?: keyof typeof variantConfig;
+    size?: keyof typeof sizeConfig;
+    label?: string;
+    icon?: string;
+    target?: AnchorHTMLAttributes['target'];
+    disabled?: boolean;
+    loading?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    class: HTMLAttributes["class"];
+    size: keyof typeof sizeConfig;
+    variant: keyof typeof variantConfig;
+    target: string;
+    icon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/button/box.vue

@@ -0,0 +1,14 @@
+<template>
+    <button class="flex items-center px-3 py-2.5 rounded-lg text-flux-primary font-medium text-sm hover:ring-2 hover:ring-flux-primary transition-all gap-2 w-full bg-secondaryContainer">
+        <Icon v-if="icon" :name="icon" size="24px"/>
+        <span v-text="label" class="grow block text-left"></span>
+        <Icon name="material-symbols:chevron-right" size="24px"/>
+    </button>
+</template>
+
+<script setup>
+defineProps({
+  icon: { type: String, required: false },
+  label: { type: String, required: true }
+});
+</script>

package/dist/runtime/components/button/box.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    icon?: string;
+    label: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,28 @@
+export declare const variantConfig: {
+    primary: string;
+    primaryContainer: string;
+    primaryOutline: string;
+    primaryOutlineContainer: string;
+    info: string;
+    infoOutline: string;
+    success: string;
+    successOutline: string;
+    warning: string;
+    warningOutline: string;
+    error: string;
+    errorOutline: string;
+    errorContainer: string;
+    outline: string;
+    container: string;
+};
+export declare const sizeConfig: {
+    default: string;
+    xs: string;
+    sm: string;
+};
+export declare const iconSizeConfig: {
+    default: string;
+    xs: string;
+    sm: string;
+    lg: string;
+};

package/dist/runtime/components/button/index.js

@@ -0,0 +1,28 @@
+export const variantConfig = {
+  primary: "bg-flux-primary text-on-primary border border-flux-primary",
+  primaryContainer: "bg-primary-container text-on-primary-container border border-primary-container",
+  primaryOutline: "text-flux-primary border border-flux-primary",
+  primaryOutlineContainer: "text-secondary-container border border-primary-container",
+  info: "bg-flux-info text-on-info border border-flux-info",
+  infoOutline: "text-flux-info border border-flux-info",
+  success: "bg-flux-success text-on-success border border-flux-success",
+  successOutline: "text-flux-success border border-flux-success",
+  warning: "bg-flux-warning text-on-warning border border-flux-warning",
+  warningOutline: "text-flux-warning border border-flux-warning",
+  error: "bg-flux-error text-on-error border border-flux-error",
+  errorOutline: "text-flux-error border border-flux-error",
+  errorContainer: "bg-error-container text-flux-error border-error-container",
+  outline: "text-on-surface border border-outline-variant hover:border-flux-outline",
+  container: "bg-surface-container text-onSurface"
+};
+export const sizeConfig = {
+  default: "py-2.5 px-4",
+  xs: "py-1 px-2",
+  sm: "py-2 px-4"
+};
+export const iconSizeConfig = {
+  default: "20px",
+  xs: "12px",
+  sm: "16px",
+  lg: "24px"
+};

package/dist/runtime/components/card/BaseCard.vue

@@ -0,0 +1,26 @@
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false }
+});
+const SELF_CONTEXT = Symbol("BaseCard");
+const parentContext = inject(SELF_CONTEXT, null);
+const isNested = !!parentContext;
+provide(SELF_CONTEXT, true);
+</script>
+
+<template>
+  <div
+    :class="
+  cn(
+    'p-5 rounded-xl bg-background dark:bg-surface-container border border-outlineVariant',
+    {
+      'shadow border-0': !isNested && !props.class?.toString().includes('border')
+    },
+    props.class
+  )
+"
+  >
+    <slot name="header" />
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/card/BaseCard.vue.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/card/CardBalanceEstimation.vue

@@ -0,0 +1,29 @@
+<template>
+  <UiCardStatistic
+    :label="props.title"
+    :count="props.amount ?? 0"
+    currency
+    class="lg:px-3.5 lg:py-2.5 relative"
+  >
+    <button
+      class="absolute inset-0 focus:outline-none"
+      @click="emit('click')"
+    />
+    <template #trailing>
+      <Icon
+        name="material-symbols:info-outline"
+        size="24px"
+        class="text-flux-primary"
+      />
+    </template>
+  </UiCardStatistic>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, required: true },
+  amount: { type: Number, required: false },
+  loading: { type: Boolean, required: false }
+});
+const emit = defineEmits(["click"]);
+</script>

package/dist/runtime/components/card/CardBalanceEstimation.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    title: string;
+    amount?: number;
+    loading?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/card/CardBalanceSummary.vue

@@ -0,0 +1,24 @@
+<template>
+  <UiCardStatistic
+    :label="title"
+    :icon="icon"
+    :count="amount"
+    icon-class="bg-background dark:bg-secondary-container"
+    class="bg-surface-container-low"
+    currency
+    :hoverable="false"
+  >
+    <template v-if="description" #description>
+      <div class="text-xs text-outline" v-text="description" />
+    </template>
+  </UiCardStatistic>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  amount: { type: Number, required: false },
+  description: { type: String, required: false },
+  icon: { type: String, required: false }
+});
+</script>

package/dist/runtime/components/card/CardBalanceSummary.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    title: string;
+    amount?: number;
+    description?: string;
+    icon?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/card/CardStatistic.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    :class="
+  cn(
+    'group p-3.5 rounded-xl border border-outlineVariant gap-3 items-start flex relative',
+    {
+      'cursor-pointer hover:bg-secondary-container hover:border-flux-primary hover:ring-1 hover:ring-inset hover:ring-flux-primary': hoverable,
+      'bg-secondary-container border-flux-primary ring-1 ring-inset ring-flux-primary': active
+    },
+    props.class
+  )
+"
+  >
+    <div
+      v-if="icon"
+      :class="
+  cn(
+    'p-1.5 aspect-square transition-all bg-secondary-container rounded-full text-flux-primary',
+    {
+      'group-hover:bg-flux-primary group-hover:text-on-primary': hoverable,
+      'bg-flux-primary text-on-primary': active
+    },
+    props.iconClass
+  )
+"
+    >
+      <Icon :name="icon" size="24px" />
+    </div>
+    <div
+      class="space-y-1 text-sm grow"
+      :class="{
+  'group-hover:text-onPrimaryContainer': hoverable,
+  'text-on-primary-container': active
+}"
+    >
+      <p
+        :class="
+  cn('font-normal text-sm text-onSurfaceVariant', props.labelClass)
+"
+      >
+        {{ label }}
+      </p>
+
+      <slot name="count">
+        <Icon
+          v-if="props.loading || !count && count !== 0"
+          name="svg-spinners:3-dots-fade"
+          size="24px"
+          class="inline-flex"
+        />
+        <span
+          v-else
+          :class="cn('text-lg font-bold', props.contentClass)"
+          v-text="count >= 0 ? formatNumber(count, currency) : ''"
+        />
+      </slot>
+      <slot name="description" />
+    </div>
+    <slot name="trailing"> </slot>
+    <span
+      v-if="percentage && parentTotal > 0"
+      :class="
+  cn(
+    'bg-surfaceContainerLow px-2 py-1 font-semibold text-xs rounded-full text-flux-primary',
+    {
+      'group-hover:bg-flux-primary group-hover:text-onPrimary': hoverable,
+      'bg-flux-primary text-on-primary': active
+    }
+  )
+"
+      v-text="calculatePercentage + `%`"
+    />
+    <slot />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  labelClass: { type: null, required: false, default: void 0 },
+  iconClass: { type: null, required: false, default: void 0 },
+  contentClass: { type: null, required: false, default: void 0 },
+  percentage: { type: Boolean, required: false, default: false },
+  parentTotal: { type: Number, required: false, default: 0 },
+  label: { type: String, required: true },
+  count: { type: Number, required: false, default: void 0 },
+  icon: { type: String, required: false, default: void 0 },
+  loading: { type: Boolean, required: false },
+  currency: { type: Boolean, required: false, default: false },
+  hoverable: { type: Boolean, required: false, default: true },
+  active: { type: Boolean, required: false, default: false }
+});
+const calculatePercentage = computed(
+  () => props.parentTotal > 0 && props.count && props.count > 0 ? Math.round(props.count / props.parentTotal * 1e4) / 100 : 0
+);
+</script>

package/dist/runtime/components/card/CardStatistic.vue.d.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    labelClass?: HTMLAttributes['class'];
+    iconClass?: HTMLAttributes['class'];
+    contentClass?: HTMLAttributes['class'];
+    percentage?: boolean;
+    parentTotal?: number;
+    label: string;
+    count?: number;
+    icon?: string;
+    loading?: boolean;
+    currency?: boolean;
+    hoverable?: boolean;
+    active?: boolean;
+};
+declare var __VLS_5: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    count?: (props: typeof __VLS_5) => any;
+} & {
+    description?: (props: typeof __VLS_11) => any;
+} & {
+    trailing?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    class: HTMLAttributes["class"];
+    percentage: boolean;
+    icon: string;
+    iconClass: HTMLAttributes["class"];
+    labelClass: HTMLAttributes["class"];
+    contentClass: HTMLAttributes["class"];
+    count: number;
+    currency: boolean;
+    hoverable: boolean;
+    parentTotal: number;
+    active: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/card/CreditCard.vue

@@ -0,0 +1,106 @@
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</script>
+
+<template>
+  <div
+    :class="
+  cn(
+    'border-2 border-background dark:border-flux-outline shadow-lg text-on-secondary-container rounded-xl p-4 relative overflow-hidden bg-secondary-container',
+    props.class
+  )
+"
+  >
+    <svg
+      class="absolute bottom-0 right-0 opacity-70"
+      width="189"
+      height="190"
+      viewBox="0 0 189 190"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_1130_118794)">
+        <path
+          d="M185.653 258.158C150.063 258.158 100.307 212.213 100.307 165.448C100.307 118.682 129.158 80.7717 164.748 80.7717C200.338 80.7717 229.189 118.682 229.189 165.448C229.189 212.213 221.243 258.158 185.653 258.158Z"
+          fill="#2C0051"
+        />
+        <path
+          d="M122.887 231.827C93.5781 231.827 69.819 193.586 69.819 146.415C69.819 99.2427 149.452 69.6851 178.761 69.6851C208.069 69.6851 155.225 99.2427 155.225 146.415C155.225 193.586 152.195 231.827 122.887 231.827Z"
+          fill="#FFDBCA"
+          fill-opacity="0.8"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_1130_118794"
+          x="0.527504"
+          y="0.393715"
+          width="297.953"
+          height="327.055"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="34.6457"
+            result="effect1_foregroundBlur_1130_118794"
+          />
+        </filter>
+      </defs>
+    </svg>
+    <svg
+      class="absolute top-0 left-0"
+      width="334"
+      height="183"
+      viewBox="0 0 334 183"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_1130_118791)">
+        <path
+          d="M264.5 29.9999C264.5 65.5896 139.063 83.1496 92.298 83.1496C45.5328 83.1496 -18.5 36.5898 -18.5 1C-18.5 -34.5898 45.5328 -43.5 92.298 -43.5C139.063 -43.5 264.5 -5.58987 264.5 29.9999Z"
+          fill="#7D3EB9"
+          fill-opacity="0.8"
+        />
+        <path
+          d="M158.677 60.5702C158.677 89.8786 120.437 113.638 73.2652 113.638C26.0933 113.638 -3.46436 34.0047 -3.46436 4.69627C-3.46436 -24.6121 26.0933 28.2322 73.2652 28.2322C120.437 28.2322 158.677 31.2619 158.677 60.5702Z"
+          fill="#FFDBCA"
+          fill-opacity="0.8"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_1130_118791"
+          x="-87.7913"
+          y="-115.024"
+          width="421.583"
+          height="297.953"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="34.6457"
+            result="effect1_foregroundBlur_1130_118791"
+          />
+        </filter>
+      </defs>
+    </svg>
+
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/card/CreditCard.vue.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};