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

package/dist/input/Input.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/Input-DOeNoniw.js";

package/dist/input/PasswordInput.vue.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    hidePasswordLabel: string;
+    showPasswordLabel: string;
+    class?: HTMLAttributes['class'];
+    disabled?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+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: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/input/PasswordInput.vue.js

@@ -0,0 +1,66 @@
+import { t as InputGroup_default } from "../shared/InputGroup-BYt6BWpk.js";
+import { t as InputGroupAddon_default } from "../shared/InputGroupAddon-B1cn7czs.js";
+import { t as InputGroupButton_default } from "../shared/InputGroupButton-tw5AYOoR.js";
+import { t as InputGroupInput_default } from "../shared/InputGroupInput-C_kkIxvY.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, ref, unref, useModel, withCtx } from "vue";
+// src/components/input/PasswordInput.vue
+var PasswordInput_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "PasswordInput",
+	props: /*@__PURE__*/ mergeModels({
+		hidePasswordLabel: {},
+		showPasswordLabel: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const visible = ref(false);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(InputGroup_default), { class: normalizeClass(__props.class) }, {
+				default: withCtx(() => [createVNode(unref(InputGroupInput_default), mergeProps({
+					modelValue: modelValue.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
+				}, _ctx.$attrs, {
+					type: visible.value ? "text" : "password",
+					disabled: __props.disabled
+				}), null, 16, [
+					"modelValue",
+					"type",
+					"disabled"
+				]), createVNode(unref(InputGroupAddon_default), { align: "inline-end" }, {
+					default: withCtx(() => [createVNode(unref(InputGroupButton_default), {
+						size: "icon-sm",
+						disabled: __props.disabled,
+						"aria-label": visible.value ? __props.hidePasswordLabel : __props.showPasswordLabel,
+						"aria-pressed": visible.value,
+						onClick: _cache[1] || (_cache[1] = ($event) => visible.value = !visible.value)
+					}, {
+						default: withCtx(() => [createElementVNode("i", { class: normalizeClass(visible.value ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]") }, null, 2)]),
+						_: 1
+					}, 8, [
+						"disabled",
+						"aria-label",
+						"aria-pressed"
+					])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["class"]);
+		};
+	}
+});
+export { PasswordInput_default as default };

package/dist/input-group/InputGroup.vue.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __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/input-group/InputGroup.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/InputGroup-BYt6BWpk.js";

package/dist/input-group/InputGroupAddon.vue.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'vue';
+import { InputGroupAddonVariants } from './inputGroup.variants';
+type __VLS_Props = {
+    align?: InputGroupAddonVariants['align'];
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __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/input-group/InputGroupAddon.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/InputGroupAddon-B1cn7czs.js";

package/dist/input-group/InputGroupButton.vue.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'vue';
+import { ButtonVariants } from '@comfyorg/design-system/button.variants';
+import { InputGroupButtonVariants } from './inputGroup.variants';
+type __VLS_Props = {
+    variant?: ButtonVariants['variant'];
+    size?: InputGroupButtonVariants['size'];
+    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, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & 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/input-group/InputGroupButton.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/InputGroupButton-tw5AYOoR.js";

package/dist/input-group/InputGroupInput.vue.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+type __VLS_ModelProps = {
+    modelValue?: string | 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: string | number | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/input-group/InputGroupInput.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/InputGroupInput-C_kkIxvY.js";

package/dist/input-group/inputGroup.variants.d.ts

@@ -0,0 +1,21 @@
+import { VariantProps } from 'cva';
+export declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-start" | "inline-end" | undefined;
+} & ({
+    class?: import('cva').ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import('cva').ClassValue;
+})) | undefined) => string;
+export type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
+export declare const inputGroupButtonVariants: (props?: ({
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | undefined;
+} & ({
+    class?: import('cva').ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import('cva').ClassValue;
+})) | undefined) => string;
+export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;

package/dist/input-group/inputGroup.variants.js

@@ -0,0 +1,21 @@
+import { cva } from "cva";
+// src/components/input-group/inputGroup.variants.ts
+var inputGroupAddonVariants = cva({
+	base: "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-50",
+	variants: { align: {
+		"inline-start": "order-first pl-3 has-[>button]:pl-1",
+		"inline-end": "order-last pr-3 has-[>button]:pr-1"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+var inputGroupButtonVariants = cva({
+	base: "flex items-center gap-2 text-sm",
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-sm px-2",
+		sm: "h-8 gap-1.5 rounded-md px-2.5",
+		"icon-xs": "size-6 rounded-sm p-0",
+		"icon-sm": "size-8 p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+export { inputGroupAddonVariants, inputGroupButtonVariants };

package/dist/knob/Knob.vue.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    disabled?: boolean;
+    max?: number;
+    min?: number;
+    step?: number;
+};
+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/knob/Knob.vue.js

@@ -0,0 +1,122 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, openBlock, unref, useModel, useTemplateRef } from "vue";
+// src/components/knob/Knob.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"tabindex",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-disabled"
+];
+var _hoisted_2 = {
+	viewBox: "0 0 32 32",
+	class: "size-full rotate-[-225deg]"
+};
+var _hoisted_3 = ["stroke-dashoffset"];
+// src/components/knob/Knob.vue
+var Knob_default = /* @__PURE__ */ defineComponent({
+	__name: "Knob",
+	props: /*@__PURE__*/ mergeModels({
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		max: { default: 100 },
+		min: { default: 0 },
+		step: { default: 1 }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const root = useTemplateRef("root");
+		const progress = computed(() => __props.max === __props.min ? 0 : (modelValue.value - __props.min) / (__props.max - __props.min));
+		const dashOffset = computed(() => 75 * (1 - progress.value));
+		function setValue(value) {
+			if (__props.disabled) return;
+			const stepped = __props.step ? Math.round((value - __props.min) / __props.step) * __props.step + __props.min : value;
+			modelValue.value = Math.min(__props.max, Math.max(__props.min, stepped));
+		}
+		function updateFromPointer(event) {
+			const bounds = root.value?.getBoundingClientRect();
+			if (!bounds) return;
+			const x = event.clientX - bounds.left - bounds.width / 2;
+			const y = event.clientY - bounds.top - bounds.height / 2;
+			const clockwise = (Math.atan2(y, x) * 180 / Math.PI + 225 + 360) % 360;
+			const position = clockwise > 315 ? 0 : clockwise / 270;
+			setValue(__props.min + position * (__props.max - __props.min));
+		}
+		function onPointerDown(event) {
+			root.value?.setPointerCapture(event.pointerId);
+			updateFromPointer(event);
+		}
+		function keyboardTarget(key) {
+			switch (key) {
+				case "ArrowUp":
+				case "ArrowRight": return modelValue.value + __props.step;
+				case "ArrowDown":
+				case "ArrowLeft": return modelValue.value - __props.step;
+				case "PageUp": return modelValue.value + 10 * __props.step;
+				case "PageDown": return modelValue.value - 10 * __props.step;
+				case "Home": return __props.min;
+				case "End": return __props.max;
+			}
+		}
+		function onKeydown(event) {
+			const target = keyboardTarget(event.key);
+			if (target === void 0) return;
+			event.preventDefault();
+			setValue(target);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				role: "slider",
+				tabindex: __props.disabled ? -1 : 0,
+				"aria-valuemin": __props.min,
+				"aria-valuemax": __props.max,
+				"aria-valuenow": modelValue.value,
+				"aria-disabled": __props.disabled || void 0,
+				class: normalizeClass(unref(cn)("size-12 cursor-pointer touch-none outline-none", __props.disabled && "cursor-not-allowed opacity-50", __props.class)),
+				onKeydown,
+				onPointerdown: onPointerDown,
+				onPointermove: _cache[0] || (_cache[0] = (event) => root.value?.hasPointerCapture(event.pointerId) && updateFromPointer(event))
+			}, [(openBlock(), createElementBlock("svg", _hoisted_2, [_cache[1] || (_cache[1] = createElementVNode("circle", {
+				"data-testid": "knob-track",
+				cx: "16",
+				cy: "16",
+				r: "12",
+				pathLength: "100",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "3",
+				"stroke-dasharray": "75 25",
+				class: "text-secondary"
+			}, null, -1)), createElementVNode("circle", {
+				"data-testid": "knob-value",
+				cx: "16",
+				cy: "16",
+				r: "12",
+				pathLength: "100",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "3",
+				"stroke-linecap": "round",
+				"stroke-dasharray": "75 100",
+				"stroke-dashoffset": dashOffset.value,
+				class: "text-primary"
+			}, null, 8, _hoisted_3)]))], 42, _hoisted_1);
+		};
+	}
+});
+export { Knob_default as default };

package/dist/label/Label.vue.d.ts

@@ -0,0 +1,18 @@
+import { LabelProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = LabelProps & {
+    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, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & 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/label/Label.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/Label-kwhWNR2P.js";

package/dist/layout/BaseModalLayout.vue.d.ts

@@ -0,0 +1,67 @@
+import { ButtonVariants } from '@comfyorg/design-system/button.variants';
+declare const SIZE_CLASSES: {
+    readonly md: "h-[80vh] w-[90vw] max-w-[1400px]";
+    readonly lg: "h-[80vh] max-h-[1026px] w-[90vw] max-w-[1280px] min-[1450px]:max-w-[1724px] min-[3000px]:max-h-[1320px] min-[3000px]:max-w-[2200px]";
+};
+type ModalSize = keyof typeof SIZE_CLASSES;
+type ContentPadding = 'default' | 'compact' | 'none';
+type HeaderPadding = 'default' | 'symmetric';
+type __VLS_Props = {
+    contentTitle: string;
+    labels: {
+        showLeftPanel: string;
+        hideLeftPanel: string;
+        showRightPanel: string;
+        hideRightPanel: string;
+        close: string;
+    };
+    rightPanelTitle?: string;
+    size?: ModalSize;
+    leftPanelWidth?: string;
+    contentPadding?: ContentPadding;
+    headerPadding?: HeaderPadding;
+    closeButtonVariant?: ButtonVariants['variant'];
+    closeIcon?: string;
+};
+type __VLS_ModelProps = {
+    'rightPanelOpen'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_11: {}, __VLS_21: {}, __VLS_23: {}, __VLS_41: {}, __VLS_49: {}, __VLS_51: {}, __VLS_53: {}, __VLS_71: {};
+type __VLS_Slots = {} & {
+    leftPanelHeaderTitle?: (props: typeof __VLS_1) => any;
+} & {
+    leftPanel?: (props: typeof __VLS_11) => any;
+} & {
+    header?: (props: typeof __VLS_21) => any;
+} & {
+    'header-right-area'?: (props: typeof __VLS_23) => any;
+} & {
+    contentFilter?: (props: typeof __VLS_41) => any;
+} & {
+    content?: (props: typeof __VLS_49) => any;
+} & {
+    rightPanelHeaderTitle?: (props: typeof __VLS_51) => any;
+} & {
+    rightPanelHeaderActions?: (props: typeof __VLS_53) => any;
+} & {
+    rightPanel?: (props: typeof __VLS_71) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    getContentScrollTop: () => number;
+    setContentScrollTop: (scrollTop: number) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+    "update:rightPanelOpen": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:rightPanelOpen"?: ((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/layout/BaseModalLayout.vue.js

@@ -0,0 +1,198 @@
+import { t as Button_default } from "../shared/Button-Dj_H5v3V.js";
+import { t as DialogTitle_default } from "../shared/DialogTitle-Chomvpgq.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useModel, useSlots, watch, withCtx, withKeys } from "vue";
+import { useBreakpoints } from "@vueuse/core";
+// src/components/layout/BaseModalLayout.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["inert", "aria-hidden"];
+var _hoisted_2 = {
+	"data-component-id": "LeftPanelHeader",
+	class: "flex h-18 w-full shrink-0 items-center-safe gap-2 pr-3 pl-6"
+};
+var _hoisted_3 = { class: "flex flex-col overflow-hidden bg-background" };
+var _hoisted_4 = { class: "flex min-h-0 flex-1 flex-col" };
+var _hoisted_5 = ["inert", "aria-hidden"];
+var _hoisted_6 = { class: "flex h-full w-72 min-w-72 flex-col bg-card" };
+var _hoisted_7 = {
+	"data-component-id": "RightPanelHeader",
+	class: "flex h-18 shrink-0 items-center gap-2 px-6"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "flex-1 text-base font-semibold select-none"
+};
+var _hoisted_9 = {
+	key: 1,
+	class: "flex-1"
+};
+var _hoisted_10 = { class: "min-h-0 flex-1 overflow-y-auto" };
+// src/components/layout/BaseModalLayout.vue
+var BaseModalLayout_default = /* @__PURE__ */ defineComponent({
+	__name: "BaseModalLayout",
+	props: /*@__PURE__*/ mergeModels({
+		contentTitle: {},
+		labels: {},
+		rightPanelTitle: {},
+		size: { default: "lg" },
+		leftPanelWidth: { default: "14rem" },
+		contentPadding: { default: "default" },
+		headerPadding: { default: "default" },
+		closeButtonVariant: {},
+		closeIcon: { default: "icon-[lucide--x]" }
+	}, {
+		"rightPanelOpen": {
+			type: Boolean,
+			default: false
+		},
+		"rightPanelOpenModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["close"], ["update:rightPanelOpen"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const SIZE_CLASSES = {
+			md: "h-[80vh] w-[90vw] max-w-[1400px]",
+			lg: "h-[80vh] max-h-[1026px] w-[90vw] max-w-[1280px] min-[1450px]:max-w-[1724px] min-[3000px]:max-h-[1320px] min-[3000px]:max-w-[2200px]"
+		};
+		const emit = __emit;
+		const sizeClasses = computed(() => SIZE_CLASSES[__props.size]);
+		const isRightPanelOpen = useModel(__props, "rightPanelOpen");
+		const slots = useSlots();
+		const hasLeftPanel = computed(() => !!slots.leftPanel);
+		const hasRightPanel = computed(() => !!slots.rightPanel);
+		const notMobile = useBreakpoints({ md: 880 }).greater("md");
+		const isLeftPanelOpen = ref(true);
+		const mobileMenuOpen = ref(false);
+		const contentContainer = ref(null);
+		watch(notMobile, (isDesktop) => {
+			if (!isDesktop) mobileMenuOpen.value = false;
+		});
+		const showLeftPanel = computed(() => {
+			return notMobile.value ? isLeftPanelOpen.value : mobileMenuOpen.value;
+		});
+		const headerClass = computed(() => cn("flex w-full items-center justify-between gap-2", __props.headerPadding === "symmetric" ? "px-6 py-5" : "h-18 px-6"));
+		const headerContentClass = computed(() => cn("flex min-w-0 flex-1 gap-2", __props.headerPadding === "symmetric" && "min-h-10 items-center"));
+		const contentContainerClass = computed(() => cn("flex scrollbar-custom min-h-0 flex-1 flex-col overflow-y-auto", __props.contentPadding === "default" && "px-6 pt-0 pb-10", __props.contentPadding === "compact" && "px-6 pt-0 pb-2"));
+		const gridStyle = computed(() => ({ gridTemplateColumns: hasRightPanel.value ? `${hasLeftPanel.value && showLeftPanel.value ? __props.leftPanelWidth : "0rem"} 1fr ${isRightPanelOpen.value ? "18rem" : "0rem"}` : `${hasLeftPanel.value && showLeftPanel.value ? __props.leftPanelWidth : "0rem"} 1fr` }));
+		const toggleLeftPanel = () => {
+			if (notMobile.value) isLeftPanelOpen.value = !isLeftPanelOpen.value;
+			else mobileMenuOpen.value = !mobileMenuOpen.value;
+		};
+		const toggleRightPanel = () => {
+			isRightPanelOpen.value = !isRightPanelOpen.value;
+		};
+		function handleEscape(event) {
+			const target = event.target;
+			if (!(target instanceof HTMLElement)) return;
+			if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target.isContentEditable) return;
+			if (isRightPanelOpen.value) {
+				event.stopPropagation();
+				isRightPanelOpen.value = false;
+			}
+		}
+		__expose({
+			getContentScrollTop: () => contentContainer.value?.scrollTop ?? 0,
+			setContentScrollTop: (scrollTop) => {
+				if (contentContainer.value) contentContainer.value.scrollTop = scrollTop;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(cn)("relative overflow-hidden rounded-2xl border bg-background shadow-lg", sizeClasses.value)),
+				onKeydownCapture: withKeys(handleEscape, ["esc"])
+			}, [createElementVNode("div", {
+				class: "grid size-full transition-[grid-template-columns] duration-300 ease-out",
+				style: normalizeStyle(gridStyle.value)
+			}, [
+				createElementVNode("nav", {
+					class: "flex h-full flex-col overflow-hidden bg-card",
+					inert: !showLeftPanel.value,
+					"aria-hidden": !showLeftPanel.value
+				}, [createElementVNode("header", _hoisted_2, [renderSlot(_ctx.$slots, "leftPanelHeaderTitle"), !unref(notMobile) && showLeftPanel.value ? (openBlock(), createBlock(unref(Button_default), {
+					key: 0,
+					size: "lg",
+					class: "ml-auto w-10 p-0",
+					"aria-label": __props.labels.hideLeftPanel,
+					onClick: toggleLeftPanel
+				}, {
+					default: withCtx(() => [..._cache[2] || (_cache[2] = [createElementVNode("i", { class: "icon-[lucide--panel-left-close]" }, null, -1)])]),
+					_: 1
+				}, 8, ["aria-label"])) : createCommentVNode("", true)]), renderSlot(_ctx.$slots, "leftPanel")], 8, _hoisted_1),
+				createElementVNode("div", _hoisted_3, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", {
+					key: 0,
+					class: normalizeClass(headerClass.value)
+				}, [
+					createElementVNode("div", { class: normalizeClass(headerContentClass.value) }, [!unref(notMobile) && !showLeftPanel.value ? (openBlock(), createBlock(unref(Button_default), {
+						key: 0,
+						size: "lg",
+						class: "w-10 p-0",
+						"aria-label": __props.labels.showLeftPanel,
+						onClick: toggleLeftPanel
+					}, {
+						default: withCtx(() => [..._cache[3] || (_cache[3] = [createElementVNode("i", { class: "icon-[lucide--panel-left]" }, null, -1)])]),
+						_: 1
+					}, 8, ["aria-label"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "header")], 2),
+					renderSlot(_ctx.$slots, "header-right-area"),
+					!isRightPanelOpen.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [hasRightPanel.value ? (openBlock(), createBlock(unref(Button_default), {
+						key: 0,
+						size: "lg",
+						class: "w-10 p-0",
+						"aria-label": __props.labels.showRightPanel,
+						onClick: toggleRightPanel
+					}, {
+						default: withCtx(() => [..._cache[4] || (_cache[4] = [createElementVNode("i", { class: "icon-[lucide--panel-right]" }, null, -1)])]),
+						_: 1
+					}, 8, ["aria-label"])) : createCommentVNode("", true), createVNode(unref(Button_default), {
+						size: "lg",
+						class: "w-10",
+						variant: __props.closeButtonVariant,
+						"aria-label": __props.labels.close,
+						onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
+					}, {
+						default: withCtx(() => [createElementVNode("i", { class: normalizeClass(__props.closeIcon) }, null, 2)]),
+						_: 1
+					}, 8, ["variant", "aria-label"])], 64)) : createCommentVNode("", true)
+				], 2)) : createCommentVNode("", true), createElementVNode("main", _hoisted_4, [
+					renderSlot(_ctx.$slots, "contentFilter"),
+					createVNode(unref(DialogTitle_default), { class: normalizeClass(unref(cn)("m-0 px-6 pt-2 pb-6 text-2xl font-normal capitalize select-none", hasLeftPanel.value && "sr-only")) }, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.contentTitle), 1)]),
+						_: 1
+					}, 8, ["class"]),
+					createElementVNode("div", {
+						ref_key: "contentContainer",
+						ref: contentContainer,
+						"data-testid": "base-modal-content",
+						class: normalizeClass(contentContainerClass.value)
+					}, [renderSlot(_ctx.$slots, "content")], 2)
+				])]),
+				hasRightPanel.value ? (openBlock(), createElementBlock("aside", {
+					key: 0,
+					class: "overflow-hidden",
+					inert: !isRightPanelOpen.value,
+					"aria-hidden": !isRightPanelOpen.value
+				}, [createElementVNode("div", _hoisted_6, [createElementVNode("header", _hoisted_7, [
+					__props.rightPanelTitle ? (openBlock(), createElementBlock("h2", _hoisted_8, toDisplayString(__props.rightPanelTitle), 1)) : (openBlock(), createElementBlock("div", _hoisted_9, [renderSlot(_ctx.$slots, "rightPanelHeaderTitle")])),
+					renderSlot(_ctx.$slots, "rightPanelHeaderActions"),
+					createVNode(unref(Button_default), {
+						size: "lg",
+						class: "w-10 p-0",
+						"aria-label": __props.labels.hideRightPanel,
+						onClick: toggleRightPanel
+					}, {
+						default: withCtx(() => [..._cache[5] || (_cache[5] = [createElementVNode("i", { class: "icon-[lucide--panel-right-close]" }, null, -1)])]),
+						_: 1
+					}, 8, ["aria-label"]),
+					createVNode(unref(Button_default), {
+						size: "lg",
+						class: "w-10 p-0",
+						variant: __props.closeButtonVariant,
+						"aria-label": __props.labels.close,
+						onClick: _cache[1] || (_cache[1] = ($event) => emit("close"))
+					}, {
+						default: withCtx(() => [createElementVNode("i", { class: normalizeClass(__props.closeIcon) }, null, 2)]),
+						_: 1
+					}, 8, ["variant", "aria-label"])
+				]), createElementVNode("div", _hoisted_10, [renderSlot(_ctx.$slots, "rightPanel")])])], 8, _hoisted_5)) : createCommentVNode("", true)
+			], 4)], 34);
+		};
+	}
+});
+export { BaseModalLayout_default as default };

package/dist/media/AudioPreview.vue.d.ts

@@ -0,0 +1,6 @@
+interface AudioPreviewProps {
+    readonly audioUrls: readonly string[];
+}
+declare const __VLS_export: import('vue').DefineComponent<AudioPreviewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AudioPreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;