maz-ui 3.21.5 → 3.22.0

package/components/MazCheckbox.d.ts

@@ -3,8 +3,8 @@ import type { Color, Size } from './types';
 export type { Color, Size };
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
-        type: BooleanConstructor;
-        required: true;
+        type: PropType<boolean | (string | number)[]>;
+        default: undefined;
     };
     id: {
         type: StringConstructor;
@@ -14,6 +14,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<Color>;
         default: string;
     };
+    value: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     name: {
         type: StringConstructor;
         default: string;
@@ -31,8 +35,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "update:model-value": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: BooleanConstructor;
-        required: true;
+        type: PropType<boolean | (string | number)[]>;
+        default: undefined;
     };
     id: {
         type: StringConstructor;
@@ -42,6 +46,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<Color>;
         default: string;
     };
+    value: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     name: {
         type: StringConstructor;
         default: string;
@@ -62,7 +70,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     color: Color;
     disabled: boolean;
     name: string;
+    value: string | number | boolean;
     id: string;
+    modelValue: boolean | (string | number)[];
 }, {}>, {
     default?(_: {}): any;
 }>;

package/components/MazCheckbox.mjs

@@ -1,5 +1,5 @@
 import "./assets/MazCheckbox.css";
-import { computed, openBlock, createElementBlock, createElementVNode, defineComponent, useCssVars, getCurrentInstance, unref, normalizeClass, mergeProps, createVNode, Transition, withCtx, withDirectives, vShow, renderSlot } from "vue";
+import { computed, openBlock, createElementBlock, createElementVNode, defineComponent, useCssVars, getCurrentInstance, unref, normalizeClass, mergeProps, createVNode, renderSlot } from "vue";
 const useInstanceUniqId = ({
   componentName,
   instance,
@@ -39,12 +39,16 @@ const _hoisted_2 = ["id", "checked", "disabled", "name"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazCheckbox",
   props: {
-    modelValue: { type: Boolean, required: true },
+    modelValue: {
+      type: [Boolean, Array],
+      default: void 0
+    },
     id: { type: String, default: void 0 },
     color: {
       type: String,
       default: "primary"
     },
+    value: { type: [String, Number, Boolean], default: void 0 },
     name: { type: String, default: "m-checkbox" },
     size: { type: String, default: "md" },
     disabled: { type: Boolean, default: false }
@@ -57,10 +61,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "2887ae19": checkIconColor.value,
-      "3ea743fb": checkboxSize.value,
-      "8729aa64": checkboxSelectedColor.value,
-      "324bb1de": checkboxBoxShadow.value
+      "40cdf8ce": checkIconColor.value,
+      "25e00d0a": checkboxSize.value,
+      "5692b564": checkboxSelectedColor.value,
+      "9df23cde": checkboxBoxShadow.value
     }));
     const instance = getCurrentInstance();
     const props = __props;
@@ -70,6 +74,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       instance,
       providedId: props.id
     });
+    const isChecked = computed(
+      () => typeof props.value !== "boolean" && Array.isArray(props.modelValue) ? props.modelValue.includes(props.value) : typeof props.modelValue === "boolean" ? props.modelValue : false
+    );
     const checkboxSize = computed(() => {
       switch (props.size) {
         case "xl": {
@@ -120,14 +127,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => ["black", "transparent"].includes(props.color) ? `var(--maz-color-muted)` : `var(--maz-color-${props.color}-alpha)`
     );
     function keyboardHandler(event) {
-      if (["Enter", "Space"].includes(event.code)) {
+      if (["Space"].includes(event.code)) {
         event.preventDefault();
-        emitValue(!props.modelValue);
+        emitValue(props.value ?? !props.modelValue);
+      }
+    }
+    function getNewValue(value) {
+      if (typeof value === "boolean" && (typeof props.modelValue === "boolean" || props.modelValue === void 0 || props.modelValue === null)) {
+        return props.modelValue ? false : true;
+      } else if (Array.isArray(props.modelValue) && typeof value !== "boolean") {
+        return props.modelValue.includes(value) ? props.modelValue.filter((v) => v !== value) : [...props.modelValue, value];
+      } else {
+        return [value];
       }
     }
     function emitValue(value) {
-      emits("update:model-value", value);
-      emits("change", value);
+      const newValue = getNewValue(value);
+      emits("update:model-value", newValue);
+      emits("change", newValue);
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
@@ -135,43 +152,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["m-checkbox", { "--disabled": __props.disabled }]),
         tabindex: "0",
         role: "checkbox",
-        "aria-checked": __props.modelValue,
+        "aria-checked": isChecked.value,
         onKeydown: keyboardHandler
       }, [
         createElementVNode("input", mergeProps({
           id: unref(instanceId),
-          checked: __props.modelValue
+          checked: isChecked.value
         }, _ctx.$attrs, {
+          tabindex: "-1",
           disabled: __props.disabled,
           name: __props.name,
           type: "checkbox",
           onChange: _cache[0] || (_cache[0] = ($event) => {
             var _a;
-            return emitValue((_a = $event == null ? void 0 : $event.target) == null ? void 0 : _a.checked);
+            return emitValue(__props.value ?? ((_a = $event == null ? void 0 : $event.target) == null ? void 0 : _a.checked));
           })
         }), null, 16, _hoisted_2),
         createElementVNode("span", null, [
-          createVNode(Transition, {
-            name: "maz-scale",
-            persisted: ""
-          }, {
-            default: withCtx(() => [
-              withDirectives(createVNode(unref(CheckIcon), {
-                class: normalizeClass(["check-icon", checkIconSize.value])
-              }, null, 8, ["class"]), [
-                [vShow, __props.modelValue]
-              ])
-            ]),
-            _: 1
-            /* STABLE */
-          })
+          createVNode(unref(CheckIcon), {
+            class: normalizeClass(["check-icon", checkIconSize.value])
+          }, null, 8, ["class"])
         ]),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ], 42, _hoisted_1);
     };
   }
 });
