@auronui/vue 1.0.21 → 1.0.22

package/dist/components/calendar-year-picker/CalendarYearPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarYearPicker.js","names":[],"sources":["../../../src/components/calendar-year-picker/CalendarYearPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  YearPickerRoot,\n  YearPickerHeader,\n  YearPickerHeading,\n  YearPickerPrev,\n  YearPickerNext,\n  YearPickerGrid,\n  YearPickerGridBody,\n  YearPickerGridRow,\n  YearPickerCell,\n  YearPickerCellTrigger,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport { calendarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: DateValue\n  defaultPlaceholder?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isYearDisabled?: (date: DateValue) => boolean\n  isYearUnavailable?: (date: DateValue) => boolean\n  locale?: string\n  yearsPerPage?: number\n  preventDeselect?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  calendarLabel?: string\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    header: ClassValue\n    navButton: ClassValue\n    navButtonIcon: ClassValue\n    heading: ClassValue\n    yearGrid: ClassValue\n    yearGridBody: ClassValue\n    yearGridRow: ClassValue\n    yearCell: ClassValue\n  }>\n}>(), {\n  yearsPerPage: 12,\n  preventDeselect: false,\n  readonly: false,\n  disabled: false,\n})\n\nconst modelValue = defineModel<DateValue | undefined>()\nconst placeholderModel = defineModel<DateValue | undefined>('placeholder')\n\nconst slotFns = computed(() => calendarVariants())\n</script>\n\n<template>\n  <YearPickerRoot\n    v-model=\"modelValue\"\n    v-model:placeholder=\"placeholderModel\"\n    :default-value=\"defaultValue\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-year-disabled=\"isYearDisabled\"\n    :is-year-unavailable=\"isYearUnavailable\"\n    :locale=\"locale\"\n    :years-per-page=\"yearsPerPage\"\n    :prevent-deselect=\"preventDeselect\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :calendar-label=\"calendarLabel\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n  >\n    <template #default=\"{ grid }\">\n      <YearPickerHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n        <YearPickerPrev\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Previous years\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\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          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </YearPickerPrev>\n\n        <YearPickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n        >\n          <slot\n            name=\"heading\"\n            :heading-value=\"headingValue\"\n          >\n            {{ headingValue }}\n          </slot>\n        </YearPickerHeading>\n\n        <YearPickerNext\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Next years\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\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          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </YearPickerNext>\n      </YearPickerHeader>\n\n      <YearPickerGrid :class=\"composeClassName(slotFns.yearGrid(), props.classNames?.yearGrid)\">\n        <YearPickerGridBody :class=\"composeClassName(slotFns.yearGridBody(), props.classNames?.yearGridBody)\">\n          <YearPickerGridRow\n            v-for=\"(row, rowIndex) in grid.rows\"\n            :key=\"rowIndex\"\n            :class=\"composeClassName(slotFns.yearGridRow(), props.classNames?.yearGridRow)\"\n          >\n            <YearPickerCell\n              v-for=\"yearValue in row\"\n              :key=\"yearValue.toString()\"\n              :date=\"yearValue\"\n            >\n              <YearPickerCellTrigger\n                :year=\"yearValue\"\n                as=\"button\"\n                :class=\"composeClassName(slotFns.yearCell(), props.classNames?.yearCell)\"\n              />\n            </YearPickerCell>\n          </YearPickerGridRow>\n        </YearPickerGridBody>\n      </YearPickerGrid>\n    </template>\n  </YearPickerRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"CalendarYearPicker.js","names":[],"sources":["../../../src/components/calendar-year-picker/CalendarYearPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  YearPickerRoot,\n  YearPickerHeader,\n  YearPickerHeading,\n  YearPickerPrev,\n  YearPickerNext,\n  YearPickerGrid,\n  YearPickerGridBody,\n  YearPickerGridRow,\n  YearPickerCell,\n  YearPickerCellTrigger,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport { calendarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: DateValue\n  defaultPlaceholder?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isYearDisabled?: (date: DateValue) => boolean\n  isYearUnavailable?: (date: DateValue) => boolean\n  locale?: string\n  yearsPerPage?: number\n  preventDeselect?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  calendarLabel?: string\n  /** Initial focus state. @default false */\n  initialFocus?: boolean\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** Navigate to next page. */\n  nextPage?: (placeholder: DateValue) => DateValue\n  /** Navigate to previous page. */\n  prevPage?: (placeholder: DateValue) => DateValue\n  /** Allow multiple selections. */\n  multiple?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Render child as root element. */\n  asChild?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    header: ClassValue\n    navButton: ClassValue\n    navButtonIcon: ClassValue\n    heading: ClassValue\n    yearGrid: ClassValue\n    yearGridBody: ClassValue\n    yearGridRow: ClassValue\n    yearCell: ClassValue\n  }>\n}>(), {\n  yearsPerPage: 12,\n  preventDeselect: false,\n  readonly: false,\n  disabled: false,\n})\n\nconst modelValue = defineModel<DateValue | undefined>()\nconst placeholderModel = defineModel<DateValue | undefined>('placeholder')\n\nconst slotFns = computed(() => calendarVariants())\n</script>\n\n<template>\n  <YearPickerRoot\n    v-model=\"modelValue\"\n    v-model:placeholder=\"placeholderModel\"\n    :default-value=\"defaultValue\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-year-disabled=\"isYearDisabled\"\n    :is-year-unavailable=\"isYearUnavailable\"\n    :locale=\"locale\"\n    :years-per-page=\"yearsPerPage\"\n    :prevent-deselect=\"preventDeselect\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :calendar-label=\"calendarLabel\"\n    :initial-focus=\"initialFocus\"\n    :dir=\"dir\"\n    :next-page=\"nextPage\"\n    :prev-page=\"prevPage\"\n    :multiple=\"multiple\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n  >\n    <template #default=\"{ grid }\">\n      <YearPickerHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n        <YearPickerPrev\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Previous years\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\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          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </YearPickerPrev>\n\n        <YearPickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n        >\n          <slot\n            name=\"heading\"\n            :heading-value=\"headingValue\"\n          >\n            {{ headingValue }}\n          </slot>\n        </YearPickerHeading>\n\n        <YearPickerNext\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Next years\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\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          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </YearPickerNext>\n      </YearPickerHeader>\n\n      <YearPickerGrid :class=\"composeClassName(slotFns.yearGrid(), props.classNames?.yearGrid)\">\n        <YearPickerGridBody :class=\"composeClassName(slotFns.yearGridBody(), props.classNames?.yearGridBody)\">\n          <YearPickerGridRow\n            v-for=\"(row, rowIndex) in grid.rows\"\n            :key=\"rowIndex\"\n            :class=\"composeClassName(slotFns.yearGridRow(), props.classNames?.yearGridRow)\"\n          >\n            <YearPickerCell\n              v-for=\"yearValue in row\"\n              :key=\"yearValue.toString()\"\n              :date=\"yearValue\"\n            >\n              <YearPickerCellTrigger\n                :year=\"yearValue\"\n                as=\"button\"\n                :class=\"composeClassName(slotFns.yearCell(), props.classNames?.yearCell)\"\n              />\n            </YearPickerCell>\n          </YearPickerGridRow>\n        </YearPickerGridBody>\n      </YearPickerGrid>\n    </template>\n  </YearPickerRoot>\n</template>\n"],"mappings":""}

