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

package/dist/color-picker/ColorPicker.vue.js

@@ -0,0 +1,139 @@
+import { i as hsvaToHex, n as hexToHsva, o as rgbToHex, r as hsbToRgb } from "../shared/ColorPickerSlider--mnQyzWD.js";
+import { t as PopoverContent_default } from "../shared/PopoverContent-DNqL6t-O.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { t as ColorPickerPanel_default } from "../shared/ColorPickerPanel-DQGHuvxk.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+import { PopoverRoot, PopoverTrigger } from "reka-ui";
+// src/components/color-picker/ColorPicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["disabled", "aria-label"];
+var _hoisted_2 = { class: "flex size-8 shrink-0 items-center justify-center" };
+var _hoisted_3 = { class: "relative size-4 overflow-hidden rounded-sm" };
+var _hoisted_4 = { class: "flex flex-1 items-center justify-between pl-1 text-xs text-foreground" };
+var _hoisted_5 = { key: 0 };
+var _hoisted_6 = {
+	key: 1,
+	class: "flex gap-2"
+};
+var _hoisted_7 = { key: 2 };
+// src/components/color-picker/ColorPicker.vue
+var ColorPicker_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorPicker",
+	props: /*@__PURE__*/ mergeModels({
+		class: {},
+		disabled: { type: Boolean },
+		alpha: {
+			type: Boolean,
+			default: true
+		},
+		accessibleLabel: {},
+		hexLabel: {},
+		rgbaLabel: {},
+		hueLabel: {},
+		alphaLabel: {},
+		redLabel: {},
+		greenLabel: {},
+		blueLabel: {},
+		saturationBrightnessLabel: {},
+		formatLabel: {}
+	}, {
+		"modelValue": { default: "#000000" },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		function readHsva(hex) {
+			const next = hexToHsva(hex || "#000000");
+			if (!__props.alpha) next.a = 100;
+			return next;
+		}
+		const hsva = ref(readHsva(modelValue.value));
+		const displayMode = ref("hex");
+		watch(modelValue, (newVal) => {
+			if (newVal !== hsvaToHex(hsva.value)) hsva.value = readHsva(newVal);
+		});
+		watch(hsva, (newHsva) => {
+			const hex = hsvaToHex(newHsva);
+			if (hex !== modelValue.value) modelValue.value = hex;
+		}, { deep: true });
+		const baseRgb = computed(() => hsbToRgb({
+			h: hsva.value.h,
+			s: hsva.value.s,
+			b: hsva.value.v
+		}));
+		const previewColor = computed(() => {
+			const hex = rgbToHex(baseRgb.value);
+			const a = hsva.value.a / 100;
+			if (a < 1) return `${hex}${Math.round(a * 255).toString(16).padStart(2, "0")}`;
+			return hex;
+		});
+		const displayHex = computed(() => rgbToHex(baseRgb.value).toLowerCase());
+		const isOpen = ref(false);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopoverRoot), {
+				open: isOpen.value,
+				"onUpdate:open": _cache[2] || (_cache[2] = ($event) => isOpen.value = $event)
+			}, {
+				default: withCtx(() => [createVNode(unref(PopoverTrigger), { "as-child": "" }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", {}, () => [createElementVNode("button", {
+						type: "button",
+						disabled: _ctx.$props.disabled,
+						"aria-label": __props.accessibleLabel,
+						class: normalizeClass(unref(cn)("flex h-8 w-full items-center overflow-clip rounded-lg border border-transparent bg-secondary pr-2 outline-none hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50", isOpen.value && "border-border", _ctx.$props.class))
+					}, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [_cache[3] || (_cache[3] = createElementVNode("div", {
+						class: "absolute inset-0",
+						style: {
+							backgroundImage: "repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)",
+							backgroundSize: "4px 4px"
+						}
+					}, null, -1)), createElementVNode("div", {
+						class: "absolute inset-0",
+						style: normalizeStyle({ backgroundColor: previewColor.value })
+					}, null, 4)])]), createElementVNode("div", _hoisted_4, [displayMode.value === "hex" ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(displayHex.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_6, [
+						createElementVNode("span", null, toDisplayString(baseRgb.value.r), 1),
+						createElementVNode("span", null, toDisplayString(baseRgb.value.g), 1),
+						createElementVNode("span", null, toDisplayString(baseRgb.value.b), 1)
+					])), __props.alpha ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(hsva.value.a) + "%", 1)) : createCommentVNode("", true)])], 10, _hoisted_1)])]),
+					_: 3
+				}), createVNode(unref(PopoverContent_default), {
+					align: "start",
+					"side-offset": 7,
+					class: "w-auto border-0 bg-transparent p-0 shadow-none"
+				}, {
+					default: withCtx(() => [createVNode(ColorPickerPanel_default, {
+						hsva: hsva.value,
+						"onUpdate:hsva": _cache[0] || (_cache[0] = ($event) => hsva.value = $event),
+						"display-mode": displayMode.value,
+						"onUpdate:displayMode": _cache[1] || (_cache[1] = ($event) => displayMode.value = $event),
+						alpha: __props.alpha,
+						"hex-label": _ctx.$props.hexLabel,
+						"rgba-label": _ctx.$props.rgbaLabel,
+						"hue-label": _ctx.$props.hueLabel,
+						"alpha-label": _ctx.$props.alphaLabel,
+						"red-label": _ctx.$props.redLabel,
+						"green-label": _ctx.$props.greenLabel,
+						"blue-label": _ctx.$props.blueLabel,
+						"saturation-brightness-label": _ctx.$props.saturationBrightnessLabel,
+						"format-label": _ctx.$props.formatLabel
+					}, null, 8, [
+						"hsva",
+						"display-mode",
+						"alpha",
+						"hex-label",
+						"rgba-label",
+						"hue-label",
+						"alpha-label",
+						"red-label",
+						"green-label",
+						"blue-label",
+						"saturation-brightness-label",
+						"format-label"
+					])]),
+					_: 1
+				})]),
+				_: 3
+			}, 8, ["open"]);
+		};
+	}
+});
+export { ColorPicker_default as default };