-const MazCheckbox_vue_vue_type_style_index_0_scoped_e6c359ea_lang = "";
+const MazCheckbox_vue_vue_type_style_index_0_scoped_141a5e53_lang = "";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -179,7 +186,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6c359ea"]]);
+const MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-141a5e53"]]);
 export {
   MazCheckbox as default
 };

package/components/MazPhoneNumberInput.mjs

@@ -1,4 +1,4 @@
-import { M } from "./chunks/MazPhoneNumberInput-d90953ab.mjs";
+import { M } from "./chunks/MazPhoneNumberInput-4cec4ade.mjs";
 export {
   M as default
 };

package/components/MazRadio.d.ts

@@ -0,0 +1,82 @@
+import { type PropType } from 'vue';
+import type { Color, Size } from './types';
+export type { Color, Size };
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    color: {
+        type: PropType<Color>;
+        default: string;
+    };
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    "update:model-value": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    color: {
+        type: PropType<Color>;
+        default: string;
+    };
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
+}, {
+    size: Size;
+    color: Color;
+    disabled: boolean;
+    id: string;
+    modelValue: string;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/MazRadio.mjs

@@ -0,0 +1,133 @@
+import "./assets/MazRadio.css";
+import { computed, defineComponent, useCssVars, getCurrentInstance, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, mergeProps, renderSlot, pushScopeId, popScopeId } from "vue";
+const useInstanceUniqId = ({
+  componentName,
+  instance,
+  providedId
+}) => {
+  return computed(() => providedId ?? `${componentName}-${instance == null ? void 0 : instance.uid}`);
+};
+const _withScopeId = (n) => (pushScopeId("data-v-f47afb8e"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["for", "aria-checked"];
+const _hoisted_2 = ["id", "value", "disabled", "name", "checked"];
+const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode(
+  "span",
+  null,
+  [
+    /* @__PURE__ */ createElementVNode("span", { class: "round" })
+  ],
+  -1
+  /* HOISTED */
+));
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazRadio",
+  props: {
+    modelValue: { type: String, default: void 0 },
+    value: { type: String, required: true },
+    name: { type: String, required: true },
+    id: { type: String, default: void 0 },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: [
+    /* emitted when value change */
+    "update:model-value",
+    /* emited when value change */
+    "change"
+  ],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "2a231cf6": radioSize.value,
+      "ef04cef8": radioSelectedColor.value,
+      "f6f84072": radioBoxShadow.value
+    }));
+    const instance = getCurrentInstance();
+    const props = __props;
+    const emits = __emit;
+    const instanceId = useInstanceUniqId({
+      componentName: "MazCheckbox",
+      instance,
+      providedId: props.id
+    });
+    const isSelected = computed(() => props.modelValue === props.value);
+    const radioSize = computed(() => {
+      switch (props.size) {
+        case "xl": {
+          return "2.25rem";
+        }
+        case "lg": {
+          return "2rem";
+        }
+        default: {
+          return "1.625rem";
+        }
+        case "sm": {
+          return "1.425rem";
+        }
+        case "xs": {
+          return "1.325rem";
+        }
+        case "mini": {
+          return "1.2rem";
+        }
+      }
+    });
+    const radioSelectedColor = computed(() => `var(--maz-color-${props.color})`);
+    const radioBoxShadow = computed(
+      () => ["black", "transparent"].includes(props.color) ? `var(--maz-color-muted)` : `var(--maz-color-${props.color}-alpha)`
+    );
+    function keyboardHandler(event, value) {
+      if (["Space"].includes(event.code)) {
+        event.preventDefault();
+        emitValue(value);
+      }
+    }
+    function emitValue(value) {
+      emits("update:model-value", value);
+      emits("change", value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        for: unref(instanceId),
+        class: normalizeClass(["m-checkbox", { "--disabled": __props.disabled, "--selected": isSelected.value }]),
+        tabindex: "0",
+        role: "radio",
+        "aria-checked": isSelected.value,
+        onKeydown: _cache[1] || (_cache[1] = ($event) => keyboardHandler($event, __props.value))
+      }, [
+        createElementVNode("input", mergeProps({
+          id: unref(instanceId),
+          value: __props.value
+        }, _ctx.$attrs, {
+          tabindex: "-1",
+          disabled: __props.disabled,
+          name: __props.name,
+          type: "radio",
+          checked: isSelected.value,
+          onChange: _cache[0] || (_cache[0] = ($event) => {
+            var _a;
+            return emitValue((_a = $event == null ? void 0 : $event.target) == null ? void 0 : _a.value);
+          })
+        }), null, 16, _hoisted_2),
+        _hoisted_3,
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 42, _hoisted_1);
+    };
+  }
+});
+const MazRadio_vue_vue_type_style_index_0_scoped_f47afb8e_lang = "";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const MazRadio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f47afb8e"]]);
+export {
+  MazRadio as default
+};

