@auronui/vue 1.4.1 → 1.4.2

package/dist/components/checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":[],"sources":["../../../src/components/checkbox/CheckboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef } from 'vue'\nimport { checkboxGroupVariants, type CheckboxGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useCheckboxGroupProvide } from './checkbox-group.context'\nimport Checkbox from './Checkbox.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype CheckboxShorthandItem = { value: string; label?: string; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  variant?: CheckboxGroupVariants['variant']\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isInvalid?: boolean\n  modelValue?: string[]\n  defaultValue?: string[]\n  name?: string\n  orientation?: 'horizontal' | 'vertical'\n  label?: string\n  description?: string\n  errorMessage?: string\n  class?: string\n  /** Shorthand API: render checkboxes from an array instead of the compound slot API */\n  items?: CheckboxShorthandItem[]\n}>(), {\n  variant: 'primary',\n  isDisabled: undefined,\n  disabled: undefined,\n  isInvalid: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n  errorMessage: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]]\n}>()\n\n// Internal state for uncontrolled mode\nconst internalValues = ref<string[]>(props.defaultValue ?? [])\n\n// Current values: controlled (modelValue) or uncontrolled (internalValues)\nconst currentValues = computed(() => props.modelValue ?? internalValues.value)\n\n// Toggle value in the selection list\nfunction toggleValue(value: string) {\n  const next = currentValues.value.includes(value)\n    ? currentValues.value.filter(v => v !== value)\n    : [...currentValues.value, value]\n  internalValues.value = next\n  emit('update:modelValue', next)\n}\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'CheckboxGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\n// Provide context to child Checkboxes\nuseCheckboxGroupProvide({\n  variant: toRef(props, 'variant'),\n  disabled: isDisabled,\n  isInvalid: toRef(props, 'isInvalid'),\n  selectedValues: currentValues,\n  toggleValue,\n  name: toRef(props, 'name'),\n})\n\nconst labelId = `checkbox-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst groupClasses = computed(() =>\n  checkboxGroupVariants({ variant: props.variant })\n)\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :data-orientation=\"props.orientation\"\n    :class=\"composeClassName(groupClasses, props.class)\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      class=\"checkbox-group__label\"\n    >{{ props.label }}</span>\n    <div class=\"checkbox-group__wrapper\">\n      <template v-if=\"props.items\">\n        <Checkbox\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n        >{{ item.label ?? item.value }}</Checkbox>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      class=\"checkbox-group__error-message\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      class=\"checkbox-group__description\"\n    >{{ props.description }}</span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"CheckboxGroup.js","names":[],"sources":["../../../src/components/checkbox/CheckboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef } from 'vue'\nimport { checkboxGroupVariants, type CheckboxGroupVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCheckboxGroupProvide } from './checkbox-group.context'\nimport Checkbox from './Checkbox.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype CheckboxShorthandItem = {\n  value: string\n  label?: string\n  disabled?: boolean\n  class?: ClassValue\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    indicator: ClassValue\n    content: ClassValue\n  }>\n}\n\nconst props = withDefaults(defineProps<{\n  variant?: CheckboxGroupVariants['variant']\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isInvalid?: boolean\n  modelValue?: string[]\n  defaultValue?: string[]\n  name?: string\n  orientation?: 'horizontal' | 'vertical'\n  label?: string\n  description?: string\n  errorMessage?: string\n  class?: string\n  /** Shorthand API: render checkboxes from an array instead of the compound slot API */\n  items?: CheckboxShorthandItem[]\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    label: ClassValue\n    wrapper: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n    /** Applied to every shorthand-rendered Checkbox, before any per-item override */\n    checkbox: Partial<{\n      base: ClassValue\n      control: ClassValue\n      indicator: ClassValue\n      content: ClassValue\n    }>\n  }>\n}>(), {\n  variant: 'primary',\n  isDisabled: undefined,\n  disabled: undefined,\n  isInvalid: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n  errorMessage: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]]\n}>()\n\n// Internal state for uncontrolled mode\nconst internalValues = ref<string[]>(props.defaultValue ?? [])\n\n// Current values: controlled (modelValue) or uncontrolled (internalValues)\nconst currentValues = computed(() => props.modelValue ?? internalValues.value)\n\n// Toggle value in the selection list\nfunction toggleValue(value: string) {\n  const next = currentValues.value.includes(value)\n    ? currentValues.value.filter(v => v !== value)\n    : [...currentValues.value, value]\n  internalValues.value = next\n  emit('update:modelValue', next)\n}\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'CheckboxGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\n// Provide context to child Checkboxes\nuseCheckboxGroupProvide({\n  variant: toRef(props, 'variant'),\n  disabled: isDisabled,\n  isInvalid: toRef(props, 'isInvalid'),\n  selectedValues: currentValues,\n  toggleValue,\n  name: toRef(props, 'name'),\n})\n\nconst labelId = `checkbox-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst slotFns = computed(() =>\n  checkboxGroupVariants({ variant: props.variant })\n)\n\n// Group-wide checkbox classNames apply first; per-item classNames win on conflict.\nfunction itemClassNames(item: CheckboxShorthandItem) {\n  return {\n    base: composeClassName(props.classNames?.checkbox?.base, item.classNames?.base),\n    control: composeClassName(props.classNames?.checkbox?.control, item.classNames?.control),\n    indicator: composeClassName(props.classNames?.checkbox?.indicator, item.classNames?.indicator),\n    content: composeClassName(props.classNames?.checkbox?.content, item.classNames?.content),\n  }\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :data-orientation=\"props.orientation\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ props.label }}</span>\n    <div :class=\"composeClassName(slotFns.wrapper(), props.classNames?.wrapper)\">\n      <template v-if=\"props.items\">\n        <Checkbox\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :class=\"item.class\"\n          :class-names=\"itemClassNames(item)\"\n        >{{ item.label ?? item.value }}</Checkbox>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n    >{{ props.description }}</span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/checkbox/CheckboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -10,15 +10,6 @@ var _hoisted_1 = [
 	"aria-invalid",
 	"data-orientation"
 ];
-var _hoisted_2 = { class: "checkbox-group__wrapper" };
-var _hoisted_3 = {
-	key: 1,
-	class: "checkbox-group__error-message"
-};
-var _hoisted_4 = {
-	key: 2,
-	class: "checkbox-group__description"
-};
 var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "CheckboxGroup",
 	props: {
@@ -43,7 +34,8 @@ var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		description: { default: void 0 },
 		errorMessage: { default: void 0 },
 		class: {},
-		items: {}
+		items: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -66,31 +58,52 @@ var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			name: toRef(props, "name")
 		});
 		const labelId = `checkbox-group-label-${Math.random().toString(36).slice(2, 8)}`;
