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

package/dist/message/Message.vue.d.ts

@@ -0,0 +1,50 @@
+import { HTMLAttributes } from 'vue';
+import { MessageVariants } from './message.variants';
+type __VLS_ModelProps = {
+    'visible'?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<({
+    severity?: MessageVariants["severity"];
+    class?: HTMLAttributes["class"];
+} & {
+    closable: true;
+    closeLabel: string;
+} & __VLS_ModelProps) | ({
+    severity?: MessageVariants["severity"];
+    class?: HTMLAttributes["class"];
+} & {
+    closable?: false;
+    closeLabel?: string;
+} & __VLS_ModelProps), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: (event: MouseEvent) => any;
+    "update:visible": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<({
+    severity?: MessageVariants["severity"];
+    class?: HTMLAttributes["class"];
+} & {
+    closable: true;
+    closeLabel: string;
+} & __VLS_ModelProps) | ({
+    severity?: MessageVariants["severity"];
+    class?: HTMLAttributes["class"];
+} & {
+    closable?: false;
+    closeLabel?: string;
+} & __VLS_ModelProps)> & Readonly<{
+    onClose?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:visible"?: ((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/message/Message.vue.js

@@ -0,0 +1,73 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { t as Button_default } from "../shared/Button-Dj_H5v3V.js";
+import { messageVariants } from "./message.variants.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
+// src/components/message/Message.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "shrink-0",
+	"aria-hidden": "true"
+};
+var _hoisted_2 = { class: "min-w-0 flex-1" };
+// src/components/message/Message.vue
+var Message_default = /* @__PURE__ */ defineComponent({
+	__name: "Message",
+	props: /*@__PURE__*/ mergeModels({
+		severity: {},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		},
+		closable: { type: Boolean },
+		closeLabel: {}
+	}, {
+		"visible": {
+			type: Boolean,
+			default: true
+		},
+		"visibleModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["close"], ["update:visible"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const visible = useModel(__props, "visible");
+		function close(event) {
+			visible.value = false;
+			emit("close", event);
+		}
+		return (_ctx, _cache) => {
+			return visible.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				role: "alert",
+				"aria-live": "assertive",
+				"aria-atomic": "true",
+				class: normalizeClass(unref(cn)(unref(messageVariants)({ severity: __props.severity }), __props.class))
+			}, [
+				_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")]),
+				__props.closable ? (openBlock(), createBlock(unref(Button_default), {
+					key: 1,
+					type: "button",
+					variant: "textonly",
+					size: "unset",
+					class: "size-6 shrink-0 p-0 text-current",
+					"aria-label": __props.closeLabel,
+					onClick: close
+				}, {
+					default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("i", {
+						class: "icon-[lucide--x]",
+						"aria-hidden": "true"
+					}, null, -1)])]),
+					_: 1
+				}, 8, ["aria-label"])) : createCommentVNode("", true)
+			], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+export { Message_default as default };

package/dist/message/message.variants.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'cva';
+export declare const messageVariants: (props?: ({
+    severity?: "error" | "warning" | "info" | "success" | "secondary" | undefined;
+} & ({
+    class?: import('cva').ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import('cva').ClassValue;
+})) | undefined) => string;
+export type MessageVariants = VariantProps<typeof messageVariants>;

package/dist/message/message.variants.js

@@ -0,0 +1,14 @@
+import { cva } from "cva";
+// src/components/message/message.variants.ts
+var messageVariants = cva({
+	base: "flex w-full items-start gap-2 rounded-lg border px-3 py-2.75 text-sm",
+	variants: { severity: {
+		error: "border-destructive/40 bg-destructive/10 text-foreground",
+		warning: "border-warning/50 bg-warning/15 text-foreground",
+		info: "border-primary/40 bg-primary/10 text-foreground",
+		success: "border-success/50 bg-success/15 text-foreground",
+		secondary: "border-border/50 bg-secondary text-foreground"
+	} },
+	defaultVariants: { severity: "info" }
+});
+export { messageVariants };

package/dist/multi-select/MultiSelect.vue.d.ts