package/dist/components/calendar-year-picker/CalendarYearPicker.vue_vue_type_script_setup_true_lang.js

@@ -27,6 +27,13 @@ var CalendarYearPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 			default: false
 		},
 		calendarLabel: {},
+		initialFocus: { type: Boolean },
+		dir: {},
+		nextPage: {},
+		prevPage: {},
+		multiple: { type: Boolean },
+		as: {},
+		asChild: { type: Boolean },
 		class: { type: [
 			String,
 			Boolean,
@@ -65,6 +72,13 @@ var CalendarYearPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 				readonly: __props.readonly,
 				disabled: __props.disabled,
 				"calendar-label": __props.calendarLabel,
+				"initial-focus": __props.initialFocus,
+				dir: __props.dir,
+				"next-page": __props.nextPage,
+				"prev-page": __props.prevPage,
+				multiple: __props.multiple,
+				as: __props.as,
+				"as-child": __props.asChild,
 				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base))
 			}, {
 				default: withCtx(({ grid }) => [createVNode(unref(YearPickerHeader), { class: normalizeClass(unref(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
@@ -156,6 +170,13 @@ var CalendarYearPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 				"readonly",
 				"disabled",
 				"calendar-label",
+				"initial-focus",
+				"dir",
+				"next-page",
+				"prev-page",
+				"multiple",
+				"as",
+				"as-child",
 				"class"
 			]);
 		};

package/dist/components/calendar-year-picker/CalendarYearPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarYearPicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/calendar-year-picker/CalendarYearPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  YearPickerRoot,\n  YearPickerHeader,\n  YearPickerHeading,\n  YearPickerPrev,\n  YearPickerNext,\n  YearPickerGrid,\n  YearPickerGridBody,\n  YearPickerGridRow,\n  YearPickerCell,\n  YearPickerCellTrigger,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport { calendarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: DateValue\n  defaultPlaceholder?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isYearDisabled?: (date: DateValue) => boolean\n  isYearUnavailable?: (date: DateValue) => boolean\n  locale?: string\n  yearsPerPage?: number\n  preventDeselect?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  calendarLabel?: string\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    header: ClassValue\n    navButton: ClassValue\n    navButtonIcon: ClassValue\n    heading: ClassValue\n    yearGrid: ClassValue\n    yearGridBody: ClassValue\n    yearGridRow: ClassValue\n    yearCell: ClassValue\n  }>\n}>(), {\n  yearsPerPage: 12,\n  preventDeselect: false,\n  readonly: false,\n  disabled: false,\n})\n\nconst modelValue = defineModel<DateValue | undefined>()\nconst placeholderModel = defineModel<DateValue | undefined>('placeholder')\n\nconst slotFns = computed(() => calendarVariants())\n</script>\n\n<template>\n  <YearPickerRoot\n    v-model=\"modelValue\"\n    v-model:placeholder=\"placeholderModel\"\n    :default-value=\"defaultValue\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-year-disabled=\"isYearDisabled\"\n    :is-year-unavailable=\"isYearUnavailable\"\n    :locale=\"locale\"\n    :years-per-page=\"yearsPerPage\"\n    :prevent-deselect=\"preventDeselect\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :calendar-label=\"calendarLabel\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n  >\n    <template #default=\"{ grid }\">\n      <YearPickerHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n        <YearPickerPrev\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Previous years\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\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          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </YearPickerPrev>\n\n        <YearPickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n        >\n          <slot\n            name=\"heading\"\n            :heading-value=\"headingValue\"\n          >\n            {{ headingValue }}\n          </slot>\n        </YearPickerHeading>\n\n        <YearPickerNext\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Next years\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\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          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </YearPickerNext>\n      </YearPickerHeader>\n\n      <YearPickerGrid :class=\"composeClassName(slotFns.yearGrid(), props.classNames?.yearGrid)\">\n        <YearPickerGridBody :class=\"composeClassName(slotFns.yearGridBody(), props.classNames?.yearGridBody)\">\n          <YearPickerGridRow\n            v-for=\"(row, rowIndex) in grid.rows\"\n            :key=\"rowIndex\"\n            :class=\"composeClassName(slotFns.yearGridRow(), props.classNames?.yearGridRow)\"\n          >\n            <YearPickerCell\n              v-for=\"yearValue in row\"\n              :key=\"yearValue.toString()\"\n              :date=\"yearValue\"\n            >\n              <YearPickerCellTrigger\n                :year=\"yearValue\"\n                as=\"button\"\n                :class=\"composeClassName(slotFns.yearCell(), props.classNames?.yearCell)\"\n              />\n            </YearPickerCell>\n          </YearPickerGridRow>\n        </YearPickerGridBody>\n      </YearPickerGrid>\n    </template>\n  </YearPickerRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"CalendarYearPicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/calendar-year-picker/CalendarYearPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  YearPickerRoot,\n  YearPickerHeader,\n  YearPickerHeading,\n  YearPickerPrev,\n  YearPickerNext,\n  YearPickerGrid,\n  YearPickerGridBody,\n  YearPickerGridRow,\n  YearPickerCell,\n  YearPickerCellTrigger,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport { calendarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: DateValue\n  defaultPlaceholder?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isYearDisabled?: (date: DateValue) => boolean\n  isYearUnavailable?: (date: DateValue) => boolean\n  locale?: string\n  yearsPerPage?: number\n  preventDeselect?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  calendarLabel?: string\n  /** Initial focus state. @default false */\n  initialFocus?: boolean\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** Navigate to next page. */\n  nextPage?: (placeholder: DateValue) => DateValue\n  /** Navigate to previous page. */\n  prevPage?: (placeholder: DateValue) => DateValue\n  /** Allow multiple selections. */\n  multiple?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Render child as root element. */\n  asChild?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    header: ClassValue\n    navButton: ClassValue\n    navButtonIcon: ClassValue\n    heading: ClassValue\n    yearGrid: ClassValue\n    yearGridBody: ClassValue\n    yearGridRow: ClassValue\n    yearCell: ClassValue\n  }>\n}>(), {\n  yearsPerPage: 12,\n  preventDeselect: false,\n  readonly: false,\n  disabled: false,\n})\n\nconst modelValue = defineModel<DateValue | undefined>()\nconst placeholderModel = defineModel<DateValue | undefined>('placeholder')\n\nconst slotFns = computed(() => calendarVariants())\n</script>\n\n<template>\n  <YearPickerRoot\n    v-model=\"modelValue\"\n    v-model:placeholder=\"placeholderModel\"\n    :default-value=\"defaultValue\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-year-disabled=\"isYearDisabled\"\n    :is-year-unavailable=\"isYearUnavailable\"\n    :locale=\"locale\"\n    :years-per-page=\"yearsPerPage\"\n    :prevent-deselect=\"preventDeselect\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :calendar-label=\"calendarLabel\"\n    :initial-focus=\"initialFocus\"\n    :dir=\"dir\"\n    :next-page=\"nextPage\"\n    :prev-page=\"prevPage\"\n    :multiple=\"multiple\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n  >\n    <template #default=\"{ grid }\">\n      <YearPickerHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n        <YearPickerPrev\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Previous years\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\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          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </YearPickerPrev>\n\n        <YearPickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n        >\n          <slot\n            name=\"heading\"\n            :heading-value=\"headingValue\"\n          >\n            {{ headingValue }}\n          </slot>\n        </YearPickerHeading>\n\n        <YearPickerNext\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Next years\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\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          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </YearPickerNext>\n      </YearPickerHeader>\n\n      <YearPickerGrid :class=\"composeClassName(slotFns.yearGrid(), props.classNames?.yearGrid)\">\n        <YearPickerGridBody :class=\"composeClassName(slotFns.yearGridBody(), props.classNames?.yearGridBody)\">\n          <YearPickerGridRow\n            v-for=\"(row, rowIndex) in grid.rows\"\n            :key=\"rowIndex\"\n            :class=\"composeClassName(slotFns.yearGridRow(), props.classNames?.yearGridRow)\"\n          >\n            <YearPickerCell\n              v-for=\"yearValue in row\"\n              :key=\"yearValue.toString()\"\n              :date=\"yearValue\"\n            >\n              <YearPickerCellTrigger\n                :year=\"yearValue\"\n                as=\"button\"\n                :class=\"composeClassName(slotFns.yearCell(), props.classNames?.yearCell)\"\n              />\n            </YearPickerCell>\n          </YearPickerGridRow>\n        </YearPickerGridBody>\n      </YearPickerGrid>\n    </template>\n  </YearPickerRoot>\n</template>\n"],"mappings":"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"}

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  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})\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: boolean | 'indeterminate') {\n  if (isInGroup.value) {\n    groupCtx.toggleValue(props.value!)\n  } else {\n    if (val !== 'indeterminate') {\n      emit('update:modelValue', 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    :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 :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\">\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  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":""}

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

@@ -52,6 +52,41 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			default: false
 		},
 		name: { default: void 0 },
+		id: { default: void 0 },
+		trueValue: {
+			type: [
+				Boolean,
+				String,
+				Number
+			],
+			default: void 0
+		},
+		falseValue: {
+			type: [
+				Boolean,
+				String,
+				Number
+			],
+			default: void 0
+		},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		as: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: false
+		},
+		indicatorForceMount: {
+			type: Boolean,
+			default: void 0
+		},
+		indicatorAsChild: {
+			type: Boolean,
+			default: false
+		},
+		indicatorAs: { default: void 0 },
 		class: { type: [
 			String,
 			Boolean,
@@ -83,7 +118,7 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		});
 		function handleUpdate(val) {
 			if (isInGroup.value) groupCtx.toggleValue(props.value);
-			else if (val !== "indeterminate") emit("update:modelValue", val);
+			else if (val !== "indeterminate") emit("update:modelValue", Boolean(val));
 		}
 		const slotFns = computed(() => checkboxVariants({ variant: finalVariant.value }));
 		return (_ctx, _cache) => {
@@ -92,10 +127,21 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				disabled: isDisabled.value,
 				name: props.name ?? unref(groupCtx).name.value,
 				value: props.value,
+				id: props.id,
+				"true-value": props.trueValue,
+				"false-value": props.falseValue,
+				"as-child": props.asChild,
+				as: props.as,
+				required: props.required,
 				class: unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base),
 				"onUpdate:modelValue": handleUpdate
 			}), {
-				default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(composeClassName)(slotFns.value.control(), props.classNames?.control)) }, [createVNode(unref(CheckboxIndicator), { class: normalizeClass(unref(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)) }, {
+				default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(composeClassName)(slotFns.value.control(), props.classNames?.control)) }, [createVNode(unref(CheckboxIndicator), {
+					"force-mount": props.indicatorForceMount,
+					"as-child": props.indicatorAsChild,
+					as: props.indicatorAs,
+					class: normalizeClass(unref(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator))
+				}, {
 					default: withCtx(() => [props.isIndeterminate ? (openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("line", {
 						x1: "5",
 						y1: "12",
@@ -103,13 +149,24 @@ var Checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 						y2: "12"
 					}, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[1] || (_cache[1] = [createElementVNode("polyline", { points: "20 6 9 17 4 12" }, null, -1)])]))]),
 					_: 1
-				}, 8, ["class"])], 2), createElementVNode("span", { class: normalizeClass(unref(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [renderSlot(_ctx.$slots, "default")], 2)]),
+				}, 8, [
+					"force-mount",
+					"as-child",
+					"as",
+					"class"
+				])], 2), createElementVNode("span", { class: normalizeClass(unref(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [renderSlot(_ctx.$slots, "default")], 2)]),
 				_: 3
 			}, 16, [
 				"model-value",
 				"disabled",
 				"name",
 				"value",
+				"id",
+				"true-value",
+				"false-value",
+				"as-child",
+				"as",
+				"required",
 				"class"
 			]);
 		};

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  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})\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: boolean | 'indeterminate') {\n  if (isInGroup.value) {\n    groupCtx.toggleValue(props.value!)\n  } else {\n    if (val !== 'indeterminate') {\n      emit('update:modelValue', 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    :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 :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\">\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;EA0Bd,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,IAAG;;EAKnC,MAAM,UAAU,eACd,iBAAiB,EAAE,SAAS,aAAa,OAAO,CAAA,CAClD;;uBASE,YAoDe,MAAA,aAAA,EApDf,WACU,MAmDK,MAnDA,EAAA;IACZ,eAAa,aAAA;IACb,UAAU,WAAA;IACV,MAAM,MAAM,QAAQ,MAAA,SAAQ,CAAC,KAAK;IAClC,OAAO,MAAM;IACb,OAAO,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI;IAC3E,uBAAoB;;2BAyCd,CAvCP,mBAuCO,QAAA,EAvCA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACzE,YAqCoB,MAAA,kBAAA,EAAA,EArCA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA,EAAA,EAAA;4BAoBpF,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;;2BAIvC,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  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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.js","names":[],"sources":["../../../src/components/collapsible/Collapsible.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onBeforeUnmount, ref, useId, watch } from 'vue'\nimport { CollapsibleRoot } from 'reka-ui'\nimport { collapsibleVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCollapsibleProvide } from './collapsible.context'\nimport { injectCollapsibleGroup } from './collapsible-group.context'\n\n// NOTE: `open` is typed as `boolean | null` (not boolean) to avoid Vue's boolean\n// prop casting: absent boolean props are cast to `false`, making it impossible to\n// distinguish \"not provided\" from \"explicitly false\". Using null as the\n// \"not controlled\" sentinel preserves that distinction at runtime.\nconst props = withDefaults(defineProps<{\n  open?: boolean | null\n  defaultOpen?: boolean\n  disabled?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n}>(), {\n  open: null,\n  defaultOpen: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean]\n}>()\n\n// Check if we're inside a CollapsibleGroup — if so, we need controlled mode so\n// the group can externally close this Collapsible by setting internalOpen.value.\nconst group = injectCollapsibleGroup()\nconst id = useId()\n\n// Controlled mode when: (a) parent provides v-model:open, OR (b) inside a group.\n// In both cases, internalOpen drives Reka's open prop.\nconst isControlled = computed(() => props.open !== null || group !== null)\n\n// Mirror of the open state — updated when Reka fires @update:open.\n// Initialized from: controlled `open` prop if set, else `defaultOpen`.\nconst internalOpen = ref<boolean>(\n  props.open !== null ? (props.open as boolean) : props.defaultOpen\n)\n\n// Sync external open -> internal (v-model controlled mode)\nwatch(() => props.open, (v) => {\n  if (v !== null && typeof v === 'boolean' && v !== internalOpen.value) {\n    internalOpen.value = v\n  }\n})\n\nfunction onUpdateOpen(v: boolean) {\n  if (internalOpen.value === v) return\n  internalOpen.value = v\n  emit('update:open', v)\n  // Notify group for single-open enforcement\n  if (v && group) group.notifyOpen(id)\n}\n\nconst slotFns = computed(() => collapsibleVariants({}))\n\nuseCollapsibleProvide({ slotFns, isOpen: internalOpen })\n\nonMounted(() => {\n  if (group) group.register({ id, open: internalOpen })\n})\n\nonBeforeUnmount(() => {\n  if (group) group.unregister(id)\n})\n</script>\n\n<template>\n  <CollapsibleRoot\n    :open=\"isControlled ? internalOpen : undefined\"\n    :default-open=\"!isControlled ? props.defaultOpen : undefined\"\n    :disabled=\"props.disabled\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:open=\"onUpdateOpen\"\n  >\n    <slot />\n  </CollapsibleRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Collapsible.js","names":[],"sources":["../../../src/components/collapsible/Collapsible.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onBeforeUnmount, ref, useId, watch } from 'vue'\nimport { CollapsibleRoot } from 'reka-ui'\nimport { collapsibleVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCollapsibleProvide } from './collapsible.context'\nimport { injectCollapsibleGroup } from './collapsible-group.context'\n\n// NOTE: `open` is typed as `boolean | null` (not boolean) to avoid Vue's boolean\n// prop casting: absent boolean props are cast to `false`, making it impossible to\n// distinguish \"not provided\" from \"explicitly false\". Using null as the\n// \"not controlled\" sentinel preserves that distinction at runtime.\nconst props = withDefaults(defineProps<{\n  open?: boolean | null\n  defaultOpen?: boolean\n  disabled?: boolean\n  unmountOnHide?: boolean\n  as?: string\n  asChild?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n}>(), {\n  open: null,\n  defaultOpen: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean]\n}>()\n\n// Check if we're inside a CollapsibleGroup — if so, we need controlled mode so\n// the group can externally close this Collapsible by setting internalOpen.value.\nconst group = injectCollapsibleGroup()\nconst id = useId()\n\n// Controlled mode when: (a) parent provides v-model:open, OR (b) inside a group.\n// In both cases, internalOpen drives Reka's open prop.\nconst isControlled = computed(() => props.open !== null || group !== null)\n\n// Mirror of the open state — updated when Reka fires @update:open.\n// Initialized from: controlled `open` prop if set, else `defaultOpen`.\nconst internalOpen = ref<boolean>(\n  props.open !== null ? (props.open as boolean) : props.defaultOpen\n)\n\n// Sync external open -> internal (v-model controlled mode)\nwatch(() => props.open, (v) => {\n  if (v !== null && typeof v === 'boolean' && v !== internalOpen.value) {\n    internalOpen.value = v\n  }\n})\n\nfunction onUpdateOpen(v: boolean) {\n  if (internalOpen.value === v) return\n  internalOpen.value = v\n  emit('update:open', v)\n  // Notify group for single-open enforcement\n  if (v && group) group.notifyOpen(id)\n}\n\nconst slotFns = computed(() => collapsibleVariants({}))\n\nuseCollapsibleProvide({ slotFns, isOpen: internalOpen })\n\nonMounted(() => {\n  if (group) group.register({ id, open: internalOpen })\n})\n\nonBeforeUnmount(() => {\n  if (group) group.unregister(id)\n})\n</script>\n\n<template>\n  <CollapsibleRoot\n    :open=\"isControlled ? internalOpen : undefined\"\n    :default-open=\"!isControlled ? props.defaultOpen : undefined\"\n    :disabled=\"props.disabled\"\n    :unmount-on-hide=\"props.unmountOnHide\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:open=\"onUpdateOpen\"\n  >\n    <slot />\n  </CollapsibleRoot>\n</template>\n"],"mappings":""}

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

@@ -20,6 +20,9 @@ var Collapsible_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			type: Boolean,
 			default: false
 		},
+		unmountOnHide: { type: Boolean },
+		as: {},
+		asChild: { type: Boolean },
 		class: { type: [
 			String,
 			Boolean,
@@ -65,6 +68,9 @@ var Collapsible_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				open: isControlled.value ? internalOpen.value : void 0,
 				"default-open": !isControlled.value ? props.defaultOpen : void 0,
 				disabled: props.disabled,
+				"unmount-on-hide": props.unmountOnHide,
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"onUpdate:open": onUpdateOpen
 			}, {
@@ -74,6 +80,9 @@ var Collapsible_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				"open",
 				"default-open",
 				"disabled",
+				"unmount-on-hide",
+				"as",
+				"as-child",
 				"class"
 			]);
 		};

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

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/Collapsible.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onBeforeUnmount, ref, useId, watch } from 'vue'\nimport { CollapsibleRoot } from 'reka-ui'\nimport { collapsibleVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCollapsibleProvide } from './collapsible.context'\nimport { injectCollapsibleGroup } from './collapsible-group.context'\n\n// NOTE: `open` is typed as `boolean | null` (not boolean) to avoid Vue's boolean\n// prop casting: absent boolean props are cast to `false`, making it impossible to\n// distinguish \"not provided\" from \"explicitly false\". Using null as the\n// \"not controlled\" sentinel preserves that distinction at runtime.\nconst props = withDefaults(defineProps<{\n  open?: boolean | null\n  defaultOpen?: boolean\n  disabled?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n}>(), {\n  open: null,\n  defaultOpen: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean]\n}>()\n\n// Check if we're inside a CollapsibleGroup — if so, we need controlled mode so\n// the group can externally close this Collapsible by setting internalOpen.value.\nconst group = injectCollapsibleGroup()\nconst id = useId()\n\n// Controlled mode when: (a) parent provides v-model:open, OR (b) inside a group.\n// In both cases, internalOpen drives Reka's open prop.\nconst isControlled = computed(() => props.open !== null || group !== null)\n\n// Mirror of the open state — updated when Reka fires @update:open.\n// Initialized from: controlled `open` prop if set, else `defaultOpen`.\nconst internalOpen = ref<boolean>(\n  props.open !== null ? (props.open as boolean) : props.defaultOpen\n)\n\n// Sync external open -> internal (v-model controlled mode)\nwatch(() => props.open, (v) => {\n  if (v !== null && typeof v === 'boolean' && v !== internalOpen.value) {\n    internalOpen.value = v\n  }\n})\n\nfunction onUpdateOpen(v: boolean) {\n  if (internalOpen.value === v) return\n  internalOpen.value = v\n  emit('update:open', v)\n  // Notify group for single-open enforcement\n  if (v && group) group.notifyOpen(id)\n}\n\nconst slotFns = computed(() => collapsibleVariants({}))\n\nuseCollapsibleProvide({ slotFns, isOpen: internalOpen })\n\nonMounted(() => {\n  if (group) group.register({ id, open: internalOpen })\n})\n\nonBeforeUnmount(() => {\n  if (group) group.unregister(id)\n})\n</script>\n\n<template>\n  <CollapsibleRoot\n    :open=\"isControlled ? internalOpen : undefined\"\n    :default-open=\"!isControlled ? props.defaultOpen : undefined\"\n    :disabled=\"props.disabled\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:open=\"onUpdateOpen\"\n  >\n    <slot />\n  </CollapsibleRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EAed,MAAM,OAAO;EAMb,MAAM,QAAQ,wBAAuB;EACrC,MAAM,KAAK,OAAM;EAIjB,MAAM,eAAe,eAAe,MAAM,SAAS,QAAQ,UAAU,KAAI;EAIzE,MAAM,eAAe,IACnB,MAAM,SAAS,OAAQ,MAAM,OAAmB,MAAM,YACxD;AAGA,cAAY,MAAM,OAAO,MAAM;AAC7B,OAAI,MAAM,QAAQ,OAAO,MAAM,aAAa,MAAM,aAAa,MAC7D,cAAa,QAAQ;IAExB;EAED,SAAS,aAAa,GAAY;AAChC,OAAI,aAAa,UAAU,EAAG;AAC9B,gBAAa,QAAQ;AACrB,QAAK,eAAe,EAAC;AAErB,OAAI,KAAK,MAAO,OAAM,WAAW,GAAE;;EAGrC,MAAM,UAAU,eAAe,oBAAoB,EAAE,CAAC,CAAA;AAEtD,wBAAsB;GAAE;GAAS,QAAQ;GAAc,CAAA;AAEvD,kBAAgB;AACd,OAAI,MAAO,OAAM,SAAS;IAAE;IAAI,MAAM;IAAc,CAAA;IACrD;AAED,wBAAsB;AACpB,OAAI,MAAO,OAAM,WAAW,GAAE;IAC/B;;uBAIC,YAQkB,MAAA,gBAAA,EAAA;IAPf,MAAM,aAAA,QAAe,aAAA,QAAe,KAAA;IACpC,gBAAY,CAAG,aAAA,QAAe,MAAM,cAAc,KAAA;IAClD,UAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,iBAAa;;2BAEN,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"Collapsible.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/Collapsible.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onBeforeUnmount, ref, useId, watch } from 'vue'\nimport { CollapsibleRoot } from 'reka-ui'\nimport { collapsibleVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCollapsibleProvide } from './collapsible.context'\nimport { injectCollapsibleGroup } from './collapsible-group.context'\n\n// NOTE: `open` is typed as `boolean | null` (not boolean) to avoid Vue's boolean\n// prop casting: absent boolean props are cast to `false`, making it impossible to\n// distinguish \"not provided\" from \"explicitly false\". Using null as the\n// \"not controlled\" sentinel preserves that distinction at runtime.\nconst props = withDefaults(defineProps<{\n  open?: boolean | null\n  defaultOpen?: boolean\n  disabled?: boolean\n  unmountOnHide?: boolean\n  as?: string\n  asChild?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n}>(), {\n  open: null,\n  defaultOpen: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean]\n}>()\n\n// Check if we're inside a CollapsibleGroup — if so, we need controlled mode so\n// the group can externally close this Collapsible by setting internalOpen.value.\nconst group = injectCollapsibleGroup()\nconst id = useId()\n\n// Controlled mode when: (a) parent provides v-model:open, OR (b) inside a group.\n// In both cases, internalOpen drives Reka's open prop.\nconst isControlled = computed(() => props.open !== null || group !== null)\n\n// Mirror of the open state — updated when Reka fires @update:open.\n// Initialized from: controlled `open` prop if set, else `defaultOpen`.\nconst internalOpen = ref<boolean>(\n  props.open !== null ? (props.open as boolean) : props.defaultOpen\n)\n\n// Sync external open -> internal (v-model controlled mode)\nwatch(() => props.open, (v) => {\n  if (v !== null && typeof v === 'boolean' && v !== internalOpen.value) {\n    internalOpen.value = v\n  }\n})\n\nfunction onUpdateOpen(v: boolean) {\n  if (internalOpen.value === v) return\n  internalOpen.value = v\n  emit('update:open', v)\n  // Notify group for single-open enforcement\n  if (v && group) group.notifyOpen(id)\n}\n\nconst slotFns = computed(() => collapsibleVariants({}))\n\nuseCollapsibleProvide({ slotFns, isOpen: internalOpen })\n\nonMounted(() => {\n  if (group) group.register({ id, open: internalOpen })\n})\n\nonBeforeUnmount(() => {\n  if (group) group.unregister(id)\n})\n</script>\n\n<template>\n  <CollapsibleRoot\n    :open=\"isControlled ? internalOpen : undefined\"\n    :default-open=\"!isControlled ? props.defaultOpen : undefined\"\n    :disabled=\"props.disabled\"\n    :unmount-on-hide=\"props.unmountOnHide\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:open=\"onUpdateOpen\"\n  >\n    <slot />\n  </CollapsibleRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAMb,MAAM,QAAQ,wBAAuB;EACrC,MAAM,KAAK,OAAM;EAIjB,MAAM,eAAe,eAAe,MAAM,SAAS,QAAQ,UAAU,KAAI;EAIzE,MAAM,eAAe,IACnB,MAAM,SAAS,OAAQ,MAAM,OAAmB,MAAM,YACxD;AAGA,cAAY,MAAM,OAAO,MAAM;AAC7B,OAAI,MAAM,QAAQ,OAAO,MAAM,aAAa,MAAM,aAAa,MAC7D,cAAa,QAAQ;IAExB;EAED,SAAS,aAAa,GAAY;AAChC,OAAI,aAAa,UAAU,EAAG;AAC9B,gBAAa,QAAQ;AACrB,QAAK,eAAe,EAAC;AAErB,OAAI,KAAK,MAAO,OAAM,WAAW,GAAE;;EAGrC,MAAM,UAAU,eAAe,oBAAoB,EAAE,CAAC,CAAA;AAEtD,wBAAsB;GAAE;GAAS,QAAQ;GAAc,CAAA;AAEvD,kBAAgB;AACd,OAAI,MAAO,OAAM,SAAS;IAAE;IAAI,MAAM;IAAc,CAAA;IACrD;AAED,wBAAsB;AACpB,OAAI,MAAO,OAAM,WAAW,GAAE;IAC/B;;uBAIC,YAWkB,MAAA,gBAAA,EAAA;IAVf,MAAM,aAAA,QAAe,aAAA,QAAe,KAAA;IACpC,gBAAY,CAAG,aAAA,QAAe,MAAM,cAAc,KAAA;IAClD,UAAU,MAAM;IAChB,mBAAiB,MAAM;IACvB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,iBAAa;;2BAEN,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContent.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleContent } from 'reka-ui'\nimport { useCollapsibleInject } from './collapsible.context'\nimport { motion, AnimatePresence } from '../../utils/motion'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  /** Override the default class for the root element. */\n  class?: ClassValue\n  /** Override classes for individual slots. */\n  classNames?: Partial<{\n    body: ClassValue\n    bodyInner: ClassValue\n  }>\n}>()\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleContent\n    :force-mount=\"true\"\n    :class=\"props.class || undefined\"\n  >\n    <AnimatePresence>\n      <motion.div\n        v-if=\"ctx.isOpen.value\"\n        key=\"panel\"\n        :initial=\"{ height: 0, opacity: 0 }\"\n        :animate=\"{ height: 'auto', opacity: 1 }\"\n        :exit=\"{ height: 0, opacity: 0 }\"\n        :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        style=\"overflow: hidden;\"\n        :class=\"composeClassName(ctx.slotFns.value.body(), props.classNames?.body)\"\n      >\n        <div :class=\"composeClassName(ctx.slotFns.value.bodyInner(), props.classNames?.bodyInner)\">\n          <slot />\n        </div>\n      </motion.div>\n    </AnimatePresence>\n  </CollapsibleContent>\n</template>\n"],"mappings":""}
+{"version":3,"file":"CollapsibleContent.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleContent } from 'reka-ui'\nimport { useCollapsibleInject } from './collapsible.context'\nimport { motion, AnimatePresence } from '../../utils/motion'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  /** Override the default class for the root element. */\n  class?: ClassValue\n  /** Override classes for individual slots. */\n  classNames?: Partial<{\n    body: ClassValue\n    bodyInner: ClassValue\n  }>\n  /** Render as a different element type. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>()\n\nconst emit = defineEmits<{\n  'content-found': []\n}>()\n\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleContent\n    :force-mount=\"true\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"props.class || undefined\"\n    @content-found=\"emit('content-found')\"\n  >\n    <AnimatePresence>\n      <motion.div\n        v-if=\"ctx.isOpen.value\"\n        key=\"panel\"\n        :initial=\"{ height: 0, opacity: 0 }\"\n        :animate=\"{ height: 'auto', opacity: 1 }\"\n        :exit=\"{ height: 0, opacity: 0 }\"\n        :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        style=\"overflow: hidden;\"\n        :class=\"composeClassName(ctx.slotFns.value.body(), props.classNames?.body)\"\n      >\n        <div :class=\"composeClassName(ctx.slotFns.value.bodyInner(), props.classNames?.bodyInner)\">\n          <slot />\n        </div>\n      </motion.div>\n    </AnimatePresence>\n  </CollapsibleContent>\n</template>\n"],"mappings":""}

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

