@sewadah/selaras 0.1.1

package/dist/runtime/components/Avatar.vue.d.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/AvatarGroup.d.vue.ts

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { AvatarGroupThemeSlots } from '../theme/avatar-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { avatarGroupTheme } from '../theme/avatar-group.js';
+type AvatarGroupVariants = VariantProps<typeof avatarGroupTheme>;
+export interface AvatarGroupProps {
+    /** Maximum number of avatars to show. Extra avatars collapse into a "+N" count indicator. */
+    max?: number;
+    size?: AvatarGroupVariants['size'];
+    ui?: UiProp<AvatarGroupThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/AvatarGroup.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed, provide, useSlots } from "vue";
+import { useMessages } from "../composables/use-messages";
+import { avatarGroupTheme } from "../theme/avatar-group";
+import { AVATAR_SIZE_INJECTION_KEY } from "../utils/injection-keys";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  max: { type: Number, required: false },
+  size: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const slots = useSlots();
+const messages = useMessages();
+const theme = useComponentTheme("avatarGroup", avatarGroupTheme);
+const ui = computed(() => theme.value({
+  size: props.size
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+provide(AVATAR_SIZE_INJECTION_KEY, computed(() => props.size));
+const slotChildren = computed(() => slots.default?.() ?? []);
+const visibleChildren = computed(() => {
+  if (!props.max || slotChildren.value.length <= props.max)
+    return slotChildren.value;
+  return slotChildren.value.slice(0, props.max);
+});
+const overflowCount = computed(() => {
+  if (!props.max || slotChildren.value.length <= props.max)
+    return 0;
+  return slotChildren.value.length - props.max;
+});
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <span v-if="overflowCount" v-bind="resolveSlot(ui.count, props.ui?.count)">{{ messages.avatarGroupOverflow(overflowCount) }}</span>
+    <span v-for="(child, i) in visibleChildren" :key="i" v-bind="resolveSlot(ui.item, props.ui?.item)">
+      <component :is="child" />
+    </span>
+  </div>
+</template>

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

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { AvatarGroupThemeSlots } from '../theme/avatar-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { avatarGroupTheme } from '../theme/avatar-group.js';
+type AvatarGroupVariants = VariantProps<typeof avatarGroupTheme>;
+export interface AvatarGroupProps {
+    /** Maximum number of avatars to show. Extra avatars collapse into a "+N" count indicator. */
+    max?: number;
+    size?: AvatarGroupVariants['size'];
+    ui?: UiProp<AvatarGroupThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,37 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { BadgeThemeSlots } from '../theme/badge.js';
+import type { UiProp } from '../utils/ui.js';
+import { badgeTheme } from '../theme/badge.js';
+type BadgeVariants = VariantProps<typeof badgeTheme>;
+export interface BadgeProps {
+    label?: string;
+    icon?: string;
+    trailingIcon?: string;
+    /** A small solid-colored circle - a status indicator (online/offline, etc), shown alongside the label or alone without one. Always uses the color's solid shade, regardless of `variant`. */
+    dot?: boolean;
+    color?: BadgeVariants['color'];
+    variant?: BadgeVariants['variant'];
+    size?: BadgeVariants['size'];
+    ui?: UiProp<BadgeThemeSlots>;
+}
+declare var __VLS_1: {
+    class: unknown;
+}, __VLS_8: {}, __VLS_10: {
+    class: unknown;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    'trailing-icon'?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & 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/Badge.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed, useSlots } from "vue";
+import { badgeTheme } from "../theme/badge";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  label: { type: String, required: false },
+  icon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  dot: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const slots = useSlots();
+const hasLabel = computed(() => !!(props.label || slots.default));
+const dotOnly = computed(() => !!props.dot && !hasLabel.value);
+const iconOnly = computed(() => !hasLabel.value && !!props.icon && !props.dot);
+const theme = useComponentTheme("badge", badgeTheme);
+const themeProps = useThemeProps("badge");
+const ui = computed(() => theme.value({
+  color: props.color ?? themeProps.value.color,
+  variant: props.variant,
+  size: props.size ?? themeProps.value.size,
+  iconOnly: iconOnly.value
+}));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+const dotOnlyProps = useRootProps(() => ui.value.dot, () => props.ui?.dot);
+</script>
+
+<template>
+  <span v-if="dotOnly" v-bind="dotOnlyProps" />
+  <span v-else v-bind="rootProps">
+    <span v-if="dot" v-bind="resolveSlot(ui.dot, props.ui?.dot)" />
+    <slot name="icon" :class="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon).class">
+      <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
+    </slot>
+    <span v-if="hasLabel" v-bind="resolveSlot(ui.label, props.ui?.label)">
+      <slot>{{ label }}</slot>
+    </span>
+    <slot name="trailing-icon" :class="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon).class">
+      <Icon v-if="trailingIcon" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+    </slot>
+  </span>
+</template>

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

@@ -0,0 +1,37 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { BadgeThemeSlots } from '../theme/badge.js';
+import type { UiProp } from '../utils/ui.js';
+import { badgeTheme } from '../theme/badge.js';
+type BadgeVariants = VariantProps<typeof badgeTheme>;
+export interface BadgeProps {
+    label?: string;
+    icon?: string;
+    trailingIcon?: string;
+    /** A small solid-colored circle - a status indicator (online/offline, etc), shown alongside the label or alone without one. Always uses the color's solid shade, regardless of `variant`. */
+    dot?: boolean;
+    color?: BadgeVariants['color'];
+    variant?: BadgeVariants['variant'];
+    size?: BadgeVariants['size'];
+    ui?: UiProp<BadgeThemeSlots>;
+}
+declare var __VLS_1: {
+    class: unknown;
+}, __VLS_8: {}, __VLS_10: {
+    class: unknown;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    'trailing-icon'?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & 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/Breadcrumb.d.vue.ts

@@ -0,0 +1,37 @@
+import type { BreadcrumbThemeSlots } from '../theme/breadcrumb.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = BreadcrumbSlots;
+export interface BreadcrumbItem {
+    label: string;
+    icon?: string;
+    to?: string;
+    disabled?: boolean;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    /** Collapses the middle items behind an overflow menu once items.length exceeds this - the first item plus the last (maxItems - 1) stay visible. */
+    maxItems?: number;
+    /** Truncates each item's label with an ellipsis. `true` caps at 12rem; a string sets a custom CSS max-width (e.g. '20rem', '300px'). @default false */
+    truncate?: boolean | string;
+    /** @default icons.chevronRight */
+    separatorIcon?: string;
+    ui?: UiProp<BreadcrumbThemeSlots>;
+}
+export interface BreadcrumbSlots {
+    /** Replaces one item's content, scoped with item, index, and whether it's the trail's last (current) item. */
+    item?: (props: {
+        item: BreadcrumbItem;
+        index: number;
+        current: boolean;
+    }) => any;
+    separator?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbProps> & 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/Breadcrumb.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { computed } from "vue";
+import { navigateTo } from "#imports";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { breadcrumbTheme } from "../theme/breadcrumb";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Dropdown from "./Dropdown.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: true },
+  maxItems: { type: Number, required: false },
+  truncate: { type: [Boolean, String], required: false },
+  separatorIcon: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("breadcrumb", breadcrumbTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
+const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
+const linkProps = computed(() => resolveSlot(ui.value.link, props.ui?.link));
+const currentProps = computed(() => resolveSlot(ui.value.current, props.ui?.current));
+const disabledProps = computed(() => resolveSlot(ui.value.disabled, props.ui?.disabled));
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
+const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
+const separatorIconProps = computed(() => resolveSlot(ui.value.separatorIcon, props.ui?.separatorIcon));
+const ellipsisProps = computed(() => resolveSlot(ui.value.ellipsis, props.ui?.ellipsis));
+const hiddenItems = computed(() => {
+  if (!props.maxItems || props.items.length <= props.maxItems)
+    return [];
+  return props.items.slice(1, props.items.length - (props.maxItems - 1));
+});
+const visibleItems = computed(() => {
+  if (!hiddenItems.value.length)
+    return props.items;
+  const tailCount = props.maxItems - 1;
+  return [props.items[0], ...tailCount > 0 ? props.items.slice(-tailCount) : []];
+});
+const hiddenDropdownItems = computed(() => hiddenItems.value.map((item) => ({
+  label: item.label,
+  icon: item.icon,
+  disabled: item.disabled,
+  onSelect: () => {
+    if (item.to)
+      navigateTo(item.to);
+  }
+})));
+const isTruncating = computed(() => props.truncate === true || typeof props.truncate === "string");
+const truncateStyle = computed(() => isTruncating.value ? { maxWidth: props.truncate === true ? "12rem" : props.truncate } : void 0);
+function isLast(item) {
+  return item === props.items[props.items.length - 1];
+}
+function isLink(item) {
+  return !!item.to && !item.disabled && !isLast(item);
+}
+function realIndex(item) {
+  return props.items.indexOf(item);
+}
+</script>
+
+<template>
+  <nav :aria-label="messages.breadcrumb" v-bind="rootProps">
+    <ol v-bind="listProps">
+      <template v-for="(item, index) in visibleItems" :key="realIndex(item)">
+        <li v-bind="itemProps">
+          <slot name="item" :item="item" :index="realIndex(item)" :current="isLast(item)">
+            <NuxtLink v-if="isLink(item)" :to="item.to" v-bind="linkProps">
+              <Icon v-if="item.icon" :name="item.icon" v-bind="iconProps" />
+              <span v-bind="labelProps" :style="truncateStyle" :title="isTruncating ? item.label : void 0">{{ item.label }}</span>
+            </NuxtLink>
+            <span
+              v-else
+              v-bind="isLast(item) ? currentProps : disabledProps"
+              :aria-current="isLast(item) ? 'page' : void 0"
+            >
+              <Icon v-if="item.icon" :name="item.icon" v-bind="iconProps" />
+              <span v-bind="labelProps" :style="truncateStyle" :title="isTruncating ? item.label : void 0">{{ item.label }}</span>
+            </span>
+          </slot>
+        </li>
+        <li v-if="!isLast(item)" v-bind="separatorProps" aria-hidden="true">
+          <slot name="separator">
+            <Icon :name="separatorIcon ?? icons.chevronRight" v-bind="separatorIconProps" />
+          </slot>
+        </li>
+        <template v-if="index === 0 && hiddenItems.length">
+          <li v-bind="itemProps">
+            <Dropdown :items="[hiddenDropdownItems]">
+              <button type="button" v-bind="ellipsisProps" :aria-label="messages.showHiddenBreadcrumbItems">
+                <Icon :name="icons.more" v-bind="separatorIconProps" />
+              </button>
+            </Dropdown>
+          </li>
+          <li v-bind="separatorProps" aria-hidden="true">
+            <slot name="separator">
+              <Icon :name="separatorIcon ?? icons.chevronRight" v-bind="separatorIconProps" />
+            </slot>
+          </li>
+        </template>
+      </template>
+    </ol>
+  </nav>
+</template>

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

@@ -0,0 +1,37 @@
+import type { BreadcrumbThemeSlots } from '../theme/breadcrumb.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = BreadcrumbSlots;
+export interface BreadcrumbItem {
+    label: string;
+    icon?: string;
+    to?: string;
+    disabled?: boolean;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    /** Collapses the middle items behind an overflow menu once items.length exceeds this - the first item plus the last (maxItems - 1) stay visible. */
+    maxItems?: number;
+    /** Truncates each item's label with an ellipsis. `true` caps at 12rem; a string sets a custom CSS max-width (e.g. '20rem', '300px'). @default false */
+    truncate?: boolean | string;
+    /** @default icons.chevronRight */
+    separatorIcon?: string;
+    ui?: UiProp<BreadcrumbThemeSlots>;
+}
+export interface BreadcrumbSlots {
+    /** Replaces one item's content, scoped with item, index, and whether it's the trail's last (current) item. */
+    item?: (props: {
+        item: BreadcrumbItem;
+        index: number;
+        current: boolean;
+    }) => any;
+    separator?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbProps> & 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/Button.d.vue.ts

@@ -0,0 +1,45 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { Component } from 'vue';
+import type { ButtonThemeSlots } from '../theme/button.js';
+import type { UiProp } from '../utils/ui.js';
+import { buttonTheme } from '../theme/button.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface ButtonProps {
+    /** A tag name ('a', 'span', ...) or a component reference (e.g. NuxtLink, via resolveComponent) - Primitive renders whichever is given. */
+    as?: string | Component;
+    color?: ButtonVariants['color'];
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    block?: boolean;
+    disabled?: boolean;
+    /** Shows a spinner in the leading icon's place. Doesn't imply `disabled` - combine `:loading="x" :disabled="x"` if a busy button shouldn't be clickable. */
+    loading?: boolean;
+    /** Adds `--ui-shadow-md` - independent of `variant`, so it composes with any of them. */
+    raised?: boolean;
+    icon?: string;
+    trailingIcon?: string;
+    /** Forces (or blocks) the equal-width/height "icon button" shape - overrides the auto-detected default below either direction. Needed for a button whose content is short *text* rather than an icon (a calendar day, a page number) - `iconOnly` below only looks at whether there's a default slot at all, not how wide its content happens to be, so a grid of these would otherwise size to each cell's own digit count instead of forming a uniform grid. */
+    square?: boolean;
+    ui?: UiProp<ButtonThemeSlots>;
+}
+declare var __VLS_13: {
+    class: unknown;
+}, __VLS_20: {}, __VLS_22: {
+    class: unknown;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_20) => any;
+} & {
+    'trailing-icon'?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & 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/Button.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed, useSlots } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { useRippleEnabled } from "../composables/use-ripple";
+import { vRipple } from "../directives/ripple";
+import { buttonTheme } from "../theme/button";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "button" },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  block: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  raised: { type: Boolean, required: false },
+  icon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  square: { type: Boolean, required: false, default: void 0 },
+  ui: { type: Object, required: false }
+});
+const slots = useSlots();
+const iconOnly = computed(() => !slots.default);
+const icons = useIcons();
+const messages = useMessages();
+const rippleEnabledSetting = useRippleEnabled();
+const rippleEnabled = computed(() => rippleEnabledSetting.value && props.variant !== "text");
+const theme = useComponentTheme("button", buttonTheme);
+const themeProps = useThemeProps("button");
+const ui = computed(() => theme.value({
+  color: props.color ?? themeProps.value.color,
+  variant: props.variant,
+  size: props.size ?? themeProps.value.size,
+  block: props.block,
+  raised: props.raised,
+  square: props.square ?? iconOnly.value
+}));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+</script>
+
+<template>
+  <Primitive v-ripple="rippleEnabled" :as="as" :disabled="disabled" :aria-busy="loading || void 0" v-bind="rootProps">
+    <Icon v-if="loading" :name="icons.loading" :class="applyClassPrefix('animate-spin')" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
+    <!--
+      A named slot (not just the `icon` prop) so a consumer building a
+      custom control on top of Button (Select's clear button, for one) can
+      swap the glyph entirely while still reusing Button's own size-driven
+      class via the scoped `class` - most callers never touch this and just
+      use `icon`, which the fallback below still handles unchanged.
+    -->
+    <slot v-else name="icon" :class="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon).class">
+      <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
+    </slot>
+    <span v-if="loading" :class="applyClassPrefix('sr-only')">{{ messages.loading }}</span>
+    <slot />
+    <!-- Same reasoning as the leading `icon` slot above - a named slot so a
+      consumer can swap the trailing glyph entirely (DatePicker's button-mode
+      trigger, for one), while `trailingIcon` alone still covers the common case. -->
+    <slot name="trailing-icon" :class="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon).class">
+      <Icon v-if="trailingIcon" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+    </slot>
+  </Primitive>
+</template>

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

@@ -0,0 +1,45 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { Component } from 'vue';
+import type { ButtonThemeSlots } from '../theme/button.js';
+import type { UiProp } from '../utils/ui.js';
+import { buttonTheme } from '../theme/button.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface ButtonProps {
+    /** A tag name ('a', 'span', ...) or a component reference (e.g. NuxtLink, via resolveComponent) - Primitive renders whichever is given. */
+    as?: string | Component;
+    color?: ButtonVariants['color'];
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    block?: boolean;
+    disabled?: boolean;
+    /** Shows a spinner in the leading icon's place. Doesn't imply `disabled` - combine `:loading="x" :disabled="x"` if a busy button shouldn't be clickable. */
+    loading?: boolean;
+    /** Adds `--ui-shadow-md` - independent of `variant`, so it composes with any of them. */
+    raised?: boolean;
+    icon?: string;
+    trailingIcon?: string;
+    /** Forces (or blocks) the equal-width/height "icon button" shape - overrides the auto-detected default below either direction. Needed for a button whose content is short *text* rather than an icon (a calendar day, a page number) - `iconOnly` below only looks at whether there's a default slot at all, not how wide its content happens to be, so a grid of these would otherwise size to each cell's own digit count instead of forming a uniform grid. */
+    square?: boolean;
+    ui?: UiProp<ButtonThemeSlots>;
+}
+declare var __VLS_13: {
+    class: unknown;
+}, __VLS_20: {}, __VLS_22: {
+    class: unknown;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_20) => any;
+} & {
+    'trailing-icon'?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & 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/ButtonGroup.d.vue.ts

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ButtonGroupThemeSlots } from '../theme/button-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { buttonGroupTheme } from '../theme/button-group.js';
+type ButtonGroupVariants = VariantProps<typeof buttonGroupTheme>;
+export interface ButtonGroupProps {
+    orientation?: ButtonGroupVariants['orientation'];
+    ui?: UiProp<ButtonGroupThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupProps> & 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/ButtonGroup.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { computed } from "vue";
+import { buttonGroupTheme } from "../theme/button-group";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  orientation: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("buttonGroup", buttonGroupTheme);
+const ui = computed(() => theme.value({
+  orientation: props.orientation
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <slot />
+  </div>
+</template>