package/components/MazSelect.mjs

@@ -1,4 +1,4 @@
-import { M } from "./chunks/MazSelect-4de4d975.mjs";
+import { M } from "./chunks/MazSelect-757bffd7.mjs";
 export {
   M as default
 };

package/components/assets/MazCheckbox.css

@@ -1 +1 @@
-.m-checkbox[data-v-e6c359ea]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem;outline:2px solid transparent;outline-offset:2px}.m-checkbox .check-icon[data-v-e6c359ea]{color:var(--2887ae19)}.m-checkbox .check-icon[data-v-e6c359ea] path{stroke-width:2.5}.m-checkbox span[data-v-e6c359ea]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:var(--maz-border-radius);border-width:var(--maz-border-width);--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-v-e6c359ea]:is([class~=dark] .m-checkbox span){border-color:var(--maz-color-bg-lighter)}.m-checkbox span[data-v-e6c359ea]{width:var(--3ea743fb);height:var(--3ea743fb)}.m-checkbox input[data-v-e6c359ea]{display:none}.m-checkbox input:not(:checked)~span[data-v-e6c359ea]{background-color:var(--maz-color-bg)}[data-v-e6c359ea]:is([class~=dark] .m-checkbox input:not(:checked)~span){background-color:var(--maz-color-bg-light)}.m-checkbox input:checked~span[data-v-e6c359ea]{border-color:var(--8729aa64);background-color:var(--8729aa64)}.m-checkbox input:disabled~span[data-v-e6c359ea]{background-color:var(--maz-color-bg-light)}[data-v-e6c359ea]:is([class~=dark] .m-checkbox input:disabled~span){background-color:var(--maz-color-bg-lighter)}.m-checkbox.--disabled[data-v-e6c359ea]{cursor:not-allowed}.m-checkbox[data-v-e6c359ea]:not(.--disabled){cursor:pointer}.m-checkbox:not(.--disabled):hover span[data-v-e6c359ea],.m-checkbox:not(.--disabled):focus span[data-v-e6c359ea]{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-box-shadow:0 0 0 .125rem var(--324bb1de);box-shadow:0 0 0 .125rem var(--324bb1de)}
+.m-checkbox[data-v-141a5e53]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem;outline:2px solid transparent;outline-offset:2px}.m-checkbox .check-icon[data-v-141a5e53]{color:var(--40cdf8ce);--tw-scale-x: 0;--tw-scale-y: 0;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1)}.m-checkbox .check-icon[data-v-141a5e53] path{stroke-width:2.5}.m-checkbox>span[data-v-141a5e53]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:var(--maz-border-radius);border-width:var(--maz-border-width);--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-v-141a5e53]:is([class~=dark] .m-checkbox>span){border-color:var(--maz-color-bg-lighter)}.m-checkbox>span[data-v-141a5e53]{width:var(--25e00d0a);height:var(--25e00d0a)}.m-checkbox input[data-v-141a5e53]{display:none}.m-checkbox input:not(:checked)~span[data-v-141a5e53]{background-color:var(--maz-color-bg)}[data-v-141a5e53]:is([class~=dark] .m-checkbox input:not(:checked)~span){background-color:var(--maz-color-bg-light)}.m-checkbox input:checked~span[data-v-141a5e53]{border-color:var(--5692b564);background-color:var(--5692b564)}.m-checkbox input:checked~span .check-icon[data-v-141a5e53]{--tw-scale-x: 1;--tw-scale-y: 1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.m-checkbox input:disabled~span[data-v-141a5e53]{background-color:var(--maz-color-bg-light)}[data-v-141a5e53]:is([class~=dark] .m-checkbox input:disabled~span){background-color:var(--maz-color-bg-lighter)}.m-checkbox.--disabled[data-v-141a5e53]{cursor:not-allowed;color:var(--maz-color-muted)}.m-checkbox.--disabled input:checked~span[data-v-141a5e53]{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}[data-v-141a5e53]:is([class~=dark] .m-checkbox.--disabled input:checked~span){border-color:var(--maz-color-bg-lighter)}.m-checkbox.--disabled input:checked~span .check-icon[data-v-141a5e53]{color:var(--maz-color-muted)}.m-checkbox[data-v-141a5e53]:not(.--disabled){cursor:pointer}.m-checkbox:not(.--disabled):hover>span[data-v-141a5e53],.m-checkbox:not(.--disabled):focus>span[data-v-141a5e53]{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-box-shadow:0 0 0 .125rem var(--9df23cde);box-shadow:0 0 0 .125rem var(--9df23cde)}

package/components/assets/MazRadio.css

@@ -0,0 +1 @@
+.m-checkbox[data-v-f47afb8e]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem;outline:2px solid transparent;outline-offset:2px}.m-checkbox>span[data-v-f47afb8e]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:9999px;border-width:var(--maz-border-width);--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity));-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-v-f47afb8e]:is([class~=dark] .m-checkbox>span){border-color:var(--maz-color-bg-lighter)}.m-checkbox>span[data-v-f47afb8e]{width:var(--2a231cf6);height:var(--2a231cf6)}.m-checkbox>span .round[data-v-f47afb8e]{height:50%;width:50%;--tw-scale-x: 0;--tw-scale-y: 0;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);background-color:var(--ef04cef8)}.m-checkbox:not(.--selected)>span[data-v-f47afb8e]{background-color:var(--maz-color-bg)}[data-v-f47afb8e]:is([class~=dark] .m-checkbox:not(.--selected)>span){background-color:var(--maz-color-bg-light)}.m-checkbox.--selected>span[data-v-f47afb8e]{border-color:var(--ef04cef8)}.m-checkbox.--selected>span .round[data-v-f47afb8e]{--tw-scale-x: 1;--tw-scale-y: 1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.m-checkbox input[data-v-f47afb8e]{display:none}.m-checkbox.--disabled[data-v-f47afb8e]{cursor:not-allowed;color:var(--maz-color-muted)}.m-checkbox.--disabled>span[data-v-f47afb8e]{background-color:var(--maz-color-bg-light)}[data-v-f47afb8e]:is([class~=dark] .m-checkbox.--disabled>span){background-color:var(--maz-color-bg-lighter)}.m-checkbox.--disabled.--selected>span[data-v-f47afb8e]{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}[data-v-f47afb8e]:is([class~=dark] .m-checkbox.--disabled.--selected>span){border-color:var(--maz-color-bg-lighter)}.m-checkbox.--disabled.--selected>span .round[data-v-f47afb8e]{background-color:var(--maz-color-muted)}.m-checkbox[data-v-f47afb8e]:not(.--disabled){cursor:pointer}.m-checkbox:not(.--disabled):hover>span[data-v-f47afb8e],.m-checkbox:not(.--disabled):focus>span[data-v-f47afb8e]{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-box-shadow:0 0 0 .125rem var(--f6f84072);box-shadow:0 0 0 .125rem var(--f6f84072)}

package/components/chunks/{MazBtn-704bd37b.mjs → MazBtn-001d4174.mjs}

@@ -1,6 +1,6 @@
 import "../assets/MazBtn.css";
 import { defineComponent, defineAsyncComponent, useAttrs, useSlots, onBeforeMount, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, createElementBlock, normalizeClass, renderSlot, unref, createCommentVNode, createElementVNode } from "vue";
-import { _ as _export_sfc } from "./MazSelect-4de4d975.mjs";
+import { _ as _export_sfc } from "./MazSelect-757bffd7.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazBtn",
   props: {
@@ -46,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     noElevation: { type: Boolean, default: false }
   },
   setup(__props) {
-    const MazSpinner = defineAsyncComponent(() => import("./MazSpinner-8700b7eb.mjs"));
+    const MazSpinner = defineAsyncComponent(() => import("./MazSpinner-7bd9b831.mjs"));
     const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
     const { href, to } = useAttrs();
     const slots = useSlots();

package/components/chunks/{MazBtn-2a8cee98.mjs → MazBtn-97d9e521.mjs}

@@ -1,6 +1,6 @@
 import "../assets/MazBtn.css";
 import { defineComponent, defineAsyncComponent, useAttrs, useSlots, onBeforeMount, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, createElementBlock, normalizeClass, renderSlot, unref, createCommentVNode, createElementVNode } from "vue";
-import { _ as _export_sfc } from "./MazPhoneNumberInput-d90953ab.mjs";
+import { _ as _export_sfc } from "./MazPhoneNumberInput-4cec4ade.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazBtn",
   props: {
@@ -46,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     noElevation: { type: Boolean, default: false }
   },
   setup(__props) {
-    const MazSpinner = defineAsyncComponent(() => import("./MazSpinner-76e79a34.mjs"));
+    const MazSpinner = defineAsyncComponent(() => import("./MazSpinner-ac429216.mjs"));
     const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
     const { href, to } = useAttrs();
     const slots = useSlots();

package/components/chunks/{MazCheckbox-b445b9b2.mjs → MazCheckbox-0595c207.mjs}

@@ -1,18 +1,22 @@
 import "../assets/MazCheckbox.css";
-import { defineComponent, useCssVars, getCurrentInstance, computed, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, mergeProps, createVNode, Transition, withCtx, withDirectives, vShow, renderSlot } from "vue";
-import { u as useInstanceUniqId, _ as _export_sfc } from "./MazPhoneNumberInput-d90953ab.mjs";
+import { defineComponent, useCssVars, getCurrentInstance, computed, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, mergeProps, createVNode, renderSlot } from "vue";
+import { u as useInstanceUniqId, _ as _export_sfc } from "./MazPhoneNumberInput-4cec4ade.mjs";
 import CheckIcon from "./check-8da249b1.mjs";
 const _hoisted_1 = ["for", "aria-checked"];
 const _hoisted_2 = ["id", "checked", "disabled", "name"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazCheckbox",
   props: {
-    modelValue: { type: Boolean, required: true },
+    modelValue: {
+      type: [Boolean, Array],
+      default: void 0
+    },
     id: { type: String, default: void 0 },
     color: {
       type: String,
       default: "primary"
     },
+    value: { type: [String, Number, Boolean], default: void 0 },
     name: { type: String, default: "m-checkbox" },
     size: { type: String, default: "md" },
     disabled: { type: Boolean, default: false }
@@ -25,10 +29,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "2887ae19": checkIconColor.value,
-      "3ea743fb": checkboxSize.value,
-      "8729aa64": checkboxSelectedColor.value,
-      "324bb1de": checkboxBoxShadow.value
+      "40cdf8ce": checkIconColor.value,
+      "25e00d0a": checkboxSize.value,
+      "5692b564": checkboxSelectedColor.value,
+      "9df23cde": checkboxBoxShadow.value
     }));
     const instance = getCurrentInstance();
     const props = __props;
@@ -38,6 +42,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       instance,
       providedId: props.id
     });