@@ -15,15 +15,22 @@ var CollapsibleContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 			Object,
 			Array
 		] },
-		classNames: {}
+		classNames: {},
+		as: {},
+		asChild: { type: Boolean }
 	},
-	setup(__props) {
+	emits: ["content-found"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const ctx = useCollapsibleInject();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(CollapsibleContent), {
 				"force-mount": true,
-				class: normalizeClass(props.class || void 0)
+				as: props.as,
+				"as-child": props.asChild,
+				class: normalizeClass(props.class || void 0),
+				onContentFound: _cache[0] || (_cache[0] = ($event) => emit("content-found"))
 			}, {
 				default: withCtx(() => [createVNode(unref(AnimatePresence_default), null, {
 					default: withCtx(() => [unref(ctx).isOpen.value ? (openBlock(), createBlock(unref(motion).div, {
@@ -53,7 +60,11 @@ var CollapsibleContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 					_: 3
 				})]),
 				_: 3
-			}, 8, ["class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleContent } from 'reka-ui'\nimport { useCollapsibleInject } from './collapsible.context'\nimport { motion, AnimatePresence } from '../../utils/motion'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  /** Override the default class for the root element. */\n  class?: ClassValue\n  /** Override classes for individual slots. */\n  classNames?: Partial<{\n    body: ClassValue\n    bodyInner: ClassValue\n  }>\n}>()\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleContent\n    :force-mount=\"true\"\n    :class=\"props.class || undefined\"\n  >\n    <AnimatePresence>\n      <motion.div\n        v-if=\"ctx.isOpen.value\"\n        key=\"panel\"\n        :initial=\"{ height: 0, opacity: 0 }\"\n        :animate=\"{ height: 'auto', opacity: 1 }\"\n        :exit=\"{ height: 0, opacity: 0 }\"\n        :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        style=\"overflow: hidden;\"\n        :class=\"composeClassName(ctx.slotFns.value.body(), props.classNames?.body)\"\n      >\n        <div :class=\"composeClassName(ctx.slotFns.value.bodyInner(), props.classNames?.bodyInner)\">\n          <slot />\n        </div>\n      </motion.div>\n    </AnimatePresence>\n  </CollapsibleContent>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EASd,MAAM,MAAM,sBAAqB;;uBAI/B,YAoBqB,MAAA,mBAAA,EAAA;IAnBlB,eAAa;IACb,OAAK,eAAE,MAAM,SAAS,KAAA,EAAS;;2BAiBd,CAflB,YAekB,MAAA,wBAAA,EAAA,MAAA;4BADH,CAZL,MAAA,IAAG,CAAC,OAAO,SAAA,WAAA,EADnB,YAaa,MAAA,OAAA,CAAA,KAAA;MAXX,KAAI;MACH,SAAS;OAAA,QAAA;OAAA,SAAA;OAAyB;MAClC,SAAS;OAAA,QAAA;OAAA,SAAA;OAA8B;MACvC,MAAM;OAAA,QAAA;OAAA,SAAA;OAAyB;MAC/B,YAAY;OAAA,UAAA;OAAA,MAAA;OAAkC;MAC/C,OAAA,EAAA,YAAA,UAAyB;MACxB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA;;6BAInE,CAFN,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA,EAAA,EAAA,CACtF,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"CollapsibleContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleContent } from 'reka-ui'\nimport { useCollapsibleInject } from './collapsible.context'\nimport { motion, AnimatePresence } from '../../utils/motion'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n  /** Override the default class for the root element. */\n  class?: ClassValue\n  /** Override classes for individual slots. */\n  classNames?: Partial<{\n    body: ClassValue\n    bodyInner: ClassValue\n  }>\n  /** Render as a different element type. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>()\n\nconst emit = defineEmits<{\n  'content-found': []\n}>()\n\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleContent\n    :force-mount=\"true\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"props.class || undefined\"\n    @content-found=\"emit('content-found')\"\n  >\n    <AnimatePresence>\n      <motion.div\n        v-if=\"ctx.isOpen.value\"\n        key=\"panel\"\n        :initial=\"{ height: 0, opacity: 0 }\"\n        :animate=\"{ height: 'auto', opacity: 1 }\"\n        :exit=\"{ height: 0, opacity: 0 }\"\n        :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        style=\"overflow: hidden;\"\n        :class=\"composeClassName(ctx.slotFns.value.body(), props.classNames?.body)\"\n      >\n        <div :class=\"composeClassName(ctx.slotFns.value.bodyInner(), props.classNames?.bodyInner)\">\n          <slot />\n        </div>\n      </motion.div>\n    </AnimatePresence>\n  </CollapsibleContent>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAcd,MAAM,OAAO;EAIb,MAAM,MAAM,sBAAqB;;uBAI/B,YAuBqB,MAAA,mBAAA,EAAA;IAtBlB,eAAa;IACb,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAM,SAAS,KAAA,EAAS;IAC/B,gBAAa,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,gBAAA;;2BAiBF,CAflB,YAekB,MAAA,wBAAA,EAAA,MAAA;4BADH,CAZL,MAAA,IAAG,CAAC,OAAO,SAAA,WAAA,EADnB,YAaa,MAAA,OAAA,CAAA,KAAA;MAXX,KAAI;MACH,SAAS;OAAA,QAAA;OAAA,SAAA;OAAyB;MAClC,SAAS;OAAA,QAAA;OAAA,SAAA;OAA8B;MACvC,MAAM;OAAA,QAAA;OAAA,SAAA;OAAyB;MAC/B,YAAY;OAAA,UAAA;OAAA,MAAA;OAAkC;MAC/C,OAAA,EAAA,YAAA,UAAyB;MACxB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA;;6BAInE,CAFN,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,IAAG,CAAC,QAAQ,MAAM,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA,EAAA,EAAA,CACtF,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTrigger.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleTrigger } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCollapsibleInject } from './collapsible.context'\n\nconst props = defineProps<{\n  class?: ClassValue\n  /** Classnames for individual slots */\n  classNames?: Partial<{\n    trigger: ClassValue\n    indicator: ClassValue\n  }>\n}>()\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleTrigger :class=\"composeClassName(ctx.slotFns.value.trigger(), props.class, props.classNames?.trigger)\">\n    <slot />\n    <span\n      :class=\"composeClassName(ctx.slotFns.value.indicator(), props.classNames?.indicator)\"\n      :data-state=\"ctx.isOpen.value ? 'open' : 'closed'\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <polyline points=\"6 9 12 15 18 9\" />\n      </svg>\n    </span>\n  </CollapsibleTrigger>\n</template>\n"],"mappings":""}
+{"version":3,"file":"CollapsibleTrigger.js","names":[],"sources":["../../../src/components/collapsible/CollapsibleTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapsibleTrigger } from 'reka-ui'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useCollapsibleInject } from './collapsible.context'\n\nconst props = defineProps<{\n  class?: ClassValue\n  /** Classnames for individual slots */\n  classNames?: Partial<{\n    trigger: ClassValue\n    indicator: ClassValue\n  }>\n  /** Render as a different element type. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>()\nconst ctx = useCollapsibleInject()\n</script>\n\n<template>\n  <CollapsibleTrigger :as=\"props.as\" :as-child=\"props.asChild\" :class=\"composeClassName(ctx.slotFns.value.trigger(), props.class, props.classNames?.trigger)\">\n    <slot />\n    <span\n      :class=\"composeClassName(ctx.slotFns.value.indicator(), props.classNames?.indicator)\"\n      :data-state=\"ctx.isOpen.value ? 'open' : 'closed'\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <polyline points=\"6 9 12 15 18 9\" />\n      </svg>\n    </span>\n  </CollapsibleTrigger>\n</template>\n"],"mappings":""}

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

@@ -14,13 +14,19 @@ var CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 			Object,
 			Array
 		] },
-		classNames: {}
+		classNames: {},
+		as: {},
+		asChild: { type: Boolean }
 	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useCollapsibleInject();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(CollapsibleTrigger), { class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.trigger(), props.class, props.classNames?.trigger)) }, {
+			return openBlock(), createBlock(unref(CollapsibleTrigger), {
+				as: props.as,
+				"as-child": props.asChild,
+				class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.trigger(), props.class, props.classNames?.trigger))
+			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createElementVNode("span", {
 					class: normalizeClass(unref(composeClassName)(unref(ctx).slotFns.value.indicator(), props.classNames?.indicator)),
 					"data-state": unref(ctx).isOpen.value ? "open" : "closed",
@@ -39,7 +45,11 @@ var CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 					focusable: "false"
 				}, [createElementVNode("polyline", { points: "6 9 12 15 18 9" })], -1)])], 10, _hoisted_1)]),
 				_: 3
