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

package/dist/shared/ColorPickerSlider--mnQyzWD.js

@@ -0,0 +1,305 @@
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeStyle, openBlock, useModel } from "vue";
+import { memoize } from "es-toolkit/compat";
+// ../shared-frontend-utils/src/colorUtil.ts
+function rgbToHsl({ r, g, b }) {
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b), min = Math.min(r, g, b);
+	let h = 0, s = 0;
+	const l = (max + min) / 2;
+	if (max !== min) {
+		const d = max - min;
+		s = l > .5 ? d / (2 - max - min) : d / (max + min);
+		switch (max) {
+			case r:
+				h = (g - b) / d + (g < b ? 6 : 0);
+				break;
+			case g:
+				h = (b - r) / d + 2;
+				break;
+			case b: h = (r - g) / d + 4;
+		}
+		h /= 6;
+	}
+	return {
+		h,
+		s,
+		l
+	};
+}
+function hexToRgb(hex) {
+	let r = 0, g = 0, b = 0;
+	if (hex.length === 4 || hex.length === 5) {
+		r = parseInt(hex[1] + hex[1], 16);
+		g = parseInt(hex[2] + hex[2], 16);
+		b = parseInt(hex[3] + hex[3], 16);
+	} else if (hex.length === 7 || hex.length === 9) {
+		r = parseInt(hex.slice(1, 3), 16);
+		g = parseInt(hex.slice(3, 5), 16);
+		b = parseInt(hex.slice(5, 7), 16);
+	}
+	return {
+		r,
+		g,
+		b
+	};
+}
+function rgbToHex({ r, g, b }) {
+	const toHex = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function hsbToRgb({ h, s, b }) {
+	const hh = (h % 360 + 360) % 360;
+	const ss = Math.max(0, Math.min(100, s)) / 100;
+	const vv = Math.max(0, Math.min(100, b)) / 100;
+	const c = vv * ss;
+	const x = c * (1 - Math.abs(hh / 60 % 2 - 1));
+	const m = vv - c;
+	let rp, gp, bp;
+	if (hh < 60) {
+		rp = c;
+		gp = x;
+		bp = 0;
+	} else if (hh < 120) {
+		rp = x;
+		gp = c;
+		bp = 0;
+	} else if (hh < 180) {
+		rp = 0;
+		gp = c;
+		bp = x;
+	} else if (hh < 240) {
+		rp = 0;
+		gp = x;
+		bp = c;
+	} else if (hh < 300) {
+		rp = x;
+		gp = 0;
+		bp = c;
+	} else {
+		rp = c;
+		gp = 0;
+		bp = x;
+	}
+	return {
+		r: Math.floor((rp + m) * 255),
+		g: Math.floor((gp + m) * 255),
+		b: Math.floor((bp + m) * 255)
+	};
+}
+var identifyColorFormat = (color) => {
+	if (!color) return null;
+	if (color.startsWith("#") && (color.length === 4 || color.length === 5 || color.length === 7 || color.length === 9)) return "hex";
+	if (/rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*/.test(color)) return color.includes("rgba") ? "rgba" : "rgb";
+	if (/hsla?\(\s*\d+(\.\d+)?\s*,\s*\d+(\.\d+)?%\s*,\s*\d+(\.\d+)?%/.test(color)) return color.includes("hsla") ? "hsla" : "hsl";
+	return null;
+};
+var isHSLA = (color) => {
+	if (typeof color !== "object" || color === null) return false;
+	return [
+		"h",
+		"s",
+		"l",
+		"a"
+	].every((key) => typeof color[key] === "number" && !isNaN(color[key]));
+};
+function parseToHSLA(color, format) {
+	let match;
+	switch (format) {
+		case "hex": {
+			let a = 1;
+			let hexColor = color;
+			if (color.length === 9) {
+				a = parseInt(color.slice(7, 9), 16) / 255;
+				hexColor = color.slice(0, 7);
+			} else if (color.length === 5) {
+				const aChar = color[4];
+				a = parseInt(aChar + aChar, 16) / 255;
+				hexColor = color.slice(0, 4);
+			}
+			const hsl = rgbToHsl(hexToRgb(hexColor));
+			return {
+				h: Math.round(hsl.h * 360),
+				s: +(hsl.s * 100).toFixed(1),
+				l: +(hsl.l * 100).toFixed(1),
+				a
+			};
+		}
+		case "rgb":
+		case "rgba": {
+			match = color.match(/\d+(\.\d+)?/g);
+			if (!match || match.length < 3) return null;
+			const [r, g, b] = match.map(Number);
+			const hsl = rgbToHsl({
+				r,
+				g,
+				b
+			});
+			const a = format === "rgba" && match[3] ? parseFloat(match[3]) : 1;
+			return {
+				h: Math.round(hsl.h * 360),
+				s: +(hsl.s * 100).toFixed(1),
+				l: +(hsl.l * 100).toFixed(1),
+				a
+			};
+		}
+		case "hsl":
+		case "hsla": {
+			match = color.match(/\d+(\.\d+)?/g);
+			if (!match || match.length < 3) return null;
+			const [h, s, l] = match.map(Number);
+			return {
+				h,
+				s,
+				l,
+				a: format === "hsla" && match[3] ? parseFloat(match[3]) : 1
+			};
+		}
+		default: return null;
+	}
+}
+function rgbToHsv({ r, g, b }) {
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b);
+	const d = max - Math.min(r, g, b);
+	let h = 0;
+	const s = max === 0 ? 0 : d / max * 100;
+	const v = max * 100;
+	if (d !== 0) switch (max) {
+		case r:
+			h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
+			break;
+		case g:
+			h = ((b - r) / d + 2) * 60;
+			break;
+		case b: h = ((r - g) / d + 4) * 60;
+	}
+	return {
+		h,
+		s,
+		v
+	};
+}
+function normalizeHex(value) {
+	const digits = value.trim().replace(/^#/, "");
+	return /^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(digits) ? `#${digits}` : null;
+}
+function hexToHsva(hex) {
+	const normalized = hex.startsWith("#") ? hex : `#${hex}`;
+	let a = 100;
+	let hexColor = normalized;
+	if (normalized.length === 9) {
+		a = Math.round(parseInt(normalized.slice(7, 9), 16) / 255 * 100);
+		hexColor = normalized.slice(0, 7);
+	} else if (normalized.length === 5) {
+		const aChar = normalized[4];
+		a = Math.round(parseInt(aChar + aChar, 16) / 255 * 100);
+		hexColor = normalized.slice(0, 4);
+	}
+	return {
+		...rgbToHsv(hexToRgb(hexColor)),
+		a
+	};
+}
+function hsvaToHex(hsva) {
+	const hex = rgbToHex(hsbToRgb({
+		h: hsva.h,
+		s: hsva.s,
+		b: hsva.v
+	}));
+	if (hsva.a >= 100) return hex.toLowerCase();
+	return `${hex}${Math.round(hsva.a / 100 * 255).toString(16).padStart(2, "0")}`.toLowerCase();
+}
+var applyColorAdjustments = (color, options) => {
+	if (!Object.keys(options).length) return color;
+	const format = identifyColorFormat(color);
+	if (!format) {
+		console.warn(`Unsupported color format in color palette: ${color}`);
+		return color;
+	}
+	const hsla = parseToHSLA(color, format);
+	if (!isHSLA(hsla)) {
+		console.warn(`Invalid color values in color palette: ${color}`);
+		return color;
+	}
+	if (options.lightness) hsla.l = Math.max(0, Math.min(100, hsla.l + options.lightness * 100));
+	if (options.opacity) hsla.a = Math.max(0, Math.min(1, options.opacity));
+	return `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a})`;
+};
+memoize(applyColorAdjustments, (color, options) => `${color}-${JSON.stringify(options)}`);
+// src/components/color-picker/ColorPickerSlider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-valuemax", "aria-valuenow"];
+// src/components/color-picker/ColorPickerSlider.vue
+var ColorPickerSlider_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorPickerSlider",
+	props: /*@__PURE__*/ mergeModels({
+		type: {},
+		hue: { default: 0 },
+		saturation: { default: 100 },
+		brightness: { default: 100 }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const max = computed(() => __props.type === "hue" ? 360 : 100);
+		const fraction = computed(() => modelValue.value / max.value);
+		const trackBackground = computed(() => {
+			if (__props.type === "hue") return "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)";
+			return `linear-gradient(to right, transparent, ${rgbToHex(hsbToRgb({
+				h: __props.hue,
+				s: __props.saturation,
+				b: __props.brightness
+			}))})`;
+		});
+		const containerStyle = computed(() => {
+			if (__props.type === "alpha") return {
+				backgroundImage: "repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)",
+				backgroundSize: "8px 8px",
+				touchAction: "none"
+			};
+			return {
+				background: trackBackground.value,
+				touchAction: "none"
+			};
+		});
+		function updateFromPointer(e) {
+			const rect = e.currentTarget.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			modelValue.value = Math.round(x * max.value);
+		}
+		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", {
+				role: "slider",
+				"aria-valuemin": 0,
+				"aria-valuemax": max.value,
+				"aria-valuenow": modelValue.value,
+				class: "relative flex h-4 cursor-pointer items-center rounded-full p-px",
+				style: normalizeStyle(containerStyle.value),
+				onPointerdown: handlePointerDown,
+				onPointermove: handlePointerMove
+			}, [__props.type === "alpha" ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "absolute inset-0 rounded-full",
+				style: normalizeStyle({ background: trackBackground.value })
+			}, null, 4)) : createCommentVNode("", true), createElementVNode("div", {
+				class: "pointer-events-none absolute aspect-square h-full -translate-x-1/2 rounded-full border-2 border-white shadow-[0_0_2px_rgba(0,0,0,0.6)]",
+				style: normalizeStyle({ left: `${fraction.value * 100}%` })
+			}, null, 4)], 44, _hoisted_1);
+		};
+	}
+});
+export { normalizeHex as a, hsvaToHex as i, hexToHsva as n, rgbToHex as o, hsbToRgb as r, rgbToHsv as s, ColorPickerSlider_default as t };

