@nuxt/ui 4.3.0 → 4.5.0

package/dist/runtime/components/PinInput.d.vue.ts

@@ -31,6 +31,8 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
     autofocus?: boolean;
     autofocusDelay?: number;
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
     class?: any;
     ui?: PinInput['slots'];
 }
@@ -38,8 +40,15 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T
     change: [event: Event];
     blur: [event: Event];
 };
-declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<PinInputProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<PinInputProps<T> & {
+        onBlur?: ((event: Event) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
+        onComplete?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -51,8 +60,8 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/PinInput.vue

@@ -7,6 +7,7 @@ import { ref, computed, onMounted } from "vue";
 import { PinInputInput, PinInputRoot, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
 import { tv } from "../utils/tv";
@@ -19,8 +20,9 @@ const props = defineProps({
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false, default: 0 },
   highlight: { type: Boolean, required: false },
+  fixed: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   defaultValue: { type: null, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
@@ -34,15 +36,20 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("pinInput", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "disabled", "id", "mask", "name", "otp", "required", "type"), emits);
 const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pinInput || {} })({
   color: color.value,
   variant: props.variant,
   size: size.value,
-  highlight: highlight.value
+  highlight: highlight.value,
+  fixed: props.fixed
 }));
 const inputsRef = ref([]);
+function setInputRef(index, el) {
+  inputsRef.value[index] = el;
+}
 const completed = ref(false);
 function onComplete(value) {
   const event = new Event("change", { target: { value } });
@@ -79,17 +86,17 @@ defineExpose({
     :model-value="modelValue"
     :default-value="defaultValue"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"
   >
     <PinInputInput
       v-for="(ids, index) in looseToNumber(props.length)"
       :key="ids"
-      :ref="(el) => inputsRef[index] = el"
+      :ref="(el) => setInputRef(index, el)"
       :index="index"
       data-slot="base"
-      :class="ui.base({ class: props.ui?.base })"
+      :class="ui.base({ class: uiProp?.base })"
       :disabled="disabled"
       @blur="onBlur"
       @focus="emitFormFocus"

package/dist/runtime/components/PinInput.vue.d.ts

@@ -31,6 +31,8 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
     autofocus?: boolean;
     autofocusDelay?: number;
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
     class?: any;
     ui?: PinInput['slots'];
 }
@@ -38,8 +40,15 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T
     change: [event: Event];
     blur: [event: Event];
 };
-declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<PinInputProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<PinInputProps<T> & {
+        onBlur?: ((event: Event) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
+        onComplete?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -51,8 +60,8 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Popover.d.vue.ts

@@ -54,8 +54,13 @@ export interface PopoverSlots<M extends PopoverMode = PopoverMode> {
     content(props: SlotProps<M>): any;
     anchor(props: SlotProps<M>): any;
 }
-declare const __VLS_export: <M extends PopoverMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<PopoverProps<M> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "close:prevent") => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <M extends PopoverMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<PopoverProps<M> & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onClose:prevent"?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -65,8 +70,8 @@ declare const __VLS_export: <M extends PopoverMode>(__VLS_props: NonNullable<Awa
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Popover.vue

@@ -9,7 +9,9 @@ import { useForwardPropsEmits } from "reka-ui";
 import { Popover, HoverCard } from "reka-ui/namespaced";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { usePortal } from "../composables/usePortal";
+import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
 const props = defineProps({
   mode: { type: null, required: false, default: "click" },
@@ -29,6 +31,7 @@ const props = defineProps({
 const emits = defineEmits(["close:prevent", "update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("popover", props);
 const pick = props.mode === "hover" ? reactivePick(props, "defaultOpen", "open", "openDelay", "closeDelay") : reactivePick(props, "defaultOpen", "open", "modal");
 const rootProps = useForwardPropsEmits(pick, emits);
 const portalProps = usePortal(toRef(() => props.portal));
@@ -44,7 +47,9 @@ const contentEvents = computed(() => {
       return acc;
     }, {});
   }
-  return {};
+  return {
+    pointerDownOutside
+  };
 });
 const arrowProps = toRef(() => props.arrow);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.popover || {} })({
@@ -64,10 +69,10 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
-      <Component.Content v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
+      <Component.Content v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-on="contentEvents">
         <slot name="content" v-bind="close ? { close } : {}" />
 
-        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />
+        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
       </Component.Content>
     </Component.Portal>
   </Component.Root>

package/dist/runtime/components/Popover.vue.d.ts

@@ -54,8 +54,13 @@ export interface PopoverSlots<M extends PopoverMode = PopoverMode> {
     content(props: SlotProps<M>): any;
     anchor(props: SlotProps<M>): any;
 }
-declare const __VLS_export: <M extends PopoverMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<PopoverProps<M> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "close:prevent") => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <M extends PopoverMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<PopoverProps<M> & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onClose:prevent"?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -65,8 +70,8 @@ declare const __VLS_export: <M extends PopoverMode>(__VLS_props: NonNullable<Awa
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/PricingPlan.d.vue.ts

@@ -107,9 +107,11 @@ export interface PricingPlanSlots {
     tagline(props?: {}): any;
     terms(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PricingPlanProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlanProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingPlanSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PricingPlanProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlanProps> & Readonly<{}>, {
+    orientation: PricingPlan["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingPlanSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/PricingPlan.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import UBadge from "./Badge.vue";
 import UButton from "./Button.vue";
@@ -30,10 +31,11 @@ const props = defineProps({
   highlight: { type: Boolean, required: false },
   scale: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("pricingPlan", props);
 const [DefinePriceTemplate, ReusePriceTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pricingPlan || {} })({
   orientation: props.orientation,
@@ -46,26 +48,26 @@ const features = computed(() => props.features?.map((feature) => typeof feature
 
 <template>
   <DefinePriceTemplate>
-    <div v-if="discount || price || !!slots.discount || !!slots.price || billingCycle || billingPeriod || !!slots.billing" data-slot="priceWrapper" :class="ui.priceWrapper({ class: props.ui?.priceWrapper })">
-      <div v-if="discount && price || !!slots.discount" data-slot="discount" :class="ui.discount({ class: props.ui?.discount })">
+    <div v-if="discount || price || !!slots.discount || !!slots.price || billingCycle || billingPeriod || !!slots.billing" data-slot="priceWrapper" :class="ui.priceWrapper({ class: uiProp?.priceWrapper })">
+      <div v-if="discount && price || !!slots.discount" data-slot="discount" :class="ui.discount({ class: uiProp?.discount })">
         <slot name="discount">
           {{ price }}
         </slot>
       </div>
 
-      <div v-if="discount || price || !!slots.price" data-slot="price" :class="ui.price({ class: props.ui?.price })">
+      <div v-if="discount || price || !!slots.price" data-slot="price" :class="ui.price({ class: uiProp?.price })">
         <slot name="price">
           {{ discount || price }}
         </slot>
       </div>
 
-      <div v-if="billingCycle || billingPeriod || !!slots.billing" data-slot="billing" :class="ui.billing({ class: props.ui?.billing })">
+      <div v-if="billingCycle || billingPeriod || !!slots.billing" data-slot="billing" :class="ui.billing({ class: uiProp?.billing })">
         <slot name="billing" :ui="ui">
-          <span data-slot="billingPeriod" :class="ui.billingPeriod({ class: props.ui?.billingPeriod })">
+          <span data-slot="billingPeriod" :class="ui.billingPeriod({ class: uiProp?.billingPeriod })">
             {{ billingPeriod || "\xA0" }}
           </span>
 
-          <span v-if="billingCycle" data-slot="billingCycle" :class="ui.billingCycle({ class: props.ui?.billingCycle })">
+          <span v-if="billingCycle" data-slot="billingCycle" :class="ui.billingCycle({ class: uiProp?.billingCycle })">
             {{ billingCycle }}
           </span>
         </slot>
@@ -73,15 +75,15 @@ const features = computed(() => props.features?.map((feature) => typeof feature
     </div>
   </DefinePriceTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.header && orientation === 'vertical'" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" v-bind="$attrs" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.header && orientation === 'vertical'" data-slot="header" :class="ui.header({ class: uiProp?.header })">
       <slot name="header" />
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
+    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
       <slot name="body">
-        <div data-slot="titleWrapper" :class="ui.titleWrapper({ class: props.ui?.titleWrapper })">
-          <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+        <div data-slot="titleWrapper" :class="ui.titleWrapper({ class: uiProp?.titleWrapper })">
+          <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
             <slot name="title">
               {{ title }}
             </slot>
@@ -94,12 +96,12 @@ const features = computed(() => props.features?.map((feature) => typeof feature
               variant="subtle"
               v-bind="typeof badge === 'string' ? { label: badge } : badge"
               data-slot="badge"
-              :class="ui.badge({ class: props.ui?.badge })"
+              :class="ui.badge({ class: uiProp?.badge })"
             />
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
           <slot name="description">
             {{ description }}
           </slot>
@@ -107,21 +109,21 @@ const features = computed(() => props.features?.map((feature) => typeof feature
 
         <ReusePriceTemplate v-if="orientation === 'vertical'" />
 
-        <ul v-if="features?.length || !!slots.features" data-slot="features" :class="ui.features({ class: props.ui?.features })">
+        <ul v-if="features?.length || !!slots.features" data-slot="features" :class="ui.features({ class: uiProp?.features })">
           <slot name="features">
-            <li v-for="(feature, index) in features" :key="index" data-slot="feature" :class="ui.feature({ class: props.ui?.feature })">
-              <UIcon :name="feature.icon || appConfig.ui.icons.success" data-slot="featureIcon" :class="ui.featureIcon({ class: props.ui?.featureIcon })" />
+            <li v-for="(feature, index) in features" :key="index" data-slot="feature" :class="ui.feature({ class: uiProp?.feature })">
+              <UIcon :name="feature.icon || appConfig.ui.icons.success" data-slot="featureIcon" :class="ui.featureIcon({ class: uiProp?.featureIcon })" />
 
-              <span data-slot="featureTitle" :class="ui.featureTitle({ class: props.ui?.featureTitle })">{{ feature.title }}</span>
+              <span data-slot="featureTitle" :class="ui.featureTitle({ class: uiProp?.featureTitle })">{{ feature.title }}</span>
             </li>
           </slot>
         </ul>
       </slot>
     </div>
 
-    <div v-if="terms || !!slots.terms || (button || !!slots.button) || orientation === 'horizontal' || (tagline || !!slots.tagline) || !!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="terms || !!slots.terms || (button || !!slots.button) || orientation === 'horizontal' || (tagline || !!slots.tagline) || !!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
       <slot name="footer">
-        <div v-if="tagline || !!slots.tagline" data-slot="tagline" :class="ui.tagline({ class: props.ui?.tagline })">
+        <div v-if="tagline || !!slots.tagline" data-slot="tagline" :class="ui.tagline({ class: uiProp?.tagline })">
           <slot name="tagline">
             {{ tagline }}
           </slot>
@@ -130,10 +132,10 @@ const features = computed(() => props.features?.map((feature) => typeof feature
         <ReusePriceTemplate v-if="orientation === 'horizontal'" />
 
         <slot name="button" :ui="ui">
-          <UButton v-if="button" v-bind="{ block: true, size: 'lg', ...button }" data-slot="button" :class="ui.button({ class: props.ui?.button })" @click="button?.onClick" />
+          <UButton v-if="button" v-bind="{ block: true, size: 'lg', ...button }" data-slot="button" :class="ui.button({ class: uiProp?.button })" @click="button?.onClick" />
         </slot>
 
-        <div v-if="terms || !!slots.terms" data-slot="terms" :class="ui.terms({ class: props.ui?.terms })">
+        <div v-if="terms || !!slots.terms" data-slot="terms" :class="ui.terms({ class: uiProp?.terms })">
           <slot name="terms">
             {{ terms }}
           </slot>

package/dist/runtime/components/PricingPlan.vue.d.ts

@@ -107,9 +107,11 @@ export interface PricingPlanSlots {
     tagline(props?: {}): any;
     terms(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PricingPlanProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlanProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingPlanSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PricingPlanProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PricingPlanProps> & Readonly<{}>, {
+    orientation: PricingPlan["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PricingPlanSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/PricingPlans.d.vue.ts

@@ -27,6 +27,9 @@ export interface PricingPlansProps {
      */
     scale?: boolean;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 type ExtendSlotWithPlan<T extends PricingPlanProps, K extends keyof PricingPlanSlots> = PricingPlanSlots[K] extends (props: infer P) => any ? (props: P & {
     plan: T;
@@ -36,8 +39,10 @@ export type PricingPlansSlots<T extends PricingPlanProps = PricingPlanProps> = {
 } & {
     default(props?: {}): any;
 };
-declare const __VLS_export: <T extends PricingPlanProps>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<PricingPlansProps> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends PricingPlanProps>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<PricingPlansProps> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -47,8 +52,8 @@ declare const __VLS_export: <T extends PricingPlanProps>(__VLS_props: NonNullabl
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/PricingPlans.vue

@@ -8,6 +8,7 @@ import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
+import { useComponentUI } from "../composables/useComponentUI";
 import UPricingPlan from "./PricingPlan.vue";
 const props = defineProps({
   as: { type: null, required: false },
@@ -15,11 +16,13 @@ const props = defineProps({
   orientation: { type: null, required: false, default: "horizontal" },
   compact: { type: Boolean, required: false, default: false },
   scale: { type: Boolean, required: false, default: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const getProxySlots = () => omit(slots, ["default"]);
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("pricingPlans", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pricingPlans || {} }));
 const count = computed(() => props.plans?.length || slots.default?.()?.flatMap(mapSlot).filter(Boolean)?.length || 3);
 function mapSlot(slot) {
@@ -34,7 +37,7 @@ function mapSlot(slot) {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui({ class: props.class, compact, scale, orientation })" :style="{ '--count': count }">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui({ class: [uiProp?.base, props.class], compact, scale, orientation })" :style="{ '--count': count }">
     <slot>
       <UPricingPlan
         v-for="(plan, index) in plans"

package/dist/runtime/components/PricingPlans.vue.d.ts

@@ -27,6 +27,9 @@ export interface PricingPlansProps {
      */
     scale?: boolean;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 type ExtendSlotWithPlan<T extends PricingPlanProps, K extends keyof PricingPlanSlots> = PricingPlanSlots[K] extends (props: infer P) => any ? (props: P & {
     plan: T;
@@ -36,8 +39,10 @@ export type PricingPlansSlots<T extends PricingPlanProps = PricingPlanProps> = {
 } & {
     default(props?: {}): any;
 };
-declare const __VLS_export: <T extends PricingPlanProps>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<PricingPlansProps> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends PricingPlanProps>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<PricingPlansProps> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -47,8 +52,8 @@ declare const __VLS_export: <T extends PricingPlanProps>(__VLS_props: NonNullabl
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/PricingTable.d.vue.ts

@@ -90,8 +90,10 @@ export type PricingTableSlots<T extends PricingTableTier = PricingTableTier> = {
         section: PricingTableSection<T>;
     }) => any;
 } & DynamicSlots<T, 'title' | 'description' | 'badge' | 'button' | 'billing' | 'discount' | 'price'> & FeatureDynamicSlots<PricingTableSectionFeature<T>, 'title' | 'value'> & SectionDynamicSlots<PricingTableSection<T>, 'title'>;
-declare const __VLS_export: <T extends PricingTableTier>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<PricingTableProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends PricingTableTier>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<PricingTableProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -101,8 +103,8 @@ declare const __VLS_export: <T extends PricingTableTier>(__VLS_props: NonNullabl
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};