@rotki/ui-library 3.1.6 → 3.2.0

package/dist/components/accordions/accordion/RuiAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.js","names":["_sfc_main"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { useClipWhileResizing } from '@/composables/clip-while-resizing';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\nconst content = useTemplateRef<HTMLDivElement>('content');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nconst resizing = useClipWhileResizing(content, contentHeight);\n\n// a closed `eager` panel keeps its content at height 0, so it clips; an open one only while it resizes, so sticky content works\nconst clipped = computed<boolean>(() => !open || get(resizing));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      ref=\"content\"\n      class=\"grow transition-[height] duration-200 ease-out w-full motion-reduce:transition-none\"\n      :class=\"[{ 'overflow-hidden': clipped }, classNames?.content]\"\n      :data-clipped=\"clipped || undefined\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAccordion.js","names":["_sfc_main"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { useClipWhileResizing } from '@/composables/clip-while-resizing';\nimport { cn } from '@/utils/tv';\nimport { accordionStyles } from './accordion-styles';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\nconst content = useTemplateRef<HTMLDivElement>('content');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nconst resizing = useClipWhileResizing(content, contentHeight);\n\n// a closed `eager` panel keeps its content at height 0, so it clips; an open one only while it resizes, so sticky content works\nconst clipped = computed<boolean>(() => !open || get(resizing));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"accordionStyles({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      ref=\"content\"\n      class=\"grow transition-[height] duration-200 ease-out w-full motion-reduce:transition-none\"\n      :class=\"[{ 'overflow-hidden': clipped }, classNames?.content]\"\n      :data-clipped=\"clipped || undefined\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
 import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { useElementSize } from "../../../vendor/@vueuse/core/dist/index.js";
-import { cn, tv } from "../../../utils/tv.js";
+import { cn } from "../../../utils/tv.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import { useClipWhileResizing } from "../../../composables/clip-while-resizing.js";
+import { accordionStyles } from "./accordion-styles.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, useId, useTemplateRef } from "vue";
 //#region src/components/accordions/accordion/RuiAccordion.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-state"];
@@ -55,10 +56,9 @@ var RuiAccordion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				toggle();
 			}
 		}
