@auronui/vue 1.1.0 → 1.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CheckboxRoot, CheckboxIndicator } from 'reka-ui'\nimport { checkboxVariants, type CheckboxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCheckboxGroupInject } from './checkbox-group.context'\n\n// Disable Vue attribute fallthrough — we manually forward $attrs to CheckboxRoot\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: CheckboxVariants['variant']\n  value?: string\n  modelValue?: boolean\n  defaultValue?: boolean\n  disabled?: boolean\n  isIndeterminate?: boolean\n  name?: string\n  /** HTML id attribute forwarded to CheckboxRoot. */\n  id?: string\n  /** The value for the checked state (forwarded to CheckboxRoot). */\n  trueValue?: boolean | string | number\n  /** The value for the unchecked state (forwarded to CheckboxRoot). */\n  falseValue?: boolean | string | number\n  /** Whether CheckboxRoot should render as a child element. */\n  asChild?: boolean\n  /** Element or component to render CheckboxRoot as. */\n  as?: string\n  /** Whether the checkbox is required. */\n  required?: boolean\n  /** Whether CheckboxIndicator should force-mount even when unchecked. */\n  indicatorForceMount?: boolean\n  /** Whether CheckboxIndicator renders as a child element. */\n  indicatorAsChild?: boolean\n  /** Element or component to render CheckboxIndicator as. */\n  indicatorAs?: string\n  class?: ClassValue\n  /** Per-slot class overrides for any slot in this component. */\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    indicator: ClassValue\n    content: ClassValue\n  }>\n}>(), {\n  variant: undefined,\n  value: undefined,\n  modelValue: undefined,\n  defaultValue: false,\n  disabled: false,\n  isIndeterminate: false,\n  name: undefined,\n  id: undefined,\n  trueValue: undefined,\n  falseValue: undefined,\n  asChild: false,\n  as: undefined,\n  required: false,\n  indicatorForceMount: undefined,\n  indicatorAsChild: false,\n  indicatorAs: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\nconst attrs = useAttrs()\n\n// Inject CheckboxGroup context with fallback defaults (standalone mode)\nconst groupCtx = useCheckboxGroupInject({\n  variant: ref('primary'),\n  disabled: ref(false),\n  selectedValues: ref([]),\n  toggleValue: () => {},\n  name: ref(undefined),\n})\n\n// Prop precedence: group disabled wins (D-02)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\n\n// Child variant wins over group variant\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\n\n// Determine if inside a group (value prop is the signal)\nconst isInGroup = computed(() => props.value !== undefined)\n\n// Compute modelValue for Reka UI CheckboxRoot\n// Reka UI uses modelValue: boolean | 'indeterminate' to control state\nconst checkedState = computed<boolean | 'indeterminate'>(() => {\n  if (props.isIndeterminate) return 'indeterminate'\n  if (isInGroup.value) {\n    return groupCtx.selectedValues.value.includes(props.value!)\n  }\n  return props.modelValue ?? false\n})\n\n// Handle Reka UI's update:modelValue event\nfunction handleUpdate(val: string | number | boolean) {\n  if (isInGroup.value) {\n    groupCtx.toggleValue(props.value!)\n  } else {\n    if (val !== 'indeterminate') {\n      emit('update:modelValue', Boolean(val))\n    }\n  }\n}\n\nconst slotFns = computed(() =>\n  checkboxVariants({ variant: finalVariant.value })\n)\n</script>\n\n<template>\n  <!--\n    v-bind=\"attrs\" forwards aria-label and other HTML attributes through to Reka UI's\n    CheckboxRoot, which then applies them to the inner <button> element.\n    inheritAttrs: false prevents double-application on CheckboxRoot's root.\n  -->\n  <CheckboxRoot\n    v-bind=\"attrs\"\n    :model-value=\"checkedState\"\n    :disabled=\"isDisabled\"\n    :name=\"props.name ?? groupCtx.name.value\"\n    :value=\"props.value\"\n    :id=\"props.id\"\n    :true-value=\"props.trueValue\"\n    :false-value=\"props.falseValue\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    :required=\"props.required\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"handleUpdate\"\n  >\n    <span :class=\"composeClassName(slotFns.control(), props.classNames?.control)\">\n      <CheckboxIndicator\n        :force-mount=\"props.indicatorForceMount\"\n        :as-child=\"props.indicatorAsChild\"\n        :as=\"props.indicatorAs\"\n        :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\"\n      >\n        <!-- Indeterminate: dash icon -->\n        <svg\n          v-if=\"props.isIndeterminate\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          aria-hidden=\"true\"\n        >\n          <line\n            x1=\"5\"\n            y1=\"12\"\n            x2=\"19\"\n            y2=\"12\"\n          />\n        </svg>\n        <!-- Checked: check icon -->\n        <svg\n          v-else\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </CheckboxIndicator>\n    </span>\n    <span :class=\"composeClassName(slotFns.content(), props.classNames?.content)\">\n      <slot />\n    </span>\n  </CheckboxRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CheckboxRoot, CheckboxIndicator } from 'reka-ui'\nimport { checkboxVariants, type CheckboxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCheckboxGroupInject } from './checkbox-group.context'\n\n// Disable Vue attribute fallthrough — we manually forward $attrs to CheckboxRoot\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: CheckboxVariants['variant']\n  value?: string\n  modelValue?: boolean\n  defaultValue?: boolean\n  disabled?: boolean\n  isInvalid?: boolean\n  isIndeterminate?: boolean\n  name?: string\n  /** HTML id attribute forwarded to CheckboxRoot. */\n  id?: string\n  /** The value for the checked state (forwarded to CheckboxRoot). */\n  trueValue?: boolean | string | number\n  /** The value for the unchecked state (forwarded to CheckboxRoot). */\n  falseValue?: boolean | string | number\n  /** Whether CheckboxRoot should render as a child element. */\n  asChild?: boolean\n  /** Element or component to render CheckboxRoot as. */\n  as?: string\n  /** Whether the checkbox is required. */\n  required?: boolean\n  /** Whether CheckboxIndicator should force-mount even when unchecked. */\n  indicatorForceMount?: boolean\n  /** Whether CheckboxIndicator renders as a child element. */\n  indicatorAsChild?: boolean\n  /** Element or component to render CheckboxIndicator as. */\n  indicatorAs?: string\n  class?: ClassValue\n  /** Per-slot class overrides for any slot in this component. */\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    indicator: ClassValue\n    content: ClassValue\n  }>\n}>(), {\n  variant: undefined,\n  value: undefined,\n  modelValue: undefined,\n  defaultValue: false,\n  disabled: false,\n  isInvalid: false,\n  isIndeterminate: false,\n  name: undefined,\n  id: undefined,\n  trueValue: undefined,\n  falseValue: undefined,\n  asChild: false,\n  as: undefined,\n  required: false,\n  indicatorForceMount: undefined,\n  indicatorAsChild: false,\n  indicatorAs: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\nconst attrs = useAttrs()\n\n// Inject CheckboxGroup context with fallback defaults (standalone mode)\nconst groupCtx = useCheckboxGroupInject({\n  variant: ref('primary'),\n  disabled: ref(false),\n  isInvalid: ref(false),\n  selectedValues: ref([]),\n  toggleValue: () => {},\n  name: ref(undefined),\n})\n\n// Prop precedence: group disabled wins (D-02)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\n// Group invalid overrides item; item prop allows standalone invalid\nconst effectiveInvalid = computed(() => groupCtx.isInvalid.value || props.isInvalid)\n\n// Child variant wins over group variant\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\n\n// Determine if inside a group (value prop is the signal)\nconst isInGroup = computed(() => props.value !== undefined)\n\n// Compute modelValue for Reka UI CheckboxRoot\n// Reka UI uses modelValue: boolean | 'indeterminate' to control state\nconst checkedState = computed<boolean | 'indeterminate'>(() => {\n  if (props.isIndeterminate) return 'indeterminate'\n  if (isInGroup.value) {\n    return groupCtx.selectedValues.value.includes(props.value!)\n  }\n  return props.modelValue ?? false\n})\n\n// Handle Reka UI's update:modelValue event\nfunction handleUpdate(val: string | number | boolean) {\n  if (isInGroup.value) {\n    groupCtx.toggleValue(props.value!)\n  } else {\n    if (val !== 'indeterminate') {\n      emit('update:modelValue', Boolean(val))\n    }\n  }\n}\n\nconst slotFns = computed(() =>\n  checkboxVariants({ variant: finalVariant.value })\n)\n</script>\n\n<template>\n  <!--\n    v-bind=\"attrs\" forwards aria-label and other HTML attributes through to Reka UI's\n    CheckboxRoot, which then applies them to the inner <button> element.\n    inheritAttrs: false prevents double-application on CheckboxRoot's root.\n  -->\n  <CheckboxRoot\n    v-bind=\"attrs\"\n    :model-value=\"checkedState\"\n    :disabled=\"isDisabled\"\n    :aria-invalid=\"effectiveInvalid || undefined\"\n    :name=\"props.name ?? groupCtx.name.value\"\n    :value=\"props.value\"\n    :id=\"props.id\"\n    :true-value=\"props.trueValue\"\n    :false-value=\"props.falseValue\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    :required=\"props.required\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"handleUpdate\"\n  >\n    <span :class=\"composeClassName(slotFns.control(), props.classNames?.control)\">\n      <CheckboxIndicator\n        :force-mount=\"props.indicatorForceMount\"\n        :as-child=\"props.indicatorAsChild\"\n        :as=\"props.indicatorAs\"\n        :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\"\n      >\n        <!-- Indeterminate: dash icon -->\n        <svg\n          v-if=\"props.isIndeterminate\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          aria-hidden=\"true\"\n        >\n          <line\n            x1=\"5\"\n            y1=\"12\"\n            x2=\"19\"\n            y2=\"12\"\n          />\n        </svg>\n        <!-- Checked: check icon -->\n        <svg\n          v-else\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </CheckboxIndicator>\n    </span>\n    <span :class=\"composeClassName(slotFns.content(), props.classNames?.content)\">\n      <slot />\n    </span>\n  </CheckboxRoot>\n</template>\n"],"mappings":""}

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

@@ -47,6 +47,10 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			type: Boolean,
 			default: false
 		},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
 		isIndeterminate: {
 			type: Boolean,
 			default: false
@@ -104,11 +108,13 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const groupCtx = useCheckboxGroupInject({
 			variant: ref("primary"),
 			disabled: ref(false),
+			isInvalid: ref(false),
 			selectedValues: ref([]),
 			toggleValue: () => {},
 			name: ref(void 0)
 		});
 		const isDisabled = computed(() => groupCtx.disabled.value || props.disabled);
+		const effectiveInvalid = computed(() => groupCtx.isInvalid.value || props.isInvalid);
 		const finalVariant = computed(() => props.variant ?? groupCtx.variant.value);
 		const isInGroup = computed(() => props.value !== void 0);
 		const checkedState = computed(() => {
@@ -125,6 +131,7 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			return openBlock(), createBlock(unref(CheckboxRoot), mergeProps(unref(attrs), {
 				"model-value": checkedState.value,
 				disabled: isDisabled.value,
+				"aria-invalid": effectiveInvalid.value || void 0,
 				name: props.name ?? unref(groupCtx).name.value,
 				value: props.value,
 				id: props.id,
@@ -159,6 +166,7 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			}, 16, [
 				"model-value",
 				"disabled",
+				"aria-invalid",
 				"name",
 				"value",
 				"id",

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CheckboxRoot, CheckboxIndicator } from 'reka-ui'\nimport { checkboxVariants, type CheckboxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCheckboxGroupInject } from './checkbox-group.context'\n\n// Disable Vue attribute fallthrough — we manually forward $attrs to CheckboxRoot\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: CheckboxVariants['variant']\n  value?: string\n  modelValue?: boolean\n  defaultValue?: boolean\n  disabled?: boolean\n  isIndeterminate?: boolean\n  name?: string\n  /** HTML id attribute forwarded to CheckboxRoot. */\n  id?: string\n  /** The value for the checked state (forwarded to CheckboxRoot). */\n  trueValue?: boolean | string | number\n  /** The value for the unchecked state (forwarded to CheckboxRoot). */\n  falseValue?: boolean | string | number\n  /** Whether CheckboxRoot should render as a child element. */\n  asChild?: boolean\n  /** Element or component to render CheckboxRoot as. */\n  as?: string\n  /** Whether the checkbox is required. */\n  required?: boolean\n  /** Whether CheckboxIndicator should force-mount even when unchecked. */\n  indicatorForceMount?: boolean\n  /** Whether CheckboxIndicator renders as a child element. */\n  indicatorAsChild?: boolean\n  /** Element or component to render CheckboxIndicator as. */\n  indicatorAs?: string\n  class?: ClassValue\n  /** Per-slot class overrides for any slot in this component. */\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    indicator: ClassValue\n    content: ClassValue\n  }>\n}>(), {\n  variant: undefined,\n  value: undefined,\n  modelValue: undefined,\n  defaultValue: false,\n  disabled: false,\n  isIndeterminate: false,\n  name: undefined,\n  id: undefined,\n  trueValue: undefined,\n  falseValue: undefined,\n  asChild: false,\n  as: undefined,\n  required: false,\n  indicatorForceMount: undefined,\n  indicatorAsChild: false,\n  indicatorAs: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\nconst attrs = useAttrs()\n\n// Inject CheckboxGroup context with fallback defaults (standalone mode)\nconst groupCtx = useCheckboxGroupInject({\n  variant: ref('primary'),\n  disabled: ref(false),\n  selectedValues: ref([]),\n  toggleValue: () => {},\n  name: ref(undefined),\n})\n\n// Prop precedence: group disabled wins (D-02)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\n\n// Child variant wins over group variant\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\n\n// Determine if inside a group (value prop is the signal)\nconst isInGroup = computed(() => props.value !== undefined)\n\n// Compute modelValue for Reka UI CheckboxRoot\n// Reka UI uses modelValue: boolean | 'indeterminate' to control state\nconst checkedState = computed<boolean | 'indeterminate'>(() => {\n  if (props.isIndeterminate) return 'indeterminate'\n  if (isInGroup.value) {\n    return groupCtx.selectedValues.value.includes(props.value!)\n  }\n  return props.modelValue ?? false\n})\n\n// Handle Reka UI's update:modelValue event\nfunction handleUpdate(val: string | number | boolean) {\n  if (isInGroup.value) {\n    groupCtx.toggleValue(props.value!)\n  } else {\n    if (val !== 'indeterminate') {\n      emit('update:modelValue', Boolean(val))\n    }\n  }\n}\n\nconst slotFns = computed(() =>\n  checkboxVariants({ variant: finalVariant.value })\n)\n</script>\n\n<template>\n  <!--\n    v-bind=\"attrs\" forwards aria-label and other HTML attributes through to Reka UI's\n    CheckboxRoot, which then applies them to the inner <button> element.\n    inheritAttrs: false prevents double-application on CheckboxRoot's root.\n  -->\n  <CheckboxRoot\n    v-bind=\"attrs\"\n    :model-value=\"checkedState\"\n    :disabled=\"isDisabled\"\n    :name=\"props.name ?? groupCtx.name.value\"\n    :value=\"props.value\"\n    :id=\"props.id\"\n    :true-value=\"props.trueValue\"\n    :false-value=\"props.falseValue\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    :required=\"props.required\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"handleUpdate\"\n  >\n    <span :class=\"composeClassName(slotFns.control(), props.classNames?.control)\">\n      <CheckboxIndicator\n        :force-mount=\"props.indicatorForceMount\"\n        :as-child=\"props.indicatorAsChild\"\n        :as=\"props.indicatorAs\"\n        :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\"\n      >\n        <!-- Indeterminate: dash icon -->\n        <svg\n          v-if=\"props.isIndeterminate\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          aria-hidden=\"true\"\n        >\n          <line\n            x1=\"5\"\n            y1=\"12\"\n            x2=\"19\"\n            y2=\"12\"\n          />\n        </svg>\n        <!-- Checked: check icon -->\n        <svg\n          v-else\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </CheckboxIndicator>\n    </span>\n    <span :class=\"composeClassName(slotFns.content(), props.classNames?.content)\">\n      <slot />\n    </span>\n  </CheckboxRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EAqDd,MAAM,OAAO;EAIb,MAAM,QAAQ,UAAS;EAGvB,MAAM,WAAW,uBAAuB;GACtC,SAAS,IAAI,UAAU;GACvB,UAAU,IAAI,MAAM;GACpB,gBAAgB,IAAI,EAAE,CAAC;GACvB,mBAAmB;GACnB,MAAM,IAAI,KAAA,EAAU;GACrB,CAAA;EAGD,MAAM,aAAa,eAAe,SAAS,SAAS,SAAS,MAAM,SAAQ;EAG3E,MAAM,eAAe,eAAe,MAAM,WAAW,SAAS,QAAQ,MAAK;EAG3E,MAAM,YAAY,eAAe,MAAM,UAAU,KAAA,EAAS;EAI1D,MAAM,eAAe,eAA0C;AAC7D,OAAI,MAAM,gBAAiB,QAAO;AAClC,OAAI,UAAU,MACZ,QAAO,SAAS,eAAe,MAAM,SAAS,MAAM,MAAM;AAE5D,UAAO,MAAM,cAAc;IAC5B;EAGD,SAAS,aAAa,KAAgC;AACpD,OAAI,UAAU,MACZ,UAAS,YAAY,MAAM,MAAM;YAE7B,QAAQ,gBACV,MAAK,qBAAqB,QAAQ,IAAI,CAAA;;EAK5C,MAAM,UAAU,eACd,iBAAiB,EAAE,SAAS,aAAa,OAAO,CAAA,CAClD;;uBASE,YA+De,MAAA,aAAA,EA/Df,WACU,MA8DK,MA9DA,EAAA;IACZ,eAAa,aAAA;IACb,UAAU,WAAA;IACV,MAAM,MAAM,QAAQ,MAAA,SAAQ,CAAC,KAAK;IAClC,OAAO,MAAM;IACb,IAAI,MAAM;IACV,cAAY,MAAM;IAClB,eAAa,MAAM;IACnB,YAAU,MAAM;IAChB,IAAI,MAAM;IACV,UAAU,MAAM;IAChB,OAAO,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI;IAC3E,uBAAoB;;2BA8Cd,CA5CP,mBA4CO,QAAA,EA5CA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACzE,YA0CoB,MAAA,kBAAA,EAAA;KAzCjB,eAAa,MAAM;KACnB,YAAU,MAAM;KAChB,IAAI,MAAM;KACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA;;4BAqBnE,CAjBE,MAAM,mBAAA,WAAA,EADd,mBAkBM,OAlBN,YAkBM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CANJ,mBAKE,QAAA;MAJA,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG;uCAIP,mBAcM,OAdN,YAcM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,EAAA,MAAA,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;;;;;;aAIvC,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACzE,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"Checkbox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { CheckboxRoot, CheckboxIndicator } from 'reka-ui'\nimport { checkboxVariants, type CheckboxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCheckboxGroupInject } from './checkbox-group.context'\n\n// Disable Vue attribute fallthrough — we manually forward $attrs to CheckboxRoot\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: CheckboxVariants['variant']\n  value?: string\n  modelValue?: boolean\n  defaultValue?: boolean\n  disabled?: boolean\n  isInvalid?: boolean\n  isIndeterminate?: boolean\n  name?: string\n  /** HTML id attribute forwarded to CheckboxRoot. */\n  id?: string\n  /** The value for the checked state (forwarded to CheckboxRoot). */\n  trueValue?: boolean | string | number\n  /** The value for the unchecked state (forwarded to CheckboxRoot). */\n  falseValue?: boolean | string | number\n  /** Whether CheckboxRoot should render as a child element. */\n  asChild?: boolean\n  /** Element or component to render CheckboxRoot as. */\n  as?: string\n  /** Whether the checkbox is required. */\n  required?: boolean\n  /** Whether CheckboxIndicator should force-mount even when unchecked. */\n  indicatorForceMount?: boolean\n  /** Whether CheckboxIndicator renders as a child element. */\n  indicatorAsChild?: boolean\n  /** Element or component to render CheckboxIndicator as. */\n  indicatorAs?: string\n  class?: ClassValue\n  /** Per-slot class overrides for any slot in this component. */\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    indicator: ClassValue\n    content: ClassValue\n  }>\n}>(), {\n  variant: undefined,\n  value: undefined,\n  modelValue: undefined,\n  defaultValue: false,\n  disabled: false,\n  isInvalid: false,\n  isIndeterminate: false,\n  name: undefined,\n  id: undefined,\n  trueValue: undefined,\n  falseValue: undefined,\n  asChild: false,\n  as: undefined,\n  required: false,\n  indicatorForceMount: undefined,\n  indicatorAsChild: false,\n  indicatorAs: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\nconst attrs = useAttrs()\n\n// Inject CheckboxGroup context with fallback defaults (standalone mode)\nconst groupCtx = useCheckboxGroupInject({\n  variant: ref('primary'),\n  disabled: ref(false),\n  isInvalid: ref(false),\n  selectedValues: ref([]),\n  toggleValue: () => {},\n  name: ref(undefined),\n})\n\n// Prop precedence: group disabled wins (D-02)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\n// Group invalid overrides item; item prop allows standalone invalid\nconst effectiveInvalid = computed(() => groupCtx.isInvalid.value || props.isInvalid)\n\n// Child variant wins over group variant\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\n\n// Determine if inside a group (value prop is the signal)\nconst isInGroup = computed(() => props.value !== undefined)\n\n// Compute modelValue for Reka UI CheckboxRoot\n// Reka UI uses modelValue: boolean | 'indeterminate' to control state\nconst checkedState = computed<boolean | 'indeterminate'>(() => {\n  if (props.isIndeterminate) return 'indeterminate'\n  if (isInGroup.value) {\n    return groupCtx.selectedValues.value.includes(props.value!)\n  }\n  return props.modelValue ?? false\n})\n\n// Handle Reka UI's update:modelValue event\nfunction handleUpdate(val: string | number | boolean) {\n  if (isInGroup.value) {\n    groupCtx.toggleValue(props.value!)\n  } else {\n    if (val !== 'indeterminate') {\n      emit('update:modelValue', Boolean(val))\n    }\n  }\n}\n\nconst slotFns = computed(() =>\n  checkboxVariants({ variant: finalVariant.value })\n)\n</script>\n\n<template>\n  <!--\n    v-bind=\"attrs\" forwards aria-label and other HTML attributes through to Reka UI's\n    CheckboxRoot, which then applies them to the inner <button> element.\n    inheritAttrs: false prevents double-application on CheckboxRoot's root.\n  -->\n  <CheckboxRoot\n    v-bind=\"attrs\"\n    :model-value=\"checkedState\"\n    :disabled=\"isDisabled\"\n    :aria-invalid=\"effectiveInvalid || undefined\"\n    :name=\"props.name ?? groupCtx.name.value\"\n    :value=\"props.value\"\n    :id=\"props.id\"\n    :true-value=\"props.trueValue\"\n    :false-value=\"props.falseValue\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    :required=\"props.required\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"handleUpdate\"\n  >\n    <span :class=\"composeClassName(slotFns.control(), props.classNames?.control)\">\n      <CheckboxIndicator\n        :force-mount=\"props.indicatorForceMount\"\n        :as-child=\"props.indicatorAsChild\"\n        :as=\"props.indicatorAs\"\n        :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\"\n      >\n        <!-- Indeterminate: dash icon -->\n        <svg\n          v-if=\"props.isIndeterminate\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          aria-hidden=\"true\"\n        >\n          <line\n            x1=\"5\"\n            y1=\"12\"\n            x2=\"19\"\n            y2=\"12\"\n          />\n        </svg>\n        <!-- Checked: check icon -->\n        <svg\n          v-else\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </CheckboxIndicator>\n    </span>\n    <span :class=\"composeClassName(slotFns.content(), props.classNames?.content)\">\n      <slot />\n    </span>\n  </CheckboxRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EAuDd,MAAM,OAAO;EAIb,MAAM,QAAQ,UAAS;EAGvB,MAAM,WAAW,uBAAuB;GACtC,SAAS,IAAI,UAAU;GACvB,UAAU,IAAI,MAAM;GACpB,WAAW,IAAI,MAAM;GACrB,gBAAgB,IAAI,EAAE,CAAC;GACvB,mBAAmB;GACnB,MAAM,IAAI,KAAA,EAAU;GACrB,CAAA;EAGD,MAAM,aAAa,eAAe,SAAS,SAAS,SAAS,MAAM,SAAQ;EAE3E,MAAM,mBAAmB,eAAe,SAAS,UAAU,SAAS,MAAM,UAAS;EAGnF,MAAM,eAAe,eAAe,MAAM,WAAW,SAAS,QAAQ,MAAK;EAG3E,MAAM,YAAY,eAAe,MAAM,UAAU,KAAA,EAAS;EAI1D,MAAM,eAAe,eAA0C;AAC7D,OAAI,MAAM,gBAAiB,QAAO;AAClC,OAAI,UAAU,MACZ,QAAO,SAAS,eAAe,MAAM,SAAS,MAAM,MAAM;AAE5D,UAAO,MAAM,cAAc;IAC5B;EAGD,SAAS,aAAa,KAAgC;AACpD,OAAI,UAAU,MACZ,UAAS,YAAY,MAAM,MAAM;YAE7B,QAAQ,gBACV,MAAK,qBAAqB,QAAQ,IAAI,CAAA;;EAK5C,MAAM,UAAU,eACd,iBAAiB,EAAE,SAAS,aAAa,OAAO,CAAA,CAClD;;uBASE,YAgEe,MAAA,aAAA,EAhEf,WACU,MA+DK,MA/DA,EAAA;IACZ,eAAa,aAAA;IACb,UAAU,WAAA;IACV,gBAAc,iBAAA,SAAoB,KAAA;IAClC,MAAM,MAAM,QAAQ,MAAA,SAAQ,CAAC,KAAK;IAClC,OAAO,MAAM;IACb,IAAI,MAAM;IACV,cAAY,MAAM;IAClB,eAAa,MAAM;IACnB,YAAU,MAAM;IAChB,IAAI,MAAM;IACV,UAAU,MAAM;IAChB,OAAO,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI;IAC3E,uBAAoB;;2BA8Cd,CA5CP,mBA4CO,QAAA,EA5CA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACzE,YA0CoB,MAAA,kBAAA,EAAA;KAzCjB,eAAa,MAAM;KACnB,YAAU,MAAM;KAChB,IAAI,MAAM;KACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA;;4BAqBnE,CAjBE,MAAM,mBAAA,WAAA,EADd,mBAkBM,OAlBN,YAkBM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CANJ,mBAKE,QAAA;MAJA,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG;uCAIP,mBAcM,OAdN,YAcM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,EAAA,MAAA,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;;;;;;aAIvC,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACzE,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}

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

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

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

@@ -4,10 +4,18 @@ import Checkbox_default from "./Checkbox.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, toRef, unref, withCtx } from "vue";
 import { checkboxGroupVariants } from "@auronui/styles";
 //#region src/components/checkbox/CheckboxGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-labelledby", "data-orientation"];
+var _hoisted_1 = [
+	"aria-labelledby",
+	"aria-invalid",
+	"data-orientation"
+];
 var _hoisted_2 = { class: "checkbox-group__wrapper" };
 var _hoisted_3 = {
 	key: 1,
+	class: "checkbox-group__error-message"
+};
+var _hoisted_4 = {
+	key: 2,
 	class: "checkbox-group__description"
 };
 var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -18,12 +26,17 @@ var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			type: Boolean,
 			default: false
 		},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
 		modelValue: { default: void 0 },
 		defaultValue: { default: void 0 },
 		name: { default: void 0 },
 		orientation: { default: "vertical" },
 		label: { default: void 0 },
 		description: { default: void 0 },
+		errorMessage: { default: void 0 },
 		class: {},
 		items: {}
 	},
@@ -41,6 +54,7 @@ var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		useCheckboxGroupProvide({
 			variant: toRef(props, "variant"),
 			disabled: toRef(props, "disabled"),
+			isInvalid: toRef(props, "isInvalid"),
 			selectedValues: currentValues,
 			toggleValue,
 			name: toRef(props, "name")
@@ -51,6 +65,7 @@ var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			return openBlock(), createElementBlock("div", {
 				role: "group",
 				"aria-labelledby": props.label ? labelId : void 0,
+				"aria-invalid": props.isInvalid || void 0,
 				"data-orientation": props.orientation,
 				class: normalizeClass(unref(composeClassName)(groupClasses.value, props.class))
 			}, [
@@ -69,7 +84,7 @@ var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						_: 2
 					}, 1032, ["value", "disabled"]);
 				}), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })]),
