@nuxt/ui 3.3.1 → 4.0.0-alpha.0

package/dist/runtime/components/PricingTable.vue

@@ -0,0 +1,239 @@
+<script>
+import theme from "#build/ui/pricing-table";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+import UBadge from "./Badge.vue";
+import UButton from "./Button.vue";
+import UIcon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  caption: { type: String, required: false },
+  tiers: { type: Array, required: true },
+  sections: { type: Array, required: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const formatSlotName = (item) => {
+  if (item.id) return item.id;
+  return item.title.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+};
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pricingTable || {} })());
+const [DefineTierTemplate, ReuseTierTemplate] = createReusableTemplate({
+  props: {
+    tier: Object
+  }
+});
+const [DefineFeatureTemplate, ReuseFeatureTemplate] = createReusableTemplate({
+  props: {
+    tier: Object,
+    feature: Object
+  }
+});
+</script>
+
+<template>
+  <DefineTierTemplate v-slot="{ tier }">
+    <slot :name="tier.id" :tier="tier">
+      <slot name="tier" :tier="tier">
+        <div :class="ui.tierTitleWrapper({ class: props.ui?.tierTitleWrapper })">
+          <div :class="ui.tierTitle({ class: props.ui?.tierTitle })">
+            <slot :name="`${tier.id}-title`" :tier="tier">
+              <slot name="tier-title" :tier="tier">
+                {{ tier.title }}
+              </slot>
+            </slot>
+          </div>
+
+          <slot :name="`${tier.id}-badge`" :tier="tier">
+            <slot name="tier-badge" :tier="tier">
+              <UBadge
+                v-if="tier.badge"
+                color="primary"
+                variant="subtle"
+                v-bind="typeof tier.badge === 'string' ? { label: tier.badge } : tier.badge"
+                :class="ui.tierBadge({ class: props.ui?.tierBadge })"
+              />
+            </slot>
+          </slot>
+        </div>
+
+        <div v-if="tier.description || !!slots['tier-description'] || !!slots[`${tier.id}-description`]" :class="ui.tierDescription({ class: props.ui?.tierDescription })">
+          <slot :name="`${tier.id}-description`" :tier="tier">
+            <slot name="tier-description" :tier="tier">
+              {{ tier.description }}
+            </slot>
+          </slot>
+        </div>
+
+        <div v-if="tier.discount || tier.price || !!slots['tier-discount'] || !!slots[`${tier.id}-discount`] || !!slots['tier-price'] || !!slots[`${tier.id}-price`] || tier.billingCycle || tier.billingPeriod || !!slots['tier-billing'] || !!slots[`${tier.id}-billing`]" :class="ui.tierPriceWrapper({ class: props.ui?.tierPriceWrapper })">
+          <div v-if="tier.discount && tier.price || !!slots[`${tier.id}-discount`] || !!slots['tier-discount']" :class="ui.tierDiscount({ class: props.ui?.tierDiscount })">
+            <slot :name="`${tier.id}-discount`" :tier="tier">
+              <slot name="tier-discount" :tier="tier">
+                {{ tier.price }}
+              </slot>
+            </slot>
+          </div>
+
+          <div v-if="tier.discount || tier.price || !!slots[`${tier.id}-price`] || !!slots['tier-price']" :class="ui.tierPrice({ class: props.ui?.tierPrice })">
+            <slot :name="`${tier.id}-price`" :tier="tier">
+              <slot name="tier-price" :tier="tier">
+                {{ tier.discount || tier.price }}
+              </slot>
+            </slot>
+          </div>
+
+          <div v-if="tier.billingCycle || tier.billingPeriod || !!slots[`${tier.id}-billing`] || !!slots['tier-billing']" :class="ui.tierBilling({ class: props.ui?.tierBilling })">
+            <slot :name="`${tier.id}-billing`" :tier="tier">
+              <slot name="tier-billing" :tier="tier">
+                <span :class="ui.tierBillingPeriod({ class: props.ui?.tierBillingPeriod })">
+                  {{ tier.billingPeriod || "\xA0" }}
+                </span>
+
+                <span v-if="tier.billingCycle" :class="ui.tierBillingCycle({ class: props.ui?.tierBillingCycle })">
+                  {{ tier.billingCycle }}
+                </span>
+              </slot>
+            </slot>
+          </div>
+        </div>
+
+        <div v-if="!!slots[`${tier.id}-button`] || !!slots['tier-button'] || tier.button" :class="ui.tierButton({ class: props.ui?.tierButton })">
+          <slot :name="`${tier.id}-button`" :tier="tier">
+            <slot name="tier-button" :tier="tier">
+              <UButton v-if="tier.button" block size="lg" v-bind="tier.button" />
+            </slot>
+          </slot>
+        </div>
+      </slot>
+    </slot>
+  </DefineTierTemplate>
+
+  <DefineFeatureTemplate v-slot="{ feature, tier }">
+    <template v-if="feature.tiers?.[tier.id]">
+      <UIcon v-if="typeof feature.tiers[tier.id] === 'boolean'" :name="appConfig.ui.icons.success" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon, active: true })" />
+      <template v-else>
+        {{ feature.tiers[tier.id] }}
+      </template>
+    </template>
+
+    <UIcon v-else :name="appConfig.ui.icons.minus" :class="ui.tierFeatureIcon({ class: props.ui?.tierFeatureIcon })" />
+  </DefineFeatureTemplate>
+
+  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <table :class="ui.table({ class: props.ui?.table })">
+      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
+        <slot name="caption">
+          {{ caption || t("pricingTable.caption") }}
+        </slot>
+      </caption>
+
+      <thead :class="ui.thead({ class: props.ui?.thead })">
+        <tr :class="ui.tr({ class: props.ui?.tr })">
+          <td />
+
+          <th
+            v-for="(tier, index) in tiers"
+            :key="index"
+            scope="col"
+            :class="ui.tier({ class: props.ui?.tier, highlight: tier.highlight })"
+          >
+            <ReuseTierTemplate :tier="tier" />
+          </th>
+        </tr>
+      </thead>
+
+      <tbody :class="ui.tbody({ class: props.ui?.tbody })">
+        <template v-for="(section, sectionIndex) in sections" :key="sectionIndex">
+          <tr :class="ui.tr({ class: props.ui?.tr, section: sectionIndex > 0 })">
+            <th scope="row" :class="ui.th({ class: props.ui?.th })">
+              <div v-if="section.title || !!slots['section-title'] || !!slots[`section-${formatSlotName(section)}-title`]" :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
+                <slot :name="`section-${formatSlotName(section)}-title`" :section="section">
+                  <slot name="section-title" :section="section">
+                    {{ section.title }}
+                  </slot>
+                </slot>
+              </div>
+            </th>
+
+            <td
+              v-for="(tier, index) in tiers"
+              :key="`${sectionIndex}-tier-${index}`"
+              :class="ui.td({ class: props.ui?.td, highlight: tier.highlight })"
+            />
+          </tr>
+
+          <tr v-for="(feature, featureIndex) in section.features" :key="`${sectionIndex}-feature-${featureIndex}`">
+            <th scope="row" :class="ui.th({ class: props.ui?.th })">
+              <div :class="ui.featureTitle({ class: props.ui?.featureTitle })">
+                <slot :name="`feature-${formatSlotName(feature)}-title`" :feature="feature" :section="section">
+                  <slot name="feature-title" :feature="feature" :section="section">
+                    {{ feature.title }}
+                  </slot>
+                </slot>
+              </div>
+            </th>
+
+            <td
+              v-for="(tier, index) in tiers"
+              :key="`${sectionIndex}-feature-${featureIndex}-tier-${index}`"
+              :class="ui.td({ class: props.ui?.td, highlight: tier.highlight })"
+            >
+              <div :class="ui.featureValue({ class: props.ui?.featureValue })">
+                <slot :name="`feature-${formatSlotName(feature)}-value`" :feature="feature" :tier="tier" :section="section">
+                  <slot name="feature-value" :feature="feature" :tier="tier" :section="section">
+                    <ReuseFeatureTemplate :tier="tier" :feature="feature" />
+                  </slot>
+                </slot>
+              </div>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+
+    <ul :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(tier, index) in tiers" :key="index" :class="ui.item({ class: props.ui?.item, highlight: tier.highlight })">
+        <ReuseTierTemplate :tier="tier" />
+
+        <div v-for="(section, sectionIndex) in sections" :key="`section-${sectionIndex}`" :class="ui.section({ class: props.ui?.section })">
+          <div v-if="section.title" :class="ui.sectionTitle({ class: props.ui?.sectionTitle })">
+            <slot :name="`section-${formatSlotName(section)}-title`" :section="section">
+              <slot name="section-title" :section="section">
+                {{ section.title }}
+              </slot>
+            </slot>
+          </div>
+
+          <div v-for="(feature, featureIndex) in section.features" :key="`section-${sectionIndex}-feature-${featureIndex}`" :class="ui.feature({ class: props.ui?.feature })">
+            <div :class="ui.featureTitle({ class: props.ui?.featureTitle })">
+              <slot :name="`feature-${formatSlotName(feature)}-title`" :feature="feature" :section="section">
+                <slot name="feature-title" :feature="feature" :section="section">
+                  {{ feature.title }}
+                </slot>
+              </slot>
+            </div>
+
+            <div :class="ui.featureValue({ class: props.ui?.featureValue })">
+              <slot :name="`feature-${formatSlotName(feature)}-value`" :feature="feature" :tier="tier" :section="section">
+                <slot name="feature-value" :feature="feature" :tier="tier" :section="section">
+                  <ReuseFeatureTemplate :tier="tier" :feature="feature" />
+                </slot>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </Primitive>
+</template>

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