-		const groupClasses = computed(() => checkboxGroupVariants({ variant: props.variant }));
+		const slotFns = computed(() => checkboxGroupVariants({ variant: props.variant }));
+		function itemClassNames(item) {
+			return {
+				base: composeClassName(props.classNames?.checkbox?.base, item.classNames?.base),
+				control: composeClassName(props.classNames?.checkbox?.control, item.classNames?.control),
+				indicator: composeClassName(props.classNames?.checkbox?.indicator, item.classNames?.indicator),
+				content: composeClassName(props.classNames?.checkbox?.content, item.classNames?.content)
+			};
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				role: "group",
 				"aria-labelledby": props.label ? labelId : void 0,
 				"aria-invalid": props.isInvalid || void 0,
 				"data-orientation": props.orientation,
-				class: normalizeClass(unref(composeClassName)(groupClasses.value, props.class))
+				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class))
 			}, [
 				props.label ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					id: labelId,
-					class: "checkbox-group__label"
-				}, toDisplayString(props.label), 1)) : createCommentVNode("", true),
-				createElementVNode("div", _hoisted_2, [props.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.items, (item) => {
+					class: normalizeClass(unref(composeClassName)(slotFns.value.label(), props.classNames?.label))
+				}, toDisplayString(props.label), 3)) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(unref(composeClassName)(slotFns.value.wrapper(), props.classNames?.wrapper)) }, [props.items ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.items, (item) => {
 					return openBlock(), createBlock(Checkbox_default, {
 						key: item.value,
 						value: item.value,
-						"is-disabled": item.disabled
+						"is-disabled": item.disabled,
+						class: normalizeClass(item.class),
+						"class-names": itemClassNames(item)
 					}, {
 						default: withCtx(() => [createTextVNode(toDisplayString(item.label ?? item.value), 1)]),
 						_: 2
-					}, 1032, ["value", "is-disabled"]);
-				}), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })]),
-				props.isInvalid && props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(props.errorMessage), 1)) : props.description ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+					}, 1032, [
+						"value",
+						"is-disabled",
+						"class",
+						"class-names"
+					]);
+				}), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })], 2),
+				props.isInvalid && props.errorMessage ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(unref(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
+				}, toDisplayString(props.errorMessage), 3)) : props.description ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(unref(composeClassName)(slotFns.value.description(), props.classNames?.description))
+				}, toDisplayString(props.description), 3)) : createCommentVNode("", true)
 			], 10, _hoisted_1);
 		};
 	}