@@ -0,0 +1,170 @@
+import { SelectOption } from '@comfyorg/design-system/lib/select/types';
+type __VLS_ModelProps = {
+    modelValue: SelectOption[];
+    'searchQuery'?: string;
+};
+declare var __VLS_15: {
+    selected: SelectOption[];
+};
+type __VLS_Slots = {} & {
+    value?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<(import('./types').MultiSelectBaseProps & {
+    showSearchBox?: false;
+    searchLabel?: string;
+} & {
+    showClearButton?: false;
+    clearAllLabel?: string;
+} & {
+    showSelectedCount?: false;
+    formatSelectedCount?: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox?: false;
+    searchLabel?: string;
+} & {
+    showClearButton?: false;
+    clearAllLabel?: string;
+} & {
+    showSelectedCount: boolean;
+    formatSelectedCount: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox?: false;
+    searchLabel?: string;
+} & {
+    showClearButton: boolean;
+    clearAllLabel: string;
+} & {
+    showSelectedCount?: false;
+    formatSelectedCount?: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox?: false;
+    searchLabel?: string;
+} & {
+    showClearButton: boolean;
+    clearAllLabel: string;
+} & {
+    showSelectedCount: boolean;
+    formatSelectedCount: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox: boolean;
+    searchLabel: string;
+} & {
+    showClearButton?: false;
+    clearAllLabel?: string;
+} & {
+    showSelectedCount?: false;
+    formatSelectedCount?: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox: boolean;
+    searchLabel: string;
+} & {
+    showClearButton?: false;
+    clearAllLabel?: string;
+} & {
+    showSelectedCount: boolean;
+    formatSelectedCount: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox: boolean;
+    searchLabel: string;
+} & {
+    showClearButton: boolean;
+    clearAllLabel: string;
+} & {
+    showSelectedCount?: false;
+    formatSelectedCount?: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox: boolean;
+    searchLabel: string;
+} & {
+    showClearButton: boolean;
+    clearAllLabel: string;
+} & {
+    showSelectedCount: boolean;
+    formatSelectedCount: (count: number) => string;
+} & __VLS_ModelProps), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: SelectOption[]) => any;
+    "update:searchQuery": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<(import('./types').MultiSelectBaseProps & {
+    showSearchBox?: false;
+    searchLabel?: string;
+} & {
+    showClearButton?: false;
+    clearAllLabel?: string;
+} & {
+    showSelectedCount?: false;
+    formatSelectedCount?: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox?: false;
+    searchLabel?: string;
+} & {
+    showClearButton?: false;
+    clearAllLabel?: string;
+} & {
+    showSelectedCount: boolean;
+    formatSelectedCount: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox?: false;
+    searchLabel?: string;
+} & {
+    showClearButton: boolean;
+    clearAllLabel: string;
+} & {
+    showSelectedCount?: false;
+    formatSelectedCount?: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox?: false;
+    searchLabel?: string;
+} & {
+    showClearButton: boolean;
+    clearAllLabel: string;
+} & {
+    showSelectedCount: boolean;
+    formatSelectedCount: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox: boolean;
+    searchLabel: string;
+} & {
+    showClearButton?: false;
+    clearAllLabel?: string;
+} & {
+    showSelectedCount?: false;
+    formatSelectedCount?: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox: boolean;
+    searchLabel: string;
+} & {
+    showClearButton?: false;
+    clearAllLabel?: string;
+} & {
+    showSelectedCount: boolean;
+    formatSelectedCount: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox: boolean;
+    searchLabel: string;
+} & {
+    showClearButton: boolean;
+    clearAllLabel: string;
+} & {
+    showSelectedCount?: false;
+    formatSelectedCount?: (count: number) => string;
+} & __VLS_ModelProps) | (import('./types').MultiSelectBaseProps & {
+    showSearchBox: boolean;
+    searchLabel: string;
+} & {
+    showClearButton: boolean;
+    clearAllLabel: string;
+} & {
+    showSelectedCount: boolean;
+    formatSelectedCount: (count: number) => string;
+} & __VLS_ModelProps)> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SelectOption[]) => any) | undefined;
+    "onUpdate:searchQuery"?: ((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/multi-select/MultiSelect.vue.js

@@ -0,0 +1,135 @@
+import { t as MultiSelectContent_default } from "../shared/MultiSelectContent-9xyBQKz3.js";
+import { t as MultiSelectTrigger_default } from "../shared/MultiSelectTrigger-DNySkpH9.js";
+import { useAttrsClass } from "../composables/useAttrsClass.js";
+import { usePopoverSizing } from "../composables/usePopoverSizing.js";
+import { createBlock, createSlots, createVNode, defineComponent, mergeModels, mergeProps, openBlock, ref, renderSlot, unref, useModel, withCtx } from "vue";
+import { ComboboxRoot } from "reka-ui";
+// src/components/multi-select/MultiSelect.vue
+var MultiSelect_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "MultiSelect",
+	props: /*@__PURE__*/ mergeModels({
+		accessibleLabel: {},
+		emptyText: {},
+		label: {},
+		options: { default: () => [] },
+		size: { default: "lg" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		actionsPlacement: { default: "header" },
+		searchPlaceholder: {},
+		listMaxHeight: { default: "28rem" },
+		popoverMinWidth: {},
+		popoverMaxWidth: {},
+		contentStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		showSearchBox: {
+			type: Boolean,
+			default: false
+		},
+		searchLabel: {},
+		showClearButton: {
+			type: Boolean,
+			default: false
+		},
+		clearAllLabel: {},
+		showSelectedCount: {
+			type: Boolean,
+			default: false
+		},
+		formatSelectedCount: { type: Function }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {},
+		"searchQuery": { default: "" },
+		"searchQueryModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:searchQuery"],
+	setup(__props) {
+		const { attrsClass, attrsWithoutClass } = useAttrsClass();
+		const selectedItems = useModel(__props, "modelValue");
+		const searchQuery = useModel(__props, "searchQuery");
+		const isOpen = ref(false);
+		const popoverStyle = usePopoverSizing({
+			minWidth: __props.popoverMinWidth,
+			maxWidth: __props.popoverMaxWidth
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ComboboxRoot), {
+				modelValue: selectedItems.value,
+				"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selectedItems.value = $event),
+				open: isOpen.value,
+				"onUpdate:open": _cache[4] || (_cache[4] = ($event) => isOpen.value = $event),
+				multiple: "",
+				by: "value",
+				disabled: __props.disabled,
+				"ignore-filter": "",
+				"reset-search-term-on-select": false
+			}, {
+				default: withCtx(() => [createVNode(MultiSelectTrigger_default, mergeProps(unref(attrsWithoutClass), {
+					class: unref(attrsClass),
+					label: __props.label,
+					"accessible-label": __props.accessibleLabel,
+					"selected-items": selectedItems.value,
+					size: __props.size
+				}), createSlots({ _: 2 }, [_ctx.$slots.value ? {
+					name: "default",
+					fn: withCtx(({ selected }) => [renderSlot(_ctx.$slots, "value", { selected })]),
+					key: "0"
+				} : void 0]), 1040, [
+					"class",
+					"label",
+					"accessible-label",
+					"selected-items",
+					"size"
+				]), createVNode(MultiSelectContent_default, {
+					modelValue: selectedItems.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedItems.value = $event),
+					"search-query": searchQuery.value,
+					"onUpdate:searchQuery": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
+					options: __props.options,
+					"show-search-box": __props.showSearchBox,
+					"show-clear-button": __props.showClearButton,
+					"actions-placement": __props.actionsPlacement,
+					"search-placeholder": __props.searchPlaceholder,
+					"search-label": __props.searchLabel,
+					"empty-text": __props.emptyText,
+					"clear-all-label": __props.clearAllLabel,
+					"format-selected-count": __props.showSelectedCount ? __props.formatSelectedCount : void 0,
+					"list-max-height": __props.listMaxHeight,
+					"popover-style": unref(popoverStyle),
+					"content-style": __props.contentStyle,
+					onEscape: _cache[2] || (_cache[2] = ($event) => isOpen.value = false)
+				}, null, 8, [
+					"modelValue",
+					"search-query",
+					"options",
+					"show-search-box",
+					"show-clear-button",
+					"actions-placement",
+					"search-placeholder",
+					"search-label",
+					"empty-text",
+					"clear-all-label",
+					"format-selected-count",
+					"list-max-height",
+					"popover-style",
+					"content-style"
+				])]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"open",
+				"disabled"
+			]);
+		};
+	}
+});
+export { MultiSelect_default as default };

package/dist/multi-select/MultiSelectContent.vue.d.ts

@@ -0,0 +1,32 @@
+import { StyleValue } from 'vue';
+import { SelectOption } from '@comfyorg/design-system/lib/select/types';
+type __VLS_Props = {
+    searchLabel?: string;
+    emptyText: string;
+    clearAllLabel?: string;
+    formatSelectedCount?: (count: number) => string;
+    options: SelectOption[];
+    showSearchBox: boolean;
+    showClearButton: boolean;
+    actionsPlacement: 'header' | 'footer';
+    searchPlaceholder?: string;
+    listMaxHeight: string;
+    popoverStyle: StyleValue;
+    contentStyle?: StyleValue;
+};
+type __VLS_ModelProps = {
+    modelValue: SelectOption[];
+    'searchQuery': string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    escape: () => any;
+    "update:modelValue": (value: SelectOption[]) => any;
+    "update:searchQuery": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onEscape?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: SelectOption[]) => any) | undefined;
+    "onUpdate:searchQuery"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/multi-select/MultiSelectContent.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/MultiSelectContent-9xyBQKz3.js";

