@sewadah/selaras 0.1.1

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

@@ -0,0 +1,66 @@
+import type { AlertDialogThemeSlots } from '../theme/alert-dialog.js';
+import type { UiProp } from '../utils/ui.js';
+import type { ButtonProps } from './Button.vue.js';
+export interface AlertDialogProps {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    /** Label for the default Cancel button - only rendered when no `footer` slot is given. @default 'Cancel' */
+    cancelLabel?: string;
+    /** Label for the default action button - only rendered when no `footer` slot is given. @default 'Continue' */
+    actionLabel?: string;
+    /** Color for the default action button - e.g. `'danger'` for a destructive confirmation. */
+    actionColor?: ButtonProps['color'];
+    /** When `false`, Escape no longer closes the dialog - the `escapeKeyDown` event still fires either way. An outside click never closes it regardless of this: Reka's AlertDialogContent blocks that unconditionally, matching the "must make an explicit choice" semantic this component exists for (unlike Modal, which allows both by default). */
+    dismissible?: boolean;
+    /** Set `false` to render no backdrop behind the dialog at all. */
+    overlay?: boolean;
+    /** Set `false` to skip the open/close animation entirely - this library's animation is CSS-only, so this just omits those classes rather than toggling a JS transition system. */
+    transition?: boolean;
+    ui?: UiProp<AlertDialogThemeSlots>;
+}
+export interface AlertDialogEmits {
+    'update:open': [value: boolean];
+    /** Fired when the default Cancel button is clicked - not fired for a custom `footer` slot, which owns its own buttons/handlers entirely. */
+    'cancel': [];
+    /** Fired when the default action button is clicked. */
+    'confirm': [];
+    'escapeKeyDown': [event: KeyboardEvent];
+    /** A pointer went down outside the dialog - this can never actually close it (Reka blocks that unconditionally), but still useful for something like a shake animation to signal it won't. */
+    'pointerDownOutside': [event: Event];
+    /** Fires once the close transition has actually finished (or immediately, if `transition` is off) - the signal a programmatic caller needs before it's safe to unmount this instance without cutting its exit animation short. */
+    'afterLeave': [];
+}
+declare var __VLS_16: {}, __VLS_39: {}, __VLS_53: {}, __VLS_55: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+} & {
+    header?: (props: typeof __VLS_39) => any;
+} & {
+    body?: (props: typeof __VLS_53) => any;
+} & {
+    footer?: (props: typeof __VLS_55) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AlertDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    "update:open": (value: boolean) => any;
+    confirm: () => any;
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: Event) => any;
+    afterLeave: () => any;
+}, string, import("vue").PublicProps, Readonly<AlertDialogProps> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: Event) => any) | undefined;
+    onAfterLeave?: (() => 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/AlertDialog.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger } from "reka-ui";
+import { computed, ref, useSlots, watch, watchEffect } from "vue";
+import { useMessages } from "../composables/use-messages";
+import { alertDialogTheme } from "../theme/alert-dialog";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Button from "./Button.vue";
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  cancelLabel: { type: String, required: false },
+  actionLabel: { type: String, required: false },
+  actionColor: { type: null, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  overlay: { type: Boolean, required: false, default: true },
+  transition: { type: Boolean, required: false, default: true },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:open", "cancel", "confirm", "escapeKeyDown", "pointerDownOutside", "afterLeave"]);
+function onEscapeKeyDown(event) {
+  if (!props.dismissible)
+    event.preventDefault();
+  emit("escapeKeyDown", event);
+}
+function onPointerDownOutside(event) {
+  emit("pointerDownOutside", event);
+}
+function onContentAnimationEnd(event) {
+  if (event.target !== event.currentTarget)
+    return;
+  if (event.target.getAttribute("data-state") === "closed")
+    emit("afterLeave");
+}
+const internalOpen = ref(props.open ?? false);
+watch(() => props.open, (value) => {
+  if (value !== void 0)
+    internalOpen.value = value;
+});
+function onUpdateOpen(value) {
+  internalOpen.value = value;
+  emit("update:open", value);
+}
+watch(internalOpen, (value) => {
+  if (!value && !props.transition)
+    emit("afterLeave");
+});
+function onCancel() {
+  emit("cancel");
+}
+function onConfirm() {
+  emit("confirm");
+}
+const slots = useSlots();
+if (import.meta.dev) {
+  watchEffect(() => {
+    if (!props.title && !slots.header)
+      console.warn("[SAlertDialog] no accessible name - pass a `title` prop, or a `header` slot containing a heading, so screen readers can announce this dialog.");
+  });
+}
+const messages = useMessages();
+const theme = useComponentTheme("alertDialog", alertDialogTheme);
+const ui = computed(() => theme.value({ transition: props.transition }));
+const overlayProps = computed(() => resolveSlot(ui.value.overlay, props.ui?.overlay));
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
+const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
+const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const bodyProps = computed(() => resolveSlot(ui.value.body, props.ui?.body));
+const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer));
+</script>
+
+<template>
+  <AlertDialogRoot :open="internalOpen" @update:open="onUpdateOpen">
+    <AlertDialogTrigger v-if="$slots.default" as-child>
+      <slot />
+    </AlertDialogTrigger>
+    <AlertDialogPortal>
+      <AlertDialogOverlay v-if="overlay" v-bind="overlayProps" />
+      <AlertDialogContent
+        v-bind="contentProps"
+        @escape-key-down="onEscapeKeyDown"
+        @pointer-down-outside="onPointerDownOutside"
+        @animationend="onContentAnimationEnd"
+      >
+        <div v-if="title || description || $slots.header" v-bind="headerProps">
+          <slot name="header">
+            <AlertDialogTitle v-if="title" v-bind="titleProps">
+              {{ title }}
+            </AlertDialogTitle>
+            <AlertDialogDescription v-if="description" v-bind="descriptionProps">
+              {{ description }}
+            </AlertDialogDescription>
+          </slot>
+        </div>
+        <div v-if="$slots.body" v-bind="bodyProps">
+          <slot name="body" />
+        </div>
+        <div v-bind="footerProps">
+          <slot name="footer">
+            <AlertDialogCancel as-child>
+              <Button variant="ghost" color="neutral" @click="onCancel">
+                {{ cancelLabel ?? messages.cancel }}
+              </Button>
+            </AlertDialogCancel>
+            <AlertDialogAction as-child>
+              <Button :color="actionColor" @click="onConfirm">
+                {{ actionLabel ?? messages.continue }}
+              </Button>
+            </AlertDialogAction>
+          </slot>
+        </div>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialogRoot>
+</template>

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

