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

package/dist/shared/Button-Dj_H5v3V.js

@@ -0,0 +1,138 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { t as TextTooltip_default } from "./TextTooltip-BNlZI515.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+import { Primitive } from "reka-ui";
+import { cva } from "cva";
+// src/button.variants.ts
+var buttonVariants = cva({
+	base: "relative inline-flex cursor-pointer touch-manipulation appearance-none items-center justify-center gap-2 rounded-md border-none font-inter text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([width]):not([height])]:size-4",
+	variants: {
+		variant: {
+			secondary: "bg-secondary text-foreground hover:bg-accent",
+			primary: "bg-primary text-foreground hover:bg-primary/90",
+			inverted: "bg-foreground text-background hover:bg-foreground/80",
+			destructive: "bg-destructive text-foreground hover:bg-destructive/90",
+			textonly: "bg-transparent text-foreground hover:bg-accent",
+			"muted-textonly": "bg-transparent text-muted-foreground hover:bg-accent",
+			"destructive-textonly": "bg-transparent text-destructive hover:bg-destructive/10",
+			outline: "border border-solid bg-transparent text-foreground hover:bg-accent",
+			link: "bg-transparent text-muted-foreground hover:text-foreground",
+			"overlay-white": "bg-white text-gray-600 hover:bg-white/90",
+			base: "bg-background text-foreground hover:bg-accent",
+			tertiary: "bg-muted text-foreground hover:bg-muted/80",
+			subscribe: "border-transparent bg-credit text-charcoal-800 hover:opacity-80",
+			"brand-ghost": "bg-white/8 text-primary-warm-white hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-brand-yellow",
+			"brand-solid": "bg-brand-yellow text-primary-comfy-ink hover:bg-brand-yellow/90 focus-visible:ring-2 focus-visible:ring-primary-warm-white",
+			"brand-ghost-accent": "bg-white/8 text-primary-warm-white hover:bg-brand-yellow hover:text-primary-comfy-ink focus-visible:ring-2 focus-visible:ring-brand-yellow"
+		},
+		size: {
+			sm: "h-6 rounded-sm px-2 py-1 text-xs",
+			md: "h-8 rounded-lg p-2 text-xs",
+			lg: "h-10 rounded-lg px-4 py-2 text-sm",
+			"icon-sm": "size-5 p-0",
+			icon: "size-8 rounded-lg",
+			"icon-lg": "size-10 rounded-lg",
+			link: "gap-1 px-0 py-2 text-sm/5 font-normal hover:underline",
+			brand: "h-12 rounded-2xl px-5 font-formula text-sm font-semibold tracking-[0.7px] uppercase lg:h-13 xl:h-14 2xl:h-16",
+			"brand-icon": "size-10 rounded-2xl xl:size-12",
+			unset: ""
+		}
+	},
+	defaultVariants: {
+		variant: "secondary",
+		size: "md"
+	}
+});
+// src/components/button/Button.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "icon-[lucide--loader-circle] animate-spin",
+	"aria-hidden": "true"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "sr-only"
+};
+var _hoisted_3 = {
+	key: 3,
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute -top-1 -right-1 size-2 rounded-full bg-foreground"
+};
+// src/components/button/Button.vue
+var Button_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "Button",
+	props: {
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		icon: {},
+		indicator: { type: Boolean },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		tooltip: {},
+		tooltipSide: {},
+		variant: {},
+		asChild: { type: Boolean },
+		as: { default: "button" }
+	},
+	setup(__props) {
+		const WithoutTooltip = (_, { slots }) => slots.default?.()[0];
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.tooltip === void 0 ? WithoutTooltip : unref(TextTooltip_default)), {
+				text: __props.tooltip,
+				side: __props.tooltipSide
+			}, createSlots({
+				default: withCtx(() => [createVNode(unref(Primitive), mergeProps({
+					as: __props.as,
+					"as-child": __props.asChild,
+					disabled: __props.disabled || __props.loading,
+					"aria-busy": __props.loading || void 0,
+					"data-variant": __props.variant,
+					class: unref(cn)(unref(buttonVariants)({
+						variant: __props.variant,
+						size: __props.size
+					}), __props.class)
+				}, _ctx.$attrs), {
+					default: withCtx(() => [
+						__props.loading ? (openBlock(), createElementBlock("i", _hoisted_1)) : createCommentVNode("", true),
+						__props.loading ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [__props.icon ? (openBlock(), createElementBlock("i", {
+							key: 0,
+							class: normalizeClass(__props.icon),
+							"aria-hidden": "true"
+						}, null, 2)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 64)),
+						__props.indicator ? (openBlock(), createElementBlock("span", _hoisted_3)) : createCommentVNode("", true)
+					]),
+					_: 3
+				}, 16, [
+					"as",
+					"as-child",
+					"disabled",
+					"aria-busy",
+					"data-variant",
+					"class"
+				])]),
+				_: 2
+			}, [_ctx.$slots.tooltip ? {
+				name: "content",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "tooltip")]),
+				key: "0"
+			} : void 0]), 1032, ["text", "side"]);
+		};
+	}
+});
+export { Button_default as t };

