@auronui/vue 1.0.0

package/dist/components/collapsible/CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,40 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { useCollapsibleInject } from "./collapsible.context.js";
+import { createBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { CollapsibleTrigger } from "reka-ui";
+//#region src/components/collapsible/CollapsibleTrigger.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-state"];
+var CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CollapsibleTrigger",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const ctx = useCollapsibleInject();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(CollapsibleTrigger), { class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.trigger(), props.class)) }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createElementVNode("span", {
+					class: normalizeClass(unref(ctx).slotFns.value.indicator()),
+					"data-state": unref(ctx).isOpen.value ? "open" : "closed",
+					"aria-hidden": "true"
+				}, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"aria-hidden": "true",
+					focusable: "false"
+				}, [createElementVNode("polyline", { points: "6 9 12 15 18 9" })], -1)])], 10, _hoisted_1)]),
+				_: 3
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/collapsible/CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleTrigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleTrigger } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useCollapsibleInject } from './collapsible.context'\n\nconst props = defineProps<{ class?: string }>()\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleTrigger :class=\"composeClassName(ctx.slotFns.value.trigger(), props.class)\">\n    <slot />\n    <span\n      :class=\"ctx.slotFns.value.indicator()\"\n      :data-state=\"ctx.isOpen.value ? 'open' : 'closed'\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <polyline points=\"6 9 12 15 18 9\" />\n      </svg>\n    </span>\n  </CollapsibleTrigger>\n</template>\n"],"mappings":";;;;;;;;;;EAKA,MAAM,QAAQ;EACd,MAAM,MAAM,sBAAqB;;uBAI/B,YAuBqB,MAAA,mBAAA,EAAA,EAvBA,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,SAAO,EAAI,MAAM,MAAK,CAAA,EAAA,EAAA;2BAC3E,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,mBAoBO,QAAA;KAnBJ,OAAK,eAAE,MAAA,IAAG,CAAC,QAAQ,MAAM,WAAS,CAAA;KAClC,cAAY,MAAA,IAAG,CAAC,OAAO,QAAK,SAAA;KAC7B,eAAY;sCAEZ,mBAcM,OAAA;KAbJ,OAAM;KACN,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,eAAY;KACZ,WAAU;QAEV,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA,IAAA,WAAA,CAAA,CAAA"}

package/dist/components/collapsible/collapsible-group.context.js

@@ -0,0 +1,13 @@
+import { inject, provide } from "vue";
+//#region src/components/collapsible/collapsible-group.context.ts
+var collapsibleGroupKey = Symbol("CollapsibleGroup");
+function provideCollapsibleGroup(ctx) {
+	provide(collapsibleGroupKey, ctx);
+}
+function injectCollapsibleGroup() {
+	return inject(collapsibleGroupKey, null);
+}
+//#endregion
+export { injectCollapsibleGroup, provideCollapsibleGroup };
+
+//# sourceMappingURL=collapsible-group.context.js.map

