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

package/dist/chart/Chart.vue.js

@@ -0,0 +1,177 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, toRaw, toRef, unref, useTemplateRef, watch } from "vue";
+import { BarController, BarElement, CategoryScale, Chart, Colors, Filler, Legend, LineController, LineElement, LinearScale, PointElement, Tooltip } from "chart.js";
+// src/components/chart/useChart.ts
+Chart.register(BarController, BarElement, CategoryScale, Colors, Filler, Legend, LinearScale, LineController, LineElement, PointElement, Tooltip);
+function getCssVar(name) {
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function getDefaultOptions(type) {
+	const foreground = getCssVar("--color-foreground") || "#ffffff";
+	const muted = getCssVar("--color-muted-foreground") || "#8a8a8a";
+	return {
+		responsive: true,
+		maintainAspectRatio: false,
+		interaction: {
+			mode: "index",
+			intersect: false
+		},
+		plugins: {
+			legend: {
+				align: "start",
+				labels: {
+					color: foreground,
+					usePointStyle: true,
+					pointStyle: "circle",
+					boxWidth: 8,
+					boxHeight: 8,
+					padding: 16,
+					font: {
+						family: "Inter",
+						size: 11
+					},
+					generateLabels(chart) {
+						return chart.data.datasets.map((dataset, i) => {
+							const color = dataset.borderColor ?? dataset.backgroundColor ?? "#888";
+							return {
+								text: dataset.label ?? "",
+								fillStyle: color,
+								strokeStyle: color,
+								lineWidth: 0,
+								pointStyle: "circle",
+								hidden: !chart.isDatasetVisible(i),
+								datasetIndex: i
+							};
+						});
+					}
+				}
+			},
+			tooltip: { enabled: true }
+		},
+		elements: { point: {
+			radius: 0,
+			hoverRadius: 4
+		} },
+		scales: {
+			x: {
+				ticks: {
+					color: muted,
+					font: {
+						family: "Inter",
+						size: 11
+					},
+					padding: 8
+				},
+				grid: {
+					display: true,
+					color: muted + "33",
+					drawTicks: false
+				},
+				border: {
+					display: true,
+					color: muted
+				}
+			},
+			y: {
+				ticks: {
+					color: muted,
+					font: {
+						family: "Inter",
+						size: 11
+					},
+					padding: 4
+				},
+				grid: {
+					display: false,
+					drawTicks: false
+				},
+				border: {
+					display: true,
+					color: muted
+				}
+			}
+		},
+		...type === "bar" && { datasets: { bar: {
+			borderRadius: {
+				topLeft: 4,
+				topRight: 4
+			},
+			borderSkipped: false,
+			barPercentage: .6,
+			categoryPercentage: .8
+		} } }
+	};
+}
+function useChart(canvasRef, type, data) {
+	let chart;
+	function copyData() {
+		const { datasets, labels, ...rest } = toRaw(data.value);
+		return {
+			...rest,
+			labels: labels && [...labels],
+			datasets: datasets.map((dataset) => ({
+				...dataset,
+				data: Array.isArray(dataset.data) ? [...dataset.data] : dataset.data
+			}))
+		};
+	}
+	function createChart() {
+		if (!canvasRef.value) return;
+		chart?.destroy();
+		chart = new Chart(canvasRef.value, {
+			type: type.value,
+			data: copyData(),
+			options: getDefaultOptions(type.value)
+		});
+	}
+	onMounted(createChart);
+	watch(type, createChart);
+	watch(data, () => {
+		if (!chart) return;
+		const next = copyData();
+		const previousCount = chart.data.datasets.length;
+		for (const [index, dataset] of next.datasets.entries()) {
+			if (index >= previousCount) break;
+			const { hidden } = chart.getDatasetMeta(index);
+			if (typeof hidden === "boolean") dataset.hidden = hidden;
+		}
+		chart.data = next;
+		chart.update();
+	}, { deep: true });
+	onBeforeUnmount(() => {
+		chart?.destroy();
+		chart = void 0;
+	});
+}
+// src/components/chart/Chart.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "relative" };
+var _hoisted_2 = ["aria-label"];
+// src/components/chart/Chart.vue
+var Chart_default = /* @__PURE__ */ defineComponent({
+	__name: "Chart",
+	props: {
+		data: {},
+		label: {},
+		type: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(__props) {
+		const canvasRef = useTemplateRef("canvasRef");
+		useChart(canvasRef, toRef(() => __props.type), toRef(() => __props.data));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("rounded-lg bg-secondary p-6", __props.class)) }, [createElementVNode("div", _hoisted_1, [createElementVNode("canvas", {
+				ref_key: "canvasRef",
+				ref: canvasRef,
+				"aria-label": __props.label,
+				role: "img"
+			}, null, 8, _hoisted_2)])], 2);
+		};
+	}
+});
+export { Chart_default as default };

package/dist/chart/__tests__/chartTestUtils.d.ts

@@ -0,0 +1,3 @@
+import { Chart } from 'chart.js';
+export declare function getChartByName(name: string): Chart | undefined;
+export declare function stubCanvasGetContext(): void;

package/dist/chart/useChart.d.ts

@@ -0,0 +1,4 @@
+import { ChartData } from 'chart.js';
+import { Ref } from 'vue';
+export type SupportedChartType = 'bar' | 'line';
+export declare function useChart(canvasRef: Readonly<Ref<HTMLCanvasElement | null>>, type: Readonly<Ref<SupportedChartType>>, data: Readonly<Ref<ChartData>>): void;