package/dist/multi-select/MultiSelectTrigger.vue.d.ts

@@ -0,0 +1,24 @@
+import { ClassValue } from 'cva';
+import { SelectOption } from '@comfyorg/design-system/lib/select/types';
+type __VLS_Props = {
+    class?: ClassValue;
+    label?: string;
+    accessibleLabel: string;
+    selectedItems: SelectOption[];
+    size: 'lg' | 'md';
+};
+declare var __VLS_14: {
+    selected: SelectOption[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => 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/multi-select/MultiSelectTrigger.vue.js

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

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

@@ -0,0 +1,35 @@
+import { StyleValue } from 'vue';
+import { SelectOption } from '@comfyorg/design-system/lib/select/types';
+export type MultiSelectProps = MultiSelectBaseProps & ({
+    showSearchBox?: false;
+    searchLabel?: string;
+} | {
+    showSearchBox: boolean;
+    searchLabel: string;
+}) & ({
+    showClearButton?: false;
+    clearAllLabel?: string;
+} | {
+    showClearButton: boolean;
+    clearAllLabel: string;
+}) & ({
+    showSelectedCount?: false;
+    formatSelectedCount?: (count: number) => string;
+} | {
+    showSelectedCount: boolean;
+    formatSelectedCount: (count: number) => string;
+});
+export interface MultiSelectBaseProps {
+    accessibleLabel: string;
+    emptyText: string;
+    label?: string;
+    options?: SelectOption[];
+    size?: 'lg' | 'md';
+    disabled?: boolean;
+    actionsPlacement?: 'header' | 'footer';
+    searchPlaceholder?: string;
+    listMaxHeight?: string;
+    popoverMinWidth?: string;
+    popoverMaxWidth?: string;
+    contentStyle?: StyleValue;
+}

package/dist/navigation/LeftSidePanel.vue.d.ts

@@ -0,0 +1,12 @@
+import { NavGroupData, NavItemData } from '@comfyorg/design-system/lib/navigation/types';
+type __VLS_Props = {
+    navItems?: (NavItemData | NavGroupData)[];
+    modelValue?: string | null;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/navigation/LeftSidePanel.vue.js

@@ -0,0 +1,82 @@
+import { t as NavItem_default } from "../shared/NavItem-sQJ-77Zw.js";
+import { t as NavTitle_default } from "../shared/NavTitle-BM22yfCR.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
+// src/components/navigation/LeftSidePanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex min-h-0 scrollbar-hide w-full flex-auto flex-col gap-1 overflow-y-auto bg-card px-3" };
+var _hoisted_2 = {
+	key: 0,
+	class: "flex flex-col gap-2"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "flex flex-col gap-2"
+};
+// src/components/navigation/LeftSidePanel.vue
+var LeftSidePanel_default = /* @__PURE__ */ defineComponent({
+	__name: "LeftSidePanel",
+	props: {
+		navItems: { default: () => [] },
+		modelValue: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const collapsedGroups = ref({});
+		const getFirstItemId = () => {
+			if (!__props.navItems || __props.navItems.length === 0) return null;
+			const firstEntry = __props.navItems[0];
+			if ("items" in firstEntry && firstEntry.items.length > 0) return firstEntry.items[0].id;
+			if ("id" in firstEntry) return firstEntry.id;
+			return null;
+		};
+		const activeItem = computed({
+			get: () => __props.modelValue ?? getFirstItemId(),
+			set: (value) => emit("update:modelValue", value)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.navItems, (item) => {
+				return openBlock(), createElementBlock(Fragment, { key: "title" in item ? item.title : item.id }, ["items" in item ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(NavTitle_default), {
+					modelValue: collapsedGroups.value[item.title],
+					"onUpdate:modelValue": ($event) => collapsedGroups.value[item.title] = $event,
+					title: item.title,
+					collapsible: item.collapsible
+				}, null, 8, [
+					"modelValue",
+					"onUpdate:modelValue",
+					"title",
+					"collapsible"
+				]), !item.collapsible || !collapsedGroups.value[item.title] ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(item.items, (subItem) => {
+					return openBlock(), createBlock(unref(NavItem_default), {
+						key: subItem.id,
+						icon: subItem.icon,
+						badge: subItem.badge,
+						active: activeItem.value === subItem.id,
+						onClick: ($event) => activeItem.value = subItem.id
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(subItem.label), 1)]),
+						_: 2
+					}, 1032, [
+						"icon",
+						"badge",
+						"active",
+						"onClick"
+					]);
+				}), 128)) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(NavItem_default), {
+					icon: item.icon,
+					badge: item.badge,
+					active: activeItem.value === item.id,
+					onClick: ($event) => activeItem.value = item.id
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+					_: 2
+				}, 1032, [
+					"icon",
+					"badge",
+					"active",
+					"onClick"
+				])]))], 64);
+			}), 128))]);
+		};
+	}
+});
+export { LeftSidePanel_default as default };

package/dist/navigation/NavIcon.vue.d.ts

@@ -0,0 +1,7 @@
+import { NavItemData } from '@comfyorg/design-system/lib/navigation/types';
+type __VLS_Props = {
+    icon: NavItemData['icon'];
+};
+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/navigation/NavIcon.vue.js

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