reka-ui 2.3.0 → 2.3.2

package/dist/PinInput/PinInputRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinInputRoot.cjs","sources":["../../src/PinInput/PinInputRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, FormFieldProps } from '@/shared/types'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\nimport VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'\n\nexport type PinInputType = 'text' | 'number'\n\n// Using this type to avoid mixed arrays (string | number)[].\nexport type PinInputValue<Type extends PinInputType = 'text'> = Type extends 'number' ? number[] : string[]\n\nexport type PinInputRootEmits<Type extends PinInputType = 'text'> = {\n  'update:modelValue': [value: PinInputValue<Type>]\n  'complete': [value: PinInputValue<Type>]\n}\n\nexport interface PinInputRootProps<Type extends PinInputType = 'text'> extends PrimitiveProps, FormFieldProps {\n  /** The controlled checked state of the pin input. Can be binded as `v-model`. */\n  modelValue?: PinInputValue<Type> | null\n  /** The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state. */\n  defaultValue?: PinInputValue<Type>[]\n  /** The placeholder character to use for empty pin-inputs. */\n  placeholder?: string\n  /** When `true`, pin inputs will be treated as password. */\n  mask?: boolean\n  /** When `true`, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field. */\n  otp?: boolean\n  /** Input type for the inputs. */\n  type?: Type\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** When `true`, prevents the user from interacting with the pin input */\n  disabled?: boolean\n  /** Id of the element */\n  id?: string\n}\n\nexport interface PinInputRootContext<Type extends PinInputType = 'text'> {\n  modelValue: Ref<PinInputValue<Type>>\n  currentModelValue: ComputedRef<PinInputValue<Type>>\n  mask: Ref<boolean>\n  otp: Ref<boolean>\n  placeholder: Ref<string>\n  type: Ref<PinInputType>\n  dir: Ref<Direction>\n  disabled: Ref<boolean>\n  isCompleted: ComputedRef<boolean>\n  inputElements?: Ref<Set<HTMLInputElement>>\n  onInputElementChange: (el: HTMLInputElement) => void\n}\n\nexport const [injectPinInputRootContext, providePinInputRootContext]\n  = createContext<PinInputRootContext<PinInputType>>('PinInputRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"Type extends PinInputType = 'text'\">\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<PinInputRootProps<Type>>(), {\n  placeholder: '',\n  type: 'text' as any,\n})\nconst emits = defineEmits<PinInputRootEmits<Type>>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { mask, otp, placeholder, type, disabled, dir: propDir } = toRefs(props)\nconst { forwardRef } = useForwardExpose()\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? [] as any,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<PinInputValue<Type>>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst inputElements = ref<Set<HTMLInputElement>>(new Set())\nfunction onInputElementChange(el: HTMLInputElement) {\n  inputElements.value.add(el)\n}\n\nconst isCompleted = computed(() => {\n  const modelValues = currentModelValue.value.filter(i => !!i)\n  return modelValues.length === inputElements.value.size\n})\n\nwatch(modelValue, () => {\n  if (isCompleted.value)\n    emits('complete', modelValue.value)\n}, { deep: true })\n\nprovidePinInputRootContext({\n  modelValue,\n  currentModelValue: currentModelValue as ComputedRef<PinInputValue<Type>>,\n  mask,\n  otp,\n  placeholder,\n  type,\n  dir,\n  disabled,\n  isCompleted,\n  inputElements,\n  onInputElementChange,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n    :dir=\"dir\"\n    :data-complete=\"isCompleted ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <slot :model-value=\"modelValue\" />\n\n    <VisuallyHiddenInput\n      :id=\"id\"\n      as=\"input\"\n      feature=\"focusable\"\n      tabindex=\"-1\"\n      :value=\"currentModelValue.join('')\"\n      :name=\"name ?? ''\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      @focus=\"Array.from(inputElements)?.[0]?.focus()\"\n    />\n  </Primitive>\n</template>\n"],"names":["createContext","toRefs","useForwardExpose","useDirection","useVModel","computed","ref","watch"],"mappings":";;;;;;;;;;AAqDO,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/DA,mCAAiD,cAAc;;;;;;;;;;;;;;;;;;;;;;;AAWnE,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAM,MAAA,EAAE,IAAM,EAAA,GAAA,EAAK,WAAa,EAAA,IAAA,EAAM,UAAU,GAAK,EAAA,OAAA,EAAY,GAAAC,UAAA,CAAO,KAAK,CAAA;AAC7E,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;AACxC,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAEhC,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,KAAM,CAAA,YAAA,IAAgB,EAAC;AAAA,MACrC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,iBAAoB,GAAAC,YAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,UAAW,CAAA,KAAK,CAAI,GAAA,CAAC,GAAG,UAAA,CAAW,KAAK,CAAA,GAAI,EAAE,CAAA;AAErG,IAAA,MAAM,aAAgB,GAAAC,OAAA,iBAA+B,IAAA,GAAA,EAAK,CAAA;AAC1D,IAAA,SAAS,qBAAqB,EAAsB,EAAA;AAClD,MAAc,aAAA,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAAA;AAG5B,IAAM,MAAA,WAAA,GAAcD,aAAS,MAAM;AACjC,MAAA,MAAM,cAAc,iBAAkB,CAAA,KAAA,CAAM,OAAO,CAAK,CAAA,KAAA,CAAC,CAAC,CAAC,CAAA;AAC3D,MAAO,OAAA,WAAA,CAAY,MAAW,KAAA,aAAA,CAAc,KAAM,CAAA,IAAA;AAAA,KACnD,CAAA;AAED,IAAAE,SAAA,CAAM,YAAY,MAAM;AACtB,MAAA,IAAI,WAAY,CAAA,KAAA;AACd,QAAM,KAAA,CAAA,UAAA,EAAY,WAAW,KAAK,CAAA;AAAA,KACnC,EAAA,EAAE,IAAM,EAAA,IAAA,EAAM,CAAA;AAEjB,IAA2B,0BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PinInputRoot.cjs","sources":["../../src/PinInput/PinInputRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, FormFieldProps } from '@/shared/types'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\nimport VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'\n\nexport type PinInputType = 'text' | 'number'\n\n// Using this type to avoid mixed arrays (string | number)[].\nexport type PinInputValue<Type extends PinInputType = 'text'> = Type extends 'number' ? number[] : string[]\n\nexport type PinInputRootEmits<Type extends PinInputType = 'text'> = {\n  'update:modelValue': [value: PinInputValue<Type>]\n  'complete': [value: PinInputValue<Type>]\n}\n\nexport interface PinInputRootProps<Type extends PinInputType = 'text'> extends PrimitiveProps, FormFieldProps {\n  /** The controlled checked state of the pin input. Can be binded as `v-model`. */\n  modelValue?: PinInputValue<Type> | null\n  /** The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state. */\n  defaultValue?: PinInputValue<Type>[]\n  /** The placeholder character to use for empty pin-inputs. */\n  placeholder?: string\n  /** When `true`, pin inputs will be treated as password. */\n  mask?: boolean\n  /** When `true`, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field. */\n  otp?: boolean\n  /** Input type for the inputs. */\n  type?: Type\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** When `true`, prevents the user from interacting with the pin input */\n  disabled?: boolean\n  /** Id of the element */\n  id?: string\n}\n\nexport interface PinInputRootContext<Type extends PinInputType = 'text'> {\n  modelValue: Ref<PinInputValue<Type>>\n  currentModelValue: ComputedRef<PinInputValue<Type>>\n  mask: Ref<boolean>\n  otp: Ref<boolean>\n  placeholder: Ref<string>\n  type: Ref<PinInputType>\n  dir: Ref<Direction>\n  disabled: Ref<boolean>\n  isCompleted: ComputedRef<boolean>\n  inputElements?: Ref<Set<HTMLInputElement>>\n  onInputElementChange: (el: HTMLInputElement) => void\n  isNumericMode: ComputedRef<boolean>\n}\n\nexport const [injectPinInputRootContext, providePinInputRootContext]\n  = createContext<PinInputRootContext<PinInputType>>('PinInputRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"Type extends PinInputType = 'text'\">\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<PinInputRootProps<Type>>(), {\n  placeholder: '',\n  type: 'text' as any,\n})\nconst emits = defineEmits<PinInputRootEmits<Type>>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { mask, otp, placeholder, type, disabled, dir: propDir } = toRefs(props)\nconst { forwardRef } = useForwardExpose()\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? [] as any,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<PinInputValue<Type>>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst inputElements = ref<Set<HTMLInputElement>>(new Set())\nfunction onInputElementChange(el: HTMLInputElement) {\n  inputElements.value.add(el)\n}\n\nconst isNumericMode = computed(() => props.type === 'number')\nconst isCompleted = computed(() => {\n  const modelValues = currentModelValue.value.filter(i => !!i || (isNumericMode.value && i === 0))\n  return modelValues.length === inputElements.value.size\n})\n\nwatch(modelValue, () => {\n  if (isCompleted.value)\n    emits('complete', modelValue.value)\n}, { deep: true })\n\nprovidePinInputRootContext({\n  modelValue,\n  currentModelValue: currentModelValue as ComputedRef<PinInputValue<Type>>,\n  mask,\n  otp,\n  placeholder,\n  type,\n  dir,\n  disabled,\n  isCompleted,\n  inputElements,\n  onInputElementChange,\n  isNumericMode,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n    :dir=\"dir\"\n    :data-complete=\"isCompleted ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <slot :model-value=\"modelValue\" />\n\n    <VisuallyHiddenInput\n      :id=\"id\"\n      as=\"input\"\n      feature=\"focusable\"\n      tabindex=\"-1\"\n      :value=\"currentModelValue.join('')\"\n      :name=\"name ?? ''\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      @focus=\"Array.from(inputElements)?.[0]?.focus()\"\n    />\n  </Primitive>\n</template>\n"],"names":["createContext","toRefs","useForwardExpose","useDirection","useVModel","computed","ref","watch"],"mappings":";;;;;;;;;;AAsDO,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/DA,mCAAiD,cAAc;;;;;;;;;;;;;;;;;;;;;;;AAWnE,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAM,MAAA,EAAE,IAAM,EAAA,GAAA,EAAK,WAAa,EAAA,IAAA,EAAM,UAAU,GAAK,EAAA,OAAA,EAAY,GAAAC,UAAA,CAAO,KAAK,CAAA;AAC7E,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;AACxC,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAEhC,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,KAAM,CAAA,YAAA,IAAgB,EAAC;AAAA,MACrC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,iBAAoB,GAAAC,YAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,UAAW,CAAA,KAAK,CAAI,GAAA,CAAC,GAAG,UAAA,CAAW,KAAK,CAAA,GAAI,EAAE,CAAA;AAErG,IAAA,MAAM,aAAgB,GAAAC,OAAA,iBAA+B,IAAA,GAAA,EAAK,CAAA;AAC1D,IAAA,SAAS,qBAAqB,EAAsB,EAAA;AAClD,MAAc,aAAA,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAAA;AAG5B,IAAA,MAAM,aAAgB,GAAAD,YAAA,CAAS,MAAM,KAAA,CAAM,SAAS,QAAQ,CAAA;AAC5D,IAAM,MAAA,WAAA,GAAcA,aAAS,MAAM;AACjC,MAAM,MAAA,WAAA,GAAc,iBAAkB,CAAA,KAAA,CAAM,MAAO,CAAA,CAAA,CAAA,KAAK,CAAC,CAAC,CAAM,IAAA,aAAA,CAAc,KAAS,IAAA,CAAA,KAAM,CAAE,CAAA;AAC/F,MAAO,OAAA,WAAA,CAAY,MAAW,KAAA,aAAA,CAAc,KAAM,CAAA,IAAA;AAAA,KACnD,CAAA;AAED,IAAAE,SAAA,CAAM,YAAY,MAAM;AACtB,MAAA,IAAI,WAAY,CAAA,KAAA;AACd,QAAM,KAAA,CAAA,UAAA,EAAY,WAAW,KAAK,CAAA;AAAA,KACnC,EAAA,EAAE,IAAM,EAAA,IAAA,EAAM,CAAA;AAEjB,IAA2B,0BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,oBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PinInput/PinInputRoot.js

@@ -43,8 +43,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onInputElementChange(el) {
       inputElements.value.add(el);
     }
