@sewadah/selaras 0.1.1

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

@@ -0,0 +1,18 @@
+export interface ProseH5Props {
+    id?: string;
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProseH5Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH5Props> & 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/ProseH6.d.vue.ts

@@ -0,0 +1,18 @@
+export interface ProseH6Props {
+    id?: string;
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProseH6Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH6Props> & 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/ProseH6.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { computed } from "vue";
+import { proseTheme } from "../theme/prose";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  id: { type: String, required: false }
+});
+const theme = useComponentTheme("prose", proseTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.h6, () => void 0);
+</script>
+
+<template>
+  <h6 :id="id" v-bind="rootProps">
+    <a v-if="id" :href="`#${id}`" v-bind="resolveSlot(ui.headingAnchor, void 0)">
+      <slot />
+    </a>
+    <slot v-else />
+  </h6>
+</template>

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

@@ -0,0 +1,18 @@
+export interface ProseH6Props {
+    id?: string;
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProseH6Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH6Props> & 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/ProsePre.d.vue.ts

@@ -0,0 +1,20 @@
+export interface ProsePreProps {
+    code?: string;
+    language?: string;
+    filename?: string;
+    highlights?: number[];
+    meta?: string;
+}
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProsePreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProsePreProps> & 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/ProsePre.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { proseTheme } from "../theme/prose";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Badge from "./Badge.vue";
+import Button from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  code: { type: String, required: false },
+  language: { type: String, required: false },
+  filename: { type: String, required: false },
+  highlights: { type: Array, required: false },
+  meta: { type: String, required: false }
+});
+const icons = useIcons();
+const theme = useComponentTheme("prose", proseTheme);
+const ui = computed(() => theme.value());
+const preProps = useRootProps(() => ui.value.pre, () => void 0);
+const copied = ref(false);
+async function copy() {
+  if (!props.code)
+    return;
+  await navigator.clipboard.writeText(props.code);
+  copied.value = true;
+  setTimeout(() => {
+    copied.value = false;
+  }, 1500);
+}
+</script>
+
+<template>
+  <div v-bind="resolveSlot(ui.preWrapper, void 0)">
+    <div v-if="filename || language || code" v-bind="resolveSlot(ui.preHeader, void 0)">
+      <span v-if="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
+      <Badge v-else-if="language" :label="language" size="sm" variant="outline" />
+      <span v-else />
+      <Button
+        v-if="code"
+        v-bind="resolveSlot(ui.preCopyButton, void 0)"
+        size="sm"
+        variant="ghost"
+        color="neutral"
+        :icon="copied ? icons.check : icons.copy"
+        @click="copy"
+      />
+    </div>
+    <pre v-bind="preProps"><slot /></pre>
+  </div>
+</template>

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

@@ -0,0 +1,20 @@
+export interface ProsePreProps {
+    code?: string;
+    language?: string;
+    filename?: string;
+    highlights?: number[];
+    meta?: string;
+}
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProsePreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProsePreProps> & 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/RadioGroup.d.vue.ts