package/dist/shared/ContextMenuContent-RNyBBJOX.js

@@ -0,0 +1,62 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { menuContentClass } from "../menu/menuStyles.js";
+import { createBlock, createPropsRestProxy, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { ContextMenuContent, ContextMenuPortal, injectContextMenuRootContext, useForwardPropsEmits } from "reka-ui";
+// src/components/menu/ContextMenuContent.vue
+var ContextMenuContent_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ContextMenuContent",
+	props: {
+		forceMount: { type: Boolean },
+		loop: { type: Boolean },
+		memoDependencies: {},
+		sideFlip: { type: Boolean },
+		alignOffset: {},
+		alignFlip: { type: Boolean },
+		avoidCollisions: { type: Boolean },
+		collisionBoundary: {},
+		collisionPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: { type: Boolean },
+		reference: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(__props, { emit: __emit }) {
+		const restProps = createPropsRestProxy(__props, ["class"]);
+		const forwarded = useForwardPropsEmits(restProps, __emit);
+		const rootContext = injectContextMenuRootContext();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ContextMenuPortal), { key: Number(unref(rootContext).open.value) }, {
+				default: withCtx(() => [createVNode(unref(ContextMenuContent), mergeProps({
+					...unref(forwarded),
+					..._ctx.$attrs
+				}, { class: unref(cn)(unref(menuContentClass), __props.class) }), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["class"])]),
+				_: 3
+			});
+		};
+	}
+});
+export { ContextMenuContent_default as t };

