reka-ui 2.2.1 → 2.3.1

package/dist/Accordion/AccordionItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.cjs","sources":["../../src/Accordion/AccordionItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, VNodeRef } from 'vue'\nimport type { CollapsibleRootProps } from '../Collapsible'\nimport { createContext, useArrowNavigation, useForwardExpose } from '@/shared'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\n\nenum AccordionItemState {\n  Open = 'open',\n  Closed = 'closed',\n}\n\nexport interface AccordionItemProps\n  extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   * When `true`, prevents the user from interacting with the item.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string\n}\n\ninterface AccordionItemContext {\n  open: ComputedRef<boolean>\n  dataState: ComputedRef<AccordionItemState>\n  disabled: ComputedRef<boolean>\n  dataDisabled: ComputedRef<'' | undefined>\n  triggerId: string\n  currentRef: VNodeRef\n  currentElement: ComputedRef<HTMLElement | undefined>\n  value: ComputedRef<string>\n}\n\nexport const [injectAccordionItemContext, provideAccordionItemContext]\n  = createContext<AccordionItemContext>('AccordionItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { CollapsibleRoot } from '@/Collapsible'\nimport { computed } from 'vue'\n\nconst props = defineProps<AccordionItemProps>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst rootContext = injectAccordionRootContext()\n\nconst open = computed(() =>\n  rootContext.isSingle.value\n    ? props.value === rootContext.modelValue.value\n    : Array.isArray(rootContext.modelValue.value)\n      && rootContext.modelValue.value.includes(props.value),\n)\n\nconst disabled = computed(() => {\n  return (rootContext.disabled.value || props.disabled)\n})\n\nconst dataDisabled = computed(() => (disabled.value ? '' : undefined))\n\nconst dataState = computed(() =>\n  open.value ? AccordionItemState.Open : AccordionItemState.Closed,\n)\n\ndefineExpose({ open, dataDisabled })\nconst { currentRef, currentElement } = useForwardExpose()\n\nprovideAccordionItemContext({\n  open,\n  dataState,\n  disabled,\n  dataDisabled,\n  triggerId: '',\n  currentRef,\n  currentElement,\n  value: computed(() => props.value),\n})\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  const target = e.target as HTMLElement\n  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]') ?? [])\n\n  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)\n  if (collectionItemIndex === -1)\n    return null\n\n  useArrowNavigation(\n    e,\n    currentElement.value,\n    rootContext.parentElement.value!,\n    {\n      arrowKeyOptions: rootContext.orientation,\n      dir: rootContext.direction.value,\n      focus: true,\n    },\n  )\n}\n</script>\n\n<template>\n  <CollapsibleRoot\n    :data-orientation=\"rootContext.orientation\"\n    :data-disabled=\"dataDisabled\"\n    :data-state=\"dataState\"\n    :disabled=\"disabled\"\n    :open=\"open\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :unmount-on-hide=\"rootContext.unmountOnHide.value\"\n    @keydown.up.down.left.right.home.end=\"handleArrowKey\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"],"names":["createContext","injectAccordionRootContext","computed","useForwardExpose","useArrowNavigation"],"mappings":";;;;;;;;;AAqCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAoC,eAAe;;;;;;;;;;;AAOvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AASd,IAAA,MAAM,cAAcC,kDAA2B,EAAA;AAE/C,IAAA,MAAM,IAAO,GAAAC,YAAA;AAAA,MAAS,MACpB,YAAY,QAAS,CAAA,KAAA,GACjB,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KACvC,GAAA,KAAA,CAAM,QAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CACvC,IAAA,WAAA,CAAY,WAAW,KAAM,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,KAC1D;AAEA,IAAM,MAAA,QAAA,GAAWA,aAAS,MAAM;AAC9B,MAAQ,OAAA,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,QAAA;AAAA,KAC7C,CAAA;AAED,IAAA,MAAM,eAAeA,YAAS,CAAA,MAAO,QAAS,CAAA,KAAA,GAAQ,KAAK,MAAU,CAAA;AAErE,IAAA,MAAM,SAAY,GAAAA,YAAA;AAAA,MAAS,MACzB,IAAK,CAAA,KAAA,GAAQ,MAA0B,cAAA,QAAA;AAAA,KACzC;AAEA,IAAa,QAAA,CAAA,EAAE,IAAM,EAAA,YAAA,EAAc,CAAA;AACnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,UAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAAD,YAAA,CAAS,MAAM,KAAA,CAAM,KAAK;AAAA,KAClC,CAAA;AAED,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAM,MAAA,kBAAA,GAAoC,KAAM,CAAA,IAAA,CAAK,WAAY,CAAA,aAAA,CAAc,OAAO,gBAAiB,CAAA,6BAA6B,CAAK,IAAA,EAAE,CAAA;AAE3I,MAAA,MAAM,mBAAsB,GAAA,kBAAA,CAAmB,SAAU,CAAA,CAAA,IAAA,KAAQ,SAAS,MAAM,CAAA;AAChF,MAAA,IAAI,mBAAwB,KAAA,EAAA;AAC1B,QAAO,OAAA,IAAA;AAET,MAAAE,4CAAA;AAAA,QACE,CAAA;AAAA,QACA,cAAe,CAAA,KAAA;AAAA,QACf,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B;AAAA,UACE,iBAAiB,WAAY,CAAA,WAAA;AAAA,UAC7B,GAAA,EAAK,YAAY,SAAU,CAAA,KAAA;AAAA,UAC3B,KAAO,EAAA;AAAA;AACT,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AccordionItem.cjs","sources":["../../src/Accordion/AccordionItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, VNodeRef } from 'vue'\nimport type { CollapsibleRootProps } from '../Collapsible'\nimport { createContext, useArrowNavigation, useForwardExpose } from '@/shared'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\n\nenum AccordionItemState {\n  Open = 'open',\n  Closed = 'closed',\n}\n\nexport interface AccordionItemProps\n  extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   * When `true`, prevents the user from interacting with the item.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string\n}\n\ninterface AccordionItemContext {\n  open: ComputedRef<boolean>\n  dataState: ComputedRef<AccordionItemState>\n  disabled: ComputedRef<boolean>\n  dataDisabled: ComputedRef<'' | undefined>\n  triggerId: string\n  currentRef: VNodeRef\n  currentElement: ComputedRef<HTMLElement | undefined>\n  value: ComputedRef<string>\n}\n\nexport const [injectAccordionItemContext, provideAccordionItemContext]\n  = createContext<AccordionItemContext>('AccordionItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CollapsibleRoot } from '@/Collapsible'\n\nconst props = defineProps<AccordionItemProps>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst rootContext = injectAccordionRootContext()\n\nconst open = computed(() =>\n  rootContext.isSingle.value\n    ? props.value === rootContext.modelValue.value\n    : Array.isArray(rootContext.modelValue.value)\n      && rootContext.modelValue.value.includes(props.value),\n)\n\nconst disabled = computed(() => {\n  return (rootContext.disabled.value || props.disabled)\n})\n\nconst dataDisabled = computed(() => (disabled.value ? '' : undefined))\n\nconst dataState = computed(() =>\n  open.value ? AccordionItemState.Open : AccordionItemState.Closed,\n)\n\ndefineExpose({ open, dataDisabled })\nconst { currentRef, currentElement } = useForwardExpose()\n\nprovideAccordionItemContext({\n  open,\n  dataState,\n  disabled,\n  dataDisabled,\n  triggerId: '',\n  currentRef,\n  currentElement,\n  value: computed(() => props.value),\n})\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  const target = e.target as HTMLElement\n  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]') ?? [])\n\n  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)\n  if (collectionItemIndex === -1)\n    return null\n\n  useArrowNavigation(\n    e,\n    currentElement.value,\n    rootContext.parentElement.value!,\n    {\n      arrowKeyOptions: rootContext.orientation,\n      dir: rootContext.direction.value,\n      focus: true,\n    },\n  )\n}\n</script>\n\n<template>\n  <CollapsibleRoot\n    :data-orientation=\"rootContext.orientation\"\n    :data-disabled=\"dataDisabled\"\n    :data-state=\"dataState\"\n    :disabled=\"disabled\"\n    :open=\"open\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :unmount-on-hide=\"rootContext.unmountOnHide.value\"\n    @keydown.up.down.left.right.home.end=\"handleArrowKey\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"],"names":["createContext","injectAccordionRootContext","computed","useForwardExpose","useArrowNavigation"],"mappings":";;;;;;;;;AAqCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAoC,eAAe;;;;;;;;;;;AAOvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AASd,IAAA,MAAM,cAAcC,kDAA2B,EAAA;AAE/C,IAAA,MAAM,IAAO,GAAAC,YAAA;AAAA,MAAS,MACpB,YAAY,QAAS,CAAA,KAAA,GACjB,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KACvC,GAAA,KAAA,CAAM,QAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CACvC,IAAA,WAAA,CAAY,WAAW,KAAM,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,KAC1D;AAEA,IAAM,MAAA,QAAA,GAAWA,aAAS,MAAM;AAC9B,MAAQ,OAAA,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,QAAA;AAAA,KAC7C,CAAA;AAED,IAAA,MAAM,eAAeA,YAAS,CAAA,MAAO,QAAS,CAAA,KAAA,GAAQ,KAAK,MAAU,CAAA;AAErE,IAAA,MAAM,SAAY,GAAAA,YAAA;AAAA,MAAS,MACzB,IAAK,CAAA,KAAA,GAAQ,MAA0B,cAAA,QAAA;AAAA,KACzC;AAEA,IAAa,QAAA,CAAA,EAAE,IAAM,EAAA,YAAA,EAAc,CAAA;AACnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,UAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAAD,YAAA,CAAS,MAAM,KAAA,CAAM,KAAK;AAAA,KAClC,CAAA;AAED,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAM,MAAA,kBAAA,GAAoC,KAAM,CAAA,IAAA,CAAK,WAAY,CAAA,aAAA,CAAc,OAAO,gBAAiB,CAAA,6BAA6B,CAAK,IAAA,EAAE,CAAA;AAE3I,MAAA,MAAM,mBAAsB,GAAA,kBAAA,CAAmB,SAAU,CAAA,CAAA,IAAA,KAAQ,SAAS,MAAM,CAAA;AAChF,MAAA,IAAI,mBAAwB,KAAA,EAAA;AAC1B,QAAO,OAAA,IAAA;AAET,MAAAE,4CAAA;AAAA,QACE,CAAA;AAAA,QACA,cAAe,CAAA,KAAA;AAAA,QACf,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B;AAAA,UACE,iBAAiB,WAAY,CAAA,WAAA;AAAA,UAC7B,GAAA,EAAK,YAAY,SAAU,CAAA,KAAA;AAAA,UAC3B,KAAO,EAAA;AAAA;AACT,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../src/Accordion/AccordionItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, VNodeRef } from 'vue'\nimport type { CollapsibleRootProps } from '../Collapsible'\nimport { createContext, useArrowNavigation, useForwardExpose } from '@/shared'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\n\nenum AccordionItemState {\n  Open = 'open',\n  Closed = 'closed',\n}\n\nexport interface AccordionItemProps\n  extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   * When `true`, prevents the user from interacting with the item.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string\n}\n\ninterface AccordionItemContext {\n  open: ComputedRef<boolean>\n  dataState: ComputedRef<AccordionItemState>\n  disabled: ComputedRef<boolean>\n  dataDisabled: ComputedRef<'' | undefined>\n  triggerId: string\n  currentRef: VNodeRef\n  currentElement: ComputedRef<HTMLElement | undefined>\n  value: ComputedRef<string>\n}\n\nexport const [injectAccordionItemContext, provideAccordionItemContext]\n  = createContext<AccordionItemContext>('AccordionItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { CollapsibleRoot } from '@/Collapsible'\nimport { computed } from 'vue'\n\nconst props = defineProps<AccordionItemProps>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst rootContext = injectAccordionRootContext()\n\nconst open = computed(() =>\n  rootContext.isSingle.value\n    ? props.value === rootContext.modelValue.value\n    : Array.isArray(rootContext.modelValue.value)\n      && rootContext.modelValue.value.includes(props.value),\n)\n\nconst disabled = computed(() => {\n  return (rootContext.disabled.value || props.disabled)\n})\n\nconst dataDisabled = computed(() => (disabled.value ? '' : undefined))\n\nconst dataState = computed(() =>\n  open.value ? AccordionItemState.Open : AccordionItemState.Closed,\n)\n\ndefineExpose({ open, dataDisabled })\nconst { currentRef, currentElement } = useForwardExpose()\n\nprovideAccordionItemContext({\n  open,\n  dataState,\n  disabled,\n  dataDisabled,\n  triggerId: '',\n  currentRef,\n  currentElement,\n  value: computed(() => props.value),\n})\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  const target = e.target as HTMLElement\n  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]') ?? [])\n\n  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)\n  if (collectionItemIndex === -1)\n    return null\n\n  useArrowNavigation(\n    e,\n    currentElement.value,\n    rootContext.parentElement.value!,\n    {\n      arrowKeyOptions: rootContext.orientation,\n      dir: rootContext.direction.value,\n      focus: true,\n    },\n  )\n}\n</script>\n\n<template>\n  <CollapsibleRoot\n    :data-orientation=\"rootContext.orientation\"\n    :data-disabled=\"dataDisabled\"\n    :data-state=\"dataState\"\n    :disabled=\"disabled\"\n    :open=\"open\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :unmount-on-hide=\"rootContext.unmountOnHide.value\"\n    @keydown.up.down.left.right.home.end=\"handleArrowKey\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;AAqCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAoC,eAAe;;;;;;;;;;;AAOvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AASd,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAE/C,IAAA,MAAM,IAAO,GAAA,QAAA;AAAA,MAAS,MACpB,YAAY,QAAS,CAAA,KAAA,GACjB,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KACvC,GAAA,KAAA,CAAM,QAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CACvC,IAAA,WAAA,CAAY,WAAW,KAAM,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,KAC1D;AAEA,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAQ,OAAA,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,QAAA;AAAA,KAC7C,CAAA;AAED,IAAA,MAAM,eAAe,QAAS,CAAA,MAAO,QAAS,CAAA,KAAA,GAAQ,KAAK,MAAU,CAAA;AAErE,IAAA,MAAM,SAAY,GAAA,QAAA;AAAA,MAAS,MACzB,IAAK,CAAA,KAAA,GAAQ,MAA0B,cAAA,QAAA;AAAA,KACzC;AAEA,IAAa,QAAA,CAAA,EAAE,IAAM,EAAA,YAAA,EAAc,CAAA;AACnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,UAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAA,QAAA,CAAS,MAAM,KAAA,CAAM,KAAK;AAAA,KAClC,CAAA;AAED,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAM,MAAA,kBAAA,GAAoC,KAAM,CAAA,IAAA,CAAK,WAAY,CAAA,aAAA,CAAc,OAAO,gBAAiB,CAAA,6BAA6B,CAAK,IAAA,EAAE,CAAA;AAE3I,MAAA,MAAM,mBAAsB,GAAA,kBAAA,CAAmB,SAAU,CAAA,CAAA,IAAA,KAAQ,SAAS,MAAM,CAAA;AAChF,MAAA,IAAI,mBAAwB,KAAA,EAAA;AAC1B,QAAO,OAAA,IAAA;AAET,MAAA,kBAAA;AAAA,QACE,CAAA;AAAA,QACA,cAAe,CAAA,KAAA;AAAA,QACf,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B;AAAA,UACE,iBAAiB,WAAY,CAAA,WAAA;AAAA,UAC7B,GAAA,EAAK,YAAY,SAAU,CAAA,KAAA;AAAA,UAC3B,KAAO,EAAA;AAAA;AACT,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AccordionItem.js","sources":["../../src/Accordion/AccordionItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, VNodeRef } from 'vue'\nimport type { CollapsibleRootProps } from '../Collapsible'\nimport { createContext, useArrowNavigation, useForwardExpose } from '@/shared'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\n\nenum AccordionItemState {\n  Open = 'open',\n  Closed = 'closed',\n}\n\nexport interface AccordionItemProps\n  extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   * When `true`, prevents the user from interacting with the item.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string\n}\n\ninterface AccordionItemContext {\n  open: ComputedRef<boolean>\n  dataState: ComputedRef<AccordionItemState>\n  disabled: ComputedRef<boolean>\n  dataDisabled: ComputedRef<'' | undefined>\n  triggerId: string\n  currentRef: VNodeRef\n  currentElement: ComputedRef<HTMLElement | undefined>\n  value: ComputedRef<string>\n}\n\nexport const [injectAccordionItemContext, provideAccordionItemContext]\n  = createContext<AccordionItemContext>('AccordionItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CollapsibleRoot } from '@/Collapsible'\n\nconst props = defineProps<AccordionItemProps>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst rootContext = injectAccordionRootContext()\n\nconst open = computed(() =>\n  rootContext.isSingle.value\n    ? props.value === rootContext.modelValue.value\n    : Array.isArray(rootContext.modelValue.value)\n      && rootContext.modelValue.value.includes(props.value),\n)\n\nconst disabled = computed(() => {\n  return (rootContext.disabled.value || props.disabled)\n})\n\nconst dataDisabled = computed(() => (disabled.value ? '' : undefined))\n\nconst dataState = computed(() =>\n  open.value ? AccordionItemState.Open : AccordionItemState.Closed,\n)\n\ndefineExpose({ open, dataDisabled })\nconst { currentRef, currentElement } = useForwardExpose()\n\nprovideAccordionItemContext({\n  open,\n  dataState,\n  disabled,\n  dataDisabled,\n  triggerId: '',\n  currentRef,\n  currentElement,\n  value: computed(() => props.value),\n})\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  const target = e.target as HTMLElement\n  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]') ?? [])\n\n  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)\n  if (collectionItemIndex === -1)\n    return null\n\n  useArrowNavigation(\n    e,\n    currentElement.value,\n    rootContext.parentElement.value!,\n    {\n      arrowKeyOptions: rootContext.orientation,\n      dir: rootContext.direction.value,\n      focus: true,\n    },\n  )\n}\n</script>\n\n<template>\n  <CollapsibleRoot\n    :data-orientation=\"rootContext.orientation\"\n    :data-disabled=\"dataDisabled\"\n    :data-state=\"dataState\"\n    :disabled=\"disabled\"\n    :open=\"open\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :unmount-on-hide=\"rootContext.unmountOnHide.value\"\n    @keydown.up.down.left.right.home.end=\"handleArrowKey\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;AAqCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAoC,eAAe;;;;;;;;;;;AAOvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AASd,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAE/C,IAAA,MAAM,IAAO,GAAA,QAAA;AAAA,MAAS,MACpB,YAAY,QAAS,CAAA,KAAA,GACjB,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KACvC,GAAA,KAAA,CAAM,QAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CACvC,IAAA,WAAA,CAAY,WAAW,KAAM,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,KAC1D;AAEA,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAQ,OAAA,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,QAAA;AAAA,KAC7C,CAAA;AAED,IAAA,MAAM,eAAe,QAAS,CAAA,MAAO,QAAS,CAAA,KAAA,GAAQ,KAAK,MAAU,CAAA;AAErE,IAAA,MAAM,SAAY,GAAA,QAAA;AAAA,MAAS,MACzB,IAAK,CAAA,KAAA,GAAQ,MAA0B,cAAA,QAAA;AAAA,KACzC;AAEA,IAAa,QAAA,CAAA,EAAE,IAAM,EAAA,YAAA,EAAc,CAAA;AACnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,UAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAA,QAAA,CAAS,MAAM,KAAA,CAAM,KAAK;AAAA,KAClC,CAAA;AAED,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAM,MAAA,kBAAA,GAAoC,KAAM,CAAA,IAAA,CAAK,WAAY,CAAA,aAAA,CAAc,OAAO,gBAAiB,CAAA,6BAA6B,CAAK,IAAA,EAAE,CAAA;AAE3I,MAAA,MAAM,mBAAsB,GAAA,kBAAA,CAAmB,SAAU,CAAA,CAAA,IAAA,KAAQ,SAAS,MAAM,CAAA;AAChF,MAAA,IAAI,mBAAwB,KAAA,EAAA;AAC1B,QAAO,OAAA,IAAA;AAET,MAAA,kBAAA;AAAA,QACE,CAAA;AAAA,QACA,cAAe,CAAA,KAAA;AAAA,QACf,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B;AAAA,UACE,iBAAiB,WAAY,CAAA,WAAA;AAAA,UAC7B,GAAA,EAAK,YAAY,SAAU,CAAA,KAAA;AAAA,UAC3B,KAAO,EAAA;AAAA;AACT,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionRoot.cjs","sources":["../../src/Accordion/AccordionRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue, DataOrientation, Direction, SingleOrMultipleProps, SingleOrMultipleType } from '@/shared/types'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface AccordionRootProps<T = string | string[]>\n  extends PrimitiveProps, SingleOrMultipleProps<T> {\n  /**\n   * When type is \"single\", allows closing content when clicking trigger for an open item.\n   * When type is \"multiple\", this prop has no effect.\n   *\n   * @defaultValue false\n   */\n  collapsible?: boolean\n\n  /**\n   * When `true`, prevents the user from interacting with the accordion and all its items\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n\n  /**\n   * The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.\n   *\n   * @defaultValue \"ltr\"\n   */\n  dir?: Direction\n\n  /**\n   * The orientation of the accordion.\n   *\n   * @defaultValue \"vertical\"\n   */\n  orientation?: DataOrientation\n\n  /**\n   * When `true`, the element will be unmounted on closed state.\n   *\n   * @defaultValue `true`\n   */\n  unmountOnHide?: boolean\n}\n\nexport type AccordionRootEmits<T extends SingleOrMultipleType = SingleOrMultipleType> = {\n  /**\n   * Event handler called when the expanded state of an item changes\n   */\n  'update:modelValue': [value: (T extends 'single' ? string : string[]) | undefined]\n}\n\nexport type AccordionRootContext<P extends AccordionRootProps> = {\n  disabled: Ref<P['disabled']>\n  direction: Ref<P['dir']>\n  orientation: P['orientation']\n  parentElement: Ref<HTMLElement | undefined>\n  changeModelValue: (value: string) => void\n  isSingle: ComputedRef<boolean>\n  modelValue: Ref<AcceptableValue | AcceptableValue[] | undefined>\n  collapsible: boolean\n  unmountOnHide: Ref<boolean>\n}\n\nexport const [injectAccordionRootContext, provideAccordionRootContext]\n  = createContext<AccordionRootContext<AccordionRootProps>>('AccordionRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends (string | string[]), ExplicitType extends SingleOrMultipleType\">\nimport { Primitive } from '@/Primitive'\nimport { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'\nimport { toRefs } from 'vue'\n\nconst props = withDefaults(defineProps<AccordionRootProps<T>>(), {\n  disabled: false,\n  orientation: 'vertical',\n  collapsible: false,\n  unmountOnHide: true,\n})\n\nconst emits = defineEmits<AccordionRootEmits<ExplicitType>>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { dir, disabled, unmountOnHide } = toRefs(props)\nconst direction = useDirection(dir)\n\nconst { modelValue, changeModelValue, isSingle } = useSingleOrMultipleValue(props, emits)\n\nconst { forwardRef, currentElement: parentElement } = useForwardExpose()\n\nprovideAccordionRootContext({\n  disabled,\n  direction,\n  orientation: props.orientation,\n  parentElement,\n  isSingle,\n  collapsible: props.collapsible,\n  modelValue,\n  changeModelValue,\n  unmountOnHide,\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":["createContext","toRefs","useDirection","useSingleOrMultipleValue","useForwardExpose"],"mappings":";;;;;;;;;AAgEO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAwD,eAAe;;;;;;;;;;;;;;;;;AAQ3E,IAAA,MAAM,KAAQ,GAAA,OAAA;AAOd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,EAAE,GAAK,EAAA,QAAA,EAAU,aAAc,EAAA,GAAIC,WAAO,KAAK,CAAA;AACrD,IAAM,MAAA,SAAA,GAAYC,iCAAa,GAAG,CAAA;AAElC,IAAA,MAAM,EAAE,UAAY,EAAA,gBAAA,EAAkB,UAAa,GAAAC,wDAAA,CAAyB,OAAO,KAAK,CAAA;AAExF,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkBC,wCAAiB,EAAA;AAEvE,IAA4B,2BAAA,CAAA;AAAA,MAC1B,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,aAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,UAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AccordionRoot.cjs","sources":["../../src/Accordion/AccordionRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue, DataOrientation, Direction, SingleOrMultipleProps, SingleOrMultipleType } from '@/shared/types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface AccordionRootProps<T = string | string[]>\n  extends PrimitiveProps, SingleOrMultipleProps<T> {\n  /**\n   * When type is \"single\", allows closing content when clicking trigger for an open item.\n   * When type is \"multiple\", this prop has no effect.\n   *\n   * @defaultValue false\n   */\n  collapsible?: boolean\n\n  /**\n   * When `true`, prevents the user from interacting with the accordion and all its items\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n\n  /**\n   * The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.\n   *\n   * @defaultValue \"ltr\"\n   */\n  dir?: Direction\n\n  /**\n   * The orientation of the accordion.\n   *\n   * @defaultValue \"vertical\"\n   */\n  orientation?: DataOrientation\n\n  /**\n   * When `true`, the element will be unmounted on closed state.\n   *\n   * @defaultValue `true`\n   */\n  unmountOnHide?: boolean\n}\n\nexport type AccordionRootEmits<T extends SingleOrMultipleType = SingleOrMultipleType> = {\n  /**\n   * Event handler called when the expanded state of an item changes\n   */\n  'update:modelValue': [value: (T extends 'single' ? string : string[]) | undefined]\n}\n\nexport type AccordionRootContext<P extends AccordionRootProps> = {\n  disabled: Ref<P['disabled']>\n  direction: Ref<P['dir']>\n  orientation: P['orientation']\n  parentElement: Ref<HTMLElement | undefined>\n  changeModelValue: (value: string) => void\n  isSingle: ComputedRef<boolean>\n  modelValue: Ref<AcceptableValue | AcceptableValue[] | undefined>\n  collapsible: boolean\n  unmountOnHide: Ref<boolean>\n}\n\nexport const [injectAccordionRootContext, provideAccordionRootContext]\n  = createContext<AccordionRootContext<AccordionRootProps>>('AccordionRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends (string | string[]), ExplicitType extends SingleOrMultipleType\">\nimport { toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'\n\nconst props = withDefaults(defineProps<AccordionRootProps<T>>(), {\n  disabled: false,\n  orientation: 'vertical',\n  collapsible: false,\n  unmountOnHide: true,\n})\n\nconst emits = defineEmits<AccordionRootEmits<ExplicitType>>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { dir, disabled, unmountOnHide } = toRefs(props)\nconst direction = useDirection(dir)\n\nconst { modelValue, changeModelValue, isSingle } = useSingleOrMultipleValue(props, emits)\n\nconst { forwardRef, currentElement: parentElement } = useForwardExpose()\n\nprovideAccordionRootContext({\n  disabled,\n  direction,\n  orientation: props.orientation,\n  parentElement,\n  isSingle,\n  collapsible: props.collapsible,\n  modelValue,\n  changeModelValue,\n  unmountOnHide,\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":["createContext","toRefs","useDirection","useSingleOrMultipleValue","useForwardExpose"],"mappings":";;;;;;;;;AAgEO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAwD,eAAe;;;;;;;;;;;;;;;;;AAQ3E,IAAA,MAAM,KAAQ,GAAA,OAAA;AAOd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,EAAE,GAAK,EAAA,QAAA,EAAU,aAAc,EAAA,GAAIC,WAAO,KAAK,CAAA;AACrD,IAAM,MAAA,SAAA,GAAYC,iCAAa,GAAG,CAAA;AAElC,IAAA,MAAM,EAAE,UAAY,EAAA,gBAAA,EAAkB,UAAa,GAAAC,wDAAA,CAAyB,OAAO,KAAK,CAAA;AAExF,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkBC,wCAAiB,EAAA;AAEvE,IAA4B,2BAAA,CAAA;AAAA,MAC1B,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,aAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,UAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionRoot.js","sources":["../../src/Accordion/AccordionRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue, DataOrientation, Direction, SingleOrMultipleProps, SingleOrMultipleType } from '@/shared/types'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface AccordionRootProps<T = string | string[]>\n  extends PrimitiveProps, SingleOrMultipleProps<T> {\n  /**\n   * When type is \"single\", allows closing content when clicking trigger for an open item.\n   * When type is \"multiple\", this prop has no effect.\n   *\n   * @defaultValue false\n   */\n  collapsible?: boolean\n\n  /**\n   * When `true`, prevents the user from interacting with the accordion and all its items\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n\n  /**\n   * The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.\n   *\n   * @defaultValue \"ltr\"\n   */\n  dir?: Direction\n\n  /**\n   * The orientation of the accordion.\n   *\n   * @defaultValue \"vertical\"\n   */\n  orientation?: DataOrientation\n\n  /**\n   * When `true`, the element will be unmounted on closed state.\n   *\n   * @defaultValue `true`\n   */\n  unmountOnHide?: boolean\n}\n\nexport type AccordionRootEmits<T extends SingleOrMultipleType = SingleOrMultipleType> = {\n  /**\n   * Event handler called when the expanded state of an item changes\n   */\n  'update:modelValue': [value: (T extends 'single' ? string : string[]) | undefined]\n}\n\nexport type AccordionRootContext<P extends AccordionRootProps> = {\n  disabled: Ref<P['disabled']>\n  direction: Ref<P['dir']>\n  orientation: P['orientation']\n  parentElement: Ref<HTMLElement | undefined>\n  changeModelValue: (value: string) => void\n  isSingle: ComputedRef<boolean>\n  modelValue: Ref<AcceptableValue | AcceptableValue[] | undefined>\n  collapsible: boolean\n  unmountOnHide: Ref<boolean>\n}\n\nexport const [injectAccordionRootContext, provideAccordionRootContext]\n  = createContext<AccordionRootContext<AccordionRootProps>>('AccordionRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends (string | string[]), ExplicitType extends SingleOrMultipleType\">\nimport { Primitive } from '@/Primitive'\nimport { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'\nimport { toRefs } from 'vue'\n\nconst props = withDefaults(defineProps<AccordionRootProps<T>>(), {\n  disabled: false,\n  orientation: 'vertical',\n  collapsible: false,\n  unmountOnHide: true,\n})\n\nconst emits = defineEmits<AccordionRootEmits<ExplicitType>>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { dir, disabled, unmountOnHide } = toRefs(props)\nconst direction = useDirection(dir)\n\nconst { modelValue, changeModelValue, isSingle } = useSingleOrMultipleValue(props, emits)\n\nconst { forwardRef, currentElement: parentElement } = useForwardExpose()\n\nprovideAccordionRootContext({\n  disabled,\n  direction,\n  orientation: props.orientation,\n  parentElement,\n  isSingle,\n  collapsible: props.collapsible,\n  modelValue,\n  changeModelValue,\n  unmountOnHide,\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;AAgEO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAwD,eAAe;;;;;;;;;;;;;;;;;AAQ3E,IAAA,MAAM,KAAQ,GAAA,OAAA;AAOd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,EAAE,GAAK,EAAA,QAAA,EAAU,aAAc,EAAA,GAAI,OAAO,KAAK,CAAA;AACrD,IAAM,MAAA,SAAA,GAAY,aAAa,GAAG,CAAA;AAElC,IAAA,MAAM,EAAE,UAAY,EAAA,gBAAA,EAAkB,UAAa,GAAA,wBAAA,CAAyB,OAAO,KAAK,CAAA;AAExF,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkB,gBAAiB,EAAA;AAEvE,IAA4B,2BAAA,CAAA;AAAA,MAC1B,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,aAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,UAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AccordionRoot.js","sources":["../../src/Accordion/AccordionRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue, DataOrientation, Direction, SingleOrMultipleProps, SingleOrMultipleType } from '@/shared/types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface AccordionRootProps<T = string | string[]>\n  extends PrimitiveProps, SingleOrMultipleProps<T> {\n  /**\n   * When type is \"single\", allows closing content when clicking trigger for an open item.\n   * When type is \"multiple\", this prop has no effect.\n   *\n   * @defaultValue false\n   */\n  collapsible?: boolean\n\n  /**\n   * When `true`, prevents the user from interacting with the accordion and all its items\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n\n  /**\n   * The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.\n   *\n   * @defaultValue \"ltr\"\n   */\n  dir?: Direction\n\n  /**\n   * The orientation of the accordion.\n   *\n   * @defaultValue \"vertical\"\n   */\n  orientation?: DataOrientation\n\n  /**\n   * When `true`, the element will be unmounted on closed state.\n   *\n   * @defaultValue `true`\n   */\n  unmountOnHide?: boolean\n}\n\nexport type AccordionRootEmits<T extends SingleOrMultipleType = SingleOrMultipleType> = {\n  /**\n   * Event handler called when the expanded state of an item changes\n   */\n  'update:modelValue': [value: (T extends 'single' ? string : string[]) | undefined]\n}\n\nexport type AccordionRootContext<P extends AccordionRootProps> = {\n  disabled: Ref<P['disabled']>\n  direction: Ref<P['dir']>\n  orientation: P['orientation']\n  parentElement: Ref<HTMLElement | undefined>\n  changeModelValue: (value: string) => void\n  isSingle: ComputedRef<boolean>\n  modelValue: Ref<AcceptableValue | AcceptableValue[] | undefined>\n  collapsible: boolean\n  unmountOnHide: Ref<boolean>\n}\n\nexport const [injectAccordionRootContext, provideAccordionRootContext]\n  = createContext<AccordionRootContext<AccordionRootProps>>('AccordionRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends (string | string[]), ExplicitType extends SingleOrMultipleType\">\nimport { toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'\n\nconst props = withDefaults(defineProps<AccordionRootProps<T>>(), {\n  disabled: false,\n  orientation: 'vertical',\n  collapsible: false,\n  unmountOnHide: true,\n})\n\nconst emits = defineEmits<AccordionRootEmits<ExplicitType>>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { dir, disabled, unmountOnHide } = toRefs(props)\nconst direction = useDirection(dir)\n\nconst { modelValue, changeModelValue, isSingle } = useSingleOrMultipleValue(props, emits)\n\nconst { forwardRef, currentElement: parentElement } = useForwardExpose()\n\nprovideAccordionRootContext({\n  disabled,\n  direction,\n  orientation: props.orientation,\n  parentElement,\n  isSingle,\n  collapsible: props.collapsible,\n  modelValue,\n  changeModelValue,\n  unmountOnHide,\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;AAgEO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAwD,eAAe;;;;;;;;;;;;;;;;;AAQ3E,IAAA,MAAM,KAAQ,GAAA,OAAA;AAOd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,EAAE,GAAK,EAAA,QAAA,EAAU,aAAc,EAAA,GAAI,OAAO,KAAK,CAAA;AACrD,IAAM,MAAA,SAAA,GAAY,aAAa,GAAG,CAAA;AAElC,IAAA,MAAM,EAAE,UAAY,EAAA,gBAAA,EAAkB,UAAa,GAAA,wBAAA,CAAyB,OAAO,KAAK,CAAA;AAExF,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkB,gBAAiB,EAAA;AAEvE,IAA4B,2BAAA,CAAA;AAAA,MAC1B,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,aAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,UAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;"}

package/dist/AlertDialog/AlertDialogCancel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogCancel.cjs","sources":["../../src/AlertDialog/AlertDialogCancel.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DialogCloseProps } from '@/Dialog'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AlertDialogCancelProps extends DialogCloseProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogClose } from '@/Dialog'\nimport { onMounted } from 'vue'\nimport { injectAlertDialogContentContext } from './AlertDialogContent.vue'\n\nconst props = withDefaults(defineProps<AlertDialogCancelProps>(), { as: 'button' })\nconst contentContext = injectAlertDialogContentContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext.onCancelElementChange(currentElement.value)\n})\n</script>\n\n<template>\n  <DialogClose\n    v-bind=\"props\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"names":["injectAlertDialogContentContext","useForwardExpose","onMounted"],"mappings":";;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,iBAAiBA,8DAAgC,EAAA;AACvD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAe,cAAA,CAAA,qBAAA,CAAsB,eAAe,KAAK,CAAA;AAAA,KAC1D,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlertDialogCancel.cjs","sources":["../../src/AlertDialog/AlertDialogCancel.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DialogCloseProps } from '@/Dialog'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AlertDialogCancelProps extends DialogCloseProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted } from 'vue'\nimport { DialogClose } from '@/Dialog'\nimport { injectAlertDialogContentContext } from './AlertDialogContent.vue'\n\nconst props = withDefaults(defineProps<AlertDialogCancelProps>(), { as: 'button' })\nconst contentContext = injectAlertDialogContentContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext.onCancelElementChange(currentElement.value)\n})\n</script>\n\n<template>\n  <DialogClose\n    v-bind=\"props\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"names":["injectAlertDialogContentContext","useForwardExpose","onMounted"],"mappings":";;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,iBAAiBA,8DAAgC,EAAA;AACvD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAe,cAAA,CAAA,qBAAA,CAAsB,eAAe,KAAK,CAAA;AAAA,KAC1D,CAAA;;;;;;;;;;;;;;"}

