@sewadah/selaras 0.1.1

package/dist/runtime/components/NavigationMenuFlyoutTrigger.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { computed, ref, useSlots } from "vue";
+import { navigationMenuTheme } from "../theme/navigation-menu";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Icon from "./Icon.vue";
+import NavigationMenuFlyoutList from "./NavigationMenuFlyoutList.vue";
+import Popover from "./Popover.vue";
+const props = defineProps({
+  item: { type: Object, required: true },
+  color: { type: null, required: false },
+  variant: { type: String, required: false },
+  highlight: { type: Boolean, required: false },
+  open: { type: Boolean, required: true },
+  anotherFlyoutOpen: { type: Boolean, required: false },
+  onSelect: { type: Function, required: true },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:open"]);
+const slots = useSlots();
+function slotName(item, suffix) {
+  const named = item.slot ? `${item.slot}${suffix}` : void 0;
+  if (named && slots[named])
+    return named;
+  return `item${suffix}`;
+}
+const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
+const ui = computed(() => theme.value({ orientation: "vertical", color: props.color, variant: props.variant, highlight: props.highlight, collapsed: true, active: false, disabled: props.item.disabled }));
+let closeTimer;
+function cancelClose() {
+  if (closeTimer !== void 0) {
+    clearTimeout(closeTimer);
+    closeTimer = void 0;
+  }
+}
+let openedViaHover = false;
+function openNow() {
+  cancelClose();
+  openedViaHover = true;
+  emit("update:open", true);
+}
+function scheduleClose() {
+  cancelClose();
+  closeTimer = setTimeout(() => {
+    emit("update:open", false);
+  }, 200);
+}
+function onTriggerClick() {
+  openedViaHover = false;
+}
+function onOpenAutoFocus(event) {
+  if (openedViaHover)
+    event.preventDefault();
+}
+const triggerRef = ref();
+function getFocusableElements() {
+  return Array.from(document.querySelectorAll(
+    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+  ));
+}
+function onContentKeydown(event) {
+  if (event.key !== "Tab" || !triggerRef.value)
+    return;
+  const contentEl = event.currentTarget;
+  const withinContent = getFocusableElements().filter((el) => contentEl.contains(el));
+  if (withinContent.length === 0)
+    return;
+  const active = document.activeElement;
+  const first = withinContent[0];
+  const last = withinContent[withinContent.length - 1];
+  if (!event.shiftKey && active === last) {
+    event.preventDefault();
+    event.stopPropagation();
+    const outside = getFocusableElements().filter((el) => !contentEl.contains(el));
+    const nextIndex = outside.indexOf(triggerRef.value) + 1;
+    emit("update:open", false);
+    outside[nextIndex]?.focus();
+  } else if (event.shiftKey && active === first) {
+    event.preventDefault();
+    event.stopPropagation();
+    emit("update:open", false);
+    triggerRef.value.focus();
+  }
+}
+</script>
+
+<template>
+  <Popover
+    :open="open" side="right" align="start" :return-focus-on-close="!anotherFlyoutOpen" :ui="{ content: 'p-2' }"
+    @update:open="emit('update:open', $event)" @open-auto-focus="onOpenAutoFocus"
+  >
+    <button
+      ref="triggerRef"
+      type="button"
+      :disabled="item.disabled"
+      v-bind="resolveSlot(ui.link, props.ui?.link)"
+      @mouseenter="openNow"
+      @mouseleave="scheduleClose"
+      @click="onTriggerClick"
+    >
+      <slot :name="slotName(item, '-leading')" :item="item" :active="false">
+        <Icon v-if="item.icon" :name="item.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
+        <span v-else v-bind="resolveSlot(ui.linkIconFallback, props.ui?.linkIconFallback)" aria-hidden="true">{{ item.label.charAt(0) }}</span>
+      </slot>
+      <slot :name="slotName(item, '-label')" :item="item" :active="false">
+        <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ item.label }}</span>
+      </slot>
+    </button>
+    <template #content>
+      <div @mouseenter="cancelClose" @mouseleave="scheduleClose" @keydown="onContentKeydown">
+        <slot :name="slotName(item, '-content')" :item="item">
+          <NavigationMenuFlyoutList :items="item.children ?? []" :color="color" :variant="variant" :highlight="highlight" :on-select="onSelect" :ui="props.ui" root />
+        </slot>
+      </div>
+    </template>
+  </Popover>
+</template>

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