package/dist/components/checkbox/CheckboxGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/checkbox/CheckboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef } from 'vue'\nimport { checkboxGroupVariants, type CheckboxGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useCheckboxGroupProvide } from './checkbox-group.context'\nimport Checkbox from './Checkbox.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype CheckboxShorthandItem = { value: string; label?: string; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  variant?: CheckboxGroupVariants['variant']\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isInvalid?: boolean\n  modelValue?: string[]\n  defaultValue?: string[]\n  name?: string\n  orientation?: 'horizontal' | 'vertical'\n  label?: string\n  description?: string\n  errorMessage?: string\n  class?: string\n  /** Shorthand API: render checkboxes from an array instead of the compound slot API */\n  items?: CheckboxShorthandItem[]\n}>(), {\n  variant: 'primary',\n  isDisabled: undefined,\n  disabled: undefined,\n  isInvalid: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n  errorMessage: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]]\n}>()\n\n// Internal state for uncontrolled mode\nconst internalValues = ref<string[]>(props.defaultValue ?? [])\n\n// Current values: controlled (modelValue) or uncontrolled (internalValues)\nconst currentValues = computed(() => props.modelValue ?? internalValues.value)\n\n// Toggle value in the selection list\nfunction toggleValue(value: string) {\n  const next = currentValues.value.includes(value)\n    ? currentValues.value.filter(v => v !== value)\n    : [...currentValues.value, value]\n  internalValues.value = next\n  emit('update:modelValue', next)\n}\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'CheckboxGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\n// Provide context to child Checkboxes\nuseCheckboxGroupProvide({\n  variant: toRef(props, 'variant'),\n  disabled: isDisabled,\n  isInvalid: toRef(props, 'isInvalid'),\n  selectedValues: currentValues,\n  toggleValue,\n  name: toRef(props, 'name'),\n})\n\nconst labelId = `checkbox-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst groupClasses = computed(() =>\n  checkboxGroupVariants({ variant: props.variant })\n)\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :data-orientation=\"props.orientation\"\n    :class=\"composeClassName(groupClasses, props.class)\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      class=\"checkbox-group__label\"\n    >{{ props.label }}</span>\n    <div class=\"checkbox-group__wrapper\">\n      <template v-if=\"props.items\">\n        <Checkbox\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n        >{{ item.label ?? item.value }}</Checkbox>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      class=\"checkbox-group__error-message\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      class=\"checkbox-group__description\"\n    >{{ props.description }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EA8Bd,MAAM,OAAO;EAKb,MAAM,iBAAiB,IAAc,MAAM,gBAAgB,EAAE,CAAA;EAG7D,MAAM,gBAAgB,eAAe,MAAM,cAAc,eAAe,MAAK;EAG7E,SAAS,YAAY,OAAe;GAClC,MAAM,OAAO,cAAc,MAAM,SAAS,MAAK,GAC3C,cAAc,MAAM,QAAO,MAAK,MAAM,MAAK,GAC3C,CAAC,GAAG,cAAc,OAAO,MAAK;AAClC,kBAAe,QAAQ;AACvB,QAAK,qBAAqB,KAAI;;EAGhC,MAAM,aAAa,yBACjB,iBAAiB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACjF;AAGA,0BAAwB;GACtB,SAAS,MAAM,OAAO,UAAU;GAChC,UAAU;GACV,WAAW,MAAM,OAAO,YAAY;GACpC,gBAAgB;GAChB;GACA,MAAM,MAAM,OAAO,OAAO;GAC3B,CAAA;EAED,MAAM,UAAU,wBAAwB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE;EAE9E,MAAM,eAAe,eACnB,sBAAsB,EAAE,SAAS,MAAM,SAAS,CAAA,CAClD;;uBAIE,mBA+BM,OAAA;IA9BJ,MAAK;IACJ,mBAAiB,MAAM,QAAQ,UAAU,KAAA;IACzC,gBAAc,MAAM,aAAa,KAAA;IACjC,oBAAkB,MAAM;IACxB,OAAK,eAAE,MAAA,iBAAgB,CAAC,aAAA,OAAc,MAAM,MAAK,CAAA;;IAG1C,MAAM,SAAA,WAAA,EADd,mBAIyB,QAAA;;KAFtB,IAAI;KACL,OAAM;uBACJ,MAAM,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IACf,mBAUM,OAVN,YAUM,CATY,MAAM,SAAA,UAAA,KAAA,EACpB,mBAK0C,UAAA,EAAA,KAAA,GAAA,EAAA,WAJzB,MAAM,QAAd,SAAI;yBADb,YAK0C,kBAAA;MAHvC,KAAK,KAAK;MACV,OAAO,KAAK;MACZ,eAAa,KAAK;;6BACU,CAAA,gBAAA,gBAA3B,KAAK,SAAS,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;gBAE9B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA;IAGT,MAAM,aAAa,MAAM,gBAAA,WAAA,EADjC,mBAGgC,QAHhC,YAGgC,gBAA5B,MAAM,aAAY,EAAA,EAAA,IAET,MAAM,eAAA,WAAA,EADnB,mBAG+B,QAH/B,YAG+B,gBAA3B,MAAM,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"CheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/checkbox/CheckboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef } from 'vue'\nimport { checkboxGroupVariants, type CheckboxGroupVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCheckboxGroupProvide } from './checkbox-group.context'\nimport Checkbox from './Checkbox.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype CheckboxShorthandItem = {\n  value: string\n  label?: string\n  disabled?: boolean\n  class?: ClassValue\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    indicator: ClassValue\n    content: ClassValue\n  }>\n}\n\nconst props = withDefaults(defineProps<{\n  variant?: CheckboxGroupVariants['variant']\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isInvalid?: boolean\n  modelValue?: string[]\n  defaultValue?: string[]\n  name?: string\n  orientation?: 'horizontal' | 'vertical'\n  label?: string\n  description?: string\n  errorMessage?: string\n  class?: string\n  /** Shorthand API: render checkboxes from an array instead of the compound slot API */\n  items?: CheckboxShorthandItem[]\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    label: ClassValue\n    wrapper: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n    /** Applied to every shorthand-rendered Checkbox, before any per-item override */\n    checkbox: Partial<{\n      base: ClassValue\n      control: ClassValue\n      indicator: ClassValue\n      content: ClassValue\n    }>\n  }>\n}>(), {\n  variant: 'primary',\n  isDisabled: undefined,\n  disabled: undefined,\n  isInvalid: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n  errorMessage: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]]\n}>()\n\n// Internal state for uncontrolled mode\nconst internalValues = ref<string[]>(props.defaultValue ?? [])\n\n// Current values: controlled (modelValue) or uncontrolled (internalValues)\nconst currentValues = computed(() => props.modelValue ?? internalValues.value)\n\n// Toggle value in the selection list\nfunction toggleValue(value: string) {\n  const next = currentValues.value.includes(value)\n    ? currentValues.value.filter(v => v !== value)\n    : [...currentValues.value, value]\n  internalValues.value = next\n  emit('update:modelValue', next)\n}\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'CheckboxGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\n// Provide context to child Checkboxes\nuseCheckboxGroupProvide({\n  variant: toRef(props, 'variant'),\n  disabled: isDisabled,\n  isInvalid: toRef(props, 'isInvalid'),\n  selectedValues: currentValues,\n  toggleValue,\n  name: toRef(props, 'name'),\n})\n\nconst labelId = `checkbox-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst slotFns = computed(() =>\n  checkboxGroupVariants({ variant: props.variant })\n)\n\n// Group-wide checkbox classNames apply first; per-item classNames win on conflict.\nfunction itemClassNames(item: CheckboxShorthandItem) {\n  return {\n    base: composeClassName(props.classNames?.checkbox?.base, item.classNames?.base),\n    control: composeClassName(props.classNames?.checkbox?.control, item.classNames?.control),\n    indicator: composeClassName(props.classNames?.checkbox?.indicator, item.classNames?.indicator),\n    content: composeClassName(props.classNames?.checkbox?.content, item.classNames?.content),\n  }\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :data-orientation=\"props.orientation\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ props.label }}</span>\n    <div :class=\"composeClassName(slotFns.wrapper(), props.classNames?.wrapper)\">\n      <template v-if=\"props.items\">\n        <Checkbox\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :class=\"item.class\"\n          :class-names=\"itemClassNames(item)\"\n        >{{ item.label ?? item.value }}</Checkbox>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n    >{{ props.description }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,QAAQ;EA4Cd,MAAM,OAAO;EAKb,MAAM,iBAAiB,IAAc,MAAM,gBAAgB,EAAE,CAAA;EAG7D,MAAM,gBAAgB,eAAe,MAAM,cAAc,eAAe,MAAK;EAG7E,SAAS,YAAY,OAAe;GAClC,MAAM,OAAO,cAAc,MAAM,SAAS,MAAK,GAC3C,cAAc,MAAM,QAAO,MAAK,MAAM,MAAK,GAC3C,CAAC,GAAG,cAAc,OAAO,MAAK;AAClC,kBAAe,QAAQ;AACvB,QAAK,qBAAqB,KAAI;;EAGhC,MAAM,aAAa,yBACjB,iBAAiB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACjF;AAGA,0BAAwB;GACtB,SAAS,MAAM,OAAO,UAAU;GAChC,UAAU;GACV,WAAW,MAAM,OAAO,YAAY;GACpC,gBAAgB;GAChB;GACA,MAAM,MAAM,OAAO,OAAO;GAC3B,CAAA;EAED,MAAM,UAAU,wBAAwB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE;EAE9E,MAAM,UAAU,eACd,sBAAsB,EAAE,SAAS,MAAM,SAAS,CAAA,CAClD;EAGA,SAAS,eAAe,MAA6B;AACnD,UAAO;IACL,MAAM,iBAAiB,MAAM,YAAY,UAAU,MAAM,KAAK,YAAY,KAAK;IAC/E,SAAS,iBAAiB,MAAM,YAAY,UAAU,SAAS,KAAK,YAAY,QAAQ;IACxF,WAAW,iBAAiB,MAAM,YAAY,UAAU,WAAW,KAAK,YAAY,UAAU;IAC9F,SAAS,iBAAiB,MAAM,YAAY,UAAU,SAAS,KAAK,YAAY,QAAQ;IAC1F;;;uBAKA,mBAiCM,OAAA;IAhCJ,MAAK;IACJ,mBAAiB,MAAM,QAAQ,UAAU,KAAA;IACzC,gBAAc,MAAM,aAAa,KAAA;IACjC,oBAAkB,MAAM;IACxB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;;IAG5C,MAAM,SAAA,WAAA,EADd,mBAIyB,QAAA;;KAFtB,IAAI;KACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;uBAC/D,MAAM,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IACf,mBAYM,OAAA,EAZA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACxD,MAAM,SAAA,UAAA,KAAA,EACpB,mBAO0C,UAAA,EAAA,KAAA,GAAA,EAAA,WANzB,MAAM,QAAd,SAAI;yBADb,YAO0C,kBAAA;MALvC,KAAK,KAAK;MACV,OAAO,KAAK;MACZ,eAAa,KAAK;MAClB,OAAK,eAAE,KAAK,MAAK;MACjB,eAAa,eAAe,KAAI;;6BACJ,CAAA,gBAAA,gBAA3B,KAAK,SAAS,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;gBAE9B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,EAAA,EAAA;IAGT,MAAM,aAAa,MAAM,gBAAA,WAAA,EADjC,mBAGgC,QAAA;;KAD7B,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;uBAC7E,MAAM,aAAY,EAAA,EAAA,IAET,MAAM,eAAA,WAAA,EADnB,mBAG+B,QAAA;;KAD5B,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;uBAC3E,MAAM,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleGroup.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef } from 'vue'\nimport { collapsibleGroupVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport {\n  provideCollapsibleGroup,\n  type CollapsibleGroupRegistryEntry,\n} from './collapsible-group.context'\nimport Collapsible from './Collapsible.vue'\nimport CollapsibleTrigger from './CollapsibleTrigger.vue'\nimport CollapsibleContent from './CollapsibleContent.vue'\n\ntype CollapsibleShorthandItem = { title: string; content?: string; defaultOpen?: boolean; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  // single-open = true means only one child open at a time\n  singleOpen?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render collapsibles from an array instead of the compound slot API */\n  items?: CollapsibleShorthandItem[]\n}>(), {\n  singleOpen: false,\n})\n\nconst registry = new Map<string, CollapsibleGroupRegistryEntry>()\n\nprovideCollapsibleGroup({\n  allowMultiple: toRef(() => !props.singleOpen),\n  register(entry) {\n    registry.set(entry.id, entry)\n  },\n  unregister(id) {\n    registry.delete(id)\n  },\n  notifyOpen(openingId: string) {\n    if (props.singleOpen) {\n      for (const [id, entry] of registry) {\n        if (id !== openingId && entry.open.value) {\n          entry.open.value = false\n        }\n      }\n    }\n  },\n})\n\nconst slotFns = computed(() => collapsibleGroupVariants({}))\n</script>\n\n<template>\n  <div :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\">\n    <template v-if=\"props.items\">\n      <Collapsible\n        v-for=\"(item, idx) in props.items\"\n        :key=\"idx\"\n        :default-open=\"item.defaultOpen\"\n        :is-disabled=\"item.disabled\"\n      >\n        <CollapsibleTrigger>{{ item.title }}</CollapsibleTrigger>\n        <CollapsibleContent>{{ item.content }}</CollapsibleContent>\n      </Collapsible>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"CollapsibleGroup.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef } from 'vue'\nimport { collapsibleGroupVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport {\n  provideCollapsibleGroup,\n  type CollapsibleGroupRegistryEntry,\n} from './collapsible-group.context'\nimport Collapsible from './Collapsible.vue'\nimport CollapsibleTrigger from './CollapsibleTrigger.vue'\nimport CollapsibleContent from './CollapsibleContent.vue'\n\ntype CollapsibleShorthandItem = { title: string; content?: string; defaultOpen?: boolean; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  // single-open = true means only one child open at a time\n  singleOpen?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    indicator: ClassValue\n    body: ClassValue\n    bodyInner: ClassValue\n  }>\n  /** Shorthand API: render collapsibles from an array instead of the compound slot API */\n  items?: CollapsibleShorthandItem[]\n}>(), {\n  singleOpen: false,\n})\n\nconst registry = new Map<string, CollapsibleGroupRegistryEntry>()\n\nprovideCollapsibleGroup({\n  allowMultiple: toRef(() => !props.singleOpen),\n  register(entry) {\n    registry.set(entry.id, entry)\n  },\n  unregister(id) {\n    registry.delete(id)\n  },\n  notifyOpen(openingId: string) {\n    if (props.singleOpen) {\n      for (const [id, entry] of registry) {\n        if (id !== openingId && entry.open.value) {\n          entry.open.value = false\n        }\n      }\n    }\n  },\n})\n\nconst slotFns = computed(() => collapsibleGroupVariants({}))\n</script>\n\n<template>\n  <div :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\">\n    <template v-if=\"props.items\">\n      <Collapsible\n        v-for=\"(item, idx) in props.items\"\n        :key=\"idx\"\n        :default-open=\"item.defaultOpen\"\n        :is-disabled=\"item.disabled\"\n      >\n        <CollapsibleTrigger :class-names=\"{ trigger: props.classNames?.trigger, indicator: props.classNames?.indicator }\">{{ item.title }}</CollapsibleTrigger>\n        <CollapsibleContent :class-names=\"{ body: props.classNames?.body, bodyInner: props.classNames?.bodyInner }\">{{ item.content }}</CollapsibleContent>\n      </Collapsible>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -48,13 +48,19 @@ var CollapsibleGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					"default-open": item.defaultOpen,
 					"is-disabled": item.disabled
 				}, {
-					default: withCtx(() => [createVNode(CollapsibleTrigger_default, null, {
+					default: withCtx(() => [createVNode(CollapsibleTrigger_default, { "class-names": {
+						trigger: props.classNames?.trigger,
+						indicator: props.classNames?.indicator
+					} }, {
 						default: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
 						_: 2
-					}, 1024), createVNode(CollapsibleContent_default, null, {
+					}, 1032, ["class-names"]), createVNode(CollapsibleContent_default, { "class-names": {
+						body: props.classNames?.body,
+						bodyInner: props.classNames?.bodyInner
+					} }, {
 						default: withCtx(() => [createTextVNode(toDisplayString(item.content), 1)]),
 						_: 2
-					}, 1024)]),
+					}, 1032, ["class-names"])]),
 					_: 2
 				}, 1032, ["default-open", "is-disabled"]);
 			}), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })], 2);

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef } from 'vue'\nimport { collapsibleGroupVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport {\n  provideCollapsibleGroup,\n  type CollapsibleGroupRegistryEntry,\n} from './collapsible-group.context'\nimport Collapsible from './Collapsible.vue'\nimport CollapsibleTrigger from './CollapsibleTrigger.vue'\nimport CollapsibleContent from './CollapsibleContent.vue'\n\ntype CollapsibleShorthandItem = { title: string; content?: string; defaultOpen?: boolean; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  // single-open = true means only one child open at a time\n  singleOpen?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render collapsibles from an array instead of the compound slot API */\n  items?: CollapsibleShorthandItem[]\n}>(), {\n  singleOpen: false,\n})\n\nconst registry = new Map<string, CollapsibleGroupRegistryEntry>()\n\nprovideCollapsibleGroup({\n  allowMultiple: toRef(() => !props.singleOpen),\n  register(entry) {\n    registry.set(entry.id, entry)\n  },\n  unregister(id) {\n    registry.delete(id)\n  },\n  notifyOpen(openingId: string) {\n    if (props.singleOpen) {\n      for (const [id, entry] of registry) {\n        if (id !== openingId && entry.open.value) {\n          entry.open.value = false\n        }\n      }\n    }\n  },\n})\n\nconst slotFns = computed(() => collapsibleGroupVariants({}))\n</script>\n\n<template>\n  <div :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\">\n    <template v-if=\"props.items\">\n      <Collapsible\n        v-for=\"(item, idx) in props.items\"\n        :key=\"idx\"\n        :default-open=\"item.defaultOpen\"\n        :is-disabled=\"item.disabled\"\n      >\n        <CollapsibleTrigger>{{ item.title }}</CollapsibleTrigger>\n        <CollapsibleContent>{{ item.content }}</CollapsibleContent>\n      </Collapsible>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAcd,MAAM,2BAAW,IAAI,KAA2C;AAEhE,0BAAwB;GACtB,eAAe,YAAY,CAAC,MAAM,WAAW;GAC7C,SAAS,OAAO;AACd,aAAS,IAAI,MAAM,IAAI,MAAK;;GAE9B,WAAW,IAAI;AACb,aAAS,OAAO,GAAE;;GAEpB,WAAW,WAAmB;AAC5B,QAAI,MAAM;UACH,MAAM,CAAC,IAAI,UAAU,SACxB,KAAI,OAAO,aAAa,MAAM,KAAK,MACjC,OAAM,KAAK,QAAQ;;;GAK5B,CAAA;EAED,MAAM,UAAU,eAAe,yBAAyB,EAAE,CAAC,CAAA;;uBAIzD,mBAaM,OAAA,EAbA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA,EAAA,EAAA,CAC/D,MAAM,SAAA,UAAA,KAAA,EACpB,mBAQc,UAAA,EAAA,KAAA,GAAA,EAAA,WAPU,MAAM,QAApB,MAAM,QAAG;wBADnB,YAQc,qBAAA;KANX,KAAK;KACL,gBAAc,KAAK;KACnB,eAAa,KAAK;;4BAEsC,CAAzD,YAAyD,4BAAA,MAAA;6BAArB,CAAA,gBAAA,gBAAb,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;eACjC,YAA2D,4BAAA,MAAA;6BAArB,CAAA,gBAAA,gBAAf,KAAK,QAAO,EAAA,EAAA,CAAA,CAAA;;;;;eAGvC,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"CollapsibleGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef } from 'vue'\nimport { collapsibleGroupVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport {\n  provideCollapsibleGroup,\n  type CollapsibleGroupRegistryEntry,\n} from './collapsible-group.context'\nimport Collapsible from './Collapsible.vue'\nimport CollapsibleTrigger from './CollapsibleTrigger.vue'\nimport CollapsibleContent from './CollapsibleContent.vue'\n\ntype CollapsibleShorthandItem = { title: string; content?: string; defaultOpen?: boolean; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  // single-open = true means only one child open at a time\n  singleOpen?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    indicator: ClassValue\n    body: ClassValue\n    bodyInner: ClassValue\n  }>\n  /** Shorthand API: render collapsibles from an array instead of the compound slot API */\n  items?: CollapsibleShorthandItem[]\n}>(), {\n  singleOpen: false,\n})\n\nconst registry = new Map<string, CollapsibleGroupRegistryEntry>()\n\nprovideCollapsibleGroup({\n  allowMultiple: toRef(() => !props.singleOpen),\n  register(entry) {\n    registry.set(entry.id, entry)\n  },\n  unregister(id) {\n    registry.delete(id)\n  },\n  notifyOpen(openingId: string) {\n    if (props.singleOpen) {\n      for (const [id, entry] of registry) {\n        if (id !== openingId && entry.open.value) {\n          entry.open.value = false\n        }\n      }\n    }\n  },\n})\n\nconst slotFns = computed(() => collapsibleGroupVariants({}))\n</script>\n\n<template>\n  <div :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\">\n    <template v-if=\"props.items\">\n      <Collapsible\n        v-for=\"(item, idx) in props.items\"\n        :key=\"idx\"\n        :default-open=\"item.defaultOpen\"\n        :is-disabled=\"item.disabled\"\n      >\n        <CollapsibleTrigger :class-names=\"{ trigger: props.classNames?.trigger, indicator: props.classNames?.indicator }\">{{ item.title }}</CollapsibleTrigger>\n        <CollapsibleContent :class-names=\"{ body: props.classNames?.body, bodyInner: props.classNames?.bodyInner }\">{{ item.content }}</CollapsibleContent>\n      </Collapsible>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAkBd,MAAM,2BAAW,IAAI,KAA2C;AAEhE,0BAAwB;GACtB,eAAe,YAAY,CAAC,MAAM,WAAW;GAC7C,SAAS,OAAO;AACd,aAAS,IAAI,MAAM,IAAI,MAAK;;GAE9B,WAAW,IAAI;AACb,aAAS,OAAO,GAAE;;GAEpB,WAAW,WAAmB;AAC5B,QAAI,MAAM;UACH,MAAM,CAAC,IAAI,UAAU,SACxB,KAAI,OAAO,aAAa,MAAM,KAAK,MACjC,OAAM,KAAK,QAAQ;;;GAK5B,CAAA;EAED,MAAM,UAAU,eAAe,yBAAyB,EAAE,CAAC,CAAA;;uBAIzD,mBAaM,OAAA,EAbA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA,EAAA,EAAA,CAC/D,MAAM,SAAA,UAAA,KAAA,EACpB,mBAQc,UAAA,EAAA,KAAA,GAAA,EAAA,WAPU,MAAM,QAApB,MAAM,QAAG;wBADnB,YAQc,qBAAA;KANX,KAAK;KACL,gBAAc,KAAK;KACnB,eAAa,KAAK;;4BAEoI,CAAvJ,YAAuJ,4BAAA,EAAlI,eAAW;MAAA,SAAa,MAAM,YAAY;MAAO,WAAa,MAAM,YAAY;MAAS,EAAA,EAAA;6BAAoB,CAAA,gBAAA,gBAAb,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;gCAC/H,YAAmJ,4BAAA,EAA9H,eAAW;MAAA,MAAU,MAAM,YAAY;MAAI,WAAa,MAAM,YAAY;MAAS,EAAA,EAAA;6BAAsB,CAAA,gBAAA,gBAAf,KAAK,QAAO,EAAA,EAAA,CAAA,CAAA;;;;;eAG/H,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,EAAA,EAAA"}

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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\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  isRequired?: boolean\n  /** @deprecated Use isRequired instead. */\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n}>(), {\n  isDisabled: undefined,\n  disabled: undefined,\n  isReadOnly: undefined,\n  readonly: undefined,\n  fullWidth: false,\n  asChild: false,\n  isRequired: undefined,\n  required: undefined,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'ColorField', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'ColorField', 'isReadOnly', () => props.isReadOnly, 'readonly', () => props.readonly,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'ColorField', 'isRequired', () => props.isRequired, 'required', () => props.required,\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=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"isRequired\"\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":""}
+{"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 , type ClassValue} from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\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  isRequired?: boolean\n  /** @deprecated Use isRequired instead. */\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    label: ClassValue\n    input: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n  }>\n}>(), {\n  isDisabled: undefined,\n  disabled: undefined,\n  isReadOnly: undefined,\n  readonly: undefined,\n  fullWidth: false,\n  asChild: false,\n  isRequired: undefined,\n  required: undefined,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'ColorField', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'ColorField', 'isReadOnly', () => props.isReadOnly, 'readonly', () => props.readonly,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'ColorField', 'isRequired', () => props.isRequired, 'required', () => props.required,\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=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"isRequired\"\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    @update:color=\"onColorUpdate\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      :class=\"composeClassName(styles.label(), props.classNames?.label)\"\n    >{{ label }}</label>\n    <ColorFieldInput\n      :id=\"id\"\n      :placeholder=\"placeholder\"\n      :aria-label=\"label ? undefined : (props.ariaLabel ?? 'Color value')\"\n      :class=\"composeClassName(styles.input(), props.classNames?.input)\"\n    />\n    <span\n      v-if=\"description && !errorMessage\"\n      :class=\"composeClassName(styles.description(), props.classNames?.description)\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      :class=\"composeClassName(styles.errorMessage(), props.classNames?.errorMessage)\"\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

@@ -7,15 +7,6 @@ import { colorFieldVariants } from "@auronui/styles";
 import { ColorFieldInput, ColorFieldRoot, getChannelValue } from "reka-ui";
 //#region src/components/color-field/ColorField.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["for"];
-var _hoisted_2 = {
-	key: 1,
-	class: "color-field__description"
-};
-var _hoisted_3 = {
-	key: 2,
-	class: "color-field__error-message",
-	role: "alert"
-};
 var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ColorField",
 	props: {
@@ -65,7 +56,8 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			default: false
 		},
 		locale: {},
-		step: {}
+		step: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue", "update:color"],
 	setup(__props, { emit: __emit }) {
@@ -121,27 +113,35 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				"disable-wheel-change": props.disableWheelChange,
 				locale: props.locale,
 				step: props.step,
-				class: normalizeClass(unref(composeClassName)(unref(styles), props.class)),
+				class: normalizeClass(unref(composeClassName)(unref(styles).base(), props.class)),
 				"onUpdate:color": onColorUpdate
 			}, {
 				default: withCtx(() => [
 					__props.label ? (openBlock(), createElementBlock("label", {
 						key: 0,
 						for: unref(id),
-						class: "color-field__label"
-					}, toDisplayString(__props.label), 9, _hoisted_1)) : createCommentVNode("", true),
+						class: normalizeClass(unref(composeClassName)(unref(styles).label(), props.classNames?.label))
+					}, toDisplayString(__props.label), 11, _hoisted_1)) : createCommentVNode("", true),
 					createVNode(unref(ColorFieldInput), {
 						id: unref(id),
 						placeholder: __props.placeholder,
 						"aria-label": __props.label ? void 0 : props.ariaLabel ?? "Color value",
-						class: "color-field__input"
+						class: normalizeClass(unref(composeClassName)(unref(styles).input(), props.classNames?.input))
 					}, null, 8, [
 						"id",
 						"placeholder",
-						"aria-label"
+						"aria-label",
+						"class"
 					]),
-					__props.description && !__props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
-					__props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.errorMessage), 1)) : createCommentVNode("", true)
+					__props.description && !__props.errorMessage ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(unref(composeClassName)(unref(styles).description(), props.classNames?.description))
+					}, toDisplayString(__props.description), 3)) : createCommentVNode("", true),
+					__props.errorMessage ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(unref(composeClassName)(unref(styles).errorMessage(), props.classNames?.errorMessage)),
+						role: "alert"
+					}, toDisplayString(__props.errorMessage), 3)) : createCommentVNode("", true)
 				]),
 				_: 1
 			}, 8, [

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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\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  isRequired?: boolean\n  /** @deprecated Use isRequired instead. */\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n}>(), {\n  isDisabled: undefined,\n  disabled: undefined,\n  isReadOnly: undefined,\n  readonly: undefined,\n  fullWidth: false,\n  asChild: false,\n  isRequired: undefined,\n  required: undefined,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'ColorField', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'ColorField', 'isReadOnly', () => props.isReadOnly, 'readonly', () => props.readonly,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'ColorField', 'isRequired', () => props.isRequired, 'required', () => props.required,\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=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"isRequired\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,MAAM,QAAQ;EAuCd,MAAM,OAAO;EAKb,MAAM,aAAa,yBACjB,cAAc,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC9E;EAEA,MAAM,aAAa,yBACjB,cAAc,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC9E;EAEA,MAAM,aAAa,yBACjB,cAAc,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC9E;EAEA,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,MAAA,WAAU;IACpB,UAAU,MAAA,WAAU;IACpB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,MAAM,MAAM;IACZ,UAAU,MAAA,WAAU;IACpB,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"}
+{"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 , type ClassValue} from '../../utils/composeClassName'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useColorState } from '../../composables/useColorState'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  modelValue?: Color | string\n  defaultValue?: Color | string\n  label?: string\n  description?: string\n  errorMessage?: string\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\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  isRequired?: boolean\n  /** @deprecated Use isRequired instead. */\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    label: ClassValue\n    input: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n  }>\n}>(), {\n  isDisabled: undefined,\n  disabled: undefined,\n  isReadOnly: undefined,\n  readonly: undefined,\n  fullWidth: false,\n  asChild: false,\n  isRequired: undefined,\n  required: undefined,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'ColorField', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'ColorField', 'isReadOnly', () => props.isReadOnly, 'readonly', () => props.readonly,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'ColorField', 'isRequired', () => props.isRequired, 'required', () => props.required,\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=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"isRequired\"\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    @update:color=\"onColorUpdate\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      :class=\"composeClassName(styles.label(), props.classNames?.label)\"\n    >{{ label }}</label>\n    <ColorFieldInput\n      :id=\"id\"\n      :placeholder=\"placeholder\"\n      :aria-label=\"label ? undefined : (props.ariaLabel ?? 'Color value')\"\n      :class=\"composeClassName(styles.input(), props.classNames?.input)\"\n    />\n    <span\n      v-if=\"description && !errorMessage\"\n      :class=\"composeClassName(styles.description(), props.classNames?.description)\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      :class=\"composeClassName(styles.errorMessage(), props.classNames?.errorMessage)\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </ColorFieldRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,MAAM,QAAQ;EA8Cd,MAAM,OAAO;EAKb,MAAM,aAAa,yBACjB,cAAc,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC9E;EAEA,MAAM,aAAa,yBACjB,cAAc,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC9E;EAEA,MAAM,aAAa,yBACjB,cAAc,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC9E;EAEA,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,MAAA,WAAU;IACpB,UAAU,MAAA,WAAU;IACpB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,MAAM,MAAM;IACZ,UAAU,MAAA,WAAU;IACpB,eAAc,MAAM;IACpB,SAAU,MAAM;IAChB,wBAAsB,MAAM;IAC5B,QAAQ,MAAM;IACd,MAAM,MAAM;IACZ,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,MAAI,EAAI,MAAM,MAAK,CAAA;IAClD,kBAAc;;2BAMK;KAHZ,QAAA,SAAA,WAAA,EADR,mBAIoB,SAAA;;MAFjB,KAAK,MAAA,GAAE;MACP,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;wBAC9D,QAAA,MAAK,EAAA,IAAA,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;MAChD,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;;;;;;;KAG1D,QAAA,eAAW,CAAK,QAAA,gBAAA,WAAA,EADxB,mBAGyB,QAAA;;MADtB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;wBAC1E,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAEP,QAAA,gBAAA,WAAA,EADR,mBAI0B,QAAA;;MAFvB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;MAC9E,MAAK;wBACH,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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\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  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  readonly?: boolean\n  fullWidth?: ColorInputGroupVariants['fullWidth']\n  variant?: ColorInputGroupVariants['variant']\n  class?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  isRequired?: boolean\n  /** @deprecated Use isRequired instead. */\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  isDisabled: undefined,\n  disabled: undefined,\n  isReadOnly: undefined,\n  readonly: undefined,\n  asChild: false,\n  isRequired: undefined,\n  required: undefined,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isReadOnly', () => props.isReadOnly, 'readonly', () => props.readonly,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isRequired', () => props.isRequired, 'required', () => props.required,\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=\"isDisabled\"\n      :readonly=\"isReadOnly\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :name=\"props.name\"\n      :required=\"isRequired\"\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":""}
+{"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 , type ClassValue} from '../../utils/composeClassName'\nimport ColorSwatch from '../color-swatch/ColorSwatch.vue'\nimport { useColorState } from '../../composables/useColorState'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\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  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  readonly?: boolean\n  fullWidth?: ColorInputGroupVariants['fullWidth']\n  variant?: ColorInputGroupVariants['variant']\n  class?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  isRequired?: boolean\n  /** @deprecated Use isRequired instead. */\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    wrapper: ClassValue\n    label: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n  }>\n}>(), {\n  suffixLabel: 'HEX',\n  fullWidth: false,\n  variant: 'primary',\n  isDisabled: undefined,\n  disabled: undefined,\n  isReadOnly: undefined,\n  readonly: undefined,\n  asChild: false,\n  isRequired: undefined,\n  required: undefined,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isReadOnly', () => props.isReadOnly, 'readonly', () => props.readonly,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isRequired', () => props.isRequired, 'required', () => props.required,\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=\"composeClassName(styles.wrapper(), props.classNames?.wrapper)\">\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      :class=\"composeClassName(styles.label(), props.classNames?.label)\"\n    >{{ label }}</label>\n    <ColorFieldRoot\n      :model-value=\"color\"\n      :disabled=\"isDisabled\"\n      :readonly=\"isReadOnly\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :name=\"props.name\"\n      :required=\"isRequired\"\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=\"composeClassName(styles.description(), props.classNames?.description)\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      :class=\"composeClassName(styles.errorMessage(), props.classNames?.errorMessage)\"\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

@@ -7,17 +7,7 @@ import { computed, createCommentVNode, createElementBlock, createElementVNode, c
 import { colorInputGroupVariants } from "@auronui/styles";
 import { ColorFieldInput, ColorFieldRoot, getChannelValue } from "reka-ui";
 //#region src/components/color-input-group/ColorInputGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "color-input-group__wrapper" };
-var _hoisted_2 = ["for"];
-var _hoisted_3 = {
-	key: 1,
-	class: "color-input-group__description"
-};
-var _hoisted_4 = {
-	key: 2,
-	class: "color-input-group__error-message",
-	role: "alert"
-};
+var _hoisted_1 = ["for"];
 var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ColorInputGroup",
 	props: {
@@ -68,7 +58,8 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			default: false
 		},
 		locale: {},
-		step: {}
+		step: {},
+		classNames: {}
 	},
 	emits: ["update:modelValue", "update:color"],
 	setup(__props, { emit: __emit }) {
@@ -114,12 +105,12 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			}
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(composeClassName)(unref(styles).wrapper(), props.classNames?.wrapper)) }, [
 				__props.label ? (openBlock(), createElementBlock("label", {
 					key: 0,
 					for: unref(id),
-					class: "color-input-group__label"
-				}, toDisplayString(__props.label), 9, _hoisted_2)) : createCommentVNode("", true),
+					class: normalizeClass(unref(composeClassName)(unref(styles).label(), props.classNames?.label))
+				}, toDisplayString(__props.label), 11, _hoisted_1)) : createCommentVNode("", true),
 				createVNode(unref(ColorFieldRoot), {
 					"model-value": color.value,
 					disabled: unref(isDisabled),
@@ -181,9 +172,16 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					"class",
 					"aria-invalid"
 				]),