+    const isChecked = computed(
+      () => typeof props.value !== "boolean" && Array.isArray(props.modelValue) ? props.modelValue.includes(props.value) : typeof props.modelValue === "boolean" ? props.modelValue : false
+    );
     const checkboxSize = computed(() => {
       switch (props.size) {
         case "xl": {
@@ -88,14 +95,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => ["black", "transparent"].includes(props.color) ? `var(--maz-color-muted)` : `var(--maz-color-${props.color}-alpha)`
     );
     function keyboardHandler(event) {
-      if (["Enter", "Space"].includes(event.code)) {
+      if (["Space"].includes(event.code)) {
         event.preventDefault();
-        emitValue(!props.modelValue);
+        emitValue(props.value ?? !props.modelValue);
+      }
+    }
+    function getNewValue(value) {
+      if (typeof value === "boolean" && (typeof props.modelValue === "boolean" || props.modelValue === void 0 || props.modelValue === null)) {
+        return props.modelValue ? false : true;
+      } else if (Array.isArray(props.modelValue) && typeof value !== "boolean") {
+        return props.modelValue.includes(value) ? props.modelValue.filter((v) => v !== value) : [...props.modelValue, value];
+      } else {
+        return [value];
       }
     }
     function emitValue(value) {
-      emits("update:model-value", value);
-      emits("change", value);
+      const newValue = getNewValue(value);
+      emits("update:model-value", newValue);
+      emits("change", newValue);
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
@@ -103,44 +120,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["m-checkbox", { "--disabled": __props.disabled }]),
         tabindex: "0",
         role: "checkbox",
-        "aria-checked": __props.modelValue,
+        "aria-checked": isChecked.value,
         onKeydown: keyboardHandler
       }, [
         createElementVNode("input", mergeProps({
           id: unref(instanceId),
-          checked: __props.modelValue
+          checked: isChecked.value
         }, _ctx.$attrs, {
+          tabindex: "-1",
           disabled: __props.disabled,
           name: __props.name,
           type: "checkbox",
           onChange: _cache[0] || (_cache[0] = ($event) => {
             var _a;
-            return emitValue((_a = $event == null ? void 0 : $event.target) == null ? void 0 : _a.checked);
+            return emitValue(__props.value ?? ((_a = $event == null ? void 0 : $event.target) == null ? void 0 : _a.checked));
           })
         }), null, 16, _hoisted_2),
         createElementVNode("span", null, [
-          createVNode(Transition, {
-            name: "maz-scale",
-            persisted: ""
-          }, {
-            default: withCtx(() => [
-              withDirectives(createVNode(unref(CheckIcon), {
-                class: normalizeClass(["check-icon", checkIconSize.value])
-              }, null, 8, ["class"]), [
-                [vShow, __props.modelValue]
-              ])
-            ]),
-            _: 1
-            /* STABLE */
-          })
+          createVNode(unref(CheckIcon), {
+            class: normalizeClass(["check-icon", checkIconSize.value])
+          }, null, 8, ["class"])
         ]),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ], 42, _hoisted_1);
     };
   }
 });
