@comfyorg/design-system 1.1.0 → 1.3.0-alpha.0

package/dist/single-select/SingleSelect.vue.js

@@ -0,0 +1,185 @@
+import { a as selectItemVariants, o as selectTriggerVariants, r as selectDropdownClass, s as stopEscapeToDocument, t as selectContentClass } from "../shared/select.variants-cRXaATWS.js";
+import { useAttrsClass } from "../composables/useAttrsClass.js";
+import { usePopoverSizing } from "../composables/usePopoverSizing.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { t as SearchableSingleSelect_default } from "../shared/SearchableSingleSelect-DQauLQWW.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
+import { SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectPortal, SelectRoot, SelectTrigger, SelectValue, SelectViewport } from "reka-ui";
+// src/components/single-select/SingleSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "icon-[lucide--loader-circle] animate-spin text-muted-foreground"
+};
+// src/components/single-select/SingleSelect.vue
+var SingleSelect_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "SingleSelect",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		accessibleLabel: {},
+		options: { default: () => [] },
+		size: { default: "lg" },
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		searchPlaceholder: {},
+		listMaxHeight: { default: "28rem" },
+		popoverMinWidth: {},
+		popoverMaxWidth: {},
+		contentStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		searchable: {
+			type: Boolean,
+			default: false
+		},
+		searchLabel: {},
+		emptyText: {}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const { attrsClass, attrsWithoutClass } = useAttrsClass();
+		const selectedItem = useModel(__props, "modelValue");
+		const isOpen = ref(false);
+		function onContentKeydown(event) {
+			if (event.key === "Escape") {
+				stopEscapeToDocument(event);
+				isOpen.value = false;
+			}
+		}
+		const optionStyle = usePopoverSizing({
+			minWidth: __props.popoverMinWidth,
+			maxWidth: __props.popoverMaxWidth
+		});
+		return (_ctx, _cache) => {
+			return __props.searchable && __props.searchLabel !== void 0 && __props.emptyText !== void 0 ? (openBlock(), createBlock(SearchableSingleSelect_default, mergeProps({
+				key: 0,
+				modelValue: selectedItem.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedItem.value = $event)
+			}, unref(attrsWithoutClass), {
+				class: unref(attrsClass),
+				label: __props.label,
+				"accessible-label": __props.accessibleLabel,
+				"search-label": __props.searchLabel,
+				"empty-text": __props.emptyText,
+				options: __props.options,
+				size: __props.size,
+				invalid: __props.invalid,
+				loading: __props.loading,
+				disabled: __props.disabled,
+				"search-placeholder": __props.searchPlaceholder,
+				"list-max-height": __props.listMaxHeight,
+				"popover-min-width": __props.popoverMinWidth,
+				"popover-max-width": __props.popoverMaxWidth,
+				"content-style": __props.contentStyle
+			}), {
+				icon: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+				_: 3
+			}, 16, [
+				"modelValue",
+				"class",
+				"label",
+				"accessible-label",
+				"search-label",
+				"empty-text",
+				"options",
+				"size",
+				"invalid",
+				"loading",
+				"disabled",
+				"search-placeholder",
+				"list-max-height",
+				"popover-min-width",
+				"popover-max-width",
+				"content-style"
+			])) : (openBlock(), createBlock(unref(SelectRoot), {
+				key: 1,
+				modelValue: selectedItem.value,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedItem.value = $event),
+				open: isOpen.value,
+				"onUpdate:open": _cache[2] || (_cache[2] = ($event) => isOpen.value = $event),
+				disabled: __props.disabled
+			}, {
+				default: withCtx(() => [createVNode(unref(SelectTrigger), mergeProps(unref(attrsWithoutClass), {
+					"aria-label": __props.accessibleLabel,
+					"aria-busy": __props.loading || void 0,
+					"aria-invalid": __props.invalid || void 0,
+					class: unref(cn)(unref(selectTriggerVariants)({
+						size: __props.size,
+						border: __props.invalid ? "invalid" : "none"
+					}), unref(attrsClass))
+				}), {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cn)("flex flex-1 items-center gap-2 overflow-hidden py-2 pl-2", __props.size === "md" ? "text-xs" : "text-sm")) }, [__props.loading ? (openBlock(), createElementBlock("i", _hoisted_1)) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1), createVNode(unref(SelectValue), {
+						placeholder: __props.label,
+						class: "truncate"
+					}, null, 8, ["placeholder"])], 2), createElementVNode("div", { class: normalizeClass(unref(selectDropdownClass)) }, [..._cache[3] || (_cache[3] = [createElementVNode("i", { class: "icon-[lucide--chevron-down] text-muted-foreground" }, null, -1)])], 2)]),
+					_: 3
+				}, 16, [
+					"aria-label",
+					"aria-busy",
+					"aria-invalid",
+					"class"
+				]), createVNode(unref(SelectPortal), null, {
+					default: withCtx(() => [createVNode(unref(SelectContent), {
+						position: "popper",
+						"side-offset": 8,
+						align: "start",
+						style: normalizeStyle([unref(optionStyle), __props.contentStyle]),
+						class: normalizeClass(unref(cn)(unref(selectContentClass), "min-w-(--reka-select-trigger-width)")),
+						onKeydown: onContentKeydown
+					}, {
+						default: withCtx(() => [createVNode(unref(SelectViewport), {
+							style: normalizeStyle({ maxHeight: `min(${__props.listMaxHeight}, 50vh)` }),
+							class: "scrollbar-custom w-full"
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (opt) => {
+								return openBlock(), createBlock(unref(SelectItem), {
+									key: opt.value,
+									value: opt.value,
+									class: normalizeClass(unref(selectItemVariants)({ layout: "single" }))
+								}, {
+									default: withCtx(() => [createVNode(unref(SelectItemText), { class: "truncate" }, {
+										default: withCtx(() => [createTextVNode(toDisplayString(opt.name), 1)]),
+										_: 2
+									}, 1024), createVNode(unref(SelectItemIndicator), { class: "flex shrink-0 items-center justify-center" }, {
+										default: withCtx(() => [..._cache[4] || (_cache[4] = [createElementVNode("i", {
+											class: "icon-[lucide--check] text-foreground",
+											"aria-hidden": "true"
+										}, null, -1)])]),
+										_: 1
+									})]),
+									_: 2
+								}, 1032, ["value", "class"]);
+							}), 128))]),
+							_: 1
+						}, 8, ["style"])]),
+						_: 1
+					}, 8, ["style", "class"])]),
+					_: 1
+				})]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"open",
+				"disabled"
+			]));
+		};
+	}
+});
+export { SingleSelect_default as default };

package/dist/single-select/types.d.ts

@@ -0,0 +1,25 @@
+import { StyleValue } from 'vue';
+import { SelectOption } from '@comfyorg/design-system/lib/select/types';
+export type SingleSelectProps = SingleSelectBaseProps & ({
+    searchable?: false;
+    searchLabel?: string;
+    emptyText?: string;
+} | {
+    searchable: boolean;
+    searchLabel: string;
+    emptyText: string;
+});
+export interface SingleSelectBaseProps {
+    label?: string;
+    accessibleLabel: string;
+    options?: SelectOption<string | number>[];
+    size?: 'lg' | 'md';
+    invalid?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    searchPlaceholder?: string;
+    listMaxHeight?: string;
+    popoverMinWidth?: string;
+    popoverMaxWidth?: string;
+    contentStyle?: StyleValue;
+}

package/dist/skeleton/Skeleton.vue.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/skeleton/Skeleton.vue.js

@@ -0,0 +1,22 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
+// src/components/skeleton/Skeleton.vue
+var Skeleton_default = /* @__PURE__ */ defineComponent({
+	__name: "Skeleton",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-slot": "skeleton",
+				class: normalizeClass(unref(cn)("animate-pulse rounded-md bg-secondary", __props.class))
+			}, null, 2);
+		};
+	}
+});
+export { Skeleton_default as default };