-				__props.description && !__props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
-				__props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.errorMessage), 1)) : createCommentVNode("", true)
-			]);
+				__props.description && !__props.errorMessage ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(unref(composeClassName)(unref(styles).description(), props.classNames?.description))
+				}, toDisplayString(__props.description), 3)) : createCommentVNode("", true),
+				__props.errorMessage ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(unref(composeClassName)(unref(styles).errorMessage(), props.classNames?.errorMessage)),
+					role: "alert"
+				}, toDisplayString(__props.errorMessage), 3)) : createCommentVNode("", true)
+			], 2);
 		};
 	}
 });

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'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\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  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  readonly?: boolean\n  fullWidth?: ColorInputGroupVariants['fullWidth']\n  variant?: ColorInputGroupVariants['variant']\n  class?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  isRequired?: boolean\n  /** @deprecated Use isRequired instead. */\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  isDisabled: undefined,\n  disabled: undefined,\n  isReadOnly: undefined,\n  readonly: undefined,\n  asChild: false,\n  isRequired: undefined,\n  required: undefined,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isReadOnly', () => props.isReadOnly, 'readonly', () => props.readonly,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isRequired', () => props.isRequired, 'required', () => props.required,\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=\"isDisabled\"\n      :readonly=\"isReadOnly\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :name=\"props.name\"\n      :required=\"isRequired\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EA0Cd,MAAM,OAAO;EAKb,MAAM,aAAa,yBACjB,mBAAmB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACnF;EAEA,MAAM,aAAa,yBACjB,mBAAmB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACnF;EAEA,MAAM,aAAa,yBACjB,mBAAmB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACnF;EAEA,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,MAAA,WAAU;KACpB,UAAU,MAAA,WAAU;KACpB,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,MAAM,MAAM;KACZ,UAAU,MAAA,WAAU;KACpB,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"}
+{"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 , type ClassValue} from '../../utils/composeClassName'\nimport ColorSwatch from '../color-swatch/ColorSwatch.vue'\nimport { useColorState } from '../../composables/useColorState'\nimport { ColorPickerContextKey } from '../color-picker/color-picker.context'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\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  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  readonly?: boolean\n  fullWidth?: ColorInputGroupVariants['fullWidth']\n  variant?: ColorInputGroupVariants['variant']\n  class?: string\n  as?: string\n  asChild?: boolean\n  name?: string\n  isRequired?: boolean\n  /** @deprecated Use isRequired instead. */\n  required?: boolean\n  colorSpace?: string\n  channel?: string\n  disableWheelChange?: boolean\n  locale?: string\n  step?: number\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    wrapper: ClassValue\n    label: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n  }>\n}>(), {\n  suffixLabel: 'HEX',\n  fullWidth: false,\n  variant: 'primary',\n  isDisabled: undefined,\n  disabled: undefined,\n  isReadOnly: undefined,\n  readonly: undefined,\n  asChild: false,\n  isRequired: undefined,\n  required: undefined,\n  disableWheelChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: Color]\n  'update:color': [value: Color]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isReadOnly', () => props.isReadOnly, 'readonly', () => props.readonly,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'ColorInputGroup', 'isRequired', () => props.isRequired, 'required', () => props.required,\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=\"composeClassName(styles.wrapper(), props.classNames?.wrapper)\">\n    <label\n      v-if=\"label\"\n      :for=\"id\"\n      :class=\"composeClassName(styles.label(), props.classNames?.label)\"\n    >{{ label }}</label>\n    <ColorFieldRoot\n      :model-value=\"color\"\n      :disabled=\"isDisabled\"\n      :readonly=\"isReadOnly\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :name=\"props.name\"\n      :required=\"isRequired\"\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=\"composeClassName(styles.description(), props.classNames?.description)\"\n    >{{ description }}</span>\n    <span\n      v-if=\"errorMessage\"\n      :class=\"composeClassName(styles.errorMessage(), props.classNames?.errorMessage)\"\n      role=\"alert\"\n    >{{ errorMessage }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAiDd,MAAM,OAAO;EAKb,MAAM,aAAa,yBACjB,mBAAmB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACnF;EAEA,MAAM,aAAa,yBACjB,mBAAmB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACnF;EAEA,MAAM,aAAa,yBACjB,mBAAmB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACnF;EAEA,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,OAAA,EAvDA,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA;IAE/D,QAAA,SAAA,WAAA,EADR,mBAIoB,SAAA;;KAFjB,KAAK,MAAA,GAAE;KACP,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;uBAC9D,QAAA,MAAK,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IACT,YAuCiB,MAAA,eAAA,EAAA;KAtCd,eAAa,MAAA;KACb,UAAU,MAAA,WAAU;KACpB,UAAU,MAAA,WAAU;KACpB,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,MAAM,MAAM;KACZ,UAAU,MAAA,WAAU;KACpB,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,QAAA;;KADtB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;uBAC1E,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAEP,QAAA,gBAAA,WAAA,EADR,mBAI0B,QAAA;;KAFvB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;KAC9E,MAAK;uBACH,QAAA,aAAY,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

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  /** 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":""}
+{"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    item: ClassValue\n    indicator: 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            :class-names=\"{ item: props.classNames?.item, indicator: props.classNames?.indicator }\"\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":""}

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

@@ -225,11 +225,19 @@ var ComboBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 							return openBlock(), createBlock(ComboBoxItem_default, {
 								key: item.value,
 								value: item.value,
-								"is-disabled": item.isDisabled
+								"is-disabled": item.isDisabled,
+								"class-names": {
+									item: props.classNames?.item,
+									indicator: props.classNames?.indicator
+								}
 							}, {
 								default: withCtx(() => [renderSlot(_ctx.$slots, "item", { item }, () => [createTextVNode(toDisplayString(item.label ?? item.textValue ?? item.value), 1)])]),
 								_: 2
-							}, 1032, ["value", "is-disabled"]);
+							}, 1032, [
+								"value",
+								"is-disabled",
+								"class-names"
+							]);
 						}), 128))]),
 						_: 3
 					})], 64))]),