-const MazCheckbox_vue_vue_type_style_index_0_scoped_e6c359ea_lang = "";
-const MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6c359ea"]]);
+const MazCheckbox_vue_vue_type_style_index_0_scoped_141a5e53_lang = "";
+const MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-141a5e53"]]);
 export {
   MazCheckbox as default
 };

package/components/chunks/{MazCheckbox-b8974a89.mjs → MazCheckbox-90f20e7f.mjs}

@@ -1,18 +1,22 @@
 import "../assets/MazCheckbox.css";
-import { defineComponent, useCssVars, getCurrentInstance, computed, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, mergeProps, createVNode, Transition, withCtx, withDirectives, vShow, renderSlot } from "vue";
-import { u as useInstanceUniqId, _ as _export_sfc } from "./MazSelect-4de4d975.mjs";
+import { defineComponent, useCssVars, getCurrentInstance, computed, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, mergeProps, createVNode, renderSlot } from "vue";
+import { u as useInstanceUniqId, _ as _export_sfc } from "./MazSelect-757bffd7.mjs";
 import CheckIcon from "./check-8da249b1.mjs";
 const _hoisted_1 = ["for", "aria-checked"];
 const _hoisted_2 = ["id", "checked", "disabled", "name"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazCheckbox",
   props: {
-    modelValue: { type: Boolean, required: true },
+    modelValue: {
+      type: [Boolean, Array],
+      default: void 0
+    },
     id: { type: String, default: void 0 },
     color: {
       type: String,
       default: "primary"
     },
+    value: { type: [String, Number, Boolean], default: void 0 },
     name: { type: String, default: "m-checkbox" },
     size: { type: String, default: "md" },
     disabled: { type: Boolean, default: false }
@@ -25,10 +29,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "2887ae19": checkIconColor.value,
-      "3ea743fb": checkboxSize.value,
-      "8729aa64": checkboxSelectedColor.value,
-      "324bb1de": checkboxBoxShadow.value
+      "40cdf8ce": checkIconColor.value,
+      "25e00d0a": checkboxSize.value,
+      "5692b564": checkboxSelectedColor.value,
+      "9df23cde": checkboxBoxShadow.value
     }));
     const instance = getCurrentInstance();
     const props = __props;