-			}, 8, ["class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

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

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

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

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

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

@@ -19,9 +19,26 @@ var ColorArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		},
 		showDots: { default: false },
 		class: {},
-		thumbClass: {}
+		thumbClass: {},
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		xName: {},
+		yName: {}
 	},
-	emits: ["update:modelValue", "update:color"],
+	emits: [
+		"update:modelValue",
+		"update:color",
+		"change",
+		"change-end"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -58,8 +75,16 @@ var ColorArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				"y-channel": __props.yChannel,
 				"color-space": __props.colorSpace,
 				disabled: __props.disabled,
+				as: props.as,
+				"as-child": props.asChild,
+				name: props.name,
+				required: props.required,
+				"x-name": props.xName,
+				"y-name": props.yName,
 				class: normalizeClass(unref(composeClassName)(styles.value.base(), props.class)),
-				"onUpdate:color": onColorUpdate
+				"onUpdate:color": onColorUpdate,
+				onChange: _cache[0] || (_cache[0] = (v) => emit("change", v)),
+				onChangeEnd: _cache[1] || (_cache[1] = (v) => emit("change-end", v))
 			}, {
 				default: withCtx(() => [createVNode(unref(ColorAreaArea), { style: normalizeStyle(areaBgStyle.value) }, {
 					default: withCtx(() => [createVNode(unref(ColorAreaThumb), { class: normalizeClass(unref(composeClassName)(styles.value.thumb(), __props.thumbClass)) }, null, 8, ["class"])]),
@@ -72,6 +97,12 @@ var ColorArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				"y-channel",
 				"color-space",
 				"disabled",
+				"as",
+				"as-child",
+				"name",
+				"required",
+				"x-name",
+				"y-name",
 				"class"
 			]);
 		};

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

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