package/dist/components/collapsible/collapsible-group.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-group.context.js","names":[],"sources":["../../../src/components/collapsible/collapsible-group.context.ts"],"sourcesContent":["import { inject, provide, type InjectionKey, type Ref } from 'vue'\n\nexport interface CollapsibleGroupRegistryEntry {\n  id: string\n  open: Ref<boolean>\n}\n\nexport interface CollapsibleGroupContext {\n  allowMultiple: Ref<boolean>\n  register: (entry: CollapsibleGroupRegistryEntry) => void\n  unregister: (id: string) => void\n  // Called by a Collapsible when it opens; in single-open mode this closes siblings.\n  notifyOpen: (openingId: string) => void\n}\n\nexport const collapsibleGroupKey: InjectionKey<CollapsibleGroupContext> = Symbol('CollapsibleGroup')\n\nexport function provideCollapsibleGroup(ctx: CollapsibleGroupContext): void {\n  provide(collapsibleGroupKey, ctx)\n}\n\nexport function injectCollapsibleGroup(): CollapsibleGroupContext | null {\n  return inject(collapsibleGroupKey, null)\n}\n"],"mappings":";;AAeA,IAAa,sBAA6D,OAAO,mBAAmB;AAEpG,SAAgB,wBAAwB,KAAoC;AAC1E,SAAQ,qBAAqB,IAAI;;AAGnC,SAAgB,yBAAyD;AACvE,QAAO,OAAO,qBAAqB,KAAK"}

package/dist/components/collapsible/collapsible.context.js

@@ -0,0 +1,7 @@
+import { createContext } from "../../utils/context.js";
+//#region src/components/collapsible/collapsible.context.ts
+var { useProvide: useCollapsibleProvide, useInject: useCollapsibleInject, key: collapsibleContextKey } = createContext("Collapsible");
+//#endregion
+export { useCollapsibleInject, useCollapsibleProvide };
+
+//# sourceMappingURL=collapsible.context.js.map

package/dist/components/collapsible/collapsible.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.context.js","names":[],"sources":["../../../src/components/collapsible/collapsible.context.ts"],"sourcesContent":["import { createContext } from '../../utils/context'\nimport type { Ref } from 'vue'\nimport type { collapsibleVariants } from '@auronui/styles'\n\nexport type CollapsibleSlotFns = ReturnType<typeof collapsibleVariants>\n\nexport interface CollapsibleContext {\n  slotFns: Ref<CollapsibleSlotFns>\n  // Live open state ref, provided by Collapsible root so child parts can react\n  isOpen: Ref<boolean>\n}\n\nexport const {\n  useProvide: useCollapsibleProvide,\n  useInject: useCollapsibleInject,\n  key: collapsibleContextKey,\n} = createContext<CollapsibleContext>('Collapsible')\n"],"mappings":";;AAYA,IAAa,EACX,YAAY,uBACZ,WAAW,sBACX,KAAK,0BACH,cAAkC,cAAc"}

package/dist/components/color-area/ColorArea.js

@@ -0,0 +1,7 @@
+import ColorArea_vue_vue_type_script_setup_true_lang_default from "./ColorArea.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/color-area/ColorArea.vue
+var ColorArea_default = ColorArea_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ColorArea_default as default };
+
+//# sourceMappingURL=ColorArea.js.map

package/dist/components/color-area/ColorArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.js","names":[],"sources":["../../../src/components/color-area/ColorArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport {\n  ColorAreaRoot,\n  ColorAreaArea,\n  ColorAreaThumb,\n  getAreaBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorAreaVariants, type ColorAreaVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  xChannel?: ColorChannel\n  yChannel?: ColorChannel\n  colorSpace?: ColorSpace\n  disabled?: boolean\n  showDots?: ColorAreaVariants['showDots']\n  class?: string\n  thumbClass?: string\n}>(), {\n  xChannel: 'saturation',\n  yChannel: 'brightness',\n  showDots: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\n// Optional picker context — when absent, fall back to local useColorState\nconst pickerCtx = inject(ColorPickerContextKey, null)\nconst local = pickerCtx\n  ? null\n  : useColorState({ value: props.modelValue, defaultValue: props.defaultValue })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value\n)\n\nconst styles = computed(() =>\n  colorAreaVariants({ showDots: props.showDots })\n)\n\nconst areaBgStyle = computed(() => ({\n  ...getAreaBackgroundStyle(color.value, props.xChannel!, props.yChannel!),\n  position: 'absolute' as const,\n  inset: 0,\n  borderRadius: 'inherit',\n}))\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Write both active channels back via context\n    pickerCtx.setChannels([\n      { channel: props.xChannel!, value: getChannelValue(next, props.xChannel!) },\n      { channel: props.yChannel!, value: getChannelValue(next, props.yChannel!) },\n    ])\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorAreaRoot\n    :model-value=\"color\"\n    :x-channel=\"xChannel\"\n    :y-channel=\"yChannel\"\n    :color-space=\"colorSpace\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <ColorAreaArea :style=\"areaBgStyle\">\n      <ColorAreaThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorAreaArea>\n  </ColorAreaRoot>\n</template>\n"],"mappings":""}

package/dist/components/color-area/ColorArea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,83 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { ColorPickerContextKey } from "../color-picker/color-picker.context.js";
+import { useColorState } from "../../composables/useColorState.js";
+import { computed, createBlock, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "vue";
+import { colorAreaVariants } from "@auronui/styles";
+import { ColorAreaArea, ColorAreaRoot, ColorAreaThumb, getAreaBackgroundStyle, getChannelValue } from "reka-ui";
+//#region src/components/color-area/ColorArea.vue?vue&type=script&setup=true&lang.ts
+var ColorArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorArea",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		xChannel: { default: "saturation" },
+		yChannel: { default: "brightness" },
+		colorSpace: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		showDots: { default: false },
+		class: {},
+		thumbClass: {}
+	},
+	emits: ["update:modelValue", "update:color"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const pickerCtx = inject(ColorPickerContextKey, null);
+		const local = pickerCtx ? null : useColorState({
+			value: props.modelValue,
+			defaultValue: props.defaultValue
+		});
+		const color = computed(() => pickerCtx ? pickerCtx.color.value : local.color.value);
+		const styles = computed(() => colorAreaVariants({ showDots: props.showDots }));
+		const areaBgStyle = computed(() => ({
+			...getAreaBackgroundStyle(color.value, props.xChannel, props.yChannel),
+			position: "absolute",
+			inset: 0,
+			borderRadius: "inherit"
+		}));
+		function onColorUpdate(next) {
+			if (pickerCtx) pickerCtx.setChannels([{
+				channel: props.xChannel,
+				value: getChannelValue(next, props.xChannel)
+			}, {
+				channel: props.yChannel,
+				value: getChannelValue(next, props.yChannel)
+			}]);
+			else {
+				emit("update:modelValue", next);
+				emit("update:color", next);
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ColorAreaRoot), {
+				"model-value": color.value,
+				"x-channel": __props.xChannel,
+				"y-channel": __props.yChannel,
+				"color-space": __props.colorSpace,
+				disabled: __props.disabled,
+				class: normalizeClass(unref(composeClassName)(styles.value.base(), props.class)),
+				"onUpdate:color": onColorUpdate
+			}, {
+				default: withCtx(() => [createVNode(unref(ColorAreaArea), { style: normalizeStyle(areaBgStyle.value) }, {
+					default: withCtx(() => [createVNode(unref(ColorAreaThumb), { class: normalizeClass(unref(composeClassName)(styles.value.thumb(), __props.thumbClass)) }, null, 8, ["class"])]),
+					_: 1
+				}, 8, ["style"])]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"x-channel",
+				"y-channel",
+				"color-space",
+				"disabled",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { ColorArea_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ColorArea.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/color-area/ColorArea.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-area/ColorArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport {\n  ColorAreaRoot,\n  ColorAreaArea,\n  ColorAreaThumb,\n  getAreaBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorAreaVariants, type ColorAreaVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  xChannel?: ColorChannel\n  yChannel?: ColorChannel\n  colorSpace?: ColorSpace\n  disabled?: boolean\n  showDots?: ColorAreaVariants['showDots']\n  class?: string\n  thumbClass?: string\n}>(), {\n  xChannel: 'saturation',\n  yChannel: 'brightness',\n  showDots: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\n// Optional picker context — when absent, fall back to local useColorState\nconst pickerCtx = inject(ColorPickerContextKey, null)\nconst local = pickerCtx\n  ? null\n  : useColorState({ value: props.modelValue, defaultValue: props.defaultValue })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value\n)\n\nconst styles = computed(() =>\n  colorAreaVariants({ showDots: props.showDots })\n)\n\nconst areaBgStyle = computed(() => ({\n  ...getAreaBackgroundStyle(color.value, props.xChannel!, props.yChannel!),\n  position: 'absolute' as const,\n  inset: 0,\n  borderRadius: 'inherit',\n}))\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Write both active channels back via context\n    pickerCtx.setChannels([\n      { channel: props.xChannel!, value: getChannelValue(next, props.xChannel!) },\n      { channel: props.yChannel!, value: getChannelValue(next, props.yChannel!) },\n    ])\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorAreaRoot\n    :model-value=\"color\"\n    :x-channel=\"xChannel\"\n    :y-channel=\"yChannel\"\n    :color-space=\"colorSpace\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <ColorAreaArea :style=\"areaBgStyle\">\n      <ColorAreaThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorAreaArea>\n  </ColorAreaRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAiBd,MAAM,OAAO;EAMb,MAAM,YAAY,OAAO,uBAAuB,KAAI;EACpD,MAAM,QAAQ,YACV,OACA,cAAc;GAAE,OAAO,MAAM;GAAY,cAAc,MAAM;GAAc,CAAA;EAE/E,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,eACb,kBAAkB,EAAE,UAAU,MAAM,UAAU,CAAA,CAChD;EAEA,MAAM,cAAc,gBAAgB;GAClC,GAAG,uBAAuB,MAAM,OAAO,MAAM,UAAW,MAAM,SAAU;GACxE,UAAU;GACV,OAAO;GACP,cAAc;GACf,EAAC;EAEF,SAAS,cAAc,MAAa;AAClC,OAAI,UAEF,WAAU,YAAY,CACpB;IAAE,SAAS,MAAM;IAAW,OAAO,gBAAgB,MAAM,MAAM,SAAU;IAAE,EAC3E;IAAE,SAAS,MAAM;IAAW,OAAO,gBAAgB,MAAM,MAAM,SAAU;IAAE,CAC5E,CAAA;QACI;AACL,SAAK,qBAAqB,KAAI;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,YAYgB,MAAA,cAAA,EAAA;IAXb,eAAa,MAAA;IACb,aAAW,QAAA;IACX,aAAW,QAAA;IACX,eAAa,QAAA;IACb,UAAU,QAAA;IACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAI,MAAM,MAAK,CAAA;IAClD,kBAAc;;2BAIC,CAFhB,YAEgB,MAAA,cAAA,EAAA,EAFA,OAAK,eAAE,YAAA,MAAW,EAAA,EAAA;4BACwC,CAAxE,YAAwE,MAAA,eAAA,EAAA,EAAvD,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,OAAK,EAAI,QAAA,WAAU,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA"}

package/dist/components/color-field/ColorField.js

@@ -0,0 +1,7 @@
+import ColorField_vue_vue_type_script_setup_true_lang_default from "./ColorField.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/color-field/ColorField.vue
+var ColorField_default = ColorField_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ColorField_default as default };
+
+//# sourceMappingURL=ColorField.js.map

package/dist/components/color-field/ColorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.js","names":[],"sources":["../../../src/components/color-field/ColorField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport { ColorFieldRoot, ColorFieldInput, getChannelValue, type Color } from 'reka-ui'\nimport { colorFieldVariants, type ColorFieldVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  disabled?: boolean\n  readonly?: boolean\n  placeholder?: string\n  fullWidth?: ColorFieldVariants['fullWidth']\n  class?: string\n  ariaLabel?: string\n}>(), {\n  disabled: false,\n  readonly: false,\n  fullWidth: false,\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: Color] }>()\n\nconst id = useId()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\n// Only use local state when no picker context is present\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorFieldVariants({ fullWidth: props.fullWidth })\n\n// Listen to update:color (emits Color object) instead of update:modelValue (emits string)\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Propagate through picker context channels using the exported getChannelValue function\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <ColorFieldRoot\n    :model-value=\"color\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :class=\"composeClassName(styles, props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-field__label\"\n    >{{ label }}</label>\n    <ColorFieldInput\n      :id=\"id\"\n      :placeholder=\"placeholder\"\n      :aria-label=\"label ? undefined : (props.ariaLabel ?? 'Color value')\"\n      class=\"color-field__input\"\n    />\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-field__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-field__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </ColorFieldRoot>\n</template>\n"],"mappings":""}

package/dist/components/color-field/ColorField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,115 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { ColorPickerContextKey } from "../color-picker/color-picker.context.js";
+import { useColorState } from "../../composables/useColorState.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, normalizeClass, openBlock, toDisplayString, unref, useId, withCtx } from "vue";
+import { colorFieldVariants } from "@auronui/styles";
+import { ColorFieldInput, ColorFieldRoot, getChannelValue } from "reka-ui";
+//#region src/components/color-field/ColorField.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["for"];
+var _hoisted_2 = {
+	key: 1,
+	class: "color-field__description"
+};
+var _hoisted_3 = {
+	key: 2,
+	class: "color-field__error-message",
+	role: "alert"
+};
+var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorField",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		label: {},
+		description: {},
+		errorMessage: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		placeholder: {},
+		fullWidth: { default: false },
+		class: {},
+		ariaLabel: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const id = useId();
+		const pickerCtx = inject(ColorPickerContextKey, null);
+		const local = pickerCtx ? null : useColorState({
+			value: props.modelValue,
+			defaultValue: props.defaultValue
+		});
+		const color = computed(() => pickerCtx ? pickerCtx.color.value : local.color.value);
+		const styles = colorFieldVariants({ fullWidth: props.fullWidth });
+		function onColorUpdate(next) {
+			if (pickerCtx) pickerCtx.setChannels([
+				{
+					channel: "red",
+					value: getChannelValue(next, "red")
+				},
+				{
+					channel: "green",
+					value: getChannelValue(next, "green")
+				},
+				{
+					channel: "blue",
+					value: getChannelValue(next, "blue")
+				},
+				{
+					channel: "alpha",
+					value: getChannelValue(next, "alpha")
+				}
+			]);
+			else {
+				local.color.value = next;
+				emit("update:modelValue", next);
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ColorFieldRoot), {
+				"model-value": color.value,
+				disabled: __props.disabled,
+				readonly: __props.readonly,
+				class: normalizeClass(unref(composeClassName)(unref(styles), props.class)),
+				"onUpdate:color": onColorUpdate
+			}, {
+				default: withCtx(() => [
+					__props.label ? (openBlock(), createElementBlock("label", {
+						key: 0,
+						for: unref(id),
+						class: "color-field__label"
+					}, toDisplayString(__props.label), 9, _hoisted_1)) : createCommentVNode("", true),
+					createVNode(unref(ColorFieldInput), {
+						id: unref(id),
+						placeholder: __props.placeholder,
+						"aria-label": __props.label ? void 0 : props.ariaLabel ?? "Color value",
+						class: "color-field__input"
+					}, null, 8, [
+						"id",
+						"placeholder",
+						"aria-label"
+					]),
+					__props.description && !__props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+					__props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.errorMessage), 1)) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"disabled",
+				"readonly",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { ColorField_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ColorField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/color-field/ColorField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-field/ColorField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport { ColorFieldRoot, ColorFieldInput, getChannelValue, type Color } from 'reka-ui'\nimport { colorFieldVariants, type ColorFieldVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  disabled?: boolean\n  readonly?: boolean\n  placeholder?: string\n  fullWidth?: ColorFieldVariants['fullWidth']\n  class?: string\n  ariaLabel?: string\n}>(), {\n  disabled: false,\n  readonly: false,\n  fullWidth: false,\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: Color] }>()\n\nconst id = useId()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\n// Only use local state when no picker context is present\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorFieldVariants({ fullWidth: props.fullWidth })\n\n// Listen to update:color (emits Color object) instead of update:modelValue (emits string)\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    // Propagate through picker context channels using the exported getChannelValue function\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <ColorFieldRoot\n    :model-value=\"color\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :class=\"composeClassName(styles, props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-field__label\"\n    >{{ label }}</label>\n    <ColorFieldInput\n      :id=\"id\"\n      :placeholder=\"placeholder\"\n      :aria-label=\"label ? undefined : (props.ariaLabel ?? 'Color value')\"\n      class=\"color-field__input\"\n    />\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-field__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-field__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </ColorFieldRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAEb,MAAM,KAAK,OAAM;EAGjB,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAGpD,MAAM,QAAQ,YACV,OACA,cAAc;GACZ,OAAO,MAAM;GACb,cAAc,MAAM;GACrB,CAAA;EAEL,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,mBAAmB,EAAE,WAAW,MAAM,WAAW,CAAA;EAGhE,SAAS,cAAc,MAAa;AAClC,OAAI,UAEF,WAAU,YAAY;IACpB;KAAE,SAAS;KAAgB,OAAO,gBAAgB,MAAM,MAAM;KAAE;IAChE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACpE;KAAE,SAAS;KAAiB,OAAO,gBAAgB,MAAM,OAAO;KAAE;IAClE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACrE,CAAA;QACI;AACL,UAAO,MAAM,QAAQ;AACrB,SAAK,qBAAqB,KAAI;;;;uBAMhC,YA2BiB,MAAA,eAAA,EAAA;IA1Bd,eAAa,MAAA;IACb,UAAU,QAAA;IACV,UAAU,QAAA;IACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,EAAE,MAAM,MAAK,CAAA;IAC3C,kBAAc;;2BAMK;KAHZ,QAAA,SAAA,WAAA,EADR,mBAIoB,SAAA;;MAFjB,KAAK,MAAA,GAAE;MACR,OAAM;wBACJ,QAAA,MAAK,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;KACT,YAKE,MAAA,gBAAA,EAAA;MAJC,IAAI,MAAA,GAAE;MACN,aAAa,QAAA;MACb,cAAY,QAAA,QAAQ,KAAA,IAAa,MAAM,aAAS;MACjD,OAAM;;;;;;KAGA,QAAA,eAAW,CAAK,QAAA,gBAAA,WAAA,EADxB,mBAGyB,QAHzB,YAGyB,gBAArB,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAEP,QAAA,gBAAA,WAAA,EADR,mBAI0B,QAJ1B,YAI0B,gBAAtB,QAAA,aAAY,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/components/color-input-group/ColorInputGroup.js

@@ -0,0 +1,7 @@
+import ColorInputGroup_vue_vue_type_script_setup_true_lang_default from "./ColorInputGroup.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/color-input-group/ColorInputGroup.vue
+var ColorInputGroup_default = ColorInputGroup_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ColorInputGroup_default as default };
+
+//# sourceMappingURL=ColorInputGroup.js.map

package/dist/components/color-input-group/ColorInputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInputGroup.js","names":[],"sources":["../../../src/components/color-input-group/ColorInputGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport {\n  ColorFieldRoot,\n  ColorFieldInput,\n  getChannelValue,\n  type Color,\n} from 'reka-ui'\nimport { colorInputGroupVariants, type ColorInputGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport ColorSwatch from '../color-swatch/ColorSwatch.vue'\nimport { useColorState } from '../../composables/useColorState'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  placeholder?: string\n  suffixLabel?: string\n  disabled?: boolean\n  readonly?: boolean\n  fullWidth?: ColorInputGroupVariants['fullWidth']\n  variant?: ColorInputGroupVariants['variant']\n  class?: string\n}>(), {\n  suffixLabel: 'HEX',\n  fullWidth: false,\n  variant: 'primary',\n  disabled: false,\n  readonly: false,\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: Color] }>()\n\nconst id = useId()\n\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorInputGroupVariants({ fullWidth: props.fullWidth, variant: props.variant })\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <div class=\"color-input-group__wrapper\">\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-input-group__label\"\n    >{{ label }}</label>\n    <ColorFieldRoot\n      :model-value=\"color\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly\"\n      :class=\"composeClassName(styles.base(), props.class)\"\n      :aria-invalid=\"errorMessage ? true : undefined\"\n      @update:color=\"onColorUpdate\"\n    >\n      <span\n        data-slot=\"color-input-group-prefix\"\n        :class=\"styles.prefix()\"\n        aria-hidden=\"true\"\n      >\n        <ColorSwatch\n          :color=\"color\"\n          size=\"sm\"\n        />\n      </span>\n      <ColorFieldInput\n        :id=\"id\"\n        data-slot=\"color-input-group-input\"\n        :placeholder=\"placeholder\"\n        :aria-label=\"label ? undefined : 'Color value'\"\n        :class=\"styles.input()\"\n      />\n      <span\n        v-if=\"suffixLabel\"\n        data-slot=\"color-input-group-suffix\"\n        :class=\"styles.suffix()\"\n      >{{ suffixLabel }}</span>\n    </ColorFieldRoot>\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-input-group__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-input-group__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/color-input-group/ColorInputGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,140 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { ColorPickerContextKey } from "../color-picker/color-picker.context.js";
+import { useColorState } from "../../composables/useColorState.js";
+import ColorSwatch_default from "../color-swatch/ColorSwatch.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, toDisplayString, unref, useId, withCtx } from "vue";
+import { colorInputGroupVariants } from "@auronui/styles";
+import { ColorFieldInput, ColorFieldRoot, getChannelValue } from "reka-ui";
+//#region src/components/color-input-group/ColorInputGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "color-input-group__wrapper" };
+var _hoisted_2 = ["for"];
+var _hoisted_3 = {
+	key: 1,
+	class: "color-input-group__description"
+};
+var _hoisted_4 = {
+	key: 2,
+	class: "color-input-group__error-message",
+	role: "alert"
+};
+var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorInputGroup",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		label: {},
+		description: {},
+		errorMessage: {},
+		placeholder: {},
+		suffixLabel: { default: "HEX" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		fullWidth: { default: false },
+		variant: { default: "primary" },
+		class: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const id = useId();
+		const pickerCtx = inject(ColorPickerContextKey, null);
+		const local = pickerCtx ? null : useColorState({
+			value: props.modelValue,
+			defaultValue: props.defaultValue
+		});
+		const color = computed(() => pickerCtx ? pickerCtx.color.value : local.color.value);
+		const styles = colorInputGroupVariants({
+			fullWidth: props.fullWidth,
+			variant: props.variant
+		});
+		function onColorUpdate(next) {
+			if (pickerCtx) pickerCtx.setChannels([
+				{
+					channel: "red",
+					value: getChannelValue(next, "red")
+				},
+				{
+					channel: "green",
+					value: getChannelValue(next, "green")
+				},
+				{
+					channel: "blue",
+					value: getChannelValue(next, "blue")
+				},
+				{
+					channel: "alpha",
+					value: getChannelValue(next, "alpha")
+				}
+			]);
+			else {
+				local.color.value = next;
+				emit("update:modelValue", next);
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				__props.label ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					for: unref(id),
+					class: "color-input-group__label"
+				}, toDisplayString(__props.label), 9, _hoisted_2)) : createCommentVNode("", true),
+				createVNode(unref(ColorFieldRoot), {
+					"model-value": color.value,
+					disabled: __props.disabled,
+					readonly: __props.readonly,
+					class: normalizeClass(unref(composeClassName)(unref(styles).base(), props.class)),
+					"aria-invalid": __props.errorMessage ? true : void 0,
+					"onUpdate:color": onColorUpdate
+				}, {
+					default: withCtx(() => [
+						createElementVNode("span", {
+							"data-slot": "color-input-group-prefix",
+							class: normalizeClass(unref(styles).prefix()),
+							"aria-hidden": "true"
+						}, [createVNode(ColorSwatch_default, {
+							color: color.value,
+							size: "sm"
+						}, null, 8, ["color"])], 2),
+						createVNode(unref(ColorFieldInput), {
+							id: unref(id),
+							"data-slot": "color-input-group-input",
+							placeholder: __props.placeholder,
+							"aria-label": __props.label ? void 0 : "Color value",
+							class: normalizeClass(unref(styles).input())
+						}, null, 8, [
+							"id",
+							"placeholder",
+							"aria-label",
+							"class"
+						]),
+						__props.suffixLabel ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							"data-slot": "color-input-group-suffix",
+							class: normalizeClass(unref(styles).suffix())
+						}, toDisplayString(__props.suffixLabel), 3)) : createCommentVNode("", true)
+					]),
+					_: 1
+				}, 8, [
+					"model-value",
+					"disabled",
+					"readonly",
+					"class",
+					"aria-invalid"
+				]),
+				__props.description && !__props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+				__props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.errorMessage), 1)) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { ColorInputGroup_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ColorInputGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/color-input-group/ColorInputGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInputGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-input-group/ColorInputGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useId } from 'vue'\nimport {\n  ColorFieldRoot,\n  ColorFieldInput,\n  getChannelValue,\n  type Color,\n} from 'reka-ui'\nimport { colorInputGroupVariants, type ColorInputGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport ColorSwatch from '../color-swatch/ColorSwatch.vue'\nimport { useColorState } from '../../composables/useColorState'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  placeholder?: string\n  suffixLabel?: string\n  disabled?: boolean\n  readonly?: boolean\n  fullWidth?: ColorInputGroupVariants['fullWidth']\n  variant?: ColorInputGroupVariants['variant']\n  class?: string\n}>(), {\n  suffixLabel: 'HEX',\n  fullWidth: false,\n  variant: 'primary',\n  disabled: false,\n  readonly: false,\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: Color] }>()\n\nconst id = useId()\n\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst local = pickerCtx\n  ? null\n  : useColorState({\n      value: props.modelValue,\n      defaultValue: props.defaultValue,\n    })\n\nconst color = computed<Color>(() =>\n  pickerCtx ? pickerCtx.color.value : local!.color.value,\n)\n\nconst styles = colorInputGroupVariants({ fullWidth: props.fullWidth, variant: props.variant })\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(next, 'red') },\n      { channel: 'green' as const, value: getChannelValue(next, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(next, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(next, 'alpha') },\n    ])\n  } else {\n    local!.color.value = next\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <div class=\"color-input-group__wrapper\">\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      class=\"color-input-group__label\"\n    >{{ label }}</label>\n    <ColorFieldRoot\n      :model-value=\"color\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly\"\n      :class=\"composeClassName(styles.base(), props.class)\"\n      :aria-invalid=\"errorMessage ? true : undefined\"\n      @update:color=\"onColorUpdate\"\n    >\n      <span\n        data-slot=\"color-input-group-prefix\"\n        :class=\"styles.prefix()\"\n        aria-hidden=\"true\"\n      >\n        <ColorSwatch\n          :color=\"color\"\n          size=\"sm\"\n        />\n      </span>\n      <ColorFieldInput\n        :id=\"id\"\n        data-slot=\"color-input-group-input\"\n        :placeholder=\"placeholder\"\n        :aria-label=\"label ? undefined : 'Color value'\"\n        :class=\"styles.input()\"\n      />\n      <span\n        v-if=\"suffixLabel\"\n        data-slot=\"color-input-group-suffix\"\n        :class=\"styles.suffix()\"\n      >{{ suffixLabel }}</span>\n    </ColorFieldRoot>\n    <span\n      v-if=\"description && !errorMessage\"\n      class=\"color-input-group__description\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      class=\"color-input-group__error-message\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAqBd,MAAM,OAAO;EAEb,MAAM,KAAK,OAAM;EAEjB,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAEpD,MAAM,QAAQ,YACV,OACA,cAAc;GACZ,OAAO,MAAM;GACb,cAAc,MAAM;GACrB,CAAA;EAEL,MAAM,QAAQ,eACZ,YAAY,UAAU,MAAM,QAAQ,MAAO,MAAM,MACnD;EAEA,MAAM,SAAS,wBAAwB;GAAE,WAAW,MAAM;GAAW,SAAS,MAAM;GAAS,CAAA;EAE7F,SAAS,cAAc,MAAa;AAClC,OAAI,UACF,WAAU,YAAY;IACpB;KAAE,SAAS;KAAgB,OAAO,gBAAgB,MAAM,MAAM;KAAE;IAChE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACpE;KAAE,SAAS;KAAiB,OAAO,gBAAgB,MAAM,OAAO;KAAE;IAClE;KAAE,SAAS;KAAkB,OAAO,gBAAgB,MAAM,QAAQ;KAAE;IACrE,CAAA;QACI;AACL,UAAO,MAAM,QAAQ;AACrB,SAAK,qBAAqB,KAAI;;;;uBAMhC,mBA8CM,OA9CN,YA8CM;IA5CI,QAAA,SAAA,WAAA,EADR,mBAIoB,SAAA;;KAFjB,KAAK,MAAA,GAAE;KACR,OAAM;uBACJ,QAAA,MAAK,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IACT,YA8BiB,MAAA,eAAA,EAAA;KA7Bd,eAAa,MAAA;KACb,UAAU,QAAA;KACV,UAAU,QAAA;KACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,MAAI,EAAI,MAAM,MAAK,CAAA;KAClD,gBAAc,QAAA,eAAY,OAAU,KAAA;KACpC,kBAAc;;4BAWR;MATP,mBASO,QAAA;OARL,aAAU;OACT,OAAK,eAAE,MAAA,OAAM,CAAC,QAAM,CAAA;OACrB,eAAY;UAEZ,YAGE,qBAAA;OAFC,OAAO,MAAA;OACR,MAAK;;MAGT,YAME,MAAA,gBAAA,EAAA;OALC,IAAI,MAAA,GAAE;OACP,aAAU;OACT,aAAa,QAAA;OACb,cAAY,QAAA,QAAQ,KAAA,IAAS;OAC7B,OAAK,eAAE,MAAA,OAAM,CAAC,OAAK,CAAA;;;;;;;MAGd,QAAA,eAAA,WAAA,EADR,mBAIyB,QAAA;;OAFvB,aAAU;OACT,OAAK,eAAE,MAAA,OAAM,CAAC,QAAM,CAAA;yBACnB,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;;;;;;;;;;IAGT,QAAA,eAAW,CAAK,QAAA,gBAAA,WAAA,EADxB,mBAGyB,QAHzB,YAGyB,gBAArB,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAEP,QAAA,gBAAA,WAAA,EADR,mBAI0B,QAJ1B,YAI0B,gBAAtB,QAAA,aAAY,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

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

@@ -0,0 +1,7 @@
+import ColorPicker_vue_vue_type_script_setup_true_lang_default from "./ColorPicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/color-picker/ColorPicker.vue
+var ColorPicker_default = ColorPicker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ColorPicker_default as default };
+
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/color-picker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../src/components/color-picker/ColorPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRef } from 'vue'\nimport { type ColorFormat } from 'reka-ui'\nimport { colorPickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useColorState } from '../../composables/useColorState'\nimport { provideColorPickerContext } from './color-picker.context'\nimport ColorArea from '../color-area/ColorArea.vue'\nimport ColorSlider from '../color-slider/ColorSlider.vue'\nimport ColorField from '../color-field/ColorField.vue'\nimport ColorSwatch from '../color-swatch/ColorSwatch.vue'\n\n// Discretion decision: fixed composition layout.\n// Default sliders: hue + alpha (per CONTEXT.md discretion note).\n// Layout is NOT slot-based for v1.0; slot composition deferred to v1.1.\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  format?: ColorFormat\n  disabled?: boolean\n  label?: string\n  class?: string\n}>(), {\n  format: 'hex',\n  disabled: false,\n  defaultValue: '#000000',\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\nconst state = useColorState({\n  value: props.modelValue,\n  defaultValue: props.defaultValue,\n  format: props.format,\n  onChange: (value) => emit('update:modelValue', value),\n})\n\nconst formatRef = toRef(props, 'format')\n\nprovideColorPickerContext({\n  color: state.color,\n  setChannel: state.setChannel,\n  setChannels: state.setChannels,\n  format: formatRef,\n  emitUpdate: (value) => emit('update:modelValue', value),\n})\n\nconst styles = colorPickerVariants()\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(styles.base(), props.class)\"\n    :aria-label=\"label\"\n    role=\"group\"\n  >\n    <!-- Preview swatch — reads from context -->\n    <ColorSwatch :color-name=\"label ?? 'Selected color'\" />\n    <!-- 2D area for saturation + brightness -->\n    <ColorArea\n      x-channel=\"saturation\"\n      y-channel=\"brightness\"\n      :disabled=\"disabled\"\n    />\n    <!-- Hue slider -->\n    <ColorSlider\n      channel=\"hue\"\n      :disabled=\"disabled\"\n    />\n    <!-- Alpha slider -->\n    <ColorSlider\n      channel=\"alpha\"\n      :disabled=\"disabled\"\n    />\n    <!-- Text input — label ensures axe compliance for the embedded input -->\n    <ColorField\n      :disabled=\"disabled\"\n      label=\"Hex color\"\n    />\n    <!-- Slot for test probes and optional consumer additions -->\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/color-picker/ColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,77 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { provideColorPickerContext } from "./color-picker.context.js";
+import { useColorState } from "../../composables/useColorState.js";
+import ColorArea_default from "../color-area/ColorArea.js";
+import ColorSlider_default from "../color-slider/ColorSlider.js";
+import ColorField_default from "../color-field/ColorField.js";
+import ColorSwatch_default from "../color-swatch/ColorSwatch.js";
+import { createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toRef, unref } from "vue";
+import { colorPickerVariants } from "@auronui/styles";
+import "reka-ui";
+//#region src/components/color-picker/ColorPicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var ColorPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorPicker",
+	props: {
+		modelValue: {},
+		defaultValue: { default: "#000000" },
+		format: { default: "hex" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		label: {},
+		class: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const state = useColorState({
+			value: props.modelValue,
+			defaultValue: props.defaultValue,
+			format: props.format,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const formatRef = toRef(props, "format");
+		provideColorPickerContext({
+			color: state.color,
+			setChannel: state.setChannel,
+			setChannels: state.setChannels,
+			format: formatRef,
+			emitUpdate: (value) => emit("update:modelValue", value)
+		});
+		const styles = colorPickerVariants();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(composeClassName)(unref(styles).base(), props.class)),
+				"aria-label": __props.label,
+				role: "group"
+			}, [
+				createVNode(ColorSwatch_default, { "color-name": __props.label ?? "Selected color" }, null, 8, ["color-name"]),
+				createVNode(ColorArea_default, {
+					"x-channel": "saturation",
+					"y-channel": "brightness",
+					disabled: __props.disabled
+				}, null, 8, ["disabled"]),
+				createVNode(ColorSlider_default, {
+					channel: "hue",
+					disabled: __props.disabled
+				}, null, 8, ["disabled"]),
+				createVNode(ColorSlider_default, {
+					channel: "alpha",
+					disabled: __props.disabled
+				}, null, 8, ["disabled"]),
+				createVNode(ColorField_default, {
+					disabled: __props.disabled,
+					label: "Hex color"
+				}, null, 8, ["disabled"]),
+				renderSlot(_ctx.$slots, "default")
+			], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ColorPicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ColorPicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/color-picker/ColorPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-picker/ColorPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRef } from 'vue'\nimport { type ColorFormat } from 'reka-ui'\nimport { colorPickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useColorState } from '../../composables/useColorState'\nimport { provideColorPickerContext } from './color-picker.context'\nimport ColorArea from '../color-area/ColorArea.vue'\nimport ColorSlider from '../color-slider/ColorSlider.vue'\nimport ColorField from '../color-field/ColorField.vue'\nimport ColorSwatch from '../color-swatch/ColorSwatch.vue'\n\n// Discretion decision: fixed composition layout.\n// Default sliders: hue + alpha (per CONTEXT.md discretion note).\n// Layout is NOT slot-based for v1.0; slot composition deferred to v1.1.\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  format?: ColorFormat\n  disabled?: boolean\n  label?: string\n  class?: string\n}>(), {\n  format: 'hex',\n  disabled: false,\n  defaultValue: '#000000',\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\nconst state = useColorState({\n  value: props.modelValue,\n  defaultValue: props.defaultValue,\n  format: props.format,\n  onChange: (value) => emit('update:modelValue', value),\n})\n\nconst formatRef = toRef(props, 'format')\n\nprovideColorPickerContext({\n  color: state.color,\n  setChannel: state.setChannel,\n  setChannels: state.setChannels,\n  format: formatRef,\n  emitUpdate: (value) => emit('update:modelValue', value),\n})\n\nconst styles = colorPickerVariants()\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(styles.base(), props.class)\"\n    :aria-label=\"label\"\n    role=\"group\"\n  >\n    <!-- Preview swatch — reads from context -->\n    <ColorSwatch :color-name=\"label ?? 'Selected color'\" />\n    <!-- 2D area for saturation + brightness -->\n    <ColorArea\n      x-channel=\"saturation\"\n      y-channel=\"brightness\"\n      :disabled=\"disabled\"\n    />\n    <!-- Hue slider -->\n    <ColorSlider\n      channel=\"hue\"\n      :disabled=\"disabled\"\n    />\n    <!-- Alpha slider -->\n    <ColorSlider\n      channel=\"alpha\"\n      :disabled=\"disabled\"\n    />\n    <!-- Text input — label ensures axe compliance for the embedded input -->\n    <ColorField\n      :disabled=\"disabled\"\n      label=\"Hex color\"\n    />\n    <!-- Slot for test probes and optional consumer additions -->\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,QAAQ;EAad,MAAM,OAAO;EAEb,MAAM,QAAQ,cAAc;GAC1B,OAAO,MAAM;GACb,cAAc,MAAM;GACpB,QAAQ,MAAM;GACd,WAAW,UAAU,KAAK,qBAAqB,MAAM;GACtD,CAAA;EAED,MAAM,YAAY,MAAM,OAAO,SAAQ;AAEvC,4BAA0B;GACxB,OAAO,MAAM;GACb,YAAY,MAAM;GAClB,aAAa,MAAM;GACnB,QAAQ;GACR,aAAa,UAAU,KAAK,qBAAqB,MAAM;GACxD,CAAA;EAED,MAAM,SAAS,qBAAoB;;uBAIjC,mBA8BM,OAAA;IA7BH,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,MAAI,EAAI,MAAM,MAAK,CAAA;IAClD,cAAY,QAAA;IACb,MAAK;;IAGL,YAAuD,qBAAA,EAAzC,cAAY,QAAA,SAAK,kBAAA,EAAA,MAAA,GAAA,CAAA,aAAA,CAAA;IAE/B,YAIE,mBAAA;KAHA,aAAU;KACV,aAAU;KACT,UAAU,QAAA;;IAGb,YAGE,qBAAA;KAFA,SAAQ;KACP,UAAU,QAAA;;IAGb,YAGE,qBAAA;KAFA,SAAQ;KACP,UAAU,QAAA;;IAGb,YAGE,oBAAA;KAFC,UAAU,QAAA;KACX,OAAM;;IAGR,WAAQ,KAAA,QAAA,UAAA"}

package/dist/components/color-picker/color-picker.context.js

@@ -0,0 +1,7 @@
+import { createContext } from "../../utils/context.js";
+//#region src/components/color-picker/color-picker.context.ts
+var { useProvide: provideColorPickerContext, useInject: useColorPickerInject, key: ColorPickerContextKey } = createContext("ColorPicker");
+//#endregion
+export { ColorPickerContextKey, provideColorPickerContext };
+
+//# sourceMappingURL=color-picker.context.js.map

package/dist/components/color-picker/color-picker.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.context.js","names":[],"sources":["../../../src/components/color-picker/color-picker.context.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport type { Color, ColorFormat } from 'reka-ui'\nimport { createContext } from '../../utils/context'\nimport type { UseColorStateReturn } from '../../composables/useColorState'\n\nexport interface ColorPickerContext {\n  /** Reactive Color ref from useColorState. */\n  color: Ref<Color>\n  /** Imperative channel setters (proxied from useColorState). */\n  setChannel: UseColorStateReturn['setChannel']\n  setChannels: UseColorStateReturn['setChannels']\n  /** Current output format for serialization. */\n  format: Ref<ColorFormat>\n  /** Emits the composed picker's v-model update. */\n  emitUpdate: (value: string) => void\n}\n\nconst {\n  useProvide: provideColorPickerContext,\n  useInject: useColorPickerInject,\n  key: ColorPickerContextKey,\n} = createContext<ColorPickerContext>('ColorPicker')\n\nexport { provideColorPickerContext, useColorPickerInject, ColorPickerContextKey }\n"],"mappings":";;AAiBA,IAAM,EACJ,YAAY,2BACZ,WAAW,sBACX,KAAK,0BACH,cAAkC,cAAc"}