@@ -38,6 +42,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       instance,
       providedId: props.id
     });
+    const isChecked = computed(
+      () => typeof props.value !== "boolean" && Array.isArray(props.modelValue) ? props.modelValue.includes(props.value) : typeof props.modelValue === "boolean" ? props.modelValue : false
+    );
     const checkboxSize = computed(() => {
       switch (props.size) {
         case "xl": {
@@ -88,14 +95,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => ["black", "transparent"].includes(props.color) ? `var(--maz-color-muted)` : `var(--maz-color-${props.color}-alpha)`
     );
     function keyboardHandler(event) {
-      if (["Enter", "Space"].includes(event.code)) {
+      if (["Space"].includes(event.code)) {
         event.preventDefault();
-        emitValue(!props.modelValue);
+        emitValue(props.value ?? !props.modelValue);
+      }
+    }
+    function getNewValue(value) {
+      if (typeof value === "boolean" && (typeof props.modelValue === "boolean" || props.modelValue === void 0 || props.modelValue === null)) {
+        return props.modelValue ? false : true;
+      } else if (Array.isArray(props.modelValue) && typeof value !== "boolean") {
+        return props.modelValue.includes(value) ? props.modelValue.filter((v) => v !== value) : [...props.modelValue, value];
+      } else {
+        return [value];
       }
     }
     function emitValue(value) {
-      emits("update:model-value", value);
-      emits("change", value);
+      const newValue = getNewValue(value);
+      emits("update:model-value", newValue);
+      emits("change", newValue);
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
@@ -103,44 +120,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["m-checkbox", { "--disabled": __props.disabled }]),
         tabindex: "0",
         role: "checkbox",
-        "aria-checked": __props.modelValue,
+        "aria-checked": isChecked.value,
         onKeydown: keyboardHandler
       }, [
         createElementVNode("input", mergeProps({
           id: unref(instanceId),
-          checked: __props.modelValue
+          checked: isChecked.value
         }, _ctx.$attrs, {
+          tabindex: "-1",
           disabled: __props.disabled,
           name: __props.name,
           type: "checkbox",
           onChange: _cache[0] || (_cache[0] = ($event) => {
             var _a;
-            return emitValue((_a = $event == null ? void 0 : $event.target) == null ? void 0 : _a.checked);
+            return emitValue(__props.value ?? ((_a = $event == null ? void 0 : $event.target) == null ? void 0 : _a.checked));
           })
         }), null, 16, _hoisted_2),
         createElementVNode("span", null, [
-          createVNode(Transition, {
-            name: "maz-scale",
-            persisted: ""
-          }, {
-            default: withCtx(() => [
-              withDirectives(createVNode(unref(CheckIcon), {
-                class: normalizeClass(["check-icon", checkIconSize.value])
-              }, null, 8, ["class"]), [
-                [vShow, __props.modelValue]
-              ])
-            ]),
-            _: 1
-            /* STABLE */
-          })
+          createVNode(unref(CheckIcon), {
+            class: normalizeClass(["check-icon", checkIconSize.value])
+          }, null, 8, ["class"])
         ]),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ], 42, _hoisted_1);
     };
   }
 });