+    const isNumericMode = computed(() => props.type === "number");
     const isCompleted = computed(() => {
-      const modelValues = currentModelValue.value.filter((i) => !!i);
+      const modelValues = currentModelValue.value.filter((i) => !!i || isNumericMode.value && i === 0);
       return modelValues.length === inputElements.value.size;
     });
     watch(modelValue, () => {
@@ -62,7 +63,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       disabled,
       isCompleted,
       inputElements,
-      onInputElementChange
+      onInputElementChange,
+      isNumericMode
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Primitive), mergeProps(_ctx.$attrs, {

package/dist/PinInput/PinInputRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinInputRoot.js","sources":["../../src/PinInput/PinInputRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, FormFieldProps } from '@/shared/types'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\nimport VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'\n\nexport type PinInputType = 'text' | 'number'\n\n// Using this type to avoid mixed arrays (string | number)[].\nexport type PinInputValue<Type extends PinInputType = 'text'> = Type extends 'number' ? number[] : string[]\n\nexport type PinInputRootEmits<Type extends PinInputType = 'text'> = {\n  'update:modelValue': [value: PinInputValue<Type>]\n  'complete': [value: PinInputValue<Type>]\n}\n\nexport interface PinInputRootProps<Type extends PinInputType = 'text'> extends PrimitiveProps, FormFieldProps {\n  /** The controlled checked state of the pin input. Can be binded as `v-model`. */\n  modelValue?: PinInputValue<Type> | null\n  /** The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state. */\n  defaultValue?: PinInputValue<Type>[]\n  /** The placeholder character to use for empty pin-inputs. */\n  placeholder?: string\n  /** When `true`, pin inputs will be treated as password. */\n  mask?: boolean\n  /** When `true`, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field. */\n  otp?: boolean\n  /** Input type for the inputs. */\n  type?: Type\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** When `true`, prevents the user from interacting with the pin input */\n  disabled?: boolean\n  /** Id of the element */\n  id?: string\n}\n\nexport interface PinInputRootContext<Type extends PinInputType = 'text'> {\n  modelValue: Ref<PinInputValue<Type>>\n  currentModelValue: ComputedRef<PinInputValue<Type>>\n  mask: Ref<boolean>\n  otp: Ref<boolean>\n  placeholder: Ref<string>\n  type: Ref<PinInputType>\n  dir: Ref<Direction>\n  disabled: Ref<boolean>\n  isCompleted: ComputedRef<boolean>\n  inputElements?: Ref<Set<HTMLInputElement>>\n  onInputElementChange: (el: HTMLInputElement) => void\n}\n\nexport const [injectPinInputRootContext, providePinInputRootContext]\n  = createContext<PinInputRootContext<PinInputType>>('PinInputRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"Type extends PinInputType = 'text'\">\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<PinInputRootProps<Type>>(), {\n  placeholder: '',\n  type: 'text' as any,\n})\nconst emits = defineEmits<PinInputRootEmits<Type>>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { mask, otp, placeholder, type, disabled, dir: propDir } = toRefs(props)\nconst { forwardRef } = useForwardExpose()\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? [] as any,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<PinInputValue<Type>>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst inputElements = ref<Set<HTMLInputElement>>(new Set())\nfunction onInputElementChange(el: HTMLInputElement) {\n  inputElements.value.add(el)\n}\n\nconst isCompleted = computed(() => {\n  const modelValues = currentModelValue.value.filter(i => !!i)\n  return modelValues.length === inputElements.value.size\n})\n\nwatch(modelValue, () => {\n  if (isCompleted.value)\n    emits('complete', modelValue.value)\n}, { deep: true })\n\nprovidePinInputRootContext({\n  modelValue,\n  currentModelValue: currentModelValue as ComputedRef<PinInputValue<Type>>,\n  mask,\n  otp,\n  placeholder,\n  type,\n  dir,\n  disabled,\n  isCompleted,\n  inputElements,\n  onInputElementChange,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n    :dir=\"dir\"\n    :data-complete=\"isCompleted ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <slot :model-value=\"modelValue\" />\n\n    <VisuallyHiddenInput\n      :id=\"id\"\n      as=\"input\"\n      feature=\"focusable\"\n      tabindex=\"-1\"\n      :value=\"currentModelValue.join('')\"\n      :name=\"name ?? ''\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      @focus=\"Array.from(inputElements)?.[0]?.focus()\"\n    />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;AAqDO,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/D,cAAiD,cAAc;;;;;;;;;;;;;;;;;;;;;;;AAWnE,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAM,MAAA,EAAE,IAAM,EAAA,GAAA,EAAK,WAAa,EAAA,IAAA,EAAM,UAAU,GAAK,EAAA,OAAA,EAAY,GAAA,MAAA,CAAO,KAAK,CAAA;AAC7E,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AACxC,IAAM,MAAA,GAAA,GAAM,aAAa,OAAO,CAAA;AAEhC,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,KAAM,CAAA,YAAA,IAAgB,EAAC;AAAA,MACrC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,iBAAoB,GAAA,QAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,UAAW,CAAA,KAAK,CAAI,GAAA,CAAC,GAAG,UAAA,CAAW,KAAK,CAAA,GAAI,EAAE,CAAA;AAErG,IAAA,MAAM,aAAgB,GAAA,GAAA,iBAA+B,IAAA,GAAA,EAAK,CAAA;AAC1D,IAAA,SAAS,qBAAqB,EAAsB,EAAA;AAClD,MAAc,aAAA,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAAA;AAG5B,IAAM,MAAA,WAAA,GAAc,SAAS,MAAM;AACjC,MAAA,MAAM,cAAc,iBAAkB,CAAA,KAAA,CAAM,OAAO,CAAK,CAAA,KAAA,CAAC,CAAC,CAAC,CAAA;AAC3D,MAAO,OAAA,WAAA,CAAY,MAAW,KAAA,aAAA,CAAc,KAAM,CAAA,IAAA;AAAA,KACnD,CAAA;AAED,IAAA,KAAA,CAAM,YAAY,MAAM;AACtB,MAAA,IAAI,WAAY,CAAA,KAAA;AACd,QAAM,KAAA,CAAA,UAAA,EAAY,WAAW,KAAK,CAAA;AAAA,KACnC,EAAA,EAAE,IAAM,EAAA,IAAA,EAAM,CAAA;AAEjB,IAA2B,0BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PinInputRoot.js","sources":["../../src/PinInput/PinInputRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Direction, FormFieldProps } from '@/shared/types'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\nimport VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'\n\nexport type PinInputType = 'text' | 'number'\n\n// Using this type to avoid mixed arrays (string | number)[].\nexport type PinInputValue<Type extends PinInputType = 'text'> = Type extends 'number' ? number[] : string[]\n\nexport type PinInputRootEmits<Type extends PinInputType = 'text'> = {\n  'update:modelValue': [value: PinInputValue<Type>]\n  'complete': [value: PinInputValue<Type>]\n}\n\nexport interface PinInputRootProps<Type extends PinInputType = 'text'> extends PrimitiveProps, FormFieldProps {\n  /** The controlled checked state of the pin input. Can be binded as `v-model`. */\n  modelValue?: PinInputValue<Type> | null\n  /** The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state. */\n  defaultValue?: PinInputValue<Type>[]\n  /** The placeholder character to use for empty pin-inputs. */\n  placeholder?: string\n  /** When `true`, pin inputs will be treated as password. */\n  mask?: boolean\n  /** When `true`, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field. */\n  otp?: boolean\n  /** Input type for the inputs. */\n  type?: Type\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** When `true`, prevents the user from interacting with the pin input */\n  disabled?: boolean\n  /** Id of the element */\n  id?: string\n}\n\nexport interface PinInputRootContext<Type extends PinInputType = 'text'> {\n  modelValue: Ref<PinInputValue<Type>>\n  currentModelValue: ComputedRef<PinInputValue<Type>>\n  mask: Ref<boolean>\n  otp: Ref<boolean>\n  placeholder: Ref<string>\n  type: Ref<PinInputType>\n  dir: Ref<Direction>\n  disabled: Ref<boolean>\n  isCompleted: ComputedRef<boolean>\n  inputElements?: Ref<Set<HTMLInputElement>>\n  onInputElementChange: (el: HTMLInputElement) => void\n  isNumericMode: ComputedRef<boolean>\n}\n\nexport const [injectPinInputRootContext, providePinInputRootContext]\n  = createContext<PinInputRootContext<PinInputType>>('PinInputRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"Type extends PinInputType = 'text'\">\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<PinInputRootProps<Type>>(), {\n  placeholder: '',\n  type: 'text' as any,\n})\nconst emits = defineEmits<PinInputRootEmits<Type>>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { mask, otp, placeholder, type, disabled, dir: propDir } = toRefs(props)\nconst { forwardRef } = useForwardExpose()\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? [] as any,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<PinInputValue<Type>>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst inputElements = ref<Set<HTMLInputElement>>(new Set())\nfunction onInputElementChange(el: HTMLInputElement) {\n  inputElements.value.add(el)\n}\n\nconst isNumericMode = computed(() => props.type === 'number')\nconst isCompleted = computed(() => {\n  const modelValues = currentModelValue.value.filter(i => !!i || (isNumericMode.value && i === 0))\n  return modelValues.length === inputElements.value.size\n})\n\nwatch(modelValue, () => {\n  if (isCompleted.value)\n    emits('complete', modelValue.value)\n}, { deep: true })\n\nprovidePinInputRootContext({\n  modelValue,\n  currentModelValue: currentModelValue as ComputedRef<PinInputValue<Type>>,\n  mask,\n  otp,\n  placeholder,\n  type,\n  dir,\n  disabled,\n  isCompleted,\n  inputElements,\n  onInputElementChange,\n  isNumericMode,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n    :dir=\"dir\"\n    :data-complete=\"isCompleted ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <slot :model-value=\"modelValue\" />\n\n    <VisuallyHiddenInput\n      :id=\"id\"\n      as=\"input\"\n      feature=\"focusable\"\n      tabindex=\"-1\"\n      :value=\"currentModelValue.join('')\"\n      :name=\"name ?? ''\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      @focus=\"Array.from(inputElements)?.[0]?.focus()\"\n    />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;AAsDO,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/D,cAAiD,cAAc;;;;;;;;;;;;;;;;;;;;;;;AAWnE,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAM,MAAA,EAAE,IAAM,EAAA,GAAA,EAAK,WAAa,EAAA,IAAA,EAAM,UAAU,GAAK,EAAA,OAAA,EAAY,GAAA,MAAA,CAAO,KAAK,CAAA;AAC7E,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AACxC,IAAM,MAAA,GAAA,GAAM,aAAa,OAAO,CAAA;AAEhC,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,KAAM,CAAA,YAAA,IAAgB,EAAC;AAAA,MACrC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,iBAAoB,GAAA,QAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,UAAW,CAAA,KAAK,CAAI,GAAA,CAAC,GAAG,UAAA,CAAW,KAAK,CAAA,GAAI,EAAE,CAAA;AAErG,IAAA,MAAM,aAAgB,GAAA,GAAA,iBAA+B,IAAA,GAAA,EAAK,CAAA;AAC1D,IAAA,SAAS,qBAAqB,EAAsB,EAAA;AAClD,MAAc,aAAA,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAAA;AAG5B,IAAA,MAAM,aAAgB,GAAA,QAAA,CAAS,MAAM,KAAA,CAAM,SAAS,QAAQ,CAAA;AAC5D,IAAM,MAAA,WAAA,GAAc,SAAS,MAAM;AACjC,MAAM,MAAA,WAAA,GAAc,iBAAkB,CAAA,KAAA,CAAM,MAAO,CAAA,CAAA,CAAA,KAAK,CAAC,CAAC,CAAM,IAAA,aAAA,CAAc,KAAS,IAAA,CAAA,KAAM,CAAE,CAAA;AAC/F,MAAO,OAAA,WAAA,CAAY,MAAW,KAAA,aAAA,CAAc,KAAM,CAAA,IAAA;AAAA,KACnD,CAAA;AAED,IAAA,KAAA,CAAM,YAAY,MAAM;AACtB,MAAA,IAAI,WAAY,CAAA,KAAA;AACd,QAAM,KAAA,CAAA,UAAA,EAAY,WAAW,KAAK,CAAA;AAAA,KACnC,EAAA,EAAE,IAAM,EAAA,IAAA,EAAM,CAAA;AAEjB,IAA2B,0BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,oBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Popover/PopoverContentImpl.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
 const vue = require('vue');
-const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Popper_PopperContent = require('../Popper/PopperContent.cjs');
 const shared = require('@vueuse/shared');
 const shared_useForwardProps = require('../shared/useForwardProps.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_useFocusGuards = require('../shared/useFocusGuards.cjs');
 const FocusScope_FocusScope = require('../FocusScope/FocusScope.cjs');
+const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Popover_PopoverRoot = require('./PopoverRoot.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({

package/dist/Popover/PopoverContentImpl.js

@@ -1,11 +1,11 @@
 import { defineComponent, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
-import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
 import { _ as _sfc_main$3 } from '../Popper/PopperContent.js';
 import { reactiveOmit } from '@vueuse/shared';
 import { u as useForwardProps } from '../shared/useForwardProps.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useFocusGuards } from '../shared/useFocusGuards.js';
 import { _ as _sfc_main$1 } from '../FocusScope/FocusScope.js';
+import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
 import { i as injectPopoverRootContext } from './PopoverRoot.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/Primitive/Slot.cjs

@@ -10,18 +10,18 @@ const Slot = vue.defineComponent({
     return () => {
       if (!slots.default)
         return null;
-      const childrens = shared_renderSlotFragments.renderSlotFragments(slots.default());
-      const firstNonCommentChildrenIndex = childrens.findIndex((child) => child.type !== vue.Comment);
+      const children = shared_renderSlotFragments.renderSlotFragments(slots.default());
+      const firstNonCommentChildrenIndex = children.findIndex((child) => child.type !== vue.Comment);
       if (firstNonCommentChildrenIndex === -1)
-        return childrens;
-      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
+        return children;
+      const firstNonCommentChildren = children[firstNonCommentChildrenIndex];
       delete firstNonCommentChildren.props?.ref;
       const mergedProps = firstNonCommentChildren.props ? vue.mergeProps(attrs, firstNonCommentChildren.props) : attrs;
       const cloned = vue.cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps);
-      if (childrens.length === 1)
+      if (children.length === 1)
         return cloned;
-      childrens[firstNonCommentChildrenIndex] = cloned;
-      return childrens;
+      children[firstNonCommentChildrenIndex] = cloned;
+      return children;
     };
   }
 });

package/dist/Primitive/Slot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slot.cjs","sources":["../../src/Primitive/Slot.ts"],"sourcesContent":["import { cloneVNode, Comment, defineComponent, mergeProps } from 'vue'\nimport { renderSlotFragments } from '@/shared'\n\nexport const Slot = defineComponent({\n  name: 'PrimitiveSlot',\n  inheritAttrs: false,\n  setup(_, { attrs, slots }) {\n    return () => {\n      if (!slots.default)\n        return null\n\n      const childrens = renderSlotFragments(slots.default())\n      const firstNonCommentChildrenIndex = childrens.findIndex(child => child.type !== Comment)\n      if (firstNonCommentChildrenIndex === -1)\n        return childrens\n\n      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex]\n\n      // Remove props ref from being inferred\n      delete firstNonCommentChildren.props?.ref\n\n      // Manually merge props to ensure `firstNonCommentChildren.props`\n      // has higher priority than `attrs` and can override `attrs`.\n      // Otherwise `cloneVNode(firstNonCommentChildren, attrs)` will\n      // prioritize `attrs` and override `firstNonCommentChildren.props`.\n      const mergedProps = firstNonCommentChildren.props\n        ? mergeProps(attrs, firstNonCommentChildren.props)\n        : attrs\n      const cloned = cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps)\n\n      if (childrens.length === 1)\n        return cloned\n\n      childrens[firstNonCommentChildrenIndex] = cloned\n      return childrens\n    }\n  },\n})\n"],"names":["defineComponent","renderSlotFragments","Comment","mergeProps","cloneVNode"],"mappings":";;;;;AAGO,MAAM,OAAOA,mBAAgB,CAAA;AAAA,EAClC,IAAM,EAAA,eAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAM,CAAA,CAAA,EAAG,EAAE,KAAA,EAAO,OAAS,EAAA;AACzB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,QAAO,OAAA,IAAA;AAET,MAAA,MAAM,SAAY,GAAAC,8CAAA,CAAoB,KAAM,CAAA,OAAA,EAAS,CAAA;AACrD,MAAA,MAAM,+BAA+B,SAAU,CAAA,SAAA,CAAU,CAAS,KAAA,KAAA,KAAA,CAAM,SAASC,WAAO,CAAA;AACxF,MAAA,IAAI,4BAAiC,KAAA,EAAA;AACnC,QAAO,OAAA,SAAA;AAET,MAAM,MAAA,uBAAA,GAA0B,UAAU,4BAA4B,CAAA;AAGtE,MAAA,OAAO,wBAAwB,KAAO,EAAA,GAAA;AAMtC,MAAA,MAAM,cAAc,uBAAwB,CAAA,KAAA,GACxCC,eAAW,KAAO,EAAA,uBAAA,CAAwB,KAAK,CAC/C,GAAA,KAAA;AACJ,MAAM,MAAA,MAAA,GAASC,eAAW,EAAE,GAAG,yBAAyB,KAAO,EAAA,EAAG,EAAA,EAAG,WAAW,CAAA;AAEhF,MAAA,IAAI,UAAU,MAAW,KAAA,CAAA;AACvB,QAAO,OAAA,MAAA;AAET,MAAA,SAAA,CAAU,4BAA4B,CAAI,GAAA,MAAA;AAC1C,MAAO,OAAA,SAAA;AAAA,KACT;AAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Slot.cjs","sources":["../../src/Primitive/Slot.ts"],"sourcesContent":["import { cloneVNode, Comment, defineComponent, mergeProps } from 'vue'\nimport { renderSlotFragments } from '@/shared'\n\nexport const Slot = defineComponent({\n  name: 'PrimitiveSlot',\n  inheritAttrs: false,\n  setup(_, { attrs, slots }) {\n    return () => {\n      if (!slots.default)\n        return null\n\n      const children = renderSlotFragments(slots.default())\n      const firstNonCommentChildrenIndex = children.findIndex(child => child.type !== Comment)\n      if (firstNonCommentChildrenIndex === -1)\n        return children\n\n      const firstNonCommentChildren = children[firstNonCommentChildrenIndex]\n\n      // Remove props ref from being inferred\n      delete firstNonCommentChildren.props?.ref\n\n      // Manually merge props to ensure `firstNonCommentChildren.props`\n      // has higher priority than `attrs` and can override `attrs`.\n      // Otherwise `cloneVNode(firstNonCommentChildren, attrs)` will\n      // prioritize `attrs` and override `firstNonCommentChildren.props`.\n      const mergedProps = firstNonCommentChildren.props\n        ? mergeProps(attrs, firstNonCommentChildren.props)\n        : attrs\n      const cloned = cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps)\n\n      if (children.length === 1)\n        return cloned\n\n      children[firstNonCommentChildrenIndex] = cloned\n      return children\n    }\n  },\n})\n"],"names":["defineComponent","renderSlotFragments","Comment","mergeProps","cloneVNode"],"mappings":";;;;;AAGO,MAAM,OAAOA,mBAAgB,CAAA;AAAA,EAClC,IAAM,EAAA,eAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAM,CAAA,CAAA,EAAG,EAAE,KAAA,EAAO,OAAS,EAAA;AACzB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,QAAO,OAAA,IAAA;AAET,MAAA,MAAM,QAAW,GAAAC,8CAAA,CAAoB,KAAM,CAAA,OAAA,EAAS,CAAA;AACpD,MAAA,MAAM,+BAA+B,QAAS,CAAA,SAAA,CAAU,CAAS,KAAA,KAAA,KAAA,CAAM,SAASC,WAAO,CAAA;AACvF,MAAA,IAAI,4BAAiC,KAAA,EAAA;AACnC,QAAO,OAAA,QAAA;AAET,MAAM,MAAA,uBAAA,GAA0B,SAAS,4BAA4B,CAAA;AAGrE,MAAA,OAAO,wBAAwB,KAAO,EAAA,GAAA;AAMtC,MAAA,MAAM,cAAc,uBAAwB,CAAA,KAAA,GACxCC,eAAW,KAAO,EAAA,uBAAA,CAAwB,KAAK,CAC/C,GAAA,KAAA;AACJ,MAAM,MAAA,MAAA,GAASC,eAAW,EAAE,GAAG,yBAAyB,KAAO,EAAA,EAAG,EAAA,EAAG,WAAW,CAAA;AAEhF,MAAA,IAAI,SAAS,MAAW,KAAA,CAAA;AACtB,QAAO,OAAA,MAAA;AAET,MAAA,QAAA,CAAS,4BAA4B,CAAI,GAAA,MAAA;AACzC,MAAO,OAAA,QAAA;AAAA,KACT;AAAA;AAEJ,CAAC;;;;"}

package/dist/Primitive/Slot.js

@@ -8,18 +8,18 @@ const Slot = defineComponent({
     return () => {
       if (!slots.default)
         return null;
-      const childrens = renderSlotFragments(slots.default());
-      const firstNonCommentChildrenIndex = childrens.findIndex((child) => child.type !== Comment);
+      const children = renderSlotFragments(slots.default());
+      const firstNonCommentChildrenIndex = children.findIndex((child) => child.type !== Comment);
       if (firstNonCommentChildrenIndex === -1)
-        return childrens;
-      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
+        return children;
+      const firstNonCommentChildren = children[firstNonCommentChildrenIndex];
       delete firstNonCommentChildren.props?.ref;
       const mergedProps = firstNonCommentChildren.props ? mergeProps(attrs, firstNonCommentChildren.props) : attrs;
       const cloned = cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps);
-      if (childrens.length === 1)
+      if (children.length === 1)
         return cloned;
-      childrens[firstNonCommentChildrenIndex] = cloned;
-      return childrens;
+      children[firstNonCommentChildrenIndex] = cloned;
+      return children;
     };
   }
 });

package/dist/Primitive/Slot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slot.js","sources":["../../src/Primitive/Slot.ts"],"sourcesContent":["import { cloneVNode, Comment, defineComponent, mergeProps } from 'vue'\nimport { renderSlotFragments } from '@/shared'\n\nexport const Slot = defineComponent({\n  name: 'PrimitiveSlot',\n  inheritAttrs: false,\n  setup(_, { attrs, slots }) {\n    return () => {\n      if (!slots.default)\n        return null\n\n      const childrens = renderSlotFragments(slots.default())\n      const firstNonCommentChildrenIndex = childrens.findIndex(child => child.type !== Comment)\n      if (firstNonCommentChildrenIndex === -1)\n        return childrens\n\n      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex]\n\n      // Remove props ref from being inferred\n      delete firstNonCommentChildren.props?.ref\n\n      // Manually merge props to ensure `firstNonCommentChildren.props`\n      // has higher priority than `attrs` and can override `attrs`.\n      // Otherwise `cloneVNode(firstNonCommentChildren, attrs)` will\n      // prioritize `attrs` and override `firstNonCommentChildren.props`.\n      const mergedProps = firstNonCommentChildren.props\n        ? mergeProps(attrs, firstNonCommentChildren.props)\n        : attrs\n      const cloned = cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps)\n\n      if (childrens.length === 1)\n        return cloned\n\n      childrens[firstNonCommentChildrenIndex] = cloned\n      return childrens\n    }\n  },\n})\n"],"names":[],"mappings":";;;AAGO,MAAM,OAAO,eAAgB,CAAA;AAAA,EAClC,IAAM,EAAA,eAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAM,CAAA,CAAA,EAAG,EAAE,KAAA,EAAO,OAAS,EAAA;AACzB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,QAAO,OAAA,IAAA;AAET,MAAA,MAAM,SAAY,GAAA,mBAAA,CAAoB,KAAM,CAAA,OAAA,EAAS,CAAA;AACrD,MAAA,MAAM,+BAA+B,SAAU,CAAA,SAAA,CAAU,CAAS,KAAA,KAAA,KAAA,CAAM,SAAS,OAAO,CAAA;AACxF,MAAA,IAAI,4BAAiC,KAAA,EAAA;AACnC,QAAO,OAAA,SAAA;AAET,MAAM,MAAA,uBAAA,GAA0B,UAAU,4BAA4B,CAAA;AAGtE,MAAA,OAAO,wBAAwB,KAAO,EAAA,GAAA;AAMtC,MAAA,MAAM,cAAc,uBAAwB,CAAA,KAAA,GACxC,WAAW,KAAO,EAAA,uBAAA,CAAwB,KAAK,CAC/C,GAAA,KAAA;AACJ,MAAM,MAAA,MAAA,GAAS,WAAW,EAAE,GAAG,yBAAyB,KAAO,EAAA,EAAG,EAAA,EAAG,WAAW,CAAA;AAEhF,MAAA,IAAI,UAAU,MAAW,KAAA,CAAA;AACvB,QAAO,OAAA,MAAA;AAET,MAAA,SAAA,CAAU,4BAA4B,CAAI,GAAA,MAAA;AAC1C,MAAO,OAAA,SAAA;AAAA,KACT;AAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Slot.js","sources":["../../src/Primitive/Slot.ts"],"sourcesContent":["import { cloneVNode, Comment, defineComponent, mergeProps } from 'vue'\nimport { renderSlotFragments } from '@/shared'\n\nexport const Slot = defineComponent({\n  name: 'PrimitiveSlot',\n  inheritAttrs: false,\n  setup(_, { attrs, slots }) {\n    return () => {\n      if (!slots.default)\n        return null\n\n      const children = renderSlotFragments(slots.default())\n      const firstNonCommentChildrenIndex = children.findIndex(child => child.type !== Comment)\n      if (firstNonCommentChildrenIndex === -1)\n        return children\n\n      const firstNonCommentChildren = children[firstNonCommentChildrenIndex]\n\n      // Remove props ref from being inferred\n      delete firstNonCommentChildren.props?.ref\n\n      // Manually merge props to ensure `firstNonCommentChildren.props`\n      // has higher priority than `attrs` and can override `attrs`.\n      // Otherwise `cloneVNode(firstNonCommentChildren, attrs)` will\n      // prioritize `attrs` and override `firstNonCommentChildren.props`.\n      const mergedProps = firstNonCommentChildren.props\n        ? mergeProps(attrs, firstNonCommentChildren.props)\n        : attrs\n      const cloned = cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps)\n\n      if (children.length === 1)\n        return cloned\n\n      children[firstNonCommentChildrenIndex] = cloned\n      return children\n    }\n  },\n})\n"],"names":[],"mappings":";;;AAGO,MAAM,OAAO,eAAgB,CAAA;AAAA,EAClC,IAAM,EAAA,eAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAAA,EACd,KAAM,CAAA,CAAA,EAAG,EAAE,KAAA,EAAO,OAAS,EAAA;AACzB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,QAAO,OAAA,IAAA;AAET,MAAA,MAAM,QAAW,GAAA,mBAAA,CAAoB,KAAM,CAAA,OAAA,EAAS,CAAA;AACpD,MAAA,MAAM,+BAA+B,QAAS,CAAA,SAAA,CAAU,CAAS,KAAA,KAAA,KAAA,CAAM,SAAS,OAAO,CAAA;AACvF,MAAA,IAAI,4BAAiC,KAAA,EAAA;AACnC,QAAO,OAAA,QAAA;AAET,MAAM,MAAA,uBAAA,GAA0B,SAAS,4BAA4B,CAAA;AAGrE,MAAA,OAAO,wBAAwB,KAAO,EAAA,GAAA;AAMtC,MAAA,MAAM,cAAc,uBAAwB,CAAA,KAAA,GACxC,WAAW,KAAO,EAAA,uBAAA,CAAwB,KAAK,CAC/C,GAAA,KAAA;AACJ,MAAM,MAAA,MAAA,GAAS,WAAW,EAAE,GAAG,yBAAyB,KAAO,EAAA,EAAG,EAAA,EAAG,WAAW,CAAA;AAEhF,MAAA,IAAI,SAAS,MAAW,KAAA,CAAA;AACtB,QAAO,OAAA,MAAA;AAET,MAAA,QAAA,CAAS,4BAA4B,CAAI,GAAA,MAAA;AACzC,MAAO,OAAA,QAAA;AAAA,KACT;AAAA;AAEJ,CAAC;;;;"}

package/dist/RadioGroup/Radio.cjs

@@ -32,6 +32,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const isFormControl = shared_useFormControl.useFormControl(triggerElement);
     const ariaLabel = vue.computed(() => props.id && triggerElement.value ? document.querySelector(`[for="${props.id}"]`)?.innerText ?? props.value : void 0);
     function handleClick(event) {
+      if (props.disabled)
+        return;
       RadioGroup_utils.handleSelect(event, props.value, (ev) => {
         emits("select", ev);
         if (ev?.defaultPrevented)

package/dist/RadioGroup/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../src/RadioGroup/Radio.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { SelectEvent } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue, FormFieldProps } from '@/shared/types'\n\nexport type RadioEmits = {\n  'update:checked': [value: boolean]\n  'select': [SelectEvent]\n}\n\nexport interface RadioProps extends PrimitiveProps, FormFieldProps {\n  id?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: AcceptableValue\n  /** When `true`, prevents the user from interacting with the radio item. */\n  disabled?: boolean\n  checked?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { computed, toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { useFormControl, useForwardExpose } from '@/shared'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport { handleSelect } from './utils'\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  disabled: false,\n  checked: undefined,\n  as: 'button',\n})\nconst emits = defineEmits<RadioEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current checked state */\n    checked: typeof checked.value\n  }) => any\n}>()\n\nconst checked = useVModel(props, 'checked', emits, {\n  passive: (props.checked === undefined) as false,\n})\n\nconst { value } = toRefs(props)\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst isFormControl = useFormControl(triggerElement)\n\nconst ariaLabel = computed(() => props.id && triggerElement.value ? (document.querySelector(`[for=\"${props.id}\"]`) as HTMLLabelElement)?.innerText ?? props.value : undefined)\n\nfunction handleClick(event: MouseEvent) {\n  handleSelect(event, props.value, (ev) => {\n    emits('select', ev)\n    if (ev?.defaultPrevented)\n      return\n\n    checked.value = true\n    if (isFormControl.value) {\n    // if radio is in a form, stop propagation from the button so that we only propagate\n    // one click event (from the input). We propagate changes from an input so that native\n    // form validation works and form events reflect radio updates.\n      ev.stopPropagation()\n    }\n  })\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    :id=\"id\"\n    :ref=\"forwardRef\"\n    role=\"radio\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :as=\"as\"\n    :aria-checked=\"checked\"\n    :aria-label=\"ariaLabel\"\n    :as-child=\"asChild\"\n    :disabled=\"disabled ? '' : undefined\"\n    :data-state=\"checked ? 'checked' : 'unchecked'\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :value=\"value\"\n    :required=\"required\"\n    :name=\"name\"\n    @click.stop=\"handleClick\"\n  >\n    <slot :checked=\"checked\" />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name\"\n      type=\"radio\"\n      tabindex=\"-1\"\n      :value=\"value\"\n      :checked=\"!!checked\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":["useVModel","toRefs","useForwardExpose","useFormControl","computed","handleSelect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,OAAU,GAAAA,cAAA,CAAU,KAAO,EAAA,SAAA,EAAW,KAAO,EAAA;AAAA,MACjD,OAAA,EAAU,MAAM,OAAY,KAAA;AAAA,KAC7B,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAU,GAAAC,UAAA,CAAO,KAAK,CAAA;AAC9B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AACxE,IAAM,MAAA,aAAA,GAAgBC,qCAAe,cAAc,CAAA;AAEnD,IAAA,MAAM,YAAYC,YAAS,CAAA,MAAM,KAAM,CAAA,EAAA,IAAM,eAAe,KAAS,GAAA,QAAA,CAAS,aAAc,CAAA,CAAA,MAAA,EAAS,MAAM,EAAE,CAAA,EAAA,CAAI,GAAwB,SAAa,IAAA,KAAA,CAAM,QAAQ,MAAS,CAAA;AAE7K,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAAC,6BAAA,CAAa,KAAO,EAAA,KAAA,CAAM,KAAO,EAAA,CAAC,EAAO,KAAA;AACvC,QAAA,KAAA,CAAM,UAAU,EAAE,CAAA;AAClB,QAAA,IAAI,EAAI,EAAA,gBAAA;AACN,UAAA;AAEF,QAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,QAAA,IAAI,cAAc,KAAO,EAAA;AAIvB,UAAA,EAAA,CAAG,eAAgB,EAAA;AAAA;AACrB,OACD,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Radio.cjs","sources":["../../src/RadioGroup/Radio.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { SelectEvent } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue, FormFieldProps } from '@/shared/types'\n\nexport type RadioEmits = {\n  'update:checked': [value: boolean]\n  'select': [SelectEvent]\n}\n\nexport interface RadioProps extends PrimitiveProps, FormFieldProps {\n  id?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: AcceptableValue\n  /** When `true`, prevents the user from interacting with the radio item. */\n  disabled?: boolean\n  checked?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { computed, toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { useFormControl, useForwardExpose } from '@/shared'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport { handleSelect } from './utils'\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  disabled: false,\n  checked: undefined,\n  as: 'button',\n})\nconst emits = defineEmits<RadioEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current checked state */\n    checked: typeof checked.value\n  }) => any\n}>()\n\nconst checked = useVModel(props, 'checked', emits, {\n  passive: (props.checked === undefined) as false,\n})\n\nconst { value } = toRefs(props)\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst isFormControl = useFormControl(triggerElement)\n\nconst ariaLabel = computed(() => props.id && triggerElement.value ? (document.querySelector(`[for=\"${props.id}\"]`) as HTMLLabelElement)?.innerText ?? props.value : undefined)\n\nfunction handleClick(event: MouseEvent) {\n  if (props.disabled)\n    return\n\n  handleSelect(event, props.value, (ev) => {\n    emits('select', ev)\n    if (ev?.defaultPrevented)\n      return\n\n    checked.value = true\n    if (isFormControl.value) {\n    // if radio is in a form, stop propagation from the button so that we only propagate\n    // one click event (from the input). We propagate changes from an input so that native\n    // form validation works and form events reflect radio updates.\n      ev.stopPropagation()\n    }\n  })\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    :id=\"id\"\n    :ref=\"forwardRef\"\n    role=\"radio\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :as=\"as\"\n    :aria-checked=\"checked\"\n    :aria-label=\"ariaLabel\"\n    :as-child=\"asChild\"\n    :disabled=\"disabled ? '' : undefined\"\n    :data-state=\"checked ? 'checked' : 'unchecked'\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :value=\"value\"\n    :required=\"required\"\n    :name=\"name\"\n    @click.stop=\"handleClick\"\n  >\n    <slot :checked=\"checked\" />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name\"\n      type=\"radio\"\n      tabindex=\"-1\"\n      :value=\"value\"\n      :checked=\"!!checked\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":["useVModel","toRefs","useForwardExpose","useFormControl","computed","handleSelect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,OAAU,GAAAA,cAAA,CAAU,KAAO,EAAA,SAAA,EAAW,KAAO,EAAA;AAAA,MACjD,OAAA,EAAU,MAAM,OAAY,KAAA;AAAA,KAC7B,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAU,GAAAC,UAAA,CAAO,KAAK,CAAA;AAC9B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AACxE,IAAM,MAAA,aAAA,GAAgBC,qCAAe,cAAc,CAAA;AAEnD,IAAA,MAAM,YAAYC,YAAS,CAAA,MAAM,KAAM,CAAA,EAAA,IAAM,eAAe,KAAS,GAAA,QAAA,CAAS,aAAc,CAAA,CAAA,MAAA,EAAS,MAAM,EAAE,CAAA,EAAA,CAAI,GAAwB,SAAa,IAAA,KAAA,CAAM,QAAQ,MAAS,CAAA;AAE7K,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,IAAI,KAAM,CAAA,QAAA;AACR,QAAA;AAEF,MAAAC,6BAAA,CAAa,KAAO,EAAA,KAAA,CAAM,KAAO,EAAA,CAAC,EAAO,KAAA;AACvC,QAAA,KAAA,CAAM,UAAU,EAAE,CAAA;AAClB,QAAA,IAAI,EAAI,EAAA,gBAAA;AACN,UAAA;AAEF,QAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,QAAA,IAAI,cAAc,KAAO,EAAA;AAIvB,UAAA,EAAA,CAAG,eAAgB,EAAA;AAAA;AACrB,OACD,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/RadioGroup/Radio.js

@@ -30,6 +30,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isFormControl = useFormControl(triggerElement);
     const ariaLabel = computed(() => props.id && triggerElement.value ? document.querySelector(`[for="${props.id}"]`)?.innerText ?? props.value : void 0);
     function handleClick(event) {
+      if (props.disabled)
+        return;
       handleSelect(event, props.value, (ev) => {
         emits("select", ev);
         if (ev?.defaultPrevented)

package/dist/RadioGroup/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../src/RadioGroup/Radio.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { SelectEvent } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue, FormFieldProps } from '@/shared/types'\n\nexport type RadioEmits = {\n  'update:checked': [value: boolean]\n  'select': [SelectEvent]\n}\n\nexport interface RadioProps extends PrimitiveProps, FormFieldProps {\n  id?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: AcceptableValue\n  /** When `true`, prevents the user from interacting with the radio item. */\n  disabled?: boolean\n  checked?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { computed, toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { useFormControl, useForwardExpose } from '@/shared'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport { handleSelect } from './utils'\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  disabled: false,\n  checked: undefined,\n  as: 'button',\n})\nconst emits = defineEmits<RadioEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current checked state */\n    checked: typeof checked.value\n  }) => any\n}>()\n\nconst checked = useVModel(props, 'checked', emits, {\n  passive: (props.checked === undefined) as false,\n})\n\nconst { value } = toRefs(props)\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst isFormControl = useFormControl(triggerElement)\n\nconst ariaLabel = computed(() => props.id && triggerElement.value ? (document.querySelector(`[for=\"${props.id}\"]`) as HTMLLabelElement)?.innerText ?? props.value : undefined)\n\nfunction handleClick(event: MouseEvent) {\n  handleSelect(event, props.value, (ev) => {\n    emits('select', ev)\n    if (ev?.defaultPrevented)\n      return\n\n    checked.value = true\n    if (isFormControl.value) {\n    // if radio is in a form, stop propagation from the button so that we only propagate\n    // one click event (from the input). We propagate changes from an input so that native\n    // form validation works and form events reflect radio updates.\n      ev.stopPropagation()\n    }\n  })\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    :id=\"id\"\n    :ref=\"forwardRef\"\n    role=\"radio\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :as=\"as\"\n    :aria-checked=\"checked\"\n    :aria-label=\"ariaLabel\"\n    :as-child=\"asChild\"\n    :disabled=\"disabled ? '' : undefined\"\n    :data-state=\"checked ? 'checked' : 'unchecked'\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :value=\"value\"\n    :required=\"required\"\n    :name=\"name\"\n    @click.stop=\"handleClick\"\n  >\n    <slot :checked=\"checked\" />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name\"\n      type=\"radio\"\n      tabindex=\"-1\"\n      :value=\"value\"\n      :checked=\"!!checked\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,OAAU,GAAA,SAAA,CAAU,KAAO,EAAA,SAAA,EAAW,KAAO,EAAA;AAAA,MACjD,OAAA,EAAU,MAAM,OAAY,KAAA;AAAA,KAC7B,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAU,GAAA,MAAA,CAAO,KAAK,CAAA;AAC9B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AACxE,IAAM,MAAA,aAAA,GAAgB,eAAe,cAAc,CAAA;AAEnD,IAAA,MAAM,YAAY,QAAS,CAAA,MAAM,KAAM,CAAA,EAAA,IAAM,eAAe,KAAS,GAAA,QAAA,CAAS,aAAc,CAAA,CAAA,MAAA,EAAS,MAAM,EAAE,CAAA,EAAA,CAAI,GAAwB,SAAa,IAAA,KAAA,CAAM,QAAQ,MAAS,CAAA;AAE7K,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,YAAA,CAAa,KAAO,EAAA,KAAA,CAAM,KAAO,EAAA,CAAC,EAAO,KAAA;AACvC,QAAA,KAAA,CAAM,UAAU,EAAE,CAAA;AAClB,QAAA,IAAI,EAAI,EAAA,gBAAA;AACN,UAAA;AAEF,QAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,QAAA,IAAI,cAAc,KAAO,EAAA;AAIvB,UAAA,EAAA,CAAG,eAAgB,EAAA;AAAA;AACrB,OACD,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../src/RadioGroup/Radio.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { SelectEvent } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue, FormFieldProps } from '@/shared/types'\n\nexport type RadioEmits = {\n  'update:checked': [value: boolean]\n  'select': [SelectEvent]\n}\n\nexport interface RadioProps extends PrimitiveProps, FormFieldProps {\n  id?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: AcceptableValue\n  /** When `true`, prevents the user from interacting with the radio item. */\n  disabled?: boolean\n  checked?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { computed, toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { useFormControl, useForwardExpose } from '@/shared'\nimport { VisuallyHiddenInput } from '@/VisuallyHidden'\nimport { handleSelect } from './utils'\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  disabled: false,\n  checked: undefined,\n  as: 'button',\n})\nconst emits = defineEmits<RadioEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current checked state */\n    checked: typeof checked.value\n  }) => any\n}>()\n\nconst checked = useVModel(props, 'checked', emits, {\n  passive: (props.checked === undefined) as false,\n})\n\nconst { value } = toRefs(props)\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst isFormControl = useFormControl(triggerElement)\n\nconst ariaLabel = computed(() => props.id && triggerElement.value ? (document.querySelector(`[for=\"${props.id}\"]`) as HTMLLabelElement)?.innerText ?? props.value : undefined)\n\nfunction handleClick(event: MouseEvent) {\n  if (props.disabled)\n    return\n\n  handleSelect(event, props.value, (ev) => {\n    emits('select', ev)\n    if (ev?.defaultPrevented)\n      return\n\n    checked.value = true\n    if (isFormControl.value) {\n    // if radio is in a form, stop propagation from the button so that we only propagate\n    // one click event (from the input). We propagate changes from an input so that native\n    // form validation works and form events reflect radio updates.\n      ev.stopPropagation()\n    }\n  })\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    :id=\"id\"\n    :ref=\"forwardRef\"\n    role=\"radio\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :as=\"as\"\n    :aria-checked=\"checked\"\n    :aria-label=\"ariaLabel\"\n    :as-child=\"asChild\"\n    :disabled=\"disabled ? '' : undefined\"\n    :data-state=\"checked ? 'checked' : 'unchecked'\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :value=\"value\"\n    :required=\"required\"\n    :name=\"name\"\n    @click.stop=\"handleClick\"\n  >\n    <slot :checked=\"checked\" />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name\"\n      type=\"radio\"\n      tabindex=\"-1\"\n      :value=\"value\"\n      :checked=\"!!checked\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,OAAU,GAAA,SAAA,CAAU,KAAO,EAAA,SAAA,EAAW,KAAO,EAAA;AAAA,MACjD,OAAA,EAAU,MAAM,OAAY,KAAA;AAAA,KAC7B,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAU,GAAA,MAAA,CAAO,KAAK,CAAA;AAC9B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AACxE,IAAM,MAAA,aAAA,GAAgB,eAAe,cAAc,CAAA;AAEnD,IAAA,MAAM,YAAY,QAAS,CAAA,MAAM,KAAM,CAAA,EAAA,IAAM,eAAe,KAAS,GAAA,QAAA,CAAS,aAAc,CAAA,CAAA,MAAA,EAAS,MAAM,EAAE,CAAA,EAAA,CAAI,GAAwB,SAAa,IAAA,KAAA,CAAM,QAAQ,MAAS,CAAA;AAE7K,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,IAAI,KAAM,CAAA,QAAA;AACR,QAAA;AAEF,MAAA,YAAA,CAAa,KAAO,EAAA,KAAA,CAAM,KAAO,EAAA,CAAC,EAAO,KAAA;AACvC,QAAA,KAAA,CAAM,UAAU,EAAE,CAAA;AAClB,QAAA,IAAI,EAAI,EAAA,gBAAA;AACN,UAAA;AAEF,QAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA;AAChB,QAAA,IAAI,cAAc,KAAO,EAAA;AAIvB,UAAA,EAAA,CAAG,eAAgB,EAAA;AAAA;AACrB,OACD,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/RangeCalendar/useRangeCalendar.cjs

@@ -2,6 +2,7 @@
 
 const date = require('@internationalized/date');
 const vue = require('vue');
+const date_calendar = require('../date/calendar.cjs');
 const date_comparators = require('../date/comparators.cjs');
 
 function useRangeCalendarState(props) {
@@ -50,10 +51,27 @@ function useRangeCalendarState(props) {
   const rangeIsDateDisabled = (date$1) => {
     if (props.isDateDisabled(date$1))
       return true;
-    if (!props.maximumDays?.value || !props.start.value || props.end.value || date.isSameDay(props.start.value, date$1))
+    if (props.maximumDays?.value) {
+      if (props.start.value && props.end.value) {
+        if (props.fixedDate.value) {
+          const diff = date_calendar.getDaysBetween(props.start.value, props.end.value).length;
+          if (diff <= props.maximumDays.value) {
+            const daysLeft = props.maximumDays.value - diff - 1;
+            const startLimit = props.start.value.subtract({ days: daysLeft });
+            const endLimit = props.end.value.add({ days: daysLeft });
+            return !date_comparators.isBetween(date$1, startLimit, endLimit);
+          }
+        }
+        return false;
+      }
+      if (props.start.value) {
+        const maxDate = props.start.value.add({ days: props.maximumDays.value });
+        const minDate = props.start.value.subtract({ days: props.maximumDays.value });
+        return !date_comparators.isBetween(date$1, minDate, maxDate);
+      }
+    }
+    if (!props.start.value || props.end.value || date.isSameDay(props.start.value, date$1))
       return false;
-    if (Math.abs(date$1.compare(props.start.value)) > props.maximumDays.value)
-      return true;
     return false;
   };
   const isDateHighlightable = (date) => {
@@ -75,7 +93,7 @@ function useRangeCalendarState(props) {
         end
       };
     }
-    if (props.maximumDays?.value && !props.end.value && Math.abs(end.compare(start)) > props.maximumDays.value) {
+    if (props.maximumDays?.value && !props.end.value) {
       const cappedEnd = isStartBeforeFocused ? start.add({ days: props.maximumDays.value }) : start.subtract({ days: props.maximumDays.value });
       return {
         start,

package/dist/RangeCalendar/useRangeCalendar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useRangeCalendar.cjs","sources":["../../src/RangeCalendar/useRangeCalendar.ts"],"sourcesContent":["/*\n  * Adapted from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/builders/range-calendar/create.ts\n*/\n\nimport type { DateValue } from '@internationalized/date'\nimport type { Ref } from 'vue'\nimport type { Matcher } from '@/date'\nimport { isSameDay } from '@internationalized/date'\nimport { computed } from 'vue'\nimport { areAllDaysBetweenValid, isBefore, isBetween } from '@/date'\n\nexport type UseRangeCalendarProps = {\n  start: Ref<DateValue | undefined>\n  end: Ref<DateValue | undefined>\n  isDateDisabled: Matcher\n  isDateUnavailable: Matcher\n  isDateHighlightable?: Matcher\n  focusedValue: Ref<DateValue | undefined>\n  allowNonContiguousRanges: Ref<boolean>\n  fixedDate: Ref<'start' | 'end' | undefined>\n  maximumDays?: Ref<number | undefined>\n}\n\nexport function useRangeCalendarState(props: UseRangeCalendarProps) {\n  const isStartInvalid = computed(() => {\n    if (!props.start.value)\n      return false\n    if (props.isDateDisabled(props.start.value))\n      return true\n    return false\n  })\n\n  const isEndInvalid = computed(() => {\n    if (!props.end.value)\n      return false\n    if (props.isDateDisabled(props.end.value))\n      return true\n    return false\n  })\n\n  const isInvalid = computed(\n    () => {\n      if (isStartInvalid.value || isEndInvalid.value)\n        return false\n      if (props.start.value && props.end.value && isBefore(props.end.value, props.start.value))\n        return true\n      return false\n    },\n  )\n\n  const isSelectionStart = (date: DateValue) => {\n    if (!props.start.value)\n      return false\n    return isSameDay(props.start.value, date)\n  }\n\n  const isSelectionEnd = (date: DateValue) => {\n    if (!props.end.value)\n      return false\n    return isSameDay(props.end.value, date)\n  }\n\n  const isSelected = (date: DateValue) => {\n    if (props.start.value && isSameDay(props.start.value, date))\n      return true\n    if (props.end.value && isSameDay(props.end.value, date))\n      return true\n    if (props.end.value && props.start.value)\n      return isBetween(date, props.start.value, props.end.value)\n\n    return false\n  }\n\n  // Check if a date exceeds maximum days limit from the start date\n  const rangeIsDateDisabled = (date: DateValue) => {\n    if (props.isDateDisabled(date))\n      return true\n\n    if (!props.maximumDays?.value || !props.start.value || props.end.value || isSameDay(props.start.value, date))\n      return false\n\n    // Check if exceeds maximum days limit\n    if (Math.abs(date.compare(props.start.value)) > props.maximumDays.value)\n      return true\n\n    return false\n  }\n\n  const isDateHighlightable = (date: DateValue) => {\n    if (props.isDateHighlightable?.(date))\n      return true\n    return false\n  }\n\n  const highlightedRange = computed(() => {\n    if (props.start.value && props.end.value && !props.fixedDate.value)\n      return null\n    if (!props.start.value || !props.focusedValue.value)\n      return null\n\n    const isStartBeforeFocused = isBefore(props.start.value, props.focusedValue.value)\n    const start = isStartBeforeFocused ? props.start.value : props.focusedValue.value\n    const end = isStartBeforeFocused ? props.focusedValue.value : props.start.value\n\n    if (isSameDay(start, end)) {\n      return {\n        start,\n        end,\n      }\n    }\n\n    // If maximum days is set and the range exceeds it, limit the highlight\n    // We only apply this when we're in the middle of a selection (no end date yet)\n    if (props.maximumDays?.value && !props.end.value && Math.abs(end.compare(start)) > props.maximumDays.value) {\n      // Determine the direction of selection and limit to maximum days\n      const cappedEnd = isStartBeforeFocused\n        ? start.add({ days: props.maximumDays.value })\n        : start.subtract({ days: props.maximumDays.value })\n\n      return {\n        start,\n        end: cappedEnd,\n      }\n    }\n\n    const isValid = areAllDaysBetweenValid(start, end, props.allowNonContiguousRanges.value ? () => false : props.isDateUnavailable, rangeIsDateDisabled, props.isDateHighlightable)\n    if (isValid) {\n      return {\n        start,\n        end,\n      }\n    }\n    return null\n  })\n\n  const isHighlightedStart = (date: DateValue) => {\n    if (!highlightedRange.value || !highlightedRange.value.start)\n      return false\n    return isSameDay(highlightedRange.value.start, date)\n  }\n\n  const isHighlightedEnd = (date: DateValue) => {\n    if (!highlightedRange.value || !highlightedRange.value.end)\n      return false\n    return isSameDay(highlightedRange.value.end, date)\n  }\n\n  return {\n    isInvalid,\n    isSelected,\n    isDateHighlightable,\n    highlightedRange,\n    isSelectionStart,\n    isSelectionEnd,\n    isHighlightedStart,\n    isHighlightedEnd,\n    isDateDisabled: rangeIsDateDisabled,\n  }\n}\n"],"names":["computed","isBefore","date","isSameDay","isBetween","areAllDaysBetweenValid"],"mappings":"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"}
+{"version":3,"file":"useRangeCalendar.cjs","sources":["../../src/RangeCalendar/useRangeCalendar.ts"],"sourcesContent":["/*\n  * Adapted from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/builders/range-calendar/create.ts\n*/\n\nimport type { DateValue } from '@internationalized/date'\nimport type { Ref } from 'vue'\nimport type { Matcher } from '@/date'\nimport { isSameDay } from '@internationalized/date'\nimport { computed } from 'vue'\nimport { areAllDaysBetweenValid, getDaysBetween, isBefore, isBetween } from '@/date'\n\nexport type UseRangeCalendarProps = {\n  start: Ref<DateValue | undefined>\n  end: Ref<DateValue | undefined>\n  isDateDisabled: Matcher\n  isDateUnavailable: Matcher\n  isDateHighlightable?: Matcher\n  focusedValue: Ref<DateValue | undefined>\n  allowNonContiguousRanges: Ref<boolean>\n  fixedDate: Ref<'start' | 'end' | undefined>\n  maximumDays?: Ref<number | undefined>\n}\n\nexport function useRangeCalendarState(props: UseRangeCalendarProps) {\n  const isStartInvalid = computed(() => {\n    if (!props.start.value)\n      return false\n    if (props.isDateDisabled(props.start.value))\n      return true\n    return false\n  })\n\n  const isEndInvalid = computed(() => {\n    if (!props.end.value)\n      return false\n    if (props.isDateDisabled(props.end.value))\n      return true\n    return false\n  })\n\n  const isInvalid = computed(\n    () => {\n      if (isStartInvalid.value || isEndInvalid.value)\n        return false\n      if (props.start.value && props.end.value && isBefore(props.end.value, props.start.value))\n        return true\n      return false\n    },\n  )\n\n  const isSelectionStart = (date: DateValue) => {\n    if (!props.start.value)\n      return false\n    return isSameDay(props.start.value, date)\n  }\n\n  const isSelectionEnd = (date: DateValue) => {\n    if (!props.end.value)\n      return false\n    return isSameDay(props.end.value, date)\n  }\n\n  const isSelected = (date: DateValue) => {\n    if (props.start.value && isSameDay(props.start.value, date))\n      return true\n    if (props.end.value && isSameDay(props.end.value, date))\n      return true\n    if (props.end.value && props.start.value)\n      return isBetween(date, props.start.value, props.end.value)\n\n    return false\n  }\n\n  // Check if a date exceeds maximum days limit from the start date\n  const rangeIsDateDisabled = (date: DateValue) => {\n    if (props.isDateDisabled(date))\n      return true\n\n    // Check if exceeds maximum days limit\n    if (props.maximumDays?.value) {\n      if (props.start.value && props.end.value) {\n        if (props.fixedDate.value) {\n          const diff = getDaysBetween(props.start.value, props.end.value).length\n          if (diff <= props.maximumDays.value) {\n            const daysLeft = props.maximumDays.value - diff - 1\n            const startLimit = props.start.value.subtract({ days: daysLeft })\n            const endLimit = props.end.value.add({ days: daysLeft })\n            return !isBetween(date, startLimit, endLimit)\n          }\n        }\n        return false\n      }\n      if (props.start.value) {\n        const maxDate = props.start.value.add({ days: props.maximumDays.value })\n        const minDate = props.start.value.subtract({ days: props.maximumDays.value })\n        return !isBetween(date, minDate, maxDate)\n      }\n    }\n\n    if (!props.start.value || props.end.value || isSameDay(props.start.value, date))\n      return false\n\n    return false\n  }\n\n  const isDateHighlightable = (date: DateValue) => {\n    if (props.isDateHighlightable?.(date))\n      return true\n    return false\n  }\n\n  const highlightedRange = computed(() => {\n    if (props.start.value && props.end.value && !props.fixedDate.value)\n      return null\n    if (!props.start.value || !props.focusedValue.value)\n      return null\n\n    const isStartBeforeFocused = isBefore(props.start.value, props.focusedValue.value)\n    const start = isStartBeforeFocused ? props.start.value : props.focusedValue.value\n    const end = isStartBeforeFocused ? props.focusedValue.value : props.start.value\n\n    if (isSameDay(start, end)) {\n      return {\n        start,\n        end,\n      }\n    }\n\n    // If maximum days is set and the range exceeds it, limit the highlight\n    // We only apply this when we're in the middle of a selection (no end date yet)\n    if (props.maximumDays?.value && !props.end.value) {\n      // Determine the direction of selection and limit to maximum days\n      const cappedEnd = isStartBeforeFocused\n        ? start.add({ days: props.maximumDays.value })\n        : start.subtract({ days: props.maximumDays.value })\n\n      return {\n        start,\n        end: cappedEnd,\n      }\n    }\n\n    const isValid = areAllDaysBetweenValid(start, end, props.allowNonContiguousRanges.value ? () => false : props.isDateUnavailable, rangeIsDateDisabled, props.isDateHighlightable)\n    if (isValid) {\n      return {\n        start,\n        end,\n      }\n    }\n    return null\n  })\n\n  const isHighlightedStart = (date: DateValue) => {\n    if (!highlightedRange.value || !highlightedRange.value.start)\n      return false\n    return isSameDay(highlightedRange.value.start, date)\n  }\n\n  const isHighlightedEnd = (date: DateValue) => {\n    if (!highlightedRange.value || !highlightedRange.value.end)\n      return false\n    return isSameDay(highlightedRange.value.end, date)\n  }\n\n  return {\n    isInvalid,\n    isSelected,\n    isDateHighlightable,\n    highlightedRange,\n    isSelectionStart,\n    isSelectionEnd,\n    isHighlightedStart,\n    isHighlightedEnd,\n    isDateDisabled: rangeIsDateDisabled,\n  }\n}\n"],"names":["computed","isBefore","date","isSameDay","isBetween","getDaysBetween","areAllDaysBetweenValid"],"mappings":"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"}

package/dist/RangeCalendar/useRangeCalendar.js

@@ -1,5 +1,6 @@
 import { isSameDay } from '@internationalized/date';
 import { computed } from 'vue';
+import { g as getDaysBetween } from '../date/calendar.js';
 import { b as isBefore, m as areAllDaysBetweenValid, j as isBetween } from '../date/comparators.js';
 
 function useRangeCalendarState(props) {
@@ -48,10 +49,27 @@ function useRangeCalendarState(props) {
   const rangeIsDateDisabled = (date) => {
     if (props.isDateDisabled(date))
       return true;
-    if (!props.maximumDays?.value || !props.start.value || props.end.value || isSameDay(props.start.value, date))
+    if (props.maximumDays?.value) {
+      if (props.start.value && props.end.value) {
+        if (props.fixedDate.value) {
+          const diff = getDaysBetween(props.start.value, props.end.value).length;
+          if (diff <= props.maximumDays.value) {
+            const daysLeft = props.maximumDays.value - diff - 1;
+            const startLimit = props.start.value.subtract({ days: daysLeft });
+            const endLimit = props.end.value.add({ days: daysLeft });
+            return !isBetween(date, startLimit, endLimit);
+          }
+        }
+        return false;
+      }
+      if (props.start.value) {
+        const maxDate = props.start.value.add({ days: props.maximumDays.value });
+        const minDate = props.start.value.subtract({ days: props.maximumDays.value });
+        return !isBetween(date, minDate, maxDate);
+      }
+    }
+    if (!props.start.value || props.end.value || isSameDay(props.start.value, date))
       return false;
-    if (Math.abs(date.compare(props.start.value)) > props.maximumDays.value)
-      return true;
     return false;
   };
   const isDateHighlightable = (date) => {
@@ -73,7 +91,7 @@ function useRangeCalendarState(props) {
         end
       };
     }
-    if (props.maximumDays?.value && !props.end.value && Math.abs(end.compare(start)) > props.maximumDays.value) {
+    if (props.maximumDays?.value && !props.end.value) {
       const cappedEnd = isStartBeforeFocused ? start.add({ days: props.maximumDays.value }) : start.subtract({ days: props.maximumDays.value });
       return {
         start,

package/dist/RangeCalendar/useRangeCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRangeCalendar.js","sources":["../../src/RangeCalendar/useRangeCalendar.ts"],"sourcesContent":["/*\n  * Adapted from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/builders/range-calendar/create.ts\n*/\n\nimport type { DateValue } from '@internationalized/date'\nimport type { Ref } from 'vue'\nimport type { Matcher } from '@/date'\nimport { isSameDay } from '@internationalized/date'\nimport { computed } from 'vue'\nimport { areAllDaysBetweenValid, isBefore, isBetween } from '@/date'\n\nexport type UseRangeCalendarProps = {\n  start: Ref<DateValue | undefined>\n  end: Ref<DateValue | undefined>\n  isDateDisabled: Matcher\n  isDateUnavailable: Matcher\n  isDateHighlightable?: Matcher\n  focusedValue: Ref<DateValue | undefined>\n  allowNonContiguousRanges: Ref<boolean>\n  fixedDate: Ref<'start' | 'end' | undefined>\n  maximumDays?: Ref<number | undefined>\n}\n\nexport function useRangeCalendarState(props: UseRangeCalendarProps) {\n  const isStartInvalid = computed(() => {\n    if (!props.start.value)\n      return false\n    if (props.isDateDisabled(props.start.value))\n      return true\n    return false\n  })\n\n  const isEndInvalid = computed(() => {\n    if (!props.end.value)\n      return false\n    if (props.isDateDisabled(props.end.value))\n      return true\n    return false\n  })\n\n  const isInvalid = computed(\n    () => {\n      if (isStartInvalid.value || isEndInvalid.value)\n        return false\n      if (props.start.value && props.end.value && isBefore(props.end.value, props.start.value))\n        return true\n      return false\n    },\n  )\n\n  const isSelectionStart = (date: DateValue) => {\n    if (!props.start.value)\n      return false\n    return isSameDay(props.start.value, date)\n  }\n\n  const isSelectionEnd = (date: DateValue) => {\n    if (!props.end.value)\n      return false\n    return isSameDay(props.end.value, date)\n  }\n\n  const isSelected = (date: DateValue) => {\n    if (props.start.value && isSameDay(props.start.value, date))\n      return true\n    if (props.end.value && isSameDay(props.end.value, date))\n      return true\n    if (props.end.value && props.start.value)\n      return isBetween(date, props.start.value, props.end.value)\n\n    return false\n  }\n\n  // Check if a date exceeds maximum days limit from the start date\n  const rangeIsDateDisabled = (date: DateValue) => {\n    if (props.isDateDisabled(date))\n      return true\n\n    if (!props.maximumDays?.value || !props.start.value || props.end.value || isSameDay(props.start.value, date))\n      return false\n\n    // Check if exceeds maximum days limit\n    if (Math.abs(date.compare(props.start.value)) > props.maximumDays.value)\n      return true\n\n    return false\n  }\n\n  const isDateHighlightable = (date: DateValue) => {\n    if (props.isDateHighlightable?.(date))\n      return true\n    return false\n  }\n\n  const highlightedRange = computed(() => {\n    if (props.start.value && props.end.value && !props.fixedDate.value)\n      return null\n    if (!props.start.value || !props.focusedValue.value)\n      return null\n\n    const isStartBeforeFocused = isBefore(props.start.value, props.focusedValue.value)\n    const start = isStartBeforeFocused ? props.start.value : props.focusedValue.value\n    const end = isStartBeforeFocused ? props.focusedValue.value : props.start.value\n\n    if (isSameDay(start, end)) {\n      return {\n        start,\n        end,\n      }\n    }\n\n    // If maximum days is set and the range exceeds it, limit the highlight\n    // We only apply this when we're in the middle of a selection (no end date yet)\n    if (props.maximumDays?.value && !props.end.value && Math.abs(end.compare(start)) > props.maximumDays.value) {\n      // Determine the direction of selection and limit to maximum days\n      const cappedEnd = isStartBeforeFocused\n        ? start.add({ days: props.maximumDays.value })\n        : start.subtract({ days: props.maximumDays.value })\n\n      return {\n        start,\n        end: cappedEnd,\n      }\n    }\n\n    const isValid = areAllDaysBetweenValid(start, end, props.allowNonContiguousRanges.value ? () => false : props.isDateUnavailable, rangeIsDateDisabled, props.isDateHighlightable)\n    if (isValid) {\n      return {\n        start,\n        end,\n      }\n    }\n    return null\n  })\n\n  const isHighlightedStart = (date: DateValue) => {\n    if (!highlightedRange.value || !highlightedRange.value.start)\n      return false\n    return isSameDay(highlightedRange.value.start, date)\n  }\n\n  const isHighlightedEnd = (date: DateValue) => {\n    if (!highlightedRange.value || !highlightedRange.value.end)\n      return false\n    return isSameDay(highlightedRange.value.end, date)\n  }\n\n  return {\n    isInvalid,\n    isSelected,\n    isDateHighlightable,\n    highlightedRange,\n    isSelectionStart,\n    isSelectionEnd,\n    isHighlightedStart,\n    isHighlightedEnd,\n    isDateDisabled: rangeIsDateDisabled,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useRangeCalendar.js","sources":["../../src/RangeCalendar/useRangeCalendar.ts"],"sourcesContent":["/*\n  * Adapted from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/builders/range-calendar/create.ts\n*/\n\nimport type { DateValue } from '@internationalized/date'\nimport type { Ref } from 'vue'\nimport type { Matcher } from '@/date'\nimport { isSameDay } from '@internationalized/date'\nimport { computed } from 'vue'\nimport { areAllDaysBetweenValid, getDaysBetween, isBefore, isBetween } from '@/date'\n\nexport type UseRangeCalendarProps = {\n  start: Ref<DateValue | undefined>\n  end: Ref<DateValue | undefined>\n  isDateDisabled: Matcher\n  isDateUnavailable: Matcher\n  isDateHighlightable?: Matcher\n  focusedValue: Ref<DateValue | undefined>\n  allowNonContiguousRanges: Ref<boolean>\n  fixedDate: Ref<'start' | 'end' | undefined>\n  maximumDays?: Ref<number | undefined>\n}\n\nexport function useRangeCalendarState(props: UseRangeCalendarProps) {\n  const isStartInvalid = computed(() => {\n    if (!props.start.value)\n      return false\n    if (props.isDateDisabled(props.start.value))\n      return true\n    return false\n  })\n\n  const isEndInvalid = computed(() => {\n    if (!props.end.value)\n      return false\n    if (props.isDateDisabled(props.end.value))\n      return true\n    return false\n  })\n\n  const isInvalid = computed(\n    () => {\n      if (isStartInvalid.value || isEndInvalid.value)\n        return false\n      if (props.start.value && props.end.value && isBefore(props.end.value, props.start.value))\n        return true\n      return false\n    },\n  )\n\n  const isSelectionStart = (date: DateValue) => {\n    if (!props.start.value)\n      return false\n    return isSameDay(props.start.value, date)\n  }\n\n  const isSelectionEnd = (date: DateValue) => {\n    if (!props.end.value)\n      return false\n    return isSameDay(props.end.value, date)\n  }\n\n  const isSelected = (date: DateValue) => {\n    if (props.start.value && isSameDay(props.start.value, date))\n      return true\n    if (props.end.value && isSameDay(props.end.value, date))\n      return true\n    if (props.end.value && props.start.value)\n      return isBetween(date, props.start.value, props.end.value)\n\n    return false\n  }\n\n  // Check if a date exceeds maximum days limit from the start date\n  const rangeIsDateDisabled = (date: DateValue) => {\n    if (props.isDateDisabled(date))\n      return true\n\n    // Check if exceeds maximum days limit\n    if (props.maximumDays?.value) {\n      if (props.start.value && props.end.value) {\n        if (props.fixedDate.value) {\n          const diff = getDaysBetween(props.start.value, props.end.value).length\n          if (diff <= props.maximumDays.value) {\n            const daysLeft = props.maximumDays.value - diff - 1\n            const startLimit = props.start.value.subtract({ days: daysLeft })\n            const endLimit = props.end.value.add({ days: daysLeft })\n            return !isBetween(date, startLimit, endLimit)\n          }\n        }\n        return false\n      }\n      if (props.start.value) {\n        const maxDate = props.start.value.add({ days: props.maximumDays.value })\n        const minDate = props.start.value.subtract({ days: props.maximumDays.value })\n        return !isBetween(date, minDate, maxDate)\n      }\n    }\n\n    if (!props.start.value || props.end.value || isSameDay(props.start.value, date))\n      return false\n\n    return false\n  }\n\n  const isDateHighlightable = (date: DateValue) => {\n    if (props.isDateHighlightable?.(date))\n      return true\n    return false\n  }\n\n  const highlightedRange = computed(() => {\n    if (props.start.value && props.end.value && !props.fixedDate.value)\n      return null\n    if (!props.start.value || !props.focusedValue.value)\n      return null\n\n    const isStartBeforeFocused = isBefore(props.start.value, props.focusedValue.value)\n    const start = isStartBeforeFocused ? props.start.value : props.focusedValue.value\n    const end = isStartBeforeFocused ? props.focusedValue.value : props.start.value\n\n    if (isSameDay(start, end)) {\n      return {\n        start,\n        end,\n      }\n    }\n\n    // If maximum days is set and the range exceeds it, limit the highlight\n    // We only apply this when we're in the middle of a selection (no end date yet)\n    if (props.maximumDays?.value && !props.end.value) {\n      // Determine the direction of selection and limit to maximum days\n      const cappedEnd = isStartBeforeFocused\n        ? start.add({ days: props.maximumDays.value })\n        : start.subtract({ days: props.maximumDays.value })\n\n      return {\n        start,\n        end: cappedEnd,\n      }\n    }\n\n    const isValid = areAllDaysBetweenValid(start, end, props.allowNonContiguousRanges.value ? () => false : props.isDateUnavailable, rangeIsDateDisabled, props.isDateHighlightable)\n    if (isValid) {\n      return {\n        start,\n        end,\n      }\n    }\n    return null\n  })\n\n  const isHighlightedStart = (date: DateValue) => {\n    if (!highlightedRange.value || !highlightedRange.value.start)\n      return false\n    return isSameDay(highlightedRange.value.start, date)\n  }\n\n  const isHighlightedEnd = (date: DateValue) => {\n    if (!highlightedRange.value || !highlightedRange.value.end)\n      return false\n    return isSameDay(highlightedRange.value.end, date)\n  }\n\n  return {\n    isInvalid,\n    isSelected,\n    isDateHighlightable,\n    highlightedRange,\n    isSelectionStart,\n    isSelectionEnd,\n    isHighlightedStart,\n    isHighlightedEnd,\n    isDateDisabled: rangeIsDateDisabled,\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/Select/SelectContent.cjs

@@ -46,13 +46,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       fragment.value = new DocumentFragment();
     });
     const presenceRef = vue.ref();
-    const renderPresence = vue.computed(() => props.forceMount || rootContext.open.value);
+    const present = vue.computed(() => props.forceMount || rootContext.open.value);
+    const renderPresence = vue.ref(present.value);
+    vue.watch(present, () => {
+      setTimeout(() => renderPresence.value = present.value);
+    });
     return (_ctx, _cache) => {
-      return renderPresence.value ? (vue.openBlock(), vue.createBlock(vue.unref(Presence_Presence.Presence), {
+      return present.value || renderPresence.value || presenceRef.value?.present ? (vue.openBlock(), vue.createBlock(vue.unref(Presence_Presence.Presence), {
         key: 0,
         ref_key: "presenceRef",
         ref: presenceRef,
-        present: true
+        present: present.value
       }, {
         default: vue.withCtx(() => [
           vue.createVNode(Select_SelectContentImpl._sfc_main, vue.normalizeProps(vue.guardReactiveProps({ ...vue.unref(forwarded), ..._ctx.$attrs })), {
@@ -63,7 +67,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }, 16)
         ]),
         _: 3
-      }, 512)) : !presenceRef.value?.present && fragment.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      }, 8, ["present"])) : fragment.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         (vue.openBlock(), vue.createBlock(vue.Teleport, { to: fragment.value }, [
           vue.createVNode(Select_SelectProvider._sfc_main, { context: vue.unref(rootContext) }, {
             default: vue.withCtx(() => [

package/dist/Select/SelectContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.cjs","sources":["../../src/Select/SelectContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  SelectContentImplEmits,\n  SelectContentImplProps,\n} from './SelectContentImpl.vue'\n\nexport type SelectContentEmits = SelectContentImplEmits\n\nexport interface SelectContentProps extends SelectContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\nimport { Presence } from '@/Presence'\nimport { useForwardPropsEmits } from '@/shared'\nimport SelectContentImpl from './SelectContentImpl.vue'\nimport SelectProvider from './SelectProvider.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectContentProps>()\n\nconst emits = defineEmits<SelectContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\n\nconst rootContext = injectSelectRootContext()\n\nconst fragment = ref<DocumentFragment>()\nonMounted(() => {\n  fragment.value = new DocumentFragment()\n})\n\nconst presenceRef = ref<InstanceType<typeof Presence>>()\nconst renderPresence = computed(() => props.forceMount || rootContext.open.value)\n</script>\n\n<template>\n  <Presence\n    v-if=\"renderPresence\"\n    ref=\"presenceRef\"\n    :present=\"true\"\n  >\n    <SelectContentImpl v-bind=\"{ ...forwarded, ...$attrs }\">\n      <slot />\n    </SelectContentImpl>\n  </Presence>\n\n  <div v-else-if=\"!presenceRef?.present && fragment\">\n    <Teleport :to=\"fragment\">\n      <SelectProvider :context=\"rootContext\">\n        <slot />\n      </SelectProvider>\n    </Teleport>\n  </div>\n</template>\n"],"names":["useForwardPropsEmits","injectSelectRootContext","ref","onMounted","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAA,MAAM,WAAWC,OAAsB,EAAA;AACvC,IAAAC,aAAA,CAAU,MAAM;AACd,MAAS,QAAA,CAAA,KAAA,GAAQ,IAAI,gBAAiB,EAAA;AAAA,KACvC,CAAA;AAED,IAAA,MAAM,cAAcD,OAAmC,EAAA;AACvD,IAAA,MAAM,iBAAiBE,YAAS,CAAA,MAAM,MAAM,UAAc,IAAA,WAAA,CAAY,KAAK,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectContent.cjs","sources":["../../src/Select/SelectContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  SelectContentImplEmits,\n  SelectContentImplProps,\n} from './SelectContentImpl.vue'\nimport { computed, onMounted, ref, watch } from 'vue'\n\nexport type SelectContentEmits = SelectContentImplEmits\n\nexport interface SelectContentProps extends SelectContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useForwardPropsEmits } from '@/shared'\nimport SelectContentImpl from './SelectContentImpl.vue'\nimport SelectProvider from './SelectProvider.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectContentProps>()\n\nconst emits = defineEmits<SelectContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\n\nconst rootContext = injectSelectRootContext()\n\nconst fragment = ref<DocumentFragment>()\nonMounted(() => {\n  fragment.value = new DocumentFragment()\n})\n\nconst presenceRef = ref<InstanceType<typeof Presence>>()\n\nconst present = computed(() => props.forceMount || rootContext.open.value)\nconst renderPresence = ref(present.value)\n\nwatch(present, () => {\n  // Toggle render presence after a delay (nextTick is not enough)\n  // to allow children to re-render with the latest state.\n  // Otherwise, they would remain in the old state during the transition,\n  // which would prevent the animation that depend on state (e.g., data-[state=closed])\n  // from being applied accurately.\n  // @see https://github.com/unovue/reka-ui/issues/1865\n  setTimeout(() => renderPresence.value = present.value)\n})\n</script>\n\n<template>\n  <Presence\n    v-if=\"present || renderPresence || presenceRef?.present\"\n    ref=\"presenceRef\"\n    :present=\"present\"\n  >\n    <SelectContentImpl v-bind=\"{ ...forwarded, ...$attrs }\">\n      <slot />\n    </SelectContentImpl>\n  </Presence>\n\n  <div v-else-if=\"fragment\">\n    <Teleport :to=\"fragment\">\n      <SelectProvider :context=\"rootContext\">\n        <slot />\n      </SelectProvider>\n    </Teleport>\n  </div>\n</template>\n"],"names":["useForwardPropsEmits","injectSelectRootContext","ref","onMounted","computed","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAA,MAAM,WAAWC,OAAsB,EAAA;AACvC,IAAAC,aAAA,CAAU,MAAM;AACd,MAAS,QAAA,CAAA,KAAA,GAAQ,IAAI,gBAAiB,EAAA;AAAA,KACvC,CAAA;AAED,IAAA,MAAM,cAAcD,OAAmC,EAAA;AAEvD,IAAA,MAAM,UAAUE,YAAS,CAAA,MAAM,MAAM,UAAc,IAAA,WAAA,CAAY,KAAK,KAAK,CAAA;AACzE,IAAM,MAAA,cAAA,GAAiBF,OAAI,CAAA,OAAA,CAAQ,KAAK,CAAA;AAExC,IAAAG,SAAA,CAAM,SAAS,MAAM;AAOnB,MAAA,UAAA,CAAW,MAAM,cAAA,CAAe,KAAQ,GAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,KACtD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectContent.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, computed, createBlock, createElementBlock, createCommentVNode, openBlock, unref, withCtx, createVNode, normalizeProps, guardReactiveProps, renderSlot, Teleport } from 'vue';
+import { defineComponent, ref, onMounted, computed, watch, createBlock, createElementBlock, createCommentVNode, openBlock, unref, withCtx, createVNode, normalizeProps, guardReactiveProps, renderSlot, Teleport } from 'vue';
 import { _ as _sfc_main$1 } from './SelectContentImpl.js';
 import { _ as _sfc_main$2 } from './SelectProvider.js';
 import { u as useForwardPropsEmits } from '../shared/useForwardPropsEmits.js';
@@ -44,13 +44,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       fragment.value = new DocumentFragment();
     });
     const presenceRef = ref();
-    const renderPresence = computed(() => props.forceMount || rootContext.open.value);
+    const present = computed(() => props.forceMount || rootContext.open.value);
+    const renderPresence = ref(present.value);
+    watch(present, () => {
+      setTimeout(() => renderPresence.value = present.value);
+    });
     return (_ctx, _cache) => {
-      return renderPresence.value ? (openBlock(), createBlock(unref(Presence), {
+      return present.value || renderPresence.value || presenceRef.value?.present ? (openBlock(), createBlock(unref(Presence), {
         key: 0,
         ref_key: "presenceRef",
         ref: presenceRef,
-        present: true
+        present: present.value
       }, {
         default: withCtx(() => [
           createVNode(_sfc_main$1, normalizeProps(guardReactiveProps({ ...unref(forwarded), ..._ctx.$attrs })), {
@@ -61,7 +65,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 16)
         ]),
         _: 3
-      }, 512)) : !presenceRef.value?.present && fragment.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      }, 8, ["present"])) : fragment.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
         (openBlock(), createBlock(Teleport, { to: fragment.value }, [
           createVNode(_sfc_main$2, { context: unref(rootContext) }, {
             default: withCtx(() => [

package/dist/Select/SelectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.js","sources":["../../src/Select/SelectContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  SelectContentImplEmits,\n  SelectContentImplProps,\n} from './SelectContentImpl.vue'\n\nexport type SelectContentEmits = SelectContentImplEmits\n\nexport interface SelectContentProps extends SelectContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\nimport { Presence } from '@/Presence'\nimport { useForwardPropsEmits } from '@/shared'\nimport SelectContentImpl from './SelectContentImpl.vue'\nimport SelectProvider from './SelectProvider.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectContentProps>()\n\nconst emits = defineEmits<SelectContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\n\nconst rootContext = injectSelectRootContext()\n\nconst fragment = ref<DocumentFragment>()\nonMounted(() => {\n  fragment.value = new DocumentFragment()\n})\n\nconst presenceRef = ref<InstanceType<typeof Presence>>()\nconst renderPresence = computed(() => props.forceMount || rootContext.open.value)\n</script>\n\n<template>\n  <Presence\n    v-if=\"renderPresence\"\n    ref=\"presenceRef\"\n    :present=\"true\"\n  >\n    <SelectContentImpl v-bind=\"{ ...forwarded, ...$attrs }\">\n      <slot />\n    </SelectContentImpl>\n  </Presence>\n\n  <div v-else-if=\"!presenceRef?.present && fragment\">\n    <Teleport :to=\"fragment\">\n      <SelectProvider :context=\"rootContext\">\n        <slot />\n      </SelectProvider>\n    </Teleport>\n  </div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,MAAM,WAAW,GAAsB,EAAA;AACvC,IAAA,SAAA,CAAU,MAAM;AACd,MAAS,QAAA,CAAA,KAAA,GAAQ,IAAI,gBAAiB,EAAA;AAAA,KACvC,CAAA;AAED,IAAA,MAAM,cAAc,GAAmC,EAAA;AACvD,IAAA,MAAM,iBAAiB,QAAS,CAAA,MAAM,MAAM,UAAc,IAAA,WAAA,CAAY,KAAK,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectContent.js","sources":["../../src/Select/SelectContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  SelectContentImplEmits,\n  SelectContentImplProps,\n} from './SelectContentImpl.vue'\nimport { computed, onMounted, ref, watch } from 'vue'\n\nexport type SelectContentEmits = SelectContentImplEmits\n\nexport interface SelectContentProps extends SelectContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useForwardPropsEmits } from '@/shared'\nimport SelectContentImpl from './SelectContentImpl.vue'\nimport SelectProvider from './SelectProvider.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectContentProps>()\n\nconst emits = defineEmits<SelectContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\n\nconst rootContext = injectSelectRootContext()\n\nconst fragment = ref<DocumentFragment>()\nonMounted(() => {\n  fragment.value = new DocumentFragment()\n})\n\nconst presenceRef = ref<InstanceType<typeof Presence>>()\n\nconst present = computed(() => props.forceMount || rootContext.open.value)\nconst renderPresence = ref(present.value)\n\nwatch(present, () => {\n  // Toggle render presence after a delay (nextTick is not enough)\n  // to allow children to re-render with the latest state.\n  // Otherwise, they would remain in the old state during the transition,\n  // which would prevent the animation that depend on state (e.g., data-[state=closed])\n  // from being applied accurately.\n  // @see https://github.com/unovue/reka-ui/issues/1865\n  setTimeout(() => renderPresence.value = present.value)\n})\n</script>\n\n<template>\n  <Presence\n    v-if=\"present || renderPresence || presenceRef?.present\"\n    ref=\"presenceRef\"\n    :present=\"present\"\n  >\n    <SelectContentImpl v-bind=\"{ ...forwarded, ...$attrs }\">\n      <slot />\n    </SelectContentImpl>\n  </Presence>\n\n  <div v-else-if=\"fragment\">\n    <Teleport :to=\"fragment\">\n      <SelectProvider :context=\"rootContext\">\n        <slot />\n      </SelectProvider>\n    </Teleport>\n  </div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,MAAM,WAAW,GAAsB,EAAA;AACvC,IAAA,SAAA,CAAU,MAAM;AACd,MAAS,QAAA,CAAA,KAAA,GAAQ,IAAI,gBAAiB,EAAA;AAAA,KACvC,CAAA;AAED,IAAA,MAAM,cAAc,GAAmC,EAAA;AAEvD,IAAA,MAAM,UAAU,QAAS,CAAA,MAAM,MAAM,UAAc,IAAA,WAAA,CAAY,KAAK,KAAK,CAAA;AACzE,IAAM,MAAA,cAAA,GAAiB,GAAI,CAAA,OAAA,CAAQ,KAAK,CAAA;AAExC,IAAA,KAAA,CAAM,SAAS,MAAM;AAOnB,MAAA,UAAA,CAAW,MAAM,cAAA,CAAe,KAAQ,GAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,KACtD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectContentImpl.cjs

@@ -2,7 +2,6 @@
 
 const vue = require('vue');
 const core = require('@vueuse/core');
-const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Menu_utils = require('../Menu/utils.cjs');
 const Select_SelectItemAlignedPosition = require('./SelectItemAlignedPosition.cjs');
 const Select_SelectPopperPosition = require('./SelectPopperPosition.cjs');
@@ -15,6 +14,7 @@ const shared_useHideOthers = require('../shared/useHideOthers.cjs');
 const shared_useTypeahead = require('../shared/useTypeahead.cjs');
 const shared_useForwardProps = require('../shared/useForwardProps.cjs');
 const FocusScope_FocusScope = require('../FocusScope/FocusScope.cjs');
+const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Select_SelectRoot = require('./SelectRoot.cjs');
 
 const SelectContentDefaultContextValue = {