-				props.description ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+				props.isInvalid && props.errorMessage ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(props.errorMessage), 1)) : props.description ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(props.description), 1)) : createCommentVNode("", true)
 			], 10, _hoisted_1);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/checkbox/CheckboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef } from 'vue'\nimport { checkboxGroupVariants, type CheckboxGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useCheckboxGroupProvide } from './checkbox-group.context'\nimport Checkbox from './Checkbox.vue'\n\ntype CheckboxShorthandItem = { value: string; label?: string; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  variant?: CheckboxGroupVariants['variant']\n  disabled?: boolean\n  modelValue?: string[]\n  defaultValue?: string[]\n  name?: string\n  orientation?: 'horizontal' | 'vertical'\n  label?: string\n  description?: string\n  class?: string\n  /** Shorthand API: render checkboxes from an array instead of the compound slot API */\n  items?: CheckboxShorthandItem[]\n}>(), {\n  variant: 'primary',\n  disabled: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]]\n}>()\n\n// Internal state for uncontrolled mode\nconst internalValues = ref<string[]>(props.defaultValue ?? [])\n\n// Current values: controlled (modelValue) or uncontrolled (internalValues)\nconst currentValues = computed(() => props.modelValue ?? internalValues.value)\n\n// Toggle value in the selection list\nfunction toggleValue(value: string) {\n  const next = currentValues.value.includes(value)\n    ? currentValues.value.filter(v => v !== value)\n    : [...currentValues.value, value]\n  internalValues.value = next\n  emit('update:modelValue', next)\n}\n\n// Provide context to child Checkboxes\nuseCheckboxGroupProvide({\n  variant: toRef(props, 'variant'),\n  disabled: toRef(props, 'disabled'),\n  selectedValues: currentValues,\n  toggleValue,\n  name: toRef(props, 'name'),\n})\n\nconst labelId = `checkbox-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst groupClasses = computed(() =>\n  checkboxGroupVariants({ variant: props.variant })\n)\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :data-orientation=\"props.orientation\"\n    :class=\"composeClassName(groupClasses, props.class)\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      class=\"checkbox-group__label\"\n    >{{ props.label }}</span>\n    <div class=\"checkbox-group__wrapper\">\n      <template v-if=\"props.items\">\n        <Checkbox\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :disabled=\"item.disabled\"\n        >{{ item.label ?? item.value }}</Checkbox>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.description\"\n      class=\"checkbox-group__description\"\n    >{{ props.description }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,MAAM,QAAQ;EAuBd,MAAM,OAAO;EAKb,MAAM,iBAAiB,IAAc,MAAM,gBAAgB,EAAE,CAAA;EAG7D,MAAM,gBAAgB,eAAe,MAAM,cAAc,eAAe,MAAK;EAG7E,SAAS,YAAY,OAAe;GAClC,MAAM,OAAO,cAAc,MAAM,SAAS,MAAK,GAC3C,cAAc,MAAM,QAAO,MAAK,MAAM,MAAK,GAC3C,CAAC,GAAG,cAAc,OAAO,MAAK;AAClC,kBAAe,QAAQ;AACvB,QAAK,qBAAqB,KAAI;;AAIhC,0BAAwB;GACtB,SAAS,MAAM,OAAO,UAAU;GAChC,UAAU,MAAM,OAAO,WAAW;GAClC,gBAAgB;GAChB;GACA,MAAM,MAAM,OAAO,OAAO;GAC3B,CAAA;EAED,MAAM,UAAU,wBAAwB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE;EAE9E,MAAM,eAAe,eACnB,sBAAsB,EAAE,SAAS,MAAM,SAAS,CAAA,CAClD;;uBAIE,mBA0BM,OAAA;IAzBJ,MAAK;IACJ,mBAAiB,MAAM,QAAQ,UAAU,KAAA;IACzC,oBAAkB,MAAM;IACxB,OAAK,eAAE,MAAA,iBAAgB,CAAC,aAAA,OAAc,MAAM,MAAK,CAAA;;IAG1C,MAAM,SAAA,WAAA,EADd,mBAIyB,QAAA;;KAFtB,IAAI;KACL,OAAM;uBACJ,MAAM,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IACf,mBAUM,OAVN,YAUM,CATY,MAAM,SAAA,UAAA,KAAA,EACpB,mBAK0C,UAAA,EAAA,KAAA,GAAA,EAAA,WAJzB,MAAM,QAAd,SAAI;yBADb,YAK0C,kBAAA;MAHvC,KAAK,KAAK;MACV,OAAO,KAAK;MACZ,UAAU,KAAK;;6BACa,CAAA,gBAAA,gBAA3B,KAAK,SAAS,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;gBAE9B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA;IAGT,MAAM,eAAA,WAAA,EADd,mBAG+B,QAH/B,YAG+B,gBAA3B,MAAM,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"CheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/checkbox/CheckboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef } from 'vue'\nimport { checkboxGroupVariants, type CheckboxGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useCheckboxGroupProvide } from './checkbox-group.context'\nimport Checkbox from './Checkbox.vue'\n\ntype CheckboxShorthandItem = { value: string; label?: string; disabled?: boolean }\n\nconst props = withDefaults(defineProps<{\n  variant?: CheckboxGroupVariants['variant']\n  disabled?: boolean\n  isInvalid?: boolean\n  modelValue?: string[]\n  defaultValue?: string[]\n  name?: string\n  orientation?: 'horizontal' | 'vertical'\n  label?: string\n  description?: string\n  errorMessage?: string\n  class?: string\n  /** Shorthand API: render checkboxes from an array instead of the compound slot API */\n  items?: CheckboxShorthandItem[]\n}>(), {\n  variant: 'primary',\n  disabled: false,\n  isInvalid: false,\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  orientation: 'vertical',\n  label: undefined,\n  description: undefined,\n  errorMessage: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]]\n}>()\n\n// Internal state for uncontrolled mode\nconst internalValues = ref<string[]>(props.defaultValue ?? [])\n\n// Current values: controlled (modelValue) or uncontrolled (internalValues)\nconst currentValues = computed(() => props.modelValue ?? internalValues.value)\n\n// Toggle value in the selection list\nfunction toggleValue(value: string) {\n  const next = currentValues.value.includes(value)\n    ? currentValues.value.filter(v => v !== value)\n    : [...currentValues.value, value]\n  internalValues.value = next\n  emit('update:modelValue', next)\n}\n\n// Provide context to child Checkboxes\nuseCheckboxGroupProvide({\n  variant: toRef(props, 'variant'),\n  disabled: toRef(props, 'disabled'),\n  isInvalid: toRef(props, 'isInvalid'),\n  selectedValues: currentValues,\n  toggleValue,\n  name: toRef(props, 'name'),\n})\n\nconst labelId = `checkbox-group-label-${Math.random().toString(36).slice(2, 8)}`\n\nconst groupClasses = computed(() =>\n  checkboxGroupVariants({ variant: props.variant })\n)\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-labelledby=\"props.label ? labelId : undefined\"\n    :aria-invalid=\"props.isInvalid || undefined\"\n    :data-orientation=\"props.orientation\"\n    :class=\"composeClassName(groupClasses, props.class)\"\n  >\n    <span\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      class=\"checkbox-group__label\"\n    >{{ props.label }}</span>\n    <div class=\"checkbox-group__wrapper\">\n      <template v-if=\"props.items\">\n        <Checkbox\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :disabled=\"item.disabled\"\n        >{{ item.label ?? item.value }}</Checkbox>\n      </template>\n      <slot v-else />\n    </div>\n    <span\n      v-if=\"props.isInvalid && props.errorMessage\"\n      class=\"checkbox-group__error-message\"\n    >{{ props.errorMessage }}</span>\n    <span\n      v-else-if=\"props.description\"\n      class=\"checkbox-group__description\"\n    >{{ props.description }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,MAAM,QAAQ;EA2Bd,MAAM,OAAO;EAKb,MAAM,iBAAiB,IAAc,MAAM,gBAAgB,EAAE,CAAA;EAG7D,MAAM,gBAAgB,eAAe,MAAM,cAAc,eAAe,MAAK;EAG7E,SAAS,YAAY,OAAe;GAClC,MAAM,OAAO,cAAc,MAAM,SAAS,MAAK,GAC3C,cAAc,MAAM,QAAO,MAAK,MAAM,MAAK,GAC3C,CAAC,GAAG,cAAc,OAAO,MAAK;AAClC,kBAAe,QAAQ;AACvB,QAAK,qBAAqB,KAAI;;AAIhC,0BAAwB;GACtB,SAAS,MAAM,OAAO,UAAU;GAChC,UAAU,MAAM,OAAO,WAAW;GAClC,WAAW,MAAM,OAAO,YAAY;GACpC,gBAAgB;GAChB;GACA,MAAM,MAAM,OAAO,OAAO;GAC3B,CAAA;EAED,MAAM,UAAU,wBAAwB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE;EAE9E,MAAM,eAAe,eACnB,sBAAsB,EAAE,SAAS,MAAM,SAAS,CAAA,CAClD;;uBAIE,mBA+BM,OAAA;IA9BJ,MAAK;IACJ,mBAAiB,MAAM,QAAQ,UAAU,KAAA;IACzC,gBAAc,MAAM,aAAa,KAAA;IACjC,oBAAkB,MAAM;IACxB,OAAK,eAAE,MAAA,iBAAgB,CAAC,aAAA,OAAc,MAAM,MAAK,CAAA;;IAG1C,MAAM,SAAA,WAAA,EADd,mBAIyB,QAAA;;KAFtB,IAAI;KACL,OAAM;uBACJ,MAAM,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IACf,mBAUM,OAVN,YAUM,CATY,MAAM,SAAA,UAAA,KAAA,EACpB,mBAK0C,UAAA,EAAA,KAAA,GAAA,EAAA,WAJzB,MAAM,QAAd,SAAI;yBADb,YAK0C,kBAAA;MAHvC,KAAK,KAAK;MACV,OAAO,KAAK;MACZ,UAAU,KAAK;;6BACa,CAAA,gBAAA,gBAA3B,KAAK,SAAS,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;gBAE9B,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA;IAGT,MAAM,aAAa,MAAM,gBAAA,WAAA,EADjC,mBAGgC,QAHhC,YAGgC,gBAA5B,MAAM,aAAY,EAAA,EAAA,IAET,MAAM,eAAA,WAAA,EADnB,mBAG+B,QAH/B,YAG+B,gBAA3B,MAAM,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.context.js","names":[],"sources":["../../../src/components/checkbox/checkbox-group.context.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport type { CheckboxVariants } from '@auronui/styles'\nimport { createContext } from '../../utils/context'\n\n/**\n * CANONICAL DUAL-CONTEXT TEMPLATE (Phase 4, D-01)\n *\n * This is the reference implementation for all Phase 4+ group components.\n * Radio/RadioGroup, Switch/SwitchGroup, and ToggleButton/ToggleButtonGroup\n * all follow this exact shape.\n *\n * Contract:\n * - Group provides a Ref-wrapped context via `useProvide`\n * - Child unconditionally calls `useInject(fallback)` with sensible defaults\n * - Prop precedence: group.disabled wins; child.variant/size wins\n */\nexport interface CheckboxGroupContext {\n  variant: Ref<CheckboxVariants['variant']>\n  disabled: Ref<boolean>\n  selectedValues: Ref<string[]>\n  toggleValue: (value: string) => void\n  name: Ref<string | undefined>\n}\n\nexport const {\n  useProvide: useCheckboxGroupProvide,\n  useInject: useCheckboxGroupInject,\n  key: checkboxGroupContextKey,\n} = createContext<CheckboxGroupContext>('CheckboxGroup')\n"],"mappings":";;AAwBA,IAAa,EACX,YAAY,yBACZ,WAAW,wBACX,KAAK,4BACH,cAAoC,gBAAgB"}