@@ -0,0 +1,105 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/pricing-table';
+import type { PricingPlanProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type PricingTable = ComponentConfig<typeof theme, AppConfig, 'pricingTable'>;
+type DynamicSlots<T extends {
+    id: string;
+}, S extends string | undefined = undefined> = {
+    [K in T['id'] as K extends string ? S extends string ? (K | `${K}-${S}`) : K : never]?: (props: {
+        tier: Extract<T, {
+            id: K extends `${infer Base}-${S}` ? Base : K;
+        }>;
+    }) => any;
+};
+type FeatureDynamicSlots<T extends PricingTableSectionFeature, S extends string | undefined = undefined> = {
+    [K in (T['id'] extends string ? T['id'] : string) as K extends string ? S extends string ? (`feature-${K}` | `feature-${K}-${S}`) : `feature-${K}` : never]?: (props: {
+        feature: T;
+        tier: PricingTableTier;
+        section: PricingTableSection;
+    }) => any;
+};
+type SectionDynamicSlots<T extends PricingTableSection, S extends string | undefined = undefined> = {
+    [K in (T['id'] extends string ? T['id'] : string) as K extends string ? S extends string ? (`section-${K}` | `section-${K}-${S}`) : `section-${K}` : never]?: (props: {
+        section: T;
+    }) => any;
+};
+export type PricingTableTier = Pick<PricingPlanProps, 'title' | 'description' | 'badge' | 'billingCycle' | 'billingPeriod' | 'price' | 'discount' | 'button' | 'highlight'> & {
+    id: string;
+    [key: string]: any;
+};
+export type PricingTableSectionFeature<T extends PricingTableTier = PricingTableTier> = {
+    id?: string;
+    title: string;
+    tiers?: {
+        [K in Extract<T['id'], string>]: boolean | number | string;
+    } & Record<string, boolean | number | string>;
+};
+export interface PricingTableSection<T extends PricingTableTier = PricingTableTier> {
+    id?: string;
+    title: string;
+    features: PricingTableSectionFeature<T>[];
+}
+export interface PricingTableProps<T extends PricingTableTier = PricingTableTier> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The caption to display above the table.
+     * @defeaultValue t('pricingTable.caption')
+     */
+    caption?: string;
+    /**
+     * The pricing tiers to display in the table.
+     * Each tier represents a pricing plan with its own title, description, price, and features.
+     */
+    tiers: T[];
+    /**
+     * The sections of features to display in the table.
+     * Each section contains a title and a list of features with their availability in each tier.
+     */
+    sections: PricingTableSection<T>[];
+    class?: any;
+    ui?: PricingTable['slots'];
+}
+type SlotProps<T extends PricingTableTier> = (props: {
+    tier: T;
+}) => any;
+export type PricingTableSlots<T extends PricingTableTier = PricingTableTier> = {
+    'caption': (props?: {}) => any;
+    'tier': SlotProps<T>;
+    'tier-title': SlotProps<T>;
+    'tier-description': SlotProps<T>;
+    'tier-badge': SlotProps<T>;
+    'tier-button': SlotProps<T>;
+    'tier-billing': SlotProps<T>;
+    'tier-discount': SlotProps<T>;
+    'tier-price': SlotProps<T>;
+    'section-title': (props: {
+        section: PricingTableSection<T>;
+    }) => any;
+    'feature-title': (props: {
+        feature: PricingTableSectionFeature<T>;
+        section: PricingTableSection<T>;
+    }) => any;
+    'feature-value': (props: {
+        feature: PricingTableSectionFeature<T>;
+        tier: T;
+        section: PricingTableSection<T>;
+    }) => any;
+} & DynamicSlots<T, 'title' | 'description' | 'badge' | 'button' | 'billing' | 'discount' | 'price'> & FeatureDynamicSlots<PricingTableSectionFeature<T>, 'title' | 'value'> & SectionDynamicSlots<PricingTableSection<T>, 'title'>;
+declare const _default: <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<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & PricingTableProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: PricingTableSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -1,7 +1,7 @@
 import type { ProgressRootProps, ProgressRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/progress';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Progress = ComponentConfig<typeof theme, AppConfig, 'progress'>;
 export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' | 'getValueText' | 'modelValue'> {
     /**

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

@@ -1,7 +1,8 @@
 import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/radio-group';
-import type { AcceptableValue, ComponentConfig } from '../types/utils';
+import type { AcceptableValue } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type RadioGroup = ComponentConfig<typeof theme, AppConfig, 'radioGroup'>;
 export type RadioGroupValue = AcceptableValue;
 export type RadioGroupItem = {

package/dist/runtime/components/Select.vue

@@ -8,7 +8,7 @@ import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, Se
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { usePortal } from "../composables/usePortal";
@@ -62,9 +62,9 @@ const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
 const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
-const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const selectSize = computed(() => buttonGroupSize.value || formGroupSize.value);
+const selectSize = computed(() => fieldGroupSize.value || formGroupSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.select || {} })({
   color: color.value,
   variant: props.variant,
@@ -73,7 +73,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.select || {}
   highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
-  buttonGroup: orientation.value
+  fieldGroup: orientation.value
 }));
 const groups = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []

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

@@ -3,7 +3,8 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/select';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps } from '../types';
-import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Select = ComponentConfig<typeof theme, AppConfig, 'select'>;
 interface SelectItemBase {
     label?: string;

package/dist/runtime/components/SelectMenu.vue

@@ -8,7 +8,7 @@ import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTri
 import { defu } from "defu";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
@@ -74,9 +74,9 @@ const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffse
 const arrowProps = toRef(() => props.arrow);
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), variant: "none" }));
 const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
-const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const selectSize = computed(() => buttonGroupSize.value || formGroupSize.value);
+const selectSize = computed(() => fieldGroupSize.value || formGroupSize.value);
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.selectMenu || {} })({
   color: color.value,
@@ -86,7 +86,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.selectMenu ||
   highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
-  buttonGroup: orientation.value
+  fieldGroup: orientation.value
 }));
 function displayValue(value) {
   if (props.multiple && Array.isArray(value)) {

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

@@ -3,7 +3,8 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/select-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, InputProps } from '../types';
-import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type SelectMenu = ComponentConfig<typeof theme, AppConfig, 'selectMenu'>;
 interface _SelectMenuItem {
     label?: string;
@@ -181,7 +182,7 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
             value: GetModelValue<T, VK, M>;
         } | undefined) => any) | undefined;
         readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate"> & (SelectMenuProps<T, VK, M> & {
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onCreate" | "onHighlight" | "onUpdate:searchTerm"> & (SelectMenuProps<T, VK, M> & {
         searchTerm?: string;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{

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

@@ -3,7 +3,7 @@ import type { SeparatorProps as _SeparatorProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/separator';
 import type { AvatarProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Separator = ComponentConfig<typeof theme, AppConfig, 'separator'>;
 export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
     /**

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

@@ -2,7 +2,8 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogConten
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
 import type { ButtonProps } from '../types';
-import type { EmitsToProps, ComponentConfig } from '../types/utils';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
 export interface SlideoverProps extends DialogRootProps {
     title?: string;

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

@@ -2,7 +2,7 @@ import type { SliderRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slider';
 import type { TooltipProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Slider = ComponentConfig<typeof theme, AppConfig, 'slider'>;
 export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
     /**

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

@@ -1,7 +1,8 @@
 import type { StepperRootProps, StepperRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/stepper';
-import type { DynamicSlots, ComponentConfig } from '../types/utils';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Stepper = ComponentConfig<typeof theme, AppConfig, 'stepper'>;
 export interface StepperItem {
     slot?: string;
@@ -61,10 +62,10 @@ export type StepperSlots<T extends StepperItem = StepperItem> = {
 } & DynamicSlots<T>;
 declare const _default: <T extends StepperItem>(__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<Pick<Partial<{}> & Omit<{
-        readonly onPrev?: ((payload: T) => any) | undefined;
         readonly onNext?: ((payload: T) => any) | undefined;
+        readonly onPrev?: ((payload: T) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onPrev" | "onNext"> & (StepperProps<T> & {
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onNext" | "onPrev"> & (StepperProps<T> & {
         modelValue?: string | number;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
@@ -75,7 +76,7 @@ declare const _default: <T extends StepperItem>(__VLS_props: NonNullable<Awaited
     }>): void;
     attrs: any;
     slots: StepperSlots<T>;
-    emit: (((evt: "prev", payload: T) => void) & ((evt: "next", payload: T) => void)) & ((evt: "update:modelValue", value: string | number | undefined) => void);
+    emit: (((evt: "next", payload: T) => void) & ((evt: "prev", payload: T) => void)) & ((evt: "update:modelValue", value: string | number | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,7 +1,7 @@
 import type { SwitchRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
 export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
     /**

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

@@ -3,7 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core';
 import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
 import theme from '#build/ui/table';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
         class?: {

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

@@ -3,7 +3,8 @@ import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tabs';
 import type { AvatarProps, BadgeProps } from '../types';
-import type { DynamicSlots, ComponentConfig } from '../types/utils';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>;
 export interface TabsItem {
     label?: string;

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
 export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps {

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

@@ -1,7 +1,8 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/timeline';
 import type { AvatarProps } from '../types';
-import type { DynamicSlots, ComponentConfig } from '../types/utils';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Timeline = ComponentConfig<typeof theme, AppConfig, 'timeline'>;
 export interface TimelineItem {
     date?: string;

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

@@ -2,7 +2,8 @@ import type { ToastRootProps, ToastRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/toast';
 import type { AvatarProps, ButtonProps, ProgressProps } from '../types';
-import type { StringOrVNode, ComponentConfig } from '../types/utils';
+import type { StringOrVNode } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>;
 export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
     /**
@@ -70,10 +71,10 @@ export interface ToastSlots {
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToastProps, {
     height: import("vue").Ref<number, number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    resume: () => any;
     pause: () => any;
     "update:open": (value: boolean) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
+    resume: () => any;
     swipeStart: (event: {
         currentTarget: EventTarget & HTMLElement;
     } & Omit<CustomEvent<{
@@ -111,10 +112,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToastProps
         };
     }>, "currentTarget">) => any;
 }, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{
-    onResume?: (() => any) | undefined;
     onPause?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onResume?: (() => any) | undefined;
     onSwipeStart?: ((event: {
         currentTarget: EventTarget & HTMLElement;
     } & Omit<CustomEvent<{

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

@@ -1,7 +1,7 @@
 import type { ToastProviderProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/toaster';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Toaster = ComponentConfig<typeof theme, AppConfig, 'toaster'>;
 export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
     /**
@@ -32,8 +32,8 @@ export interface ToasterSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
-    duration: number;
     expand: boolean;
+    duration: number;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 export default _default;