@auronui/vue 1.3.0 → 1.4.1

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

@@ -1,4 +1,5 @@
 import { composeClassName } from "../../utils/composeClassName.js";
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { ColorPickerContextKey } from "../color-picker/color-picker.context.js";
 import { useColorState } from "../../composables/useColorState.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, normalizeClass, openBlock, toDisplayString, unref, useId, withCtx } from "vue";
@@ -23,13 +24,21 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		label: {},
 		description: {},
 		errorMessage: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: void 0
 		},
 		readonly: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		placeholder: {},
 		fullWidth: { default: false },
@@ -41,9 +50,13 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			default: false
 		},
 		name: {},
+		isRequired: {
+			type: Boolean,
+			default: void 0
+		},
 		required: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		colorSpace: {},
 		channel: {},
@@ -58,6 +71,9 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const isDisabled = useDeprecatedBooleanProp("ColorField", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
+		const isReadOnly = useDeprecatedBooleanProp("ColorField", "isReadOnly", () => props.isReadOnly, "readonly", () => props.readonly);
+		const isRequired = useDeprecatedBooleanProp("ColorField", "isRequired", () => props.isRequired, "required", () => props.required);
 		const id = useId();
 		const pickerCtx = inject(ColorPickerContextKey, null);
 		const local = pickerCtx ? null : useColorState({
@@ -94,12 +110,12 @@ var ColorField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ColorFieldRoot), {
 				"model-value": color.value,
-				disabled: __props.disabled,
-				readonly: __props.readonly,
+				disabled: unref(isDisabled),
+				readonly: unref(isReadOnly),
 				as: props.as,
 				"as-child": props.asChild,
 				name: props.name,
-				required: props.required,
+				required: unref(isRequired),
 				"color-space": props.colorSpace,
 				channel: props.channel,
 				"disable-wheel-change": props.disableWheelChange,

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { composeClassName } from "../../utils/composeClassName.js";
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { ColorPickerContextKey } from "../color-picker/color-picker.context.js";
 import { useColorState } from "../../composables/useColorState.js";
 import ColorSwatch_default from "../color-swatch/ColorSwatch.js";
@@ -27,13 +28,21 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		errorMessage: {},
 		placeholder: {},
 		suffixLabel: { default: "HEX" },
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: void 0
 		},
 		readonly: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		fullWidth: { default: false },
 		variant: { default: "primary" },
@@ -44,9 +53,13 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			default: false
 		},
 		name: {},
+		isRequired: {
+			type: Boolean,
+			default: void 0
+		},
 		required: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		colorSpace: {},
 		channel: {},
@@ -61,6 +74,9 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const isDisabled = useDeprecatedBooleanProp("ColorInputGroup", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
+		const isReadOnly = useDeprecatedBooleanProp("ColorInputGroup", "isReadOnly", () => props.isReadOnly, "readonly", () => props.readonly);
+		const isRequired = useDeprecatedBooleanProp("ColorInputGroup", "isRequired", () => props.isRequired, "required", () => props.required);
 		const id = useId();
 		const pickerCtx = inject(ColorPickerContextKey, null);
 		const local = pickerCtx ? null : useColorState({
@@ -106,12 +122,12 @@ var ColorInputGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 				}, toDisplayString(__props.label), 9, _hoisted_2)) : createCommentVNode("", true),
 				createVNode(unref(ColorFieldRoot), {
 					"model-value": color.value,
-					disabled: __props.disabled,
-					readonly: __props.readonly,
+					disabled: unref(isDisabled),
+					readonly: unref(isReadOnly),
 					as: props.as,
 					"as-child": props.asChild,
 					name: props.name,
-					required: props.required,
+					required: unref(isRequired),
 					"color-space": props.colorSpace,
 					channel: props.channel,
 					"disable-wheel-change": props.disableWheelChange,

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { composeClassName } from "../../utils/composeClassName.js";
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { provideColorPickerContext } from "./color-picker.context.js";
 import { useColorState } from "../../composables/useColorState.js";
 import ColorArea_default from "../color-area/ColorArea.js";
@@ -16,9 +17,13 @@ var ColorPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		modelValue: {},
 		defaultValue: { default: "#000000" },
 		format: { default: "hex" },
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		label: {},
 		class: {}
@@ -27,6 +32,7 @@ var ColorPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const isDisabled = useDeprecatedBooleanProp("ColorPicker", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const state = useColorState({
 			value: props.modelValue,
 			defaultValue: props.defaultValue,
@@ -52,20 +58,20 @@ var ColorPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				createVNode(ColorArea_default, {
 					"x-channel": "saturation",
 					"y-channel": "brightness",
-					disabled: __props.disabled
-				}, null, 8, ["disabled"]),
+					"is-disabled": unref(isDisabled)
+				}, null, 8, ["is-disabled"]),
 				createVNode(ColorSlider_default, {
 					channel: "hue",
-					disabled: __props.disabled
-				}, null, 8, ["disabled"]),
+					"is-disabled": unref(isDisabled)
+				}, null, 8, ["is-disabled"]),
 				createVNode(ColorSlider_default, {
 					channel: "alpha",
-					disabled: __props.disabled
-				}, null, 8, ["disabled"]),
+					"is-disabled": unref(isDisabled)
+				}, null, 8, ["is-disabled"]),
 				createVNode(ColorField_default, {
-					disabled: __props.disabled,
+					"is-disabled": unref(isDisabled),
 					label: "Hex color"
-				}, null, 8, ["disabled"]),
+				}, null, 8, ["is-disabled"]),
 				renderSlot(_ctx.$slots, "default")
 			], 10, _hoisted_1);
 		};

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { composeClassName } from "../../utils/composeClassName.js";
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { ColorPickerContextKey } from "../color-picker/color-picker.context.js";
 import { useColorState } from "../../composables/useColorState.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref, useAttrs, withCtx } from "vue";