package/dist/shared/DialogClose-CrtPRSNX.js

@@ -0,0 +1,22 @@
+import { t as Button_default } from "./Button-Dj_H5v3V.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+import { DialogClose } from "reka-ui";
+// src/components/dialog/DialogClose.vue
+var DialogClose_default = /* @__PURE__ */ defineComponent({
+	__name: "DialogClose",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DialogClose), { "as-child": "" }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(Button_default), {
+					size: "icon",
+					variant: "muted-textonly"
+				}, {
+					default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("i", { class: "icon-[lucide--x]" }, null, -1)])]),
+					_: 1
+				})])]),
+				_: 3
+			});
+		};
+	}
+});
+export { DialogClose_default as t };

package/dist/shared/DialogContent-v2s55FXs.js

@@ -0,0 +1,71 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { dialogContentVariants } from "../dialog/dialog.variants.js";
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { DialogContent, useForwardPropsEmits } from "reka-ui";
+// src/components/dialog/DialogContent.vue
+var DialogContent_default = /* @__PURE__ */ defineComponent({
+	__name: "DialogContent",
+	props: {
+		forceMount: { type: Boolean },
+		disableOutsidePointerEvents: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		},
+		maximized: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		surface: {}
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(__props, { emit: __emit }) {
+		const restProps = createPropsRestProxy(__props, [
+			"class",
+			"maximized",
+			"size",
+			"surface"
+		]);
+		const forwarded = useForwardPropsEmits(restProps, __emit);
+		function focusAutofocusTarget(event) {
+			if (event.defaultPrevented || !(event.target instanceof HTMLElement)) return;
+			const target = event.target.querySelector("[autofocus]");
+			if (!target) return;
+			target.focus();
+			if (document.activeElement === target) event.preventDefault();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DialogContent), mergeProps(unref(forwarded), {
+				"data-reka-dialog-content": "",
+				"data-maximized": __props.maximized || void 0,
+				class: unref(cn)(unref(dialogContentVariants)({
+					maximized: __props.maximized,
+					size: __props.size,
+					surface: __props.surface
+				}), __props.class, __props.maximized && "top-2 left-2 size-auto max-h-none max-w-none sm:max-w-none"),
+				onOpenAutoFocus: focusAutofocusTarget,
+				onFocus: focusAutofocusTarget
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["data-maximized", "class"]);
+		};
+	}
+});
+export { DialogContent_default as t };