@@ -0,0 +1,66 @@
+import type { AlertDialogThemeSlots } from '../theme/alert-dialog.js';
+import type { UiProp } from '../utils/ui.js';
+import type { ButtonProps } from './Button.vue.js';
+export interface AlertDialogProps {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    /** Label for the default Cancel button - only rendered when no `footer` slot is given. @default 'Cancel' */
+    cancelLabel?: string;
+    /** Label for the default action button - only rendered when no `footer` slot is given. @default 'Continue' */
+    actionLabel?: string;
+    /** Color for the default action button - e.g. `'danger'` for a destructive confirmation. */
+    actionColor?: ButtonProps['color'];
+    /** When `false`, Escape no longer closes the dialog - the `escapeKeyDown` event still fires either way. An outside click never closes it regardless of this: Reka's AlertDialogContent blocks that unconditionally, matching the "must make an explicit choice" semantic this component exists for (unlike Modal, which allows both by default). */
+    dismissible?: boolean;
+    /** Set `false` to render no backdrop behind the dialog at all. */
+    overlay?: boolean;
+    /** Set `false` to skip the open/close animation entirely - this library's animation is CSS-only, so this just omits those classes rather than toggling a JS transition system. */
+    transition?: boolean;
+    ui?: UiProp<AlertDialogThemeSlots>;
+}
+export interface AlertDialogEmits {
+    'update:open': [value: boolean];
+    /** Fired when the default Cancel button is clicked - not fired for a custom `footer` slot, which owns its own buttons/handlers entirely. */
+    'cancel': [];
+    /** Fired when the default action button is clicked. */
+    'confirm': [];
+    'escapeKeyDown': [event: KeyboardEvent];
+    /** A pointer went down outside the dialog - this can never actually close it (Reka blocks that unconditionally), but still useful for something like a shake animation to signal it won't. */
+    'pointerDownOutside': [event: Event];
+    /** Fires once the close transition has actually finished (or immediately, if `transition` is off) - the signal a programmatic caller needs before it's safe to unmount this instance without cutting its exit animation short. */
+    'afterLeave': [];
+}
+declare var __VLS_16: {}, __VLS_39: {}, __VLS_53: {}, __VLS_55: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+} & {
+    header?: (props: typeof __VLS_39) => any;
+} & {
+    body?: (props: typeof __VLS_53) => any;
+} & {
+    footer?: (props: typeof __VLS_55) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AlertDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    "update:open": (value: boolean) => any;
+    confirm: () => any;
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: Event) => any;
+    afterLeave: () => any;
+}, string, import("vue").PublicProps, Readonly<AlertDialogProps> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: Event) => any) | undefined;
+    onAfterLeave?: (() => 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/App.d.vue.ts

@@ -0,0 +1,32 @@
+export interface AppProps {
+    /**
+     * Reading direction for the whole app. Does two distinct things at once,
+     * both needed for real RTL support: passed to Reka UI's ConfigProvider,
+     * which every primitive underneath inherits for its own internal
+     * direction-aware logic (e.g. RadioGroup/Tabs' roving-tabindex arrow-key
+     * handling, floating-ui positioning) - and set as the real `dir`
+     * attribute on `<html>` via useHead, since ConfigProvider itself renders
+     * no DOM element at all (confirmed: it, ToastProvider, and
+     * TooltipProvider are all bare `<slot />` passthrough - there's no
+     * element inside SApp to attach a `dir` attribute to even if we wanted
+     * one there instead). The `<html>` attribute is what actually drives
+     * native browser behavior (text direction, scrollbar side) and any CSS
+     * logical-property utility (`ms-*`/`ps-*`/`text-start`/...) - those
+     * resolve against the nearest `dir` in the DOM, not Reka's own Vue-level
+     * context, so ConfigProvider alone doesn't make anything look RTL.
+     */
+    dir?: 'ltr' | 'rtl';
+}
+declare var __VLS_20: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AppProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppProps> & 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/App.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { ConfigProvider, ToastProvider, TooltipProvider } from "reka-ui";
+import { useHead } from "#imports";
+import { useLocale } from "../composables/use-locale";
+import DrawerRenderer from "./DrawerRenderer.vue";
+import ModalRenderer from "./ModalRenderer.vue";
+import SlideoverRenderer from "./SlideoverRenderer.vue";
+const props = defineProps({
+  dir: { type: String, required: false, default: "ltr" }
+});
+const locale = useLocale();
+useHead({ htmlAttrs: { dir: () => props.dir, lang: () => locale.value } });
+</script>
+
+<template>
+  <ConfigProvider :dir="dir">
+    <ToastProvider>
+      <TooltipProvider>
+        <slot />
+      </TooltipProvider>
+    </ToastProvider>
+    <ModalRenderer />
+    <SlideoverRenderer />
+    <DrawerRenderer />
+  </ConfigProvider>
+</template>

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

@@ -0,0 +1,32 @@
+export interface AppProps {
+    /**
+     * Reading direction for the whole app. Does two distinct things at once,
+     * both needed for real RTL support: passed to Reka UI's ConfigProvider,
+     * which every primitive underneath inherits for its own internal
+     * direction-aware logic (e.g. RadioGroup/Tabs' roving-tabindex arrow-key
+     * handling, floating-ui positioning) - and set as the real `dir`
+     * attribute on `<html>` via useHead, since ConfigProvider itself renders
+     * no DOM element at all (confirmed: it, ToastProvider, and
+     * TooltipProvider are all bare `<slot />` passthrough - there's no
+     * element inside SApp to attach a `dir` attribute to even if we wanted
+     * one there instead). The `<html>` attribute is what actually drives
+     * native browser behavior (text direction, scrollbar side) and any CSS
+     * logical-property utility (`ms-*`/`ps-*`/`text-start`/...) - those
+     * resolve against the nearest `dir` in the DOM, not Reka's own Vue-level
+     * context, so ConfigProvider alone doesn't make anything look RTL.
+     */
+    dir?: 'ltr' | 'rtl';
+}
+declare var __VLS_20: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AppProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppProps> & 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/Autocomplete.d.vue.ts

@@ -0,0 +1,61 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SelectItems } from '../composables/use-combobox-select.js';
+import type { selectTheme, SelectThemeSlots } from '../theme/select.js';
+import type { UiProp } from '../utils/ui.js';
+type SelectVariants = VariantProps<typeof selectTheme>;
+export interface AutocompleteProps {
+    id?: string;
+    name?: string;
+    items: SelectItems;
+    valueKey?: string;
+    labelKey?: string;
+    modelValue?: string | string[];
+    multiple?: boolean;
+    virtualize?: boolean | {
+        estimateSize?: number;
+        overscan?: number;
+    };
+    displayMode?: 'comma' | 'chip';
+    maxChips?: number;
+    loading?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: SelectVariants['size'];
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: SelectVariants['color'];
+    clearable?: boolean;
+    dropdown?: boolean;
+    forceSelection?: boolean;
+    searchTerm?: string;
+    resetSearchTermOnBlur?: boolean;
+    resetSearchTermOnSelect?: boolean;
+    /** Shows a small pointer triangle connecting the panel to its trigger. */
+    arrow?: boolean;
+    /** Below 768px viewport width, presents the dropdown as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`) rather than automatic, so an existing usage's look never changes without asking for it. */
+    mobileModal?: boolean;
+    ui?: UiProp<SelectThemeSlots>;
+}
+export interface AutocompleteEmits {
+    'update:modelValue': [value: string | string[] | undefined];
+    'update:searchTerm': [value: string];
+}
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AutocompleteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | undefined) => any;
+    "update:searchTerm": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<AutocompleteProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string) => 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/Autocomplete.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { useForwardPropsEmits } from "reka-ui";
+import ComboboxSelectBase from "../internal/ComboboxSelectBase.vue";
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  items: { type: Array, required: true },
+  valueKey: { type: String, required: false },
+  labelKey: { type: String, required: false },
+  modelValue: { type: [String, Array], required: false },
+  multiple: { type: Boolean, required: false },
+  virtualize: { type: [Boolean, Object], required: false },
+  displayMode: { type: String, required: false },
+  maxChips: { type: Number, required: false },
+  loading: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  invalid: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  clearable: { type: Boolean, required: false },
+  dropdown: { type: Boolean, required: false },
+  forceSelection: { type: Boolean, required: false },
+  searchTerm: { type: String, required: false },
+  resetSearchTermOnBlur: { type: Boolean, required: false },
+  resetSearchTermOnSelect: { type: Boolean, required: false },
+  arrow: { type: Boolean, required: false },
+  mobileModal: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:searchTerm"]);
+const forwarded = useForwardPropsEmits(props, emit);
+</script>
+
+<template>
+  <ComboboxSelectBase v-bind="forwarded" :creatable="true" :searchable="true">
+    <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps ?? {}" />
+    </template>
+  </ComboboxSelectBase>
+</template>

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

