@sewadah/selaras 0.1.1

package/dist/runtime/components/Textarea.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { textareaTheme } from "../theme/textarea";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  modelValue: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  rows: { type: Number, required: false, default: 3 },
+  size: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  color: { type: null, required: false, default: "primary" },
+  clearable: { type: Boolean, required: false },
+  icon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  autoresize: { type: Boolean, required: false },
+  maxrows: { type: Number, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const field = useFormField();
+const textareaId = computed(() => props.id ?? field?.id);
+const textareaInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const describedBy = computed(() => field?.describedBy.value);
+const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
+const showClear = computed(() => !!props.clearable && !props.disabled && hasValue.value);
+function clear() {
+  emit("update:modelValue", "");
+}
+const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
+const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("textarea", textareaTheme);
+const ui = computed(() => theme.value({
+  size: effectiveSize.value,
+  color: props.color,
+  invalid: textareaInvalid.value,
+  hasLeadingIcon: !!props.icon,
+  hasTrailingIcon: !!props.trailingIcon || showClear.value,
+  autoresize: props.autoresize
+}));
+const rootProps = computed(() => resolveSlot(ui.value.root, props.ui?.root));
+const baseProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+const textareaRef = ref();
+async function resize() {
+  if (!props.autoresize || !textareaRef.value)
+    return;
+  await nextTick();
+  const el = textareaRef.value;
+  el.style.height = "auto";
+  if (props.maxrows) {
+    const cs = getComputedStyle(el);
+    const lineHeight = Number.parseFloat(cs.lineHeight);
+    const padding = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
+    const maxHeight = lineHeight * props.maxrows + padding;
+    el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+    el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+    return;
+  }
+  el.style.height = `${el.scrollHeight}px`;
+}
+onMounted(resize);
+watch(() => props.modelValue, resize);
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
+    <textarea
+      :id="textareaId"
+      ref="textareaRef"
+      data-ui-group-item
+      :value="modelValue"
+      :name="name ?? field?.name"
+      :placeholder="placeholder"
+      :rows="rows"
+      :disabled="disabled"
+      :aria-invalid="textareaInvalid || void 0"
+      :aria-describedby="describedBy"
+      v-bind="baseProps"
+      @input="$emit('update:modelValue', $event.target.value);
+  resize()"
+    />
+    <Button
+      v-if="showClear"
+      :size="clearSize"
+      variant="text"
+      color="neutral"
+      :aria-label="messages.clear"
+      v-bind="resolveSlot(ui.clear, props.ui?.clear)"
+      @click="clear"
+    >
+      <template #icon="{ class: iconClass }">
+        <slot name="clear-icon">
+          <Icon :name="icons.close" :class="iconClass" />
+        </slot>
+      </template>
+    </Button>
+    <Icon v-else-if="trailingIcon" :name="trailingIcon" v-bind="resolveSlot(ui.trailingIcon, props.ui?.trailingIcon)" />
+  </div>
+</template>

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

@@ -0,0 +1,45 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { TextareaThemeSlots } from '../theme/textarea.js';
+import type { UiProp } from '../utils/ui.js';
+import { textareaTheme } from '../theme/textarea.js';
+type TextareaVariants = VariantProps<typeof textareaTheme>;
+export interface TextareaProps {
+    id?: string;
+    name?: string;
+    modelValue?: string;
+    placeholder?: string;
+    rows?: number;
+    size?: TextareaVariants['size'];
+    disabled?: boolean;
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: TextareaVariants['color'];
+    clearable?: boolean;
+    icon?: string;
+    trailingIcon?: string;
+    /** Grows the box to fit its content instead of a fixed height + scrollbar/drag-handle. */
+    autoresize?: boolean;
+    /** autoresize only - caps how many rows it can grow to before switching to a scrollbar (0/unset grows indefinitely). */
+    maxrows?: number;
+    ui?: UiProp<TextareaThemeSlots>;
+}
+export interface TextareaEmits {
+    'update:modelValue': [value: string];
+}
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    'clear-icon'?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{
+    "onUpdate:modelValue"?: ((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/Theme.d.vue.ts

@@ -0,0 +1,19 @@
+export interface ThemeProps {
+    /** Component-name-keyed slot-class overrides, same shape as app.config.ui but scoped to this subtree instead of the whole app - e.g. `{ button: { slots: { base: 'rounded-full' } } }`. */
+    ui?: Partial<Record<string, object>>;
+    /** Component-name-keyed prop-default overrides - e.g. `{ button: { size: 'lg' } }`. Only respected by components that opt into reading useThemeProps for a given prop (see theming.md's "STheme" section for which ones currently do); an explicit prop on the component itself always wins. */
+    props?: Partial<Record<string, Record<string, unknown>>>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & 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/Theme.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { computed, inject, provide } from "vue";
+import { THEME_INJECTION_KEY } from "../utils/injection-keys";
+const props = defineProps({
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
+});
+const parent = inject(THEME_INJECTION_KEY, void 0);
+provide(THEME_INJECTION_KEY, computed(() => ({
+  ui: props.ui,
+  props: props.props,
+  parent: parent?.value
+})));
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,19 @@
+export interface ThemeProps {
+    /** Component-name-keyed slot-class overrides, same shape as app.config.ui but scoped to this subtree instead of the whole app - e.g. `{ button: { slots: { base: 'rounded-full' } } }`. */
+    ui?: Partial<Record<string, object>>;
+    /** Component-name-keyed prop-default overrides - e.g. `{ button: { size: 'lg' } }`. Only respected by components that opt into reading useThemeProps for a given prop (see theming.md's "STheme" section for which ones currently do); an explicit prop on the component itself always wins. */
+    props?: Partial<Record<string, Record<string, unknown>>>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & 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/Toast.d.vue.ts

@@ -0,0 +1,8 @@
+import type { ToastThemeSlots } from '../theme/toast.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ToastProps {
+    ui?: UiProp<ToastThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Toast.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ToastClose, ToastDescription, ToastPortal, ToastRoot, ToastTitle, ToastViewport } from "reka-ui";
+import { computed } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { useToast } from "../composables/use-toast";
+import { toastTheme } from "../theme/toast";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+const props = defineProps({
+  ui: { type: Object, required: false }
+});
+const { toasts, remove } = useToast();
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("toast", toastTheme);
+const ui = computed(() => theme.value());
+const viewportProps = computed(() => resolveSlot(ui.value.viewport, props.ui?.viewport));
+const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
+const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const closeProps = computed(() => resolveSlot(ui.value.close, props.ui?.close));
+function rootPropsFor(toast) {
+  return resolveSlot(theme.value({ color: toast.color }).root, props.ui?.root);
+}
+function iconPropsFor(toast) {
+  return resolveSlot(theme.value({ color: toast.color }).icon, props.ui?.icon);
+}
+function iconNameFor(toast) {
+  return toast.icon ?? (toast.color ? icons.value[toast.color] : void 0);
+}
+</script>
+
+<template>
+  <ToastRoot
+    v-for="toast in toasts"
+    :key="toast.id"
+    :duration="toast.duration ?? 5e3"
+    v-bind="rootPropsFor(toast)"
+    @update:open="(open) => !open && remove(toast.id)"
+  >
+    <Icon v-if="iconNameFor(toast)" :name="iconNameFor(toast)" v-bind="iconPropsFor(toast)" />
+    <div>
+      <ToastTitle v-if="toast.title" v-bind="titleProps">
+        {{ toast.title }}
+      </ToastTitle>
+      <ToastDescription v-if="toast.description" v-bind="descriptionProps">
+        {{ toast.description }}
+      </ToastDescription>
+    </div>
+    <ToastClose as-child>
+      <Button size="sm" variant="ghost" color="neutral" :icon="icons.close" :aria-label="messages.close" v-bind="closeProps" />
+    </ToastClose>
+  </ToastRoot>
+  <ToastPortal>
+    <ToastViewport v-bind="viewportProps" />
+  </ToastPortal>
+</template>

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

@@ -0,0 +1,8 @@
+import type { ToastThemeSlots } from '../theme/toast.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ToastProps {
+    ui?: UiProp<ToastThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,38 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ToggleThemeSlots } from '../theme/toggle.js';
+import type { UiProp } from '../utils/ui.js';
+import { toggleTheme } from '../theme/toggle.js';
+type ToggleVariants = VariantProps<typeof toggleTheme>;
+type __VLS_Slots = ToggleSlots;
+export interface ToggleProps {
+    modelValue?: boolean;
+    defaultValue?: boolean;
+    disabled?: boolean;
+    icon?: string;
+    color?: ToggleVariants['color'];
+    size?: ToggleVariants['size'];
+    /** Forces (or blocks) the equal-width/height icon-only shape - same convention as Button's own `square`. */
+    square?: boolean;
+    ui?: UiProp<ToggleThemeSlots>;
+}
+export interface ToggleEmits {
+    'update:modelValue': [value: boolean];
+}
+export interface ToggleSlots {
+    default?: (props: {
+        pressed: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ToggleProps> & Readonly<{
+    "onUpdate:modelValue"?: ((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/Toggle.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { Toggle } from "reka-ui";
+import { computed, useSlots } from "vue";
+import { toggleTheme } from "../theme/toggle";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: { type: Boolean, required: false, default: void 0 },
+  defaultValue: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  icon: { type: String, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  square: { type: Boolean, required: false, default: void 0 },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+defineSlots();
+const slots = useSlots();
+const iconOnly = computed(() => !slots.default);
+const theme = useComponentTheme("toggle", toggleTheme);
+const ui = computed(() => theme.value({
+  color: props.color,
+  size: props.size,
+  square: props.square ?? iconOnly.value
+}));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+</script>
+
+<template>
+  <Toggle
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :disabled="disabled"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+  >
+    <template #default="{ pressed }">
+      <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.icon, props.ui?.icon)" />
+      <slot :pressed="pressed" />
+    </template>
+  </Toggle>
+</template>

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

@@ -0,0 +1,38 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ToggleThemeSlots } from '../theme/toggle.js';
+import type { UiProp } from '../utils/ui.js';
+import { toggleTheme } from '../theme/toggle.js';
+type ToggleVariants = VariantProps<typeof toggleTheme>;
+type __VLS_Slots = ToggleSlots;
+export interface ToggleProps {
+    modelValue?: boolean;
+    defaultValue?: boolean;
+    disabled?: boolean;
+    icon?: string;
+    color?: ToggleVariants['color'];
+    size?: ToggleVariants['size'];
+    /** Forces (or blocks) the equal-width/height icon-only shape - same convention as Button's own `square`. */
+    square?: boolean;
+    ui?: UiProp<ToggleThemeSlots>;
+}
+export interface ToggleEmits {
+    'update:modelValue': [value: boolean];
+}
+export interface ToggleSlots {
+    default?: (props: {
+        pressed: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ToggleProps> & Readonly<{
+    "onUpdate:modelValue"?: ((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/ToggleGroup.d.vue.ts

@@ -0,0 +1,48 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ToggleGroupThemeSlots } from '../theme/toggle-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { toggleGroupTheme } from '../theme/toggle-group.js';
+export interface ToggleGroupItemDef {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+}
+type ToggleGroupVariants = VariantProps<typeof toggleGroupTheme>;
+type __VLS_Slots = ToggleGroupSlots;
+export interface ToggleGroupProps {
+    /** A plain string is shorthand for `{ label: value, value }`. */
+    items: (string | ToggleGroupItemDef)[];
+    /** @default 'single' */
+    type?: 'single' | 'multiple';
+    modelValue?: string | string[];
+    defaultValue?: string | string[];
+    disabled?: boolean;
+    orientation?: ToggleGroupVariants['orientation'];
+    color?: ToggleGroupVariants['color'];
+    size?: ToggleGroupVariants['size'];
+    ui?: UiProp<ToggleGroupThemeSlots>;
+}
+export interface ToggleGroupEmits {
+    'update:modelValue': [value: string | string[]];
+}
+export interface ToggleGroupSlots {
+    /** Replaces an item's default icon+label content. */
+    item?: (props: {
+        item: ToggleGroupItemDef;
+        pressed: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToggleGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<ToggleGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | 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/ToggleGroup.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui";
+import { computed } from "vue";
+import { toggleGroupTheme } from "../theme/toggle-group";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: true },
+  type: { type: String, required: false, default: "single" },
+  modelValue: { type: [String, Array], required: false },
+  defaultValue: { type: [String, Array], required: false },
+  disabled: { type: Boolean, required: false },
+  orientation: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+defineSlots();
+const normalizedItems = computed(
+  () => props.items.map((item) => typeof item === "string" ? { label: item, value: item } : item)
+);
+const theme = useComponentTheme("toggleGroup", toggleGroupTheme);
+const ui = computed(() => theme.value({
+  orientation: props.orientation,
+  size: props.size,
+  color: props.color
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+function isPressed(item) {
+  return props.type === "multiple" ? Array.isArray(props.modelValue) && props.modelValue.includes(item.value) : props.modelValue === item.value;
+}
+</script>
+
+<template>
+  <ToggleGroupRoot
+    :type="type"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :disabled="disabled"
+    :orientation="orientation"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+  >
+    <ToggleGroupItem
+      v-for="item in normalizedItems"
+      :key="item.value"
+      :value="item.value"
+      :disabled="item.disabled"
+      v-bind="itemProps"
+    >
+      <slot name="item" :item="item" :pressed="isPressed(item)">
+        <Icon v-if="item.icon" :name="item.icon" v-bind="iconProps" />
+        {{ item.label }}
+      </slot>
+    </ToggleGroupItem>
+  </ToggleGroupRoot>
+</template>

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

@@ -0,0 +1,48 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ToggleGroupThemeSlots } from '../theme/toggle-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { toggleGroupTheme } from '../theme/toggle-group.js';
+export interface ToggleGroupItemDef {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+}
+type ToggleGroupVariants = VariantProps<typeof toggleGroupTheme>;
+type __VLS_Slots = ToggleGroupSlots;
+export interface ToggleGroupProps {
+    /** A plain string is shorthand for `{ label: value, value }`. */
+    items: (string | ToggleGroupItemDef)[];
+    /** @default 'single' */
+    type?: 'single' | 'multiple';
+    modelValue?: string | string[];
+    defaultValue?: string | string[];
+    disabled?: boolean;
+    orientation?: ToggleGroupVariants['orientation'];
+    color?: ToggleGroupVariants['color'];
+    size?: ToggleGroupVariants['size'];
+    ui?: UiProp<ToggleGroupThemeSlots>;
+}
+export interface ToggleGroupEmits {
+    'update:modelValue': [value: string | string[]];
+}
+export interface ToggleGroupSlots {
+    /** Replaces an item's default icon+label content. */
+    item?: (props: {
+        item: ToggleGroupItemDef;
+        pressed: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ToggleGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<ToggleGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | 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/Tooltip.d.vue.ts

@@ -0,0 +1,28 @@
+import type { TooltipThemeSlots } from '../theme/tooltip.js';
+import type { UiProp } from '../utils/ui.js';
+export interface TooltipProps {
+    text?: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    delayDuration?: number;
+    /** Keyboard shortcut hint shown alongside the text, e.g. `['⌘', 'K']` - each entry renders as its own small key badge. Takes the literal display strings, not semantic key names - there's no platform-specific symbol mapping. */
+    kbds?: string[];
+    /** Set `false` to hide the little pointer triangle. */
+    arrow?: boolean;
+    disabled?: boolean;
+    ui?: UiProp<TooltipThemeSlots>;
+}
+declare var __VLS_14: {}, __VLS_28: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    content?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & 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/Tooltip.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { TooltipArrow, TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger } from "reka-ui";
+import { computed } from "vue";
+import { tooltipTheme } from "../theme/tooltip";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+const props = defineProps({
+  text: { type: String, required: false },
+  side: { type: String, required: false, default: "top" },
+  delayDuration: { type: Number, required: false, default: 200 },
+  kbds: { type: Array, required: false },
+  arrow: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("tooltip", tooltipTheme);
+const ui = computed(() => theme.value());
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
+const kbdsProps = computed(() => resolveSlot(ui.value.kbds, props.ui?.kbds));
+const kbdProps = computed(() => resolveSlot(ui.value.kbd, props.ui?.kbd));
+</script>
+
+<template>
+  <TooltipRoot :delay-duration="delayDuration" :disabled="disabled">
+    <TooltipTrigger as-child>
+      <slot />
+    </TooltipTrigger>
+    <TooltipPortal>
+      <TooltipContent :side="side" :side-offset="6" v-bind="contentProps">
+        <slot name="content">
+          {{ text }}
+        </slot>
+        <span v-if="kbds?.length" v-bind="kbdsProps">
+          <kbd v-for="key in kbds" :key="key" v-bind="kbdProps">{{ key }}</kbd>
+        </span>
+        <TooltipArrow v-if="arrow" v-bind="arrowProps" />
+      </TooltipContent>
+    </TooltipPortal>
+  </TooltipRoot>
+</template>