package/dist/shared/DialogOverlay-C9qv0zme.js

@@ -0,0 +1,33 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, unref } from "vue";
+import { DialogOverlay } from "reka-ui";
+// src/components/dialog/DialogOverlay.vue
+var DialogOverlay_default = /* @__PURE__ */ defineComponent({
+	__name: "DialogOverlay",
+	props: {
+		forceMount: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		}
+	},
+	setup(__props) {
+		const delegated = createPropsRestProxy(__props, ["class"]);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DialogOverlay), mergeProps(delegated, {
+				"data-slot": "dialog-overlay",
+				"data-testid": "dialog-overlay",
+				class: unref(cn)("fixed inset-0 bg-black/70 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", __props.class)
+			}), null, 16, ["class"]);
+		};
+	}
+});
+export { DialogOverlay_default as t };

package/dist/shared/DialogPortal-DtCpLgtO.js

@@ -0,0 +1,36 @@
+import { createBlock, createCommentVNode, createElementVNode, defineComponent, mergeProps, openBlock, reactive, ref, renderSlot, unref, useTemplateRef, watch, withCtx } from "vue";
+import { ConfigProvider, DialogPortal, injectConfigProviderContext, injectDialogRootContext } from "reka-ui";
+// src/components/dialog/DialogPortal.vue
+var DialogPortal_default = /* @__PURE__ */ defineComponent({
+	__name: "DialogPortal",
+	props: {
+		to: {},
+		disabled: { type: Boolean },
+		defer: { type: Boolean },
+		forceMount: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const { open } = injectDialogRootContext();
+		const config = reactive(injectConfigProviderContext(null) ?? {});
+		const portalTarget = useTemplateRef("portalTarget");
+		const openCount = ref(0);
+		watch(open, (isOpen) => {
+			if (isOpen) openCount.value++;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DialogPortal), mergeProps({ key: openCount.value }, props), {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "portalTarget",
+					ref: portalTarget,
+					class: "pointer-events-none fixed inset-0 z-overlay *:pointer-events-auto empty:hidden"
+				}, [portalTarget.value ? (openBlock(), createBlock(unref(ConfigProvider), mergeProps({ key: 0 }, config, { "teleport-to": portalTarget.value }), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["teleport-to"])) : createCommentVNode("", true)], 512)]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+export { DialogPortal_default as t };

package/dist/shared/DialogTitle-Chomvpgq.js

@@ -0,0 +1,41 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { Primitive, injectDialogRootContext } from "reka-ui";
+// src/components/dialog/DialogTitle.vue
+var DialogTitle_default = /* @__PURE__ */ defineComponent({
+	__name: "DialogTitle",
+	props: {
+		asChild: { type: Boolean },
+		as: { default: "h2" },
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		}
+	},
+	setup(__props) {
+		const dialogRoot = injectDialogRootContext(null);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				id: unref(dialogRoot)?.titleId,
+				as: __props.as,
+				"as-child": __props.asChild,
+				class: normalizeClass(unref(cn)("min-w-0 text-base font-semibold wrap-break-word text-foreground", __props.class))
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"id",
+				"as",
+				"as-child",
+				"class"
+			]);
+		};
+	}
+});
+export { DialogTitle_default as t };