@@ -0,0 +1,61 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SelectItems } from '../composables/use-combobox-select.js';
+import type { selectTheme, SelectThemeSlots } from '../theme/select.js';
+import type { UiProp } from '../utils/ui.js';
+type SelectVariants = VariantProps<typeof selectTheme>;
+export interface AutocompleteProps {
+    id?: string;
+    name?: string;
+    items: SelectItems;
+    valueKey?: string;
+    labelKey?: string;
+    modelValue?: string | string[];
+    multiple?: boolean;
+    virtualize?: boolean | {
+        estimateSize?: number;
+        overscan?: number;
+    };
+    displayMode?: 'comma' | 'chip';
+    maxChips?: number;
+    loading?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: SelectVariants['size'];
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: SelectVariants['color'];
+    clearable?: boolean;
+    dropdown?: boolean;
+    forceSelection?: boolean;
+    searchTerm?: string;
+    resetSearchTermOnBlur?: boolean;
+    resetSearchTermOnSelect?: boolean;
+    /** Shows a small pointer triangle connecting the panel to its trigger. */
+    arrow?: boolean;
+    /** Below 768px viewport width, presents the dropdown as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`) rather than automatic, so an existing usage's look never changes without asking for it. */
+    mobileModal?: boolean;
+    ui?: UiProp<SelectThemeSlots>;
+}
+export interface AutocompleteEmits {
+    'update:modelValue': [value: string | string[] | undefined];
+    'update:searchTerm': [value: string];
+}
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AutocompleteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | undefined) => any;
+    "update:searchTerm": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<AutocompleteProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string) => 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/Avatar.d.vue.ts