package/dist/slider/GradientSlider.vue.d.ts

@@ -0,0 +1,20 @@
+import { ColorStop } from './gradients';
+type __VLS_Props = {
+    stops: ColorStop[];
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    ariaLabel?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/slider/GradientSlider.vue.js

@@ -0,0 +1,100 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { computed, createBlock, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, ref, unref, useModel, withCtx } from "vue";
+import { SliderRoot, SliderThumb, SliderTrack } from "reka-ui";
+// src/components/slider/gradients.ts
+function stopsToGradient(stops) {
+	if (!stops.length) return "transparent";
+	return `linear-gradient(to right, ${stops.map(({ offset, color: [r, g, b] }) => `rgb(${r},${g},${b}) ${offset * 100}%`).join(", ")})`;
+}
+function interpolateStops(stops, t) {
+	if (!stops.length) return "transparent";
+	const clamped = Math.max(0, Math.min(1, t));
+	if (clamped <= stops[0].offset) {
+		const [r, g, b] = stops[0].color;
+		return `rgb(${r},${g},${b})`;
+	}
+	for (let i = 0; i < stops.length - 1; i++) {
+		const { offset: o1, color: [r1, g1, b1] } = stops[i];
+		const { offset: o2, color: [r2, g2, b2] } = stops[i + 1];
+		if (clamped >= o1 && clamped <= o2) {
+			const f = o2 === o1 ? 0 : (clamped - o1) / (o2 - o1);
+			return `rgb(${Math.round(r1 + (r2 - r1) * f)},${Math.round(g1 + (g2 - g1) * f)},${Math.round(b1 + (b2 - b1) * f)})`;
+		}
+	}
+	const [r, g, b] = stops[stops.length - 1].color;
+	return `rgb(${r},${g},${b})`;
+}
+// src/components/slider/GradientSlider.vue
+var GradientSlider_default = /* @__PURE__ */ defineComponent({
+	__name: "GradientSlider",
+	props: /*@__PURE__*/ mergeModels({
+		stops: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const sliderValue = computed({
+			get: () => [modelValue.value],
+			set: (v) => {
+				if (v.length) modelValue.value = v[0];
+			}
+		});
+		const gradient = computed(() => stopsToGradient(__props.stops));
+		const thumbColor = computed(() => {
+			const t = __props.max === __props.min ? 0 : (modelValue.value - __props.min) / (__props.max - __props.min);
+			return interpolateStops(__props.stops, t);
+		});
+		const pressed = ref(false);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SliderRoot), {
+				modelValue: sliderValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sliderValue.value = $event),
+				min: __props.min,
+				max: __props.max,
+				step: __props.step,
+				disabled: __props.disabled,
+				class: normalizeClass(unref(cn)("relative flex w-full touch-none items-center select-none", "data-disabled:opacity-50")),
+				style: { "--reka-slider-thumb-transform": "translate(-50%, -50%)" },
+				onSlideStart: _cache[1] || (_cache[1] = ($event) => pressed.value = true),
+				onSlideMove: _cache[2] || (_cache[2] = ($event) => pressed.value = true),
+				onSlideEnd: _cache[3] || (_cache[3] = ($event) => pressed.value = false)
+			}, {
+				default: withCtx(() => [createVNode(unref(SliderTrack), {
+					class: normalizeClass(unref(cn)("relative h-2.5 w-full grow cursor-pointer overflow-visible rounded-full", "before:absolute before:-inset-2 before:block before:bg-transparent")),
+					style: normalizeStyle({ background: gradient.value })
+				}, {
+					default: withCtx(() => [createVNode(unref(SliderThumb), {
+						class: normalizeClass(unref(cn)("top-1/2 block size-4 shrink-0 cursor-grab rounded-full shadow-md ring-1 ring-black/25", "transition-[color,box-shadow,background-color]", "before:absolute before:-inset-1.5 before:block before:rounded-full before:bg-transparent", "hover:ring-2 hover:ring-black/40 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50", { "cursor-grabbing": pressed.value })),
+						style: normalizeStyle({ backgroundColor: thumbColor.value }),
+						"aria-label": __props.ariaLabel
+					}, null, 8, [
+						"class",
+						"style",
+						"aria-label"
+					])]),
+					_: 1
+				}, 8, ["class", "style"])]),
+				_: 1
+			}, 8, [
+				"modelValue",
+				"min",
+				"max",
+				"step",
+				"disabled",
+				"class"
+			]);
+		};
+	}
+});
+export { GradientSlider_default as default };

