@auronui/vue 1.0.21 → 1.0.22

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

@@ -1 +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":""}
+{"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  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n}>(), {\n  disabled: false,\n  readonly: false,\n  fullWidth: false,\n  asChild: false,\n  required: false,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\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    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorFieldRoot\n    :model-value=\"color\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :color-space=\"(props.colorSpace as any)\"\n    :channel=\"(props.channel as any)\"\n    :disable-wheel-change=\"props.disableWheelChange\"\n    :locale=\"props.locale\"\n    :step=\"props.step\"\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

@@ -34,9 +34,27 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		placeholder: {},
 		fullWidth: { default: false },
 		class: {},
-		ariaLabel: {}
+		ariaLabel: {},
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		colorSpace: {},
+		channel: {},
+		disableWheelChange: {
+			type: Boolean,
+			default: false
+		},
+		locale: {},
+		step: {}
 	},
-	emits: ["update:modelValue"],
+	emits: ["update:modelValue", "update:color"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -70,6 +88,7 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			else {
 				local.color.value = next;
 				emit("update:modelValue", next);
+				emit("update:color", next);
 			}
 		}
 		return (_ctx, _cache) => {
@@ -77,6 +96,15 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				"model-value": color.value,
 				disabled: __props.disabled,
 				readonly: __props.readonly,
+				as: props.as,
+				"as-child": props.asChild,
+				name: props.name,
+				required: props.required,
+				"color-space": props.colorSpace,
+				channel: props.channel,
+				"disable-wheel-change": props.disableWheelChange,
+				locale: props.locale,
+				step: props.step,
 				class: normalizeClass(unref(composeClassName)(unref(styles), props.class)),
 				"onUpdate:color": onColorUpdate
 			}, {
@@ -104,6 +132,15 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				"model-value",
 				"disabled",
 				"readonly",
+				"as",
+				"as-child",
+				"name",
+				"required",
+				"color-space",
+				"channel",
+				"disable-wheel-change",
+				"locale",
+				"step",
 				"class"
 			]);
 		};

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

@@ -1 +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"}
+{"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  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n}>(), {\n  disabled: false,\n  readonly: false,\n  fullWidth: false,\n  asChild: false,\n  required: false,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\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    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorFieldRoot\n    :model-value=\"color\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :color-space=\"(props.colorSpace as any)\"\n    :channel=\"(props.channel as any)\"\n    :disable-wheel-change=\"props.disableWheelChange\"\n    :locale=\"props.locale\"\n    :step=\"props.step\"\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;EA8Bd,MAAM,OAAO;EAKb,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;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,YAoCiB,MAAA,eAAA,EAAA;IAnCd,eAAa,MAAA;IACb,UAAU,QAAA;IACV,UAAU,QAAA;IACV,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,MAAM,MAAM;IACZ,UAAU,MAAM;IAChB,eAAc,MAAM;IACpB,SAAU,MAAM;IAChB,wBAAsB,MAAM;IAC5B,QAAQ,MAAM;IACd,MAAM,MAAM;IACZ,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.map

@@ -1 +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":""}
+{"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  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n}>(), {\n  suffixLabel: 'HEX',\n  fullWidth: false,\n  variant: 'primary',\n  disabled: false,\n  readonly: false,\n  asChild: false,\n  required: false,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\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    emit('update:color', 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      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :name=\"props.name\"\n      :required=\"props.required\"\n      :color-space=\"(props.colorSpace as any)\"\n      :channel=\"(props.channel as any)\"\n      :disable-wheel-change=\"props.disableWheelChange\"\n      :locale=\"props.locale\"\n      :step=\"props.step\"\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

@@ -37,9 +37,27 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		},
 		fullWidth: { default: false },
 		variant: { default: "primary" },
-		class: {}
+		class: {},
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		colorSpace: {},
+		channel: {},
+		disableWheelChange: {
+			type: Boolean,
+			default: false
+		},
+		locale: {},
+		step: {}
 	},
-	emits: ["update:modelValue"],
+	emits: ["update:modelValue", "update:color"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -76,6 +94,7 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			else {
 				local.color.value = next;
 				emit("update:modelValue", next);
+				emit("update:color", next);
 			}
 		}
 		return (_ctx, _cache) => {
@@ -89,6 +108,15 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					"model-value": color.value,
 					disabled: __props.disabled,
 					readonly: __props.readonly,
+					as: props.as,
+					"as-child": props.asChild,
+					name: props.name,
+					required: props.required,
+					"color-space": props.colorSpace,
+					channel: props.channel,
+					"disable-wheel-change": props.disableWheelChange,
+					locale: props.locale,
+					step: props.step,
 					class: normalizeClass(unref(composeClassName)(unref(styles).base(), props.class)),
 					"aria-invalid": __props.errorMessage ? true : void 0,
 					"onUpdate:color": onColorUpdate
@@ -125,6 +153,15 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					"model-value",
 					"disabled",
 					"readonly",
+					"as",
+					"as-child",
+					"name",
+					"required",
+					"color-space",
+					"channel",
+					"disable-wheel-change",
+					"locale",
+					"step",
 					"class",
 					"aria-invalid"
 				]),

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

@@ -1 +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"}
+{"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  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n}>(), {\n  suffixLabel: 'HEX',\n  fullWidth: false,\n  variant: 'primary',\n  disabled: false,\n  readonly: false,\n  asChild: false,\n  required: false,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\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    emit('update:color', 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      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :name=\"props.name\"\n      :required=\"props.required\"\n      :color-space=\"(props.colorSpace as any)\"\n      :channel=\"(props.channel as any)\"\n      :disable-wheel-change=\"props.disableWheelChange\"\n      :locale=\"props.locale\"\n      :step=\"props.step\"\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;EAiCd,MAAM,OAAO;EAKb,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;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,mBAuDM,OAvDN,YAuDM;IArDI,QAAA,SAAA,WAAA,EADR,mBAIoB,SAAA;;KAFjB,KAAK,MAAA,GAAE;KACR,OAAM;uBACJ,QAAA,MAAK,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IACT,YAuCiB,MAAA,eAAA,EAAA;KAtCd,eAAa,MAAA;KACb,UAAU,QAAA;KACV,UAAU,QAAA;KACV,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,MAAM,MAAM;KACZ,UAAU,MAAM;KAChB,eAAc,MAAM;KACpB,SAAU,MAAM;KAChB,wBAAsB,MAAM;KAC5B,QAAQ,MAAM;KACd,MAAM,MAAM;KACZ,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-slider/ColorSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSlider.js","names":[],"sources":["../../../src/components/color-slider/ColorSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSliderRoot,\n  ColorSliderTrack,\n  ColorSliderThumb,\n  getSliderBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorSliderVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  channel: ColorChannel\n  colorSpace?: ColorSpace\n  orientation?: 'horizontal' | 'vertical'\n  disabled?: boolean\n  showOutput?: boolean\n  class?: string\n  trackClass?: string\n  thumbClass?: string\n  outputClass?: string\n}>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  showOutput: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst attrs = useAttrs()\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 = colorSliderVariants()\n\nconst trackBgStyle = computed(() =>\n  getSliderBackgroundStyle(color.value, props.channel)\n)\n\nconst channelDisplay = computed(() =>\n  Math.round(getChannelValue(color.value, props.channel)).toString()\n)\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannel(props.channel, getChannelValue(next, props.channel))\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSliderRoot\n    v-bind=\"attrs\"\n    :model-value=\"color\"\n    :channel=\"channel\"\n    :color-space=\"colorSpace\"\n    :orientation=\"orientation\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <ColorSliderTrack\n      :class=\"composeClassName(styles.track(), trackClass)\"\n      :style=\"trackBgStyle\"\n    >\n      <ColorSliderThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorSliderTrack>\n    <output\n      v-if=\"showOutput\"\n      :class=\"composeClassName(styles.output(), outputClass)\"\n    >{{ channelDisplay }}</output>\n  </ColorSliderRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ColorSlider.js","names":[],"sources":["../../../src/components/color-slider/ColorSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSliderRoot,\n  ColorSliderTrack,\n  ColorSliderThumb,\n  getSliderBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorSliderVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  channel: ColorChannel\n  colorSpace?: ColorSpace\n  orientation?: 'horizontal' | 'vertical'\n  disabled?: boolean\n  showOutput?: boolean\n  class?: string\n  trackClass?: string\n  thumbClass?: string\n  outputClass?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  dir?: 'ltr' | 'rtl'\n  inverted?: boolean\n  step?: number\n}>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  showOutput: false,\n  asChild: false,\n  required: false,\n  inverted: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n  'change': [value: Color]\n  'change-end': [value: Color]\n}>()\n\nconst attrs = useAttrs()\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 = colorSliderVariants()\n\nconst trackBgStyle = computed(() =>\n  getSliderBackgroundStyle(color.value, props.channel)\n)\n\nconst channelDisplay = computed(() =>\n  Math.round(getChannelValue(color.value, props.channel)).toString()\n)\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannel(props.channel, getChannelValue(next, props.channel))\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSliderRoot\n    v-bind=\"attrs\"\n    :model-value=\"color\"\n    :channel=\"channel\"\n    :color-space=\"colorSpace\"\n    :orientation=\"orientation\"\n    :disabled=\"disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :dir=\"props.dir\"\n    :inverted=\"props.inverted\"\n    :step=\"props.step\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n    @change=\"(v: string) => emit('change', v as unknown as Color)\"\n    @change-end=\"(v: string) => emit('change-end', v as unknown as Color)\"\n  >\n    <ColorSliderTrack\n      :class=\"composeClassName(styles.track(), trackClass)\"\n      :style=\"trackBgStyle\"\n    >\n      <ColorSliderThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorSliderTrack>\n    <output\n      v-if=\"showOutput\"\n      :class=\"composeClassName(styles.output(), outputClass)\"\n    >{{ channelDisplay }}</output>\n  </ColorSliderRoot>\n</template>\n"],"mappings":""}

package/dist/components/color-slider/ColorSlider.vue_vue_type_script_setup_true_lang.js

@@ -25,9 +25,30 @@ var ColorSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		class: {},
 		trackClass: {},
 		thumbClass: {},
-		outputClass: {}
+		outputClass: {},
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		dir: {},
+		inverted: {
+			type: Boolean,
+			default: false
+		},
+		step: {}
 	},
