@eslamdevui/ui 3.3.3 → 4.0.0-beta

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

@@ -0,0 +1,21 @@
+export interface PageListProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    divide?: boolean;
+    class?: any;
+}
+export interface PageListSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageListProps> & Readonly<{}>, {
+    divide: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageListSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -10,7 +10,7 @@ export interface PageListProps {
 export interface PageListSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageListProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageListProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageListProps> & Readonly<{}>, {
     divide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageListSlots>;
 export default _default;

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

@@ -0,0 +1,33 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/page-logos';
+import type { MarqueeProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type PageLogos = ComponentConfig<typeof theme, AppConfig, 'pageLogos'>;
+type PageLogosItem = {
+    src: string;
+    alt: string;
+} | string;
+export interface PageLogosProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    title?: string;
+    items?: PageLogosItem[];
+    marquee?: boolean | MarqueeProps;
+    class?: any;
+    ui?: PageLogos['slots'];
+}
+export interface PageLogosSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageLogosProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageLogosProps> & Readonly<{}>, {
+    marquee: boolean | MarqueeProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageLogosSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PageLogos.vue

@@ -8,9 +8,10 @@ import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
+import UMarquee from "./Marquee.vue";
 import UAvatar from "./Avatar.vue";
 import UIcon from "./Icon.vue";
-import UPageMarquee from "./PageMarquee.vue";
+defineOptions({ inheritAttrs: false });
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
 const props = defineProps({
   as: { type: null, required: false },
@@ -45,18 +46,18 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageLogos ||
     </template>
   </DefineCreateItemTemplate>
 
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <h2 v-if="title" :class="ui.title({ class: props.ui?.title })">
       {{ title }}
     </h2>
 
-    <UPageMarquee
+    <UMarquee
       v-if="marquee"
       v-bind="typeof marquee === 'object' ? marquee : {}"
       :class="ui.logos({ class: props.ui?.logos, marquee: true })"
     >
       <ReuseCreateItemTemplate :items="items" />
-    </UPageMarquee>
+    </UMarquee>
     <div v-else :class="ui.logos({ class: props.ui?.logos })">
       <ReuseCreateItemTemplate :items="items" />
     </div>

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

@@ -1,6 +1,7 @@
-import theme from '#build/ui/page-logos';
 import type { AppConfig } from '@nuxt/schema';
-import type { ComponentConfig, PageMarqueeProps } from '../types';
+import theme from '#build/ui/page-logos';
+import type { MarqueeProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
 type PageLogos = ComponentConfig<typeof theme, AppConfig, 'pageLogos'>;
 type PageLogosItem = {
     src: string;
@@ -14,15 +15,15 @@ export interface PageLogosProps {
     as?: any;
     title?: string;
     items?: PageLogosItem[];
-    marquee?: boolean | PageMarqueeProps;
+    marquee?: boolean | MarqueeProps;
     class?: any;
     ui?: PageLogos['slots'];
 }
 export interface PageLogosSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageLogosProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageLogosProps> & Readonly<{}>, {
-    marquee: boolean | PageMarqueeProps;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageLogosProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageLogosProps> & Readonly<{}>, {
+    marquee: boolean | MarqueeProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageLogosSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -0,0 +1,68 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/page-section';
+import type { ButtonProps, IconProps, PageFeatureProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type PageSection = ComponentConfig<typeof theme, AppConfig, 'pageSection'>;
+export interface PageSectionProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'section'
+     */
+    as?: any;
+    /**
+     * The headline displayed above the title.
+     */
+    headline?: string;
+    /**
+     * The icon displayed above the title.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    title?: string;
+    description?: string;
+    /**
+     * Display a list of Button under the description.
+     * `{ size: 'lg' }`{lang="ts-type"}
+     */
+    links?: ButtonProps[];
+    /**
+     * Display a list of PageFeature under the description.
+     */
+    features?: PageFeatureProps[];
+    /**
+     * The orientation of the section.
+     * @defaultValue 'vertical'
+     */
+    orientation?: PageSection['variants']['orientation'];
+    /**
+     * Reverse the order of the default slot.
+     * @defaultValue false
+     */
+    reverse?: boolean;
+    class?: any;
+    ui?: PageSection['slots'];
+}
+export interface PageSectionSlots {
+    top(props?: {}): any;
+    header(props?: {}): any;
+    leading(props?: {}): any;
+    headline(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    features(props?: {}): any;
+    footer(props?: {}): any;
+    links(props?: {}): any;
+    default(props?: {}): any;
+    bottom(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageSectionProps> & Readonly<{}>, {
+    as: any;
+    orientation: PageSection["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageSectionSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PageSection.vue

@@ -7,10 +7,14 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
+import UPageFeature from "./PageFeature.vue";
+import UContainer from "./Container.vue";
+import UIcon from "./Icon.vue";
+import UButton from "./Button.vue";
 const props = defineProps({
   as: { type: null, required: false, default: "section" },
   headline: { type: String, required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
   links: { type: Array, required: false },
@@ -27,7 +31,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageSection |
   reverse: props.reverse,
   title: !!props.title || !!slots.title,
   description: !!props.description || !!slots.description,
-  features: !!props.features?.length || !!slots.features
+  body: !!slots.body || (!!props.features?.length || !!slots.features)
 }));
 </script>
 
@@ -36,45 +40,57 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageSection |
     <slot name="top" />
 
     <UContainer :class="ui.container({ class: props.ui?.container })">
-      <div v-if="icon || !!slots.leading || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || (features?.length || !!slots.features) || (links?.length || !!slots.links)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-          <slot name="leading">
-            <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          </slot>
-        </div>
+      <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || (features?.length || !!slots.features) || !!slots.footer || (links?.length || !!slots.links)" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+          <slot name="header">
+            <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+              <slot name="leading">
+                <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+              </slot>
+            </div>
 
-        <div v-if="headline || !!slots.headline" :class="ui.headline({ class: props.ui?.headline, headline: !slots.headline })">
-          <slot name="headline">
-            {{ headline }}
-          </slot>
-        </div>
+            <div v-if="headline || !!slots.headline" :class="ui.headline({ class: props.ui?.headline, headline: !slots.headline })">
+              <slot name="headline">
+                {{ headline }}
+              </slot>
+            </div>
 
-        <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </h2>
+            <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </h2>
 
-        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-          <slot name="description">
-            {{ description }}
+            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </div>
           </slot>
         </div>
 
-        <ul v-if="features?.length || !!slots.features" :class="ui.features({ class: props.ui?.features })">
-          <slot name="features">
-            <UPageFeature
-              v-for="(feature, index) in features"
-              :key="index"
-              as="li"
-              v-bind="feature"
-            />
+        <div v-if="!!slots.body || (features?.length || !!slots.features)" :class="ui.body({ class: props.ui?.body })">
+          <slot name="body">
+            <ul v-if="features?.length || !!slots.features" :class="ui.features({ class: props.ui?.features })">
+              <slot name="features">
+                <UPageFeature
+                  v-for="(feature, index) in features"
+                  :key="index"
+                  as="li"
+                  v-bind="feature"
+                />
+              </slot>
+            </ul>
           </slot>
-        </ul>
+        </div>
 
-        <div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
-          <slot name="links">
-            <UButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
+        <div v-if="!!slots.footer || (links?.length || !!slots.links)" :class="ui.footer({ class: props.ui?.footer })">
+          <slot name="footer">
+            <div v-if="links?.length || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+              <slot name="links">
+                <UButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
+              </slot>
+            </div>
           </slot>
         </div>
       </div>

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

@@ -1,6 +1,7 @@
-import theme from '#build/ui/page-section';
 import type { AppConfig } from '@nuxt/schema';
-import type { ButtonProps, ComponentConfig, PageFeatureProps } from '../types';
+import theme from '#build/ui/page-section';
+import type { ButtonProps, IconProps, PageFeatureProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
 type PageSection = ComponentConfig<typeof theme, AppConfig, 'pageSection'>;
 export interface PageSectionProps {
     /**
@@ -16,7 +17,7 @@ export interface PageSectionProps {
      * The icon displayed above the title.
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     title?: string;
     description?: string;
     /**
@@ -42,17 +43,20 @@ export interface PageSectionProps {
     ui?: PageSection['slots'];
 }
 export interface PageSectionSlots {
-    default(props?: {}): any;
     top(props?: {}): any;
-    bottom(props?: {}): any;
-    headline(props?: {}): any;
+    header(props?: {}): any;
     leading(props?: {}): any;
+    headline(props?: {}): any;
     title(props?: {}): any;
     description(props?: {}): any;
-    links(props?: {}): any;
+    body(props?: {}): any;
     features(props?: {}): any;
+    footer(props?: {}): any;
+    links(props?: {}): any;
+    default(props?: {}): any;
+    bottom(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageSectionProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageSectionProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageSectionProps> & Readonly<{}>, {
     as: any;
     orientation: PageSection["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageSectionSlots>;

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

@@ -0,0 +1,118 @@
+import type { PaginationRootProps, PaginationRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/pagination';
+import type { ButtonProps, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type Pagination = ComponentConfig<typeof theme, AppConfig, 'pagination'>;
+export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'>> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon to use for the first page control.
+     * @defaultValue appConfig.ui.icons.chevronDoubleLeft
+     * @IconifyIcon
+     */
+    firstIcon?: IconProps['name'];
+    /**
+     * The icon to use for the previous page control.
+     * @defaultValue appConfig.ui.icons.chevronLeft
+     * @IconifyIcon
+     */
+    prevIcon?: IconProps['name'];
+    /**
+     * The icon to use for the next page control.
+     * @defaultValue appConfig.ui.icons.chevronRight
+     * @IconifyIcon
+     */
+    nextIcon?: IconProps['name'];
+    /**
+     * The icon to use for the last page control.
+     * @defaultValue appConfig.ui.icons.chevronDoubleRight
+     * @IconifyIcon
+     */
+    lastIcon?: IconProps['name'];
+    /**
+     * The icon to use for the ellipsis control.
+     * @defaultValue appConfig.ui.icons.ellipsis
+     * @IconifyIcon
+     */
+    ellipsisIcon?: IconProps['name'];
+    /**
+     * The color of the pagination controls.
+     * @defaultValue 'neutral'
+     * @IconifyIcon
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the pagination controls.
+     * @defaultValue 'outline'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * The color of the active pagination control.
+     * @defaultValue 'primary'
+     */
+    activeColor?: ButtonProps['color'];
+    /**
+     * The variant of the active pagination control.
+     * @defaultValue 'solid'
+     */
+    activeVariant?: ButtonProps['variant'];
+    /**
+     * Whether to show the first, previous, next, and last controls.
+     * @defaultValue true
+     */
+    showControls?: boolean;
+    size?: ButtonProps['size'];
+    /**
+     * A function to render page controls as links.
+     * @param page The page number to navigate to.
+     */
+    to?: (page: number) => ButtonProps['to'];
+    class?: any;
+    ui?: Pagination['slots'];
+}
+export interface PaginationEmits extends PaginationRootEmits {
+}
+export interface PaginationSlots {
+    first(props?: {}): any;
+    prev(props?: {}): any;
+    next(props?: {}): any;
+    last(props?: {}): any;
+    ellipsis(props?: {}): any;
+    item(props: {
+        page: number;
+        pageCount: number;
+        item: {
+            type: 'ellipsis';
+        } | {
+            type: 'page';
+            value: number;
+        };
+        index: number;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    activeColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    activeVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    itemsPerPage: number;
+    showEdges: boolean;
+    siblingCount: number;
+    total: number;
+    showControls: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PaginationSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Pagination.vue

@@ -12,11 +12,11 @@ import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 const props = defineProps({
   as: { type: null, required: false },
-  firstIcon: { type: String, required: false },
-  prevIcon: { type: String, required: false },
-  nextIcon: { type: String, required: false },
-  lastIcon: { type: String, required: false },
-  ellipsisIcon: { type: String, required: false },
+  firstIcon: { type: [String, Object], required: false },
+  prevIcon: { type: [String, Object], required: false },
+  nextIcon: { type: [String, Object], required: false },
+  lastIcon: { type: [String, Object], required: false },
+  ellipsisIcon: { type: [String, Object], required: false },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "outline" },
   activeColor: { type: null, required: false, default: "primary" },

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

@@ -1,8 +1,8 @@
 import type { PaginationRootProps, PaginationRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pagination';
-import type { ButtonProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { ButtonProps, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
 type Pagination = ComponentConfig<typeof theme, AppConfig, 'pagination'>;
 export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'>> {
     /**
@@ -15,31 +15,31 @@ export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defa
      * @defaultValue appConfig.ui.icons.chevronDoubleLeft
      * @IconifyIcon
      */
-    firstIcon?: string;
+    firstIcon?: IconProps['name'];
     /**
      * The icon to use for the previous page control.
      * @defaultValue appConfig.ui.icons.chevronLeft
      * @IconifyIcon
      */
-    prevIcon?: string;
+    prevIcon?: IconProps['name'];
     /**
      * The icon to use for the next page control.
      * @defaultValue appConfig.ui.icons.chevronRight
      * @IconifyIcon
      */
-    nextIcon?: string;
+    nextIcon?: IconProps['name'];
     /**
      * The icon to use for the last page control.
      * @defaultValue appConfig.ui.icons.chevronDoubleRight
      * @IconifyIcon
      */
-    lastIcon?: string;
+    lastIcon?: IconProps['name'];
     /**
      * The icon to use for the ellipsis control.
      * @defaultValue appConfig.ui.icons.ellipsis
      * @IconifyIcon
      */
-    ellipsisIcon?: string;
+    ellipsisIcon?: IconProps['name'];
     /**
      * The color of the pagination controls.
      * @defaultValue 'neutral'
@@ -95,13 +95,13 @@ export interface PaginationSlots {
         index: number;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaginationProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:page": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
     "onUpdate:page"?: ((value: number) => any) | undefined;
 }>, {
-    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
-    activeColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    activeColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     activeVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
     itemsPerPage: number;

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

@@ -0,0 +1,60 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/pin-input';
+import type { ComponentConfig } from '../types/tv';
+type PinInput = ComponentConfig<typeof theme, AppConfig, 'pinInput'>;
+type PinInputType = 'text' | 'number';
+export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<PinInputRootProps<T>, 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: PinInput['variants']['color'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: PinInput['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: PinInput['variants']['size'];
+    /**
+     * The number of input fields.
+     * @defaultValue 5
+     */
+    length?: number | string;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    highlight?: boolean;
+    class?: any;
+    ui?: PinInput['slots'];
+}
+export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T> & {
+    change: [event: Event];
+    blur: [event: Event];
+};
+declare const _default: <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<Pick<Partial<{}> & Omit<{
+        readonly onBlur?: ((event: Event) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
+        readonly onComplete?: ((value: [T] extends ["number"] ? number[] : string[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue" | "onComplete"> & PinInputProps<T> & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
+    }>): void;
+    attrs: any;
+    slots: {};
+    emit: ((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").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/PinInput.vue

@@ -34,7 +34,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "defaultValue", "disabled", "id", "mask", "modelValue", "name", "otp", "required", "type"), emits);
+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,
@@ -76,6 +76,8 @@ defineExpose({
     :id="id"
     :name="name"
     :placeholder="placeholder"
+    :model-value="modelValue"
+    :default-value="defaultValue"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"