package/dist/shared/Input-DOeNoniw.js

@@ -0,0 +1,36 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { createElementBlock, defineComponent, mergeModels, normalizeClass, openBlock, unref, useModel, useTemplateRef, vModelText, withDirectives } from "vue";
+// src/components/input/Input.vue
+var Input_default = /* @__PURE__ */ defineComponent({
+	__name: "Input",
+	props: /*@__PURE__*/ mergeModels({ class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } }, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose }) {
+		const modelValue = useModel(__props, "modelValue");
+		const inputRef = useTemplateRef("inputEl");
+		__expose({
+			focus: () => inputRef.value?.focus(),
+			select: () => inputRef.value?.select(),
+			blur: () => inputRef.value?.blur(),
+			setSelectionRange: (start, end) => inputRef.value?.setSelectionRange(start, end),
+			selectAll: () => inputRef.value?.setSelectionRange(0, inputRef.value.value.length)
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("input", {
+				ref: "inputEl",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				class: normalizeClass(unref(cn)("flex h-10 w-full min-w-0 appearance-none rounded-lg border-none bg-secondary px-4 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-1 aria-invalid:ring-destructive", __props.class))
+			}, null, 2)), [[vModelText, modelValue.value]]);
+		};
+	}
+});
+export { Input_default as t };

package/dist/shared/InputGroup-BYt6BWpk.js

@@ -0,0 +1,23 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+// src/components/input-group/InputGroup.vue
+var InputGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "InputGroup",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-slot": "input-group",
+				role: "group",
+				class: normalizeClass(unref(cn)("group/input-group relative flex h-10 w-full min-w-0 items-center rounded-lg bg-secondary text-sm text-foreground outline-none", "has-[>[data-align=inline-start]]:*:data-[slot=input-group-control]:pl-2", "has-[>[data-align=inline-end]]:*:data-[slot=input-group-control]:pr-2", "has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring", "has-[[data-slot=input-group-control][aria-invalid=true]]:ring-1 has-[[data-slot=input-group-control][aria-invalid=true]]:ring-destructive", __props.class))
+			}, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+export { InputGroup_default as t };

package/dist/shared/InputGroupAddon-B1cn7czs.js

@@ -0,0 +1,36 @@
+import { t as cn } from "./src-DTwuqov4.js";
+import { inputGroupAddonVariants } from "../input-group/inputGroup.variants.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+// src/components/input-group/InputGroupAddon.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-align"];
+// src/components/input-group/InputGroupAddon.vue
+var InputGroupAddon_default = /* @__PURE__ */ defineComponent({
+	__name: "InputGroupAddon",
+	props: {
+		align: { default: "inline-start" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(__props) {
+		function focusControl(event) {
+			if (!(event.target instanceof Element) || event.target.closest("button")) return;
+			if (!(event.currentTarget instanceof HTMLElement)) return;
+			event.currentTarget.parentElement?.querySelector("input")?.focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "group",
+				"data-slot": "input-group-addon",
+				"data-align": __props.align,
+				class: normalizeClass(unref(cn)(unref(inputGroupAddonVariants)({ align: __props.align }), __props.class)),
+				onClick: focusControl
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+		};
+	}
+});
+export { InputGroupAddon_default as t };