-	emits: ["update:modelValue", "update:color"],
+	emits: [
+		"update:modelValue",
+		"update:color",
+		"change",
+		"change-end"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -55,8 +76,17 @@ var ColorSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				"color-space": __props.colorSpace,
 				orientation: __props.orientation,
 				disabled: __props.disabled,
+				as: props.as,
+				"as-child": props.asChild,
+				name: props.name,
+				required: props.required,
+				dir: props.dir,
+				inverted: props.inverted,
+				step: props.step,
 				class: unref(composeClassName)(unref(styles).base(), props.class),
-				"onUpdate:color": onColorUpdate
+				"onUpdate:color": onColorUpdate,
+				onChange: _cache[0] || (_cache[0] = (v) => emit("change", v)),
+				onChangeEnd: _cache[1] || (_cache[1] = (v) => emit("change-end", v))
 			}), {
 				default: withCtx(() => [createVNode(unref(ColorSliderTrack), {
 					class: normalizeClass(unref(composeClassName)(unref(styles).track(), __props.trackClass)),
@@ -75,6 +105,13 @@ var ColorSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				"color-space",
 				"orientation",
 				"disabled",
+				"as",
+				"as-child",
+				"name",
+				"required",
+				"dir",
+				"inverted",
+				"step",
 				"class"
 			]);
 		};

package/dist/components/color-slider/ColorSlider.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSlider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-slider/ColorSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSliderRoot,\n  ColorSliderTrack,\n  ColorSliderThumb,\n  getSliderBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorSliderVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  channel: ColorChannel\n  colorSpace?: ColorSpace\n  orientation?: 'horizontal' | 'vertical'\n  disabled?: boolean\n  showOutput?: boolean\n  class?: string\n  trackClass?: string\n  thumbClass?: string\n  outputClass?: string\n}>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  showOutput: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst attrs = useAttrs()\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 = colorSliderVariants()\n\nconst trackBgStyle = computed(() =>\n  getSliderBackgroundStyle(color.value, props.channel)\n)\n\nconst channelDisplay = computed(() =>\n  Math.round(getChannelValue(color.value, props.channel)).toString()\n)\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannel(props.channel, getChannelValue(next, props.channel))\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSliderRoot\n    v-bind=\"attrs\"\n    :model-value=\"color\"\n    :channel=\"channel\"\n    :color-space=\"colorSpace\"\n    :orientation=\"orientation\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n  >\n    <ColorSliderTrack\n      :class=\"composeClassName(styles.track(), trackClass)\"\n      :style=\"trackBgStyle\"\n    >\n      <ColorSliderThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorSliderTrack>\n    <output\n      v-if=\"showOutput\"\n      :class=\"composeClassName(styles.output(), outputClass)\"\n    >{{ channelDisplay }}</output>\n  </ColorSliderRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAKb,MAAM,QAAQ,UAAS;EAGvB,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,qBAAoB;EAEnC,MAAM,eAAe,eACnB,yBAAyB,MAAM,OAAO,MAAM,QAAO,CACrD;EAEA,MAAM,iBAAiB,eACrB,KAAK,MAAM,gBAAgB,MAAM,OAAO,MAAM,QAAQ,CAAC,CAAC,UAAS,CACnE;EAEA,SAAS,cAAc,MAAa;AAClC,OAAI,UACF,WAAU,WAAW,MAAM,SAAS,gBAAgB,MAAM,MAAM,QAAQ,CAAA;QACnE;AACL,SAAK,qBAAqB,KAAI;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,YAoBkB,MAAA,gBAAA,EApBlB,WACU,MAmBQ,MAnBH,EAAA;IACZ,eAAa,MAAA;IACb,SAAS,QAAA;IACT,eAAa,QAAA;IACb,aAAa,QAAA;IACb,UAAU,QAAA;IACV,OAAO,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,MAAI,EAAI,MAAM,MAAK;IAClD,kBAAc;;2BAOI,CALnB,YAKmB,MAAA,iBAAA,EAAA;KAJhB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,QAAA,WAAU,CAAA;KAClD,OAAK,eAAE,aAAA,MAAY;;4BAEsD,CAA1E,YAA0E,MAAA,iBAAA,EAAA,EAAvD,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,QAAA,WAAU,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;+BAG/D,QAAA,cAAA,WAAA,EADR,mBAG8B,UAAA;;KAD3B,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,QAAM,EAAI,QAAA,YAAW,CAAA;uBACnD,eAAA,MAAc,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"ColorSlider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-slider/ColorSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSliderRoot,\n  ColorSliderTrack,\n  ColorSliderThumb,\n  getSliderBackgroundStyle,\n  getChannelValue,\n  type Color,\n  type ColorChannel,\n  type ColorSpace,\n} from 'reka-ui'\nimport { colorSliderVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  channel: ColorChannel\n  colorSpace?: ColorSpace\n  orientation?: 'horizontal' | 'vertical'\n  disabled?: boolean\n  showOutput?: boolean\n  class?: string\n  trackClass?: string\n  thumbClass?: string\n  outputClass?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  dir?: 'ltr' | 'rtl'\n  inverted?: boolean\n  step?: number\n}>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  showOutput: false,\n  asChild: false,\n  required: false,\n  inverted: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n  'change': [value: Color]\n  'change-end': [value: Color]\n}>()\n\nconst attrs = useAttrs()\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 = colorSliderVariants()\n\nconst trackBgStyle = computed(() =>\n  getSliderBackgroundStyle(color.value, props.channel)\n)\n\nconst channelDisplay = computed(() =>\n  Math.round(getChannelValue(color.value, props.channel)).toString()\n)\n\nfunction onColorUpdate(next: Color) {\n  if (pickerCtx) {\n    pickerCtx.setChannel(props.channel, getChannelValue(next, props.channel))\n  } else {\n    emit('update:modelValue', next)\n    emit('update:color', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSliderRoot\n    v-bind=\"attrs\"\n    :model-value=\"color\"\n    :channel=\"channel\"\n    :color-space=\"colorSpace\"\n    :orientation=\"orientation\"\n    :disabled=\"disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :dir=\"props.dir\"\n    :inverted=\"props.inverted\"\n    :step=\"props.step\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:color=\"onColorUpdate\"\n    @change=\"(v: string) => emit('change', v as unknown as Color)\"\n    @change-end=\"(v: string) => emit('change-end', v as unknown as Color)\"\n  >\n    <ColorSliderTrack\n      :class=\"composeClassName(styles.track(), trackClass)\"\n      :style=\"trackBgStyle\"\n    >\n      <ColorSliderThumb :class=\"composeClassName(styles.thumb(), thumbClass)\" />\n    </ColorSliderTrack>\n    <output\n      v-if=\"showOutput\"\n      :class=\"composeClassName(styles.output(), outputClass)\"\n    >{{ channelDisplay }}</output>\n  </ColorSliderRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EA4Bd,MAAM,OAAO;EAOb,MAAM,QAAQ,UAAS;EAGvB,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,qBAAoB;EAEnC,MAAM,eAAe,eACnB,yBAAyB,MAAM,OAAO,MAAM,QAAO,CACrD;EAEA,MAAM,iBAAiB,eACrB,KAAK,MAAM,gBAAgB,MAAM,OAAO,MAAM,QAAQ,CAAC,CAAC,UAAS,CACnE;EAEA,SAAS,cAAc,MAAa;AAClC,OAAI,UACF,WAAU,WAAW,MAAM,SAAS,gBAAgB,MAAM,MAAM,QAAQ,CAAA;QACnE;AACL,SAAK,qBAAqB,KAAI;AAC9B,SAAK,gBAAgB,KAAI;;;;uBAM3B,YA6BkB,MAAA,gBAAA,EA7BlB,WACU,MA4BQ,MA5BH,EAAA;IACZ,eAAa,MAAA;IACb,SAAS,QAAA;IACT,eAAa,QAAA;IACb,aAAa,QAAA;IACb,UAAU,QAAA;IACV,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,MAAM,MAAM;IACZ,UAAU,MAAM;IAChB,KAAK,MAAM;IACX,UAAU,MAAM;IAChB,MAAM,MAAM;IACZ,OAAO,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,MAAI,EAAI,MAAM,MAAK;IAClD,kBAAc;IACd,UAAM,OAAA,OAAA,OAAA,MAAG,MAAc,KAAI,UAAW,EAAC;IACvC,aAAU,OAAA,OAAA,OAAA,MAAG,MAAc,KAAI,cAAe,EAAC;;2BAO7B,CALnB,YAKmB,MAAA,iBAAA,EAAA;KAJhB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,QAAA,WAAU,CAAA;KAClD,OAAK,eAAE,aAAA,MAAY;;4BAEsD,CAA1E,YAA0E,MAAA,iBAAA,EAAA,EAAvD,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,QAAA,WAAU,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;+BAG/D,QAAA,cAAA,WAAA,EADR,mBAG8B,UAAA;;KAD3B,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,QAAM,EAAI,QAAA,YAAW,CAAA;uBACnD,eAAA,MAAc,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/components/color-swatch/ColorSwatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.js","names":[],"sources":["../../../src/components/color-swatch/ColorSwatch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { ColorSwatch as RekaColorSwatch, parseColor, colorToHex, type Color } from 'reka-ui'\nimport { colorSwatchVariants, type ColorSwatchVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = defineProps<{\n  color?: Color | string\n  colorName?: string\n  shape?: ColorSwatchVariants['shape']\n  size?: ColorSwatchVariants['size']\n  class?: string\n}>()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst resolvedColor = computed<Color>(() => {\n  if (props.color) {\n    return typeof props.color === 'string' ? parseColor(props.color) : props.color\n  }\n  if (pickerCtx) {\n    return pickerCtx.color.value\n  }\n  return parseColor('#000000')\n})\n\n// Reka ColorSwatch sets aria-label from its `label` prop.\n// Provide accessible label: colorName if given, otherwise hex value.\nconst accessibleLabel = computed(() =>\n  props.colorName ?? colorToHex(resolvedColor.value),\n)\n\nconst styles = computed(() =>\n  colorSwatchVariants({ shape: props.shape, size: props.size }),\n)\n</script>\n\n<template>\n  <RekaColorSwatch\n    :color=\"resolvedColor\"\n    :label=\"accessibleLabel\"\n    :class=\"composeClassName(styles, props.class)\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ColorSwatch.js","names":[],"sources":["../../../src/components/color-swatch/ColorSwatch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { ColorSwatch as RekaColorSwatch, parseColor, colorToHex, type Color } from 'reka-ui'\nimport { colorSwatchVariants, type ColorSwatchVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = defineProps<{\n  color?: Color | string\n  colorName?: string\n  shape?: ColorSwatchVariants['shape']\n  size?: ColorSwatchVariants['size']\n  class?: string\n  as?: string\n  asChild?: boolean\n  label?: string\n}>()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst resolvedColor = computed<Color>(() => {\n  if (props.color) {\n    return typeof props.color === 'string' ? parseColor(props.color) : props.color\n  }\n  if (pickerCtx) {\n    return pickerCtx.color.value\n  }\n  return parseColor('#000000')\n})\n\n// Reka ColorSwatch sets aria-label from its `label` prop.\n// Provide accessible label: explicit label > colorName > hex value.\nconst accessibleLabel = computed(() =>\n  props.label ?? props.colorName ?? colorToHex(resolvedColor.value),\n)\n\nconst styles = computed(() =>\n  colorSwatchVariants({ shape: props.shape, size: props.size }),\n)\n</script>\n\n<template>\n  <RekaColorSwatch\n    :color=\"resolvedColor\"\n    :label=\"accessibleLabel\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles, props.class)\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/color-swatch/ColorSwatch.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,10 @@ var ColorSwatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		colorName: {},
 		shape: {},
 		size: {},
-		class: {}
+		class: {},
+		as: {},
+		asChild: { type: Boolean },
+		label: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -21,7 +24,7 @@ var ColorSwatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			if (pickerCtx) return pickerCtx.color.value;
 			return parseColor("#000000");
 		});
-		const accessibleLabel = computed(() => props.colorName ?? colorToHex(resolvedColor.value));
+		const accessibleLabel = computed(() => props.label ?? props.colorName ?? colorToHex(resolvedColor.value));
 		const styles = computed(() => colorSwatchVariants({
 			shape: props.shape,
 			size: props.size
@@ -30,10 +33,14 @@ var ColorSwatch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return openBlock(), createBlock(unref(ColorSwatch), {
 				color: resolvedColor.value,
 				label: accessibleLabel.value,
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(styles.value, props.class))
 			}, null, 8, [
 				"color",
 				"label",
+				"as",
+				"as-child",
 				"class"
 			]);
 		};

package/dist/components/color-swatch/ColorSwatch.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-swatch/ColorSwatch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { ColorSwatch as RekaColorSwatch, parseColor, colorToHex, type Color } from 'reka-ui'\nimport { colorSwatchVariants, type ColorSwatchVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = defineProps<{\n  color?: Color | string\n  colorName?: string\n  shape?: ColorSwatchVariants['shape']\n  size?: ColorSwatchVariants['size']\n  class?: string\n}>()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst resolvedColor = computed<Color>(() => {\n  if (props.color) {\n    return typeof props.color === 'string' ? parseColor(props.color) : props.color\n  }\n  if (pickerCtx) {\n    return pickerCtx.color.value\n  }\n  return parseColor('#000000')\n})\n\n// Reka ColorSwatch sets aria-label from its `label` prop.\n// Provide accessible label: colorName if given, otherwise hex value.\nconst accessibleLabel = computed(() =>\n  props.colorName ?? colorToHex(resolvedColor.value),\n)\n\nconst styles = computed(() =>\n  colorSwatchVariants({ shape: props.shape, size: props.size }),\n)\n</script>\n\n<template>\n  <RekaColorSwatch\n    :color=\"resolvedColor\"\n    :label=\"accessibleLabel\"\n    :class=\"composeClassName(styles, props.class)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EASd,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAEpD,MAAM,gBAAgB,eAAsB;AAC1C,OAAI,MAAM,MACR,QAAO,OAAO,MAAM,UAAU,WAAW,WAAW,MAAM,MAAM,GAAG,MAAM;AAE3E,OAAI,UACF,QAAO,UAAU,MAAM;AAEzB,UAAO,WAAW,UAAS;IAC5B;EAID,MAAM,kBAAkB,eACtB,MAAM,aAAa,WAAW,cAAc,MAAM,CACpD;EAEA,MAAM,SAAS,eACb,oBAAoB;GAAE,OAAO,MAAM;GAAO,MAAM,MAAM;GAAM,CAAC,CAC/D;;uBAIE,YAIE,MAAA,YAAA,EAAA;IAHC,OAAO,cAAA;IACP,OAAO,gBAAA;IACP,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,OAAQ,MAAM,MAAK,CAAA"}
+{"version":3,"file":"ColorSwatch.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-swatch/ColorSwatch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { ColorSwatch as RekaColorSwatch, parseColor, colorToHex, type Color } from 'reka-ui'\nimport { colorSwatchVariants, type ColorSwatchVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\n\nconst props = defineProps<{\n  color?: Color | string\n  colorName?: string\n  shape?: ColorSwatchVariants['shape']\n  size?: ColorSwatchVariants['size']\n  class?: string\n  as?: string\n  asChild?: boolean\n  label?: string\n}>()\n\n// Try to inject ColorPickerContext — null fallback so we don't throw when standalone\nconst pickerCtx = inject(ColorPickerContextKey, null)\n\nconst resolvedColor = computed<Color>(() => {\n  if (props.color) {\n    return typeof props.color === 'string' ? parseColor(props.color) : props.color\n  }\n  if (pickerCtx) {\n    return pickerCtx.color.value\n  }\n  return parseColor('#000000')\n})\n\n// Reka ColorSwatch sets aria-label from its `label` prop.\n// Provide accessible label: explicit label > colorName > hex value.\nconst accessibleLabel = computed(() =>\n  props.label ?? props.colorName ?? colorToHex(resolvedColor.value),\n)\n\nconst styles = computed(() =>\n  colorSwatchVariants({ shape: props.shape, size: props.size }),\n)\n</script>\n\n<template>\n  <RekaColorSwatch\n    :color=\"resolvedColor\"\n    :label=\"accessibleLabel\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles, props.class)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAYd,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAEpD,MAAM,gBAAgB,eAAsB;AAC1C,OAAI,MAAM,MACR,QAAO,OAAO,MAAM,UAAU,WAAW,WAAW,MAAM,MAAM,GAAG,MAAM;AAE3E,OAAI,UACF,QAAO,UAAU,MAAM;AAEzB,UAAO,WAAW,UAAS;IAC5B;EAID,MAAM,kBAAkB,eACtB,MAAM,SAAS,MAAM,aAAa,WAAW,cAAc,MAAM,CACnE;EAEA,MAAM,SAAS,eACb,oBAAoB;GAAE,OAAO,MAAM;GAAO,MAAM,MAAM;GAAM,CAAC,CAC/D;;uBAIE,YAME,MAAA,YAAA,EAAA;IALC,OAAO,cAAA;IACP,OAAO,gBAAA;IACP,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,OAAQ,MAAM,MAAK,CAAA"}

package/dist/components/color-swatch-picker/ColorSwatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatchPicker.js","names":[],"sources":["../../../src/components/color-swatch-picker/ColorSwatchPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSwatchPickerRoot,\n  ColorSwatchPickerItem,\n  ColorSwatchPickerItemIndicator,\n  ColorSwatchPickerItemSwatch,\n  parseColor,\n  colorToHex,\n  getChannelValue,\n  type Color,\n} from 'reka-ui'\nimport { colorSwatchPickerVariants, type ColorSwatchPickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\n// Disable Vue default attr inheritance so we can manually pass attrs to the root\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  colors: (Color | string)[]\n  layout?: ColorSwatchPickerVariants['layout']\n  size?: ColorSwatchPickerVariants['size']\n  variant?: ColorSwatchPickerVariants['variant']\n  class?: string\n}>(), {\n  layout: 'grid',\n  size: 'md',\n  variant: 'circle',\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\n// Access all attributes (including aria-label) to forward manually\nconst attrs = useAttrs()\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\n// ColorSwatchPickerRoot works with hex strings\nconst colorHex = computed<string>(() => {\n  if (pickerCtx) return colorToHex(pickerCtx.color.value)\n  return local!.toHex()\n})\n\nconst styles = computed(() =>\n  colorSwatchPickerVariants({\n    layout: props.layout,\n    size: props.size,\n    variant: props.variant,\n  }),\n)\n\n// Normalize each color entry to a hex string (the value ColorSwatchPickerItem expects)\nfunction toHexString(c: Color | string): string {\n  return typeof c === 'string' ? c : colorToHex(c)\n}\n\n// ColorSwatchPickerRoot emits string | string[] | null — guard to string before use\nfunction onUpdate(next: unknown) {\n  if (typeof next !== 'string') return\n  if (pickerCtx) {\n    const parsed = parseColor(next)\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(parsed, 'red') },\n      { channel: 'green' as const, value: getChannelValue(parsed, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(parsed, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(parsed, 'alpha') },\n    ])\n  } else {\n    local!.color.value = parseColor(next)\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSwatchPickerRoot\n    v-bind=\"attrs\"\n    :model-value=\"colorHex\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:model-value=\"onUpdate\"\n  >\n    <ColorSwatchPickerItem\n      v-for=\"(c, i) in colors\"\n      :key=\"i\"\n      :value=\"toHexString(c)\"\n      :class=\"styles.item()\"\n    >\n      <ColorSwatchPickerItemSwatch :class=\"styles.swatch()\" />\n      <ColorSwatchPickerItemIndicator :class=\"styles.indicator()\" />\n    </ColorSwatchPickerItem>\n  </ColorSwatchPickerRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ColorSwatchPicker.js","names":[],"sources":["../../../src/components/color-swatch-picker/ColorSwatchPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSwatchPickerRoot,\n  ColorSwatchPickerItem,\n  ColorSwatchPickerItemIndicator,\n  ColorSwatchPickerItemSwatch,\n  parseColor,\n  colorToHex,\n  getChannelValue,\n  type Color,\n} from 'reka-ui'\nimport { colorSwatchPickerVariants, type ColorSwatchPickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\n// Disable Vue default attr inheritance so we can manually pass attrs to the root\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  colors: (Color | string)[]\n  layout?: ColorSwatchPickerVariants['layout']\n  size?: ColorSwatchPickerVariants['size']\n  variant?: ColorSwatchPickerVariants['variant']\n  class?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  multiple?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  dir?: 'ltr' | 'rtl'\n  disabled?: boolean\n  selectionBehavior?: 'replace' | 'toggle'\n  highlightOnHover?: boolean\n}>(), {\n  layout: 'grid',\n  size: 'md',\n  variant: 'circle',\n  asChild: false,\n  required: false,\n  multiple: false,\n  disabled: false,\n  highlightOnHover: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'highlight': [value: unknown]\n  'entry-focus': [event: Event]\n  'leave': [event: Event]\n}>()\n\n// Access all attributes (including aria-label) to forward manually\nconst attrs = useAttrs()\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\n// ColorSwatchPickerRoot works with hex strings\nconst colorHex = computed<string>(() => {\n  if (pickerCtx) return colorToHex(pickerCtx.color.value)\n  return local!.toHex()\n})\n\nconst styles = computed(() =>\n  colorSwatchPickerVariants({\n    layout: props.layout,\n    size: props.size,\n    variant: props.variant,\n  }),\n)\n\n// Normalize each color entry to a hex string (the value ColorSwatchPickerItem expects)\nfunction toHexString(c: Color | string): string {\n  return typeof c === 'string' ? c : colorToHex(c)\n}\n\n// ColorSwatchPickerRoot emits string | string[] | null — guard to string before use\nfunction onUpdate(next: unknown) {\n  if (typeof next !== 'string') return\n  if (pickerCtx) {\n    const parsed = parseColor(next)\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(parsed, 'red') },\n      { channel: 'green' as const, value: getChannelValue(parsed, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(parsed, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(parsed, 'alpha') },\n    ])\n  } else {\n    local!.color.value = parseColor(next)\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSwatchPickerRoot\n    v-bind=\"attrs\"\n    :model-value=\"colorHex\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :multiple=\"props.multiple\"\n    :orientation=\"props.orientation\"\n    :dir=\"props.dir\"\n    :disabled=\"props.disabled\"\n    :selection-behavior=\"props.selectionBehavior\"\n    :highlight-on-hover=\"props.highlightOnHover\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:model-value=\"onUpdate\"\n    @highlight=\"(v: unknown) => emit('highlight', v)\"\n    @entry-focus=\"(e: Event) => emit('entry-focus', e)\"\n    @leave=\"(e: Event) => emit('leave', e)\"\n  >\n    <ColorSwatchPickerItem\n      v-for=\"(c, i) in colors\"\n      :key=\"i\"\n      :value=\"toHexString(c)\"\n      :class=\"styles.item()\"\n    >\n      <ColorSwatchPickerItemSwatch :class=\"styles.swatch()\" />\n      <ColorSwatchPickerItemIndicator :class=\"styles.indicator()\" />\n    </ColorSwatchPickerItem>\n  </ColorSwatchPickerRoot>\n</template>\n"],"mappings":""}

package/dist/components/color-swatch-picker/ColorSwatchPicker.vue_vue_type_script_setup_true_lang.js

@@ -15,9 +15,39 @@ var ColorSwatchPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		layout: { default: "grid" },
 		size: { default: "md" },
 		variant: { default: "circle" },
-		class: {}
+		class: {},
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		orientation: {},
+		dir: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		selectionBehavior: {},
+		highlightOnHover: {
+			type: Boolean,
+			default: false
+		}
 	},
-	emits: ["update:modelValue"],
+	emits: [
+		"update:modelValue",
+		"highlight",
+		"entry-focus",
+		"leave"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -69,8 +99,21 @@ var ColorSwatchPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ColorSwatchPickerRoot), mergeProps(unref(attrs), {
 				"model-value": colorHex.value,
+				as: props.as,
+				"as-child": props.asChild,
+				name: props.name,
+				required: props.required,
+				multiple: props.multiple,
+				orientation: props.orientation,
+				dir: props.dir,
+				disabled: props.disabled,
+				"selection-behavior": props.selectionBehavior,
+				"highlight-on-hover": props.highlightOnHover,
 				class: unref(composeClassName)(styles.value.base(), props.class),
-				"onUpdate:modelValue": onUpdate
+				"onUpdate:modelValue": onUpdate,
+				onHighlight: _cache[0] || (_cache[0] = (v) => emit("highlight", v)),
+				onEntryFocus: _cache[1] || (_cache[1] = (e) => emit("entry-focus", e)),
+				onLeave: _cache[2] || (_cache[2] = (e) => emit("leave", e))
 			}), {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.colors, (c, i) => {
 					return openBlock(), createBlock(unref(ColorSwatchPickerItem), {
@@ -83,7 +126,20 @@ var ColorSwatchPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					}, 8, ["value", "class"]);
 				}), 128))]),
 				_: 1