@@ -14,9 +15,13 @@ var ColorSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		channel: {},
 		colorSpace: {},
 		orientation: { default: "horizontal" },
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		showOutput: {
 			type: Boolean,
@@ -32,9 +37,13 @@ var ColorSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			default: false
 		},
 		name: {},
+		isRequired: {
+			type: Boolean,
+			default: void 0
+		},
 		required: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		dir: {},
 		inverted: {
@@ -53,6 +62,8 @@ var ColorSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
+		const isDisabled = useDeprecatedBooleanProp("ColorSlider", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
+		const isRequired = useDeprecatedBooleanProp("ColorSlider", "isRequired", () => props.isRequired, "required", () => props.required);
 		const pickerCtx = inject(ColorPickerContextKey, null);
 		const local = pickerCtx ? null : useColorState({
 			value: props.modelValue,
@@ -75,11 +86,11 @@ var ColorSlider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				channel: __props.channel,
 				"color-space": __props.colorSpace,
 				orientation: __props.orientation,
-				disabled: __props.disabled,
+				disabled: unref(isDisabled),
 				as: props.as,
 				"as-child": props.asChild,
 				name: props.name,
-				required: props.required,
+				required: unref(isRequired),
 				dir: props.dir,
 				inverted: props.inverted,
 				step: props.step,

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { composeClassName } from "../../utils/composeClassName.js";
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { ColorPickerContextKey } from "../color-picker/color-picker.context.js";
 import { useColorState } from "../../composables/useColorState.js";
 import { Fragment, computed, createBlock, createElementBlock, createVNode, defineComponent, inject, mergeProps, normalizeClass, openBlock, renderList, unref, useAttrs, withCtx } from "vue";
@@ -22,9 +23,13 @@ var ColorSwatchPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			default: false
 		},
 		name: {},
+		isRequired: {
+			type: Boolean,
+			default: void 0
+		},
 		required: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		multiple: {
 			type: Boolean,
@@ -32,9 +37,13 @@ var ColorSwatchPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		},
 		orientation: {},
 		dir: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		selectionBehavior: {},
 		highlightOnHover: {
@@ -52,6 +61,8 @@ var ColorSwatchPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
+		const isDisabled = useDeprecatedBooleanProp("ColorSwatchPicker", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
+		const isRequired = useDeprecatedBooleanProp("ColorSwatchPicker", "isRequired", () => props.isRequired, "required", () => props.required);
 		const pickerCtx = inject(ColorPickerContextKey, null);
 		const local = pickerCtx ? null : useColorState({
 			value: props.modelValue,
@@ -102,11 +113,11 @@ var ColorSwatchPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				as: props.as,
 				"as-child": props.asChild,
 				name: props.name,
-				required: props.required,
+				required: unref(isRequired),
 				multiple: props.multiple,
 				orientation: props.orientation,
 				dir: props.dir,
-				disabled: props.disabled,
+				disabled: unref(isDisabled),
 				"selection-behavior": props.selectionBehavior,
 				"highlight-on-hover": props.highlightOnHover,
 				class: unref(composeClassName)(styles.value.base(), props.class),

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxInput.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n  /** Custom reference element for the anchor. */\n  anchorReference?: object | null\n  /** Render the anchor as a different element. */\n  anchorAs?: string\n  /** Merge anchor props onto child element. */\n  anchorAsChild?: boolean\n  /** Function to compute the display value from the current model value. */\n  displayValue?: (value: string) => string\n  /** Two-way bound search input value. */\n  modelValue?: string\n  /** Auto-focus the input on mount. */\n  autoFocus?: boolean\n  /** Disable the input. Falls back to context isDisabled. */\n  disabled?: boolean\n  /** Render the input as a different element. */\n  as?: string\n  /** Merge input props onto child element. */\n  asChild?: boolean\n  /** Disable the trigger button. */\n  triggerDisabled?: boolean\n  /** Render the trigger as a different element. */\n  triggerAs?: string\n  /** Merge trigger props onto child element. */\n  triggerAsChild?: boolean\n  /** Render the cancel button as a different element. */\n  cancelAs?: string\n  /** Merge cancel props onto child element. */\n  cancelAsChild?: boolean\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  anchorReference: undefined,\n  anchorAs: undefined,\n  anchorAsChild: false,\n  displayValue: undefined,\n  modelValue: undefined,\n  autoFocus: false,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  triggerDisabled: undefined,\n  triggerAs: undefined,\n  triggerAsChild: false,\n  cancelAs: undefined,\n  cancelAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst ctx = useComboBoxInject()\n</script>\n\n<template>\n  <ComboboxAnchor\n    :reference=\"(props.anchorReference as any)\"\n    :as=\"props.anchorAs\"\n    :as-child=\"props.anchorAsChild\"\n    :class=\"ctx.slots.value.inputGroup()\"\n    data-slot=\"input-group\"\n  >\n    <ComboboxInput\n      :placeholder=\"props.placeholder\"\n      :model-value=\"props.modelValue\"\n      :auto-focus=\"props.autoFocus\"\n      :disabled=\"props.disabled ?? ctx.isDisabled.value\"\n      :display-value=\"props.displayValue ?? ctx.displayValue.value\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      class=\"combo-box__input\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n      @update:model-value=\"emit('update:modelValue', $event)\"\n    />\n    <!-- Clear button: shown when there's input -->\n    <ComboboxCancel\n      :as=\"props.cancelAs\"\n      :as-child=\"props.cancelAsChild\"\n      class=\"combo-box__clear-button\"\n      data-slot=\"clear-button\"\n      aria-label=\"Clear\"\n    >\n      <slot name=\"clearIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"10\"\n          height=\"10\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <line\n            x1=\"18\"\n            y1=\"6\"\n            x2=\"6\"\n            y2=\"18\"\n          />\n          <line\n            x1=\"6\"\n            y1=\"6\"\n            x2=\"18\"\n            y2=\"18\"\n          />\n        </svg>\n      </slot>\n    </ComboboxCancel>\n    <!-- Dropdown trigger -->\n    <ComboboxTrigger\n      :disabled=\"props.triggerDisabled\"\n      :as=\"props.triggerAs\"\n      :as-child=\"props.triggerAsChild\"\n      :class=\"ctx.slots.value.trigger()\"\n      data-slot=\"selector-button\"\n      aria-label=\"Toggle suggestions\"\n    >\n      <slot name=\"triggerIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"combo-box-trigger-default-icon\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </ComboboxTrigger>\n  </ComboboxAnchor>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ComboBoxInput.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  placeholder?: string\n  class?: string\n  /** Custom reference element for the anchor. */\n  anchorReference?: object | null\n  /** Render the anchor as a different element. */\n  anchorAs?: string\n  /** Merge anchor props onto child element. */\n  anchorAsChild?: boolean\n  /** Function to compute the display value from the current model value. */\n  displayValue?: (value: string) => string\n  /** Two-way bound search input value. */\n  modelValue?: string\n  /** Auto-focus the input on mount. */\n  autoFocus?: boolean\n  /** Disable the input. Falls back to context isDisabled. */\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  /** Render the input as a different element. */\n  as?: string\n  /** Merge input props onto child element. */\n  asChild?: boolean\n  /** Disable the trigger button. */\n  triggerDisabled?: boolean\n  /** Render the trigger as a different element. */\n  triggerAs?: string\n  /** Merge trigger props onto child element. */\n  triggerAsChild?: boolean\n  /** Render the cancel button as a different element. */\n  cancelAs?: string\n  /** Merge cancel props onto child element. */\n  cancelAsChild?: boolean\n}>(), {\n  placeholder: undefined,\n  class: undefined,\n  anchorReference: undefined,\n  anchorAs: undefined,\n  anchorAsChild: false,\n  displayValue: undefined,\n  modelValue: undefined,\n  autoFocus: false,\n  isDisabled: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  triggerDisabled: undefined,\n  triggerAs: undefined,\n  triggerAsChild: false,\n  cancelAs: undefined,\n  cancelAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst ctx = useComboBoxInject()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'ComboBoxInput', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n  () => ctx.isDisabled.value,\n)\n</script>\n\n<template>\n  <ComboboxAnchor\n    :reference=\"(props.anchorReference as any)\"\n    :as=\"props.anchorAs\"\n    :as-child=\"props.anchorAsChild\"\n    :class=\"ctx.slots.value.inputGroup()\"\n    data-slot=\"input-group\"\n  >\n    <ComboboxInput\n      :placeholder=\"props.placeholder\"\n      :model-value=\"props.modelValue\"\n      :auto-focus=\"props.autoFocus\"\n      :disabled=\"isDisabled\"\n      :display-value=\"props.displayValue ?? ctx.displayValue.value\"\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      class=\"combo-box__input\"\n      data-slot=\"input\"\n      autocomplete=\"off\"\n      @update:model-value=\"emit('update:modelValue', $event)\"\n    />\n    <!-- Clear button: shown when there's input -->\n    <ComboboxCancel\n      :as=\"props.cancelAs\"\n      :as-child=\"props.cancelAsChild\"\n      class=\"combo-box__clear-button\"\n      data-slot=\"clear-button\"\n      aria-label=\"Clear\"\n    >\n      <slot name=\"clearIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"10\"\n          height=\"10\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <line\n            x1=\"18\"\n            y1=\"6\"\n            x2=\"6\"\n            y2=\"18\"\n          />\n          <line\n            x1=\"6\"\n            y1=\"6\"\n            x2=\"18\"\n            y2=\"18\"\n          />\n        </svg>\n      </slot>\n    </ComboboxCancel>\n    <!-- Dropdown trigger -->\n    <ComboboxTrigger\n      :disabled=\"props.triggerDisabled\"\n      :as=\"props.triggerAs\"\n      :as-child=\"props.triggerAsChild\"\n      :class=\"ctx.slots.value.trigger()\"\n      data-slot=\"selector-button\"\n      aria-label=\"Toggle suggestions\"\n    >\n      <slot name=\"triggerIcon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"combo-box-trigger-default-icon\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </slot>\n    </ComboboxTrigger>\n  </ComboboxAnchor>\n</template>\n"],"mappings":""}