-		const rootStyle = tv({ base: "flex flex-col items-start" });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
-				class: unref(rootStyle)({ class: unref(cn)(__props.classNames?.root ?? _ctx.$attrs.class) }),
+				class: unref(accordionStyles)({ class: unref(cn)(__props.classNames?.root ?? _ctx.$attrs.class) }),
 				"data-state": __props.open ? "open" : "closed",
 				"data-accordion": ""
 			}, {

package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_createElementVNode","_renderSlot","_createVNode","Icon","_createCommentVNode","_normalizeStyle"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { useClipWhileResizing } from '@/composables/clip-while-resizing';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\nconst content = useTemplateRef<HTMLDivElement>('content');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nconst resizing = useClipWhileResizing(content, contentHeight);\n\n// a closed `eager` panel keeps its content at height 0, so it clips; an open one only while it resizes, so sticky content works\nconst clipped = computed<boolean>(() => !open || get(resizing));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      ref=\"content\"\n      class=\"grow transition-[height] duration-200 ease-out w-full motion-reduce:transition-none\"\n      :class=\"[{ 'overflow-hidden': clipped }, classNames?.content]\"\n      :data-clipped=\"clipped || undefined\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,OAAO;EACpD,MAAM,UAAU,eAA+B,SAAS;EAExD,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;EACxB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,IAAI,WAAW,EAAE,MAAM,KAAM;EAErF,MAAM,WAAW,qBAAqB,SAAS,aAAa;EAG5D,MAAM,UAAU,eAAwB,CAAC,QAAA,QAAQ,IAAI,QAAQ,CAAC;EAE9D,SAAS,SAAe;GACtB,KAAK,OAAO;EACd;EAEA,SAAS,UAAU,OAA4B;GAC7C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,OAAO;GACT;EACF;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,4BAA4B,CAAC;;GAIxD,OAAAE,UAAA,GAAAC,mBAiDM,OAjDNC,WAiDM;IAhDH,OAAOC,MAAA,SAAA,CAAS,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQL,KAAAA,OAAO,KAAK,EAAA,CAAA;IAC7D,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAI7BC,KAAAA,OAAO,UADfC,UAAA,GAAAC,mBAyBM,OAAA;;IAvBH,IAAIE,MAAA,SAAA;IACL,OAAKC,eAAA,CAAC,0HAAwH,CACrH,QAAA,YAAY,QAAM,EAAA,UAAc,QAAA,WAAU,CAAA,CAAA,CAAA;IACnD,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAeD,MAAA,SAAA;IAChB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;GAE1BE,GAAAA,CAAAA,mBAKM,OAAA,EALA,OAAKD,eAAA,EAAA,MAAU,QAAA,WAAU,CAAA,EAAA,GAAA,CAC7BE,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,KAAI,CAAA,CAAA,GAAA,CAAA,GAGfC,YAKEC,iBAAA;IAJA,OAAKJ,eAAA,CAAC,4IAA0I,EAAA,eACvH,QAAA,KAAI,CAAA,CAAA;IAC7B,MAAK;IACJ,MAAM;GAIH,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,QAAA,QAAQ,QAAA,SADhBJ,UAAA,GAAAC,mBAeM,OAAA;;IAbH,IAAIE,MAAA,SAAA;IACD,SAAA;IAAJ,KAAI;IACJ,OAAKC,eAAA,CAAC,uFAAqF,CAAA,EAAA,mBAC7DD,MAAA,OAAA,EAAO,GAAI,QAAA,YAAY,OAAO,CAAA,CAAA;IAC3D,gBAAcA,MAAA,OAAA,KAAW,KAAA;IACzB,OAAKO,eAAA,EAAA,QAAYP,MAAA,aAAA,EAAa,CAAA;IAC/B,MAAK;IACJ,mBAAiBA,MAAA,SAAA;IAClB,0BAAA;GAEAE,GAAAA,CAAAA,mBAEM,OAAA;IAFG,SAAA;IAAJ,KAAI;GACPC,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"RuiAccordion.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_createElementVNode","_renderSlot","_createVNode","Icon","_createCommentVNode","_normalizeStyle"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { useClipWhileResizing } from '@/composables/clip-while-resizing';\nimport { cn } from '@/utils/tv';\nimport { accordionStyles } from './accordion-styles';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\nconst content = useTemplateRef<HTMLDivElement>('content');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nconst resizing = useClipWhileResizing(content, contentHeight);\n\n// a closed `eager` panel keeps its content at height 0, so it clips; an open one only while it resizes, so sticky content works\nconst clipped = computed<boolean>(() => !open || get(resizing));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"accordionStyles({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      ref=\"content\"\n      class=\"grow transition-[height] duration-200 ease-out w-full motion-reduce:transition-none\"\n      :class=\"[{ 'overflow-hidden': clipped }, classNames?.content]\"\n      :data-clipped=\"clipped || undefined\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,OAAO;EACpD,MAAM,UAAU,eAA+B,SAAS;EAExD,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;EACxB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,IAAI,WAAW,EAAE,MAAM,KAAM;EAErF,MAAM,WAAW,qBAAqB,SAAS,aAAa;EAG5D,MAAM,UAAU,eAAwB,CAAC,QAAA,QAAQ,IAAI,QAAQ,CAAC;EAE9D,SAAS,SAAe;GACtB,KAAK,OAAO;EACd;EAEA,SAAS,UAAU,OAA4B;GAC7C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,OAAO;GACT;EACF;;GAIE,OAAAE,UAAA,GAAAC,mBAiDM,OAjDNC,WAiDM;IAhDH,OAAOC,MAAA,eAAA,CAAe,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQL,KAAAA,OAAO,KAAK,EAAA,CAAA;IACnE,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAI7BC,KAAAA,OAAO,UADfC,UAAA,GAAAC,mBAyBM,OAAA;;IAvBH,IAAIE,MAAA,SAAA;IACL,OAAKC,eAAA,CAAC,0HAAwH,CACrH,QAAA,YAAY,QAAM,EAAA,UAAc,QAAA,WAAU,CAAA,CAAA,CAAA;IACnD,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAeD,MAAA,SAAA;IAChB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;GAE1BE,GAAAA,CAAAA,mBAKM,OAAA,EALA,OAAKD,eAAA,EAAA,MAAU,QAAA,WAAU,CAAA,EAAA,GAAA,CAC7BE,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,KAAI,CAAA,CAAA,GAAA,CAAA,GAGfC,YAKEC,iBAAA;IAJA,OAAKJ,eAAA,CAAC,4IAA0I,EAAA,eACvH,QAAA,KAAI,CAAA,CAAA;IAC7B,MAAK;IACJ,MAAM;GAIH,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,QAAA,QAAQ,QAAA,SADhBJ,UAAA,GAAAC,mBAeM,OAAA;;IAbH,IAAIE,MAAA,SAAA;IACD,SAAA;IAAJ,KAAI;IACJ,OAAKC,eAAA,CAAC,uFAAqF,CAAA,EAAA,mBAC7DD,MAAA,OAAA,EAAO,GAAI,QAAA,YAAY,OAAO,CAAA,CAAA;IAC3D,gBAAcA,MAAA,OAAA,KAAW,KAAA;IACzB,OAAKO,eAAA,EAAA,QAAYP,MAAA,aAAA,EAAa,CAAA;IAC/B,MAAK;IACJ,mBAAiBA,MAAA,SAAA;IAClB,0BAAA;GAEAE,GAAAA,CAAAA,mBAEM,OAAA;IAFG,SAAA;IAAJ,KAAI;GACPC,GAAAA,CAAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/accordions/accordion/accordion-styles.d.ts

@@ -0,0 +1 @@
+export declare const accordionStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-col items-start", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

package/dist/components/accordions/accordion/accordion-styles.js

@@ -0,0 +1,7 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/accordions/accordion/accordion-styles.ts
+var accordionStyles = tv({ base: "flex flex-col items-start" });
+//#endregion
+export { accordionStyles };
+
+//# sourceMappingURL=accordion-styles.js.map

package/dist/components/accordions/accordion/accordion-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-styles.js","names":[],"sources":["../../../../src/components/accordions/accordion/accordion-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const accordionStyles = tv({ base: 'flex flex-col items-start' });\n"],"mappings":";;AAEA,IAAa,kBAAkB,GAAG,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/alerts/RuiAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAlert.js","names":["_sfc_main"],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  title?: string;\n  description?: string;\n  type?: ContextColorsType;\n  icon?: RuiIcons;\n  variant?: 'default' | 'filled' | 'outlined';\n  actionText?: string;\n  closeable?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAlert',\n  inheritAttrs: false,\n});\n\nconst {\n  title = '',\n  description = '',\n  type = 'primary',\n  icon = undefined,\n  variant = 'default',\n  actionText = '',\n  closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  action: [];\n  close: [];\n}>();\n\nconst slots = defineSlots<{\n  title?: () => any;\n  default?: () => any;\n}>();\n\nconst alertStyles = tv({\n  slots: {\n    root: 'px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0',\n    content: 'flex between:ml-3 between:mr-0 py-1 grow',\n    // as tall as the first line of text and centered in it, so the icon lines up however the text wraps\n    icon: 'flex shrink-0 items-center',\n    texts: 'between:mt-1 between:mb-0 grow',\n    action: '',\n    close: '',\n  },\n  variants: {\n    // the first line is the title's (24px) when there is one, else the description's (text-sm, 20px)\n    titled: {\n      true: { icon: 'h-6' },\n      false: { icon: 'h-5' },\n    },\n    variant: {\n      default: {},\n      filled: {\n        icon: 'text-rui-dark-text!',\n        texts: 'text-rui-dark-text!',\n        action: 'text-rui-dark-text!',\n        close: 'text-rui-dark-text!',\n      },\n      outlined: { root: 'border -m-px bg-transparent' },\n    },\n    /*\n     * Each type names its color once, as `--rui-alert`, and the variants mix from it. Tints and\n     * shades used to be paused CSS animations behind an `@supports (color-mix())` check that never\n     * matched (not a valid condition); mixing directly gives the same colors without them.\n     */\n    type: {\n      primary: { root: '[--rui-alert:var(--rui-primary-main)]' },\n      secondary: { root: '[--rui-alert:var(--rui-secondary-main)]' },\n      // a status color's dark `main` is a text tone, so a filled alert takes the deep `darker` there\n      error: { root: '[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]' },\n      warning: { root: '[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]' },\n      info: { root: '[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]' },\n      success: { root: '[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]' },\n    },\n  },\n  compoundVariants: [\n    // A tint of the type's color with a hairline of it, which reads on any surface in either theme\n    {\n      variant: 'default',\n      class: { root: 'border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]' },\n    },\n    { variant: 'filled', class: { root: 'bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]' } },\n    // without a tint behind it, the outlined alert carries its type in the icon too\n    { variant: 'outlined', class: { root: 'border-[rgb(var(--rui-alert))]', icon: 'text-[rgb(var(--rui-alert))]' } },\n  ],\n  compoundSlots: [\n    {\n      slots: ['texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n    {\n      slots: ['icon'],\n      variant: 'default',\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n  ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type, titled: !!slots.title || !!title }));\n\nconst usedIcon = computed<RuiIcons | undefined>(() => {\n  if (icon)\n    return icon;\n\n  const iconMap: Record<ContextColorsType, RuiIcons | undefined> = {\n    primary: undefined,\n    secondary: undefined,\n    warning: 'lu-triangle-alert',\n    info: 'lu-info',\n    error: 'lu-circle-alert',\n    success: 'lu-circle-check',\n  };\n\n  return iconMap[type];\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n    :data-variant=\"variant\"\n    :data-type=\"type\"\n  >\n    <div :class=\"ui.content()\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"ui.icon()\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"20\"\n        />\n      </div>\n      <div :class=\"ui.texts()\">\n        <div\n          v-if=\"$slots.title || title\"\n          :class=\"{\n            'font-medium': !!title,\n          }\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n\n        <div\n          v-if=\"$slots.default || description\"\n          class=\"text-body-2\"\n        >\n          <slot>\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"actionText\">\n      <RuiButton\n        variant=\"text\"\n        size=\"sm\"\n        :color=\"variant === 'filled' ? undefined : type\"\n        :class=\"ui.action()\"\n        data-id=\"alert-action\"\n        @click=\"emit('action')\"\n      >\n        {{ actionText }}\n      </RuiButton>\n    </div>\n    <div v-if=\"closeable\">\n      <RuiButton\n        :color=\"variant === 'filled' ? undefined : type\"\n        size=\"sm\"\n        icon\n        variant=\"text\"\n        :class=\"ui.close()\"\n        data-id=\"alert-close\"\n        @click=\"emit('close')\"\n      >\n        <RuiIcon\n          name=\"lu-x\"\n          size=\"20\"\n        />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAlert.js","names":["_sfc_main"],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { alertStyles } from './alert-styles';\n\nexport interface Props {\n  title?: string;\n  description?: string;\n  type?: ContextColorsType;\n  icon?: RuiIcons;\n  variant?: 'default' | 'filled' | 'outlined';\n  actionText?: string;\n  closeable?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAlert',\n  inheritAttrs: false,\n});\n\nconst {\n  title = '',\n  description = '',\n  type = 'primary',\n  icon = undefined,\n  variant = 'default',\n  actionText = '',\n  closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  action: [];\n  close: [];\n}>();\n\nconst slots = defineSlots<{\n  title?: () => any;\n  default?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type, titled: !!slots.title || !!title }));\n\nconst usedIcon = computed<RuiIcons | undefined>(() => {\n  if (icon)\n    return icon;\n\n  const iconMap: Record<ContextColorsType, RuiIcons | undefined> = {\n    primary: undefined,\n    secondary: undefined,\n    warning: 'lu-triangle-alert',\n    info: 'lu-info',\n    error: 'lu-circle-alert',\n    success: 'lu-circle-check',\n  };\n\n  return iconMap[type];\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n    :data-variant=\"variant\"\n    :data-type=\"type\"\n  >\n    <div :class=\"ui.content()\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"ui.icon()\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"20\"\n        />\n      </div>\n      <div :class=\"ui.texts()\">\n        <div\n          v-if=\"$slots.title || title\"\n          :class=\"{\n            'font-medium': !!title,\n          }\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n\n        <div\n          v-if=\"$slots.default || description\"\n          class=\"text-body-2\"\n        >\n          <slot>\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"actionText\">\n      <RuiButton\n        variant=\"text\"\n        size=\"sm\"\n        :color=\"variant === 'filled' ? undefined : type\"\n        :class=\"ui.action()\"\n        data-id=\"alert-action\"\n        @click=\"emit('action')\"\n      >\n        {{ actionText }}\n      </RuiButton>\n    </div>\n    <div v-if=\"closeable\">\n      <RuiButton\n        :color=\"variant === 'filled' ? undefined : type\"\n        size=\"sm\"\n        icon\n        variant=\"text\"\n        :class=\"ui.close()\"\n        data-id=\"alert-close\"\n        @click=\"emit('close')\"\n      >\n        <RuiIcon\n          name=\"lu-x\"\n          size=\"20\"\n        />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/alerts/RuiAlert.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
+import { alertStyles } from "./alert-styles.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
 //#region src/components/alerts/RuiAlert.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-variant", "data-type"];
@@ -30,70 +30,6 @@ var RuiAlert_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const slots = useSlots();
-		const alertStyles = tv({
-			slots: {
-				root: "px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0",
-				content: "flex between:ml-3 between:mr-0 py-1 grow",
-				icon: "flex shrink-0 items-center",
-				texts: "between:mt-1 between:mb-0 grow",
-				action: "",
-				close: ""
-			},
-			variants: {
-				titled: {
-					true: { icon: "h-6" },
-					false: { icon: "h-5" }
-				},
-				variant: {
-					default: {},
-					filled: {
-						icon: "text-rui-dark-text!",
-						texts: "text-rui-dark-text!",
-						action: "text-rui-dark-text!",
-						close: "text-rui-dark-text!"
-					},
-					outlined: { root: "border -m-px bg-transparent" }
-				},
-				type: {
-					primary: { root: "[--rui-alert:var(--rui-primary-main)]" },
-					secondary: { root: "[--rui-alert:var(--rui-secondary-main)]" },
-					error: { root: "[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]" },
-					warning: { root: "[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]" },
-					info: { root: "[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]" },
-					success: { root: "[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]" }
-				}
-			},
-			compoundVariants: [
-				{
-					variant: "default",
-					class: { root: "border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]" }
-				},
-				{
-					variant: "filled",
-					class: { root: "bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]" }
-				},
-				{
-					variant: "outlined",
-					class: {
-						root: "border-[rgb(var(--rui-alert))]",
-						icon: "text-[rgb(var(--rui-alert))]"
-					}
-				}
-			],
-			compoundSlots: [{
-				slots: [
-					"texts",
-					"action",
-					"close"
-				],
-				variant: ["default", "outlined"],
-				class: "text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]"
-			}, {
-				slots: ["icon"],
-				variant: "default",
-				class: "text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]"
-			}]
-		});
 		const ui = computed(() => alertStyles({
 			variant: __props.variant,
 			type: __props.type,

package/dist/components/alerts/RuiAlert.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAlert.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeClass","_createVNode","RuiIcon","_createCommentVNode","_renderSlot","_createTextVNode","_toDisplayString","RuiButton","_withCtx"],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  title?: string;\n  description?: string;\n  type?: ContextColorsType;\n  icon?: RuiIcons;\n  variant?: 'default' | 'filled' | 'outlined';\n  actionText?: string;\n  closeable?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAlert',\n  inheritAttrs: false,\n});\n\nconst {\n  title = '',\n  description = '',\n  type = 'primary',\n  icon = undefined,\n  variant = 'default',\n  actionText = '',\n  closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  action: [];\n  close: [];\n}>();\n\nconst slots = defineSlots<{\n  title?: () => any;\n  default?: () => any;\n}>();\n\nconst alertStyles = tv({\n  slots: {\n    root: 'px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0',\n    content: 'flex between:ml-3 between:mr-0 py-1 grow',\n    // as tall as the first line of text and centered in it, so the icon lines up however the text wraps\n    icon: 'flex shrink-0 items-center',\n    texts: 'between:mt-1 between:mb-0 grow',\n    action: '',\n    close: '',\n  },\n  variants: {\n    // the first line is the title's (24px) when there is one, else the description's (text-sm, 20px)\n    titled: {\n      true: { icon: 'h-6' },\n      false: { icon: 'h-5' },\n    },\n    variant: {\n      default: {},\n      filled: {\n        icon: 'text-rui-dark-text!',\n        texts: 'text-rui-dark-text!',\n        action: 'text-rui-dark-text!',\n        close: 'text-rui-dark-text!',\n      },\n      outlined: { root: 'border -m-px bg-transparent' },\n    },\n    /*\n     * Each type names its color once, as `--rui-alert`, and the variants mix from it. Tints and\n     * shades used to be paused CSS animations behind an `@supports (color-mix())` check that never\n     * matched (not a valid condition); mixing directly gives the same colors without them.\n     */\n    type: {\n      primary: { root: '[--rui-alert:var(--rui-primary-main)]' },\n      secondary: { root: '[--rui-alert:var(--rui-secondary-main)]' },\n      // a status color's dark `main` is a text tone, so a filled alert takes the deep `darker` there\n      error: { root: '[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]' },\n      warning: { root: '[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]' },\n      info: { root: '[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]' },\n      success: { root: '[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]' },\n    },\n  },\n  compoundVariants: [\n    // A tint of the type's color with a hairline of it, which reads on any surface in either theme\n    {\n      variant: 'default',\n      class: { root: 'border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]' },\n    },\n    { variant: 'filled', class: { root: 'bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]' } },\n    // without a tint behind it, the outlined alert carries its type in the icon too\n    { variant: 'outlined', class: { root: 'border-[rgb(var(--rui-alert))]', icon: 'text-[rgb(var(--rui-alert))]' } },\n  ],\n  compoundSlots: [\n    {\n      slots: ['texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n    {\n      slots: ['icon'],\n      variant: 'default',\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n  ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type, titled: !!slots.title || !!title }));\n\nconst usedIcon = computed<RuiIcons | undefined>(() => {\n  if (icon)\n    return icon;\n\n  const iconMap: Record<ContextColorsType, RuiIcons | undefined> = {\n    primary: undefined,\n    secondary: undefined,\n    warning: 'lu-triangle-alert',\n    info: 'lu-info',\n    error: 'lu-circle-alert',\n    success: 'lu-circle-check',\n  };\n\n  return iconMap[type];\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n    :data-variant=\"variant\"\n    :data-type=\"type\"\n  >\n    <div :class=\"ui.content()\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"ui.icon()\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"20\"\n        />\n      </div>\n      <div :class=\"ui.texts()\">\n        <div\n          v-if=\"$slots.title || title\"\n          :class=\"{\n            'font-medium': !!title,\n          }\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n\n        <div\n          v-if=\"$slots.default || description\"\n          class=\"text-body-2\"\n        >\n          <slot>\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"actionText\">\n      <RuiButton\n        variant=\"text\"\n        size=\"sm\"\n        :color=\"variant === 'filled' ? undefined : type\"\n        :class=\"ui.action()\"\n        data-id=\"alert-action\"\n        @click=\"emit('action')\"\n      >\n        {{ actionText }}\n      </RuiButton>\n    </div>\n    <div v-if=\"closeable\">\n      <RuiButton\n        :color=\"variant === 'filled' ? undefined : type\"\n        size=\"sm\"\n        icon\n        variant=\"text\"\n        :class=\"ui.close()\"\n        data-id=\"alert-close\"\n        @click=\"emit('close')\"\n      >\n        <RuiIcon\n          name=\"lu-x\"\n          size=\"20\"\n        />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiAlert.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeClass","_createVNode","RuiIcon","_createCommentVNode","_renderSlot","_createTextVNode","_toDisplayString","RuiButton","_withCtx"],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { alertStyles } from './alert-styles';\n\nexport interface Props {\n  title?: string;\n  description?: string;\n  type?: ContextColorsType;\n  icon?: RuiIcons;\n  variant?: 'default' | 'filled' | 'outlined';\n  actionText?: string;\n  closeable?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAlert',\n  inheritAttrs: false,\n});\n\nconst {\n  title = '',\n  description = '',\n  type = 'primary',\n  icon = undefined,\n  variant = 'default',\n  actionText = '',\n  closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  action: [];\n  close: [];\n}>();\n\nconst slots = defineSlots<{\n  title?: () => any;\n  default?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type, titled: !!slots.title || !!title }));\n\nconst usedIcon = computed<RuiIcons | undefined>(() => {\n  if (icon)\n    return icon;\n\n  const iconMap: Record<ContextColorsType, RuiIcons | undefined> = {\n    primary: undefined,\n    secondary: undefined,\n    warning: 'lu-triangle-alert',\n    info: 'lu-info',\n    error: 'lu-circle-alert',\n    success: 'lu-circle-check',\n  };\n\n  return iconMap[type];\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n    :data-variant=\"variant\"\n    :data-type=\"type\"\n  >\n    <div :class=\"ui.content()\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"ui.icon()\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"20\"\n        />\n      </div>\n      <div :class=\"ui.texts()\">\n        <div\n          v-if=\"$slots.title || title\"\n          :class=\"{\n            'font-medium': !!title,\n          }\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n\n        <div\n          v-if=\"$slots.default || description\"\n          class=\"text-body-2\"\n        >\n          <slot>\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"actionText\">\n      <RuiButton\n        variant=\"text\"\n        size=\"sm\"\n        :color=\"variant === 'filled' ? undefined : type\"\n        :class=\"ui.action()\"\n        data-id=\"alert-action\"\n        @click=\"emit('action')\"\n      >\n        {{ actionText }}\n      </RuiButton>\n    </div>\n    <div v-if=\"closeable\">\n      <RuiButton\n        :color=\"variant === 'filled' ? undefined : type\"\n        size=\"sm\"\n        icon\n        variant=\"text\"\n        :class=\"ui.close()\"\n        data-id=\"alert-close\"\n        @click=\"emit('close')\"\n      >\n        <RuiIcon\n          name=\"lu-x\"\n          size=\"20\"\n        />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,OAAO;EAKb,MAAM,QAAQE,SAAA;EAKd,MAAM,KAAK,eAA+C,YAAY;GAAE,SAAM,QAAA;GAAG,MAAG,QAAA;GAAG,QAAQ,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,QAAA;EAAM,CAAC,CAAC;EAE1H,MAAM,WAAW,eAAqC;GACpD,IAAI,QAAA,MACF,OAAO,QAAA;GAWT,OAAO;IARL,SAAS,KAAA;IACT,WAAW,KAAA;IACX,SAAS;IACT,MAAM;IACN,OAAO;IACP,SAAS;GAGJ,EAAQ,QAAA;EACjB,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAkEM,OAlENC,WAkEM,EAjEH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EACPN,GAAAA,KAAAA,QAAM;IACb,gBAAc,QAAA;IACd,aAAW,QAAA;;IAEZO,mBA+BM,OAAA,EA/BA,OAAKC,eAAEF,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA,CAEbA,MAAA,QAAA,KADRH,UAAA,GAAAC,mBAQM,OAAA;;KANH,OAAKI,eAAEF,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IAEfG,GAAAA,CAAAA,YAGEC,iBAAA;KAFC,MAAMJ,MAAA,QAAA;KACP,MAAK;IAGTC,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,CAAAA,GAAAA,CAAAA,KAAAA,mBAAAA,IAAAA,IAAAA,GAAAA,mBAoBM,OAAA,EApBA,OAAKC,eAAEF,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA,EAAA,GAAA,CAEXL,KAAAA,OAAO,SAAS,QAAA,SADxBE,UAAA,GAAAC,mBASM,OAAA;;KAPH,OAAKI,eAAA,EAAiC,eAAA,CAAA,CAAA,QAAA,MAAA,CAAA;IAIvCI,GAAAA,CAAAA,WAEO,KAAA,QAAA,SAAA,CAAA,SAAA,CADFC,gBAAAC,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAKJb,KAAAA,OAAO,WAAW,QAAA,eAD1BE,UAAA,GAAAC,mBAOM,OAPN,YAOM,CAHJQ,WAEO,KAAA,QAAA,WAAA,CAAA,SAAA,CADFC,gBAAAC,gBAAA,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA;IAKX,QAAA,cAAXX,UAAA,GAAAC,mBAWM,OAAA,YAAA,CAVJK,YASYM,mBAAA;KARV,SAAQ;KACR,MAAK;KACJ,OAAO,QAAA,YAAO,WAAgB,KAAA,IAAY,QAAA;KAC1C,OAAKP,eAAEF,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;KACjB,WAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;KAEZ,SAAAU,cAAgB,CAAbH,gBAAAC,gBAAA,QAAA,UAAU,GAAA,CAAA,CAAA,CAAA;;;IAGN,QAAA,aAAXX,UAAA,GAAAC,mBAeM,OAAA,YAAA,CAdJK,YAaYM,mBAAA;KAZT,OAAO,QAAA,YAAO,WAAgB,KAAA,IAAY,QAAA;KAC3C,MAAK;KACL,MAAA;KACA,SAAQ;KACP,OAAKP,eAAEF,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KAChB,WAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;;KAEZ,SAAAU,cAGE,CAHFP,YAGEC,iBAAA;MAFA,MAAK;MACL,MAAK"}

package/dist/components/alerts/alert-styles.d.ts

@@ -0,0 +1,145 @@
+export declare const alertStyles: import("tailwind-variants").TVReturnType<{
+    titled: {
+        true: {
+            icon: string;
+        };
+        false: {
+            icon: string;
+        };
+    };
+    variant: {
+        default: {};
+        filled: {
+            icon: string;
+            texts: string;
+            action: string;
+            close: string;
+        };
+        outlined: {
+            root: string;
+        };
+    };
+    type: {
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    icon: string;
+    texts: string;
+    action: string;
+    close: string;
+}, undefined, {
+    titled: {
+        true: {
+            icon: string;
+        };
+        false: {
+            icon: string;
+        };
+    };
+    variant: {
+        default: {};
+        filled: {
+            icon: string;
+            texts: string;
+            action: string;
+            close: string;
+        };
+        outlined: {
+            root: string;
+        };
+    };
+    type: {
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    icon: string;
+    texts: string;
+    action: string;
+    close: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    titled: {
+        true: {
+            icon: string;
+        };
+        false: {
+            icon: string;
+        };
+    };
+    variant: {
+        default: {};
+        filled: {
+            icon: string;
+            texts: string;
+            action: string;
+            close: string;
+        };
+        outlined: {
+            root: string;
+        };
+    };
+    type: {
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    icon: string;
+    texts: string;
+    action: string;
+    close: string;
+}>>;

package/dist/components/alerts/alert-styles.js

@@ -0,0 +1,70 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/alerts/alert-styles.ts
+var alertStyles = tv({
+	slots: {
+		root: "px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0",
+		content: "flex between:ml-3 between:mr-0 py-1 grow",
+		icon: "flex shrink-0 items-center",
+		texts: "between:mt-1 between:mb-0 grow",
+		action: "",
+		close: ""
+	},
+	variants: {
+		titled: {
+			true: { icon: "h-6" },
+			false: { icon: "h-5" }
+		},
+		variant: {
+			default: {},
+			filled: {
+				icon: "text-rui-dark-text!",
+				texts: "text-rui-dark-text!",
+				action: "text-rui-dark-text!",
+				close: "text-rui-dark-text!"
+			},
+			outlined: { root: "border -m-px bg-transparent" }
+		},
+		type: {
+			primary: { root: "[--rui-alert:var(--rui-primary-main)]" },
+			secondary: { root: "[--rui-alert:var(--rui-secondary-main)]" },
+			error: { root: "[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]" },
+			warning: { root: "[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]" },
+			info: { root: "[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]" },
+			success: { root: "[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]" }
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			class: { root: "border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]" }
+		},
+		{
+			variant: "filled",
+			class: { root: "bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]" }
+		},
+		{
+			variant: "outlined",
+			class: {
+				root: "border-[rgb(var(--rui-alert))]",
+				icon: "text-[rgb(var(--rui-alert))]"
+			}
+		}
+	],
+	compoundSlots: [{
+		slots: [
+			"texts",
+			"action",
+			"close"
+		],
+		variant: ["default", "outlined"],
+		class: "text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]"
+	}, {
+		slots: ["icon"],
+		variant: "default",
+		class: "text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]"
+	}]
+});
+//#endregion
+export { alertStyles };
+
+//# sourceMappingURL=alert-styles.js.map

package/dist/components/alerts/alert-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-styles.js","names":[],"sources":["../../../src/components/alerts/alert-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const alertStyles = tv({\n  slots: {\n    root: 'px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0',\n    content: 'flex between:ml-3 between:mr-0 py-1 grow',\n    // as tall as the first line of text and centered in it, so the icon lines up however the text wraps\n    icon: 'flex shrink-0 items-center',\n    texts: 'between:mt-1 between:mb-0 grow',\n    action: '',\n    close: '',\n  },\n  variants: {\n    // the first line is the title's (24px) when there is one, else the description's (text-sm, 20px)\n    titled: {\n      true: { icon: 'h-6' },\n      false: { icon: 'h-5' },\n    },\n    variant: {\n      default: {},\n      filled: {\n        icon: 'text-rui-dark-text!',\n        texts: 'text-rui-dark-text!',\n        action: 'text-rui-dark-text!',\n        close: 'text-rui-dark-text!',\n      },\n      outlined: { root: 'border -m-px bg-transparent' },\n    },\n    /*\n     * Each type names its color once, as `--rui-alert`, and the variants mix from it. Tints and\n     * shades used to be paused CSS animations behind an `@supports (color-mix())` check that never\n     * matched (not a valid condition); mixing directly gives the same colors without them.\n     */\n    type: {\n      primary: { root: '[--rui-alert:var(--rui-primary-main)]' },\n      secondary: { root: '[--rui-alert:var(--rui-secondary-main)]' },\n      // a status color's dark `main` is a text tone, so a filled alert takes the deep `darker` there\n      error: { root: '[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]' },\n      warning: { root: '[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]' },\n      info: { root: '[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]' },\n      success: { root: '[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]' },\n    },\n  },\n  compoundVariants: [\n    // A tint of the type's color with a hairline of it, which reads on any surface in either theme\n    {\n      variant: 'default',\n      class: { root: 'border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]' },\n    },\n    { variant: 'filled', class: { root: 'bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]' } },\n    // without a tint behind it, the outlined alert carries its type in the icon too\n    { variant: 'outlined', class: { root: 'border-[rgb(var(--rui-alert))]', icon: 'text-[rgb(var(--rui-alert))]' } },\n  ],\n  compoundSlots: [\n    {\n      slots: ['texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n    {\n      slots: ['icon'],\n      variant: 'default',\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n  ],\n});\n"],"mappings":";;AAEA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM;EACN,SAAS;EAET,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EAER,QAAQ;GACN,MAAM,EAAE,MAAM,MAAM;GACpB,OAAO,EAAE,MAAM,MAAM;EACvB;EACA,SAAS;GACP,SAAS,CAAC;GACV,QAAQ;IACN,MAAM;IACN,OAAO;IACP,QAAQ;IACR,OAAO;GACT;GACA,UAAU,EAAE,MAAM,8BAA8B;EAClD;EAMA,MAAM;GACJ,SAAS,EAAE,MAAM,wCAAwC;GACzD,WAAW,EAAE,MAAM,0CAA0C;GAE7D,OAAO,EAAE,MAAM,iFAAiF;GAChG,SAAS,EAAE,MAAM,qFAAqF;GACtG,MAAM,EAAE,MAAM,+EAA+E;GAC7F,SAAS,EAAE,MAAM,qFAAqF;EACxG;CACF;CACA,kBAAkB;EAEhB;GACE,SAAS;GACT,OAAO,EAAE,MAAM,iNAAiN;EAClO;EACA;GAAE,SAAS;GAAU,OAAO,EAAE,MAAM,mFAAmF;EAAE;EAEzH;GAAE,SAAS;GAAY,OAAO;IAAE,MAAM;IAAkC,MAAM;GAA+B;EAAE;CACjH;CACA,eAAe,CACb;EACE,OAAO;GAAC;GAAS;GAAU;EAAO;EAClC,SAAS,CAAC,WAAW,UAAU;EAC/B,OAAO;CACT,GACA;EACE,OAAO,CAAC,MAAM;EACd,SAAS;EACT,OAAO;CACT,CACF;AACF,CAAC"}

package/dist/components/avatars/RuiAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatar.js","names":["_sfc_main"],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeAvatarText,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n  resolveAvatarTextSize,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\n// A numeric size borrows the text scale of the nearest token below it\nconst textSize = computed<AvatarSize>(() => resolveAvatarTextSize(get(resolvedSize)));\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeAvatarText(text);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle',\n    image: 'w-full h-full object-cover',\n    fallback: 'w-full h-full flex items-center justify-center',\n    initials: 'uppercase leading-none',\n  },\n  variants: {\n    variant: {\n      circular: { root: 'rounded-full' },\n      rounded: { root: 'rounded-rui-control' },\n      square: { root: 'rounded-none' },\n    },\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark\n    color: {\n      default: { root: 'bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700' },\n      primary: { root: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { root: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { root: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { root: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { root: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { root: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // On the root so slot content (such as a group's `+N`) scales too\n    size: {\n      'xs': { root: 'text-[0.625rem]' },\n      'sm': { root: 'text-[0.6875rem]' },\n      'md': { root: 'text-sm' },\n      'lg': { root: 'text-base' },\n      'xl': { root: 'text-lg' },\n      '2xl': { root: 'text-xl' },\n    },\n  },\n  defaultVariants: {\n    variant: 'circular',\n    color: 'default',\n    size: 'md',\n  },\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(textSize),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"ariaLabel ? 'img' : undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-hidden=\"displayMode !== 'image' && decorative ? 'true' : undefined\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAvatar.js","names":["_sfc_main"],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeAvatarText,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n  resolveAvatarTextSize,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { avatarStyles } from './avatar-styles';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\n// A numeric size borrows the text scale of the nearest token below it\nconst textSize = computed<AvatarSize>(() => resolveAvatarTextSize(get(resolvedSize)));\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeAvatarText(text);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(textSize),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"ariaLabel ? 'img' : undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-hidden=\"displayMode !== 'image' && decorative ? 'true' : undefined\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/avatars/RuiAvatar.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import { computeAvatarText, computeInitials, resolveAvatarIconPx, resolveAvatarSizePx, resolveAvatarTextSize } from "./avatar-props.js";
 import { useAvatarGroup } from "./use-avatar-group.js";
+import { avatarStyles } from "./avatar-styles.js";
 import { computed, createBlock, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, watch } from "vue";
 //#region src/components/avatars/RuiAvatar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -82,43 +82,6 @@ var RuiAvatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				height: px
 			};
 		});
-		const avatarStyles = tv({
-			slots: {
-				root: "relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle",
-				image: "w-full h-full object-cover",
-				fallback: "w-full h-full flex items-center justify-center",
-				initials: "uppercase leading-none"
-			},
-			variants: {
-				variant: {
-					circular: { root: "rounded-full" },
-					rounded: { root: "rounded-rui-control" },
-					square: { root: "rounded-none" }
-				},
-				color: {
-					default: { root: "bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700" },
-					primary: { root: "bg-rui-primary-fill text-rui-primary-foreground" },
-					secondary: { root: "bg-rui-secondary-fill text-rui-secondary-foreground" },
-					error: { root: "bg-rui-error-fill text-rui-error-foreground" },
-					warning: { root: "bg-rui-warning-fill text-rui-warning-foreground" },
-					info: { root: "bg-rui-info-fill text-rui-info-foreground" },
-					success: { root: "bg-rui-success-fill text-rui-success-foreground" }
-				},
-				size: {
-					"xs": { root: "text-[0.625rem]" },
-					"sm": { root: "text-[0.6875rem]" },
-					"md": { root: "text-sm" },
-					"lg": { root: "text-base" },
-					"xl": { root: "text-lg" },
-					"2xl": { root: "text-xl" }
-				}
-			},
-			defaultVariants: {
-				variant: "circular",
-				color: "default",
-				size: "md"
-			}
-		});
 		const ui = computed(() => avatarStyles({
 			variant: get(resolvedVariant),
 			color: __props.color,

package/dist/components/avatars/RuiAvatar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatar.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_renderSlot","_toDisplayString","_createBlock","RuiIcon"],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeAvatarText,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n  resolveAvatarTextSize,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\n// A numeric size borrows the text scale of the nearest token below it\nconst textSize = computed<AvatarSize>(() => resolveAvatarTextSize(get(resolvedSize)));\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeAvatarText(text);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle',\n    image: 'w-full h-full object-cover',\n    fallback: 'w-full h-full flex items-center justify-center',\n    initials: 'uppercase leading-none',\n  },\n  variants: {\n    variant: {\n      circular: { root: 'rounded-full' },\n      rounded: { root: 'rounded-rui-control' },\n      square: { root: 'rounded-none' },\n    },\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark\n    color: {\n      default: { root: 'bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700' },\n      primary: { root: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { root: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { root: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { root: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { root: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { root: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // On the root so slot content (such as a group's `+N`) scales too\n    size: {\n      'xs': { root: 'text-[0.625rem]' },\n      'sm': { root: 'text-[0.6875rem]' },\n      'md': { root: 'text-sm' },\n      'lg': { root: 'text-base' },\n      'xl': { root: 'text-lg' },\n      '2xl': { root: 'text-xl' },\n    },\n  },\n  defaultVariants: {\n    variant: 'circular',\n    color: 'default',\n    size: 'md',\n  },\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(textSize),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"ariaLabel ? 'img' : undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-hidden=\"displayMode !== 'image' && decorative ? 'true' : undefined\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,OAAO;EAKb,MAAM,QAAQC,SAAA;EAId,MAAM,QAAQ,eAAe;EAE7B,MAAM,eAAe,eAAoC;GACvD,IAAI,QAAA,SAAS,KAAA,GACX,OAAO,QAAA;GACT,IAAI,OACF,OAAO,IAAI,KAAK,CAAC,CAAC;GACpB,OAAO;EACT,CAAC;EAED,MAAM,kBAAkB,eAA8B;GACpD,IAAI,QAAA,YAAY,KAAA,GACd,OAAO,QAAA;GACT,IAAI,OACF,OAAO,IAAI,KAAK,CAAC,CAAC;GACpB,OAAO;EACT,CAAC;EAGD,MAAM,WAAW,eAA2B,sBAAsB,IAAI,YAAY,CAAC,CAAC;EAEpF,MAAM,SAAS,eAAuB,oBAAoB,IAAI,YAAY,CAAC,CAAC;EAC5E,MAAM,SAAS,eAAuB,oBAAoB,IAAI,YAAY,CAAC,CAAC;EAE5E,MAAM,UAAU,IAAa,KAAK;EAElC,YAAY,QAAA,WAAW;GACrB,IAAI,SAAS,KAAK;EACpB,CAAC;EAED,MAAM,WAAW,eAAuB;GACtC,MAAM,WAAW,kBAAkB,QAAA,IAAI;GACvC,IAAI,UACF,OAAO;GACT,OAAO,gBAAgB,QAAA,GAAG;EAC5B,CAAC;EAID,MAAM,cAAc,eAA4B;GAC9C,IAAI,QAAA,OAAO,CAAC,IAAI,OAAO,GACrB,OAAO;GACT,IAAI,MAAM,SACR,OAAO;GACT,IAAI,QAAA,MACF,OAAO;GACT,IAAI,IAAI,QAAQ,GACd,OAAO;GACT,OAAO;EACT,CAAC;EAED,MAAM,aAAa,eAAwB,QAAA,QAAQ,MAAM,CAAC,QAAA,IAAI;EAE9D,MAAM,YAAY,eAAmC;GACnD,IAAI,IAAI,WAAW,MAAM,SACvB,OAAO,KAAA;GACT,IAAI,IAAI,UAAU,GAChB,OAAO,KAAA;GACT,OAAO,QAAA,QAAQ,QAAA,OAAO,KAAA;EACxB,CAAC;EAED,MAAM,YAAY,eAAuC;GACvD,MAAM,KAAK,GAAG,IAAI,MAAM,EAAE;GAC1B,OAAO;IAAE,OAAO;IAAI,QAAQ;GAAG;EACjC,CAAC;EAED,MAAM,eAAe,GAAG;GACtB,OAAO;IACL,MAAM;IACN,OAAO;IACP,UAAU;IACV,UAAU;GACZ;GACA,UAAU;IACR,SAAS;KACP,UAAU,EAAE,MAAM,eAAe;KACjC,SAAS,EAAE,MAAM,sBAAsB;KACvC,QAAQ,EAAE,MAAM,eAAe;IACjC;IAEA,OAAO;KACL,SAAS,EAAE,MAAM,2DAA2D;KAC5E,SAAS,EAAE,MAAM,kDAAkD;KACnE,WAAW,EAAE,MAAM,sDAAsD;KACzE,OAAO,EAAE,MAAM,8CAA8C;KAC7D,SAAS,EAAE,MAAM,kDAAkD;KACnE,MAAM,EAAE,MAAM,4CAA4C;KAC1D,SAAS,EAAE,MAAM,kDAAkD;IACrE;IAEA,MAAM;KACJ,MAAM,EAAE,MAAM,kBAAkB;KAChC,MAAM,EAAE,MAAM,mBAAmB;KACjC,MAAM,EAAE,MAAM,UAAU;KACxB,MAAM,EAAE,MAAM,YAAY;KAC1B,MAAM,EAAE,MAAM,UAAU;KACxB,OAAO,EAAE,MAAM,UAAU;IAC3B;GACF;GACA,iBAAiB;IACf,SAAS;IACT,OAAO;IACP,MAAM;GACR;EACF,CAAC;EAED,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,eAAe;GAC5B,OAAI,QAAA;GACJ,MAAM,IAAI,QAAQ;EACpB,CAAC,CAAC;EAEF,SAAS,OAAO,OAAoB;GAClC,IAAI,SAAS,KAAK;GAClB,KAAK,QAAQ,KAAK;EACpB;EAEA,SAAS,QAAQ,OAAoB;GACnC,IAAI,SAAS,IAAI;GACjB,KAAK,SAAS,KAAK;EACrB;;GAIE,OAAAC,UAAA,GAAAC,mBA6CO,QAAA;IA5CJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACd,OAAKC,eAAED,MAAA,SAAA,CAAS;IAChB,MAAMA,MAAA,SAAA,IAAS,QAAW,KAAA;IAC1B,cAAYA,MAAA,SAAA;IACZ,eAAaA,MAAA,WAAA,MAAW,WAAgBA,MAAA,UAAA,IAAU,SAAY,KAAA;IAC9D,WAASL,KAAAA,OAAM,cAAA;IACf,aAAS,OAASK,MAAA,YAAA,MAAY,WAAgBA,MAAA,YAAA,IAAe,KAAA;IAC7D,gBAAcA,MAAA,eAAA;IACd,cAAY,QAAA;GAGLA,GAAAA,CAAAA,MAAA,WAAA,MAAW,WAAgB,QAAA,OADnCH,UAAA,GAAAC,mBAWE,OAAA;;IATC,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;IACf,KAAK,QAAA;IACL,KAAK,QAAA;IACL,SAAS,QAAA;IACT,OAAOA,MAAA,MAAA;IACP,QAAQA,MAAA,MAAA;IACT,WAAQ;IACP,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,OAAO,MAAM;IACnB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAQ,MAAM;GAExBH,GAAAA,MAAAA,IAAAA,UAAAA,MAAAA,UAAA,GAAAC,mBAqBO,QAAA;;IAnBJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,WAAQ;IACR,eAAY;GAEAA,GAAAA,CAAAA,MAAA,WAAA,MAAW,SAAvBE,WAAsC,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAEzBF,MAAA,WAAA,MAAW,cADxBH,UAAA,GAAAC,mBAMO,QAAA;;IAJJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,WAAQ;GAEL,GAAAG,gBAAAH,MAAA,QAAA,CAAQ,GAAA,CAAA,KAGAA,MAAA,WAAA,MAAW,UAAe,QAAA,QADvCH,UAAA,GAAAO,YAKEC,iBAAA;;IAHC,MAAM,QAAA;IACN,MAAML,MAAA,MAAA;IACP,WAAQ;GAEVH,GAAAA,MAAAA,GAAAA,CAAAA,QAAAA,MAAAA,CAAAA,MAAAA,UAAA,GAAAC,mBAA0B,QAAA,YAAb,MAAM,EAAA,GAAA,CAAA,EAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"RuiAvatar.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_renderSlot","_toDisplayString","_createBlock","RuiIcon"],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeAvatarText,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n  resolveAvatarTextSize,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { avatarStyles } from './avatar-styles';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\n// A numeric size borrows the text scale of the nearest token below it\nconst textSize = computed<AvatarSize>(() => resolveAvatarTextSize(get(resolvedSize)));\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeAvatarText(text);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(textSize),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"ariaLabel ? 'img' : undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-hidden=\"displayMode !== 'image' && decorative ? 'true' : undefined\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":"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"}