reka-ui 2.8.2 → 2.9.1

package/dist/ColorSlider/ColorSliderRoot.js

@@ -0,0 +1,218 @@
+import { createContext } from "../shared/createContext.js";
+import { useDirection } from "../shared/useDirection.js";
+import { useFormControl } from "../shared/useFormControl.js";
+import { useForwardExpose } from "../shared/useForwardExpose.js";
+import { VisuallyHiddenInput_default } from "../VisuallyHidden/VisuallyHiddenInput.js";
+import { colorToString, convertToHsb, convertToHsl, convertToRgb } from "../color/convert.js";
+import { getChannelRange, getChannelValue, setChannelValue } from "../color/channel.js";
+import { normalizeColor } from "../color/parse.js";
+import { SliderRoot_default } from "../Slider/SliderRoot.js";
+import { computed, createBlock, createCommentVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toRefs, unref, watch, withCtx } from "vue";
+import { useVModel } from "@vueuse/core";
+
+//#region src/ColorSlider/ColorSliderRoot.vue?vue&type=script&setup=true&lang.ts
+const [injectColorSliderRootContext, provideColorSliderRootContext] = createContext("ColorSliderRoot");
+var ColorSliderRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ColorSliderRoot",
+	props: {
+		modelValue: {
+			type: [String, Object],
+			required: false
+		},
+		defaultValue: {
+			type: [String, Object],
+			required: false,
+			default: "#000000"
+		},
+		colorSpace: {
+			type: String,
+			required: false,
+			default: "hsl"
+		},
+		channel: {
+			type: String,
+			required: true
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		dir: {
+			type: String,
+			required: false
+		},
+		inverted: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		step: {
+			type: Number,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:color",
+		"change",
+		"changeEnd"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { orientation, disabled, inverted, dir: propDir, channel, colorSpace, step: stepProp } = toRefs(props);
+		const dir = useDirection(propDir);
+		const { forwardRef, currentElement } = useForwardExpose();
+		const isFormControl = useFormControl(currentElement);
+		const modelValue = useVModel(props, "modelValue", emits, {
+			defaultValue: props.defaultValue,
+			passive: props.modelValue === void 0
+		});
+		function toNativeSpace(color$1, ch, space) {
+			switch (ch) {
+				case "hue":
+				case "lightness": return convertToHsl(color$1);
+				case "saturation": return space === "hsb" ? convertToHsb(color$1) : convertToHsl(color$1);
+				case "brightness": return convertToHsb(color$1);
+				case "red":
+				case "green":
+				case "blue": return convertToRgb(color$1);
+				case "alpha": return color$1;
+				default: return color$1;
+			}
+		}
+		const internalColor = ref(toNativeSpace(normalizeColor(modelValue.value ?? props.defaultValue ?? "#000000"), channel.value, colorSpace.value));
+		function isAchromatic(color$1) {
+			const hsl = convertToHsl(color$1);
+			return hsl.s === 0 || hsl.l === 0 || hsl.l >= 100;
+		}
+		watch(() => modelValue.value, (newVal) => {
+			if (newVal == null) return;
+			const parsed = normalizeColor(newVal);
+			const currentHex = colorToString(internalColor.value, "hex");
+			const newHex = colorToString(parsed, "hex");
+			if (currentHex !== newHex) {
+				const nativeColor = toNativeSpace(parsed, channel.value, colorSpace.value);
+				const currentChannelVal = getChannelValue(internalColor.value, channel.value);
+				const newChannelVal = getChannelValue(nativeColor, channel.value);
+				const range = channelRange.value.max - channelRange.value.min;
+				const shouldPreserve = channel.value === "hue" && isAchromatic(parsed) || Math.abs(currentChannelVal - newChannelVal) < range * .02;
+				if (shouldPreserve) internalColor.value = setChannelValue(nativeColor, channel.value, currentChannelVal);
+				else internalColor.value = nativeColor;
+			}
+		});
+		const color = computed({
+			get: () => internalColor.value,
+			set: (newColor) => {
+				internalColor.value = newColor;
+				const hexString = colorToString(newColor, "hex");
+				modelValue.value = hexString;
+				emits("update:color", newColor);
+			}
+		});
+		const channelRange = computed(() => getChannelRange(channel.value));
+		const min = computed(() => channelRange.value.min);
+		const max = computed(() => channelRange.value.max);
+		const step = computed(() => stepProp.value ?? channelRange.value.step);
+		const channelValue = computed(() => getChannelValue(color.value, channel.value));
+		const sliderValue = computed({
+			get: () => [channelValue.value],
+			set: (newValue) => {
+				const clamped = Math.max(min.value, Math.min(max.value, newValue[0]));
+				const newColor = setChannelValue(color.value, channel.value, clamped);
+				color.value = newColor;
+				emits("change", colorToString(newColor, "hex"));
+			}
+		});
+		function handleValueCommit(values) {
+			emits("changeEnd", colorToString(color.value, "hex"));
+		}
+		provideColorSliderRootContext({
+			color: computed(() => color.value),
+			channelValue,
+			channel,
+			colorSpace,
+			orientation,
+			disabled,
+			inverted,
+			min,
+			max,
+			step
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SliderRoot_default), mergeProps(_ctx.$attrs, {
+				ref: unref(forwardRef),
+				modelValue: sliderValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sliderValue.value = $event),
+				orientation: unref(orientation),
+				dir: unref(dir),
+				disabled: unref(disabled),
+				inverted: unref(inverted),
+				min: min.value,
+				max: max.value,
+				step: step.value,
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				onValueCommit: handleValueCommit
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), unref(isFormControl) && _ctx.name ? (openBlock(), createBlock(unref(VisuallyHiddenInput_default), {
+					key: 0,
+					type: "text",
+					value: unref(colorToString)(color.value, "hex"),
+					name: _ctx.name,
+					disabled: unref(disabled),
+					required: _ctx.required
+				}, null, 8, [
+					"value",
+					"name",
+					"disabled",
+					"required"
+				])) : createCommentVNode("v-if", true)]),
+				_: 3
+			}, 16, [
+				"modelValue",
+				"orientation",
+				"dir",
+				"disabled",
+				"inverted",
+				"min",
+				"max",
+				"step",
+				"as",
+				"as-child"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorSlider/ColorSliderRoot.vue
+var ColorSliderRoot_default = ColorSliderRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { ColorSliderRoot_default, injectColorSliderRootContext };
+//# sourceMappingURL=ColorSliderRoot.js.map

package/dist/ColorSlider/ColorSliderRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSliderRoot.js","names":["$attrs","as","asChild","name","required"],"sources":["../../src/ColorSlider/ColorSliderRoot.vue","../../src/ColorSlider/ColorSliderRoot.vue"],"sourcesContent":[],"mappings":"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"}

package/dist/ColorSlider/ColorSliderThumb.cjs

@@ -0,0 +1,66 @@
+const require_rolldown_runtime = require('../rolldown-runtime.cjs');
+const require_color_channel = require('../color/channel.cjs');
+const require_Slider_SliderThumb = require('../Slider/SliderThumb.cjs');
+const require_ColorSlider_ColorSliderRoot = require('./ColorSliderRoot.cjs');
+const vue = require_rolldown_runtime.__toESM(require("vue"));
+
+//#region src/ColorSlider/ColorSliderThumb.vue?vue&type=script&setup=true&lang.ts
+var ColorSliderThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ColorSliderThumb",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = require_ColorSlider_ColorSliderRoot.injectColorSliderRootContext();
+		const ariaLabel = (0, vue.computed)(() => {
+			return require_color_channel.getChannelName(rootContext.channel.value);
+		});
+		const ariaValueText = (0, vue.computed)(() => {
+			const value = rootContext.channelValue.value;
+			const channel = rootContext.channel.value;
+			if (channel === "alpha") return `${Math.round(value)}%`;
+			return String(Math.round(value));
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Slider_SliderThumb.SliderThumb_default), {
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				"aria-label": ariaLabel.value,
+				"aria-valuetext": ariaValueText.value
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {
+					channelName: ariaLabel.value,
+					channelValue: (0, vue.unref)(rootContext).channelValue.value
+				})]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"aria-label",
+				"aria-valuetext"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorSlider/ColorSliderThumb.vue
+var ColorSliderThumb_default = ColorSliderThumb_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+Object.defineProperty(exports, 'ColorSliderThumb_default', {
+  enumerable: true,
+  get: function () {
+    return ColorSliderThumb_default;
+  }
+});
+//# sourceMappingURL=ColorSliderThumb.cjs.map

package/dist/ColorSlider/ColorSliderThumb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSliderThumb.cjs","names":["as","asChild"],"sources":["../../src/ColorSlider/ColorSliderThumb.vue","../../src/ColorSlider/ColorSliderThumb.vue"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EAad,MAAM,cAAc,kEAA6B;EAEjD,MAAM,YAAY,kBAAS,MAAM;AAC/B,UAAO,qCAAe,YAAY,QAAQ,MAAK;EAChD,EAAA;EAED,MAAM,gBAAgB,kBAAS,MAAM;GACnC,MAAM,QAAQ,YAAY,aAAa;GACvC,MAAM,UAAU,YAAY,QAAQ;AACpC,OAAI,YAAY,QACd,QAAO,GAAG,KAAK,MAAM,MAAM,CAAC,CAAC,CAAA;AAE/B,UAAO,OAAO,KAAK,MAAM,MAAM,CAAA;EAChC,EAAA;;gCAIC,qBAUc,eAAA,+CAAA,EAAA;IATX,IAAIA,KAAAA;IACJ,YAAUC,KAAAA;IACV,cAAY,UAAA;IACZ,kBAAgB,cAAA;;8BAEjB,MAGE,CAHF,oBAGE,KAAA,QAAA,WAAA;KAFC,aAAc,UAAA;KACd,cAAe,eAAA,YAAW,CAAC,aAAa"}

package/dist/ColorSlider/ColorSliderThumb.js

@@ -0,0 +1,60 @@
+import { getChannelName } from "../color/channel.js";
+import { SliderThumb_default } from "../Slider/SliderThumb.js";
+import { injectColorSliderRootContext } from "./ColorSliderRoot.js";
+import { computed, createBlock, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+
+//#region src/ColorSlider/ColorSliderThumb.vue?vue&type=script&setup=true&lang.ts
+var ColorSliderThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorSliderThumb",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = injectColorSliderRootContext();
+		const ariaLabel = computed(() => {
+			return getChannelName(rootContext.channel.value);
+		});
+		const ariaValueText = computed(() => {
+			const value = rootContext.channelValue.value;
+			const channel = rootContext.channel.value;
+			if (channel === "alpha") return `${Math.round(value)}%`;
+			return String(Math.round(value));
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SliderThumb_default), {
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				"aria-label": ariaLabel.value,
+				"aria-valuetext": ariaValueText.value
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+					channelName: ariaLabel.value,
+					channelValue: unref(rootContext).channelValue.value
+				})]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"aria-label",
+				"aria-valuetext"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorSlider/ColorSliderThumb.vue
+var ColorSliderThumb_default = ColorSliderThumb_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { ColorSliderThumb_default };
+//# sourceMappingURL=ColorSliderThumb.js.map

package/dist/ColorSlider/ColorSliderThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSliderThumb.js","names":["as","asChild"],"sources":["../../src/ColorSlider/ColorSliderThumb.vue","../../src/ColorSlider/ColorSliderThumb.vue"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EAad,MAAM,cAAc,8BAA6B;EAEjD,MAAM,YAAY,SAAS,MAAM;AAC/B,UAAO,eAAe,YAAY,QAAQ,MAAK;EAChD,EAAA;EAED,MAAM,gBAAgB,SAAS,MAAM;GACnC,MAAM,QAAQ,YAAY,aAAa;GACvC,MAAM,UAAU,YAAY,QAAQ;AACpC,OAAI,YAAY,QACd,QAAO,GAAG,KAAK,MAAM,MAAM,CAAC,CAAC,CAAA;AAE/B,UAAO,OAAO,KAAK,MAAM,MAAM,CAAA;EAChC,EAAA;;uBAIC,YAUc,MAAA,oBAAA,EAAA;IATX,IAAIA,KAAAA;IACJ,YAAUC,KAAAA;IACV,cAAY,UAAA;IACZ,kBAAgB,cAAA;;qBAEjB,MAGE,CAHF,WAGE,KAAA,QAAA,WAAA;KAFC,aAAc,UAAA;KACd,cAAe,MAAA,YAAW,CAAC,aAAa"}