package/dist/slider/Slider.vue.d.ts

@@ -0,0 +1,16 @@
+import { SliderRootProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = SliderRootProps & {
+    class?: HTMLAttributes['class'];
+    rangeClass?: HTMLAttributes['class'];
+    thumbClass?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (payload: number[] | undefined) => any;
+    valueCommit: (payload: number[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: number[] | undefined) => any) | undefined;
+    onValueCommit?: ((payload: number[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/slider/Slider.vue.js

@@ -0,0 +1,86 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { Fragment, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, unref, withCtx } from "vue";
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+// src/components/slider/Slider.vue
+var Slider_default = /* @__PURE__ */ defineComponent({
+	__name: "Slider",
+	props: {
+		defaultValue: {},
+		modelValue: {},
+		disabled: { type: Boolean },
+		orientation: {},
+		dir: {},
+		inverted: { type: Boolean },
+		min: {},
+		max: {},
+		step: {},
+		minStepsBetweenThumbs: {},
+		thumbAlignment: {},
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		rangeClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		thumbClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue", "valueCommit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const pressed = ref(false);
+		const setPressed = (val) => {
+			pressed.value = val;
+		};
+		const emits = __emit;
+		const delegatedProps = reactiveOmit(props, "class", "rangeClass", "thumbClass");
+		const forwarded = useForwardPropsEmits(delegatedProps, emits);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SliderRoot), mergeProps({
+				"data-slot": "slider",
+				class: unref(cn)("relative flex w-full touch-none items-center select-none data-disabled:opacity-50", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", props.class)
+			}, unref(forwarded), {
+				onSlideStart: _cache[0] || (_cache[0] = () => setPressed(true)),
+				onSlideMove: _cache[1] || (_cache[1] = () => setPressed(true)),
+				onSlideEnd: _cache[2] || (_cache[2] = () => setPressed(false))
+			}), {
+				default: withCtx(({ modelValue }) => [createVNode(unref(SliderTrack), {
+					"data-slot": "slider-track",
+					class: normalizeClass(unref(cn)("relative grow overflow-hidden rounded-full bg-muted-foreground/20", "cursor-pointer overflow-visible", `before:absolute before:-inset-2 before:block before:bg-transparent`, "data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-0.5"))
+				}, {
+					default: withCtx(() => [createVNode(unref(SliderRange), {
+						"data-slot": "slider-range",
+						class: normalizeClass(unref(cn)("absolute bg-muted-foreground data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full", props.rangeClass))
+					}, null, 8, ["class"])]),
+					_: 1
+				}, 8, ["class"]), (openBlock(true), createElementBlock(Fragment, null, renderList(modelValue, (_, key) => {
+					return openBlock(), createBlock(unref(SliderThumb), {
+						key,
+						"data-slot": "slider-thumb",
+						class: normalizeClass(unref(cn)("block size-3.5 shrink-0 rounded-full bg-muted-foreground shadow-sm ring-foreground transition-[color,box-shadow]", "cursor-grab", "before:absolute before:-inset-1 before:block before:rounded-full before:bg-transparent", "hover:ring-2 focus-visible:ring-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50", { "cursor-grabbing": pressed.value }, props.thumbClass))
+					}, null, 8, ["class"]);
+				}), 128))]),
+				_: 1
+			}, 16, ["class"]);
+		};
+	}
+});
+export { Slider_default as default };

package/dist/slider/gradients.d.ts

@@ -0,0 +1,6 @@
+export interface ColorStop {
+    readonly offset: number;
+    readonly color: readonly [r: number, g: number, b: number];
+}
+export declare function stopsToGradient(stops: ColorStop[]): string;
+export declare function interpolateStops(stops: ColorStop[], t: number): string;

package/dist/spinner/Spinner.vue.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/spinner/Spinner.vue.js

@@ -0,0 +1,39 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, unref } from "vue";
+// src/components/spinner/Spinner.vue
+var Spinner_default = /* @__PURE__ */ defineComponent({
+	__name: "Spinner",
+	props: { class: {
+		type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		],
+		default: ""
+	} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", {
+				role: "progressbar",
+				class: normalizeClass(unref(cn)("size-6 animate-spin text-muted-foreground", __props.class)),
+				viewBox: "0 0 24 24",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg"
+			}, [..._cache[0] || (_cache[0] = [createElementVNode("circle", {
+				class: "opacity-25",
+				cx: "12",
+				cy: "12",
+				r: "10",
+				stroke: "currentColor",
+				"stroke-width": "4"
+			}, null, -1), createElementVNode("path", {
+				class: "opacity-75",
+				fill: "currentColor",
+				d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4Z"
+			}, null, -1)])], 2);
+		};
+	}
+});
+export { Spinner_default as default };