@@ -0,0 +1,46 @@
+import type { AvatarImageProps } from 'reka-ui';
+import type { VariantProps } from 'tailwind-variants';
+import type { Component } from 'vue';
+import type { AvatarThemeSlots } from '../theme/avatar.js';
+import type { UiProp } from '../utils/ui.js';
+import { avatarTheme } from '../theme/avatar.js';
+type AvatarVariants = VariantProps<typeof avatarTheme>;
+export interface AvatarProps {
+    /** A tag name ('a', 'span', ...) or a component reference - forwarded to the avatar's root element, so an avatar can be a link or whatever the consumer needs. */
+    as?: string | Component;
+    /** The avatar image's URL. When absent (or while it loads), the fallback content shows instead. */
+    src?: string;
+    /** The image's alt text. Also used as the avatar's accessible name when there's no image at all. */
+    alt?: string;
+    /** Short text (usually the person's initials) shown while (or instead of) an image. */
+    text?: string;
+    /** An icon shown in the fallback, in place of `text`. If neither is given, the default semantic `user` icon shows. */
+    icon?: string;
+    color?: AvatarVariants['color'];
+    /** The presence/status dot's own color - independent of `color`, since presence semantics rarely match the avatar's identity color. */
+    statusColor?: AvatarVariants['statusColor'];
+    size?: AvatarVariants['size'];
+    shape?: AvatarVariants['shape'];
+    /** Shows a small solid-colored presence dot at the avatar's bottom-right corner. */
+    status?: boolean;
+    referrerPolicy?: AvatarImageProps['referrerPolicy'];
+    crossOrigin?: AvatarImageProps['crossOrigin'];
+    ui?: UiProp<AvatarThemeSlots>;
+}
+declare var __VLS_19: {}, __VLS_21: {
+    class: unknown;
+};
+type __VLS_Slots = {} & {
+    fallback?: (props: typeof __VLS_19) => any;
+} & {
+    icon?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & 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/Avatar.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { AvatarFallback, AvatarImage, AvatarRoot } from "reka-ui";
+import { computed, inject } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { avatarTheme } from "../theme/avatar";
+import { AVATAR_SIZE_INJECTION_KEY } from "../utils/injection-keys";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  src: { type: String, required: false },
+  alt: { type: String, required: false },
+  text: { type: String, required: false },
+  icon: { type: String, required: false },
+  color: { type: null, required: false },
+  statusColor: { type: null, required: false },
+  size: { type: null, required: false },
+  shape: { type: null, required: false },
+  status: { type: Boolean, required: false },
+  referrerPolicy: { type: null, required: false },
+  crossOrigin: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const icons = useIcons();
+const theme = useComponentTheme("avatar", avatarTheme);
+const themeProps = useThemeProps("avatar");
+const groupSize = inject(AVATAR_SIZE_INJECTION_KEY, void 0);
+const ui = computed(() => theme.value({
+  color: props.color ?? themeProps.value.color,
+  statusColor: props.statusColor,
+  // AvatarGroup's own size (the more locally-specific ancestor) wins over
+  // an STheme prop default before falling all the way back to tv()'s own
+  // defaultVariants.
+  size: props.size ?? groupSize?.value ?? themeProps.value.size,
+  shape: props.shape
+}));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+const rootAriaLabel = computed(() => props.src ? void 0 : (props.alt ?? props.text) || void 0);
+</script>
+
+<template>
+  <AvatarRoot :as="as" :aria-label="rootAriaLabel" v-bind="rootProps">
+    <span v-bind="resolveSlot(ui.content, props.ui?.content)">
+      <AvatarImage
+        v-if="src"
+        :src="src"
+        :alt="alt"
+        :referrer-policy="referrerPolicy"
+        :crossorigin="crossOrigin"
+        v-bind="resolveSlot(ui.image, props.ui?.image)"
+      />
+      <AvatarFallback>
+        <slot name="fallback">
+          <span v-if="text" v-bind="resolveSlot(ui.fallback, props.ui?.fallback)">{{ text }}</span>
+          <slot v-else name="icon" :class="resolveSlot(ui.icon, props.ui?.icon).class">
+            <Icon :name="icon || icons.user" v-bind="resolveSlot(ui.icon, props.ui?.icon)" />
+          </slot>
+        </slot>
+      </AvatarFallback>
+    </span>
+    <span v-if="status" v-bind="resolveSlot(ui.status, props.ui?.status)" />
+  </AvatarRoot>
+</template>