package/dist/AlertDialog/AlertDialogCancel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogCancel.js","sources":["../../src/AlertDialog/AlertDialogCancel.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DialogCloseProps } from '@/Dialog'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AlertDialogCancelProps extends DialogCloseProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogClose } from '@/Dialog'\nimport { onMounted } from 'vue'\nimport { injectAlertDialogContentContext } from './AlertDialogContent.vue'\n\nconst props = withDefaults(defineProps<AlertDialogCancelProps>(), { as: 'button' })\nconst contentContext = injectAlertDialogContentContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext.onCancelElementChange(currentElement.value)\n})\n</script>\n\n<template>\n  <DialogClose\n    v-bind=\"props\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,iBAAiB,+BAAgC,EAAA;AACvD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,SAAA,CAAU,MAAM;AACd,MAAe,cAAA,CAAA,qBAAA,CAAsB,eAAe,KAAK,CAAA;AAAA,KAC1D,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlertDialogCancel.js","sources":["../../src/AlertDialog/AlertDialogCancel.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DialogCloseProps } from '@/Dialog'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AlertDialogCancelProps extends DialogCloseProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted } from 'vue'\nimport { DialogClose } from '@/Dialog'\nimport { injectAlertDialogContentContext } from './AlertDialogContent.vue'\n\nconst props = withDefaults(defineProps<AlertDialogCancelProps>(), { as: 'button' })\nconst contentContext = injectAlertDialogContentContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext.onCancelElementChange(currentElement.value)\n})\n</script>\n\n<template>\n  <DialogClose\n    v-bind=\"props\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,iBAAiB,+BAAgC,EAAA;AACvD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,SAAA,CAAU,MAAM;AACd,MAAe,cAAA,CAAA,qBAAA,CAAsB,eAAe,KAAK,CAAA;AAAA,KAC1D,CAAA;;;;;;;;;;;;;;"}