package/dist/ColorSlider/ColorSliderTrack.cjs

@@ -0,0 +1,55 @@
+const require_rolldown_runtime = require('../rolldown-runtime.cjs');
+const require_color_gradient = require('../color/gradient.cjs');
+const require_Slider_SliderTrack = require('../Slider/SliderTrack.cjs');
+const require_ColorSlider_ColorSliderRoot = require('./ColorSliderRoot.cjs');
+const vue = require_rolldown_runtime.__toESM(require("vue"));
+
+//#region src/ColorSlider/ColorSliderTrack.vue?vue&type=script&setup=true&lang.ts
+var ColorSliderTrack_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ColorSliderTrack",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = require_ColorSlider_ColorSliderRoot.injectColorSliderRootContext();
+		const backgroundStyle = (0, vue.computed)(() => {
+			return require_color_gradient.getSliderBackgroundStyle(rootContext.color.value, rootContext.channel.value, rootContext.colorSpace.value);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Slider_SliderTrack.SliderTrack_default), {
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				style: (0, vue.normalizeStyle)(backgroundStyle.value)
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"style"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorSlider/ColorSliderTrack.vue
+var ColorSliderTrack_default = ColorSliderTrack_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+Object.defineProperty(exports, 'ColorSliderTrack_default', {
+  enumerable: true,
+  get: function () {
+    return ColorSliderTrack_default;
+  }
+});
+//# sourceMappingURL=ColorSliderTrack.cjs.map

package/dist/ColorSlider/ColorSliderTrack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSliderTrack.cjs","names":["as","asChild"],"sources":["../../src/ColorSlider/ColorSliderTrack.vue","../../src/ColorSlider/ColorSliderTrack.vue"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EAId,MAAM,cAAc,kEAA6B;EAEjD,MAAM,kBAAkB,kBAAS,MAAM;AACrC,UAAO,gDACL,YAAY,MAAM,OAClB,YAAY,QAAQ,OACpB,YAAY,WAAW,MACzB;EACD,EAAA;;gCAIC,qBAMc,eAAA,+CAAA,EAAA;IALX,IAAIA,KAAAA;IACJ,YAAUC,KAAAA;IACV,OAAK,wBAAE,gBAAA,MAAe;;8BAEvB,MAAQ,CAAR,oBAAQ,KAAA,QAAA,UAAA"}

package/dist/ColorSlider/ColorSliderTrack.js

@@ -0,0 +1,49 @@
+import { getSliderBackgroundStyle } from "../color/gradient.js";
+import { SliderTrack_default } from "../Slider/SliderTrack.js";
+import { injectColorSliderRootContext } from "./ColorSliderRoot.js";
+import { computed, createBlock, defineComponent, normalizeStyle, openBlock, renderSlot, unref, withCtx } from "vue";
+
+//#region src/ColorSlider/ColorSliderTrack.vue?vue&type=script&setup=true&lang.ts
+var ColorSliderTrack_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorSliderTrack",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = injectColorSliderRootContext();
+		const backgroundStyle = computed(() => {
+			return getSliderBackgroundStyle(rootContext.color.value, rootContext.channel.value, rootContext.colorSpace.value);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SliderTrack_default), {
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				style: normalizeStyle(backgroundStyle.value)
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"style"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorSlider/ColorSliderTrack.vue
+var ColorSliderTrack_default = ColorSliderTrack_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { ColorSliderTrack_default };
+//# sourceMappingURL=ColorSliderTrack.js.map

package/dist/ColorSlider/ColorSliderTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSliderTrack.js","names":["as","asChild"],"sources":["../../src/ColorSlider/ColorSliderTrack.vue","../../src/ColorSlider/ColorSliderTrack.vue"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EAId,MAAM,cAAc,8BAA6B;EAEjD,MAAM,kBAAkB,SAAS,MAAM;AACrC,UAAO,yBACL,YAAY,MAAM,OAClB,YAAY,QAAQ,OACpB,YAAY,WAAW,MACzB;EACD,EAAA;;uBAIC,YAMc,MAAA,oBAAA,EAAA;IALX,IAAIA,KAAAA;IACJ,YAAUC,KAAAA;IACV,OAAK,eAAE,gBAAA,MAAe;;qBAEvB,MAAQ,CAAR,WAAQ,KAAA,QAAA,UAAA"}

package/dist/ColorSwatch/ColorSwatch.cjs

@@ -0,0 +1,106 @@
+const require_rolldown_runtime = require('../rolldown-runtime.cjs');
+const require_Primitive_Primitive = require('../Primitive/Primitive.cjs');
+const require_color_convert = require('../color/convert.cjs');
+const require_color_parse = require('../color/parse.cjs');
+const require_color_utils = require('../color/utils.cjs');
+const vue = require_rolldown_runtime.__toESM(require("vue"));
+
+//#region src/ColorSwatch/ColorSwatch.vue?vue&type=script&setup=true&lang.ts
+var ColorSwatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ColorSwatch",
+	props: {
+		color: {
+			type: [String, Object],
+			required: false,
+			default: ""
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorString = (0, vue.computed)(() => {
+			if (!props.color) return "";
+			if (typeof props.color === "string") return props.color;
+			return require_color_convert.colorToString(props.color, "hex");
+		});
+		const colorObj = (0, vue.computed)(() => {
+			if (!props.color) return null;
+			try {
+				return require_color_parse.normalizeColor(props.color);
+			} catch {
+				return null;
+			}
+		});
+		const alpha = (0, vue.computed)(() => colorObj.value?.alpha ?? 0);
+		const isNoColor = (0, vue.computed)(() => !props.color || alpha.value <= 0);
+		const label = (0, vue.computed)(() => {
+			if (props.label) return props.label;
+			if (!colorObj.value || colorObj.value.alpha === 0) return "transparent";
+			try {
+				return require_color_utils.getColorName(colorString.value);
+			} catch {
+				return colorString.value || "transparent";
+			}
+		});
+		const colorContrast = (0, vue.computed)(() => {
+			try {
+				return require_color_utils.getColorContrast(colorString.value);
+			} catch {
+				return void 0;
+			}
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive_Primitive.Primitive), {
+				role: "img",
+				"aria-label": label.value,
+				"aria-roledescription": "color swatch",
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				"data-color-contrast": colorContrast.value,
+				"data-no-color": isNoColor.value ? "" : void 0,
+				style: (0, vue.normalizeStyle)({
+					"--reka-color-swatch-color": colorString.value,
+					"--reka-color-swatch-alpha": String(alpha.value)
+				})
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {
+					color: colorString.value,
+					alpha: alpha.value
+				})]),
+				_: 3
+			}, 8, [
+				"aria-label",
+				"as-child",
+				"as",
+				"data-color-contrast",
+				"data-no-color",
+				"style"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorSwatch/ColorSwatch.vue
+var ColorSwatch_default = ColorSwatch_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+Object.defineProperty(exports, 'ColorSwatch_default', {
+  enumerable: true,
+  get: function () {
+    return ColorSwatch_default;
+  }
+});
+//# sourceMappingURL=ColorSwatch.cjs.map

package/dist/ColorSwatch/ColorSwatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.cjs","names":["asChild","as"],"sources":["../../src/ColorSwatch/ColorSwatch.vue","../../src/ColorSwatch/ColorSwatch.vue"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,QAAQ;EAEd,MAAM,cAAc,kBAAS,MAAM;AACjC,QAAK,MAAM,MACT,QAAO;AACT,cAAW,MAAM,UAAU,SACzB,QAAO,MAAM;AAEf,UAAO,oCAAc,MAAM,OAAO,MAAK;EACxC,EAAA;EAED,MAAM,WAAW,kBAAS,MAAM;AAC9B,QAAK,MAAM,MACT,QAAO;AACT,OAAI;AACF,WAAO,mCAAe,MAAM,MAAK;GACnC,QACM;AACJ,WAAO;GACT;EACD,EAAA;EAED,MAAM,QAAQ,kBAAS,MAAM,SAAS,OAAO,SAAS,EAAC;EACvD,MAAM,YAAY,kBAAS,OAAO,MAAM,SAAS,MAAM,SAAS,EAAC;EAEjE,MAAM,QAAQ,kBAAS,MAAM;AAC3B,OAAI,MAAM,MACR,QAAO,MAAM;AAGf,QAAK,SAAS,SAAS,SAAS,MAAM,UAAU,EAC9C,QAAO;AAET,OAAI;AACF,WAAO,iCAAa,YAAY,MAAK;GACvC,QACM;AACJ,WAAO,YAAY,SAAS;GAC9B;EACD,EAAA;EAED,MAAM,gBAAgB,kBAAS,MAAM;AACnC,OAAI;AACF,WAAO,qCAAiB,YAAY,MAAK;GAC3C,QACM;AAKJ;GACF;EACD,EAAA;;gCAIC,qBAiBY,eAAA,sCAAA,EAAA;IAhBV,MAAK;IACJ,cAAY,MAAA;IACb,wBAAqB;IACpB,YAAUA,KAAAA;IACV,IAAIC,KAAAA;IACJ,uBAAqB,cAAA;IACrB,iBAAe,UAAA,QAAS;IACxB,OAAK,wBAAA;kCAAuC,YAAA;kCAAgD,OAAO,MAAA,MAAK;;;8BAKzG,MAGE,CAHF,oBAGE,KAAA,QAAA,WAAA;KAFC,OAAO,YAAA;KACP,OAAO,MAAA"}

package/dist/ColorSwatch/ColorSwatch.js

@@ -0,0 +1,100 @@
+import { Primitive } from "../Primitive/Primitive.js";
+import { colorToString } from "../color/convert.js";
+import { normalizeColor } from "../color/parse.js";
+import { getColorContrast, getColorName } from "../color/utils.js";
+import { computed, createBlock, defineComponent, normalizeStyle, openBlock, renderSlot, unref, withCtx } from "vue";
+
+//#region src/ColorSwatch/ColorSwatch.vue?vue&type=script&setup=true&lang.ts
+var ColorSwatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorSwatch",
+	props: {
+		color: {
+			type: [String, Object],
+			required: false,
+			default: ""
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colorString = computed(() => {
+			if (!props.color) return "";
+			if (typeof props.color === "string") return props.color;
+			return colorToString(props.color, "hex");
+		});
+		const colorObj = computed(() => {
+			if (!props.color) return null;
+			try {
+				return normalizeColor(props.color);
+			} catch {
+				return null;
+			}
+		});
+		const alpha = computed(() => colorObj.value?.alpha ?? 0);
+		const isNoColor = computed(() => !props.color || alpha.value <= 0);
+		const label = computed(() => {
+			if (props.label) return props.label;
+			if (!colorObj.value || colorObj.value.alpha === 0) return "transparent";
+			try {
+				return getColorName(colorString.value);
+			} catch {
+				return colorString.value || "transparent";
+			}
+		});
+		const colorContrast = computed(() => {
+			try {
+				return getColorContrast(colorString.value);
+			} catch {
+				return void 0;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				role: "img",
+				"aria-label": label.value,
+				"aria-roledescription": "color swatch",
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				"data-color-contrast": colorContrast.value,
+				"data-no-color": isNoColor.value ? "" : void 0,
+				style: normalizeStyle({
+					"--reka-color-swatch-color": colorString.value,
+					"--reka-color-swatch-alpha": String(alpha.value)
+				})
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+					color: colorString.value,
+					alpha: alpha.value
+				})]),
+				_: 3
+			}, 8, [
+				"aria-label",
+				"as-child",
+				"as",
+				"data-color-contrast",
+				"data-no-color",
+				"style"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorSwatch/ColorSwatch.vue
+var ColorSwatch_default = ColorSwatch_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { ColorSwatch_default };
+//# sourceMappingURL=ColorSwatch.js.map