@@ -0,0 +1,49 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { NavigationMenuItem } from '../utils/navigation-menu.js';
+import type { UiProp } from '../utils/ui.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface NavigationMenuFlyoutTriggerProps {
+    item: NavigationMenuItem;
+    color?: ButtonVariants['color'];
+    variant?: 'pill' | 'link';
+    highlight?: boolean;
+    open: boolean;
+    /** Whether a *different* sibling trigger currently holds the flyout - see the note above on why `return-focus-on-close` needs this rather than a flat `false`. */
+    anotherFlyoutOpen?: boolean;
+    onSelect: (item: NavigationMenuItem, event: Event) => void;
+    ui?: UiProp<NavigationMenuThemeSlots>;
+}
+export interface NavigationMenuFlyoutTriggerEmits {
+    'update:open': [value: boolean];
+}
+declare var __VLS_12: string, __VLS_13: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_21: string, __VLS_22: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_26: string, __VLS_27: {
+    item: NavigationMenuItem;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
+} & {
+    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
+} & {
+    [K in NonNullable<typeof __VLS_26>]?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NavigationMenuFlyoutTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<NavigationMenuFlyoutTriggerProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,20 @@
+import type { PageAsideThemeSlots } from '../theme/page-aside.js';
+import type { UiProp } from '../utils/ui.js';
+export interface PageAsideProps {
+    ui?: UiProp<PageAsideThemeSlots>;
+}
+declare var __VLS_1: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<PageAsideProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageAsideProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PageAside.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from "vue";
+import { pageAsideTheme } from "../theme/page-aside";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import ScrollArea from "./ScrollArea.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("pageAside", pageAsideTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <aside v-bind="rootProps">
+    <div v-if="$slots.header" v-bind="resolveSlot(ui.header, props.ui?.header)">
+      <slot name="header" />
+    </div>
+    <ScrollArea v-bind="resolveSlot(ui.scrollArea, props.ui?.scrollArea)">
+      <div v-bind="resolveSlot(ui.body, props.ui?.body)">
+        <slot />
+      </div>
+    </ScrollArea>
+  </aside>
+</template>

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

@@ -0,0 +1,20 @@
+import type { PageAsideThemeSlots } from '../theme/page-aside.js';
+import type { UiProp } from '../utils/ui.js';
+export interface PageAsideProps {
+    ui?: UiProp<PageAsideThemeSlots>;
+}
+declare var __VLS_1: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<PageAsideProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageAsideProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,24 @@
+import type { PageHeaderThemeSlots } from '../theme/page-header.js';
+import type { UiProp } from '../utils/ui.js';
+export interface PageHeaderProps {
+    title?: string;
+    description?: string;
+    ui?: UiProp<PageHeaderThemeSlots>;
+}
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    description?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<PageHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PageHeader.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { computed } from "vue";
+import { pageHeaderTheme } from "../theme/page-header";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("pageHeader", pageHeaderTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <h1 v-if="title || $slots.title" v-bind="resolveSlot(ui.title, props.ui?.title)">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h1>
+    <p v-if="description || $slots.description" v-bind="resolveSlot(ui.description, props.ui?.description)">
+      <slot name="description">
+        {{ description }}
+      </slot>
+    </p>
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,24 @@
+import type { PageHeaderThemeSlots } from '../theme/page-header.js';
+import type { UiProp } from '../utils/ui.js';
+export interface PageHeaderProps {
+    title?: string;
+    description?: string;
+    ui?: UiProp<PageHeaderThemeSlots>;
+}
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    description?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<PageHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,42 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+import type { PaginationThemeSlots } from '../theme/pagination.js';
+import type { UiProp } from '../utils/ui.js';
+import { paginationTheme } from '../theme/pagination.js';
+type PaginationVariants = VariantProps<typeof paginationTheme>;
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface PaginationProps {
+    /** Total item count - paired with itemsPerPage to derive the page count, same shape as Reka's own PaginationRoot. */
+    total?: number;
+    itemsPerPage?: number;
+    /** Controlled current page (1-indexed). Omit and use defaultPage for uncontrolled usage. */
+    page?: number;
+    defaultPage?: number;
+    siblingCount?: number;
+    showEdges?: boolean;
+    /** Adds jump-to-first/jump-to-last buttons alongside the always-present Prev/Next. */
+    showFirstLast?: boolean;
+    /** Set `false` to hide Previous/Next entirely, for a bare page-number-only strip. */
+    showControls?: boolean;
+    /** Maps a page number to a route/href, rendering every control as a real link (progressive enhancement - clicking still drives the page change through Reka's own handling, same as a plain button). */
+    to?: (page: number) => string;
+    disabled?: boolean;
+    size?: PaginationVariants['size'];
+    /** Inactive controls (First/Prev/Next/Last and non-current page numbers). */
+    color?: ButtonVariants['color'];
+    variant?: ButtonVariants['variant'];
+    /** The current page's own button. */
+    activeColor?: ButtonVariants['color'];
+    activeVariant?: ButtonVariants['variant'];
+    ui?: UiProp<PaginationThemeSlots>;
+}
+export interface PaginationEmits {
+    'update:page': [value: number];
+}
+declare const __VLS_export: 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;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Pagination.vue

@@ -0,0 +1,113 @@
+<script setup>
+import {
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+  PaginationRoot
+} from "reka-ui";
+import { computed, resolveComponent } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { paginationTheme } from "../theme/pagination";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  total: { type: Number, required: false, default: 0 },
+  itemsPerPage: { type: Number, required: false, default: 10 },
+  page: { type: Number, required: false },
+  defaultPage: { type: Number, required: false, default: 1 },
+  siblingCount: { type: Number, required: false, default: 1 },
+  showEdges: { type: Boolean, required: false, default: true },
+  showFirstLast: { type: Boolean, required: false, default: false },
+  showControls: { type: Boolean, required: false, default: true },
+  to: { type: Function, required: false },
+  disabled: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" },
+  activeColor: { type: null, required: false, default: "primary" },
+  activeVariant: { type: null, required: false, default: "solid" },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:page"]);
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("pagination", paginationTheme);
+const ui = computed(() => theme.value({ size: props.size }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
+const ellipsisProps = computed(() => resolveSlot(ui.value.ellipsis, props.ui?.ellipsis));
+const mirroredIconUi = { leadingIcon: "rtl:-scale-x-100" };
+const NuxtLink = resolveComponent("NuxtLink");
+function linkProps(page) {
+  return props.to ? { as: NuxtLink, to: props.to(page) } : {};
+}
+</script>
+
+<template>
+  <PaginationRoot
+    :page="page"
+    :default-page="defaultPage"
+    :total="total"
+    :items-per-page="itemsPerPage"
+    :sibling-count="siblingCount"
+    :show-edges="showEdges"
+    :disabled="disabled"
+    :aria-label="messages.pagination"
+    v-bind="rootProps"
+    @update:page="(value) => emit('update:page', value)"
+  >
+    <template #default="{ page: currentPage, pageCount }">
+      <!--
+        No `:disabled` bound on any nested Button below - Reka's own
+        PaginationPrev/Next/First/Last/ListItem each already compute their
+        own correct disabled value (boundary-aware, and folding in the
+        `disabled` prop passed to PaginationRoot above) and pass it down as
+        part of the asChild merge. Binding our own `:disabled="disabled"`
+        here would add an explicit (if often-undefined) `disabled` key to
+        Button's own vnode props - and Reka's asChild merge (see
+        reka-ui/src/Primitive/Slot.ts) gives the child's own props priority
+        over the primitive's attrs specifically so a consumer CAN override
+        them, which here would silently clobber Reka's correct value with
+        `undefined` on every page but the disabled boundary.
+      -->
+      <PaginationFirst v-if="showFirstLast" as-child>
+        <Button :variant="variant" :color="color" :size="size" :icon="icons.chevronsLeft" :aria-label="messages.first" :ui="mirroredIconUi" v-bind="linkProps(1)" />
+      </PaginationFirst>
+      <PaginationPrev v-if="showControls" as-child>
+        <Button :variant="variant" :color="color" :size="size" :icon="icons.chevronLeft" :aria-label="messages.previous" :ui="mirroredIconUi" v-bind="linkProps(currentPage - 1)" />
+      </PaginationPrev>
+
+      <PaginationList v-slot="{ items }" v-bind="listProps">
+        <template v-for="(item, index) in items" :key="item.type === 'ellipsis' ? `ellipsis-${index}` : item.value">
+          <PaginationEllipsis v-if="item.type === 'ellipsis'" v-bind="ellipsisProps">
+            &hellip;
+          </PaginationEllipsis>
+          <PaginationListItem v-else :value="item.value" as-child>
+            <Button
+              :variant="item.value === currentPage ? activeVariant : variant"
+              :color="item.value === currentPage ? activeColor : color"
+              :size="size"
+              square
+              v-bind="linkProps(item.value)"
+            >
+              {{ item.value }}
+            </Button>
+          </PaginationListItem>
+        </template>
+      </PaginationList>
+
+      <PaginationNext v-if="showControls" as-child>
+        <Button :variant="variant" :color="color" :size="size" :icon="icons.chevronRight" :aria-label="messages.next" :ui="mirroredIconUi" v-bind="linkProps(currentPage + 1)" />
+      </PaginationNext>
+      <PaginationLast v-if="showFirstLast" as-child>
+        <Button :variant="variant" :color="color" :size="size" :icon="icons.chevronsRight" :aria-label="messages.last" :ui="mirroredIconUi" v-bind="linkProps(pageCount)" />
+      </PaginationLast>
+    </template>
+  </PaginationRoot>
+</template>

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

@@ -0,0 +1,42 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+import type { PaginationThemeSlots } from '../theme/pagination.js';
+import type { UiProp } from '../utils/ui.js';
+import { paginationTheme } from '../theme/pagination.js';
+type PaginationVariants = VariantProps<typeof paginationTheme>;
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface PaginationProps {
+    /** Total item count - paired with itemsPerPage to derive the page count, same shape as Reka's own PaginationRoot. */
+    total?: number;
+    itemsPerPage?: number;
+    /** Controlled current page (1-indexed). Omit and use defaultPage for uncontrolled usage. */
+    page?: number;
+    defaultPage?: number;
+    siblingCount?: number;
+    showEdges?: boolean;
+    /** Adds jump-to-first/jump-to-last buttons alongside the always-present Prev/Next. */
+    showFirstLast?: boolean;
+    /** Set `false` to hide Previous/Next entirely, for a bare page-number-only strip. */
+    showControls?: boolean;
+    /** Maps a page number to a route/href, rendering every control as a real link (progressive enhancement - clicking still drives the page change through Reka's own handling, same as a plain button). */
+    to?: (page: number) => string;
+    disabled?: boolean;
+    size?: PaginationVariants['size'];
+    /** Inactive controls (First/Prev/Next/Last and non-current page numbers). */
+    color?: ButtonVariants['color'];
+    variant?: ButtonVariants['variant'];
+    /** The current page's own button. */
+    activeColor?: ButtonVariants['color'];
+    activeVariant?: ButtonVariants['variant'];
+    ui?: UiProp<PaginationThemeSlots>;
+}
+export interface PaginationEmits {
+    'update:page': [value: number];
+}
+declare const __VLS_export: 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;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,40 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { PinInputThemeSlots } from '../theme/pin-input.js';
+import type { UiProp } from '../utils/ui.js';
+import { pinInputTheme } from '../theme/pin-input.js';
+type PinInputVariants = VariantProps<typeof pinInputTheme>;
+export interface PinInputProps {
+    id?: string;
+    modelValue?: (string | number)[];
+    defaultValue?: (string | number)[];
+    /** Number of boxes. @default 5 */
+    length?: number;
+    placeholder?: string;
+    /** Password-style dot masking. */
+    mask?: boolean;
+    /** Sets autocomplete="one-time-code" for SMS autofill, and auto-focuses the first empty box. */
+    otp?: boolean;
+    /** 'number' enables the mobile numeric keypad but loses leading zeros - values are stored as real numbers, not strings ("007" becomes 7). @default 'text' */
+    type?: 'text' | 'number';
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: PinInputVariants['size'];
+    color?: PinInputVariants['color'];
+    name?: string;
+    required?: boolean;
+    ui?: UiProp<PinInputThemeSlots>;
+}
+export interface PinInputEmits {
+    'update:modelValue': [value: (string | number)[]];
+    /** Fires once, when every box has a value. */
+    'complete': [value: (string | number)[]];
+}
+declare const __VLS_export: import("vue").DefineComponent<PinInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: (string | number)[]) => any;
+    complete: (value: (string | number)[]) => any;
+}, string, import("vue").PublicProps, Readonly<PinInputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: (string | number)[]) => any) | undefined;
+    onComplete?: ((value: (string | number)[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/PinInput.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { PinInputInput, PinInputRoot } from "reka-ui";
+import { computed } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { pinInputTheme } from "../theme/pin-input";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  modelValue: { type: Array, required: false },
+  defaultValue: { type: Array, required: false },
+  length: { type: Number, required: false },
+  placeholder: { type: String, required: false },
+  mask: { type: Boolean, required: false },
+  otp: { type: Boolean, required: false },
+  type: { type: String, required: false, default: "text" },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "complete"]);
+const field = useFormField();
+const pinInputId = computed(() => props.id ?? field?.id);
+const pinInputInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
+const describedBy = computed(() => field?.describedBy.value);
+const theme = useComponentTheme("pinInput", pinInputTheme);
+const ui = computed(() => theme.value({
+  size: effectiveSize.value,
+  color: props.color,
+  invalid: pinInputInvalid.value
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const inputProps = computed(() => resolveSlot(ui.value.input, props.ui?.input));
+</script>
+
+<template>
+  <PinInputRoot
+    :id="pinInputId"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :placeholder="placeholder"
+    :mask="mask"
+    :otp="otp"
+    :type="type"
+    :disabled="disabled"
+    :name="name ?? field?.name"
+    :required="required"
+    :aria-invalid="pinInputInvalid || void 0"
+    :aria-describedby="describedBy"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+    @complete="(value) => emit('complete', value)"
+  >
+    <PinInputInput
+      v-for="i in length ?? 5"
+      :key="i"
+      :index="i - 1"
+      v-bind="inputProps"
+    />
+  </PinInputRoot>
+</template>