package/dist/color-picker/ColorPickerPanel.vue.d.ts

@@ -0,0 +1,27 @@
+import { HSVA } from '@comfyorg/design-system/lib/color-picker/types';
+type __VLS_Props = {
+    alpha?: boolean;
+    hexLabel: string;
+    rgbaLabel: string;
+    hueLabel: string;
+    alphaLabel: string;
+    redLabel: string;
+    greenLabel: string;
+    blueLabel: string;
+    saturationBrightnessLabel: string;
+    formatLabel: string;
+};
+type __VLS_ModelProps = {
+    'hsva': HSVA;
+    'displayMode': 'hex' | 'rgba';
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:hsva": (value: HSVA) => any;
+    "update:displayMode": (value: "hex" | "rgba") => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:hsva"?: ((value: HSVA) => any) | undefined;
+    "onUpdate:displayMode"?: ((value: "hex" | "rgba") => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/color-picker/ColorPickerPanel.vue.js

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

package/dist/color-picker/ColorPickerSaturationValue.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    hue: number;
+};
+type __VLS_ModelProps = {
+    'saturation': number;
+    'value': number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:saturation": (value: number) => any;
+    "update:value": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:saturation"?: ((value: number) => any) | undefined;
+    "onUpdate:value"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/color-picker/ColorPickerSaturationValue.vue.js

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

package/dist/color-picker/ColorPickerSlider.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    type: 'hue' | 'alpha';
+    hue?: number;
+    saturation?: number;
+    brightness?: 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/color-picker/ColorPickerSlider.vue.js

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

package/dist/color-picker/types.d.ts

@@ -0,0 +1,22 @@
+export interface HSVA {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+export interface ColorPickerProps {
+    class?: string;
+    disabled?: boolean;
+    alpha?: boolean;
+    /** Defaults to the trigger's visible color value. */
+    accessibleLabel?: string;
+    hexLabel: string;
+    rgbaLabel: string;
+    hueLabel: string;
+    alphaLabel: string;
+    redLabel: string;
+    greenLabel: string;
+    blueLabel: string;
+    saturationBrightnessLabel: string;
+    formatLabel: string;
+}

package/dist/color-picker/useColorPicker.d.ts

@@ -0,0 +1,33 @@
+import { Ref } from 'vue';
+import { HSVA } from '@comfyorg/design-system/lib/color-picker/types';
+export declare const rgbChannels: readonly [{
+    readonly key: "r";
+}, {
+    readonly key: "g";
+}, {
+    readonly key: "b";
+}];
+export declare function useColorPicker(hsva: Ref<HSVA>): {
+    hex: {
+        draft: string;
+        beginEdit: () => void;
+        commit: () => void;
+        reset: () => void;
+    };
+    rgb: {
+        draft: {
+            r: number;
+            g: number;
+            b: number;
+        };
+        beginEdit: () => void;
+        commit: () => void;
+        reset: () => void;
+    };
+    alpha: {
+        draft: number;
+        beginEdit: () => void;
+        commit: () => void;
+        reset: () => void;
+    };
+};

package/dist/common/CanvasBanner.vue.js

@@ -1,6 +1,6 @@
-import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
 import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
-//#region src/components/common/CanvasBanner.vue?vue&type=script&setup=true&lang.ts
+// src/components/common/CanvasBanner.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex min-w-0 items-center gap-2" };
 var _hoisted_2 = { class: "flex min-w-0 flex-col text-sm wrap-break-word" };
 var _hoisted_3 = { class: "font-medium text-foreground" };
@@ -8,8 +8,7 @@ var _hoisted_4 = {
 	key: 0,
 	class: "text-muted-foreground"
 };
-//#endregion
-//#region src/components/common/CanvasBanner.vue
+// src/components/common/CanvasBanner.vue
 var CanvasBanner_default = /* @__PURE__ */ defineComponent({
 	__name: "CanvasBanner",
 	props: { accent: {} },
@@ -19,5 +18,4 @@ var CanvasBanner_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { CanvasBanner_default as default };

package/dist/common/ContentDivider.vue.js

@@ -1,7 +1,6 @@
-import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-DjkACiAr.js";
 import { createElementBlock, defineComponent, normalizeClass, openBlock, useCssVars } from "vue";
-//#endregion
-//#region src/components/common/ContentDivider.vue
+// src/components/common/ContentDivider.vue
 var ContentDivider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "ContentDivider",
 	props: {
@@ -18,5 +17,4 @@ var ContentDivider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		};
 	}
 }), [["__scopeId", "data-v-dcb6a1f4"]]);
-//#endregion
 export { ContentDivider_default as default };

package/dist/common/CustomFormValue.vue.js

@@ -1,6 +1,5 @@
 import { createElementBlock, defineComponent, onMounted, openBlock, ref, watch } from "vue";
-//#endregion
-//#region src/components/common/CustomFormValue.vue
+// src/components/common/CustomFormValue.vue
 var CustomFormValue_default = /* @__PURE__ */ defineComponent({
 	__name: "CustomFormValue",
 	props: { renderFunction: { type: Function } },
@@ -24,5 +23,4 @@ var CustomFormValue_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { CustomFormValue_default as default };

package/dist/common/DotSpinner.vue.js

@@ -1,9 +1,8 @@
-import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-DjkACiAr.js";
 import { createElementBlock, createStaticVNode, defineComponent, normalizeStyle, openBlock } from "vue";
-//#region src/components/common/DotSpinner.vue?vue&type=script&setup=true&lang.ts
+// src/components/common/DotSpinner.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["width", "height"];
-//#endregion
-//#region src/components/common/DotSpinner.vue
+// src/components/common/DotSpinner.vue
 var DotSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "DotSpinner",
 	props: {
@@ -30,5 +29,4 @@ var DotSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		};
 	}
 }), [["__scopeId", "data-v-8e668792"]]);
