@rotki/ui-library 2.23.5 → 2.25.0

package/README.md

@@ -200,8 +200,7 @@ const i18n = createI18n({
   locale: 'en',
   messages: {
     en: {
-      // Your app translations
-      // UI library translations (see below)
+      // Your app translations, then the UI library's own (see below)
       rui: {
         date_time_picker: {
           date_after_max: 'Date cannot be after {date}',

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"],"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 { 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  /** @deprecated Use `classNames.header` instead */\n  headerClass?: string;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n  headerClass = '',\n  contentClass = '',\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');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\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    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded\"\n      :class=\"[classNames?.header ?? headerClass, { '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=\"text-rui-text-secondary transition-transform\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-all overflow-hidden w-full\"\n      :class=\"classNames?.content ?? contentClass\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;EACxB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,MAAI,WAAW,EAAE,MAAM,KAAM;EAErF,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;;uBAIxD,mBA6CM,OA7CN,WA6CM;IA5CH,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQA,KAAAA,OAAO,KAAK,EAAA,CAAA;IAC7D,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;;OACaA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAG7BC,KAAAA,OAAO,UAAA,UAAA,GADf,mBAwBM,OAAA;;IAtBH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,+FAA6F,CAC1F,QAAA,YAAY,UAAU,QAAA,aAAW,EAAA,UAAc,QAAA,WAAU,CAAA,CAAA,CAAA;IAClE,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAe,MAAA,SAAA;IAChB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;OAE1B,mBAKM,OAAA,EALA,OAAK,eAAA,EAAA,MAAU,QAAA,WAAU,CAAA,EAAA,GAAA,CAC7B,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,KAAI,CAAA,CAAA,GAAA,CAAA,GAGf,YAIE,iBAAA;IAHA,OAAK,eAAA,CAAC,gDAA8C,EAAA,eAC3B,QAAA,KAAI,CAAA,CAAA;IAC7B,MAAK;6EAID,QAAA,QAAQ,QAAA,SAAA,UAAA,GADhB,mBAaM,OAAA;;IAXH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,8CACE,QAAA,YAAY,WAAW,QAAA,YAAY,CAAA;IAC1C,OAAK,eAAA,EAAA,QAAY,MAAA,aAAA,EAAa,CAAA;IAC/B,MAAK;IACJ,mBAAiB,MAAA,SAAA;IAClB,0BAAA;OAEA,mBAEM,OAAA;aAFG;IAAJ,KAAI;OACP,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"],"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 { 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  /** @deprecated Use `classNames.header` instead */\n  headerClass?: string;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n  headerClass = '',\n  contentClass = '',\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');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\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    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded\"\n      :class=\"[classNames?.header ?? headerClass, { '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=\"text-rui-text-secondary transition-transform\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-all overflow-hidden w-full\"\n      :class=\"classNames?.content ?? contentClass\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;EACxB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,MAAI,WAAW,EAAE,MAAM,KAAM;EAErF,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,OAAA,UAAA,GAAA,mBA6CM,OA7CN,WA6CM;IA5CH,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQA,KAAAA,OAAO,KAAK,EAAA,CAAA;IAC7D,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAG7BC,KAAAA,OAAO,UADf,UAAA,GAAA,mBAwBM,OAAA;;IAtBH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,+FAA6F,CAC1F,QAAA,YAAY,UAAU,QAAA,aAAW,EAAA,UAAc,QAAA,WAAU,CAAA,CAAA,CAAA;IAClE,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAe,MAAA,SAAA;IAChB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;GAE1B,GAAA,CAAA,mBAKM,OAAA,EALA,OAAK,eAAA,EAAA,MAAU,QAAA,WAAU,CAAA,EAAA,GAAA,CAC7B,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,KAAI,CAAA,CAAA,GAAA,CAAA,GAGf,YAIE,iBAAA;IAHA,OAAK,eAAA,CAAC,gDAA8C,EAAA,eAC3B,QAAA,KAAI,CAAA,CAAA;IAC7B,MAAK;GAID,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,QAAA,QAAQ,QAAA,SADhB,UAAA,GAAA,mBAaM,OAAA;;IAXH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,8CACE,QAAA,YAAY,WAAW,QAAA,YAAY,CAAA;IAC1C,OAAK,eAAA,EAAA,QAAY,MAAA,aAAA,EAAa,CAAA;IAC/B,MAAK;IACJ,mBAAiB,MAAA,SAAA;IAClB,0BAAA;GAEA,GAAA,CAAA,mBAEM,OAAA;IAFG,SAAA;IAAJ,KAAI;GACP,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/accordions/accordions/RuiAccordions.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordions.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/accordions/accordions/RuiAccordions.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  multiple?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAccordions',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number[] | number>({ default: -1 });\n\nconst { multiple = false } = defineProps<Props>();\n\nconst internalValue = ref<number[] | number>();\n\nconst slots = useSlots();\nconst children = computed<VNode[]>(() => {\n  const accordions = slots.default?.() ?? [];\n  const currentValue = get(internalValue);\n\n  return accordions.map((accordion, index) => {\n    const open =\n      multiple && Array.isArray(currentValue)\n        ? currentValue.includes(index)\n        : currentValue === index;\n\n    return {\n      ...accordion,\n      props: {\n        open,\n        ...accordion.props,\n      },\n    };\n  });\n});\n\nfunction updateValue(newModelValue: number): void {\n  let newValue: number[] | number;\n  const internal = get(internalValue);\n  if (multiple && Array.isArray(internal)) {\n    const temp = [...internal];\n    const index = temp.indexOf(newModelValue);\n    if (index === -1)\n      temp.push(newModelValue);\n    else temp.splice(index, 1);\n    newValue = temp;\n  }\n  else {\n    if (internal === newModelValue)\n      newValue = -1;\n    else newValue = newModelValue;\n  }\n  set(modelValue, newValue);\n  set(internalValue, newValue);\n}\n\nwatch(\n  [modelValue, () => multiple],\n  ([value, isMultiple]) => {\n    let internal: number | number[] = value;\n    if (isMultiple && !Array.isArray(internal))\n      internal = internal === -1 ? [] : [internal];\n    else if (!isMultiple && Array.isArray(internal))\n      internal = internal[0] ?? -1;\n\n    set(internalValue, internal);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div v-bind=\"$attrs\">\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      @click=\"updateValue(i)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAUA,MAAM,aAAa,SAA8B,SAAA,YAAgB;EAIjE,MAAM,gBAAgB,IAAuB;EAE7C,MAAM,QAAQ,SAAS;EACvB,MAAM,WAAW,eAAwB;GACvC,MAAM,aAAa,MAAM,UAAU,KAAK,CAAC;GACzC,MAAM,eAAe,IAAI,aAAa;GAEtC,OAAO,WAAW,KAAK,WAAW,UAAU;IAC1C,MAAM,OACJ,QAAA,YAAY,MAAM,QAAQ,YAAY,IAClC,aAAa,SAAS,KAAK,IAC3B,iBAAiB;IAEvB,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,UAAU;KACf;IACF;GACF,CAAC;EACH,CAAC;EAED,SAAS,YAAY,eAA6B;GAChD,IAAI;GACJ,MAAM,WAAW,IAAI,aAAa;GAClC,IAAI,QAAA,YAAY,MAAM,QAAQ,QAAQ,GAAG;IACvC,MAAM,OAAO,CAAC,GAAG,QAAQ;IACzB,MAAM,QAAQ,KAAK,QAAQ,aAAa;IACxC,IAAI,UAAU,IACZ,KAAK,KAAK,aAAa;SACpB,KAAK,OAAO,OAAO,CAAC;IACzB,WAAW;GACb,OAEE,IAAI,aAAa,eACf,WAAW;QACR,WAAW;GAElB,IAAI,YAAY,QAAQ;GACxB,IAAI,eAAe,QAAQ;EAC7B;EAEA,MACE,CAAC,kBAAkB,QAAA,QAAQ,IAC1B,CAAC,OAAO,gBAAgB;GACvB,IAAI,WAA8B;GAClC,IAAI,cAAc,CAAC,MAAM,QAAQ,QAAQ,GACvC,WAAW,aAAa,KAAK,CAAC,IAAI,CAAC,QAAQ;QACxC,IAAI,CAAC,cAAc,MAAM,QAAQ,QAAQ,GAC5C,WAAW,SAAS,MAAM;GAE5B,IAAI,eAAe,QAAQ;EAC7B,GACA,EAAE,WAAW,KAAK,CACpB;;uBAIE,mBAOM,OAAA,eAAA,mBAPOA,KAAAA,MAAM,CAAA,GAAA,EAAA,UAAA,IAAA,GACjB,mBAKE,UAAA,MAAA,WAHqB,MAAA,QAAA,IAAb,OAAO,MAAC;wBAFlB,YAKE,wBAJK,KAAK,GAAA;KAET,KAAK;KACL,UAAK,WAAE,YAAY,CAAC"}
+{"version":3,"file":"RuiAccordions.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/accordions/accordions/RuiAccordions.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  multiple?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAccordions',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number[] | number>({ default: -1 });\n\nconst { multiple = false } = defineProps<Props>();\n\nconst internalValue = ref<number[] | number>();\n\nconst slots = useSlots();\nconst children = computed<VNode[]>(() => {\n  const accordions = slots.default?.() ?? [];\n  const currentValue = get(internalValue);\n\n  return accordions.map((accordion, index) => {\n    const open =\n      multiple && Array.isArray(currentValue)\n        ? currentValue.includes(index)\n        : currentValue === index;\n\n    return {\n      ...accordion,\n      props: {\n        open,\n        ...accordion.props,\n      },\n    };\n  });\n});\n\nfunction updateValue(newModelValue: number): void {\n  let newValue: number[] | number;\n  const internal = get(internalValue);\n  if (multiple && Array.isArray(internal)) {\n    const temp = [...internal];\n    const index = temp.indexOf(newModelValue);\n    if (index === -1)\n      temp.push(newModelValue);\n    else temp.splice(index, 1);\n    newValue = temp;\n  }\n  else {\n    if (internal === newModelValue)\n      newValue = -1;\n    else newValue = newModelValue;\n  }\n  set(modelValue, newValue);\n  set(internalValue, newValue);\n}\n\nwatch(\n  [modelValue, () => multiple],\n  ([value, isMultiple]) => {\n    let internal: number | number[] = value;\n    if (isMultiple && !Array.isArray(internal))\n      internal = internal === -1 ? [] : [internal];\n    else if (!isMultiple && Array.isArray(internal))\n      internal = internal[0] ?? -1;\n\n    set(internalValue, internal);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div v-bind=\"$attrs\">\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      @click=\"updateValue(i)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAUA,MAAM,aAAa,SAA8B,SAAA,YAAgB;EAIjE,MAAM,gBAAgB,IAAuB;EAE7C,MAAM,QAAQ,SAAS;EACvB,MAAM,WAAW,eAAwB;GACvC,MAAM,aAAa,MAAM,UAAU,KAAK,CAAC;GACzC,MAAM,eAAe,IAAI,aAAa;GAEtC,OAAO,WAAW,KAAK,WAAW,UAAU;IAC1C,MAAM,OACJ,QAAA,YAAY,MAAM,QAAQ,YAAY,IAClC,aAAa,SAAS,KAAK,IAC3B,iBAAiB;IAEvB,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,UAAU;KACf;IACF;GACF,CAAC;EACH,CAAC;EAED,SAAS,YAAY,eAA6B;GAChD,IAAI;GACJ,MAAM,WAAW,IAAI,aAAa;GAClC,IAAI,QAAA,YAAY,MAAM,QAAQ,QAAQ,GAAG;IACvC,MAAM,OAAO,CAAC,GAAG,QAAQ;IACzB,MAAM,QAAQ,KAAK,QAAQ,aAAa;IACxC,IAAI,UAAU,IACZ,KAAK,KAAK,aAAa;SACpB,KAAK,OAAO,OAAO,CAAC;IACzB,WAAW;GACb,OAEE,IAAI,aAAa,eACf,WAAW;QACR,WAAW;GAElB,IAAI,YAAY,QAAQ;GACxB,IAAI,eAAe,QAAQ;EAC7B;EAEA,MACE,CAAC,kBAAkB,QAAA,QAAQ,IAC1B,CAAC,OAAO,gBAAgB;GACvB,IAAI,WAA8B;GAClC,IAAI,cAAc,CAAC,MAAM,QAAQ,QAAQ,GACvC,WAAW,aAAa,KAAK,CAAC,IAAI,CAAC,QAAQ;QACxC,IAAI,CAAC,cAAc,MAAM,QAAQ,QAAQ,GAC5C,WAAW,SAAS,MAAM;GAE5B,IAAI,eAAe,QAAQ;EAC7B,GACA,EAAE,WAAW,KAAK,CACpB;;GAIE,OAAA,UAAA,GAAA,mBAOM,OAAA,eAAA,mBAPOA,KAAAA,MAAM,CAAA,GAAA,EACjB,UAAA,IAAA,GAAA,mBAKE,UAAA,MAAA,WAHqB,MAAA,QAAA,IAAb,OAAO,MAAC;IAFlB,OAAA,UAAA,GAAA,YAKE,wBAJK,KAAK,GAAA;KAET,KAAK;KACL,UAAK,WAAE,YAAY,CAAC"}

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"],"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\ndefineSlots<{\n  title?: () => any;\n  default?: () => any;\n}>();\n\nconst alertStyles = tv({\n  slots: {\n    root: 'px-4 py-2.5 rounded flex space-x-4',\n    content: 'flex space-x-3 py-1 flex-grow',\n    icon: '',\n    texts: 'space-y-1 flex-grow',\n    action: '',\n    close: '',\n  },\n  variants: {\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-[-1px] bg-white dark:bg-black' },\n    },\n    type: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Default variant backgrounds\n    {\n      variant: 'default',\n      type: 'primary',\n      class: { root: 'bg-rui-primary bg-tint-[.9] color-mix-supported:bg-rui-primary-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-primary-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'secondary',\n      class: { root: 'bg-rui-secondary bg-tint-[.9] color-mix-supported:bg-rui-secondary-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-secondary-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'error',\n      class: { root: 'bg-rui-error bg-tint-[.9] color-mix-supported:bg-rui-error-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-error-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'warning',\n      class: { root: 'bg-rui-warning bg-tint-[.9] color-mix-supported:bg-rui-warning-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-warning-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'info',\n      class: { root: 'bg-rui-info bg-tint-[.9] color-mix-supported:bg-rui-info-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-info-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'success',\n      class: { root: 'bg-rui-success bg-tint-[.9] color-mix-supported:bg-rui-success-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-success-shade/[.9]' },\n    },\n\n    // Filled variant backgrounds\n    { variant: 'filled', type: 'primary', class: { root: 'bg-rui-primary' } },\n    { variant: 'filled', type: 'secondary', class: { root: 'bg-rui-secondary' } },\n    { variant: 'filled', type: 'error', class: { root: 'bg-rui-error' } },\n    { variant: 'filled', type: 'warning', class: { root: 'bg-rui-warning' } },\n    { variant: 'filled', type: 'info', class: { root: 'bg-rui-info' } },\n    { variant: 'filled', type: 'success', class: { root: 'bg-rui-success' } },\n\n    // Filled dark text override for warning/success/info\n    {\n      variant: 'filled',\n      type: ['warning', 'success', 'info'],\n      class: { root: 'dark:!text-rui-light-text' },\n    },\n\n    // Outlined variant borders\n    { variant: 'outlined', type: 'primary', class: { root: 'border-rui-primary' } },\n    { variant: 'outlined', type: 'secondary', class: { root: 'border-rui-secondary' } },\n    { variant: 'outlined', type: 'error', class: { root: 'border-rui-error' } },\n    { variant: 'outlined', type: 'warning', class: { root: 'border-rui-warning' } },\n    { variant: 'outlined', type: 'info', class: { root: 'border-rui-info' } },\n    { variant: 'outlined', type: 'success', class: { root: 'border-rui-success' } },\n\n  ],\n  compoundSlots: [\n    // Content text colors for default + outlined (shared across all content slots)\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'primary',\n      class: 'text-rui-primary text-shade-[.6] color-mix-supported:text-rui-primary-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-primary-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'secondary',\n      class: 'text-rui-secondary text-shade-[.6] color-mix-supported:text-rui-secondary-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-secondary-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'error',\n      class: 'text-rui-error text-shade-[.6] color-mix-supported:text-rui-error-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-error-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'warning',\n      class: 'text-rui-warning text-shade-[.6] color-mix-supported:text-rui-warning-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-warning-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'info',\n      class: 'text-rui-info text-shade-[.6] color-mix-supported:text-rui-info-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-info-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'success',\n      class: 'text-rui-success text-shade-[.6] color-mix-supported:text-rui-success-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-success-tint/[.6]',\n    },\n\n    // Icon-only dark mode base color\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'primary', class: 'dark:text-rui-primary' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'secondary', class: 'dark:text-rui-secondary' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'error', class: 'dark:text-rui-error' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'warning', class: 'dark:text-rui-warning' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'info', class: 'dark:text-rui-info' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'success', class: 'dark:text-rui-success' },\n  ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type }));\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=\"22\"\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"],"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\ndefineSlots<{\n  title?: () => any;\n  default?: () => any;\n}>();\n\nconst alertStyles = tv({\n  slots: {\n    root: 'px-4 py-2.5 rounded flex space-x-4',\n    content: 'flex space-x-3 py-1 flex-grow',\n    icon: '',\n    texts: 'space-y-1 flex-grow',\n    action: '',\n    close: '',\n  },\n  variants: {\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-[-1px] bg-white dark:bg-black' },\n    },\n    type: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Default variant backgrounds\n    {\n      variant: 'default',\n      type: 'primary',\n      class: { root: 'bg-rui-primary bg-tint-[.9] color-mix-supported:bg-rui-primary-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-primary-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'secondary',\n      class: { root: 'bg-rui-secondary bg-tint-[.9] color-mix-supported:bg-rui-secondary-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-secondary-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'error',\n      class: { root: 'bg-rui-error bg-tint-[.9] color-mix-supported:bg-rui-error-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-error-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'warning',\n      class: { root: 'bg-rui-warning bg-tint-[.9] color-mix-supported:bg-rui-warning-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-warning-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'info',\n      class: { root: 'bg-rui-info bg-tint-[.9] color-mix-supported:bg-rui-info-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-info-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'success',\n      class: { root: 'bg-rui-success bg-tint-[.9] color-mix-supported:bg-rui-success-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-success-shade/[.9]' },\n    },\n\n    // Filled variant backgrounds\n    { variant: 'filled', type: 'primary', class: { root: 'bg-rui-primary' } },\n    { variant: 'filled', type: 'secondary', class: { root: 'bg-rui-secondary' } },\n    { variant: 'filled', type: 'error', class: { root: 'bg-rui-error' } },\n    { variant: 'filled', type: 'warning', class: { root: 'bg-rui-warning' } },\n    { variant: 'filled', type: 'info', class: { root: 'bg-rui-info' } },\n    { variant: 'filled', type: 'success', class: { root: 'bg-rui-success' } },\n\n    // Filled dark text override for warning/success/info\n    {\n      variant: 'filled',\n      type: ['warning', 'success', 'info'],\n      class: { root: 'dark:!text-rui-light-text' },\n    },\n\n    // Outlined variant borders\n    { variant: 'outlined', type: 'primary', class: { root: 'border-rui-primary' } },\n    { variant: 'outlined', type: 'secondary', class: { root: 'border-rui-secondary' } },\n    { variant: 'outlined', type: 'error', class: { root: 'border-rui-error' } },\n    { variant: 'outlined', type: 'warning', class: { root: 'border-rui-warning' } },\n    { variant: 'outlined', type: 'info', class: { root: 'border-rui-info' } },\n    { variant: 'outlined', type: 'success', class: { root: 'border-rui-success' } },\n\n  ],\n  compoundSlots: [\n    // Content text colors for default + outlined (shared across all content slots)\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'primary',\n      class: 'text-rui-primary text-shade-[.6] color-mix-supported:text-rui-primary-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-primary-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'secondary',\n      class: 'text-rui-secondary text-shade-[.6] color-mix-supported:text-rui-secondary-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-secondary-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'error',\n      class: 'text-rui-error text-shade-[.6] color-mix-supported:text-rui-error-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-error-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'warning',\n      class: 'text-rui-warning text-shade-[.6] color-mix-supported:text-rui-warning-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-warning-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'info',\n      class: 'text-rui-info text-shade-[.6] color-mix-supported:text-rui-info-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-info-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'success',\n      class: 'text-rui-success text-shade-[.6] color-mix-supported:text-rui-success-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-success-tint/[.6]',\n    },\n\n    // Icon-only dark mode base color\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'primary', class: 'dark:text-rui-primary' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'secondary', class: 'dark:text-rui-secondary' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'error', class: 'dark:text-rui-error' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'warning', class: 'dark:text-rui-warning' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'info', class: 'dark:text-rui-info' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'success', class: 'dark:text-rui-success' },\n  ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type }));\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=\"22\"\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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"}

package/dist/components/avatars/RuiAvatar.vue.d.ts

@@ -1,6 +1,6 @@
 import type { ContextColorsType } from '../../consts/colors.js';
 import type { RuiIcons } from '../../icons/index.js';
-import { type AvatarSize, type AvatarVariant } from '../../components/avatars/avatar-props.js';
+import { type AvatarSize, type AvatarVariant } from './avatar-props.js';
 export interface Props {
     src?: string | null;
     alt?: string;

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"],"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  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\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\nconst sizeToken = computed<AvatarSize | undefined>(() => {\n  const value = get(resolvedSize);\n  return typeof value === 'string' ? value : undefined;\n});\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 = computeInitials(text ?? undefined);\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-md' },\n      square: { root: 'rounded-none' },\n    },\n    color: {\n      default: { root: 'bg-rui-grey-200 text-rui-text dark:bg-rui-grey-800' },\n      primary: { root: 'bg-rui-primary text-white' },\n      secondary: { root: 'bg-rui-secondary text-white' },\n      error: { root: 'bg-rui-error text-white' },\n      warning: { root: 'bg-rui-warning text-white' },\n      info: { root: 'bg-rui-info text-white' },\n      success: { root: 'bg-rui-success text-white' },\n    },\n    size: {\n      'xs': { initials: 'text-[0.625rem]' },\n      'sm': { initials: 'text-[0.6875rem]' },\n      'md': { initials: 'text-sm' },\n      'lg': { initials: 'text-base' },\n      'xl': { initials: 'text-lg' },\n      '2xl': { initials: 'text-xl' },\n    },\n  },\n  compoundSlots: [\n    { slots: ['root'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\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(sizeToken),\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=\"displayMode === 'image' ? undefined : 'img'\"\n    :aria-label=\"ariaLabel\"\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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"}
+{"version":3,"file":"RuiAvatar.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\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\nconst sizeToken = computed<AvatarSize | undefined>(() => {\n  const value = get(resolvedSize);\n  return typeof value === 'string' ? value : undefined;\n});\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 = computeInitials(text ?? undefined);\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-md' },\n      square: { root: 'rounded-none' },\n    },\n    color: {\n      default: { root: 'bg-rui-grey-200 text-rui-text dark:bg-rui-grey-800' },\n      primary: { root: 'bg-rui-primary text-white' },\n      secondary: { root: 'bg-rui-secondary text-white' },\n      error: { root: 'bg-rui-error text-white' },\n      warning: { root: 'bg-rui-warning text-white' },\n      info: { root: 'bg-rui-info text-white' },\n      success: { root: 'bg-rui-success text-white' },\n    },\n    size: {\n      'xs': { initials: 'text-[0.625rem]' },\n      'sm': { initials: 'text-[0.6875rem]' },\n      'md': { initials: 'text-sm' },\n      'lg': { initials: 'text-base' },\n      'xl': { initials: 'text-lg' },\n      '2xl': { initials: 'text-xl' },\n    },\n  },\n  compoundSlots: [\n    { slots: ['root'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\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(sizeToken),\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=\"displayMode === 'image' ? undefined : 'img'\"\n    :aria-label=\"ariaLabel\"\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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatarGroup.js","names":[],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  AVATAR_GROUP_SPACING_PX,\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-white dark:ring-rui-grey-900 rounded-full',\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => {\n  if (typeof spacing === 'number')\n    return spacing;\n  return AVATAR_GROUP_SPACING_PX[spacing];\n});\n\nconst ringOffsetPx = computed<number>(() =>\n  // ring-2 is 2px. Keep items overlapping by the configured spacing\n  // (negative margin). spacing is already negative for tokens.\n  get(spacingPx),\n);\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles());\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span class=\"leading-none\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAvatarGroup.js","names":[],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  AVATAR_GROUP_SPACING_PX,\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-white dark:ring-rui-grey-900 rounded-full',\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => {\n  if (typeof spacing === 'number')\n    return spacing;\n  return AVATAR_GROUP_SPACING_PX[spacing];\n});\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles());\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span class=\"leading-none\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/avatars/RuiAvatarGroup.vue.d.ts

@@ -1,5 +1,5 @@
 import { type VNode } from 'vue';
-import { AvatarGroupSpacing, type AvatarSize, type AvatarVariant } from '../../components/avatars/avatar-props.js';
+import { AvatarGroupSpacing, type AvatarSize, type AvatarVariant } from './avatar-props.js';
 export interface Props {
     size?: AvatarSize | number;
     variant?: AvatarVariant;

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

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  AVATAR_GROUP_SPACING_PX,\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-white dark:ring-rui-grey-900 rounded-full',\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => {\n  if (typeof spacing === 'number')\n    return spacing;\n  return AVATAR_GROUP_SPACING_PX[spacing];\n});\n\nconst ringOffsetPx = computed<number>(() =>\n  // ring-2 is 2px. Keep items overlapping by the configured spacing\n  // (negative margin). spacing is already negative for tokens.\n  get(spacingPx),\n);\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles());\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span class=\"leading-none\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  AVATAR_GROUP_SPACING_PX,\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-white dark:ring-rui-grey-900 rounded-full',\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => {\n  if (typeof spacing === 'number')\n    return spacing;\n  return AVATAR_GROUP_SPACING_PX[spacing];\n});\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles());\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span class=\"leading-none\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/avatars/use-avatar-group.d.ts

@@ -1,3 +1,3 @@
 import type { ComputedRef } from 'vue';
-import { type AvatarGroupContext } from '../../components/avatars/avatar-props.js';
+import { type AvatarGroupContext } from './avatar-props.js';
 export declare function useAvatarGroup(): ComputedRef<AvatarGroupContext> | undefined;

package/dist/components/buttons/button/RuiButton.vue.d.ts

@@ -1,5 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
-import { type ButtonSize, ButtonVariant } from '../../../components/buttons/button/button-props.js';
+import { type ButtonSize, ButtonVariant } from './button-props.js';
 export interface Props<T = undefined> {
     disabled?: boolean;
     loading?: boolean;

package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonSize, ButtonVariant, FAB_DEFAULT_ELEVATION, getButtonSpinnerSize, NO_ELEVATION } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  elevation?: number | string | null;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  elevation = null,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst defaultElevation = computed<number>(() => variant === ButtonVariant.fab ? FAB_DEFAULT_ELEVATION : NO_ELEVATION);\nconst usedElevation = computed<number | string>(() => disabled ? NO_ELEVATION : elevation ?? get(defaultElevation));\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(size));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant,\n  color: color ?? 'grey',\n  size,\n  rounded,\n  icon,\n  active,\n  loading,\n  hideFocusIndicator,\n}));\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"[\n      ui.root({ class: cn($attrs.class) }),\n      `shadow-${usedElevation}`,\n    ]\"\n    :disabled=\"disabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-active=\"active || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"emit('update:model-value', btnValue)\"\n  >\n    <slot name=\"prepend\" />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,OAAO;EAIb,MAAM,QAAQ,SAAA;EAMd,MAAM,WAAW,eAA8B,QAAA,UAAU;EAEzD,MAAM,mBAAmB,eAAuB,QAAA,YAAY,cAAc,MAAA,IAAA,CAA0C;EACpH,MAAM,gBAAgB,eAAgC,QAAA,WAAA,IAA0B,QAAA,aAAa,IAAI,gBAAgB,CAAC;EAElH,MAAM,cAAc,eAAuB,qBAAqB,QAAA,IAAI,CAAC;EAErE,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAM,QAAA;GACN,OAAO,QAAA,SAAS;GAChB,MAAG,QAAA;GACH,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAK,QAAA;GACL,SAAM,QAAA;GACN,oBAAiB,QAAA;EACnB,CAAC,CAAC;;uBAIA,YAgCY,wBA/BL,QAAA,GAAG,GADV,WAgCY;IA9BT,OAAK,CAAU,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA,GAAA,UAAsB,MAAA,aAAA,GAAA;IAIrE,UAAU,QAAA,YAAY,QAAA;IACtB,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,eAAa,QAAA,UAAU,KAAA;;OACXA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,sBAAuB,MAAA,QAAA,CAAQ,GAAA,CAAA,GAAA;2BAEpB;KAAvB,WAAuB,KAAA,QAAA,SAAA;KAEf,MAAM,WAAA,UAAA,GADd,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;MAChB,WAAQ;SAER,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEV,WAAsB,KAAA,QAAA,QAAA;KAEd,QAAA,WAAA,UAAA,GADR,YAQE,qBAAA;;MANA,UAAA;MACA,gBAAA;MACC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAM,MAAA,WAAA"}
+{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonSize, ButtonVariant, FAB_DEFAULT_ELEVATION, getButtonSpinnerSize, NO_ELEVATION } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  elevation?: number | string | null;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  elevation = null,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst defaultElevation = computed<number>(() => variant === ButtonVariant.fab ? FAB_DEFAULT_ELEVATION : NO_ELEVATION);\nconst usedElevation = computed<number | string>(() => disabled ? NO_ELEVATION : elevation ?? get(defaultElevation));\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(size));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant,\n  color: color ?? 'grey',\n  size,\n  rounded,\n  icon,\n  active,\n  loading,\n  hideFocusIndicator,\n}));\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"[\n      ui.root({ class: cn($attrs.class) }),\n      `shadow-${usedElevation}`,\n    ]\"\n    :disabled=\"disabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-active=\"active || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"emit('update:model-value', btnValue)\"\n  >\n    <slot name=\"prepend\" />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,OAAO;EAIb,MAAM,QAAQ,SAAA;EAMd,MAAM,WAAW,eAA8B,QAAA,UAAU;EAEzD,MAAM,mBAAmB,eAAuB,QAAA,YAAY,cAAc,MAAA,IAAA,CAA0C;EACpH,MAAM,gBAAgB,eAAgC,QAAA,WAAA,IAA0B,QAAA,aAAa,IAAI,gBAAgB,CAAC;EAElH,MAAM,cAAc,eAAuB,qBAAqB,QAAA,IAAI,CAAC;EAErE,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAM,QAAA;GACN,OAAO,QAAA,SAAS;GAChB,MAAG,QAAA;GACH,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAK,QAAA;GACL,SAAM,QAAA;GACN,oBAAiB,QAAA;EACnB,CAAC,CAAC;;GAIA,OAAA,UAAA,GAAA,YAgCY,wBA/BL,QAAA,GAAG,GADV,WAgCY;IA9BT,OAAK,CAAU,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA,GAAsB,UAAA,MAAA,aAAA,GAAA;IAIrE,UAAU,QAAA,YAAY,QAAA;IACtB,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,eAAa,QAAA,UAAU,KAAA;GACXA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,sBAAuB,MAAA,QAAA,CAAQ,GAAA,CAAA,GAAA;IAE3C,SAAA,cAAuB;KAAvB,WAAuB,KAAA,QAAA,SAAA;KAEf,MAAM,WADd,UAAA,GAAA,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;MAChB,WAAQ;KAER,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEV,WAAsB,KAAA,QAAA,QAAA;KAEd,QAAA,WADR,UAAA,GAAA,YAQE,qBAAA;;MANA,UAAA;MACA,gBAAA;MACC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAM,MAAA,WAAA"}