package/dist/AlertDialog/AlertDialogContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogContent.cjs","sources":["../../src/AlertDialog/AlertDialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentEmits,\n  DialogContentProps,\n} from '@/Dialog'\nimport { createContext, useEmitAsProps, useForwardExpose } from '@/shared'\n\ninterface AlertDialogContentContext {\n  onCancelElementChange: (el: HTMLElement | undefined) => void\n}\n\nexport const [injectAlertDialogContentContext, provideAlertDialogContentContext]\n  = createContext<AlertDialogContentContext>('AlertDialogContent')\n\nexport type AlertDialogContentEmits = DialogContentEmits\nexport interface AlertDialogContentProps extends DialogContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogContent } from '@/Dialog'\nimport { nextTick, ref } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\nuseForwardExpose()\n\nconst cancelElement = ref<HTMLElement | undefined>()\n\nprovideAlertDialogContentContext({\n  onCancelElementChange: (el) => {\n    cancelElement.value = el\n  },\n})\n</script>\n\n<template>\n  <DialogContent\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n    role=\"alertdialog\"\n    @pointer-down-outside.prevent\n    @interact-outside.prevent\n    @open-auto-focus=\"\n      () => {\n        nextTick(() => {\n          cancelElement?.focus({\n            preventScroll: true,\n          });\n        });\n      }\n    \"\n  >\n    <slot />\n  </DialogContent>\n</template>\n"],"names":["createContext","useEmitAsProps","useForwardExpose","ref"],"mappings":";;;;;;;;AAWO,MAAM,CAAC,+BAAA,EAAiC,gCAAgC,CAAA,GAC3EA,mCAAyC,oBAAoB;;;;;;;;;;;;AAUjE,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,YAAA,GAAeC,qCAAe,KAAK,CAAA;AACzC,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,gBAAgBC,OAA6B,EAAA;AAEnD,IAAiC,gCAAA,CAAA;AAAA,MAC/B,qBAAA,EAAuB,CAAC,EAAO,KAAA;AAC7B,QAAA,aAAA,CAAc,KAAQ,GAAA,EAAA;AAAA;AACxB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlertDialogContent.cjs","sources":["../../src/AlertDialog/AlertDialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentEmits,\n  DialogContentProps,\n} from '@/Dialog'\nimport { createContext, useEmitAsProps, useForwardExpose } from '@/shared'\n\ninterface AlertDialogContentContext {\n  onCancelElementChange: (el: HTMLElement | undefined) => void\n}\n\nexport const [injectAlertDialogContentContext, provideAlertDialogContentContext]\n  = createContext<AlertDialogContentContext>('AlertDialogContent')\n\nexport type AlertDialogContentEmits = DialogContentEmits\nexport interface AlertDialogContentProps extends DialogContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, ref } from 'vue'\nimport { DialogContent } from '@/Dialog'\n\nconst props = defineProps<AlertDialogContentProps>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\nuseForwardExpose()\n\nconst cancelElement = ref<HTMLElement | undefined>()\n\nprovideAlertDialogContentContext({\n  onCancelElementChange: (el) => {\n    cancelElement.value = el\n  },\n})\n</script>\n\n<template>\n  <DialogContent\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n    role=\"alertdialog\"\n    @pointer-down-outside.prevent\n    @interact-outside.prevent\n    @open-auto-focus=\"\n      () => {\n        nextTick(() => {\n          cancelElement?.focus({\n            preventScroll: true,\n          });\n        });\n      }\n    \"\n  >\n    <slot />\n  </DialogContent>\n</template>\n"],"names":["createContext","useEmitAsProps","useForwardExpose","ref"],"mappings":";;;;;;;;AAWO,MAAM,CAAC,+BAAA,EAAiC,gCAAgC,CAAA,GAC3EA,mCAAyC,oBAAoB;;;;;;;;;;;;AAUjE,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,YAAA,GAAeC,qCAAe,KAAK,CAAA;AACzC,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,gBAAgBC,OAA6B,EAAA;AAEnD,IAAiC,gCAAA,CAAA;AAAA,MAC/B,qBAAA,EAAuB,CAAC,EAAO,KAAA;AAC7B,QAAA,aAAA,CAAc,KAAQ,GAAA,EAAA;AAAA;AACxB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AlertDialog/AlertDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogContent.js","sources":["../../src/AlertDialog/AlertDialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentEmits,\n  DialogContentProps,\n} from '@/Dialog'\nimport { createContext, useEmitAsProps, useForwardExpose } from '@/shared'\n\ninterface AlertDialogContentContext {\n  onCancelElementChange: (el: HTMLElement | undefined) => void\n}\n\nexport const [injectAlertDialogContentContext, provideAlertDialogContentContext]\n  = createContext<AlertDialogContentContext>('AlertDialogContent')\n\nexport type AlertDialogContentEmits = DialogContentEmits\nexport interface AlertDialogContentProps extends DialogContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogContent } from '@/Dialog'\nimport { nextTick, ref } from 'vue'\n\nconst props = defineProps<AlertDialogContentProps>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\nuseForwardExpose()\n\nconst cancelElement = ref<HTMLElement | undefined>()\n\nprovideAlertDialogContentContext({\n  onCancelElementChange: (el) => {\n    cancelElement.value = el\n  },\n})\n</script>\n\n<template>\n  <DialogContent\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n    role=\"alertdialog\"\n    @pointer-down-outside.prevent\n    @interact-outside.prevent\n    @open-auto-focus=\"\n      () => {\n        nextTick(() => {\n          cancelElement?.focus({\n            preventScroll: true,\n          });\n        });\n      }\n    \"\n  >\n    <slot />\n  </DialogContent>\n</template>\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,CAAC,+BAAA,EAAiC,gCAAgC,CAAA,GAC3E,cAAyC,oBAAoB;;;;;;;;;;;;AAUjE,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,YAAA,GAAe,eAAe,KAAK,CAAA;AACzC,IAAiB,gBAAA,EAAA;AAEjB,IAAA,MAAM,gBAAgB,GAA6B,EAAA;AAEnD,IAAiC,gCAAA,CAAA;AAAA,MAC/B,qBAAA,EAAuB,CAAC,EAAO,KAAA;AAC7B,QAAA,aAAA,CAAc,KAAQ,GAAA,EAAA;AAAA;AACxB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlertDialogContent.js","sources":["../../src/AlertDialog/AlertDialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentEmits,\n  DialogContentProps,\n} from '@/Dialog'\nimport { createContext, useEmitAsProps, useForwardExpose } from '@/shared'\n\ninterface AlertDialogContentContext {\n  onCancelElementChange: (el: HTMLElement | undefined) => void\n}\n\nexport const [injectAlertDialogContentContext, provideAlertDialogContentContext]\n  = createContext<AlertDialogContentContext>('AlertDialogContent')\n\nexport type AlertDialogContentEmits = DialogContentEmits\nexport interface AlertDialogContentProps extends DialogContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, ref } from 'vue'\nimport { DialogContent } from '@/Dialog'\n\nconst props = defineProps<AlertDialogContentProps>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\nuseForwardExpose()\n\nconst cancelElement = ref<HTMLElement | undefined>()\n\nprovideAlertDialogContentContext({\n  onCancelElementChange: (el) => {\n    cancelElement.value = el\n  },\n})\n</script>\n\n<template>\n  <DialogContent\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n    role=\"alertdialog\"\n    @pointer-down-outside.prevent\n    @interact-outside.prevent\n    @open-auto-focus=\"\n      () => {\n        nextTick(() => {\n          cancelElement?.focus({\n            preventScroll: true,\n          });\n        });\n      }\n    \"\n  >\n    <slot />\n  </DialogContent>\n</template>\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,CAAC,+BAAA,EAAiC,gCAAgC,CAAA,GAC3E,cAAyC,oBAAoB;;;;;;;;;;;;AAUjE,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,YAAA,GAAe,eAAe,KAAK,CAAA;AACzC,IAAiB,gBAAA,EAAA;AAEjB,IAAA,MAAM,gBAAgB,GAA6B,EAAA;AAEnD,IAAiC,gCAAA,CAAA;AAAA,MAC/B,qBAAA,EAAuB,CAAC,EAAO,KAAA;AAC7B,QAAA,aAAA,CAAc,KAAQ,GAAA,EAAA;AAAA;AACxB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AspectRatio/AspectRatio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatio.cjs","sources":["../../src/AspectRatio/AspectRatio.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AspectRatioProps extends PrimitiveProps {\n  /**\n   * The desired ratio. Eg: 16/9\n   * @defaultValue 1\n   */\n  ratio?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { computed } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<AspectRatioProps>(), {\n  ratio: 1,\n})\ndefineSlots<{\n  default: (props: {\n    /** Current aspect ratio (in %) */\n    aspect: typeof aspect.value\n  }) => any\n}>()\n\nconst { forwardRef } = useForwardExpose()\n\nconst aspect = computed(() => {\n  return (1 / props.ratio) * 100\n})\n</script>\n\n<template>\n  <div\n    :style=\"`position: relative; width: 100%; padding-bottom: ${aspect}%`\"\n    data-reka-aspect-ratio-wrapper\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      style=\"position: absolute; inset: 0px\"\n      v-bind=\"$attrs\"\n    >\n      <slot :aspect=\"aspect\" />\n    </Primitive>\n  </div>\n</template>\n"],"names":["useForwardExpose","computed"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAUd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,wCAAiB,EAAA;AAExC,IAAM,MAAA,MAAA,GAASC,aAAS,MAAM;AAC5B,MAAQ,OAAA,CAAA,GAAI,MAAM,KAAS,GAAA,GAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AspectRatio.cjs","sources":["../../src/AspectRatio/AspectRatio.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AspectRatioProps extends PrimitiveProps {\n  /**\n   * The desired ratio. Eg: 16/9\n   * @defaultValue 1\n   */\n  ratio?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<AspectRatioProps>(), {\n  ratio: 1,\n})\ndefineSlots<{\n  default?: (props: {\n    /** Current aspect ratio (in %) */\n    aspect: typeof aspect.value\n  }) => any\n}>()\n\nconst { forwardRef } = useForwardExpose()\n\nconst aspect = computed(() => {\n  return (1 / props.ratio) * 100\n})\n</script>\n\n<template>\n  <div\n    :style=\"`position: relative; width: 100%; padding-bottom: ${aspect}%`\"\n    data-reka-aspect-ratio-wrapper\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      style=\"position: absolute; inset: 0px\"\n      v-bind=\"$attrs\"\n    >\n      <slot :aspect=\"aspect\" />\n    </Primitive>\n  </div>\n</template>\n"],"names":["useForwardExpose","computed"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAUd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,wCAAiB,EAAA;AAExC,IAAM,MAAA,MAAA,GAASC,aAAS,MAAM;AAC5B,MAAQ,OAAA,CAAA,GAAI,MAAM,KAAS,GAAA,GAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AspectRatio/AspectRatio.js.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatio.js","sources":["../../src/AspectRatio/AspectRatio.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AspectRatioProps extends PrimitiveProps {\n  /**\n   * The desired ratio. Eg: 16/9\n   * @defaultValue 1\n   */\n  ratio?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { computed } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<AspectRatioProps>(), {\n  ratio: 1,\n})\ndefineSlots<{\n  default: (props: {\n    /** Current aspect ratio (in %) */\n    aspect: typeof aspect.value\n  }) => any\n}>()\n\nconst { forwardRef } = useForwardExpose()\n\nconst aspect = computed(() => {\n  return (1 / props.ratio) * 100\n})\n</script>\n\n<template>\n  <div\n    :style=\"`position: relative; width: 100%; padding-bottom: ${aspect}%`\"\n    data-reka-aspect-ratio-wrapper\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      style=\"position: absolute; inset: 0px\"\n      v-bind=\"$attrs\"\n    >\n      <slot :aspect=\"aspect\" />\n    </Primitive>\n  </div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAUd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AAExC,IAAM,MAAA,MAAA,GAAS,SAAS,MAAM;AAC5B,MAAQ,OAAA,CAAA,GAAI,MAAM,KAAS,GAAA,GAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AspectRatio.js","sources":["../../src/AspectRatio/AspectRatio.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AspectRatioProps extends PrimitiveProps {\n  /**\n   * The desired ratio. Eg: 16/9\n   * @defaultValue 1\n   */\n  ratio?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<AspectRatioProps>(), {\n  ratio: 1,\n})\ndefineSlots<{\n  default?: (props: {\n    /** Current aspect ratio (in %) */\n    aspect: typeof aspect.value\n  }) => any\n}>()\n\nconst { forwardRef } = useForwardExpose()\n\nconst aspect = computed(() => {\n  return (1 / props.ratio) * 100\n})\n</script>\n\n<template>\n  <div\n    :style=\"`position: relative; width: 100%; padding-bottom: ${aspect}%`\"\n    data-reka-aspect-ratio-wrapper\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      style=\"position: absolute; inset: 0px\"\n      v-bind=\"$attrs\"\n    >\n      <slot :aspect=\"aspect\" />\n    </Primitive>\n  </div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAUd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AAExC,IAAM,MAAA,MAAA,GAAS,SAAS,MAAM;AAC5B,MAAQ,OAAA,CAAA,GAAI,MAAM,KAAS,GAAA,GAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Avatar/AvatarFallback.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const vue = require('vue');
+const shared = require('@vueuse/shared');
 const Avatar_AvatarRoot = require('./AvatarRoot.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
@@ -8,7 +9,7 @@ const Primitive_Primitive = require('../Primitive/Primitive.cjs');
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "AvatarFallback",
   props: {
-    delayMs: { default: 0 },
+    delayMs: {},
     asChild: { type: Boolean },
     as: { default: "span" }
   },
@@ -16,21 +17,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const rootContext = Avatar_AvatarRoot.injectAvatarRootContext();
     shared_useForwardExpose.useForwardExpose();
-    const canRender = vue.ref(false);
-    let timeout;
-    vue.watch(rootContext.imageLoadingStatus, (value) => {
-      if (value === "loading") {
-        canRender.value = false;
-        if (props.delayMs) {
-          timeout = setTimeout(() => {
-            canRender.value = true;
-            clearTimeout(timeout);
-          }, props.delayMs);
-        } else {
+    const canRender = vue.ref(props.delayMs === void 0);
+    vue.watchEffect((onCleanup) => {
+      if (props.delayMs && shared.isClient) {
+        const timerId = window.setTimeout(() => {
           canRender.value = true;
-        }
+        }, props.delayMs);
+        onCleanup(() => {
+          window.clearTimeout(timerId);
+        });
       }
-    }, { immediate: true });
+    });
     return (_ctx, _cache) => {
       return canRender.value && vue.unref(rootContext).imageLoadingStatus.value !== "loaded" ? (vue.openBlock(), vue.createBlock(vue.unref(Primitive_Primitive.Primitive), {
         key: 0,

package/dist/Avatar/AvatarFallback.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFallback.cjs","sources":["../../src/Avatar/AvatarFallback.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AvatarFallbackProps extends PrimitiveProps {\n  /** Useful for delaying rendering so it only appears for those with slower connections. */\n  delayMs?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { ref, watch } from 'vue'\nimport { injectAvatarRootContext } from './AvatarRoot.vue'\n\nconst props = withDefaults(defineProps<AvatarFallbackProps>(), {\n  delayMs: 0,\n  as: 'span',\n})\n\nconst rootContext = injectAvatarRootContext()\nuseForwardExpose()\n\nconst canRender = ref(false)\nlet timeout: ReturnType<typeof setTimeout> | undefined\n\nwatch(rootContext.imageLoadingStatus, (value) => {\n  if (value === 'loading') {\n    canRender.value = false\n    if (props.delayMs) {\n      timeout = setTimeout(() => {\n        canRender.value = true\n        clearTimeout(timeout)\n      }, props.delayMs)\n    }\n    else {\n      canRender.value = true\n    }\n  }\n}, { immediate: true })\n</script>\n\n<template>\n  <Primitive\n    v-if=\"canRender && rootContext.imageLoadingStatus.value !== 'loaded'\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectAvatarRootContext","useForwardExpose","ref","watch"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAiBC,wCAAA,EAAA;AAEjB,IAAM,MAAA,SAAA,GAAYC,QAAI,KAAK,CAAA;AAC3B,IAAI,IAAA,OAAA;AAEJ,IAAMC,SAAA,CAAA,WAAA,CAAY,kBAAoB,EAAA,CAAC,KAAU,KAAA;AAC/C,MAAA,IAAI,UAAU,SAAW,EAAA;AACvB,QAAA,SAAA,CAAU,KAAQ,GAAA,KAAA;AAClB,QAAA,IAAI,MAAM,OAAS,EAAA;AACjB,UAAA,OAAA,GAAU,WAAW,MAAM;AACzB,YAAA,SAAA,CAAU,KAAQ,GAAA,IAAA;AAClB,YAAA,YAAA,CAAa,OAAO,CAAA;AAAA,WACtB,EAAG,MAAM,OAAO,CAAA;AAAA,SAEb,MAAA;AACH,UAAA,SAAA,CAAU,KAAQ,GAAA,IAAA;AAAA;AACpB;AACF,KACC,EAAA,EAAE,SAAW,EAAA,IAAA,EAAM,CAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AvatarFallback.cjs","sources":["../../src/Avatar/AvatarFallback.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { isClient } from '@vueuse/shared'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AvatarFallbackProps extends PrimitiveProps {\n  /** Useful for delaying rendering so it only appears for those with slower connections. */\n  delayMs?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watchEffect } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectAvatarRootContext } from './AvatarRoot.vue'\n\nconst props = withDefaults(defineProps<AvatarFallbackProps>(), {\n  as: 'span',\n})\n\nconst rootContext = injectAvatarRootContext()\nuseForwardExpose()\n\nconst canRender = ref(props.delayMs === undefined)\n\nwatchEffect((onCleanup) => {\n  if (props.delayMs && isClient) {\n    const timerId = window.setTimeout(() => {\n      canRender.value = true\n    }, props.delayMs)\n\n    onCleanup(() => {\n      window.clearTimeout(timerId)\n    })\n  }\n})\n</script>\n\n<template>\n  <Primitive\n    v-if=\"canRender && rootContext.imageLoadingStatus.value !== 'loaded'\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectAvatarRootContext","useForwardExpose","ref","watchEffect","isClient"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,SAAY,GAAAC,OAAA,CAAI,KAAM,CAAA,OAAA,KAAY,MAAS,CAAA;AAEjD,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAI,IAAA,KAAA,CAAM,WAAWC,eAAU,EAAA;AAC7B,QAAM,MAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AACtC,UAAA,SAAA,CAAU,KAAQ,GAAA,IAAA;AAAA,SACpB,EAAG,MAAM,OAAO,CAAA;AAEhB,QAAA,SAAA,CAAU,MAAM;AACd,UAAA,MAAA,CAAO,aAAa,OAAO,CAAA;AAAA,SAC5B,CAAA;AAAA;AACH,KACD,CAAA;;;;;;;;;;;;;;;;;;"}

package/dist/Avatar/AvatarFallback.js

@@ -1,4 +1,5 @@
-import { defineComponent, ref, watch, createBlock, createCommentVNode, unref, openBlock, withCtx, renderSlot } from 'vue';
+import { defineComponent, ref, watchEffect, createBlock, createCommentVNode, unref, openBlock, withCtx, renderSlot } from 'vue';
+import { isClient } from '@vueuse/shared';
 import { i as injectAvatarRootContext } from './AvatarRoot.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
@@ -6,7 +7,7 @@ import { P as Primitive } from '../Primitive/Primitive.js';
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AvatarFallback",
   props: {
-    delayMs: { default: 0 },
+    delayMs: {},
     asChild: { type: Boolean },
     as: { default: "span" }
   },
@@ -14,21 +15,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const rootContext = injectAvatarRootContext();
     useForwardExpose();
-    const canRender = ref(false);
-    let timeout;
-    watch(rootContext.imageLoadingStatus, (value) => {
-      if (value === "loading") {
-        canRender.value = false;
-        if (props.delayMs) {
-          timeout = setTimeout(() => {
-            canRender.value = true;
-            clearTimeout(timeout);
-          }, props.delayMs);
-        } else {
+    const canRender = ref(props.delayMs === void 0);
+    watchEffect((onCleanup) => {
+      if (props.delayMs && isClient) {
+        const timerId = window.setTimeout(() => {
           canRender.value = true;
-        }
+        }, props.delayMs);
+        onCleanup(() => {
+          window.clearTimeout(timerId);
+        });
       }
-    }, { immediate: true });
+    });
     return (_ctx, _cache) => {
       return canRender.value && unref(rootContext).imageLoadingStatus.value !== "loaded" ? (openBlock(), createBlock(unref(Primitive), {
         key: 0,

package/dist/Avatar/AvatarFallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFallback.js","sources":["../../src/Avatar/AvatarFallback.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AvatarFallbackProps extends PrimitiveProps {\n  /** Useful for delaying rendering so it only appears for those with slower connections. */\n  delayMs?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { ref, watch } from 'vue'\nimport { injectAvatarRootContext } from './AvatarRoot.vue'\n\nconst props = withDefaults(defineProps<AvatarFallbackProps>(), {\n  delayMs: 0,\n  as: 'span',\n})\n\nconst rootContext = injectAvatarRootContext()\nuseForwardExpose()\n\nconst canRender = ref(false)\nlet timeout: ReturnType<typeof setTimeout> | undefined\n\nwatch(rootContext.imageLoadingStatus, (value) => {\n  if (value === 'loading') {\n    canRender.value = false\n    if (props.delayMs) {\n      timeout = setTimeout(() => {\n        canRender.value = true\n        clearTimeout(timeout)\n      }, props.delayMs)\n    }\n    else {\n      canRender.value = true\n    }\n  }\n}, { immediate: true })\n</script>\n\n<template>\n  <Primitive\n    v-if=\"canRender && rootContext.imageLoadingStatus.value !== 'loaded'\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAeA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAiB,gBAAA,EAAA;AAEjB,IAAM,MAAA,SAAA,GAAY,IAAI,KAAK,CAAA;AAC3B,IAAI,IAAA,OAAA;AAEJ,IAAM,KAAA,CAAA,WAAA,CAAY,kBAAoB,EAAA,CAAC,KAAU,KAAA;AAC/C,MAAA,IAAI,UAAU,SAAW,EAAA;AACvB,QAAA,SAAA,CAAU,KAAQ,GAAA,KAAA;AAClB,QAAA,IAAI,MAAM,OAAS,EAAA;AACjB,UAAA,OAAA,GAAU,WAAW,MAAM;AACzB,YAAA,SAAA,CAAU,KAAQ,GAAA,IAAA;AAClB,YAAA,YAAA,CAAa,OAAO,CAAA;AAAA,WACtB,EAAG,MAAM,OAAO,CAAA;AAAA,SAEb,MAAA;AACH,UAAA,SAAA,CAAU,KAAQ,GAAA,IAAA;AAAA;AACpB;AACF,KACC,EAAA,EAAE,SAAW,EAAA,IAAA,EAAM,CAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AvatarFallback.js","sources":["../../src/Avatar/AvatarFallback.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { isClient } from '@vueuse/shared'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AvatarFallbackProps extends PrimitiveProps {\n  /** Useful for delaying rendering so it only appears for those with slower connections. */\n  delayMs?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watchEffect } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectAvatarRootContext } from './AvatarRoot.vue'\n\nconst props = withDefaults(defineProps<AvatarFallbackProps>(), {\n  as: 'span',\n})\n\nconst rootContext = injectAvatarRootContext()\nuseForwardExpose()\n\nconst canRender = ref(props.delayMs === undefined)\n\nwatchEffect((onCleanup) => {\n  if (props.delayMs && isClient) {\n    const timerId = window.setTimeout(() => {\n      canRender.value = true\n    }, props.delayMs)\n\n    onCleanup(() => {\n      window.clearTimeout(timerId)\n    })\n  }\n})\n</script>\n\n<template>\n  <Primitive\n    v-if=\"canRender && rootContext.imageLoadingStatus.value !== 'loaded'\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAiB,gBAAA,EAAA;AAEjB,IAAA,MAAM,SAAY,GAAA,GAAA,CAAI,KAAM,CAAA,OAAA,KAAY,MAAS,CAAA;AAEjD,IAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAI,IAAA,KAAA,CAAM,WAAW,QAAU,EAAA;AAC7B,QAAM,MAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AACtC,UAAA,SAAA,CAAU,KAAQ,GAAA,IAAA;AAAA,SACpB,EAAG,MAAM,OAAO,CAAA;AAEhB,QAAA,SAAA,CAAU,MAAM;AACd,UAAA,MAAA,CAAO,aAAa,OAAO,CAAA;AAAA,SAC5B,CAAA;AAAA;AACH,KACD,CAAA;;;;;;;;;;;;;;;;;;"}

package/dist/Avatar/AvatarImage.cjs

@@ -11,6 +11,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: {
     src: {},
     referrerPolicy: {},
+    crossOrigin: {},
     asChild: { type: Boolean },
     as: { default: "img" }
   },
@@ -18,10 +19,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { src, referrerPolicy } = vue.toRefs(props);
+    const { src, referrerPolicy, crossOrigin } = vue.toRefs(props);
     shared_useForwardExpose.useForwardExpose();
     const rootContext = Avatar_AvatarRoot.injectAvatarRootContext();
-    const imageLoadingStatus = Avatar_utils.useImageLoadingStatus(src, referrerPolicy);
+    const imageLoadingStatus = Avatar_utils.useImageLoadingStatus(src, { referrerPolicy, crossOrigin });
     vue.watch(
       imageLoadingStatus,
       (newValue) => {

package/dist/Avatar/AvatarImage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.cjs","sources":["../../src/Avatar/AvatarImage.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { ImageLoadingStatus } from './utils'\nimport { useForwardExpose } from '@/shared'\n\nexport type AvatarImageEmits = {\n  /**\n   * A callback providing information about the loading status of the image. <br>\n   * This is useful in case you want to control more precisely what to render as the image is loading.\n   */\n  loadingStatusChange: [value: ImageLoadingStatus]\n}\nexport interface AvatarImageProps extends PrimitiveProps {\n  src: string\n  referrerPolicy?: ImgHTMLAttributes['referrerpolicy']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ImgHTMLAttributes } from 'vue'\nimport { toRefs, watch } from 'vue'\nimport { Primitive } from '../Primitive'\nimport { injectAvatarRootContext } from './AvatarRoot.vue'\nimport { useImageLoadingStatus } from './utils'\n\nconst props = withDefaults(defineProps<AvatarImageProps>(), { as: 'img' })\nconst emits = defineEmits<AvatarImageEmits>()\n\nconst { src, referrerPolicy } = toRefs(props)\nuseForwardExpose()\nconst rootContext = injectAvatarRootContext()\n\nconst imageLoadingStatus = useImageLoadingStatus(src, referrerPolicy)\n\nwatch(\n  imageLoadingStatus,\n  (newValue) => {\n    emits('loadingStatusChange', newValue)\n    if (newValue !== 'idle')\n      rootContext.imageLoadingStatus.value = newValue\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Primitive\n    v-show=\"imageLoadingStatus === 'loaded'\"\n    role=\"img\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :src=\"src\"\n    :referrer-policy=\"referrerPolicy\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["toRefs","useForwardExpose","injectAvatarRootContext","useImageLoadingStatus","watch"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,EAAE,GAAA,EAAK,cAAe,EAAA,GAAIA,WAAO,KAAK,CAAA;AAC5C,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAM,MAAA,kBAAA,GAAqBC,kCAAsB,CAAA,GAAA,EAAK,cAAc,CAAA;AAEpE,IAAAC,SAAA;AAAA,MACE,kBAAA;AAAA,MACA,CAAC,QAAa,KAAA;AACZ,QAAA,KAAA,CAAM,uBAAuB,QAAQ,CAAA;AACrC,QAAA,IAAI,QAAa,KAAA,MAAA;AACf,UAAA,WAAA,CAAY,mBAAmB,KAAQ,GAAA,QAAA;AAAA,OAC3C;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AvatarImage.cjs","sources":["../../src/Avatar/AvatarImage.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ImageLoadingStatus } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport type AvatarImageEmits = {\n  /**\n   * A callback providing information about the loading status of the image. <br>\n   * This is useful in case you want to control more precisely what to render as the image is loading.\n   */\n  loadingStatusChange: [value: ImageLoadingStatus]\n}\nexport interface AvatarImageProps extends PrimitiveProps {\n  src: string\n  referrerPolicy?: ImgHTMLAttributes['referrerpolicy']\n  crossOrigin?: ImgHTMLAttributes['crossorigin']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ImgHTMLAttributes } from 'vue'\nimport { toRefs, watch } from 'vue'\nimport { Primitive } from '../Primitive'\nimport { injectAvatarRootContext } from './AvatarRoot.vue'\nimport { useImageLoadingStatus } from './utils'\n\nconst props = withDefaults(defineProps<AvatarImageProps>(), { as: 'img' })\nconst emits = defineEmits<AvatarImageEmits>()\n\nconst { src, referrerPolicy, crossOrigin } = toRefs(props)\nuseForwardExpose()\nconst rootContext = injectAvatarRootContext()\n\nconst imageLoadingStatus = useImageLoadingStatus(src, { referrerPolicy, crossOrigin })\n\nwatch(\n  imageLoadingStatus,\n  (newValue) => {\n    emits('loadingStatusChange', newValue)\n    if (newValue !== 'idle')\n      rootContext.imageLoadingStatus.value = newValue\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Primitive\n    v-show=\"imageLoadingStatus === 'loaded'\"\n    role=\"img\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :src=\"src\"\n    :referrer-policy=\"referrerPolicy\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["toRefs","useForwardExpose","injectAvatarRootContext","useImageLoadingStatus","watch"],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,EAAE,GAAK,EAAA,cAAA,EAAgB,WAAY,EAAA,GAAIA,WAAO,KAAK,CAAA;AACzD,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAA,MAAM,qBAAqBC,kCAAsB,CAAA,GAAA,EAAK,EAAE,cAAA,EAAgB,aAAa,CAAA;AAErF,IAAAC,SAAA;AAAA,MACE,kBAAA;AAAA,MACA,CAAC,QAAa,KAAA;AACZ,QAAA,KAAA,CAAM,uBAAuB,QAAQ,CAAA;AACrC,QAAA,IAAI,QAAa,KAAA,MAAA;AACf,UAAA,WAAA,CAAY,mBAAmB,KAAQ,GAAA,QAAA;AAAA,OAC3C;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Avatar/AvatarImage.js

@@ -9,6 +9,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     src: {},
     referrerPolicy: {},
+    crossOrigin: {},
     asChild: { type: Boolean },
     as: { default: "img" }
   },
@@ -16,10 +17,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { src, referrerPolicy } = toRefs(props);
+    const { src, referrerPolicy, crossOrigin } = toRefs(props);
     useForwardExpose();
     const rootContext = injectAvatarRootContext();
-    const imageLoadingStatus = useImageLoadingStatus(src, referrerPolicy);
+    const imageLoadingStatus = useImageLoadingStatus(src, { referrerPolicy, crossOrigin });
     watch(
       imageLoadingStatus,
       (newValue) => {

package/dist/Avatar/AvatarImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.js","sources":["../../src/Avatar/AvatarImage.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { ImageLoadingStatus } from './utils'\nimport { useForwardExpose } from '@/shared'\n\nexport type AvatarImageEmits = {\n  /**\n   * A callback providing information about the loading status of the image. <br>\n   * This is useful in case you want to control more precisely what to render as the image is loading.\n   */\n  loadingStatusChange: [value: ImageLoadingStatus]\n}\nexport interface AvatarImageProps extends PrimitiveProps {\n  src: string\n  referrerPolicy?: ImgHTMLAttributes['referrerpolicy']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ImgHTMLAttributes } from 'vue'\nimport { toRefs, watch } from 'vue'\nimport { Primitive } from '../Primitive'\nimport { injectAvatarRootContext } from './AvatarRoot.vue'\nimport { useImageLoadingStatus } from './utils'\n\nconst props = withDefaults(defineProps<AvatarImageProps>(), { as: 'img' })\nconst emits = defineEmits<AvatarImageEmits>()\n\nconst { src, referrerPolicy } = toRefs(props)\nuseForwardExpose()\nconst rootContext = injectAvatarRootContext()\n\nconst imageLoadingStatus = useImageLoadingStatus(src, referrerPolicy)\n\nwatch(\n  imageLoadingStatus,\n  (newValue) => {\n    emits('loadingStatusChange', newValue)\n    if (newValue !== 'idle')\n      rootContext.imageLoadingStatus.value = newValue\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Primitive\n    v-show=\"imageLoadingStatus === 'loaded'\"\n    role=\"img\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :src=\"src\"\n    :referrer-policy=\"referrerPolicy\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,EAAE,GAAA,EAAK,cAAe,EAAA,GAAI,OAAO,KAAK,CAAA;AAC5C,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAM,MAAA,kBAAA,GAAqB,qBAAsB,CAAA,GAAA,EAAK,cAAc,CAAA;AAEpE,IAAA,KAAA;AAAA,MACE,kBAAA;AAAA,MACA,CAAC,QAAa,KAAA;AACZ,QAAA,KAAA,CAAM,uBAAuB,QAAQ,CAAA;AACrC,QAAA,IAAI,QAAa,KAAA,MAAA;AACf,UAAA,WAAA,CAAY,mBAAmB,KAAQ,GAAA,QAAA;AAAA,OAC3C;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AvatarImage.js","sources":["../../src/Avatar/AvatarImage.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ImageLoadingStatus } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport type AvatarImageEmits = {\n  /**\n   * A callback providing information about the loading status of the image. <br>\n   * This is useful in case you want to control more precisely what to render as the image is loading.\n   */\n  loadingStatusChange: [value: ImageLoadingStatus]\n}\nexport interface AvatarImageProps extends PrimitiveProps {\n  src: string\n  referrerPolicy?: ImgHTMLAttributes['referrerpolicy']\n  crossOrigin?: ImgHTMLAttributes['crossorigin']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ImgHTMLAttributes } from 'vue'\nimport { toRefs, watch } from 'vue'\nimport { Primitive } from '../Primitive'\nimport { injectAvatarRootContext } from './AvatarRoot.vue'\nimport { useImageLoadingStatus } from './utils'\n\nconst props = withDefaults(defineProps<AvatarImageProps>(), { as: 'img' })\nconst emits = defineEmits<AvatarImageEmits>()\n\nconst { src, referrerPolicy, crossOrigin } = toRefs(props)\nuseForwardExpose()\nconst rootContext = injectAvatarRootContext()\n\nconst imageLoadingStatus = useImageLoadingStatus(src, { referrerPolicy, crossOrigin })\n\nwatch(\n  imageLoadingStatus,\n  (newValue) => {\n    emits('loadingStatusChange', newValue)\n    if (newValue !== 'idle')\n      rootContext.imageLoadingStatus.value = newValue\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Primitive\n    v-show=\"imageLoadingStatus === 'loaded'\"\n    role=\"img\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    :src=\"src\"\n    :referrer-policy=\"referrerPolicy\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,EAAE,GAAK,EAAA,cAAA,EAAgB,WAAY,EAAA,GAAI,OAAO,KAAK,CAAA;AACzD,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,MAAM,qBAAqB,qBAAsB,CAAA,GAAA,EAAK,EAAE,cAAA,EAAgB,aAAa,CAAA;AAErF,IAAA,KAAA;AAAA,MACE,kBAAA;AAAA,MACA,CAAC,QAAa,KAAA;AACZ,QAAA,KAAA,CAAM,uBAAuB,QAAQ,CAAA;AACrC,QAAA,IAAI,QAAa,KAAA,MAAA;AACf,UAAA,WAAA,CAAY,mBAAmB,KAAQ,GAAA,QAAA;AAAA,OAC3C;AAAA,MACA,EAAE,WAAW,IAAK;AAAA,KACpB;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Avatar/AvatarRoot.cjs

@@ -15,7 +15,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     shared_useForwardExpose.useForwardExpose();
     provideAvatarRootContext({
-      imageLoadingStatus: vue.ref("loading")
+      imageLoadingStatus: vue.ref("idle")
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(Primitive_Primitive.Primitive), {

package/dist/Avatar/AvatarRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarRoot.cjs","sources":["../../src/Avatar/AvatarRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Ref } from 'vue'\nimport type { ImageLoadingStatus } from './utils'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface AvatarRootProps extends PrimitiveProps {}\n\nexport type AvatarRootContext = {\n  imageLoadingStatus: Ref<ImageLoadingStatus>\n}\n\nexport const [injectAvatarRootContext, provideAvatarRootContext]\n  = createContext<AvatarRootContext>('AvatarRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { ref } from 'vue'\n\nwithDefaults(defineProps<AvatarRootProps>(), {\n  as: 'span',\n})\n\nuseForwardExpose()\n\nprovideAvatarRootContext({\n  imageLoadingStatus: ref<ImageLoadingStatus>('loading'),\n})\n</script>\n\n<template>\n  <Primitive\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["createContext","useForwardExpose","ref"],"mappings":";;;;;;;AAYO,MAAM,CAAC,uBAAA,EAAyB,wBAAwB,CAAA,GAC3DA,mCAAiC,YAAY;;;;;;;;AAWjD,IAAiBC,wCAAA,EAAA;AAEjB,IAAyB,wBAAA,CAAA;AAAA,MACvB,kBAAA,EAAoBC,QAAwB,SAAS;AAAA,KACtD,CAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AvatarRoot.cjs","sources":["../../src/Avatar/AvatarRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ImageLoadingStatus } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface AvatarRootProps extends PrimitiveProps {}\n\nexport type AvatarRootContext = {\n  imageLoadingStatus: Ref<ImageLoadingStatus>\n}\n\nexport const [injectAvatarRootContext, provideAvatarRootContext]\n  = createContext<AvatarRootContext>('AvatarRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nwithDefaults(defineProps<AvatarRootProps>(), {\n  as: 'span',\n})\n\nuseForwardExpose()\n\nprovideAvatarRootContext({\n  imageLoadingStatus: ref<ImageLoadingStatus>('idle'),\n})\n</script>\n\n<template>\n  <Primitive\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["createContext","useForwardExpose","ref"],"mappings":";;;;;;;AAYO,MAAM,CAAC,uBAAA,EAAyB,wBAAwB,CAAA,GAC3DA,mCAAiC,YAAY;;;;;;;;AAWjD,IAAiBC,wCAAA,EAAA;AAEjB,IAAyB,wBAAA,CAAA;AAAA,MACvB,kBAAA,EAAoBC,QAAwB,MAAM;AAAA,KACnD,CAAA;;;;;;;;;;;;;;;;;;"}

package/dist/Avatar/AvatarRoot.js

@@ -13,7 +13,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     useForwardExpose();
     provideAvatarRootContext({
-      imageLoadingStatus: ref("loading")
+      imageLoadingStatus: ref("idle")
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Primitive), {

package/dist/Avatar/AvatarRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarRoot.js","sources":["../../src/Avatar/AvatarRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Ref } from 'vue'\nimport type { ImageLoadingStatus } from './utils'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface AvatarRootProps extends PrimitiveProps {}\n\nexport type AvatarRootContext = {\n  imageLoadingStatus: Ref<ImageLoadingStatus>\n}\n\nexport const [injectAvatarRootContext, provideAvatarRootContext]\n  = createContext<AvatarRootContext>('AvatarRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { ref } from 'vue'\n\nwithDefaults(defineProps<AvatarRootProps>(), {\n  as: 'span',\n})\n\nuseForwardExpose()\n\nprovideAvatarRootContext({\n  imageLoadingStatus: ref<ImageLoadingStatus>('loading'),\n})\n</script>\n\n<template>\n  <Primitive\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;AAYO,MAAM,CAAC,uBAAA,EAAyB,wBAAwB,CAAA,GAC3D,cAAiC,YAAY;;;;;;;;AAWjD,IAAiB,gBAAA,EAAA;AAEjB,IAAyB,wBAAA,CAAA;AAAA,MACvB,kBAAA,EAAoB,IAAwB,SAAS;AAAA,KACtD,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AvatarRoot.js","sources":["../../src/Avatar/AvatarRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ImageLoadingStatus } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface AvatarRootProps extends PrimitiveProps {}\n\nexport type AvatarRootContext = {\n  imageLoadingStatus: Ref<ImageLoadingStatus>\n}\n\nexport const [injectAvatarRootContext, provideAvatarRootContext]\n  = createContext<AvatarRootContext>('AvatarRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nwithDefaults(defineProps<AvatarRootProps>(), {\n  as: 'span',\n})\n\nuseForwardExpose()\n\nprovideAvatarRootContext({\n  imageLoadingStatus: ref<ImageLoadingStatus>('idle'),\n})\n</script>\n\n<template>\n  <Primitive\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;AAYO,MAAM,CAAC,uBAAA,EAAyB,wBAAwB,CAAA,GAC3D,cAAiC,YAAY;;;;;;;;AAWjD,IAAiB,gBAAA,EAAA;AAEjB,IAAyB,wBAAA,CAAA;AAAA,MACvB,kBAAA,EAAoB,IAAwB,MAAM;AAAA,KACnD,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/Avatar/utils.cjs

@@ -1,30 +1,57 @@
 'use strict';
 
+const shared = require('@vueuse/shared');
 const vue = require('vue');
 
-function useImageLoadingStatus(src, referrerPolicy) {
-  const loadingStatus = vue.ref("idle");
+function resolveLoadingStatus(image, src) {
+  if (!image) {
+    return "idle";
+  }
+  if (!src) {
+    return "error";
+  }
+  if (image.src !== src) {
+    image.src = src;
+  }
+  return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
+}
+function useImageLoadingStatus(src, { referrerPolicy, crossOrigin } = {}) {
   const isMounted = vue.ref(false);
+  const imageRef = vue.ref(null);
+  const image = vue.computed(() => {
+    if (!isMounted.value) {
+      return null;
+    }
+    if (!imageRef.value && shared.isClient) {
+      imageRef.value = new window.Image();
+    }
+    return imageRef.value;
+  });
+  const loadingStatus = vue.ref(resolveLoadingStatus(image.value, src.value));
   const updateStatus = (status) => () => {
     if (isMounted.value)
       loadingStatus.value = status;
   };
   vue.onMounted(() => {
     isMounted.value = true;
-    vue.watch([() => src.value, () => referrerPolicy?.value], ([src2, referrer]) => {
-      if (!src2) {
-        loadingStatus.value = "error";
-      } else {
-        const image = new window.Image();
-        loadingStatus.value = "loading";
-        image.onload = updateStatus("loaded");
-        image.onerror = updateStatus("error");
-        image.src = src2;
-        if (referrer) {
-          image.referrerPolicy = referrer;
-        }
-      }
-    }, { immediate: true });
+    vue.watchEffect((onCleanup) => {
+      const img = image.value;
+      if (!img)
+        return;
+      loadingStatus.value = resolveLoadingStatus(img, src.value);
+      const handleLoad = updateStatus("loaded");
+      const handleError = updateStatus("error");
+      img.addEventListener("load", handleLoad);
+      img.addEventListener("error", handleError);
+      if (referrerPolicy?.value)
+        img.referrerPolicy = referrerPolicy.value;
+      if (typeof crossOrigin?.value === "string")
+        img.crossOrigin = crossOrigin.value;
+      onCleanup(() => {
+        img.removeEventListener("load", handleLoad);
+        img.removeEventListener("error", handleError);
+      });
+    });
   });
   vue.onUnmounted(() => {
     isMounted.value = false;

package/dist/Avatar/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/Avatar/utils.ts"],"sourcesContent":["import type { ImgHTMLAttributes, Ref } from 'vue'\nimport { onMounted, onUnmounted, ref, watch } from 'vue'\n\nexport type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'\n\nexport function useImageLoadingStatus(src: Ref<string>, referrerPolicy?: Ref<ImgHTMLAttributes['referrerpolicy']>) {\n  const loadingStatus = ref<ImageLoadingStatus>('idle')\n  const isMounted = ref(false)\n\n  const updateStatus = (status: ImageLoadingStatus) => () => {\n    if (isMounted.value)\n      loadingStatus.value = status\n  }\n\n  onMounted(() => {\n    isMounted.value = true\n\n    watch([() => src.value, () => referrerPolicy?.value], ([src, referrer]) => {\n      if (!src) {\n        loadingStatus.value = 'error'\n      }\n      else {\n        const image = new window.Image()\n        loadingStatus.value = 'loading'\n        image.onload = updateStatus('loaded')\n        image.onerror = updateStatus('error')\n        image.src = src\n        if (referrer) {\n          image.referrerPolicy = referrer\n        }\n      }\n    }, { immediate: true })\n  })\n\n  onUnmounted(() => {\n    isMounted.value = false\n  })\n\n  return loadingStatus\n}\n"],"names":["ref","onMounted","watch","src","onUnmounted"],"mappings":";;;;AAKgB,SAAA,qBAAA,CAAsB,KAAkB,cAA2D,EAAA;AACjH,EAAM,MAAA,aAAA,GAAgBA,QAAwB,MAAM,CAAA;AACpD,EAAM,MAAA,SAAA,GAAYA,QAAI,KAAK,CAAA;AAE3B,EAAM,MAAA,YAAA,GAAe,CAAC,MAAA,KAA+B,MAAM;AACzD,IAAA,IAAI,SAAU,CAAA,KAAA;AACZ,MAAA,aAAA,CAAc,KAAQ,GAAA,MAAA;AAAA,GAC1B;AAEA,EAAAC,aAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,KAAQ,GAAA,IAAA;AAElB,IAAAC,SAAA,CAAM,CAAC,MAAM,GAAI,CAAA,KAAA,EAAO,MAAM,cAAA,EAAgB,KAAK,CAAA,EAAG,CAAC,CAACC,IAAK,EAAA,QAAQ,CAAM,KAAA;AACzE,MAAA,IAAI,CAACA,IAAK,EAAA;AACR,QAAA,aAAA,CAAc,KAAQ,GAAA,OAAA;AAAA,OAEnB,MAAA;AACH,QAAM,MAAA,KAAA,GAAQ,IAAI,MAAA,CAAO,KAAM,EAAA;AAC/B,QAAA,aAAA,CAAc,KAAQ,GAAA,SAAA;AACtB,QAAM,KAAA,CAAA,MAAA,GAAS,aAAa,QAAQ,CAAA;AACpC,QAAM,KAAA,CAAA,OAAA,GAAU,aAAa,OAAO,CAAA;AACpC,QAAA,KAAA,CAAM,GAAMA,GAAAA,IAAAA;AACZ,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,KAAA,CAAM,cAAiB,GAAA,QAAA;AAAA;AACzB;AACF,KACC,EAAA,EAAE,SAAW,EAAA,IAAA,EAAM,CAAA;AAAA,GACvB,CAAA;AAED,EAAAC,eAAA,CAAY,MAAM;AAChB,IAAA,SAAA,CAAU,KAAQ,GAAA,KAAA;AAAA,GACnB,CAAA;AAED,EAAO,OAAA,aAAA;AACT;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../src/Avatar/utils.ts"],"sourcesContent":["import type { ImgHTMLAttributes, Ref } from 'vue'\nimport { isClient } from '@vueuse/shared'\nimport { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'\n\nexport type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'\n\nfunction resolveLoadingStatus(image: HTMLImageElement | null, src?: string): ImageLoadingStatus {\n  if (!image) {\n    return 'idle'\n  }\n  if (!src) {\n    return 'error'\n  }\n  if (image.src !== src) {\n    image.src = src\n  }\n  return image.complete && image.naturalWidth > 0 ? 'loaded' : 'loading'\n}\n\nexport function useImageLoadingStatus(src: Ref<string>, { referrerPolicy, crossOrigin }: { referrerPolicy?: Ref<ImgHTMLAttributes['referrerpolicy']>, crossOrigin?: Ref<ImgHTMLAttributes['crossorigin']> } = {}) {\n  const isMounted = ref(false)\n  const imageRef = ref<HTMLImageElement | null>(null)\n  const image = computed(() => {\n    if (!isMounted.value) {\n      return null\n    }\n    if (!imageRef.value && isClient) {\n      imageRef.value = new window.Image()\n    }\n    return imageRef.value\n  })\n\n  const loadingStatus = ref<ImageLoadingStatus>(resolveLoadingStatus(image.value, src.value))\n\n  const updateStatus = (status: ImageLoadingStatus) => () => {\n    if (isMounted.value)\n      loadingStatus.value = status\n  }\n\n  onMounted(() => {\n    isMounted.value = true\n\n    watchEffect((onCleanup) => {\n      const img = image.value\n      if (!img)\n        return\n\n      loadingStatus.value = resolveLoadingStatus(img, src.value)\n\n      const handleLoad = updateStatus('loaded')\n      const handleError = updateStatus('error')\n\n      img.addEventListener('load', handleLoad)\n      img.addEventListener('error', handleError)\n\n      if (referrerPolicy?.value)\n        img.referrerPolicy = referrerPolicy.value\n      if (typeof crossOrigin?.value === 'string')\n        img.crossOrigin = crossOrigin.value\n\n      onCleanup(() => {\n        img.removeEventListener('load', handleLoad)\n        img.removeEventListener('error', handleError)\n      })\n    })\n  })\n\n  onUnmounted(() => {\n    isMounted.value = false\n  })\n\n  return loadingStatus\n}\n"],"names":["ref","computed","isClient","onMounted","watchEffect","onUnmounted"],"mappings":";;;;;AAMA,SAAS,oBAAA,CAAqB,OAAgC,GAAkC,EAAA;AAC9F,EAAA,IAAI,CAAC,KAAO,EAAA;AACV,IAAO,OAAA,MAAA;AAAA;AAET,EAAA,IAAI,CAAC,GAAK,EAAA;AACR,IAAO,OAAA,OAAA;AAAA;AAET,EAAI,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AACrB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA;AAAA;AAEd,EAAA,OAAO,KAAM,CAAA,QAAA,IAAY,KAAM,CAAA,YAAA,GAAe,IAAI,QAAW,GAAA,SAAA;AAC/D;AAEO,SAAS,sBAAsB,GAAkB,EAAA,EAAE,gBAAgB,WAAY,EAAA,GAAwH,EAAI,EAAA;AAChN,EAAM,MAAA,SAAA,GAAYA,QAAI,KAAK,CAAA;AAC3B,EAAM,MAAA,QAAA,GAAWA,QAA6B,IAAI,CAAA;AAClD,EAAM,MAAA,KAAA,GAAQC,aAAS,MAAM;AAC3B,IAAI,IAAA,CAAC,UAAU,KAAO,EAAA;AACpB,MAAO,OAAA,IAAA;AAAA;AAET,IAAI,IAAA,CAAC,QAAS,CAAA,KAAA,IAASC,eAAU,EAAA;AAC/B,MAAS,QAAA,CAAA,KAAA,GAAQ,IAAI,MAAA,CAAO,KAAM,EAAA;AAAA;AAEpC,IAAA,OAAO,QAAS,CAAA,KAAA;AAAA,GACjB,CAAA;AAED,EAAA,MAAM,gBAAgBF,OAAwB,CAAA,oBAAA,CAAqB,MAAM,KAAO,EAAA,GAAA,CAAI,KAAK,CAAC,CAAA;AAE1F,EAAM,MAAA,YAAA,GAAe,CAAC,MAAA,KAA+B,MAAM;AACzD,IAAA,IAAI,SAAU,CAAA,KAAA;AACZ,MAAA,aAAA,CAAc,KAAQ,GAAA,MAAA;AAAA,GAC1B;AAEA,EAAAG,aAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,KAAQ,GAAA,IAAA;AAElB,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,MAAM,MAAM,KAAM,CAAA,KAAA;AAClB,MAAA,IAAI,CAAC,GAAA;AACH,QAAA;AAEF,MAAA,aAAA,CAAc,KAAQ,GAAA,oBAAA,CAAqB,GAAK,EAAA,GAAA,CAAI,KAAK,CAAA;AAEzD,MAAM,MAAA,UAAA,GAAa,aAAa,QAAQ,CAAA;AACxC,MAAM,MAAA,WAAA,GAAc,aAAa,OAAO,CAAA;AAExC,MAAI,GAAA,CAAA,gBAAA,CAAiB,QAAQ,UAAU,CAAA;AACvC,MAAI,GAAA,CAAA,gBAAA,CAAiB,SAAS,WAAW,CAAA;AAEzC,MAAA,IAAI,cAAgB,EAAA,KAAA;AAClB,QAAA,GAAA,CAAI,iBAAiB,cAAe,CAAA,KAAA;AACtC,MAAI,IAAA,OAAO,aAAa,KAAU,KAAA,QAAA;AAChC,QAAA,GAAA,CAAI,cAAc,WAAY,CAAA,KAAA;AAEhC,MAAA,SAAA,CAAU,MAAM;AACd,QAAI,GAAA,CAAA,mBAAA,CAAoB,QAAQ,UAAU,CAAA;AAC1C,QAAI,GAAA,CAAA,mBAAA,CAAoB,SAAS,WAAW,CAAA;AAAA,OAC7C,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA;AAED,EAAAC,eAAA,CAAY,MAAM;AAChB,IAAA,SAAA,CAAU,KAAQ,GAAA,KAAA;AAAA,GACnB,CAAA;AAED,EAAO,OAAA,aAAA;AACT;;;;"}