package/dist/splitter/SplitterGroup.vue.d.ts

@@ -0,0 +1,23 @@
+import { SplitterGroupProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = Omit<SplitterGroupProps, 'direction'> & {
+    direction?: SplitterGroupProps['direction'];
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    layout: (val: number[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLayout?: ((val: 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/splitter/SplitterGroup.vue.js

@@ -0,0 +1,38 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { SplitterGroup, useForwardPropsEmits } from "reka-ui";
+// src/components/splitter/SplitterGroup.vue
+var SplitterGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "SplitterGroup",
+	props: {
+		id: {},
+		autoSaveId: {},
+		keyboardResizeBy: {},
+		storage: {},
+		asChild: { type: Boolean },
+		as: {},
+		direction: { default: "horizontal" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["layout"],
+	setup(__props, { emit: __emit }) {
+		const restProps = createPropsRestProxy(__props, ["direction", "class"]);
+		const forwarded = useForwardPropsEmits(restProps, __emit);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SplitterGroup), mergeProps(unref(forwarded), {
+				direction: __props.direction,
+				class: unref(cn)("flex size-full", __props.direction === "vertical" && "flex-col", __props.class)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["direction", "class"]);
+		};
+	}
+});
+export { SplitterGroup_default as default };

package/dist/splitter/SplitterPanel.vue.d.ts

@@ -0,0 +1,26 @@
+import { SplitterPanelProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = SplitterPanelProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    resize: (size: number, prevSize: number | undefined) => any;
+    collapse: () => any;
+    expand: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onResize?: ((size: number, prevSize: number | undefined) => 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/splitter/SplitterPanel.vue.js

@@ -0,0 +1,43 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from "reka-ui";
+// src/components/splitter/SplitterPanel.vue
+var SplitterPanel_default = /* @__PURE__ */ defineComponent({
+	__name: "SplitterPanel",
+	props: {
+		collapsedSize: {},
+		collapsible: { type: Boolean },
+		defaultSize: {},
+		id: {},
+		maxSize: {},
+		minSize: {},
+		order: {},
+		sizeUnit: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: [
+		"collapse",
+		"expand",
+		"resize"
+	],
+	setup(__props, { emit: __emit }) {
+		const restProps = createPropsRestProxy(__props, ["class"]);
+		const forwarded = useForwardPropsEmits(restProps, __emit);
+		const { forwardRef } = useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SplitterPanel), mergeProps({ ref: unref(forwardRef) }, unref(forwarded), { class: unref(cn)("min-h-0 min-w-0", __props.class) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+export { SplitterPanel_default as default };