package/dist/shared/Card-BrvqUM49.js

@@ -0,0 +1,32 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+import { cva } from "cva";
+// src/components/card/card.variants.ts
+var cardVariants = cva({
+	base: "border",
+	variants: { surface: {
+		background: "overflow-hidden rounded-2xl bg-background",
+		secondary: "rounded-lg bg-secondary"
+	} },
+	defaultVariants: { surface: "background" }
+});
+// src/components/card/Card.vue
+var Card_default = /* @__PURE__ */ defineComponent({
+	__name: "Card",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		surface: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)(unref(cardVariants)({ surface: __props.surface }), __props.class)) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+export { Card_default as t };

package/dist/shared/CardFooter-BV_I0pM-.js

@@ -0,0 +1,19 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+// src/components/card/CardFooter.vue
+var CardFooter_default = /* @__PURE__ */ defineComponent({
+	__name: "CardFooter",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("flex items-center justify-end gap-4 p-4", __props.class)) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+export { CardFooter_default as t };

package/dist/shared/CardHeader-CMutruBx.js

@@ -0,0 +1,19 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+// src/components/card/CardHeader.vue
+var CardHeader_default = /* @__PURE__ */ defineComponent({
+	__name: "CardHeader",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("flex h-12 shrink-0 items-center justify-between gap-2 border-b px-4", __props.class)) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+export { CardHeader_default as t };

package/dist/shared/ColorPickerPanel-DQGHuvxk.js

@@ -0,0 +1,239 @@
+import { t as Select_default } from "./Select-DtVgv7Po.js";
+import { t as SelectContent_default } from "./SelectContent-Ba1mCDWM.js";
+import { t as SelectItem_default } from "./SelectItem-DaOr3TFS.js";
+import { t as SelectTrigger_default } from "./SelectTrigger-BBicbVsI.js";
+import { t as SelectValue_default } from "./SelectValue-BjaQc-WU.js";
+import { t as ColorPickerSaturationValue_default } from "./ColorPickerSaturationValue-B5VDiMcl.js";
+import { a as normalizeHex, n as hexToHsva, o as rgbToHex, r as hsbToRgb, s as rgbToHsv, t as ColorPickerSlider_default } from "./ColorPickerSlider--mnQyzWD.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, reactive, ref, renderList, toDisplayString, unref, useModel, vModelText, watch, withCtx, withDirectives, withKeys } from "vue";
+import { clamp } from "es-toolkit";
+// src/components/color-picker/useColorPicker.ts
+var rgbChannels = [
+	{ key: "r" },
+	{ key: "g" },
+	{ key: "b" }
+];
+function useDraftField(source, apply) {
+	const draft = ref(source());
+	const isEditing = ref(false);
+	watch(source, (value) => {
+		if (!isEditing.value) draft.value = value;
+	});
+	return reactive({
+		draft,
+		beginEdit: () => {
+			isEditing.value = true;
+		},
+		commit: () => apply(draft.value),
+		reset: () => {
+			isEditing.value = false;
+			draft.value = source();
+		}
+	});
+}
+function useColorPicker(hsva) {
+	const rgb = computed(() => hsbToRgb({
+		h: hsva.value.h,
+		s: hsva.value.s,
+		b: hsva.value.v
+	}));
+	const hexString = computed(() => rgbToHex(rgb.value).toLowerCase());
+	return {
+		hex: useDraftField(() => hexString.value, (draft) => {
+			const normalized = normalizeHex(draft);
+			if (!normalized) return;
+			const next = hexToHsva(normalized);
+			hsva.value = {
+				...hsva.value,
+				h: next.h,
+				s: next.s,
+				v: next.v
+			};
+		}),
+		rgb: useDraftField(() => ({ ...rgb.value }), ({ r, g, b }) => {
+			if (![
+				r,
+				g,
+				b
+			].every(Number.isFinite)) return;
+			const hsv = rgbToHsv({
+				r: clamp(Math.round(r), 0, 255),
+				g: clamp(Math.round(g), 0, 255),
+				b: clamp(Math.round(b), 0, 255)
+			});
+			hsva.value = {
+				...hsva.value,
+				h: hsv.h,
+				s: hsv.s,
+				v: hsv.v
+			};
+		}),
+		alpha: useDraftField(() => hsva.value.a, (draft) => {
+			if (!Number.isFinite(draft)) return;
+			hsva.value = {
+				...hsva.value,
+				a: clamp(Math.round(draft), 0, 100)
+			};
+		})
+	};
+}
+// src/components/color-picker/ColorPickerPanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex w-[211px] flex-col gap-2 rounded-lg border border-border/50 bg-background p-2 shadow-md" };
+var _hoisted_2 = { class: "flex items-center gap-1" };
+var _hoisted_3 = { class: "flex h-6 min-w-0 flex-1 items-center gap-1 rounded-sm bg-secondary px-1 text-xs text-muted-foreground" };
+var _hoisted_4 = ["aria-label"];
+var _hoisted_5 = ["onUpdate:modelValue", "aria-label"];
+var _hoisted_6 = {
+	key: 2,
+	class: "flex shrink-0 items-center border-l border-border/50 pl-1"
+};
+var _hoisted_7 = ["aria-label"];
+// src/components/color-picker/ColorPickerPanel.vue
+var ColorPickerPanel_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorPickerPanel",
+	props: /*@__PURE__*/ mergeModels({
+		alpha: {
+			type: Boolean,
+			default: true
+		},
+		hexLabel: {},
+		rgbaLabel: {},
+		hueLabel: {},
+		alphaLabel: {},
+		redLabel: {},
+		greenLabel: {},
+		blueLabel: {},
+		saturationBrightnessLabel: {},
+		formatLabel: {}
+	}, {
+		"hsva": { required: true },
+		"hsvaModifiers": {},
+		"displayMode": { required: true },
+		"displayModeModifiers": {}
+	}),
+	emits: ["update:hsva", "update:displayMode"],
+	setup(__props) {
+		const hsva = useModel(__props, "hsva");
+		const displayMode = useModel(__props, "displayMode");
+		const channelLabels = computed(() => ({
+			r: __props.redLabel,
+			g: __props.greenLabel,
+			b: __props.blueLabel
+		}));
+		const { hex, rgb, alpha: alphaField } = useColorPicker(hsva);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(ColorPickerSaturationValue_default, {
+					saturation: hsva.value.s,
+					"onUpdate:saturation": _cache[0] || (_cache[0] = ($event) => hsva.value.s = $event),
+					value: hsva.value.v,
+					"onUpdate:value": _cache[1] || (_cache[1] = ($event) => hsva.value.v = $event),
+					hue: hsva.value.h,
+					"aria-label": __props.saturationBrightnessLabel
+				}, null, 8, [
+					"saturation",
+					"value",
+					"hue",
+					"aria-label"
+				]),
+				createVNode(ColorPickerSlider_default, {
+					modelValue: hsva.value.h,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hsva.value.h = $event),
+					type: "hue",
+					"aria-label": __props.hueLabel
+				}, null, 8, ["modelValue", "aria-label"]),
+				__props.alpha ? (openBlock(), createBlock(ColorPickerSlider_default, {
+					key: 0,
+					modelValue: hsva.value.a,
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => hsva.value.a = $event),
+					type: "alpha",
+					hue: hsva.value.h,
+					saturation: hsva.value.s,
+					brightness: hsva.value.v,
+					"aria-label": __props.alphaLabel
+				}, null, 8, [
+					"modelValue",
+					"hue",
+					"saturation",
+					"brightness",
+					"aria-label"
+				])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_2, [createVNode(unref(Select_default), {
+					modelValue: displayMode.value,
+					"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => displayMode.value = $event)
+				}, {
+					default: withCtx(() => [createVNode(unref(SelectTrigger_default), {
+						"aria-label": __props.formatLabel,
+						class: "h-6 w-[58px] shrink-0 gap-0.5 overflow-clip rounded-sm border-0 px-1.5 py-0 text-xs [&>span]:overflow-visible"
+					}, {
+						default: withCtx(() => [createVNode(unref(SelectValue_default))]),
+						_: 1
+					}, 8, ["aria-label"]), createVNode(unref(SelectContent_default), { class: "min-w-16 p-1" }, {
+						default: withCtx(() => [createVNode(unref(SelectItem_default), {
+							value: "hex",
+							class: "py-1 text-xs"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.hexLabel), 1)]),
+							_: 1
+						}), createVNode(unref(SelectItem_default), {
+							value: "rgba",
+							class: "py-1 text-xs"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.rgbaLabel), 1)]),
+							_: 1
+						})]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["modelValue"]), createElementVNode("div", _hoisted_3, [displayMode.value === "hex" ? withDirectives((openBlock(), createElementBlock("input", {
+					key: 0,
+					"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => unref(hex).draft = $event),
+					type: "text",
+					spellcheck: "false",
+					"aria-label": __props.hexLabel,
+					class: "min-w-0 flex-1 appearance-none border-none bg-transparent p-0 text-center outline-none",
+					onFocus: _cache[6] || (_cache[6] = (...args) => unref(hex).beginEdit && unref(hex).beginEdit(...args)),
+					onInput: _cache[7] || (_cache[7] = (...args) => unref(hex).commit && unref(hex).commit(...args)),
+					onKeydown: _cache[8] || (_cache[8] = withKeys((...args) => unref(hex).commit && unref(hex).commit(...args), ["enter"])),
+					onBlur: _cache[9] || (_cache[9] = (...args) => unref(hex).reset && unref(hex).reset(...args))
+				}, null, 40, _hoisted_4)), [[vModelText, unref(hex).draft]]) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(rgbChannels), (channel) => {
+					return withDirectives((openBlock(), createElementBlock("input", {
+						key: channel.key,
+						"onUpdate:modelValue": ($event) => unref(rgb).draft[channel.key] = $event,
+						type: "number",
+						min: 0,
+						max: 255,
+						"aria-label": channelLabels.value[channel.key],
+						class: "min-w-0 flex-1 appearance-none border-none bg-transparent p-0 text-center outline-none [&::-webkit-inner-spin-button]:appearance-none",
+						onFocus: _cache[10] || (_cache[10] = (...args) => unref(rgb).beginEdit && unref(rgb).beginEdit(...args)),
+						onInput: _cache[11] || (_cache[11] = (...args) => unref(rgb).commit && unref(rgb).commit(...args)),
+						onKeydown: _cache[12] || (_cache[12] = withKeys((...args) => unref(rgb).commit && unref(rgb).commit(...args), ["enter"])),
+						onBlur: _cache[13] || (_cache[13] = (...args) => unref(rgb).reset && unref(rgb).reset(...args))
+					}, null, 40, _hoisted_5)), [[
+						vModelText,
+						unref(rgb).draft[channel.key],
+						void 0,
+						{ number: true }
+					]]);
+				}), 128)), __props.alpha ? (openBlock(), createElementBlock("div", _hoisted_6, [withDirectives(createElementVNode("input", {
+					"onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => unref(alphaField).draft = $event),
+					type: "number",
+					min: 0,
+					max: 100,
+					"aria-label": __props.alphaLabel,
+					class: "w-6 min-w-0 appearance-none border-none bg-transparent p-0 text-right outline-none [&::-webkit-inner-spin-button]:appearance-none",
+					onFocus: _cache[15] || (_cache[15] = (...args) => unref(alphaField).beginEdit && unref(alphaField).beginEdit(...args)),
+					onInput: _cache[16] || (_cache[16] = (...args) => unref(alphaField).commit && unref(alphaField).commit(...args)),
+					onKeydown: _cache[17] || (_cache[17] = withKeys((...args) => unref(alphaField).commit && unref(alphaField).commit(...args), ["enter"])),
+					onBlur: _cache[18] || (_cache[18] = (...args) => unref(alphaField).reset && unref(alphaField).reset(...args))
+				}, null, 40, _hoisted_7), [[
+					vModelText,
+					unref(alphaField).draft,
+					void 0,
+					{ number: true }
+				]]), _cache[19] || (_cache[19] = createElementVNode("span", null, "%", -1))])) : createCommentVNode("", true)])])
+			]);
+		};
+	}
+});
+export { ColorPickerPanel_default as t };