@@ -0,0 +1,50 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { RadioGroupThemeSlots } from '../theme/radio-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { radioGroupTheme } from '../theme/radio-group.js';
+export interface RadioItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    description?: string;
+}
+type RadioGroupVariants = VariantProps<typeof radioGroupTheme>;
+type __VLS_Slots = RadioGroupSlots;
+export interface RadioGroupProps {
+    id?: string;
+    name?: string;
+    /** A plain string is shorthand for `{ label: value, value }`. */
+    items: (string | RadioItem)[];
+    modelValue?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: RadioGroupVariants['size'];
+    color?: RadioGroupVariants['color'];
+    orientation?: RadioGroupVariants['orientation'];
+    variant?: RadioGroupVariants['variant'];
+    ui?: UiProp<RadioGroupThemeSlots>;
+}
+export interface RadioGroupEmits {
+    'update:modelValue': [value: string];
+}
+export interface RadioGroupSlots {
+    /** Replaces an item's plain label text - useful for a description, price, or other rich content alongside it (e.g. with `variant="card"`). */
+    label?: (props: {
+        item: RadioItem;
+        checked: boolean;
+        disabled: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<RadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<RadioGroupProps> & 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/RadioGroup.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui";
+import { computed } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { radioGroupTheme } from "../theme/radio-group";
+import { resolveSlot, useComponentTheme, useRootProps, withFallthroughClass } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  items: { type: Array, required: true },
+  modelValue: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false },
+  variant: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+defineSlots();
+const field = useFormField();
+const radioGroupId = computed(() => props.id ?? field?.id);
+const radioGroupInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
+const describedBy = computed(() => field?.describedBy.value);
+const normalizedItems = computed(
+  () => props.items.map((item) => typeof item === "string" ? { label: item, value: item } : item)
+);
+const theme = useComponentTheme("radioGroup", radioGroupTheme);
+const ui = computed(() => theme.value({
+  invalid: radioGroupInvalid.value,
+  size: effectiveSize.value,
+  color: props.color,
+  orientation: props.orientation,
+  variant: props.variant
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+function itemWrapperPropsFor(item) {
+  return resolveSlot(ui.value.itemWrapper, withFallthroughClass(item.description ? "items-start" : void 0, props.ui?.itemWrapper));
+}
+function itemPropsFor(item) {
+  return resolveSlot(ui.value.item, withFallthroughClass(item.description ? "mt-0.5" : void 0, props.ui?.item));
+}
+const indicatorProps = computed(() => resolveSlot(ui.value.indicator, props.ui?.indicator));
+const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
+const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const labelGroupProps = computed(() => resolveSlot(ui.value.labelGroup, props.ui?.labelGroup));
+</script>
+
+<template>
+  <RadioGroupRoot
+    :id="radioGroupId"
+    :model-value="modelValue"
+    :name="name ?? field?.name"
+    :disabled="disabled"
+    :orientation="orientation"
+    :aria-invalid="radioGroupInvalid || void 0"
+    :aria-describedby="describedBy"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+  >
+    <label v-for="item in normalizedItems" :key="item.value" v-bind="itemWrapperPropsFor(item)">
+      <RadioGroupItem :value="item.value" :disabled="item.disabled" v-bind="itemPropsFor(item)">
+        <RadioGroupIndicator force-mount v-bind="indicatorProps" />
+      </RadioGroupItem>
+      <slot
+        name="label"
+        :item="item"
+        :checked="modelValue === item.value"
+        :disabled="Boolean(disabled || item.disabled)"
+      >
+        <span v-if="item.description" v-bind="labelGroupProps">
+          <span v-bind="labelProps">{{ item.label }}</span>
+          <span v-bind="descriptionProps">{{ item.description }}</span>
+        </span>
+        <span v-else v-bind="labelProps">{{ item.label }}</span>
+      </slot>
+    </label>
+  </RadioGroupRoot>
+</template>

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

@@ -0,0 +1,50 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { RadioGroupThemeSlots } from '../theme/radio-group.js';
+import type { UiProp } from '../utils/ui.js';
+import { radioGroupTheme } from '../theme/radio-group.js';
+export interface RadioItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    description?: string;
+}
+type RadioGroupVariants = VariantProps<typeof radioGroupTheme>;
+type __VLS_Slots = RadioGroupSlots;
+export interface RadioGroupProps {
+    id?: string;
+    name?: string;
+    /** A plain string is shorthand for `{ label: value, value }`. */
+    items: (string | RadioItem)[];
+    modelValue?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: RadioGroupVariants['size'];
+    color?: RadioGroupVariants['color'];
+    orientation?: RadioGroupVariants['orientation'];
+    variant?: RadioGroupVariants['variant'];
+    ui?: UiProp<RadioGroupThemeSlots>;
+}
+export interface RadioGroupEmits {
+    'update:modelValue': [value: string];
+}
+export interface RadioGroupSlots {
+    /** Replaces an item's plain label text - useful for a description, price, or other rich content alongside it (e.g. with `variant="card"`). */
+    label?: (props: {
+        item: RadioItem;
+        checked: boolean;
+        disabled: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<RadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<RadioGroupProps> & 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/Rating.d.vue.ts

@@ -0,0 +1,36 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { RatingThemeSlots } from '../theme/rating.js';
+import type { UiProp } from '../utils/ui.js';
+import { ratingTheme } from '../theme/rating.js';
+type RatingVariants = VariantProps<typeof ratingTheme>;
+export interface RatingProps {
+    id?: string;
+    modelValue?: number;
+    defaultValue?: number;
+    /** Number of stars. @default 5 */
+    length?: number;
+    /** Fractional precision per star - 0.5 for half-star ratings. Matches Reka's own restricted set of granularities, not an arbitrary number. @default 1 */
+    step?: 1 | 0.5 | 0.25 | 0.1;
+    /** Clicking the currently-selected value again resets it to 0. */
+    clearable?: boolean;
+    /** Preview the rating on hover before clicking. @default true */
+    hoverable?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    orientation?: RatingVariants['orientation'];
+    size?: RatingVariants['size'];
+    color?: RatingVariants['color'];
+    name?: string;
+    required?: boolean;
+    ui?: UiProp<RatingThemeSlots>;
+}
+export interface RatingEmits {
+    'update:modelValue': [value: number];
+}
+declare const __VLS_export: import("vue").DefineComponent<RatingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<RatingProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Rating.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { RatingItem, RatingItemIndicator, RatingRoot } from "reka-ui";
+import { computed } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { ratingTheme } from "../theme/rating";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  modelValue: { type: Number, required: false },
+  defaultValue: { type: Number, required: false },
+  length: { type: Number, required: false },
+  step: { type: Number, required: false },
+  clearable: { type: Boolean, required: false },
+  hoverable: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  orientation: { type: null, 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"]);
+const field = useFormField();
+const ratingId = computed(() => props.id ?? field?.id);
+const ratingInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
+const describedBy = computed(() => field?.describedBy.value);
+const icons = useIcons();
+const theme = useComponentTheme("rating", ratingTheme);
+const ui = computed(() => theme.value({
+  orientation: props.orientation,
+  size: effectiveSize.value,
+  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));
+const indicatorProps = computed(() => resolveSlot(ui.value.indicator, props.ui?.indicator));
+const fillIconProps = computed(() => resolveSlot(ui.value.fillIcon, props.ui?.fillIcon));
+</script>
+
+<template>
+  <RatingRoot
+    :id="ratingId"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :length="length"
+    :step="step"
+    :clearable="clearable"
+    :hoverable="hoverable"
+    :disabled="disabled"
+    :orientation="orientation"
+    :name="name ?? field?.name"
+    :required="required"
+    :aria-invalid="ratingInvalid || void 0"
+    :aria-describedby="describedBy"
+    v-bind="rootProps"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+  >
+    <RatingItem
+      v-for="n in length ?? 5"
+      :key="n"
+      v-slot="{ steps }"
+      :item="n"
+      v-bind="itemProps"
+    >
+      <Icon :name="icons.star" v-bind="iconProps" />
+      <RatingItemIndicator
+        v-for="stepValue in steps"
+        :key="stepValue"
+        :step="stepValue"
+        v-bind="indicatorProps"
+      >
+        <Icon :name="icons.star" v-bind="fillIconProps" />
+      </RatingItemIndicator>
+    </RatingItem>
+  </RatingRoot>
+</template>

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

@@ -0,0 +1,36 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { RatingThemeSlots } from '../theme/rating.js';
+import type { UiProp } from '../utils/ui.js';
+import { ratingTheme } from '../theme/rating.js';
+type RatingVariants = VariantProps<typeof ratingTheme>;
+export interface RatingProps {
+    id?: string;
+    modelValue?: number;
+    defaultValue?: number;
+    /** Number of stars. @default 5 */
+    length?: number;
+    /** Fractional precision per star - 0.5 for half-star ratings. Matches Reka's own restricted set of granularities, not an arbitrary number. @default 1 */
+    step?: 1 | 0.5 | 0.25 | 0.1;
+    /** Clicking the currently-selected value again resets it to 0. */
+    clearable?: boolean;
+    /** Preview the rating on hover before clicking. @default true */
+    hoverable?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    orientation?: RatingVariants['orientation'];
+    size?: RatingVariants['size'];
+    color?: RatingVariants['color'];
+    name?: string;
+    required?: boolean;
+    ui?: UiProp<RatingThemeSlots>;
+}
+export interface RatingEmits {
+    'update:modelValue': [value: number];
+}
+declare const __VLS_export: import("vue").DefineComponent<RatingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<RatingProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+import type { ReadMoreThemeSlots } from '../theme/read-more.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ReadMoreProps {
+    /** Collapsed height in pixels - content shorter than this renders with no truncation UI at all. @default 200 */
+    previewHeight?: number;
+    ui?: UiProp<ReadMoreThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ReadMoreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReadMoreProps> & 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/ReadMore.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { readMoreTheme } from "../theme/read-more";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  previewHeight: { type: Number, required: false, default: 200 },
+  ui: { type: Object, required: false }
+});
+const icons = useIcons();
+const messages = useMessages();
+const contentEl = ref();
+const contentHeight = ref(0);
+const open = ref(false);
+let resizeObserver;
+onMounted(() => {
+  if (!contentEl.value)
+    return;
+  contentHeight.value = contentEl.value.scrollHeight;
+  resizeObserver = new ResizeObserver(() => {
+    if (contentEl.value)
+      contentHeight.value = contentEl.value.scrollHeight;
+  });
+  resizeObserver.observe(contentEl.value);
+});
+onUnmounted(() => resizeObserver?.disconnect());
+const truncated = computed(() => contentHeight.value === 0 || contentHeight.value > props.previewHeight);
+const maxHeight = computed(() => {
+  if (!truncated.value)
+    return void 0;
+  return `${open.value ? contentHeight.value : props.previewHeight}px`;
+});
+function toggle() {
+  open.value = !open.value;
+}
+const theme = useComponentTheme("readMore", readMoreTheme);
+const ui = computed(() => theme.value({ open: open.value }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const fadeProps = computed(() => resolveSlot(ui.value.fade, props.ui?.fade));
+const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
+const triggerIconProps = computed(() => resolveSlot(ui.value.triggerIcon, props.ui?.triggerIcon));
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <div ref="contentEl" :style="{ maxHeight }" v-bind="contentProps">
+      <slot />
+    </div>
+    <div v-if="truncated && !open" v-bind="fadeProps" />
+    <button v-if="truncated" type="button" v-bind="triggerProps" @click="toggle">
+      {{ open ? messages.showLess : messages.showMore }}
+      <Icon :name="icons.chevronDown" v-bind="triggerIconProps" />
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,20 @@
+import type { ReadMoreThemeSlots } from '../theme/read-more.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ReadMoreProps {
+    /** Collapsed height in pixels - content shorter than this renders with no truncation UI at all. @default 200 */
+    previewHeight?: number;
+    ui?: UiProp<ReadMoreThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ReadMoreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReadMoreProps> & 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/ScrollArea.d.vue.ts

@@ -0,0 +1,19 @@
+import type { ScrollAreaThemeSlots } from '../theme/scroll-area.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ScrollAreaProps {
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    ui?: UiProp<ScrollAreaThemeSlots>;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ScrollAreaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollAreaProps> & 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;
+    };
+};