-//#endregion
 export { DotSpinner_default as default };

package/dist/common/EditableText.vue.js

@@ -1,9 +1,8 @@
-import { t as Input_default } from "../shared/Input-39RLwDr2.js";
+import { t as Input_default } from "../shared/Input-DOeNoniw.js";
 import { createBlock, createElementBlock, createTextVNode, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-//#region src/components/common/EditableText.vue?vue&type=script&setup=true&lang.ts
+// src/components/common/EditableText.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "editable-text inline" };
-//#endregion
-//#region src/components/common/EditableText.vue
+// src/components/common/EditableText.vue
 var EditableText_default = /* @__PURE__ */ defineComponent({
 	__name: "EditableText",
 	props: {
@@ -69,5 +68,4 @@ var EditableText_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { EditableText_default as default };

package/dist/common/HighlightedText.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    query: string;
+    text: string;
+    highlightClass?: string;
+};
+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/common/HighlightedText.vue.js

@@ -0,0 +1,49 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { Fragment, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "vue";
+// src/components/common/highlightQuery.ts
+function highlightQuery(text, query) {
+	if (!query) return [{
+		text,
+		highlighted: false
+	}];
+	const pattern = Array.from(query).map((ch) => ch.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("[ ]?");
+	const regex = new RegExp(pattern, "gi");
+	const parts = [];
+	let lastIndex = 0;
+	for (const match of text.matchAll(regex)) {
+		if (match.index > lastIndex) parts.push({
+			text: text.slice(lastIndex, match.index),
+			highlighted: false
+		});
+		parts.push({
+			text: match[0],
+			highlighted: true
+		});
+		lastIndex = match.index + match[0].length;
+	}
+	if (lastIndex < text.length || parts.length === 0) parts.push({
+		text: text.slice(lastIndex),
+		highlighted: false
+	});
+	return parts;
+}
+// src/components/common/HighlightedText.vue
+var HighlightedText_default = /* @__PURE__ */ defineComponent({
+	__name: "HighlightedText",
+	props: {
+		query: {},
+		text: {},
+		highlightClass: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(unref(highlightQuery)(__props.text, __props.query), (part, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: index }, [part.highlighted ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(cn)("highlight", __props.highlightClass))
+				}, toDisplayString(part.text), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+			}), 128);
+		};
+	}
+});
+export { HighlightedText_default as default };

package/dist/common/LoadingOverlay.vue.js

@@ -1,6 +1,6 @@
-import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
 import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
-//#region src/components/common/LoadingOverlay.vue?vue&type=script&setup=true&lang.ts
+// src/components/common/LoadingOverlay.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
 	class: "absolute inset-0 z-50 flex items-center justify-center bg-background/50",
@@ -13,8 +13,7 @@ var _hoisted_5 = {
 	key: 0,
 	class: "mt-4 text-lg text-foreground"
 };
-//#endregion
-//#region src/components/common/LoadingOverlay.vue
+// src/components/common/LoadingOverlay.vue
 var LoadingOverlay_default = /* @__PURE__ */ defineComponent({
 	__name: "LoadingOverlay",
 	props: {
@@ -37,5 +36,4 @@ var LoadingOverlay_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { LoadingOverlay_default as default };

package/dist/common/MarkdownText.vue.js

@@ -1,5 +1,5 @@
 import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, toDisplayString } from "vue";
-//#region src/components/common/MarkdownText.vue?vue&type=script&setup=true&lang.ts
+// src/components/common/MarkdownText.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "wrap-break-word" };
 var _hoisted_2 = ["textContent"];
 var _hoisted_3 = { key: 1 };
@@ -12,8 +12,7 @@ var _hoisted_8 = {
 	class: "rounded-sm px-1 py-0.5 text-xs"
 };
 var _hoisted_9 = { key: 4 };
-//#endregion
-//#region src/components/common/MarkdownText.vue
+// src/components/common/MarkdownText.vue
 var MarkdownText_default = /* @__PURE__ */ defineComponent({
 	__name: "MarkdownText",
 	props: { text: {} },
@@ -89,5 +88,4 @@ var MarkdownText_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { MarkdownText_default as default };

package/dist/common/MarqueeLine.vue.js

@@ -1,6 +1,6 @@
-import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-DjkACiAr.js";
 import { createElementBlock, createElementVNode, openBlock, renderSlot } from "vue";
-//#region src/components/common/MarqueeLine.vue
+// src/components/common/MarqueeLine.vue
 var _sfc_main = {};
 var _hoisted_1 = { class: "@container overflow-hidden mask-[linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:mask-none" };
 var _hoisted_2 = { class: "inline-block min-w-full whitespace-nowrap [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:animate-[marquee-scroll_2s_linear_infinite_alternate]" };
@@ -8,5 +8,4 @@ function _sfc_render(_ctx, _cache) {
 	return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])]);
 }
 var MarqueeLine_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
-//#endregion
 export { MarqueeLine_default as default };

package/dist/common/NoResultsPlaceholder.vue.d.ts

@@ -0,0 +1,28 @@
+import { ButtonVariants } from '@comfyorg/design-system/button.variants';
+type __VLS_Props = {
+    class?: string;
+    icon?: string;
+    title?: string;
+    message: string;
+    textClass?: string;
+    buttonIcon?: string;
+    buttonLabel?: string;
+    buttonVariant?: ButtonVariants['variant'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    action: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAction?: ((...args: any[]) => 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/common/NoResultsPlaceholder.vue.js

@@ -0,0 +1,49 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { t as Button_default } from "../shared/Button-Dj_H5v3V.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+// src/components/common/NoResultsPlaceholder.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col items-center bg-(--surface-ground) text-center" };
+var _hoisted_2 = {
+	key: 0,
+	class: "mb-2 text-foreground"
+};
+// src/components/common/NoResultsPlaceholder.vue
+var NoResultsPlaceholder_default = /* @__PURE__ */ defineComponent({
+	__name: "NoResultsPlaceholder",
+	props: {
+		class: {},
+		icon: {},
+		title: {},
+		message: {},
+		textClass: {},
+		buttonIcon: {},
+		buttonLabel: {},
+		buttonVariant: {}
+	},
+	emits: ["action"],
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("h-full p-8", props.class)) }, [createElementVNode("div", _hoisted_1, [
+				__props.icon ? (openBlock(), createElementBlock("i", {
+					key: 0,
+					class: normalizeClass(unref(cn)(__props.icon, "mb-4 size-12 text-5xl"))
+				}, null, 2)) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "title", {}, () => [__props.title ? (openBlock(), createElementBlock("h3", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true)]),
+				createElementVNode("p", { class: normalizeClass(unref(cn)("mb-4 text-center whitespace-pre-line", __props.textClass)) }, toDisplayString(__props.message), 3),
+				__props.buttonLabel ? (openBlock(), createBlock(unref(Button_default), {
+					key: 1,
+					variant: __props.buttonVariant ?? "textonly",
+					onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("action"))
+				}, {
+					default: withCtx(() => [__props.buttonIcon ? (openBlock(), createElementBlock("i", {
+						key: 0,
+						class: normalizeClass(__props.buttonIcon)
+					}, null, 2)) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(__props.buttonLabel), 1)]),
+					_: 1
+				}, 8, ["variant"])) : createCommentVNode("", true)
+			])], 2);
+		};
+	}
+});
+export { NoResultsPlaceholder_default as default };

package/dist/common/NotificationPopup.vue.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    icon?: string;
+    title: string;
+    subtitle?: string;
+    closeLabel?: string;
+    position?: 'bottom-left' | 'bottom-right';
+};
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    'footer-start'?: (props: typeof __VLS_11) => any;
+} & {
+    'footer-end'?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => 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;
+    };
+};