-			}, 16, ["model-value", "class"]);
+			}, 16, [
+				"model-value",
+				"as",
+				"as-child",
+				"name",
+				"required",
+				"multiple",
+				"orientation",
+				"dir",
+				"disabled",
+				"selection-behavior",
+				"highlight-on-hover",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/color-swatch-picker/ColorSwatchPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatchPicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-swatch-picker/ColorSwatchPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSwatchPickerRoot,\n  ColorSwatchPickerItem,\n  ColorSwatchPickerItemIndicator,\n  ColorSwatchPickerItemSwatch,\n  parseColor,\n  colorToHex,\n  getChannelValue,\n  type Color,\n} from 'reka-ui'\nimport { colorSwatchPickerVariants, type ColorSwatchPickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\n// Disable Vue default attr inheritance so we can manually pass attrs to the root\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  colors: (Color | string)[]\n  layout?: ColorSwatchPickerVariants['layout']\n  size?: ColorSwatchPickerVariants['size']\n  variant?: ColorSwatchPickerVariants['variant']\n  class?: string\n}>(), {\n  layout: 'grid',\n  size: 'md',\n  variant: 'circle',\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\n// Access all attributes (including aria-label) to forward manually\nconst attrs = useAttrs()\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\n// ColorSwatchPickerRoot works with hex strings\nconst colorHex = computed<string>(() => {\n  if (pickerCtx) return colorToHex(pickerCtx.color.value)\n  return local!.toHex()\n})\n\nconst styles = computed(() =>\n  colorSwatchPickerVariants({\n    layout: props.layout,\n    size: props.size,\n    variant: props.variant,\n  }),\n)\n\n// Normalize each color entry to a hex string (the value ColorSwatchPickerItem expects)\nfunction toHexString(c: Color | string): string {\n  return typeof c === 'string' ? c : colorToHex(c)\n}\n\n// ColorSwatchPickerRoot emits string | string[] | null — guard to string before use\nfunction onUpdate(next: unknown) {\n  if (typeof next !== 'string') return\n  if (pickerCtx) {\n    const parsed = parseColor(next)\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(parsed, 'red') },\n      { channel: 'green' as const, value: getChannelValue(parsed, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(parsed, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(parsed, 'alpha') },\n    ])\n  } else {\n    local!.color.value = parseColor(next)\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSwatchPickerRoot\n    v-bind=\"attrs\"\n    :model-value=\"colorHex\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:model-value=\"onUpdate\"\n  >\n    <ColorSwatchPickerItem\n      v-for=\"(c, i) in colors\"\n      :key=\"i\"\n      :value=\"toHexString(c)\"\n      :class=\"styles.item()\"\n    >\n      <ColorSwatchPickerItemSwatch :class=\"styles.swatch()\" />\n      <ColorSwatchPickerItemIndicator :class=\"styles.indicator()\" />\n    </ColorSwatchPickerItem>\n  </ColorSwatchPickerRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAcd,MAAM,OAAO;EAGb,MAAM,QAAQ,UAAS;EAGvB,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAGpD,MAAM,QAAQ,YACV,OACA,cAAc;GACZ,OAAO,MAAM;GACb,cAAc,MAAM;GACrB,CAAA;EAGL,MAAM,WAAW,eAAuB;AACtC,OAAI,UAAW,QAAO,WAAW,UAAU,MAAM,MAAK;AACtD,UAAO,MAAO,OAAM;IACrB;EAED,MAAM,SAAS,eACb,0BAA0B;GACxB,QAAQ,MAAM;GACd,MAAM,MAAM;GACZ,SAAS,MAAM;GAChB,CAAC,CACJ;EAGA,SAAS,YAAY,GAA2B;AAC9C,UAAO,OAAO,MAAM,WAAW,IAAI,WAAW,EAAC;;EAIjD,SAAS,SAAS,MAAe;AAC/B,OAAI,OAAO,SAAS,SAAU;AAC9B,OAAI,WAAW;IACb,MAAM,SAAS,WAAW,KAAI;AAC9B,cAAU,YAAY;KACpB;MAAE,SAAS;MAAgB,OAAO,gBAAgB,QAAQ,MAAM;MAAE;KAClE;MAAE,SAAS;MAAkB,OAAO,gBAAgB,QAAQ,QAAQ;MAAE;KACtE;MAAE,SAAS;MAAiB,OAAO,gBAAgB,QAAQ,OAAO;MAAE;KACpE;MAAE,SAAS;MAAkB,OAAO,gBAAgB,QAAQ,QAAQ;MAAE;KACvE,CAAA;UACI;AACL,UAAO,MAAM,QAAQ,WAAW,KAAI;AACpC,SAAK,qBAAqB,KAAI;;;;uBAMhC,YAewB,MAAA,sBAAA,EAfxB,WACU,MAcc,MAdT,EAAA;IACZ,eAAa,SAAA;IACb,OAAO,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAI,MAAM,MAAK;IAClD,uBAAoB;;2BAGK,EAAA,UAAA,KAAA,EAD1B,mBAQwB,UAAA,MAAA,WAPL,QAAA,SAAT,GAAG,MAAC;yBADd,YAQwB,MAAA,sBAAA,EAAA;MANrB,KAAK;MACL,OAAO,YAAY,EAAC;MACpB,OAAK,eAAE,OAAA,MAAO,MAAI,CAAA;;6BAEqC,CAAxD,YAAwD,MAAA,4BAAA,EAAA,EAA1B,OAAK,eAAE,OAAA,MAAO,QAAM,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,EAClD,YAA8D,MAAA,+BAAA,EAAA,EAA7B,OAAK,eAAE,OAAA,MAAO,WAAS,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ColorSwatchPicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/color-swatch-picker/ColorSwatchPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue'\nimport {\n  ColorSwatchPickerRoot,\n  ColorSwatchPickerItem,\n  ColorSwatchPickerItemIndicator,\n  ColorSwatchPickerItemSwatch,\n  parseColor,\n  colorToHex,\n  getChannelValue,\n  type Color,\n} from 'reka-ui'\nimport { colorSwatchPickerVariants, type ColorSwatchPickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\n\n// Disable Vue default attr inheritance so we can manually pass attrs to the root\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  colors: (Color | string)[]\n  layout?: ColorSwatchPickerVariants['layout']\n  size?: ColorSwatchPickerVariants['size']\n  variant?: ColorSwatchPickerVariants['variant']\n  class?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  required?: boolean\n  multiple?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  dir?: 'ltr' | 'rtl'\n  disabled?: boolean\n  selectionBehavior?: 'replace' | 'toggle'\n  highlightOnHover?: boolean\n}>(), {\n  layout: 'grid',\n  size: 'md',\n  variant: 'circle',\n  asChild: false,\n  required: false,\n  multiple: false,\n  disabled: false,\n  highlightOnHover: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'highlight': [value: unknown]\n  'entry-focus': [event: Event]\n  'leave': [event: Event]\n}>()\n\n// Access all attributes (including aria-label) to forward manually\nconst attrs = useAttrs()\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\n// ColorSwatchPickerRoot works with hex strings\nconst colorHex = computed<string>(() => {\n  if (pickerCtx) return colorToHex(pickerCtx.color.value)\n  return local!.toHex()\n})\n\nconst styles = computed(() =>\n  colorSwatchPickerVariants({\n    layout: props.layout,\n    size: props.size,\n    variant: props.variant,\n  }),\n)\n\n// Normalize each color entry to a hex string (the value ColorSwatchPickerItem expects)\nfunction toHexString(c: Color | string): string {\n  return typeof c === 'string' ? c : colorToHex(c)\n}\n\n// ColorSwatchPickerRoot emits string | string[] | null — guard to string before use\nfunction onUpdate(next: unknown) {\n  if (typeof next !== 'string') return\n  if (pickerCtx) {\n    const parsed = parseColor(next)\n    pickerCtx.setChannels([\n      { channel: 'red' as const, value: getChannelValue(parsed, 'red') },\n      { channel: 'green' as const, value: getChannelValue(parsed, 'green') },\n      { channel: 'blue' as const, value: getChannelValue(parsed, 'blue') },\n      { channel: 'alpha' as const, value: getChannelValue(parsed, 'alpha') },\n    ])\n  } else {\n    local!.color.value = parseColor(next)\n    emit('update:modelValue', next)\n  }\n}\n</script>\n\n<template>\n  <ColorSwatchPickerRoot\n    v-bind=\"attrs\"\n    :model-value=\"colorHex\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    :multiple=\"props.multiple\"\n    :orientation=\"props.orientation\"\n    :dir=\"props.dir\"\n    :disabled=\"props.disabled\"\n    :selection-behavior=\"props.selectionBehavior\"\n    :highlight-on-hover=\"props.highlightOnHover\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:model-value=\"onUpdate\"\n    @highlight=\"(v: unknown) => emit('highlight', v)\"\n    @entry-focus=\"(e: Event) => emit('entry-focus', e)\"\n    @leave=\"(e: Event) => emit('leave', e)\"\n  >\n    <ColorSwatchPickerItem\n      v-for=\"(c, i) in colors\"\n      :key=\"i\"\n      :value=\"toHexString(c)\"\n      :class=\"styles.item()\"\n    >\n      <ColorSwatchPickerItemSwatch :class=\"styles.swatch()\" />\n      <ColorSwatchPickerItemIndicator :class=\"styles.indicator()\" />\n    </ColorSwatchPickerItem>\n  </ColorSwatchPickerRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EA6Bd,MAAM,OAAO;EAQb,MAAM,QAAQ,UAAS;EAGvB,MAAM,YAAY,OAAO,uBAAuB,KAAI;EAGpD,MAAM,QAAQ,YACV,OACA,cAAc;GACZ,OAAO,MAAM;GACb,cAAc,MAAM;GACrB,CAAA;EAGL,MAAM,WAAW,eAAuB;AACtC,OAAI,UAAW,QAAO,WAAW,UAAU,MAAM,MAAK;AACtD,UAAO,MAAO,OAAM;IACrB;EAED,MAAM,SAAS,eACb,0BAA0B;GACxB,QAAQ,MAAM;GACd,MAAM,MAAM;GACZ,SAAS,MAAM;GAChB,CAAC,CACJ;EAGA,SAAS,YAAY,GAA2B;AAC9C,UAAO,OAAO,MAAM,WAAW,IAAI,WAAW,EAAC;;EAIjD,SAAS,SAAS,MAAe;AAC/B,OAAI,OAAO,SAAS,SAAU;AAC9B,OAAI,WAAW;IACb,MAAM,SAAS,WAAW,KAAI;AAC9B,cAAU,YAAY;KACpB;MAAE,SAAS;MAAgB,OAAO,gBAAgB,QAAQ,MAAM;MAAE;KAClE;MAAE,SAAS;MAAkB,OAAO,gBAAgB,QAAQ,QAAQ;MAAE;KACtE;MAAE,SAAS;MAAiB,OAAO,gBAAgB,QAAQ,OAAO;MAAE;KACpE;MAAE,SAAS;MAAkB,OAAO,gBAAgB,QAAQ,QAAQ;MAAE;KACvE,CAAA;UACI;AACL,UAAO,MAAM,QAAQ,WAAW,KAAI;AACpC,SAAK,qBAAqB,KAAI;;;;uBAMhC,YA4BwB,MAAA,sBAAA,EA5BxB,WACU,MA2Bc,MA3BT,EAAA;IACZ,eAAa,SAAA;IACb,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,MAAM,MAAM;IACZ,UAAU,MAAM;IAChB,UAAU,MAAM;IAChB,aAAa,MAAM;IACnB,KAAK,MAAM;IACX,UAAU,MAAM;IAChB,sBAAoB,MAAM;IAC1B,sBAAoB,MAAM;IAC1B,OAAO,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAI,MAAM,MAAK;IAClD,uBAAoB;IACpB,aAAS,OAAA,OAAA,OAAA,MAAG,MAAe,KAAI,aAAc,EAAC;IAC9C,cAAW,OAAA,OAAA,OAAA,MAAG,MAAa,KAAI,eAAgB,EAAC;IAChD,SAAK,OAAA,OAAA,OAAA,MAAG,MAAa,KAAI,SAAU,EAAC;;2BAGX,EAAA,UAAA,KAAA,EAD1B,mBAQwB,UAAA,MAAA,WAPL,QAAA,SAAT,GAAG,MAAC;yBADd,YAQwB,MAAA,sBAAA,EAAA;MANrB,KAAK;MACL,OAAO,YAAY,EAAC;MACpB,OAAK,eAAE,OAAA,MAAO,MAAI,CAAA;;6BAEqC,CAAxD,YAAwD,MAAA,4BAAA,EAAA,EAA1B,OAAK,eAAE,OAAA,MAAO,QAAM,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,EAClD,YAA8D,MAAA,+BAAA,EAAA,EAA7B,OAAK,eAAE,OAAA,MAAO,WAAS,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA"}

package/dist/components/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, useId, useSlots, watch } from 'vue'\nimport { ComboboxRoot } from 'reka-ui'\nimport { comboBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useComboBoxProvide } from './ComboBox.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport ComboBoxInput from './ComboBoxInput.vue'\nimport ComboBoxContent from './ComboBoxContent.vue'\nimport ComboBoxItem from './ComboBoxItem.vue'\n\nexport interface ComboBoxItem {\n  value: string\n  label?: string\n  textValue?: string\n  isDisabled?: boolean\n}\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  open?: boolean\n  defaultOpen?: boolean\n  items?: ComboBoxItem[]\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isRequired?: boolean\n  allowsCustomValue?: boolean\n  fullWidth?: boolean\n  /** Custom filter function: return true to include item */\n  filterFunction?: (item: string, searchTerm: string) => boolean\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  items: () => [],\n  label: undefined,\n  placeholder: undefined,\n  description: undefined,\n  errorMessage: undefined,\n  isInvalid: false,\n  isDisabled: false,\n  isRequired: false,\n  allowsCustomValue: false,\n  fullWidth: false,\n  filterFunction: undefined,\n  class: undefined,\n  classNames: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'update:open': [value: boolean]\n}>()\n\nconst labelId = useId()\n\nconst slots = useSlots()\n// Compound chrome present → pass slot through (advanced). Otherwise render the\n// input/content/items internally (short-form).\nconst usesCustomChrome = computed(() =>\n  hasSlotComponent(slots.default?.(), [ComboBoxInput, ComboBoxContent]),\n)\n\nconst slotFns = computed(() =>\n  comboBoxVariants({\n    fullWidth: props.fullWidth,\n  })\n)\n\n// Default filter: case-insensitive substring match\nconst effectiveFilter = computed(() => {\n  if (props.filterFunction) return props.filterFunction\n  return (itemText: string, searchTerm: string): boolean =>\n    itemText.toLowerCase().includes(searchTerm.toLowerCase())\n})\n\n// Registry for slot-rendered items: value → label (populated by ComboBoxItem at mount).\n// Replaced with a new Map instance on each mutation so Vue's ref() reactivity tracks changes.\nconst slotItemRegistry = ref(new Map<string, string>())\n\nfunction registerItem(value: string, label: string) {\n  const next = new Map(slotItemRegistry.value)\n  next.set(value, label)\n  slotItemRegistry.value = next\n}\n\nfunction unregisterItem(value: string) {\n  const next = new Map(slotItemRegistry.value)\n  next.delete(value)\n  slotItemRegistry.value = next\n}\n\n// Resolve a user-facing value (\"us\") to the label text used internally by Reka.\n// Priority: items prop entry > slot registry > identity fallback\nfunction labelFor(value: string | undefined): string {\n  if (!value) return ''\n  const item = props.items.find(i => i.value === value)\n  if (item) return item.label ?? item.textValue ?? value\n  return slotItemRegistry.value.get(value) ?? value\n}\n\n// Resolve a Reka-internal label text back to the user-facing value.\nfunction valueFor(label: string): string {\n  if (!label) return ''\n  // Check items prop first\n  const item = props.items.find(i => (i.label ?? i.textValue ?? i.value) === label)\n  if (item) return item.value\n  // Check slot registry\n  for (const [value, lbl] of slotItemRegistry.value) {\n    if (lbl === label) return value\n  }\n  return label\n}\n\n// internalValue holds the label text that Reka sees as its modelValue.\n// This lets Reka write the label directly into the input without a displayValue function.\nconst internalValue = ref(labelFor(props.modelValue))\n\n// Map a stored value back to its human-readable label for the input display.\n// Used as a no-op pass-through since internalValue already holds the label.\nconst displayValue = computed(() => (val: string): string => val)\n\n// Parent → internal: when the user's v-model changes, resolve to label text\nwatch(() => props.modelValue, (val) => {\n  const next = labelFor(val)\n  if (internalValue.value !== next) internalValue.value = next\n})\n\n// Internal → parent: when Reka emits a label text (after selection), translate to real value\nfunction handleModelValueUpdate(emitted: string) {\n  internalValue.value = emitted\n  emit('update:modelValue', valueFor(emitted))\n}\n\n// When slot items register (children mount after parent), re-resolve internalValue.\n// This covers the case where modelValue is set before children have mounted.\nwatch(slotItemRegistry, () => {\n  const next = labelFor(props.modelValue)\n  if (next !== internalValue.value && valueFor(internalValue.value) === (props.modelValue ?? '')) {\n    internalValue.value = next\n  }\n})\n\nuseComboBoxProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  fullWidth: toRef(props, 'fullWidth'),\n  slots: slotFns,\n  displayValue,\n  registerItem,\n  unregisterItem,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    data-slot=\"combo-box\"\n  >\n    <label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      data-slot=\"label\"\n    >\n      {{ props.label }}\n      <span\n        v-if=\"props.isRequired\"\n        aria-hidden=\"true\"\n      > *</span>\n    </label>\n\n    <ComboboxRoot\n      v-model=\"internalValue\"\n      :default-value=\"props.defaultValue ? labelFor(props.defaultValue) : undefined\"\n      :open=\"props.open\"\n      :default-open=\"props.defaultOpen\"\n      :disabled=\"props.isDisabled\"\n      :required=\"props.isRequired\"\n      :filter-function=\"effectiveFilter\"\n      @update:model-value=\"handleModelValueUpdate($event)\"\n      @update:open=\"emit('update:open', $event)\"\n    >\n      <slot v-if=\"usesCustomChrome\" />\n      <template v-else>\n        <ComboBoxInput :placeholder=\"props.placeholder\" />\n        <ComboBoxContent>\n          <ComboBoxItem\n            v-for=\"item in props.items\"\n            :key=\"item.value\"\n            :value=\"item.value\"\n            :is-disabled=\"item.isDisabled\"\n          >\n            <slot\n              name=\"item\"\n              :item=\"item\"\n            >{{ item.label ?? item.textValue ?? item.value }}</slot>\n          </ComboBoxItem>\n        </ComboBoxContent>\n      </template>\n    </ComboboxRoot>\n\n    <div\n      v-if=\"props.description || (props.isInvalid && props.errorMessage)\"\n      data-slot=\"helper-wrapper\"\n    >\n      <p\n        v-if=\"props.isInvalid && props.errorMessage\"\n        data-slot=\"error-message\"\n        aria-live=\"polite\"\n      >\n        {{ props.errorMessage }}\n      </p>\n      <p\n        v-else-if=\"props.description\"\n        data-slot=\"description\"\n      >\n        {{ props.description }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ComboBox.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, useId, useSlots, watch } from 'vue'\nimport { ComboboxRoot } from 'reka-ui'\nimport { comboBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useComboBoxProvide } from './ComboBox.context'\nimport { hasSlotComponent } from '../../utils/hasSlotComponent'\nimport ComboBoxInput from './ComboBoxInput.vue'\nimport ComboBoxContent from './ComboBoxContent.vue'\nimport ComboBoxItem from './ComboBoxItem.vue'\n\nexport interface ComboBoxItem {\n  value: string\n  label?: string\n  textValue?: string\n  isDisabled?: boolean\n}\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string\n  defaultValue?: string\n  open?: boolean\n  defaultOpen?: boolean\n  items?: ComboBoxItem[]\n  label?: string\n  placeholder?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isRequired?: boolean\n  allowsCustomValue?: boolean\n  fullWidth?: boolean\n  /** Custom filter function: return true to include item */\n  filterFunction?: (item: string, searchTerm: string) => boolean\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Reset search term when user blurs the input. */\n  resetSearchTermOnBlur?: boolean\n  /** Reset search term after an item is selected. */\n  resetSearchTermOnSelect?: boolean\n  /** Open dropdown when the input gains focus. */\n  openOnFocus?: boolean\n  /** Open dropdown when the input is clicked. */\n  openOnClick?: boolean\n  /** Disable Reka's built-in filter; handle filtering externally. */\n  ignoreFilter?: boolean\n  /** Reset modelValue when the input is cleared. */\n  resetModelValueOnClear?: boolean\n  /** Allow selecting multiple values. */\n  multiple?: boolean\n  /** Reading direction for the component. */\n  dir?: 'ltr' | 'rtl'\n  /** Highlight the matching item on hover. */\n  highlightOnHover?: boolean\n  /** Key to compare items by for selection equality. */\n  by?: string\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Form field name for native form submission. */\n  name?: string\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  open: undefined,\n  defaultOpen: undefined,\n  items: () => [],\n  label: undefined,\n  placeholder: undefined,\n  description: undefined,\n  errorMessage: undefined,\n  isInvalid: false,\n  isDisabled: false,\n  isRequired: false,\n  allowsCustomValue: false,\n  fullWidth: false,\n  filterFunction: undefined,\n  class: undefined,\n  classNames: undefined,\n  resetSearchTermOnBlur: undefined,\n  resetSearchTermOnSelect: undefined,\n  openOnFocus: undefined,\n  openOnClick: undefined,\n  ignoreFilter: undefined,\n  resetModelValueOnClear: undefined,\n  multiple: false,\n  dir: undefined,\n  highlightOnHover: undefined,\n  by: undefined,\n  as: undefined,\n  asChild: false,\n  name: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'update:open': [value: boolean]\n  'highlight': [context: { ref: Element; value: string } | undefined]\n}>()\n\nconst labelId = useId()\n\nconst slots = useSlots()\n// Compound chrome present → pass slot through (advanced). Otherwise render the\n// input/content/items internally (short-form).\nconst usesCustomChrome = computed(() =>\n  hasSlotComponent(slots.default?.(), [ComboBoxInput, ComboBoxContent]),\n)\n\nconst slotFns = computed(() =>\n  comboBoxVariants({\n    fullWidth: props.fullWidth,\n  })\n)\n\n// Default filter: case-insensitive substring match\nconst effectiveFilter = computed(() => {\n  if (props.filterFunction) return props.filterFunction\n  return (itemText: string, searchTerm: string): boolean =>\n    itemText.toLowerCase().includes(searchTerm.toLowerCase())\n})\n\n// Registry for slot-rendered items: value → label (populated by ComboBoxItem at mount).\n// Replaced with a new Map instance on each mutation so Vue's ref() reactivity tracks changes.\nconst slotItemRegistry = ref(new Map<string, string>())\n\nfunction registerItem(value: string, label: string) {\n  const next = new Map(slotItemRegistry.value)\n  next.set(value, label)\n  slotItemRegistry.value = next\n}\n\nfunction unregisterItem(value: string) {\n  const next = new Map(slotItemRegistry.value)\n  next.delete(value)\n  slotItemRegistry.value = next\n}\n\n// Resolve a user-facing value (\"us\") to the label text used internally by Reka.\n// Priority: items prop entry > slot registry > identity fallback\nfunction labelFor(value: string | undefined): string {\n  if (!value) return ''\n  const item = props.items.find(i => i.value === value)\n  if (item) return item.label ?? item.textValue ?? value\n  return slotItemRegistry.value.get(value) ?? value\n}\n\n// Resolve a Reka-internal label text back to the user-facing value.\nfunction valueFor(label: string): string {\n  if (!label) return ''\n  // Check items prop first\n  const item = props.items.find(i => (i.label ?? i.textValue ?? i.value) === label)\n  if (item) return item.value\n  // Check slot registry\n  for (const [value, lbl] of slotItemRegistry.value) {\n    if (lbl === label) return value\n  }\n  return label\n}\n\n// internalValue holds the label text that Reka sees as its modelValue.\n// This lets Reka write the label directly into the input without a displayValue function.\nconst internalValue = ref(labelFor(props.modelValue))\n\n// Map a stored value back to its human-readable label for the input display.\n// Used as a no-op pass-through since internalValue already holds the label.\nconst displayValue = computed(() => (val: string): string => val)\n\n// Parent → internal: when the user's v-model changes, resolve to label text\nwatch(() => props.modelValue, (val) => {\n  const next = labelFor(val)\n  if (internalValue.value !== next) internalValue.value = next\n})\n\n// Internal → parent: when Reka emits a label text (after selection), translate to real value\nfunction handleModelValueUpdate(emitted: string) {\n  internalValue.value = emitted\n  emit('update:modelValue', valueFor(emitted))\n}\n\n// When slot items register (children mount after parent), re-resolve internalValue.\n// This covers the case where modelValue is set before children have mounted.\nwatch(slotItemRegistry, () => {\n  const next = labelFor(props.modelValue)\n  if (next !== internalValue.value && valueFor(internalValue.value) === (props.modelValue ?? '')) {\n    internalValue.value = next\n  }\n})\n\nuseComboBoxProvide({\n  isDisabled: toRef(props, 'isDisabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  fullWidth: toRef(props, 'fullWidth'),\n  slots: slotFns,\n  displayValue,\n  registerItem,\n  unregisterItem,\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    data-slot=\"combo-box\"\n  >\n    <label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      data-slot=\"label\"\n    >\n      {{ props.label }}\n      <span\n        v-if=\"props.isRequired\"\n        aria-hidden=\"true\"\n      > *</span>\n    </label>\n\n    <ComboboxRoot\n      v-model=\"internalValue\"\n      :default-value=\"props.defaultValue ? labelFor(props.defaultValue) : undefined\"\n      :open=\"props.open\"\n      :default-open=\"props.defaultOpen\"\n      :disabled=\"props.isDisabled\"\n      :required=\"props.isRequired\"\n      :multiple=\"props.multiple\"\n      :name=\"props.name\"\n      :dir=\"props.dir\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :reset-search-term-on-blur=\"props.resetSearchTermOnBlur\"\n      :reset-search-term-on-select=\"props.resetSearchTermOnSelect\"\n      :open-on-focus=\"props.openOnFocus\"\n      :open-on-click=\"props.openOnClick\"\n      :ignore-filter=\"props.ignoreFilter\"\n      :reset-model-value-on-clear=\"props.resetModelValueOnClear\"\n      :highlight-on-hover=\"props.highlightOnHover\"\n      :by=\"props.by\"\n      :filter-function=\"effectiveFilter\"\n      @update:model-value=\"handleModelValueUpdate($event)\"\n      @update:open=\"emit('update:open', $event)\"\n      @highlight=\"emit('highlight', $event)\"\n    >\n      <slot v-if=\"usesCustomChrome\" />\n      <template v-else>\n        <ComboBoxInput :placeholder=\"props.placeholder\" />\n        <ComboBoxContent>\n          <ComboBoxItem\n            v-for=\"item in props.items\"\n            :key=\"item.value\"\n            :value=\"item.value\"\n            :is-disabled=\"item.isDisabled\"\n          >\n            <slot\n              name=\"item\"\n              :item=\"item\"\n            >{{ item.label ?? item.textValue ?? item.value }}</slot>\n          </ComboBoxItem>\n        </ComboBoxContent>\n      </template>\n    </ComboboxRoot>\n\n    <div\n      v-if=\"props.description || (props.isInvalid && props.errorMessage)\"\n      data-slot=\"helper-wrapper\"\n    >\n      <p\n        v-if=\"props.isInvalid && props.errorMessage\"\n        data-slot=\"error-message\"\n        aria-live=\"polite\"\n      >\n        {{ props.errorMessage }}\n      </p>\n      <p\n        v-else-if=\"props.description\"\n        data-slot=\"description\"\n      >\n        {{ props.description }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":""}