package/dist/components/buttons/button/button-styles.d.ts

@@ -1,3 +1,41 @@
+/**
+ * The button's classes.
+ *
+ * Three decisions the class lists cannot state themselves:
+ *
+ * `position: relative` is not in the base root: it is only a positioning
+ * context for the loading spinner, so the `loading` variant applies it.
+ * Basing it here would collide with consumers pinning the button with
+ * `fixed`/`absolute`, since cascade order picks the later utility, usually
+ * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,
+ * which misplaces FABs.
+ *
+ * Icon sizing flows through the `--rui-icon-size` custom property, seeded at
+ * the md value in the base root and redefined per size variant with `!` so a
+ * variant beats the baseline on the same element regardless of source order.
+ * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the
+ * inherited value, so a consumer always wins. See rotki/ui-library#512.
+ *
+ * `disabled` on the element covers two states: actually disabled, and loading,
+ * since RuiButton sets `disabled = disabled || loading`. Only the cursor is
+ * shared between them; the grey disabled palette lives in the `loading: false`
+ * compounds, so a loading button keeps its variant color behind the spinner.
+ *
+ * An icon-only button matches the height of the text button of the same size,
+ * with a 60-70% glyph ratio, which is a larger glyph than the same size gives
+ * a prepend/append icon so it does not look lost in the square. xs pads by an
+ * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px
+ * glyph:
+ *
+ * ```
+ * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%
+ * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%
+ * md (default)  p-1.5         + 1.25rem  icon = 2rem    (32px)   63%
+ * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%
+ * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%
+ * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%
+ * ```
+ */
 export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
     variant: {
         default: {};
@@ -166,7 +204,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
     root: string;
     label: string;
     spinner: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: {};
         outlined: {};
@@ -250,4 +288,4 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
     root: string;
     label: string;
     spinner: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/buttons/button/button-styles.js

@@ -1,5 +1,43 @@
 import { tv } from "../../../utils/tv.js";
 //#region src/components/buttons/button/button-styles.ts
+/**
+* The button's classes.
+*
+* Three decisions the class lists cannot state themselves:
+*
+* `position: relative` is not in the base root: it is only a positioning
+* context for the loading spinner, so the `loading` variant applies it.
+* Basing it here would collide with consumers pinning the button with
+* `fixed`/`absolute`, since cascade order picks the later utility, usually
+* `relative`, and turns their `right-*`/`bottom-*` into relative offsets,
+* which misplaces FABs.
+*
+* Icon sizing flows through the `--rui-icon-size` custom property, seeded at
+* the md value in the base root and redefined per size variant with `!` so a
+* variant beats the baseline on the same element regardless of source order.
+* RuiIcon's own `size` prop stamps an inline style on the svg, which beats the
+* inherited value, so a consumer always wins. See rotki/ui-library#512.
+*
+* `disabled` on the element covers two states: actually disabled, and loading,
+* since RuiButton sets `disabled = disabled || loading`. Only the cursor is
+* shared between them; the grey disabled palette lives in the `loading: false`
+* compounds, so a loading button keeps its variant color behind the spinner.
+*
+* An icon-only button matches the height of the text button of the same size,
+* with a 60-70% glyph ratio, which is a larger glyph than the same size gives
+* a prepend/append icon so it does not look lost in the square. xs pads by an
+* arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px
+* glyph:
+*
+* ```
+* xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%
+* sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%
+* md (default)  p-1.5         + 1.25rem  icon = 2rem    (32px)   63%
+* lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%
+* xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%
+* 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%
+* ```
+*/
 var buttonStyles = tv({
 	slots: {
 		root: [

package/dist/components/buttons/button/button-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n      // `position: relative` is only needed as a positioning context for the\n      // absolute-positioned loading spinner; applied via the `loading` variant\n      // below. Putting it here would collide with consumers that need to pin\n      // the button with `fixed`/`absolute` (cascade order picks the later\n      // utility — usually `relative` — and the consumer's `right-*`/`bottom-*`\n      // end up as relative offsets, which misplaces FABs).\n      'flex items-center justify-center gap-x-2',\n      'px-4 py-1.5 rounded transition-all',\n      // Default (md) icon sizing is driven by a CSS custom property so that\n      // RuiIcon's `size` prop (stamped as inline `style=\"--rui-icon-size\"` on\n      // the svg) can override it cleanly. Size variants below redefine the\n      // property with `!` so they beat this baseline on the same element;\n      // inline style on the svg then beats the inherited value when a\n      // consumer supplies their own size. See rotki/ui-library#512.\n      '[--rui-icon-size:1.125rem]',\n      // `disabled` on the element covers two states: actually disabled and\n      // loading (RuiButton sets `disabled = disabled || loading`). The\n      // color/bg/text overrides for the \"grey disabled\" look live in the\n      // `loading: false` compounds below so they skip firing on loading\n      // buttons — where we want the variant color to stay visible behind\n      // the spinner. Cursor stays here since both states are non-clickable.\n      'disabled:cursor-not-allowed',\n      'focus-visible:!ring-2',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2' },\n      // `leading-[1.125rem]` on the label collapses the 20px line-box (inherited\n      // from the root's `leading-5`) down to 18px so it matches the md icon box\n      // (`--rui-icon-size: 1.125rem`). Without it, `flex items-center` centers\n      // the 20px line-box against the 18px icon box and the baseline-aligned\n      // glyphs visually drift above the icon's optical center — most readable\n      // in tight list rows. See rotki/ui-library#515.\n      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full leading-[1.125rem]' },\n    },\n    size: {\n      // Each size variant redefines `--rui-icon-size` on the button so the\n      // value inherits into RuiIcons in button slots (prepend/append/default)\n      // and drives their `width: var(--rui-icon-size, 1.5rem)` class. `!` on\n      // the arbitrary property makes the variant beat the md baseline in the\n      // base root regardless of CSS source order. A consumer passing `size`\n      // on RuiIcon still wins: that path stamps an inline style on the svg\n      // element itself, which beats the inherited value from the button.\n      'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:1rem]' },\n      'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      // `xl` targets the 40px input height — the common toolbar case where a\n      // RuiButton needs to line up with RuiTextField / RuiMenuSelect. For a\n      // 44px jumbo-CTA button (auth screens, empty-state primaries), reach for\n      // `2xl` instead.\n      'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n      '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n      primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n      secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n      error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n      warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n      info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n      success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      // Padding and icon sizing live in the `icon + size` compound variants\n      // below so every size resolves to a height matching its text-button\n      // counterpart; this base only contributes the round shape.\n      true: { root: 'rounded-full' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!ring-0' },\n    },\n  },\n  compoundVariants: [\n    // === Disabled (not loading) appearance ===\n    // Applied only when `loading: false` so that loading buttons keep their\n    // variant color/outline visible behind the spinner; pure disabled buttons\n    // fade to the Material disabled palette.\n    { loading: false, class: { root: 'disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:outline-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-grey-50' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n    // Material draws the colourless outlined button at 23% of the text colour, not at\n    // full strength: an outline as dark as the label reads as an error state and shouts\n    // next to the context colours, which are already at 50% (see below). The rest of the\n    // library uses the same restraint for neutral edges (cards and tables sit at 12%).\n    { color: 'grey', variant: 'outlined', class: { root: 'outline-black/[0.23] dark:outline-white/[0.23]' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // === Context colors — outlined/text variants ===\n    // `dark:text-rui-<color>` is required to beat `dark:text-rui-text` set by\n    // the base color variant (meant for filled buttons where text sits on a\n    // colored bg). Without the override, outlined/text/list buttons in dark\n    // mode render white text against a themed outline/underline.\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // === Context colors — active outlined/text ===\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n    // === Context colors — outlined border ===\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n    { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n    // Icon-only button sizing — every size lands at the same height as the\n    // text button of the matching size, with a ~60–70% icon ratio (Material-3\n    // style). The `size` rule sizes icons to 12/16/20/22px for text-button\n    // prepend/append slots; here icon-only buttons get a larger glyph so they\n    // don't look lost in the square. Values are rem-based throughout: p-1 =\n    // 0.25rem, p-1.5 = 0.375rem, p-2 = 0.5rem; glyph sizes use rem literals.\n    // xs uses an arbitrary 0.1875rem (3px) padding — no Tailwind token hits\n    // it cleanly — to keep the 70% icon ratio with a 14px glyph.\n    //\n    // xs:           p-[0.1875rem] + 0.875rem icon = 0.375 + 0.875 = 1.25rem (20px) — 70%\n    // sm:           p-1           + 1.25rem icon  = 0.5   + 1.25  = 1.75rem (28px) — 71%\n    // md (default): p-1.5         + 1.25rem icon  = 0.75  + 1.25  = 2rem    (32px) — 63%\n    // lg:           p-1.5         + 1.5rem  icon  = 0.75  + 1.5   = 2.25rem (36px) — 67%\n    // xl:           p-2           + 1.5rem  icon  = 1     + 1.5   = 2.5rem  (40px) — 60%\n    // 2xl:          p-2           + 1.75rem icon  = 1     + 1.75  = 2.75rem (44px) — 64%\n    { icon: true, class: { root: 'p-1.5 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // Dark mode default variant text override for warning/success/info\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n    // Dark mode active outlined/text override for primary/secondary\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%\n * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%\n * md (default)  p-1.5         + 1.25rem  icon = 2rem    (32px)   63%\n * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%\n * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%\n * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%\n * ```\n */\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n      'flex items-center justify-center gap-x-2',\n      'px-4 py-1.5 rounded transition-all',\n      '[--rui-icon-size:1.125rem]',\n      'disabled:cursor-not-allowed',\n      'focus-visible:!ring-2',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2' },\n      // The label's 18px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full leading-[1.125rem]' },\n    },\n    size: {\n      'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:1rem]' },\n      'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n      'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n      '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n      primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n      secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n      error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n      warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n      info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n      success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      // Only the round shape; the `icon + size` compounds below carry padding and icon sizing\n      true: { root: 'rounded-full' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!ring-0' },\n    },\n  },\n  compoundVariants: [\n    // Disabled appearance: the Material disabled palette, skipped while loading so the variant color shows behind the spinner\n    { loading: false, class: { root: 'disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:outline-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-grey-50' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n    // Material's 23% outline: at full strength a neutral edge reads as an error state next to the 50% context colours\n    { color: 'grey', variant: 'outlined', class: { root: 'outline-black/[0.23] dark:outline-white/[0.23]' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // Context colors: `dark:text-rui-<color>` beats the base variant's `dark:text-rui-text`, which is meant for filled buttons\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // === Context colors — active outlined/text ===\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n    // === Context colors — outlined border ===\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n    { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n    // Icon-only sizing, per the padding and glyph table on buttonStyles above\n    { icon: true, class: { root: 'p-1.5 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // Dark mode default variant text override for warning/success/info\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n    // Dark mode active outlined/text override for primary/secondary\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}

package/dist/components/buttons/button-group/RuiButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButtonGroup.js","names":[],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  variant?: 'default' | 'outlined' | 'text';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n    button: 'border-0 outline-0 focus:z-[1]',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start divide-x-0 divide-y',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: '!rounded-none',\n      },\n      sm: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n        button: 'outline-1',\n      },\n      md: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n        button: 'outline-1',\n      },\n      lg: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n        button: 'outline-1',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        // Matches RuiButton's colourless outlined treatment: a neutral edge at Material's\n        // 23%, rather than an outline and dividers as dark as the labels themselves.\n        root: 'outline-black/[0.23] divide-black/[0.23] dark:outline-white/[0.23] dark:divide-white/[0.23]',\n      },\n      text: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n    { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n    { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n    // Color dividers (default variant)\n    { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n    { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n    { color: 'error', class: { root: 'divide-rui-error-darker' } },\n    { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n    { color: 'info', class: { root: 'divide-rui-info-darker' } },\n    { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n  ],\n  defaultVariants: {\n    vertical: false,\n    gap: 'none',\n    variant: 'default',\n  },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\nconst children = computed<VNode[]>(() => {\n  const selectedValue: T | T[] | undefined = get(modelValue);\n  const slotContent = slots.default?.() ?? [];\n  const resolved = flattenSlotContent(slotContent);\n\n  return resolved.map((child, i) => {\n    // child props are in kebab-case\n    const value = child.props?.['model-value'];\n    const active = isActive(value ?? i, selectedValue);\n    const resolvedColor = active && activeColor ? activeColor : color;\n\n    // Only fall back to the group's size when the child did not set one itself.\n    // This lets consumers override size per-button while still benefiting from\n    // the group-level default.\n    const childSize = child.props?.size;\n\n    child.props = {\n      ...child.props,\n      active,\n      ...(disabled && { disabled: true }),\n      ...(resolvedColor && { color: resolvedColor }),\n      ...(!childSize && size && { size }),\n    };\n\n    return child;\n  });\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n      return flattenSlotContent(node.children.filter(isVNode));\n\n    return [node];\n  });\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      :class=\"ui.button()\"\n      :variant=\"variant\"\n      @update:model-value=\"onClick($event ?? i)\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiButtonGroup.js","names":[],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  variant?: 'default' | 'outlined' | 'text';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n    button: 'border-0 outline-0 focus:z-[1]',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start divide-x-0 divide-y',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: '!rounded-none',\n      },\n      sm: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n        button: 'outline-1',\n      },\n      md: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n        button: 'outline-1',\n      },\n      lg: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n        button: 'outline-1',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        // Material's 23% neutral edge, matching RuiButton's colourless outlined treatment\n        root: 'outline-black/[0.23] divide-black/[0.23] dark:outline-white/[0.23] dark:divide-white/[0.23]',\n      },\n      text: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n    { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n    { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n    // Color dividers (default variant)\n    { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n    { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n    { color: 'error', class: { root: 'divide-rui-error-darker' } },\n    { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n    { color: 'info', class: { root: 'divide-rui-info-darker' } },\n    { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n  ],\n  defaultVariants: {\n    vertical: false,\n    gap: 'none',\n    variant: 'default',\n  },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\n/**\n * Applies the group's state to one of its buttons: which button is active,\n * the group's disabled flag and colour, and the group's size, that last one\n * only when the button did not set a size of its own, so a consumer can still\n * size a single button.\n *\n * @param child - the button's vnode, whose props are keyed in kebab-case\n * @param index - its place in the group, which stands in for a missing value\n * @param selectedValue - what the group's model currently holds\n * @returns the same vnode, with the group's props written onto it\n */\nfunction applyGroupProps(child: VNode, index: number, selectedValue: T | T[] | undefined): VNode {\n  const value = child.props?.['model-value'];\n  const active = isActive(value ?? index, selectedValue);\n  const resolvedColor = active && activeColor ? activeColor : color;\n  const childSize = child.props?.size;\n\n  child.props = {\n    ...child.props,\n    active,\n    ...(disabled && { disabled: true }),\n    ...(resolvedColor && { color: resolvedColor }),\n    ...(!childSize && size && { size }),\n  };\n\n  return child;\n}\n\nconst children = computed<VNode[]>(() => {\n  const selectedValue: T | T[] | undefined = get(modelValue);\n  const slotContent = slots.default?.() ?? [];\n\n  return flattenSlotContent(slotContent)\n    .map((child, index) => applyGroupProps(child, index, selectedValue));\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n      return flattenSlotContent(node.children.filter(isVNode));\n\n    return [node];\n  });\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      :class=\"ui.button()\"\n      :variant=\"variant\"\n      @update:model-value=\"onClick($event ?? i)\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/buttons/button-group/RuiButtonGroup.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonSize } from '../../../components/buttons/button/button-props.js';
+import type { ButtonSize } from '../button/button-props.js';
 import type { ContextColorsType } from '../../../consts/colors.js';
 export interface Props {
     vertical?: boolean;