-const MazCheckbox_vue_vue_type_style_index_0_scoped_e6c359ea_lang = "";
-const MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6c359ea"]]);
+const MazCheckbox_vue_vue_type_style_index_0_scoped_141a5e53_lang = "";
+const MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-141a5e53"]]);
 export {
   MazCheckbox as default
 };

package/components/chunks/{MazPhoneNumberInput-d90953ab.mjs → MazPhoneNumberInput-4cec4ade.mjs}

@@ -190,7 +190,7 @@ function debounce(fn, delay) {
     }, delay);
   };
 }
-const MazBtn = defineAsyncComponent(() => import("./MazBtn-2a8cee98.mjs"));
+const MazBtn = defineAsyncComponent(() => import("./MazBtn-97d9e521.mjs"));
 const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
 const EyeOffIcon = defineAsyncComponent(() => import("./eye-slash-342420ff.mjs"));
 const EyeIcon = defineAsyncComponent(() => import("./eye-fbb13657.mjs"));
@@ -611,7 +611,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       "c012bde4": selectedTextColor.value,
       "46d74214": selectedBgColor.value
     }));
-    const MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox-b445b9b2.mjs"));
+    const MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox-0595c207.mjs"));
     const SearchIcon = defineAsyncComponent(() => import("./magnifying-glass-5dffa35e.mjs"));
     const ChevronDownIcon = defineAsyncComponent(() => import("./chevron-down-a78b9604.mjs"));
     const NoSymbolIcon = defineAsyncComponent(() => import("./no-symbol-975ce547.mjs"));

package/components/chunks/{MazSelect-4de4d975.mjs → MazSelect-757bffd7.mjs}

@@ -16,7 +16,7 @@ const useInstanceUniqId = ({
 }) => {
   return computed(() => providedId ?? `${componentName}-${instance == null ? void 0 : instance.uid}`);
 };
-const MazBtn = defineAsyncComponent(() => import("./MazBtn-704bd37b.mjs"));
+const MazBtn = defineAsyncComponent(() => import("./MazBtn-001d4174.mjs"));
 const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
 const EyeOffIcon = defineAsyncComponent(() => import("./eye-slash-342420ff.mjs"));
 const EyeIcon = defineAsyncComponent(() => import("./eye-fbb13657.mjs"));
@@ -437,7 +437,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "c012bde4": selectedTextColor.value,
       "46d74214": selectedBgColor.value
     }));
-    const MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox-b8974a89.mjs"));
+    const MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox-90f20e7f.mjs"));
     const SearchIcon = defineAsyncComponent(() => import("./magnifying-glass-5dffa35e.mjs"));
     const ChevronDownIcon = defineAsyncComponent(() => import("./chevron-down-a78b9604.mjs"));
     const NoSymbolIcon = defineAsyncComponent(() => import("./no-symbol-975ce547.mjs"));

package/components/chunks/{MazSpinner-8700b7eb.mjs → MazSpinner-7bd9b831.mjs}

@@ -1,6 +1,6 @@
 import "../assets/MazSpinner.css";
 import { defineComponent, openBlock, createElementBlock, normalizeClass, pushScopeId, popScopeId, createElementVNode } from "vue";