package/dist/checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,25 @@
+import { CheckboxRootProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = CheckboxRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_14: {
+    modelValue: boolean | "indeterminate";
+    state: import('reka-ui').CheckboxCheckedState;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => 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/checkbox/Checkbox.vue.js

@@ -0,0 +1,47 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+// src/components/checkbox/Checkbox.vue
+var Checkbox_default = /* @__PURE__ */ defineComponent({
+	__name: "Checkbox",
+	props: {
+		defaultValue: {},
+		modelValue: {},
+		disabled: { type: Boolean },
+		value: {},
+		id: {},
+		trueValue: {},
+		falseValue: {},
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(CheckboxRoot), mergeProps(unref(forwarded), {
+				"data-slot": "checkbox",
+				class: unref(cn)("inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border bg-transparent text-background transition-colors outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary", props.class)
+			}), {
+				default: withCtx((slotProps) => [createVNode(unref(CheckboxIndicator), { class: "flex items-center justify-center" }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)), () => [createElementVNode("i", { class: normalizeClass(unref(cn)("size-3", slotProps.state === "indeterminate" ? "icon-[lucide--minus]" : "icon-[lucide--check]")) }, null, 2)])]),
+					_: 2
+				}, 1024)]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+export { Checkbox_default as default };

package/dist/chip/Tag.vue.d.ts

@@ -0,0 +1,61 @@
+import { HTMLAttributes } from 'vue';
+import { TagVariants } from '@comfyorg/design-system/tag.variants';
+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<({
+    label: string;
+    shape?: TagVariants["shape"];
+    state?: TagVariants["state"];
+    removeTooltip?: string;
+    interactive?: boolean;
+    class?: HTMLAttributes["class"];
+} & {
+    removable: true;
+    removeLabel: string;
+}) | ({
+    label: string;
+    shape?: TagVariants["shape"];
+    state?: TagVariants["state"];
+    removeTooltip?: string;
+    interactive?: boolean;
+    class?: HTMLAttributes["class"];
+} & {
+    removable?: false;
+    removeLabel?: string;
+}), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    remove: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<({
+    label: string;
+    shape?: TagVariants["shape"];
+    state?: TagVariants["state"];
+    removeTooltip?: string;
+    interactive?: boolean;
+    class?: HTMLAttributes["class"];
+} & {
+    removable: true;
+    removeLabel: string;
+}) | ({
+    label: string;
+    shape?: TagVariants["shape"];
+    state?: TagVariants["state"];
+    removeTooltip?: string;
+    interactive?: boolean;
+    class?: HTMLAttributes["class"];
+} & {
+    removable?: false;
+    removeLabel?: string;
+})> & Readonly<{
+    onRemove?: ((event: Event) => 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/chip/Tag.vue.js

@@ -0,0 +1,71 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { t as TagRemoveButton_default } from "../shared/TagRemoveButton-D919R-To.js";
+import { n as tagVariants } from "../shared/tag.variants-BEXRRbPc.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withModifiers } from "vue";
+// src/components/chip/Tag.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role", "tabindex"];
+var _hoisted_2 = { class: "min-w-0 truncate" };
+// src/components/chip/Tag.vue
+var Tag_default = /* @__PURE__ */ defineComponent({
+	__name: "Tag",
+	props: {
+		label: {},
+		shape: { default: "square" },
+		state: { default: "default" },
+		removeTooltip: {},
+		interactive: {
+			type: Boolean,
+			default: false
+		},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		removable: { type: Boolean },
+		removeLabel: {}
+	},
+	emits: ["remove"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		function handleKeydown(event) {
+			if (event.target !== event.currentTarget) return;
+			if (!__props.interactive) return;
+			if (event.key === "Enter" || event.key === " ") event.preventDefault();
+			if (event.key === "Enter" && event.currentTarget instanceof HTMLElement) event.currentTarget.click();
+		}
+		function handleKeyup(event) {
+			if (event.target !== event.currentTarget) return;
+			if (!__props.interactive || event.key !== " ") return;
+			event.preventDefault();
+			if (event.currentTarget instanceof HTMLElement) event.currentTarget.click();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				role: __props.interactive ? "button" : void 0,
+				tabindex: __props.interactive ? 0 : void 0,
+				class: normalizeClass(unref(cn)(unref(tagVariants)({
+					shape: __props.shape,
+					state: __props.state,
+					removable: __props.removable,
+					interactive: __props.interactive
+				}), __props.class)),
+				onKeydown: handleKeydown,
+				onKeyup: handleKeyup
+			}, [
+				renderSlot(_ctx.$slots, "icon"),
+				createElementVNode("span", _hoisted_2, toDisplayString(__props.label), 1),
+				renderSlot(_ctx.$slots, "default"),
+				__props.removable ? (openBlock(), createBlock(unref(TagRemoveButton_default), {
+					key: 0,
+					"aria-label": __props.removeLabel,
+					tooltip: __props.removeTooltip,
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("remove", $event), ["stop"]))
+				}, null, 8, ["aria-label", "tooltip"])) : createCommentVNode("", true)
+			], 42, _hoisted_1);
+		};
+	}
+});
+export { Tag_default as default };

package/dist/chip/TagRemoveButton.vue.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    tooltip?: string;
+    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/chip/TagRemoveButton.vue.js

@@ -0,0 +1 @@
+export { t as default } from "../shared/TagRemoveButton-D919R-To.js";

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

@@ -0,0 +1,23 @@
+import { ColorPickerProps } from '@comfyorg/design-system/lib/color-picker/types';
+type __VLS_Props = ColorPickerProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((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/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;
+}