package/dist/shared/ColorPickerSaturationValue-B5VDiMcl.js

@@ -0,0 +1,64 @@
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeStyle, openBlock, ref, useModel } from "vue";
+// src/components/color-picker/ColorPickerSaturationValue.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-valuetext"];
+// src/components/color-picker/ColorPickerSaturationValue.vue
+var ColorPickerSaturationValue_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorPickerSaturationValue",
+	props: /*@__PURE__*/ mergeModels({ hue: {} }, {
+		"saturation": { required: true },
+		"saturationModifiers": {},
+		"value": { required: true },
+		"valueModifiers": {}
+	}),
+	emits: ["update:saturation", "update:value"],
+	setup(__props) {
+		const saturation = useModel(__props, "saturation");
+		const value = useModel(__props, "value");
+		const containerRef = ref(null);
+		const hueBackground = computed(() => `hsl(${__props.hue}, 100%, 50%)`);
+		const handleStyle = computed(() => ({
+			left: `${saturation.value}%`,
+			top: `${100 - value.value}%`
+		}));
+		function updateFromPointer(e) {
+			const el = containerRef.value;
+			if (!el) return;
+			const rect = el.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+			saturation.value = Math.round(x * 100);
+			value.value = Math.round((1 - y) * 100);
+		}
+		function handlePointerDown(e) {
+			e.currentTarget.setPointerCapture(e.pointerId);
+			updateFromPointer(e);
+		}
+		function handlePointerMove(e) {
+			if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
+			updateFromPointer(e);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				role: "slider",
+				"aria-valuetext": `${saturation.value}%, ${value.value}%`,
+				class: "relative aspect-square w-full cursor-crosshair rounded-sm",
+				style: normalizeStyle({
+					backgroundColor: hueBackground.value,
+					touchAction: "none"
+				}),
+				onPointerdown: handlePointerDown,
+				onPointermove: handlePointerMove
+			}, [
+				_cache[0] || (_cache[0] = createElementVNode("div", { class: "absolute inset-0 rounded-sm bg-linear-to-r from-white to-transparent" }, null, -1)),
+				_cache[1] || (_cache[1] = createElementVNode("div", { class: "absolute inset-0 rounded-sm bg-linear-to-b from-transparent to-black" }, null, -1)),
+				createElementVNode("div", {
+					class: "pointer-events-none absolute size-3.5 -translate-1/2 rounded-full border-2 border-white shadow-[0_0_2px_rgba(0,0,0,0.6)]",
+					style: normalizeStyle(handleStyle.value)
+				}, null, 4)
+			], 44, _hoisted_1);
+		};
+	}
+});
+export { ColorPickerSaturationValue_default as t };