@sewadah/selaras 0.1.1

package/dist/runtime/components/SlideoverRenderer.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { useSlideover } from "../composables/use-slideover";
+import Slideover from "./Slideover.vue";
+const { slideovers, close, remove } = useSlideover();
+</script>
+
+<template>
+  <Slideover
+    v-for="instance in slideovers"
+    :key="instance.id"
+    :open="instance.isOpen"
+    :title="instance.title"
+    :description="instance.description"
+    :side="instance.side"
+    :inset="instance.inset"
+    :dismissible="instance.dismissible"
+    :modal="instance.modal"
+    :overlay="instance.overlay"
+    :transition="instance.transition"
+    @update:open="(open) => !open && close(instance.id)"
+    @after-leave="remove(instance.id)"
+  >
+    <template #content>
+      <component :is="instance.component" v-bind="instance.props" @close="(value) => close(instance.id, value)" />
+    </template>
+  </Slideover>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SliderThemeSlots } from '../theme/slider.js';
+import type { UiProp } from '../utils/ui.js';
+import { sliderTheme } from '../theme/slider.js';
+type SliderVariants = VariantProps<typeof sliderTheme>;
+type __VLS_Slots = SliderSlots;
+export interface SliderProps {
+    modelValue?: number | number[];
+    defaultValue?: number | number[];
+    min?: number;
+    max?: number;
+    step?: number;
+    /** The minimum permitted number of steps between adjacent thumbs on a multi-thumb (range) slider. */
+    minStepsBetweenThumbs?: number;
+    disabled?: boolean;
+    orientation?: SliderVariants['orientation'];
+    /** Visually (and directionally) flips the slider - the max end renders where the min end normally would. */
+    inverted?: boolean;
+    /** Shows a tick mark at every step along the track - own addition, Reka's primitive has no tick/mark concept of its own. */
+    showTicks?: boolean;
+    size?: SliderVariants['size'];
+    color?: SliderVariants['color'];
+    /** @default 'circle' */
+    thumbVariant?: SliderVariants['thumbVariant'];
+    /** Shows the current value in a tooltip on hover/focus of each thumb - reuses Tooltip, not a bespoke floating label. */
+    tooltip?: boolean;
+    /** Renders -/+ buttons flanking the track, stepping by `step` - only meaningful (and only rendered) for a single-value slider, since stepping two independent range thumbs with one shared button pair has no obvious single meaning. */
+    controls?: boolean;
+    /** Accessible name for each thumb - a single string applies to all of them (fine for a single-thumb slider), an array maps one per thumb by index (e.g. `['Minimum', 'Maximum']` for a range slider). */
+    ariaLabel?: string | string[];
+    /** Submitted with an owning `<form>` under this name, via a real hidden input Reka renders internally - only takes effect when actually inside a form. */
+    name?: string;
+    ui?: UiProp<SliderThemeSlots>;
+}
+export interface SliderEmits {
+    'update:modelValue': [value: number | number[]];
+    /** Fires once, when a drag/interaction finishes with a changed value - unlike update:modelValue, which fires continuously while dragging. Useful for only acting once the user lets go (e.g. a debounced request). */
+    'valueCommit': [value: number | number[]];
+}
+export interface SliderSlots {
+    /** Content flanking the start of the track (an icon, an emoji, a unit label). */
+    start?: () => any;
+    /** Content flanking the end of the track. */
+    end?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | number[]) => any;
+    valueCommit: (value: number | number[]) => any;
+}, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | number[]) => any) | undefined;
+    onValueCommit?: ((value: number | number[]) => 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/Slider.vue

@@ -0,0 +1,186 @@
+<script setup>
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui";
+import { computed, ref, watch } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { sliderTheme } from "../theme/slider";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+import Tooltip from "./Tooltip.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: { type: [Number, Array], required: false },
+  defaultValue: { type: [Number, Array], required: false },
+  min: { type: Number, required: false, default: 0 },
+  max: { type: Number, required: false, default: 100 },
+  step: { type: Number, required: false, default: 1 },
+  minStepsBetweenThumbs: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  orientation: { type: null, required: false },
+  inverted: { type: Boolean, required: false },
+  showTicks: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  thumbVariant: { type: null, required: false },
+  tooltip: { type: Boolean, required: false },
+  controls: { type: Boolean, required: false },
+  ariaLabel: { type: [String, Array], required: false },
+  name: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "valueCommit"]);
+defineSlots();
+function toArray(value) {
+  if (value === void 0)
+    return void 0;
+  return Array.isArray(value) ? value : [value];
+}
+const isRange = computed(() => {
+  if (props.modelValue !== void 0)
+    return Array.isArray(props.modelValue);
+  if (props.defaultValue !== void 0)
+    return Array.isArray(props.defaultValue);
+  return false;
+});
+const internalValue = ref(toArray(props.modelValue) ?? toArray(props.defaultValue) ?? [props.min]);
+watch(() => props.modelValue, (value) => {
+  if (value !== void 0)
+    internalValue.value = toArray(value);
+});
+function fromArray(value) {
+  return isRange.value ? value : value[0] ?? props.min;
+}
+function onUpdateModelValue(value) {
+  if (!value)
+    return;
+  internalValue.value = value;
+  emit("update:modelValue", fromArray(value));
+}
+function onValueCommit(value) {
+  emit("valueCommit", fromArray(value));
+}
+function ariaLabelFor(index) {
+  return Array.isArray(props.ariaLabel) ? props.ariaLabel[index] : props.ariaLabel;
+}
+const canDecrement = computed(() => !props.disabled && (internalValue.value[0] ?? props.min) > props.min);
+const canIncrement = computed(() => !props.disabled && (internalValue.value[0] ?? props.min) < props.max);
+function stepBy(delta) {
+  const next = Math.min(props.max, Math.max(props.min, (internalValue.value[0] ?? props.min) + delta));
+  onUpdateModelValue([next]);
+  onValueCommit([next]);
+}
+const icons = useIcons();
+const messages = useMessages();
+const buttonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[props.size ?? "md"]);
+const controlButtonUi = { base: "shrink-0" };
+const ticks = computed(() => {
+  if (!props.showTicks)
+    return [];
+  const count = Math.floor((props.max - props.min) / props.step) + 1;
+  return Array.from({ length: count }, (_, i) => {
+    const value = props.min + i * props.step;
+    return { value, percent: (value - props.min) / (props.max - props.min) * 100 };
+  });
+});
+const theme = useComponentTheme("slider", sliderTheme);
+const ui = computed(() => theme.value({
+  size: props.size,
+  color: props.color,
+  orientation: props.orientation,
+  thumbVariant: props.thumbVariant
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const trackProps = computed(() => resolveSlot(ui.value.track, props.ui?.track));
+const rangeProps = computed(() => resolveSlot(ui.value.range, props.ui?.range));
+const thumbProps = computed(() => resolveSlot(ui.value.thumb, props.ui?.thumb));
+const tickProps = computed(() => resolveSlot(ui.value.tick, props.ui?.tick));
+const startProps = computed(() => resolveSlot(ui.value.start, props.ui?.start));
+const endProps = computed(() => resolveSlot(ui.value.end, props.ui?.end));
+</script>
+
+<template>
+  <SliderRoot
+    :model-value="internalValue"
+    :min="min"
+    :max="max"
+    :step="step"
+    :min-steps-between-thumbs="minStepsBetweenThumbs"
+    :disabled="disabled"
+    :orientation="orientation"
+    :inverted="inverted"
+    :name="name"
+    v-bind="rootProps"
+    @update:model-value="onUpdateModelValue"
+    @value-commit="onValueCommit"
+  >
+    <span v-if="$slots.start" v-bind="startProps">
+      <slot name="start" />
+    </span>
+    <!--
+      @pointerdown.stop on both control buttons: Reka's SliderRoot listens
+      for pointerdown on its own rendered element with no target filtering
+      beyond its own thumbs (confirmed by reading its compiled source) - any
+      other descendant's pointerdown, these buttons included, bubbles up and
+      gets treated as a drag-to-position gesture computed off the *whole
+      root's* bounding box, which silently overrides the click and jumps
+      the value to whatever edge that button happens to sit at. Stopping
+      propagation here keeps the click from ever reaching that listener.
+    -->
+    <Button
+      v-if="controls && !isRange"
+      variant="text"
+      color="neutral"
+      :size="buttonSize"
+      :icon="icons.minus"
+      :aria-label="messages.decrement"
+      :disabled="!canDecrement"
+      :ui="controlButtonUi"
+      tabindex="-1"
+      @pointerdown.stop
+      @click="stepBy(-step)"
+    />
+
+    <SliderTrack v-bind="trackProps">
+      <span
+        v-for="tick in ticks"
+        :key="tick.value"
+        v-bind="tickProps"
+        :style="orientation === 'vertical' ? { bottom: `${tick.percent}%` } : { left: `${tick.percent}%` }"
+      />
+      <SliderRange v-bind="rangeProps" />
+    </SliderTrack>
+    <template v-if="tooltip">
+      <Tooltip
+        v-for="(_, index) in internalValue"
+        :key="index"
+        :text="String(internalValue[index])"
+      >
+        <SliderThumb v-bind="thumbProps" :aria-label="ariaLabelFor(index)" />
+      </Tooltip>
+    </template>
+    <SliderThumb
+      v-for="(_, index) in internalValue"
+      v-else
+      :key="index"
+      v-bind="thumbProps"
+      :aria-label="ariaLabelFor(index)"
+    />
+
+    <Button
+      v-if="controls && !isRange"
+      variant="text"
+      color="neutral"
+      :size="buttonSize"
+      :icon="icons.plus"
+      :aria-label="messages.increment"
+      :disabled="!canIncrement"
+      :ui="controlButtonUi"
+      tabindex="-1"
+      @pointerdown.stop
+      @click="stepBy(step)"
+    />
+    <span v-if="$slots.end" v-bind="endProps">
+      <slot name="end" />
+    </span>
+  </SliderRoot>
+</template>

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

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SliderThemeSlots } from '../theme/slider.js';
+import type { UiProp } from '../utils/ui.js';
+import { sliderTheme } from '../theme/slider.js';
+type SliderVariants = VariantProps<typeof sliderTheme>;
+type __VLS_Slots = SliderSlots;
+export interface SliderProps {
+    modelValue?: number | number[];
+    defaultValue?: number | number[];
+    min?: number;
+    max?: number;
+    step?: number;
+    /** The minimum permitted number of steps between adjacent thumbs on a multi-thumb (range) slider. */
+    minStepsBetweenThumbs?: number;
+    disabled?: boolean;
+    orientation?: SliderVariants['orientation'];
+    /** Visually (and directionally) flips the slider - the max end renders where the min end normally would. */
+    inverted?: boolean;
+    /** Shows a tick mark at every step along the track - own addition, Reka's primitive has no tick/mark concept of its own. */
+    showTicks?: boolean;
+    size?: SliderVariants['size'];
+    color?: SliderVariants['color'];
+    /** @default 'circle' */
+    thumbVariant?: SliderVariants['thumbVariant'];
+    /** Shows the current value in a tooltip on hover/focus of each thumb - reuses Tooltip, not a bespoke floating label. */
+    tooltip?: boolean;
+    /** Renders -/+ buttons flanking the track, stepping by `step` - only meaningful (and only rendered) for a single-value slider, since stepping two independent range thumbs with one shared button pair has no obvious single meaning. */
+    controls?: boolean;
+    /** Accessible name for each thumb - a single string applies to all of them (fine for a single-thumb slider), an array maps one per thumb by index (e.g. `['Minimum', 'Maximum']` for a range slider). */
+    ariaLabel?: string | string[];
+    /** Submitted with an owning `<form>` under this name, via a real hidden input Reka renders internally - only takes effect when actually inside a form. */
+    name?: string;
+    ui?: UiProp<SliderThemeSlots>;
+}
+export interface SliderEmits {
+    'update:modelValue': [value: number | number[]];
+    /** Fires once, when a drag/interaction finishes with a changed value - unlike update:modelValue, which fires continuously while dragging. Useful for only acting once the user lets go (e.g. a debounced request). */
+    'valueCommit': [value: number | number[]];
+}
+export interface SliderSlots {
+    /** Content flanking the start of the track (an icon, an emoji, a unit label). */
+    start?: () => any;
+    /** Content flanking the end of the track. */
+    end?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | number[]) => any;
+    valueCommit: (value: number | number[]) => any;
+}, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | number[]) => any) | undefined;
+    onValueCommit?: ((value: number | number[]) => 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/Splitter.d.vue.ts

@@ -0,0 +1,41 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SplitterThemeSlots } from '../theme/splitter.js';
+import type { UiProp } from '../utils/ui.js';
+import { splitterTheme } from '../theme/splitter.js';
+type SplitterVariants = VariantProps<typeof splitterTheme>;
+export interface SplitterStorage {
+    getItem: (name: string) => string | null;
+    setItem: (name: string, value: string) => void;
+}
+export interface SplitterProps {
+    /** @default 'horizontal' */
+    direction?: SplitterVariants['direction'];
+    /** Persists each panel's size under this key once set - via `storage` below, or Reka's own `localStorage`-backed default when that's left unset. */
+    autoSaveId?: string;
+    /** How many pixels an arrow-key press resizes the focused handle by. @default 10 */
+    keyboardResizeBy?: number;
+    /** Overrides where `autoSaveId` persists to - `localStorage` by default. */
+    storage?: SplitterStorage;
+    ui?: UiProp<SplitterThemeSlots>;
+}
+export interface SplitterEmits {
+    /** Fires on every layout change (drag, keyboard resize, collapse/expand) with each panel's own current size. */
+    layout: [sizes: number[]];
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SplitterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    layout: (sizes: number[]) => any;
+}, string, import("vue").PublicProps, Readonly<SplitterProps> & Readonly<{
+    onLayout?: ((sizes: number[]) => 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/Splitter.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { SplitterGroup } from "reka-ui";
+import { computed } from "vue";
+import { splitterTheme } from "../theme/splitter";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  direction: { type: null, required: false, default: "horizontal" },
+  autoSaveId: { type: String, required: false },
+  keyboardResizeBy: { type: Number, required: false },
+  storage: { type: Object, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["layout"]);
+const theme = useComponentTheme("splitter", splitterTheme);
+const ui = computed(() => theme.value({ direction: props.direction }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <SplitterGroup
+    :direction="direction"
+    :auto-save-id="autoSaveId"
+    :keyboard-resize-by="keyboardResizeBy"
+    :storage="storage"
+    v-bind="rootProps"
+    @layout="(sizes) => emit('layout', sizes)"
+  >
+    <slot />
+  </SplitterGroup>
+</template>

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

@@ -0,0 +1,41 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SplitterThemeSlots } from '../theme/splitter.js';
+import type { UiProp } from '../utils/ui.js';
+import { splitterTheme } from '../theme/splitter.js';
+type SplitterVariants = VariantProps<typeof splitterTheme>;
+export interface SplitterStorage {
+    getItem: (name: string) => string | null;
+    setItem: (name: string, value: string) => void;
+}
+export interface SplitterProps {
+    /** @default 'horizontal' */
+    direction?: SplitterVariants['direction'];
+    /** Persists each panel's size under this key once set - via `storage` below, or Reka's own `localStorage`-backed default when that's left unset. */
+    autoSaveId?: string;
+    /** How many pixels an arrow-key press resizes the focused handle by. @default 10 */
+    keyboardResizeBy?: number;
+    /** Overrides where `autoSaveId` persists to - `localStorage` by default. */
+    storage?: SplitterStorage;
+    ui?: UiProp<SplitterThemeSlots>;
+}
+export interface SplitterEmits {
+    /** Fires on every layout change (drag, keyboard resize, collapse/expand) with each panel's own current size. */
+    layout: [sizes: number[]];
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SplitterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    layout: (sizes: number[]) => any;
+}, string, import("vue").PublicProps, Readonly<SplitterProps> & Readonly<{
+    onLayout?: ((sizes: number[]) => 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/SplitterPanel.d.vue.ts

@@ -0,0 +1,55 @@
+import type { SplitterPanelThemeSlots } from '../theme/splitter-panel.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = SplitterPanelSlots;
+export interface SplitterPanelProps {
+    /** Initial size - a percentage of the group's total by default (`sizeUnit="%"`), or pixels with `sizeUnit="px"`. */
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    /** How wide/tall the panel stays once collapsed - `0` hides it entirely. */
+    collapsedSize?: number;
+    /** Whether dragging past `minSize` snaps the panel fully closed instead of stopping there. */
+    collapsible?: boolean;
+    /** @default '%' */
+    sizeUnit?: 'px' | '%';
+    /** Where this panel sits among its siblings when they aren't already in that order in the template. */
+    order?: number;
+    ui?: UiProp<SplitterPanelThemeSlots>;
+}
+export interface SplitterPanelEmits {
+    collapse: [];
+    expand: [];
+    resize: [size: number];
+}
+export interface SplitterPanelSlots {
+    default?: (props: {
+        isCollapsed: boolean;
+        isExpanded: boolean;
+        collapse: () => void;
+        expand: () => void;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<SplitterPanelProps, {
+    collapse: () => void | undefined;
+    expand: () => void | undefined;
+    resize: (size: number) => void | undefined;
+    getSize: () => number | undefined;
+    isCollapsed: import("vue").ComputedRef<boolean>;
+    isExpanded: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resize: (size: number) => any;
+    collapse: () => any;
+    expand: () => any;
+}, string, import("vue").PublicProps, Readonly<SplitterPanelProps> & Readonly<{
+    onResize?: ((size: number) => any) | undefined;
+    onCollapse?: (() => any) | undefined;
+    onExpand?: (() => 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/SplitterPanel.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { SplitterPanel as RekaSplitterPanel } from "reka-ui";
+import { computed, ref } from "vue";
+import { splitterPanelTheme } from "../theme/splitter-panel";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  defaultSize: { type: Number, required: false },
+  minSize: { type: Number, required: false },
+  maxSize: { type: Number, required: false },
+  collapsedSize: { type: Number, required: false },
+  collapsible: { type: Boolean, required: false },
+  sizeUnit: { type: String, required: false },
+  order: { type: Number, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["collapse", "expand", "resize"]);
+defineSlots();
+const panelRef = ref();
+defineExpose({
+  collapse: () => panelRef.value?.collapse(),
+  expand: () => panelRef.value?.expand(),
+  resize: (size) => panelRef.value?.resize(size),
+  getSize: () => panelRef.value?.getSize(),
+  isCollapsed: computed(() => panelRef.value?.isCollapsed ?? false),
+  isExpanded: computed(() => panelRef.value?.isExpanded ?? true)
+});
+const theme = useComponentTheme("splitterPanel", splitterPanelTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <RekaSplitterPanel
+    ref="panelRef"
+    :default-size="defaultSize"
+    :min-size="minSize"
+    :max-size="maxSize"
+    :collapsed-size="collapsedSize"
+    :collapsible="collapsible"
+    :size-unit="sizeUnit"
+    :order="order"
+    v-bind="rootProps"
+    @collapse="emit('collapse')"
+    @expand="emit('expand')"
+    @resize="(size) => emit('resize', size)"
+  >
+    <template #default="{ isCollapsed, isExpanded, collapse, expand }">
+      <slot :is-collapsed="isCollapsed" :is-expanded="isExpanded" :collapse="collapse" :expand="expand" />
+    </template>
+  </RekaSplitterPanel>
+</template>

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

@@ -0,0 +1,55 @@
+import type { SplitterPanelThemeSlots } from '../theme/splitter-panel.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = SplitterPanelSlots;
+export interface SplitterPanelProps {
+    /** Initial size - a percentage of the group's total by default (`sizeUnit="%"`), or pixels with `sizeUnit="px"`. */
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    /** How wide/tall the panel stays once collapsed - `0` hides it entirely. */
+    collapsedSize?: number;
+    /** Whether dragging past `minSize` snaps the panel fully closed instead of stopping there. */
+    collapsible?: boolean;
+    /** @default '%' */
+    sizeUnit?: 'px' | '%';
+    /** Where this panel sits among its siblings when they aren't already in that order in the template. */
+    order?: number;
+    ui?: UiProp<SplitterPanelThemeSlots>;
+}
+export interface SplitterPanelEmits {
+    collapse: [];
+    expand: [];
+    resize: [size: number];
+}
+export interface SplitterPanelSlots {
+    default?: (props: {
+        isCollapsed: boolean;
+        isExpanded: boolean;
+        collapse: () => void;
+        expand: () => void;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<SplitterPanelProps, {
+    collapse: () => void | undefined;
+    expand: () => void | undefined;
+    resize: (size: number) => void | undefined;
+    getSize: () => number | undefined;
+    isCollapsed: import("vue").ComputedRef<boolean>;
+    isExpanded: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resize: (size: number) => any;
+    collapse: () => any;
+    expand: () => any;
+}, string, import("vue").PublicProps, Readonly<SplitterPanelProps> & Readonly<{
+    onResize?: ((size: number) => any) | undefined;
+    onCollapse?: (() => any) | undefined;
+    onExpand?: (() => 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/SplitterResizeHandle.d.vue.ts

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SplitterResizeHandleThemeSlots } from '../theme/splitter-resize-handle.js';
+import type { UiProp } from '../utils/ui.js';
+import { splitterResizeHandleTheme } from '../theme/splitter-resize-handle.js';
+type SplitterResizeHandleVariants = VariantProps<typeof splitterResizeHandleTheme>;
+export interface SplitterResizeHandleProps {
+    /** Match the parent Splitter's own `direction` - this isn't read from it automatically. @default 'horizontal' */
+    direction?: SplitterResizeHandleVariants['direction'];
+    disabled?: boolean;
+    ui?: UiProp<SplitterResizeHandleThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<SplitterResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SplitterResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/SplitterResizeHandle.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { SplitterResizeHandle as RekaSplitterResizeHandle } from "reka-ui";
+import { computed } from "vue";
+import { splitterResizeHandleTheme } from "../theme/splitter-resize-handle";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  direction: { type: null, required: false, default: "horizontal" },
+  disabled: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("splitterResizeHandle", splitterResizeHandleTheme);
+const ui = computed(() => theme.value({ direction: props.direction }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const lineProps = computed(() => resolveSlot(ui.value.line, props.ui?.line));
+</script>
+
+<template>
+  <RekaSplitterResizeHandle :disabled="disabled" v-bind="rootProps">
+    <div v-bind="lineProps" />
+  </RekaSplitterResizeHandle>
+</template>