@rotki/ui-library 2.12.1 → 2.13.0

package/dist/components/accordions/accordion/RuiAccordion.vue.d.ts

@@ -5,25 +5,17 @@ export interface AccordionProps {
     headerClass?: string;
     contentClass?: string;
 }
-declare var __VLS_1: {
-    open: boolean;
-}, __VLS_8: {};
-type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_8) => any;
+type __VLS_Slots = {
+    header?: (props: {
+        open: boolean;
+    }) => any;
+    default?: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<AccordionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;
 }, string, import("vue").PublicProps, Readonly<AccordionProps> & Readonly<{
     onClick?: (() => any) | undefined;
-}>, {
-    open: boolean;
-    eager: boolean;
-    headerGrow: boolean;
-    headerClass: string;
-    contentClass: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { defineComponent, useId, ref, computed, createElementBlock, openBlock, mergeProps, createCommentVNode, unref, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle } from "vue";
+import { defineComponent, useTemplateRef, useId, computed, openBlock, createElementBlock, mergeProps, unref, normalizeClass, createElementVNode, renderSlot, createVNode, createCommentVNode, normalizeStyle } from "vue";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
 import { useElementSize } from "@vueuse/core";
 import { get } from "@vueuse/shared";
@@ -20,13 +20,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
+    const inner = useTemplateRef("inner");
     const triggerId = useId();
     const contentId = useId();
-    const inner = ref();
     const { height: innerHeight } = useElementSize(inner);
-    const contentHeight = computed(() => props.open ? `${get(innerHeight)}px` : "0px");
+    const contentHeight = computed(() => __props.open ? `${get(innerHeight)}px` : "0px");
     function toggle() {
       emit("click");
     }

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

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.vue.js","sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport Icon from '@/components/icons/RuiIcon.vue';\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  headerClass?: string;\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<AccordionProps>(), {\n  open: false,\n  eager: false,\n  headerGrow: false,\n  headerClass: '',\n  contentClass: '',\n});\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\nconst triggerId = useId();\nconst contentId = useId();\n\nconst inner = ref<HTMLDivElement>();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (props.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</script>\n\n<template>\n  <div\n    class=\"flex flex-col items-start\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"$attrs\"\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=\"[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\n        :class=\"{ grow: headerGrow }\"\n      >\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=\"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"],"names":["_openBlock","_createElementBlock","_mergeProps","$attrs","$slots","_unref","_normalizeClass","_createElementVNode","_renderSlot","_createVNode","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBA,UAAM,QAAQ;AAQd,UAAM,OAAO;AAIb,UAAM,YAAY,MAAA;AAClB,UAAM,YAAY,MAAA;AAElB,UAAM,QAAQ,IAAA;AACd,UAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;AAEpD,UAAM,gBAAgB,SAAiB,MAAO,MAAM,OAAO,GAAG,IAAI,WAAW,CAAC,OAAO,KAAM;AAE3F,aAAS,SAAe;AACtB,WAAK,OAAO;AAAA,IACd;AAEA,aAAS,UAAU,OAA4B;AAC7C,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,cAAM,eAAA;AACN,eAAA;AAAA,MACF;AAAA,IACF;;AAIE,aAAAA,UAAA,GAAAC,mBA+CM,OA/CNC,WA+CM;AAAA,QA9CJ,OAAM;AAAA,QACL,cAAY,QAAA,OAAI,SAAA;AAAA,QACjB,kBAAA;AAAA,MAAA,GACQC,KAAAA,MAAM,GAAA;AAAA,QAGNC,KAAAA,OAAO,uBADfH,mBA0BM,OAAA;AAAA;UAxBH,IAAII,MAAA,SAAA;AAAA,UACL,OAAKC,eAAA,CAAC,+FAA6F,CAC1F,QAAA,yBAAyB,QAAA,WAAA,CAAU,CAAA,CAAA;AAAA,UAC5C,MAAK;AAAA,UACL,UAAS;AAAA,UACR,iBAAe,QAAA;AAAA,UACf,iBAAeD,MAAA,SAAA;AAAA,UAChB,0BAAA;AAAA,UACC,+CAAO;UACP,WAAO,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,UAAU,MAAM;AAAA,QAAA;UAE1BE,mBAOM,OAAA;AAAA,YANH,8BAAe,QAAA,YAAU;AAAA,UAAA;YAE1BC,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,MAAI;AAAA,UAAA;UAGfC,YAIEC,SAAA;AAAA,YAHA,OAAKJ,eAAA,CAAC,gDAA8C,EAAA,eAC3B,QAAA,KAAA,CAAI,CAAA;AAAA,YAC7B,MAAK;AAAA,UAAA;;QAID,QAAA,QAAQ,QAAA,sBADhBL,mBAaM,OAAA;AAAA;UAXH,IAAII,MAAA,SAAA;AAAA,UACL,OAAKC,eAAA,CAAC,8CACE,QAAA,YAAY,CAAA;AAAA,UACnB,gCAAiBD,MAAA,aAAA,GAAa;AAAA,UAC/B,MAAK;AAAA,UACJ,mBAAiBA,MAAA,SAAA;AAAA,UAClB,0BAAA;AAAA,QAAA;UAEAE,mBAEM,OAAA;AAAA,qBAFG;AAAA,YAAJ,KAAI;AAAA,UAAA;YACPC,WAAuB,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"RuiAccordion.vue.js","sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport Icon from '@/components/icons/RuiIcon.vue';\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  headerClass?: string;\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  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</script>\n\n<template>\n  <div\n    class=\"flex flex-col items-start\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"$attrs\"\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=\"[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=\"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"],"names":["_openBlock","_createElementBlock","_mergeProps","$attrs","$slots","_unref","_normalizeClass","_createElementVNode","_renderSlot","_createVNode","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,UAAM,OAAO;AASb,UAAM,QAAQ,eAA+B,OAAO;AAEpD,UAAM,YAAY,MAAA;AAClB,UAAM,YAAY,MAAA;AAClB,UAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;AAEpD,UAAM,gBAAgB,SAAiB,MAAO,QAAA,OAAO,GAAG,IAAI,WAAW,CAAC,OAAO,KAAM;AAErF,aAAS,SAAe;AACtB,WAAK,OAAO;AAAA,IACd;AAEA,aAAS,UAAU,OAA4B;AAC7C,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,cAAM,eAAA;AACN,eAAA;AAAA,MACF;AAAA,IACF;;AAIE,aAAAA,UAAA,GAAAC,mBA6CM,OA7CNC,WA6CM;AAAA,QA5CJ,OAAM;AAAA,QACL,cAAY,QAAA,OAAI,SAAA;AAAA,QACjB,kBAAA;AAAA,MAAA,GACQC,KAAAA,MAAM,GAAA;AAAA,QAGNC,KAAAA,OAAO,uBADfH,mBAwBM,OAAA;AAAA;UAtBH,IAAII,MAAA,SAAA;AAAA,UACL,OAAKC,eAAA,CAAC,+FAA6F,CAC1F,QAAA,yBAAyB,QAAA,WAAA,CAAU,CAAA,CAAA;AAAA,UAC5C,MAAK;AAAA,UACL,UAAS;AAAA,UACR,iBAAe,QAAA;AAAA,UACf,iBAAeD,MAAA,SAAA;AAAA,UAChB,0BAAA;AAAA,UACC,+CAAO;UACP,WAAO,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,UAAU,MAAM;AAAA,QAAA;UAE1BE,mBAKM,OAAA;AAAA,YALA,8BAAe,QAAA,YAAU;AAAA,UAAA;YAC7BC,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,MAAI;AAAA,UAAA;UAGfC,YAIEC,SAAA;AAAA,YAHA,OAAKJ,eAAA,CAAC,gDAA8C,EAAA,eAC3B,QAAA,KAAA,CAAI,CAAA;AAAA,YAC7B,MAAK;AAAA,UAAA;;QAID,QAAA,QAAQ,QAAA,sBADhBL,mBAaM,OAAA;AAAA;UAXH,IAAII,MAAA,SAAA;AAAA,UACL,OAAKC,eAAA,CAAC,8CACE,QAAA,YAAY,CAAA;AAAA,UACnB,gCAAiBD,MAAA,aAAA,GAAa;AAAA,UAC/B,MAAK;AAAA,UACJ,mBAAiBA,MAAA,SAAA;AAAA,UAClB,0BAAA;AAAA,QAAA;UAEAE,mBAEM,OAAA;AAAA,qBAFG;AAAA,YAAJ,KAAI;AAAA,UAAA;YACPC,WAAuB,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;"}