+{"version":3,"file":"checkbox-group.context.js","names":[],"sources":["../../../src/components/checkbox/checkbox-group.context.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport type { CheckboxVariants } from '@auronui/styles'\nimport { createContext } from '../../utils/context'\n\n/**\n * CANONICAL DUAL-CONTEXT TEMPLATE (Phase 4, D-01)\n *\n * This is the reference implementation for all Phase 4+ group components.\n * Radio/RadioGroup, Switch/SwitchGroup, and ToggleButton/ToggleButtonGroup\n * all follow this exact shape.\n *\n * Contract:\n * - Group provides a Ref-wrapped context via `useProvide`\n * - Child unconditionally calls `useInject(fallback)` with sensible defaults\n * - Prop precedence: group.disabled wins; child.variant/size wins\n */\nexport interface CheckboxGroupContext {\n  variant: Ref<CheckboxVariants['variant']>\n  disabled: Ref<boolean>\n  isInvalid: Ref<boolean>\n  selectedValues: Ref<string[]>\n  toggleValue: (value: string) => void\n  name: Ref<string | undefined>\n}\n\nexport const {\n  useProvide: useCheckboxGroupProvide,\n  useInject: useCheckboxGroupInject,\n  key: checkboxGroupContextKey,\n} = createContext<CheckboxGroupContext>('CheckboxGroup')\n"],"mappings":";;AAyBA,IAAa,EACX,YAAY,yBACZ,WAAW,wBACX,KAAK,4BACH,cAAoC,gBAAgB"}

package/dist/components/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../src/components/date-picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport type { CalendarDateTime, ZonedDateTime } from '@internationalized/date'\nimport { datePickerVariants, type DateInputVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to DateInput */\n  variant?: DateInputVariants['variant']\n  size?: DateInputVariants['size']\n  color?: DateInputVariants['color']\n  labelPlacement?: DateInputVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: DateValue\n  defaultOpen?: boolean\n  defaultPlaceholder?: DateValue\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  locale?: string\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  hideTimeZone?: boolean\n  visibleMonths?: number\n  pageBehavior?: 'visible' | 'single'\n  closeOnSelect?: boolean\n  modal?: boolean\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to the root DatePickerRoot element. */\n  id?: string\n  /** Marks the field as required. */\n  required?: boolean\n  /** Use paged navigation (advance by numberOfMonths). */\n  pagedNavigation?: boolean\n  /** Day the week starts on. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Format for weekday header cells. */\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  /** Always show 6 weeks per month. */\n  fixedWeeks?: boolean\n  /** Number of months shown in the calendar. */\n  numberOfMonths?: number\n  /** Prevent deselecting a selected date. */\n  preventDeselect?: boolean\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  /** Portal target for the content. */\n  portal?: string | HTMLElement\n  /** Force the content to stay mounted. */\n  forceMount?: boolean\n  /** Side of the anchor the content appears on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Distance in px from the anchor. */\n  sideOffset?: number\n  /** Allow flipping to opposite side. */\n  sideFlip?: boolean\n  /** Alignment of the content relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset along the align axis. */\n  alignOffset?: number\n  /** Allow flipping alignment. */\n  alignFlip?: boolean\n  /** Avoid collisions with the viewport. */\n  avoidCollisions?: boolean\n  /** Elements to use as collision boundaries. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding for collision detection. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between arrow and content edge. */\n  arrowPadding?: number\n  /** Hide the arrow when it is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when overflowing. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in viewport. */\n  prioritizePosition?: boolean\n  /** Virtual reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  contentAs?: string\n  /** Render content child as root element. */\n  contentAsChild?: boolean\n  /** Disable pointer events outside the content. */\n  disableOutsidePointerEvents?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots (base, trigger, triggerIndicator, popover) */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  closeOnSelect: true,\n  modal: false,\n  visibleMonths: 1,\n  defaultOpen: false,\n})\n\nconst emit = defineEmits<{\n  'update:placeholder': [value: DateValue | undefined]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\nconst modelValue = defineModel<DateValue | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open')\n\nconst slotFns = computed(() => datePickerVariants())\n\n// Reka treats `undefined` as \"uncontrolled mode\" — always pass null (controlled + empty) instead.\nconst rekaModelValue = computed<DateValue | null>({\n  get: () => modelValue.value ?? null,\n  set: (val: DateValue | null) => { modelValue.value = val ?? null },\n})\n\n// Sync Calendar's `DateValue` v-model with DatePicker's `DateValue | null` model,\n// and close the popover on selection when closeOnSelect is enabled.\n// When the current value carries a time component (CalendarDateTime / ZonedDateTime),\n// preserve it so clicking a date in the calendar doesn't wipe out the time the user\n// typed into the field segments.\nconst calendarValue = computed<DateValue | undefined>({\n  get: () => modelValue.value ?? undefined,\n  set: (val) => {\n    if (val != null && modelValue.value != null && 'hour' in modelValue.value) {\n      const existing = modelValue.value as CalendarDateTime | ZonedDateTime\n      modelValue.value = existing.set({ year: val.year, month: val.month, day: val.day })\n    } else {\n      modelValue.value = val ?? null\n    }\n    if (props.closeOnSelect && val != null) {\n      openModel.value = false\n    }\n  },\n})\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"rekaModelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :placeholder-value=\"placeholderValue\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :step=\"step\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :dir=\"dir\"\n    :id=\"id\"\n    :required=\"required\"\n    :paged-navigation=\"pagedNavigation\"\n    :week-starts-on=\"weekStartsOn\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths ?? visibleMonths\"\n    :prevent-deselect=\"preventDeselect\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-picker\"\n  >\n    <!-- DateInput hosts label/helper/field; trigger sits in its endContent slot -->\n    <DateInput\n      v-model=\"modelValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :placeholder-value=\"placeholderValue\"\n      :min-value=\"minValue\"\n      :max-value=\"maxValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          :as=\"triggerAs\"\n          :as-child=\"triggerAsChild\"\n          aria-label=\"Open date picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <!-- Popover (portaled + positioned by Reka) -->\n    <DatePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"sideOffset ?? 8\"\n      :portal=\"portal != null ? { to: portal } : undefined\"\n      :force-mount=\"forceMount\"\n      :side=\"side\"\n      :side-flip=\"sideFlip\"\n      :align=\"align\"\n      :align-offset=\"alignOffset\"\n      :align-flip=\"alignFlip\"\n      :avoid-collisions=\"avoidCollisions\"\n      :collision-boundary=\"collisionBoundary\"\n      :collision-padding=\"collisionPadding\"\n      :arrow-padding=\"arrowPadding\"\n      :hide-shifted-arrow=\"hideShiftedArrow\"\n      :sticky=\"sticky\"\n      :hide-when-detached=\"hideWhenDetached\"\n      :position-strategy=\"positionStrategy\"\n      :update-position-strategy=\"updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"disableUpdateOnLayoutShift\"\n      :prioritize-position=\"prioritizePosition\"\n      :reference=\"(reference as any)\"\n      :as=\"contentAs\"\n      :as-child=\"contentAsChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <slot name=\"calendarTopContent\" />\n\n      <Calendar\n        v-model=\"calendarValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"placeholderValue ?? defaultValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :is-date-disabled=\"isDateDisabled\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :locale=\"locale\"\n        :number-of-months=\"visibleMonths\"\n        :readonly=\"isReadOnly\"\n        :disabled=\"isDisabled\"\n      />\n\n      <slot name=\"calendarBottomContent\" />\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../src/components/date-picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport type { CalendarDateTime, ZonedDateTime } from '@internationalized/date'\nimport { datePickerVariants, type DateInputVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to DateInput */\n  variant?: DateInputVariants['variant']\n  size?: DateInputVariants['size']\n  color?: DateInputVariants['color']\n  labelPlacement?: DateInputVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: DateValue\n  defaultOpen?: boolean\n  defaultPlaceholder?: DateValue\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  locale?: string\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  hideTimeZone?: boolean\n  visibleMonths?: number\n  pageBehavior?: 'visible' | 'single'\n  closeOnSelect?: boolean\n  modal?: boolean\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to the root DatePickerRoot element. */\n  id?: string\n  /** Marks the field as required. */\n  required?: boolean\n  /** Use paged navigation (advance by numberOfMonths). */\n  pagedNavigation?: boolean\n  /** Day the week starts on. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Format for weekday header cells. */\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  /** Always show 6 weeks per month. */\n  fixedWeeks?: boolean\n  /** Number of months shown in the calendar. */\n  numberOfMonths?: number\n  /** Prevent deselecting a selected date. */\n  preventDeselect?: boolean\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  /** Portal target for the content. */\n  portal?: string | HTMLElement\n  /** Force the content to stay mounted. */\n  forceMount?: boolean\n  /** Side of the anchor the content appears on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Distance in px from the anchor. */\n  sideOffset?: number\n  /** Allow flipping to opposite side. */\n  sideFlip?: boolean\n  /** Alignment of the content relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset along the align axis. */\n  alignOffset?: number\n  /** Allow flipping alignment. */\n  alignFlip?: boolean\n  /** Avoid collisions with the viewport. */\n  avoidCollisions?: boolean\n  /** Elements to use as collision boundaries. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding for collision detection. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between arrow and content edge. */\n  arrowPadding?: number\n  /** Hide the arrow when it is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when overflowing. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in viewport. */\n  prioritizePosition?: boolean\n  /** Virtual reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  contentAs?: string\n  /** Render content child as root element. */\n  contentAsChild?: boolean\n  /** Disable pointer events outside the content. */\n  disableOutsidePointerEvents?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots (base, trigger, triggerIndicator, popover) */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  closeOnSelect: true,\n  modal: false,\n  visibleMonths: 1,\n  defaultOpen: false,\n  avoidCollisions: true,\n  collisionPadding: 8,\n  prioritizePosition: true,\n})\n\nconst emit = defineEmits<{\n  'update:placeholder': [value: DateValue | undefined]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\nconst modelValue = defineModel<DateValue | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open')\n\nconst slotFns = computed(() => datePickerVariants())\n\n// Reka treats `undefined` as \"uncontrolled mode\" — always pass null (controlled + empty) instead.\nconst rekaModelValue = computed<DateValue | null>({\n  get: () => modelValue.value ?? null,\n  set: (val: DateValue | null) => { modelValue.value = val ?? null },\n})\n\n// Sync Calendar's `DateValue` v-model with DatePicker's `DateValue | null` model,\n// and close the popover on selection when closeOnSelect is enabled.\n// When the current value carries a time component (CalendarDateTime / ZonedDateTime),\n// preserve it so clicking a date in the calendar doesn't wipe out the time the user\n// typed into the field segments.\nconst calendarValue = computed<DateValue | undefined>({\n  get: () => modelValue.value ?? undefined,\n  set: (val) => {\n    if (val != null && modelValue.value != null && 'hour' in modelValue.value) {\n      const existing = modelValue.value as CalendarDateTime | ZonedDateTime\n      modelValue.value = existing.set({ year: val.year, month: val.month, day: val.day })\n    } else {\n      modelValue.value = val ?? null\n    }\n    if (props.closeOnSelect && val != null) {\n      openModel.value = false\n    }\n  },\n})\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"rekaModelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :placeholder-value=\"placeholderValue\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :step=\"step\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :dir=\"dir\"\n    :id=\"id\"\n    :required=\"required\"\n    :paged-navigation=\"pagedNavigation\"\n    :week-starts-on=\"weekStartsOn\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths ?? visibleMonths\"\n    :prevent-deselect=\"preventDeselect\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-picker\"\n  >\n    <!-- DateInput hosts label/helper/field; trigger sits in its endContent slot -->\n    <DateInput\n      v-model=\"modelValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :placeholder-value=\"placeholderValue\"\n      :min-value=\"minValue\"\n      :max-value=\"maxValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          :as=\"triggerAs\"\n          :as-child=\"triggerAsChild\"\n          aria-label=\"Open date picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <!-- Popover (portaled + positioned by Reka) -->\n    <DatePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"sideOffset ?? 8\"\n      :portal=\"portal != null ? { to: portal } : undefined\"\n      :force-mount=\"forceMount\"\n      :side=\"side\"\n      :side-flip=\"sideFlip\"\n      :align=\"align\"\n      :align-offset=\"alignOffset\"\n      :align-flip=\"alignFlip\"\n      :avoid-collisions=\"avoidCollisions\"\n      :collision-boundary=\"collisionBoundary\"\n      :collision-padding=\"collisionPadding\"\n      :arrow-padding=\"arrowPadding\"\n      :hide-shifted-arrow=\"hideShiftedArrow\"\n      :sticky=\"sticky\"\n      :hide-when-detached=\"hideWhenDetached\"\n      :position-strategy=\"positionStrategy\"\n      :update-position-strategy=\"updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"disableUpdateOnLayoutShift\"\n      :prioritize-position=\"prioritizePosition\"\n      :reference=\"(reference as any)\"\n      :as=\"contentAs\"\n      :as-child=\"contentAsChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <slot name=\"calendarTopContent\" />\n\n      <Calendar\n        v-model=\"calendarValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"placeholderValue ?? defaultValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :is-date-disabled=\"isDateDisabled\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :locale=\"locale\"\n        :number-of-months=\"visibleMonths\"\n        :readonly=\"isReadOnly\"\n        :disabled=\"isDisabled\"\n      />\n\n      <slot name=\"calendarBottomContent\" />\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":""}

package/dist/components/date-picker/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -84,9 +84,12 @@ var DatePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		align: {},
 		alignOffset: {},
 		alignFlip: { type: Boolean },
-		avoidCollisions: { type: Boolean },
+		avoidCollisions: {
+			type: Boolean,
+			default: true
+		},
 		collisionBoundary: {},
-		collisionPadding: {},
+		collisionPadding: { default: 8 },
 		arrowPadding: {},
 		hideShiftedArrow: { type: Boolean },
 		sticky: {},
@@ -94,7 +97,10 @@ var DatePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		positionStrategy: {},
 		updatePositionStrategy: {},
 		disableUpdateOnLayoutShift: { type: Boolean },
-		prioritizePosition: { type: Boolean },
+		prioritizePosition: {
+			type: Boolean,
+			default: true
+		},
 		reference: {},
 		contentAs: {},
 		contentAsChild: { type: Boolean },

package/dist/components/date-picker/DatePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport type { CalendarDateTime, ZonedDateTime } from '@internationalized/date'\nimport { datePickerVariants, type DateInputVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to DateInput */\n  variant?: DateInputVariants['variant']\n  size?: DateInputVariants['size']\n  color?: DateInputVariants['color']\n  labelPlacement?: DateInputVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: DateValue\n  defaultOpen?: boolean\n  defaultPlaceholder?: DateValue\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  locale?: string\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  hideTimeZone?: boolean\n  visibleMonths?: number\n  pageBehavior?: 'visible' | 'single'\n  closeOnSelect?: boolean\n  modal?: boolean\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to the root DatePickerRoot element. */\n  id?: string\n  /** Marks the field as required. */\n  required?: boolean\n  /** Use paged navigation (advance by numberOfMonths). */\n  pagedNavigation?: boolean\n  /** Day the week starts on. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Format for weekday header cells. */\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  /** Always show 6 weeks per month. */\n  fixedWeeks?: boolean\n  /** Number of months shown in the calendar. */\n  numberOfMonths?: number\n  /** Prevent deselecting a selected date. */\n  preventDeselect?: boolean\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  /** Portal target for the content. */\n  portal?: string | HTMLElement\n  /** Force the content to stay mounted. */\n  forceMount?: boolean\n  /** Side of the anchor the content appears on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Distance in px from the anchor. */\n  sideOffset?: number\n  /** Allow flipping to opposite side. */\n  sideFlip?: boolean\n  /** Alignment of the content relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset along the align axis. */\n  alignOffset?: number\n  /** Allow flipping alignment. */\n  alignFlip?: boolean\n  /** Avoid collisions with the viewport. */\n  avoidCollisions?: boolean\n  /** Elements to use as collision boundaries. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding for collision detection. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between arrow and content edge. */\n  arrowPadding?: number\n  /** Hide the arrow when it is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when overflowing. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in viewport. */\n  prioritizePosition?: boolean\n  /** Virtual reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  contentAs?: string\n  /** Render content child as root element. */\n  contentAsChild?: boolean\n  /** Disable pointer events outside the content. */\n  disableOutsidePointerEvents?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots (base, trigger, triggerIndicator, popover) */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  closeOnSelect: true,\n  modal: false,\n  visibleMonths: 1,\n  defaultOpen: false,\n})\n\nconst emit = defineEmits<{\n  'update:placeholder': [value: DateValue | undefined]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\nconst modelValue = defineModel<DateValue | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open')\n\nconst slotFns = computed(() => datePickerVariants())\n\n// Reka treats `undefined` as \"uncontrolled mode\" — always pass null (controlled + empty) instead.\nconst rekaModelValue = computed<DateValue | null>({\n  get: () => modelValue.value ?? null,\n  set: (val: DateValue | null) => { modelValue.value = val ?? null },\n})\n\n// Sync Calendar's `DateValue` v-model with DatePicker's `DateValue | null` model,\n// and close the popover on selection when closeOnSelect is enabled.\n// When the current value carries a time component (CalendarDateTime / ZonedDateTime),\n// preserve it so clicking a date in the calendar doesn't wipe out the time the user\n// typed into the field segments.\nconst calendarValue = computed<DateValue | undefined>({\n  get: () => modelValue.value ?? undefined,\n  set: (val) => {\n    if (val != null && modelValue.value != null && 'hour' in modelValue.value) {\n      const existing = modelValue.value as CalendarDateTime | ZonedDateTime\n      modelValue.value = existing.set({ year: val.year, month: val.month, day: val.day })\n    } else {\n      modelValue.value = val ?? null\n    }\n    if (props.closeOnSelect && val != null) {\n      openModel.value = false\n    }\n  },\n})\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"rekaModelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :placeholder-value=\"placeholderValue\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :step=\"step\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :dir=\"dir\"\n    :id=\"id\"\n    :required=\"required\"\n    :paged-navigation=\"pagedNavigation\"\n    :week-starts-on=\"weekStartsOn\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths ?? visibleMonths\"\n    :prevent-deselect=\"preventDeselect\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-picker\"\n  >\n    <!-- DateInput hosts label/helper/field; trigger sits in its endContent slot -->\n    <DateInput\n      v-model=\"modelValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :placeholder-value=\"placeholderValue\"\n      :min-value=\"minValue\"\n      :max-value=\"maxValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          :as=\"triggerAs\"\n          :as-child=\"triggerAsChild\"\n          aria-label=\"Open date picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <!-- Popover (portaled + positioned by Reka) -->\n    <DatePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"sideOffset ?? 8\"\n      :portal=\"portal != null ? { to: portal } : undefined\"\n      :force-mount=\"forceMount\"\n      :side=\"side\"\n      :side-flip=\"sideFlip\"\n      :align=\"align\"\n      :align-offset=\"alignOffset\"\n      :align-flip=\"alignFlip\"\n      :avoid-collisions=\"avoidCollisions\"\n      :collision-boundary=\"collisionBoundary\"\n      :collision-padding=\"collisionPadding\"\n      :arrow-padding=\"arrowPadding\"\n      :hide-shifted-arrow=\"hideShiftedArrow\"\n      :sticky=\"sticky\"\n      :hide-when-detached=\"hideWhenDetached\"\n      :position-strategy=\"positionStrategy\"\n      :update-position-strategy=\"updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"disableUpdateOnLayoutShift\"\n      :prioritize-position=\"prioritizePosition\"\n      :reference=\"(reference as any)\"\n      :as=\"contentAs\"\n      :as-child=\"contentAsChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <slot name=\"calendarTopContent\" />\n\n      <Calendar\n        v-model=\"calendarValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"placeholderValue ?? defaultValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :is-date-disabled=\"isDateDisabled\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :locale=\"locale\"\n        :number-of-months=\"visibleMonths\"\n        :readonly=\"isReadOnly\"\n        :disabled=\"isDisabled\"\n      />\n\n      <slot name=\"calendarBottomContent\" />\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport type { CalendarDateTime, ZonedDateTime } from '@internationalized/date'\nimport { datePickerVariants, type DateInputVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to DateInput */\n  variant?: DateInputVariants['variant']\n  size?: DateInputVariants['size']\n  color?: DateInputVariants['color']\n  labelPlacement?: DateInputVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: DateValue\n  defaultOpen?: boolean\n  defaultPlaceholder?: DateValue\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  locale?: string\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  hideTimeZone?: boolean\n  visibleMonths?: number\n  pageBehavior?: 'visible' | 'single'\n  closeOnSelect?: boolean\n  modal?: boolean\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to the root DatePickerRoot element. */\n  id?: string\n  /** Marks the field as required. */\n  required?: boolean\n  /** Use paged navigation (advance by numberOfMonths). */\n  pagedNavigation?: boolean\n  /** Day the week starts on. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Format for weekday header cells. */\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  /** Always show 6 weeks per month. */\n  fixedWeeks?: boolean\n  /** Number of months shown in the calendar. */\n  numberOfMonths?: number\n  /** Prevent deselecting a selected date. */\n  preventDeselect?: boolean\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  /** Portal target for the content. */\n  portal?: string | HTMLElement\n  /** Force the content to stay mounted. */\n  forceMount?: boolean\n  /** Side of the anchor the content appears on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Distance in px from the anchor. */\n  sideOffset?: number\n  /** Allow flipping to opposite side. */\n  sideFlip?: boolean\n  /** Alignment of the content relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset along the align axis. */\n  alignOffset?: number\n  /** Allow flipping alignment. */\n  alignFlip?: boolean\n  /** Avoid collisions with the viewport. */\n  avoidCollisions?: boolean\n  /** Elements to use as collision boundaries. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding for collision detection. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between arrow and content edge. */\n  arrowPadding?: number\n  /** Hide the arrow when it is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when overflowing. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in viewport. */\n  prioritizePosition?: boolean\n  /** Virtual reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  contentAs?: string\n  /** Render content child as root element. */\n  contentAsChild?: boolean\n  /** Disable pointer events outside the content. */\n  disableOutsidePointerEvents?: boolean\n  class?: ClassValue\n  /** Override classes for individual slots (base, trigger, triggerIndicator, popover) */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  closeOnSelect: true,\n  modal: false,\n  visibleMonths: 1,\n  defaultOpen: false,\n  avoidCollisions: true,\n  collisionPadding: 8,\n  prioritizePosition: true,\n})\n\nconst emit = defineEmits<{\n  'update:placeholder': [value: DateValue | undefined]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\nconst modelValue = defineModel<DateValue | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open')\n\nconst slotFns = computed(() => datePickerVariants())\n\n// Reka treats `undefined` as \"uncontrolled mode\" — always pass null (controlled + empty) instead.\nconst rekaModelValue = computed<DateValue | null>({\n  get: () => modelValue.value ?? null,\n  set: (val: DateValue | null) => { modelValue.value = val ?? null },\n})\n\n// Sync Calendar's `DateValue` v-model with DatePicker's `DateValue | null` model,\n// and close the popover on selection when closeOnSelect is enabled.\n// When the current value carries a time component (CalendarDateTime / ZonedDateTime),\n// preserve it so clicking a date in the calendar doesn't wipe out the time the user\n// typed into the field segments.\nconst calendarValue = computed<DateValue | undefined>({\n  get: () => modelValue.value ?? undefined,\n  set: (val) => {\n    if (val != null && modelValue.value != null && 'hour' in modelValue.value) {\n      const existing = modelValue.value as CalendarDateTime | ZonedDateTime\n      modelValue.value = existing.set({ year: val.year, month: val.month, day: val.day })\n    } else {\n      modelValue.value = val ?? null\n    }\n    if (props.closeOnSelect && val != null) {\n      openModel.value = false\n    }\n  },\n})\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"rekaModelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :placeholder-value=\"placeholderValue\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :step=\"step\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :dir=\"dir\"\n    :id=\"id\"\n    :required=\"required\"\n    :paged-navigation=\"pagedNavigation\"\n    :week-starts-on=\"weekStartsOn\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths ?? visibleMonths\"\n    :prevent-deselect=\"preventDeselect\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-picker\"\n  >\n    <!-- DateInput hosts label/helper/field; trigger sits in its endContent slot -->\n    <DateInput\n      v-model=\"modelValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :placeholder-value=\"placeholderValue\"\n      :min-value=\"minValue\"\n      :max-value=\"maxValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          :as=\"triggerAs\"\n          :as-child=\"triggerAsChild\"\n          aria-label=\"Open date picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <!-- Popover (portaled + positioned by Reka) -->\n    <DatePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"sideOffset ?? 8\"\n      :portal=\"portal != null ? { to: portal } : undefined\"\n      :force-mount=\"forceMount\"\n      :side=\"side\"\n      :side-flip=\"sideFlip\"\n      :align=\"align\"\n      :align-offset=\"alignOffset\"\n      :align-flip=\"alignFlip\"\n      :avoid-collisions=\"avoidCollisions\"\n      :collision-boundary=\"collisionBoundary\"\n      :collision-padding=\"collisionPadding\"\n      :arrow-padding=\"arrowPadding\"\n      :hide-shifted-arrow=\"hideShiftedArrow\"\n      :sticky=\"sticky\"\n      :hide-when-detached=\"hideWhenDetached\"\n      :position-strategy=\"positionStrategy\"\n      :update-position-strategy=\"updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"disableUpdateOnLayoutShift\"\n      :prioritize-position=\"prioritizePosition\"\n      :reference=\"(reference as any)\"\n      :as=\"contentAs\"\n      :as-child=\"contentAsChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <slot name=\"calendarTopContent\" />\n\n      <Calendar\n        v-model=\"calendarValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"placeholderValue ?? defaultValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :is-date-disabled=\"isDateDisabled\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :locale=\"locale\"\n        :number-of-months=\"visibleMonths\"\n        :readonly=\"isReadOnly\"\n        :disabled=\"isDisabled\"\n      />\n\n      <slot name=\"calendarBottomContent\" />\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/date-range-picker/DateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","names":[],"sources":["../../../src/components/date-range-picker/DateRangePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  DateRangePickerRoot,\n  DateRangePickerTrigger,\n  DateRangePickerContent,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport { dateRangePickerVariants, type DateRangeFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport RangeCalendar from '../range-calendar/RangeCalendar.vue'\nimport DateRangeField from '../date-range-field/DateRangeField.vue'\n\nexport interface DateRange {\n  start: DateValue\n  end: DateValue\n}\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to DateRangeField */\n  variant?: DateRangeFieldVariants['variant']\n  size?: DateRangeFieldVariants['size']\n  color?: DateRangeFieldVariants['color']\n  labelPlacement?: DateRangeFieldVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: DateRange\n  defaultOpen?: boolean\n  defaultPlaceholder?: DateValue\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  locale?: string\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  hideTimeZone?: boolean\n  visibleMonths?: number\n  pageBehavior?: 'visible' | 'single'\n  closeOnSelect?: boolean\n  modal?: boolean\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to the root DateRangePickerRoot element. */\n  id?: string\n  /** Marks the field as required. */\n  required?: boolean\n  /** Use paged navigation. */\n  pagedNavigation?: boolean\n  /** Day the week starts on. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Format for weekday header cells. */\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  /** Always show 6 weeks per month. */\n  fixedWeeks?: boolean\n  /** Number of months shown in the calendar. */\n  numberOfMonths?: number\n  /** Prevent deselecting a selected date. */\n  preventDeselect?: boolean\n  /** Whether a date is highlightable in the range. */\n  isDateHighlightable?: (date: DateValue) => boolean\n  /** Allow non-contiguous ranges. */\n  allowNonContiguousRanges?: boolean\n  /** Fix one end of the range. */\n  fixedDate?: 'start' | 'end'\n  /** Maximum number of days in the range. */\n  maximumDays?: number\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  /** Portal target for the content. */\n  portal?: string | HTMLElement\n  /** Force the content to stay mounted. */\n  forceMount?: boolean\n  /** Side of the anchor the content appears on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Distance in px from the anchor. */\n  sideOffset?: number\n  /** Allow flipping to opposite side. */\n  sideFlip?: boolean\n  /** Alignment of the content relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset along the align axis. */\n  alignOffset?: number\n  /** Allow flipping alignment. */\n  alignFlip?: boolean\n  /** Avoid collisions with the viewport. */\n  avoidCollisions?: boolean\n  /** Elements to use as collision boundaries. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding for collision detection. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between arrow and content edge. */\n  arrowPadding?: number\n  /** Hide the arrow when it is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when overflowing. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in viewport. */\n  prioritizePosition?: boolean\n  /** Virtual reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  contentAs?: string\n  /** Render content child as root element. */\n  contentAsChild?: boolean\n  /** Disable pointer events outside the content. */\n  disableOutsidePointerEvents?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  closeOnSelect: true,\n  modal: false,\n  visibleMonths: 1,\n  defaultOpen: false,\n})\n\nconst emit = defineEmits<{\n  'update:placeholder': [value: DateValue | undefined]\n  'update:start-value': [value: DateValue | undefined]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\nconst modelValue = defineModel<DateRange | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open')\n\nconst slotFns = computed(() => dateRangePickerVariants())\n\n// Sync RangeCalendar's `DateRange | null` v-model with DateRangePicker's model,\n// and close the popover when a complete range is selected (closeOnSelect).\nconst rangeValue = computed<DateRange | null>({\n  get: () => modelValue.value ?? null,\n  set: (val) => {\n    modelValue.value = val ?? null\n    if (props.closeOnSelect && val?.start && val?.end) {\n      openModel.value = false\n    }\n  },\n})\n</script>\n\n<template>\n  <DateRangePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :placeholder-value=\"placeholderValue\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :step=\"step\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :dir=\"dir\"\n    :id=\"id\"\n    :required=\"required\"\n    :paged-navigation=\"pagedNavigation\"\n    :week-starts-on=\"weekStartsOn\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths ?? visibleMonths\"\n    :prevent-deselect=\"preventDeselect\"\n    :is-date-highlightable=\"isDateHighlightable\"\n    :allow-non-contiguous-ranges=\"allowNonContiguousRanges\"\n    :fixed-date=\"fixedDate\"\n    :maximum-days=\"maximumDays\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-range-picker\"\n  >\n    <!-- DateRangeField hosts label/helper/field; trigger sits in its endContent slot -->\n    <DateRangeField\n      v-model=\"modelValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :placeholder-value=\"placeholderValue\"\n      :min-value=\"minValue\"\n      :max-value=\"maxValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DateRangePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          :as=\"triggerAs\"\n          :as-child=\"triggerAsChild\"\n          aria-label=\"Open date range picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DateRangePickerTrigger>\n      </template>\n    </DateRangeField>\n\n    <!-- Popover (portaled + positioned by Reka) -->\n    <DateRangePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"sideOffset ?? 8\"\n      :portal=\"portal != null ? { to: portal } : undefined\"\n      :force-mount=\"forceMount\"\n      :side=\"side\"\n      :side-flip=\"sideFlip\"\n      :align=\"align\"\n      :align-offset=\"alignOffset\"\n      :align-flip=\"alignFlip\"\n      :avoid-collisions=\"avoidCollisions\"\n      :collision-boundary=\"collisionBoundary\"\n      :collision-padding=\"collisionPadding\"\n      :arrow-padding=\"arrowPadding\"\n      :hide-shifted-arrow=\"hideShiftedArrow\"\n      :sticky=\"sticky\"\n      :hide-when-detached=\"hideWhenDetached\"\n      :position-strategy=\"positionStrategy\"\n      :update-position-strategy=\"updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"disableUpdateOnLayoutShift\"\n      :prioritize-position=\"prioritizePosition\"\n      :reference=\"(reference as any)\"\n      :as=\"contentAs\"\n      :as-child=\"contentAsChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <slot name=\"calendarTopContent\" />\n\n      <RangeCalendar\n        v-model=\"rangeValue\"\n        :default-placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :is-date-disabled=\"isDateDisabled\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :locale=\"locale\"\n        :number-of-months=\"visibleMonths\"\n        :readonly=\"isReadOnly\"\n        :disabled=\"isDisabled\"\n      />\n\n      <slot name=\"calendarBottomContent\" />\n    </DateRangePickerContent>\n  </DateRangePickerRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DateRangePicker.js","names":[],"sources":["../../../src/components/date-range-picker/DateRangePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  DateRangePickerRoot,\n  DateRangePickerTrigger,\n  DateRangePickerContent,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport { dateRangePickerVariants, type DateRangeFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport RangeCalendar from '../range-calendar/RangeCalendar.vue'\nimport DateRangeField from '../date-range-field/DateRangeField.vue'\n\nexport interface DateRange {\n  start: DateValue\n  end: DateValue\n}\n\nconst props = withDefaults(defineProps<{\n  /* Field appearance — forwarded to DateRangeField */\n  variant?: DateRangeFieldVariants['variant']\n  size?: DateRangeFieldVariants['size']\n  color?: DateRangeFieldVariants['color']\n  labelPlacement?: DateRangeFieldVariants['labelPlacement']\n  fullWidth?: boolean\n\n  defaultValue?: DateRange\n  defaultOpen?: boolean\n  defaultPlaceholder?: DateValue\n  placeholderValue?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n  locale?: string\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  hideTimeZone?: boolean\n  visibleMonths?: number\n  pageBehavior?: 'visible' | 'single'\n  closeOnSelect?: boolean\n  modal?: boolean\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to the root DateRangePickerRoot element. */\n  id?: string\n  /** Marks the field as required. */\n  required?: boolean\n  /** Use paged navigation. */\n  pagedNavigation?: boolean\n  /** Day the week starts on. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /** Format for weekday header cells. */\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  /** Always show 6 weeks per month. */\n  fixedWeeks?: boolean\n  /** Number of months shown in the calendar. */\n  numberOfMonths?: number\n  /** Prevent deselecting a selected date. */\n  preventDeselect?: boolean\n  /** Whether a date is highlightable in the range. */\n  isDateHighlightable?: (date: DateValue) => boolean\n  /** Allow non-contiguous ranges. */\n  allowNonContiguousRanges?: boolean\n  /** Fix one end of the range. */\n  fixedDate?: 'start' | 'end'\n  /** Maximum number of days in the range. */\n  maximumDays?: number\n  /** Render trigger as a different element. */\n  triggerAs?: string\n  /** Render trigger child as root element. */\n  triggerAsChild?: boolean\n  /** Portal target for the content. */\n  portal?: string | HTMLElement\n  /** Force the content to stay mounted. */\n  forceMount?: boolean\n  /** Side of the anchor the content appears on. */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  /** Distance in px from the anchor. */\n  sideOffset?: number\n  /** Allow flipping to opposite side. */\n  sideFlip?: boolean\n  /** Alignment of the content relative to the anchor. */\n  align?: 'start' | 'center' | 'end'\n  /** Offset along the align axis. */\n  alignOffset?: number\n  /** Allow flipping alignment. */\n  alignFlip?: boolean\n  /** Avoid collisions with the viewport. */\n  avoidCollisions?: boolean\n  /** Elements to use as collision boundaries. */\n  collisionBoundary?: Element | null | Array<Element | null>\n  /** Padding for collision detection. */\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  /** Padding between arrow and content edge. */\n  arrowPadding?: number\n  /** Hide the arrow when it is shifted. */\n  hideShiftedArrow?: boolean\n  /** Sticky behavior when overflowing. */\n  sticky?: 'partial' | 'always'\n  /** Hide content when anchor is detached. */\n  hideWhenDetached?: boolean\n  /** CSS position strategy. */\n  positionStrategy?: 'fixed' | 'absolute'\n  /** When to recalculate position. */\n  updatePositionStrategy?: 'always' | 'optimized'\n  /** Disable position update on layout shift. */\n  disableUpdateOnLayoutShift?: boolean\n  /** Prioritize keeping content in viewport. */\n  prioritizePosition?: boolean\n  /** Virtual reference element for positioning. */\n  reference?: object | null\n  /** Render content as a different element. */\n  contentAs?: string\n  /** Render content child as root element. */\n  contentAsChild?: boolean\n  /** Disable pointer events outside the content. */\n  disableOutsidePointerEvents?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  closeOnSelect: true,\n  modal: false,\n  visibleMonths: 1,\n  defaultOpen: false,\n  avoidCollisions: true,\n  collisionPadding: 8,\n  prioritizePosition: true,\n})\n\nconst emit = defineEmits<{\n  'update:placeholder': [value: DateValue | undefined]\n  'update:start-value': [value: DateValue | undefined]\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\nconst modelValue = defineModel<DateRange | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open')\n\nconst slotFns = computed(() => dateRangePickerVariants())\n\n// Sync RangeCalendar's `DateRange | null` v-model with DateRangePicker's model,\n// and close the popover when a complete range is selected (closeOnSelect).\nconst rangeValue = computed<DateRange | null>({\n  get: () => modelValue.value ?? null,\n  set: (val) => {\n    modelValue.value = val ?? null\n    if (props.closeOnSelect && val?.start && val?.end) {\n      openModel.value = false\n    }\n  },\n})\n</script>\n\n<template>\n  <DateRangePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :placeholder-value=\"placeholderValue\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :step=\"step\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :dir=\"dir\"\n    :id=\"id\"\n    :required=\"required\"\n    :paged-navigation=\"pagedNavigation\"\n    :week-starts-on=\"weekStartsOn\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths ?? visibleMonths\"\n    :prevent-deselect=\"preventDeselect\"\n    :is-date-highlightable=\"isDateHighlightable\"\n    :allow-non-contiguous-ranges=\"allowNonContiguousRanges\"\n    :fixed-date=\"fixedDate\"\n    :maximum-days=\"maximumDays\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-range-picker\"\n  >\n    <!-- DateRangeField hosts label/helper/field; trigger sits in its endContent slot -->\n    <DateRangeField\n      v-model=\"modelValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :placeholder-value=\"placeholderValue\"\n      :min-value=\"minValue\"\n      :max-value=\"maxValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DateRangePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          :as=\"triggerAs\"\n          :as-child=\"triggerAsChild\"\n          aria-label=\"Open date range picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DateRangePickerTrigger>\n      </template>\n    </DateRangeField>\n\n    <!-- Popover (portaled + positioned by Reka) -->\n    <DateRangePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"sideOffset ?? 8\"\n      :portal=\"portal != null ? { to: portal } : undefined\"\n      :force-mount=\"forceMount\"\n      :side=\"side\"\n      :side-flip=\"sideFlip\"\n      :align=\"align\"\n      :align-offset=\"alignOffset\"\n      :align-flip=\"alignFlip\"\n      :avoid-collisions=\"avoidCollisions\"\n      :collision-boundary=\"collisionBoundary\"\n      :collision-padding=\"collisionPadding\"\n      :arrow-padding=\"arrowPadding\"\n      :hide-shifted-arrow=\"hideShiftedArrow\"\n      :sticky=\"sticky\"\n      :hide-when-detached=\"hideWhenDetached\"\n      :position-strategy=\"positionStrategy\"\n      :update-position-strategy=\"updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"disableUpdateOnLayoutShift\"\n      :prioritize-position=\"prioritizePosition\"\n      :reference=\"(reference as any)\"\n      :as=\"contentAs\"\n      :as-child=\"contentAsChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <slot name=\"calendarTopContent\" />\n\n      <RangeCalendar\n        v-model=\"rangeValue\"\n        :default-placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :is-date-disabled=\"isDateDisabled\"\n        :is-date-unavailable=\"isDateUnavailable\"\n        :locale=\"locale\"\n        :number-of-months=\"visibleMonths\"\n        :readonly=\"isReadOnly\"\n        :disabled=\"isDisabled\"\n      />\n\n      <slot name=\"calendarBottomContent\" />\n    </DateRangePickerContent>\n  </DateRangePickerRoot>\n</template>\n"],"mappings":""}

package/dist/components/date-range-picker/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -88,9 +88,12 @@ var DateRangePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		align: {},
 		alignOffset: {},
 		alignFlip: { type: Boolean },
-		avoidCollisions: { type: Boolean },
+		avoidCollisions: {
+			type: Boolean,
+			default: true
+		},
 		collisionBoundary: {},
-		collisionPadding: {},
+		collisionPadding: { default: 8 },
 		arrowPadding: {},
 		hideShiftedArrow: { type: Boolean },
 		sticky: {},
@@ -98,7 +101,10 @@ var DateRangePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		positionStrategy: {},
 		updatePositionStrategy: {},
 		disableUpdateOnLayoutShift: { type: Boolean },
-		prioritizePosition: { type: Boolean },
+		prioritizePosition: {
+			type: Boolean,
+			default: true
+		},
 		reference: {},
 		contentAs: {},
 		contentAsChild: { type: Boolean },