-import { _ as _export_sfc } from "./MazSelect-4de4d975.mjs";
+import { _ as _export_sfc } from "./MazSelect-757bffd7.mjs";
 const _withScopeId = (n) => (pushScopeId("data-v-c67298ec"), n = n(), popScopeId(), n);
 const _hoisted_1 = ["width", "height"];
 const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode(

package/components/chunks/{MazSpinner-76e79a34.mjs → MazSpinner-ac429216.mjs}

@@ -1,6 +1,6 @@
 import "../assets/MazSpinner.css";
 import { defineComponent, openBlock, createElementBlock, normalizeClass, pushScopeId, popScopeId, createElementVNode } from "vue";
-import { _ as _export_sfc } from "./MazPhoneNumberInput-d90953ab.mjs";
+import { _ as _export_sfc } from "./MazPhoneNumberInput-4cec4ade.mjs";
 const _withScopeId = (n) => (pushScopeId("data-v-c67298ec"), n = n(), popScopeId(), n);
 const _hoisted_1 = ["width", "height"];
 const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode(

package/components/index.d.ts

@@ -22,6 +22,7 @@ export { default as MazInputTags } from './MazInputTags.js';
 export { default as MazLazyImg } from './MazLazyImg.js';
 export { default as MazPhoneNumberInput } from './MazPhoneNumberInput.js';
 export { default as MazPicker } from './MazPicker.js';
+export { default as MazRadio } from './MazRadio.js';
 export { default as MazRadioButtons } from './MazRadioButtons.js';
 export { default as MazSelect } from './MazSelect.js';
 export { default as MazSlider } from './MazSlider.js';

package/components/index.mjs

@@ -24,6 +24,7 @@ export { default as MazInputTags } from './MazInputTags.mjs'
 export { default as MazLazyImg } from './MazLazyImg.mjs'
 export { default as MazPhoneNumberInput } from './MazPhoneNumberInput.mjs'
 export { default as MazPicker } from './MazPicker.mjs'
+export { default as MazRadio } from './MazRadio.mjs'
 export { default as MazRadioButtons } from './MazRadioButtons.mjs'
 export { default as MazSelect } from './MazSelect.mjs'
 export { default as MazSlider } from './MazSlider.mjs'

package/nuxt/index.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "3.21.5"
+  "version": "3.22.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maz-ui",
-  "version": "3.21.5",
+  "version": "3.22.0",
   "description": "A standalone components library for Vue.Js 3 & Nuxt.Js 3",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "main": "./modules/index.mjs",

package/types/components/MazCheckbox.vue.d.ts

@@ -3,8 +3,8 @@ import type { Color, Size } from './types';
 export type { Color, Size };
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
-        type: BooleanConstructor;
-        required: true;
+        type: PropType<boolean | (string | number)[]>;
+        default: undefined;
     };
     id: {
         type: StringConstructor;
@@ -14,6 +14,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<Color>;
         default: string;
     };
+    value: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     name: {
         type: StringConstructor;
         default: string;
@@ -31,8 +35,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "update:model-value": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: BooleanConstructor;
-        required: true;
+        type: PropType<boolean | (string | number)[]>;
+        default: undefined;
     };
     id: {
         type: StringConstructor;
@@ -42,6 +46,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<Color>;
         default: string;
     };
+    value: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     name: {
         type: StringConstructor;
         default: string;
@@ -62,7 +70,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     color: Color;
     disabled: boolean;
     name: string;
+    value: string | number | boolean;
     id: string;
+    modelValue: boolean | (string | number)[];
 }, {}>, {
     default?(_: {}): any;
 }>;

package/types/components/MazRadio.vue.d.ts

@@ -0,0 +1,82 @@
+import { type PropType } from 'vue';
+import type { Color, Size } from './types';
+export type { Color, Size };
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    color: {
+        type: PropType<Color>;
+        default: string;
+    };
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    "update:model-value": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    color: {
+        type: PropType<Color>;
+        default: string;
+    };
+    size: {
+        type: PropType<Size>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
+}, {
+    size: Size;
+    color: Color;
+    disabled: boolean;
+    id: string;
+    modelValue: string;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/components/index.d.ts

@@ -22,6 +22,7 @@ export { default as MazInputTags } from './MazInputTags.vue';
 export { default as MazLazyImg } from './MazLazyImg.vue';
 export { default as MazPhoneNumberInput } from './MazPhoneNumberInput.vue';
 export { default as MazPicker } from './MazPicker.vue';
+export { default as MazRadio } from './MazRadio.vue';
 export { default as MazRadioButtons } from './MazRadioButtons.vue';
 export { default as MazSelect } from './MazSelect.vue';
 export { default as MazSlider } from './MazSlider.vue';