package/dist/components/accordions/accordions/RuiAccordions.vue.d.ts

@@ -1,14 +1,15 @@
 export interface Props {
-    modelValue?: number[] | number;
     multiple?: boolean;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (modelValue: number | number[]) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:model-value"?: ((modelValue: number | number[]) => any) | undefined;
-}>, {
-    modelValue: number[] | number;
-    multiple: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: number[] | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | number[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | number[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/accordions/accordions/RuiAccordions.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, useSlots, computed, watch, createElementBlock, openBlock, normalizeProps, guardReactiveProps, Fragment, renderList, unref, createBlock, resolveDynamicComponent } from "vue";
+import { defineComponent, useModel, ref, useSlots, computed, watch, openBlock, createElementBlock, normalizeProps, guardReactiveProps, Fragment, renderList, unref, createBlock, resolveDynamicComponent, mergeModels } from "vue";
 import { get, set } from "@vueuse/shared";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -6,23 +6,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     inheritAttrs: false
   },
   __name: "RuiAccordions",
-  props: {
-    modelValue: { default: -1 },
+  props: /* @__PURE__ */ mergeModels({
     multiple: { type: Boolean, default: false }
-  },
-  emits: ["update:model-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { modelValue, multiple } = toRefs(props);
+  }, {
+    "modelValue": { default: -1 },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
     const internalValue = ref();
     const slots = useSlots();
     const children = computed(() => {
       const accordions = slots.default?.() ?? [];
       const currentValue = get(internalValue);
-      const multipleVal = get(multiple);
       return accordions.map((accordion, index) => {
-        const open = multipleVal && Array.isArray(currentValue) ? currentValue.includes(index) : currentValue === index;
+        const open = __props.multiple && Array.isArray(currentValue) ? currentValue.includes(index) : currentValue === index;
         return {
           ...accordion,
           props: {
@@ -35,31 +34,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function updateValue(newModelValue) {
       let newValue;
       const internal = get(internalValue);
-      if (get(multiple) && Array.isArray(internal)) {
-        const temp = [...get(internal)];
+      if (__props.multiple && Array.isArray(internal)) {
+        const temp = [...internal];
         const index = temp.indexOf(newModelValue);
         if (index === -1)
           temp.push(newModelValue);
-        else
-          temp.splice(index, 1);
+        else temp.splice(index, 1);
         newValue = temp;
       } else {
         if (internal === newModelValue)
           newValue = -1;
-        else
-          newValue = newModelValue;
+        else newValue = newModelValue;
       }
-      emit("update:model-value", newValue);
+      set(modelValue, newValue);
       set(internalValue, newValue);
     }
-    watch([modelValue, multiple], ([value, multiple2]) => {
-      let internal = value;
-      if (multiple2 && !Array.isArray(internal))
-        internal = internal === -1 ? [] : [internal];
-      else if (!multiple2 && Array.isArray(internal))
-        internal = internal[0] ?? -1;
-      set(internalValue, internal);
-    }, { immediate: true });
+    watch(
+      [modelValue, () => __props.multiple],
+      ([value, isMultiple]) => {
+        let internal = value;
+        if (isMultiple && !Array.isArray(internal))
+          internal = internal === -1 ? [] : [internal];
+        else if (!isMultiple && Array.isArray(internal))
+          internal = internal[0] ?? -1;
+        set(internalValue, internal);
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(_ctx.$attrs)), [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(children), (child, i) => {

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

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordions.vue.js","sources":["../../../../src/components/accordions/accordions/RuiAccordions.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  modelValue?: number[] | number;\n  multiple?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAccordions',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: -1,\n  multiple: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', modelValue: number | number[]): void;\n}>();\n\nconst { modelValue, multiple } = toRefs(props);\n\nconst internalValue = ref();\n\nconst slots = useSlots();\nconst children = computed(() => {\n  const accordions = slots.default?.() ?? [];\n  const currentValue = get(internalValue);\n  const multipleVal = get(multiple);\n\n  return accordions.map((accordion, index) => {\n    const open = multipleVal && Array.isArray(currentValue) ? currentValue.includes(index) : currentValue === index;\n\n    return {\n      ...accordion,\n      props: {\n        open,\n        ...accordion.props,\n      },\n    };\n  });\n});\n\nfunction updateValue(newModelValue: number) {\n  let newValue: number[] | number;\n  const internal = get(internalValue);\n  if (get(multiple) && Array.isArray(internal)) {\n    const temp = [...get(internal)];\n    const index = temp.indexOf(newModelValue);\n    if (index === -1)\n      temp.push(newModelValue);\n    else\n      temp.splice(index, 1);\n    newValue = temp;\n  }\n  else {\n    if (internal === newModelValue)\n      newValue = -1;\n    else\n      newValue = newModelValue;\n  }\n  emit('update:model-value', newValue);\n  set(internalValue, newValue);\n}\n\nwatch([modelValue, multiple], ([value, multiple]) => {\n  let internal: number | number[] = value;\n  if (multiple && !Array.isArray(internal))\n    internal = internal === -1 ? [] : [internal];\n  else if (!multiple && Array.isArray(internal))\n    internal = internal[0] ?? -1;\n\n  set(internalValue, internal);\n}, { immediate: true });\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"],"names":["multiple","_openBlock","_createElementBlock","$attrs","_Fragment","_renderList","_unref","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;;;;;;;;;;AAWA,UAAM,QAAQ;AAKd,UAAM,OAAO;AAIb,UAAM,EAAE,YAAY,aAAa,OAAO,KAAK;AAE7C,UAAM,gBAAgB,IAAA;AAEtB,UAAM,QAAQ,SAAA;AACd,UAAM,WAAW,SAAS,MAAM;AAC9B,YAAM,aAAa,MAAM,UAAA,KAAe,CAAA;AACxC,YAAM,eAAe,IAAI,aAAa;AACtC,YAAM,cAAc,IAAI,QAAQ;AAEhC,aAAO,WAAW,IAAI,CAAC,WAAW,UAAU;AAC1C,cAAM,OAAO,eAAe,MAAM,QAAQ,YAAY,IAAI,aAAa,SAAS,KAAK,IAAI,iBAAiB;AAE1G,eAAO;AAAA,UACL,GAAG;AAAA,UACH,OAAO;AAAA,YACL;AAAA,YACA,GAAG,UAAU;AAAA,UAAA;AAAA,QACf;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAED,aAAS,YAAY,eAAuB;AAC1C,UAAI;AACJ,YAAM,WAAW,IAAI,aAAa;AAClC,UAAI,IAAI,QAAQ,KAAK,MAAM,QAAQ,QAAQ,GAAG;AAC5C,cAAM,OAAO,CAAC,GAAG,IAAI,QAAQ,CAAC;AAC9B,cAAM,QAAQ,KAAK,QAAQ,aAAa;AACxC,YAAI,UAAU;AACZ,eAAK,KAAK,aAAa;AAAA;AAEvB,eAAK,OAAO,OAAO,CAAC;AACtB,mBAAW;AAAA,MACb,OACK;AACH,YAAI,aAAa;AACf,qBAAW;AAAA;AAEX,qBAAW;AAAA,MACf;AACA,WAAK,sBAAsB,QAAQ;AACnC,UAAI,eAAe,QAAQ;AAAA,IAC7B;AAEA,UAAM,CAAC,YAAY,QAAQ,GAAG,CAAC,CAAC,OAAOA,SAAQ,MAAM;AACnD,UAAI,WAA8B;AAClC,UAAIA,aAAY,CAAC,MAAM,QAAQ,QAAQ;AACrC,mBAAW,aAAa,KAAK,CAAA,IAAK,CAAC,QAAQ;AAAA,eACpC,CAACA,aAAY,MAAM,QAAQ,QAAQ;AAC1C,mBAAW,SAAS,CAAC,KAAK;AAE5B,UAAI,eAAe,QAAQ;AAAA,IAC7B,GAAG,EAAE,WAAW,MAAM;;AAIpB,aAAAC,UAAA,GAAAC,mBAOM,yCAPOC,KAAAA,MAAM,CAAA,GAAA;AAAA,SACjBF,UAAA,IAAA,GAAAC,mBAKEE,UAAA,MAAAC,WAHqBC,MAAA,QAAA,GAAQ,CAArB,OAAO,MAAC;AAFlB,iBAAAL,UAAA,GAAAM,YAKEC,wBAJK,KAAK,GAAA;AAAA,YAET,KAAK;AAAA,YACL,SAAK,CAAA,WAAE,YAAY,CAAC;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"RuiAccordions.vue.js","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"],"names":["_useModel","_openBlock","_createElementBlock","$attrs","_Fragment","_renderList","_unref","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;;;;;;;;;;;;AAUA,UAAM,aAAaA,8BAA8C;AAIjE,UAAM,gBAAgB,IAAA;AAEtB,UAAM,QAAQ,SAAA;AACd,UAAM,WAAW,SAAkB,MAAM;AACvC,YAAM,aAAa,MAAM,UAAA,KAAe,CAAA;AACxC,YAAM,eAAe,IAAI,aAAa;AAEtC,aAAO,WAAW,IAAI,CAAC,WAAW,UAAU;AAC1C,cAAM,OACJ,QAAA,YAAY,MAAM,QAAQ,YAAY,IAClC,aAAa,SAAS,KAAK,IAC3B,iBAAiB;AAEvB,eAAO;AAAA,UACL,GAAG;AAAA,UACH,OAAO;AAAA,YACL;AAAA,YACA,GAAG,UAAU;AAAA,UAAA;AAAA,QACf;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAED,aAAS,YAAY,eAA6B;AAChD,UAAI;AACJ,YAAM,WAAW,IAAI,aAAa;AAClC,UAAI,QAAA,YAAY,MAAM,QAAQ,QAAQ,GAAG;AACvC,cAAM,OAAO,CAAC,GAAG,QAAQ;AACzB,cAAM,QAAQ,KAAK,QAAQ,aAAa;AACxC,YAAI,UAAU;AACZ,eAAK,KAAK,aAAa;AAAA,YACpB,MAAK,OAAO,OAAO,CAAC;AACzB,mBAAW;AAAA,MACb,OACK;AACH,YAAI,aAAa;AACf,qBAAW;AAAA,YACR,YAAW;AAAA,MAClB;AACA,UAAI,YAAY,QAAQ;AACxB,UAAI,eAAe,QAAQ;AAAA,IAC7B;AAEA;AAAA,MACE,CAAC,YAAY,MAAM,QAAA,QAAQ;AAAA,MAC3B,CAAC,CAAC,OAAO,UAAU,MAAM;AACvB,YAAI,WAA8B;AAClC,YAAI,cAAc,CAAC,MAAM,QAAQ,QAAQ;AACvC,qBAAW,aAAa,KAAK,CAAA,IAAK,CAAC,QAAQ;AAAA,iBACpC,CAAC,cAAc,MAAM,QAAQ,QAAQ;AAC5C,qBAAW,SAAS,CAAC,KAAK;AAE5B,YAAI,eAAe,QAAQ;AAAA,MAC7B;AAAA,MACA,EAAE,WAAW,KAAA;AAAA,IAAK;;AAKlB,aAAAC,UAAA,GAAAC,mBAOM,yCAPOC,KAAAA,MAAM,CAAA,GAAA;AAAA,SACjBF,UAAA,IAAA,GAAAC,mBAKEE,UAAA,MAAAC,WAHqBC,MAAA,QAAA,GAAQ,CAArB,OAAO,MAAC;AAFlB,iBAAAL,UAAA,GAAAM,YAKEC,wBAJK,KAAK,GAAA;AAAA,YAET,KAAK;AAAA,YACL,SAAK,CAAA,WAAE,YAAY,CAAC;AAAA,UAAA;;;;;;"}

package/dist/components/alerts/RuiAlert.vue.d.ts

@@ -9,27 +9,17 @@ export interface Props {
     actionText?: string;
     closeable?: boolean;
 }
-declare var __VLS_6: {}, __VLS_8: {};
-type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_6) => any;
-} & {
-    default?: (props: typeof __VLS_8) => any;
+type __VLS_Slots = {
+    title?: () => any;
+    default?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    close: () => any;
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     action: () => any;
+    close: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onClose?: (() => any) | undefined;
     onAction?: (() => any) | undefined;
-}>, {
-    title: string;
-    variant: "default" | "filled" | "outlined";
-    type: ContextColorsType;
-    icon: RuiIcons;
-    description: string;
-    actionText: string;
-    closeable: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,7 +1,6 @@
-import { defineComponent, toRefs, computed, createElementBlock, openBlock, mergeProps, unref, createElementVNode, createCommentVNode, normalizeClass, createVNode, renderSlot, createTextVNode, toDisplayString, withCtx } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, createElementVNode, unref, normalizeClass, createVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, withCtx } from "vue";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
 import RuiIcon from "../icons/RuiIcon.vue.js";
-import { get } from "@vueuse/shared";
 const _hoisted_1 = { class: "flex space-x-3 py-1 flex-grow" };
 const _hoisted_2 = {
   key: 1,
@@ -19,20 +18,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     title: { default: "" },
     description: { default: "" },
     type: { default: "primary" },
-    icon: { default: void 0 },
+    icon: { default: () => void 0 },
     variant: { default: "default" },
     actionText: { default: "" },
     closeable: { type: Boolean, default: false }
   },
   emits: ["action", "close"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
-    const { icon, type } = toRefs(props);
     const usedIcon = computed(() => {
-      const iconVal = get(icon);
-      if (iconVal)
-        return iconVal;
+      if (__props.icon)
+        return __props.icon;
       const iconMap = {
         primary: void 0,
         secondary: void 0,
@@ -41,15 +37,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         error: "lu-circle-alert",
         success: "lu-circle-check"
       };
-      return iconMap[get(type)];
+      return iconMap[__props.type];
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
-        class: [
-          _ctx.$style.alert,
-          _ctx.$style[unref(type)],
-          _ctx.$style[__props.variant]
-        ]
+        class: [_ctx.$style.alert, _ctx.$style[__props.type], _ctx.$style[__props.variant]]
       }, _ctx.$attrs), [
         createElementVNode("div", _hoisted_1, [
           unref(usedIcon) ? (openBlock(), createElementBlock("div", {
@@ -85,7 +77,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(RuiButton, {
             variant: "text",
             size: "sm",
-            color: __props.variant === "filled" ? void 0 : unref(type),
+            color: __props.variant === "filled" ? void 0 : __props.type,
             class: normalizeClass(_ctx.$style.action),
             onClick: _cache[0] || (_cache[0] = ($event) => emit("action"))
           }, {
@@ -97,7 +89,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ])) : createCommentVNode("", true),
         __props.closeable ? (openBlock(), createElementBlock("div", _hoisted_4, [
           createVNode(RuiButton, {
-            color: __props.variant === "filled" ? void 0 : unref(type),
+            color: __props.variant === "filled" ? void 0 : __props.type,
             size: "sm",
             icon: "",
             variant: "text",

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

@@ -1 +1 @@
-{"version":3,"file":"RuiAlert.vue2.js","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';\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 props = withDefaults(defineProps<Props>(), {\n  title: '',\n  description: '',\n  type: 'primary',\n  icon: undefined,\n  variant: 'default',\n  actionText: '',\n  closeable: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'action'): void;\n  (e: 'close'): void;\n}>();\n\nconst { icon, type } = toRefs(props);\n\nconst usedIcon = computed<RuiIcons | undefined>(() => {\n  const iconVal = get(icon);\n  if (iconVal)\n    return iconVal;\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[get(type)];\n});\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $style.alert,\n      $style[type],\n      $style[variant],\n    ]\"\n    v-bind=\"$attrs\"\n  >\n    <div class=\"flex space-x-3 py-1 flex-grow\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"$style.icon\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"22\"\n        />\n      </div>\n      <div\n        class=\"space-y-1 flex-grow\"\n        :class=\"$style.texts\"\n      >\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=\"$style.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=\"$style.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\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n@use 'sass:list';\n\n:global(.dark) {\n  .alert {\n    @each $color in c.$context-colors {\n      &.#{$color} {\n        &.default {\n          @apply color-mix-supported:bg-rui-#{$color}-shade/[.9] bg-shade-[.9];\n        }\n\n        &.default,\n        &.outlined {\n          .icon,\n          .texts,\n          .action,\n          .close {\n            @apply color-mix-supported:text-rui-#{$color}-tint/[.6] text-tint-[.6];\n          }\n\n          .icon {\n            @apply text-rui-#{$color};\n          }\n        }\n      }\n\n      @if list.index((warning, success, info), $color) {\n        &.#{$color} {\n          &.filled {\n            .icon,\n            .texts,\n            .action,\n            .close {\n              @apply text-rui-light-text #{!important};\n            }\n          }\n        }\n      }\n    }\n\n    &.outlined {\n      @apply bg-black;\n    }\n  }\n}\n\n.alert {\n  @apply px-4 py-2.5 rounded flex space-x-4;\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      &.default {\n        @apply color-mix-supported:bg-rui-#{$color}-tint/[.9];\n        @apply bg-rui-#{$color} bg-tint-[.9];\n      }\n\n      &.filled {\n        @apply bg-rui-#{$color};\n      }\n\n      &.outlined {\n        @apply border-rui-#{$color};\n      }\n\n      &.default,\n      &.outlined {\n        .icon,\n        .texts,\n        .action,\n        .close {\n          @apply text-rui-#{$color} text-shade-[.6];\n          @apply color-mix-supported:text-rui-#{$color}-shade/[.6] color-mix-supported:animate-none;\n        }\n      }\n    }\n  }\n\n  &.filled {\n    .icon,\n    .texts,\n    .action,\n    .close {\n      @apply text-rui-dark-text #{!important};\n    }\n  }\n\n  &.outlined {\n    @apply border m-[-1px] bg-white;\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$style","_unref","$attrs","_createElementVNode","_normalizeClass","_createVNode","$slots","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,UAAM,QAAQ;AAUd,UAAM,OAAO;AAKb,UAAM,EAAE,MAAM,SAAS,OAAO,KAAK;AAEnC,UAAM,WAAW,SAA+B,MAAM;AACpD,YAAM,UAAU,IAAI,IAAI;AACxB,UAAI;AACF,eAAO;AAET,YAAM,UAA2D;AAAA,QAC/D,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,MAAA;AAGX,aAAO,QAAQ,IAAI,IAAI,CAAC;AAAA,IAC1B,CAAC;;AAIC,aAAAA,UAAA,GAAAC,mBAqEM,OArENC,WAqEM;AAAA,QApEH,OAAK;AAAA,UAAUC,KAAAA,OAAO;AAAA,UAAaA,KAAAA,OAAOC,MAAA,IAAA,CAAI;AAAA,UAASD,KAAAA,OAAO,QAAA,OAAO;AAAA,QAAA;AAAA,SAK9DE,KAAAA,MAAM,GAAA;AAAA,QAEdC,mBAkCM,OAlCN,YAkCM;AAAA,UAhCIF,MAAA,QAAA,kBADRH,mBAQM,OAAA;AAAA;YANH,OAAKM,eAAEJ,KAAAA,OAAO,IAAI;AAAA,UAAA;YAEnBK,YAGE,SAAA;AAAA,cAFC,MAAMJ,MAAA,QAAA;AAAA,cACP,MAAK;AAAA,YAAA;;UAGTE,mBAuBM,OAAA;AAAA,YAtBJ,OAAKC,eAAA,CAAC,uBACEJ,KAAAA,OAAO,KAAK,CAAA;AAAA,UAAA;YAGZM,KAAAA,OAAO,SAAS,QAAA,sBADxBR,mBASM,OAAA;AAAA;cAPH,OAAKM,eAAA;AAAA,iCAAiC,QAAA;AAAA,cAAA;;cAIvCG,WAEO,0BAFP,MAEO;AAAA,gDADF,QAAA,KAAK,GAAA,CAAA;AAAA,cAAA;;YAKJD,KAAAA,OAAO,WAAW,QAAA,eAD1BT,aAAAC,mBAOM,OAPN,YAOM;AAAA,cAHJS,WAEO,4BAFP,MAEO;AAAA,gDADF,QAAA,WAAW,GAAA,CAAA;AAAA,cAAA;;;;QAKX,QAAA,2BAAXT,mBAUM,OAAA,YAAA;AAAA,UATJO,YAQY,WAAA;AAAA,YAPV,SAAQ;AAAA,YACR,MAAK;AAAA,YACJ,OAAO,QAAA,YAAO,WAAgB,SAAYJ,MAAA,IAAA;AAAA,YAC1C,OAAKG,eAAEJ,KAAAA,OAAO,MAAM;AAAA,YACpB,+CAAO,KAAI,QAAA;AAAA,UAAA;6BAEZ,MAAgB;AAAA,8CAAb,QAAA,UAAU,GAAA,CAAA;AAAA,YAAA;;;;QAGN,QAAA,0BAAXF,mBAcM,OAAA,YAAA;AAAA,UAbJO,YAYY,WAAA;AAAA,YAXT,OAAO,QAAA,YAAO,WAAgB,SAAYJ,MAAA,IAAA;AAAA,YAC3C,MAAK;AAAA,YACL,MAAA;AAAA,YACA,SAAQ;AAAA,YACP,OAAKG,eAAEJ,KAAAA,OAAO,KAAK;AAAA,YACnB,+CAAO,KAAI,OAAA;AAAA,UAAA;6BAEZ,MAGE;AAAA,cAHFK,YAGE,SAAA;AAAA,gBAFA,MAAK;AAAA,gBACL,MAAK;AAAA,cAAA;;;;;;;;;"}
+{"version":3,"file":"RuiAlert.vue2.js","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';\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 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=\"[$style.alert, $style[type], $style[variant]]\"\n    v-bind=\"$attrs\"\n  >\n    <div class=\"flex space-x-3 py-1 flex-grow\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"$style.icon\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"22\"\n        />\n      </div>\n      <div\n        class=\"space-y-1 flex-grow\"\n        :class=\"$style.texts\"\n      >\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=\"$style.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=\"$style.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\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n@use 'sass:list';\n\n:global(.dark) {\n  .alert {\n    @each $color in c.$context-colors {\n      &.#{$color} {\n        &.default {\n          @apply color-mix-supported:bg-rui-#{$color}-shade/[.9] bg-shade-[.9];\n        }\n\n        &.default,\n        &.outlined {\n          .icon,\n          .texts,\n          .action,\n          .close {\n            @apply color-mix-supported:text-rui-#{$color}-tint/[.6] text-tint-[.6];\n          }\n\n          .icon {\n            @apply text-rui-#{$color};\n          }\n        }\n      }\n\n      @if list.index((warning, success, info), $color) {\n        &.#{$color} {\n          &.filled {\n            .icon,\n            .texts,\n            .action,\n            .close {\n              @apply text-rui-light-text #{!important};\n            }\n          }\n        }\n      }\n    }\n\n    &.outlined {\n      @apply bg-black;\n    }\n  }\n}\n\n.alert {\n  @apply px-4 py-2.5 rounded flex space-x-4;\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      &.default {\n        @apply color-mix-supported:bg-rui-#{$color}-tint/[.9];\n        @apply bg-rui-#{$color} bg-tint-[.9];\n      }\n\n      &.filled {\n        @apply bg-rui-#{$color};\n      }\n\n      &.outlined {\n        @apply border-rui-#{$color};\n      }\n\n      &.default,\n      &.outlined {\n        .icon,\n        .texts,\n        .action,\n        .close {\n          @apply text-rui-#{$color} text-shade-[.6];\n          @apply color-mix-supported:text-rui-#{$color}-shade/[.6] color-mix-supported:animate-none;\n        }\n      }\n    }\n  }\n\n  &.filled {\n    .icon,\n    .texts,\n    .action,\n    .close {\n      @apply text-rui-dark-text #{!important};\n    }\n  }\n\n  &.outlined {\n    @apply border m-[-1px] bg-white;\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_createElementVNode","_unref","_normalizeClass","_createVNode","$slots","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,UAAM,OAAO;AAUb,UAAM,WAAW,SAA+B,MAAM;AACpD,UAAI,QAAA;AACF,eAAO,QAAA;AAET,YAAM,UAA2D;AAAA,QAC/D,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,MAAA;AAGX,aAAO,QAAQ,YAAI;AAAA,IACrB,CAAC;;AAIC,aAAAA,UAAA,GAAAC,mBAiEM,OAjENC,WAiEM;AAAA,QAhEH,OAAK,CAAGC,KAAAA,OAAO,OAAOA,KAAAA,OAAO,QAAA,IAAI,GAAGA,KAAAA,OAAO,QAAA,OAAO,CAAA;AAAA,MAAA,GAC3CC,KAAAA,MAAM,GAAA;AAAA,QAEdC,mBAkCM,OAlCN,YAkCM;AAAA,UAhCIC,MAAA,QAAA,kBADRL,mBAQM,OAAA;AAAA;YANH,OAAKM,eAAEJ,KAAAA,OAAO,IAAI;AAAA,UAAA;YAEnBK,YAGE,SAAA;AAAA,cAFC,MAAMF,MAAA,QAAA;AAAA,cACP,MAAK;AAAA,YAAA;;UAGTD,mBAuBM,OAAA;AAAA,YAtBJ,OAAKE,eAAA,CAAC,uBACEJ,KAAAA,OAAO,KAAK,CAAA;AAAA,UAAA;YAGZM,KAAAA,OAAO,SAAS,QAAA,sBADxBR,mBASM,OAAA;AAAA;cAPH,OAAKM,eAAA;AAAA,iCAAiC,QAAA;AAAA,cAAA;;cAIvCG,WAEO,0BAFP,MAEO;AAAA,gDADF,QAAA,KAAK,GAAA,CAAA;AAAA,cAAA;;YAKJD,KAAAA,OAAO,WAAW,QAAA,eAD1BT,aAAAC,mBAOM,OAPN,YAOM;AAAA,cAHJS,WAEO,4BAFP,MAEO;AAAA,gDADF,QAAA,WAAW,GAAA,CAAA;AAAA,cAAA;;;;QAKX,QAAA,2BAAXT,mBAUM,OAAA,YAAA;AAAA,UATJO,YAQY,WAAA;AAAA,YAPV,SAAQ;AAAA,YACR,MAAK;AAAA,YACJ,OAAO,QAAA,YAAO,WAAgB,SAAY,QAAA;AAAA,YAC1C,OAAKD,eAAEJ,KAAAA,OAAO,MAAM;AAAA,YACpB,+CAAO,KAAI,QAAA;AAAA,UAAA;6BAEZ,MAAgB;AAAA,8CAAb,QAAA,UAAU,GAAA,CAAA;AAAA,YAAA;;;;QAGN,QAAA,0BAAXF,mBAcM,OAAA,YAAA;AAAA,UAbJO,YAYY,WAAA;AAAA,YAXT,OAAO,QAAA,YAAO,WAAgB,SAAY,QAAA;AAAA,YAC3C,MAAK;AAAA,YACL,MAAA;AAAA,YACA,SAAQ;AAAA,YACP,OAAKD,eAAEJ,KAAAA,OAAO,KAAK;AAAA,YACnB,+CAAO,KAAI,OAAA;AAAA,UAAA;6BAEZ,MAGE;AAAA,cAHFK,YAGE,SAAA;AAAA,gBAFA,MAAK;AAAA,gBACL,MAAK;AAAA,cAAA;;;;;;;;;"}

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

@@ -16,20 +16,18 @@ export interface Props<T = undefined> {
 }
 declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<Props<T> & {
-        "onUpdate:model-value"?: ((value?: T | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value?: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        prepend?: (props: {}) => any;
-    } & {
-        default?: (props: {}) => any;
-    } & {
-        append?: (props: {}) => any;
+        prepend?: () => any;
+        append?: () => any;
+        default?: () => any;
     };
-    emit: (e: "update:model-value", value?: T) => void;
+    emit: (evt: "update:modelValue", value?: T | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/buttons/button/RuiButton.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createBlock, openBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot, createCommentVNode, createElementBlock, normalizeClass } from "vue";
+import { defineComponent, useSlots, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot, createElementBlock, normalizeClass, createCommentVNode } from "vue";
 import RuiProgress from "../../progress/RuiProgress.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -9,37 +9,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     disabled: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
-    color: { default: void 0 },
+    color: { default: () => void 0 },
     rounded: { type: Boolean, default: false },
     elevation: { default: null },
     variant: { default: "default" },
     icon: { type: Boolean, default: false },
     active: { type: Boolean, default: false },
-    size: { default: void 0 },
+    size: { default: () => void 0 },
     tag: { default: "button" },
     type: { default: "button" },
-    modelValue: { default: void 0 },
+    modelValue: { default: () => void 0 },
     hideFocusIndicator: { type: Boolean, default: false }
   },
-  emits: ["update:model-value"],
+  emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
-    const btnValue = computed(() => props.modelValue);
+    const slots = useSlots();
+    const btnValue = computed(() => __props.modelValue);
     const usedElevation = computed(() => {
-      if (props.disabled)
+      if (__props.disabled)
         return 0;
-      if (props.elevation !== null)
-        return props.elevation;
-      if (props.variant === "fab")
+      if (__props.elevation !== null)
+        return __props.elevation;
+      if (__props.variant === "fab")
         return 6;
       return 0;
     });
     const spinnerSize = computed(() => {
-      const size = props.size;
-      if (size === "lg")
+      if (__props.size === "lg")
         return 26;
-      if (size === "sm")
+      if (__props.size === "sm")
         return 18;
       return 22;
     });
@@ -63,19 +62,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         disabled: __props.disabled || __props.loading,
         type: __props.tag === "button" ? __props.type : void 0
       }, _ctx.$attrs, {
-        onClick: _cache[0] || (_cache[0] = ($event) => emit("update:model-value", unref(btnValue)))
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", unref(btnValue)))
       }), {
         default: withCtx(() => [
-          _ctx.$slots.prepend ? renderSlot(_ctx.$slots, "prepend", { key: 0 }) : createCommentVNode("", true),
-          _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
-            key: 1,
+          renderSlot(_ctx.$slots, "prepend"),
+          slots.default ? (openBlock(), createElementBlock("span", {
+            key: 0,
             class: normalizeClass(_ctx.$style.label)
           }, [
             renderSlot(_ctx.$slots, "default")
           ], 2)) : createCommentVNode("", true),
-          _ctx.$slots.append ? renderSlot(_ctx.$slots, "append", { key: 2 }) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "append"),
           __props.loading ? (openBlock(), createBlock(RuiProgress, {
-            key: 3,
+            key: 1,
             circular: "",
             class: normalizeClass(_ctx.$style.spinner),
             variant: "indeterminate",

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

@@ -1 +1 @@
-{"version":3,"file":"RuiButton.vue2.js","sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\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?: 'default' | 'outlined' | 'text' | 'fab' | 'list';\n  icon?: boolean;\n  active?: boolean;\n  size?: 'sm' | 'lg';\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 props = withDefaults(defineProps<Props<T>>(), {\n  disabled: false,\n  loading: false,\n  color: undefined,\n  rounded: false,\n  elevation: null,\n  variant: 'default',\n  icon: false,\n  active: false,\n  size: undefined,\n  tag: 'button',\n  type: 'button',\n  modelValue: undefined,\n  hideFocusIndicator: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value?: T): void;\n}>();\n\nconst btnValue = computed<T | undefined>(() => props.modelValue);\n\nconst usedElevation = computed<number | string>(() => {\n  if (props.disabled)\n    return 0;\n\n  if (props.elevation !== null)\n    return props.elevation;\n\n  if (props.variant === 'fab')\n    return 6;\n\n  return 0;\n});\n\nconst spinnerSize = computed<number>(() => {\n  const size = props.size;\n  if (size === 'lg')\n    return 26;\n\n  if (size === 'sm')\n    return 18;\n\n  return 22;\n});\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"[\n      $style.btn,\n      $style[color ?? 'grey'],\n      $style[size ?? ''],\n      $style[variant ?? ''],\n      `shadow-${usedElevation}`,\n      {\n        [$style.loading]: loading,\n        [$style._rounded]: rounded,\n        [$style.icon]: icon,\n        [$style.active]: active,\n        [$style.text]: variant === 'list',\n        [$style.flat]: hideFocusIndicator,\n      },\n    ]\"\n    :disabled=\"disabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    v-bind=\"$attrs\"\n    @click=\"emit('update:model-value', btnValue)\"\n  >\n    <slot\n      v-if=\"$slots.prepend\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"$slots.default\"\n      :class=\"$style.label\"\n    >\n      <slot />\n    </span>\n    <slot\n      v-if=\"$slots.append\"\n      name=\"append\"\n    />\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      :class=\"$style.spinner\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n@use 'sass:list';\n\n.btn {\n  @apply text-sm leading-[1.5rem] font-medium outline outline-1 outline-transparent outline-offset-[-1px] flex items-center justify-center gap-x-2 relative;\n  @apply px-4 py-1.5 rounded transition-all;\n  @apply disabled:bg-black/[.12] dark:disabled:bg-white/[.12] disabled:text-rui-text-disabled disabled:active:text-rui-text-disabled focus-visible:ring-2 #{!important};\n\n  .label {\n    @apply inline-block text-nowrap;\n  }\n\n  &.flat {\n    @apply focus-visible:ring-0 #{!important};\n  }\n\n  &._rounded {\n    @apply rounded-full;\n  }\n\n  &.sm {\n    @apply px-2.5 py-1 text-[.8125rem] leading-[1.375rem];\n  }\n\n  &.lg {\n    @apply px-6 py-2 text-base leading-[1.625rem];\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      @apply bg-rui-#{$color} hover:bg-rui-#{$color}-darker active:bg-rui-#{$color}-darker/90 text-rui-dark-text ring-rui-#{$color}/40 dark:text-rui-text dark:ring-rui-#{$color}/60;\n\n      &.active {\n        @apply bg-rui-#{$color}-darker;\n      }\n\n      &.outlined,\n      &.text {\n        @apply bg-transparent hover:bg-rui-#{$color}-lighter/[.04] active:bg-rui-#{$color}-lighter/10 text-rui-#{$color};\n\n        &.active {\n          @apply bg-rui-#{$color}-lighter/30;\n        }\n      }\n\n      &.outlined {\n        @apply outline-rui-#{$color}/[0.5];\n      }\n\n      @if list.index((warning, success, info), $color) {\n        &.default {\n          @apply dark:text-rui-light-text;\n        }\n      }\n\n      @if list.index((primary, secondary), $color) {\n        &.outlined,\n        &.text {\n          &.active {\n            @apply dark:bg-rui-#{$color}-darker/60 dark:text-rui-#{$color}-lighter;\n          }\n        }\n      }\n    }\n  }\n\n  &.grey {\n    @apply bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400;\n    @apply dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600;\n\n    &.active {\n      @apply bg-rui-grey-50;\n    }\n\n    &.outlined,\n    &.text {\n      @apply bg-transparent hover:bg-black/[.04] active:bg-black/10;\n      @apply dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text;\n\n      &.active {\n        @apply bg-black/10 dark:bg-white/30;\n      }\n    }\n\n    &.outlined {\n      @apply outline-rui-text;\n    }\n\n    &.text {\n      @apply text-rui-text-secondary;\n    }\n  }\n\n  &.outlined,\n  &.text {\n    @apply disabled:bg-transparent disabled:active:bg-transparent #{!important};\n  }\n\n  &.outlined {\n    @apply disabled:outline-rui-text-disabled;\n  }\n\n  &.text {\n    @apply px-2;\n\n    &.sm {\n      @apply px-1.5;\n    }\n\n    &.lg {\n      @apply px-2.5;\n    }\n  }\n\n  &.fab {\n    @apply rounded-full py-2;\n\n    &.lg {\n      @apply py-3;\n    }\n\n    &.sm {\n      @apply py-1.5 px-2;\n    }\n  }\n\n  &.list {\n    @apply p-3 rounded-none w-full justify-start text-left;\n\n    &.sm {\n      @apply px-3 py-1;\n    }\n\n    .label {\n      @apply w-full;\n    }\n  }\n\n  &.icon {\n    @apply rounded-full px-3 py-3;\n\n    &.lg {\n      @apply px-4 py-4;\n    }\n\n    &.sm {\n      @apply px-1 py-1;\n    }\n  }\n\n  &.fab.icon {\n    &.sm {\n      @apply px-2 py-2;\n    }\n  }\n\n  &.loading {\n    @apply space-x-0;\n\n    > *:not(.spinner) {\n      @apply opacity-0 invisible;\n    }\n  }\n\n  .spinner {\n    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;\n  }\n}\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_mergeProps","$style","_unref","$attrs","$slots","_renderSlot","_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,UAAM,QAAQ;AAgBd,UAAM,OAAO;AAIb,UAAM,WAAW,SAAwB,MAAM,MAAM,UAAU;AAE/D,UAAM,gBAAgB,SAA0B,MAAM;AACpD,UAAI,MAAM;AACR,eAAO;AAET,UAAI,MAAM,cAAc;AACtB,eAAO,MAAM;AAEf,UAAI,MAAM,YAAY;AACpB,eAAO;AAET,aAAO;AAAA,IACT,CAAC;AAED,UAAM,cAAc,SAAiB,MAAM;AACzC,YAAM,OAAO,MAAM;AACnB,UAAI,SAAS;AACX,eAAO;AAET,UAAI,SAAS;AACX,eAAO;AAET,aAAO;AAAA,IACT,CAAC;;0BAICA,YA4CYC,wBA3CL,QAAA,GAAG,GADVC,WA4CY;AAAA,QA1CT,OAAK;AAAA,UAAUC,KAAAA,OAAO;AAAA,UAAWA,KAAAA,OAAO,QAAA,SAAK,MAAA;AAAA,UAAmBA,KAAAA,OAAO,QAAA,QAAI,EAAA;AAAA,UAAeA,KAAAA,OAAO,QAAA,WAAO,EAAA;AAAA,oBAAyBC,MAAA,aAAA,CAAa;AAAA;aAAqBD,KAAAA,OAAO,OAAO,GAAG,QAAA;AAAA,aAAkBA,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,aAAkBA,KAAAA,OAAO,IAAI,GAAG,QAAA;AAAA,aAAeA,KAAAA,OAAO,MAAM,GAAG,QAAA;AAAA,aAAiBA,KAAAA,OAAO,IAAI,GAAG,QAAA,YAAO;AAAA,aAAsBA,KAAAA,OAAO,IAAI,GAAG,QAAA;AAAA,UAAA;AAAA;QAejW,UAAU,QAAA,YAAY,QAAA;AAAA,QACtB,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO;AAAA,MAAA,GACzBE,KAAAA,QAAM;AAAA,QACb,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,sBAAuBD,MAAA,QAAA,CAAQ;AAAA,MAAA;yBAE3C,MAGE;AAAA,UAFME,KAAAA,OAAO,UADfC,WAGE,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA;UAEMD,KAAAA,OAAO,wBADfE,mBAKO,QAAA;AAAA;YAHJ,OAAKC,eAAEN,KAAAA,OAAO,KAAK;AAAA,UAAA;YAEpBI,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;UAGFD,KAAAA,OAAO,SADfC,WAGE,KAAA,QAAA,UAAA,EAAA,KAAA,EAAA,CAAA;UAEM,QAAA,wBADRP,YAOE,aAAA;AAAA;YALA,UAAA;AAAA,YACC,OAAKS,eAAEN,KAAAA,OAAO,OAAO;AAAA,YACtB,SAAQ;AAAA,YACR,WAAU;AAAA,YACT,MAAMC,MAAA,WAAA;AAAA,UAAA;;;;;;;"}
+{"version":3,"file":"RuiButton.vue2.js","sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\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?: 'default' | 'outlined' | 'text' | 'fab' | 'list';\n  icon?: boolean;\n  active?: boolean;\n  size?: 'sm' | 'lg';\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 = '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:modelValue': [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 usedElevation = computed<number | string>(() => {\n  if (disabled)\n    return 0;\n\n  if (elevation !== null)\n    return elevation;\n\n  if (variant === 'fab')\n    return 6;\n\n  return 0;\n});\n\nconst spinnerSize = computed<number>(() => {\n  if (size === 'lg')\n    return 26;\n\n  if (size === 'sm')\n    return 18;\n\n  return 22;\n});\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"[\n      $style.btn,\n      $style[color ?? 'grey'],\n      $style[size ?? ''],\n      $style[variant ?? ''],\n      `shadow-${usedElevation}`,\n      {\n        [$style.loading]: loading,\n        [$style._rounded]: rounded,\n        [$style.icon]: icon,\n        [$style.active]: active,\n        [$style.text]: variant === 'list',\n        [$style.flat]: hideFocusIndicator,\n      },\n    ]\"\n    :disabled=\"disabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    v-bind=\"$attrs\"\n    @click=\"emit('update:modelValue', btnValue)\"\n  >\n    <slot name=\"prepend\" />\n    <span\n      v-if=\"slots.default\"\n      :class=\"$style.label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      :class=\"$style.spinner\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n@use 'sass:list';\n\n.btn {\n  @apply text-sm leading-[1.5rem] font-medium outline outline-1 outline-transparent outline-offset-[-1px] flex items-center justify-center gap-x-2 relative;\n  @apply px-4 py-1.5 rounded transition-all;\n  @apply disabled:bg-black/[.12] dark:disabled:bg-white/[.12] disabled:text-rui-text-disabled disabled:active:text-rui-text-disabled focus-visible:ring-2 #{!important};\n\n  .label {\n    @apply inline-block text-nowrap;\n  }\n\n  &.flat {\n    @apply focus-visible:ring-0 #{!important};\n  }\n\n  &._rounded {\n    @apply rounded-full;\n  }\n\n  &.sm {\n    @apply px-2.5 py-1 text-[.8125rem] leading-[1.375rem];\n  }\n\n  &.lg {\n    @apply px-6 py-2 text-base leading-[1.625rem];\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      @apply bg-rui-#{$color} hover:bg-rui-#{$color}-darker active:bg-rui-#{$color}-darker/90 text-rui-dark-text ring-rui-#{$color}/40 dark:text-rui-text dark:ring-rui-#{$color}/60;\n\n      &.active {\n        @apply bg-rui-#{$color}-darker;\n      }\n\n      &.outlined,\n      &.text {\n        @apply bg-transparent hover:bg-rui-#{$color}-lighter/[.04] active:bg-rui-#{$color}-lighter/10 text-rui-#{$color};\n\n        &.active {\n          @apply bg-rui-#{$color}-lighter/30;\n        }\n      }\n\n      &.outlined {\n        @apply outline-rui-#{$color}/[0.5];\n      }\n\n      @if list.index((warning, success, info), $color) {\n        &.default {\n          @apply dark:text-rui-light-text;\n        }\n      }\n\n      @if list.index((primary, secondary), $color) {\n        &.outlined,\n        &.text {\n          &.active {\n            @apply dark:bg-rui-#{$color}-darker/60 dark:text-rui-#{$color}-lighter;\n          }\n        }\n      }\n    }\n  }\n\n  &.grey {\n    @apply bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400;\n    @apply dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600;\n\n    &.active {\n      @apply bg-rui-grey-50;\n    }\n\n    &.outlined,\n    &.text {\n      @apply bg-transparent hover:bg-black/[.04] active:bg-black/10;\n      @apply dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text;\n\n      &.active {\n        @apply bg-black/10 dark:bg-white/30;\n      }\n    }\n\n    &.outlined {\n      @apply outline-rui-text;\n    }\n\n    &.text {\n      @apply text-rui-text-secondary;\n    }\n  }\n\n  &.outlined,\n  &.text {\n    @apply disabled:bg-transparent disabled:active:bg-transparent #{!important};\n  }\n\n  &.outlined {\n    @apply disabled:outline-rui-text-disabled;\n  }\n\n  &.text {\n    @apply px-2;\n\n    &.sm {\n      @apply px-1.5;\n    }\n\n    &.lg {\n      @apply px-2.5;\n    }\n  }\n\n  &.fab {\n    @apply rounded-full py-2;\n\n    &.lg {\n      @apply py-3;\n    }\n\n    &.sm {\n      @apply py-1.5 px-2;\n    }\n  }\n\n  &.list {\n    @apply p-3 rounded-none w-full justify-start text-left;\n\n    &.sm {\n      @apply px-3 py-1;\n    }\n\n    .label {\n      @apply w-full;\n    }\n  }\n\n  &.icon {\n    @apply rounded-full px-3 py-3;\n\n    &.lg {\n      @apply px-4 py-4;\n    }\n\n    &.sm {\n      @apply px-1 py-1;\n    }\n  }\n\n  &.fab.icon {\n    &.sm {\n      @apply px-2 py-2;\n    }\n  }\n\n  &.loading {\n    @apply space-x-0;\n\n    > *:not(.spinner) {\n      @apply opacity-0 invisible;\n    }\n  }\n\n  .spinner {\n    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;\n  }\n}\n</style>\n"],"names":["_useSlots","_createBlock","_resolveDynamicComponent","_mergeProps","$style","_unref","$attrs","_renderSlot","_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,UAAM,OAAO;AAIb,UAAM,QAAQA,SAAA;AAMd,UAAM,WAAW,SAAwB,MAAM,QAAA,UAAU;AAEzD,UAAM,gBAAgB,SAA0B,MAAM;AACpD,UAAI,QAAA;AACF,eAAO;AAET,UAAI,QAAA,cAAc;AAChB,eAAO,QAAA;AAET,UAAI,QAAA,YAAY;AACd,eAAO;AAET,aAAO;AAAA,IACT,CAAC;AAED,UAAM,cAAc,SAAiB,MAAM;AACzC,UAAI,QAAA,SAAS;AACX,eAAO;AAET,UAAI,QAAA,SAAS;AACX,eAAO;AAET,aAAO;AAAA,IACT,CAAC;;0BAICC,YAsCYC,wBArCL,QAAA,GAAG,GADVC,WAsCY;AAAA,QApCT,OAAK;AAAA,UAAUC,KAAAA,OAAO;AAAA,UAAWA,KAAAA,OAAO,QAAA,SAAK,MAAA;AAAA,UAAmBA,KAAAA,OAAO,QAAA,QAAI,EAAA;AAAA,UAAeA,KAAAA,OAAO,QAAA,WAAO,EAAA;AAAA,oBAAyBC,MAAA,aAAA,CAAa;AAAA;aAAqBD,KAAAA,OAAO,OAAO,GAAG,QAAA;AAAA,aAAkBA,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,aAAkBA,KAAAA,OAAO,IAAI,GAAG,QAAA;AAAA,aAAeA,KAAAA,OAAO,MAAM,GAAG,QAAA;AAAA,aAAiBA,KAAAA,OAAO,IAAI,GAAG,QAAA,YAAO;AAAA,aAAsBA,KAAAA,OAAO,IAAI,GAAG,QAAA;AAAA,UAAA;AAAA;QAejW,UAAU,QAAA,YAAY,QAAA;AAAA,QACtB,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO;AAAA,MAAA,GACzBE,KAAAA,QAAM;AAAA,QACb,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,qBAAsBD,MAAA,QAAA,CAAQ;AAAA,MAAA;yBAE1C,MAAuB;AAAA,UAAvBE,WAAuB,KAAA,QAAA,SAAA;AAAA,UAEf,MAAM,wBADdC,mBAKO,QAAA;AAAA;YAHJ,OAAKC,eAAEL,KAAAA,OAAO,KAAK;AAAA,UAAA;YAEpBG,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;UAEVA,WAAsB,KAAA,QAAA,QAAA;AAAA,UAEd,QAAA,wBADRN,YAOE,aAAA;AAAA;YALA,UAAA;AAAA,YACC,OAAKQ,eAAEL,KAAAA,OAAO,OAAO;AAAA,YACtB,SAAQ;AAAA,YACR,WAAU;AAAA,YACT,MAAMC,MAAA,WAAA;AAAA,UAAA;;;;;;;"}

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

@@ -1,5 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
-export interface Props<T = undefined> {
+export interface Props {
     vertical?: boolean;
     color?: ContextColorsType;
     activeColor?: ContextColorsType;
@@ -7,19 +7,20 @@ export interface Props<T = undefined> {
     size?: 'sm' | 'lg';
     gap?: 'sm' | 'md' | 'lg';
     required?: boolean;
-    modelValue?: T | T[];
     disabled?: boolean;
 }
 declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<Props<T> & {
-        "onUpdate:modelValue"?: ((modelValue?: T | T[] | undefined) => any) | undefined;
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & {
+        modelValue?: T | T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T | T[] | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: (e: "update:modelValue", modelValue?: T | T[]) => void;
+    emit: (event: "update:modelValue", value: T | T[] | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };