@teammodlr/ui-kit 1.0.2

package/lib/install.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install: (app: import("vue").App<any>, installOptions?: import("./create").ModlrUIOptions) => void;
+};
+export default _default;

package/lib/nuxt.js

@@ -0,0 +1,33 @@
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtModule({
+    meta: {
+        name: '@teammodlr/ui-kit',
+        configKey: 'modlr',
+        compatibility: {
+            nuxt: '^3.0.0-rc.1',
+        },
+    },
+    defaults: {
+        prefix: 'M',
+    },
+    async setup(options, nuxt) {
+        // Create resolver to resolve relative paths
+        const { resolve } = createResolver(import.meta.url)
+
+        nuxt.options.runtimeConfig.public.modlrUiOptions = options
+
+        // plugin install
+        addPlugin(resolve('./nuxt.plugin.js'))
+
+        // nuxt install
+        nuxt.hook('components:dirs', (dirs) => {
+            dirs.push({
+                path: fileURLToPath(new URL('../src/components', import.meta.url)),
+                extensions: ['vue', 'tsx'],
+                prefix: options?.prefix ? options?.prefix : 'M',
+            })
+        })
+    },
+})

package/lib/nuxt.plugin.js

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app'
+import create from '../src/create'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    const UI = create(nuxtApp.$config.modlrUiOptions)
+
+    nuxtApp.vueApp.use(UI)
+})

package/lib/style.css

@@ -0,0 +1 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--font-size: 14px;--font-color: #333;--font-family: "Inter", sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--white: #FFF;--black: #000;--blue: hsl(212, 92%, 53%);--blue-outline: hsla(212, 92%, 53%, .4);--blue-hover: hsl(212, 97%, 58%);--blue-focus: hsl(212, 97%, 45%);--blue-light: hsl(212, 92%, 51%);--blue-lighter: hsl(212, 92%, 58%);--blue-dark: hsl(212, 92%, 37%);--blue-darker: hsl(212, 92%, 27%);--blue-secondary: hsl(212, 89%, 93%);--blue-secondary-hover: hsl(212, 97%, 90%);--blue-secondary-focus: hsl(212, 97%, 88%);--green: hsl(148, 74%, 36%);--green-outline: hsla(148, 74%, 36%, .4);--green-hover: hsl(148, 52%, 45%);--green-focus: hsl(148, 52%, 37%);--green-light: hsl(148, 92%, 51%);--green-lighter: hsl(148, 92%, 58%);--green-dark: hsl(148, 92%, 29%);--green-darker: hsl(148, 92%, 25%);--green-secondary: hsl(148, 42%, 90%);--green-secondary-hover: hsl(148, 42%, 86%);--green-secondary-focus: hsl(148, 42%, 82%);--red: hsl(348, 63%, 50%);--red-outline: hsla(348, 63%, 50%, 4);--red-hover: hsl(348, 68%, 56%);--red-focus: hsl(348, 68%, 46%);--red-light: hsl(348, 64%, 50%);--red-lighter: hsl(348, 63%, 58%);--red-dark: hsl(348, 63%, 46%);--red-darker: hsl(348, 63%, 40%);--red-secondary: hsl(348, 61%, 92%);--red-secondary-hover: hsl(348, 61%, 89%);--red-secondary-focus: hsl(348, 61%, 85%);--yellow: hsl(37, 87%, 53%);--yellow-outline: hsla(37, 87%, 53%, .4);--yellow-hover: hsl(37, 87%, 59%);--yellow-focus: hsl(37, 87%, 48%);--yellow-light: hsl(37, 64%, 52%);--yellow-lighter: hsl(37, 63%, 60%);--yellow-dark: hsl(37, 63%, 48%);--yellow-darker: hsl(37, 63%, 42%);--yellow-secondary: hsl(37, 61%, 92%);--yellow-secondary-hover: hsl(37, 61%, 87%);--yellow-secondary-focus: hsl(37, 61%, 85%);--gray-50: #fafaf9;--gray-100: #f5f5f4;--gray-150: #eeeeee;--gray-200: #e7e5e4;--gray-300: #d6d3d1;--gray-400: #bdbab8;--gray-500: #78716c;--gray-600: #57534e;--gray-700: #44403c;--gray-800: #292524;--gray-900: #1c1917;--shadow: 0px 4px 10px 1px rgb(154 161 171 / 20%)}html,body{height:100%;font-family:var(--font-family)}*{box-sizing:border-box}.m-transition__fade-enter-active,.m-transition__fade-leave-active{transition:opacity .25s ease}.m-transition__fade-enter-from,.m-transition__fade-leave-to{opacity:0}.m-transition__scale-enter-active{animation:scale-in .125s}.m-transition__scale-leave-active{animation:scale-in .125s reverse}@keyframes scale-in{0%{transform:scale(0);opacity:0}25%{opacity:0}50%{opacity:.5}75%{transform:scale(1)}to{opacity:1}}.m-button{--button-height: 36px;--button-padding: 0 15px;--button-font-size: 15px;--button-border-radius: 4px;--button-font-weight: 500;--button-border-color: var(--gray-200);margin:0;white-space:nowrap;outline:none;border:1px solid var(--button-border-color);background-color:transparent;z-index:auto;padding:var(--button-padding);font-size:var(--button-font-size);font-weight:var(--button-font-weight);font-family:inherit;color:var(--gray-600);position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;text-align:center;cursor:pointer;height:var(--button-height);line-height:1;border-radius:var(--button-border-radius);text-decoration:none;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1)}.m-button__content{display:flex;align-items:center;flex-wrap:nowrap;min-width:0px}.m-button.m-button--strong{font-weight:500}.m-button--block{display:flex}.m-button.m-button--icon-left .m-button__content{padding-left:8px}.m-button.m-button--icon-right .m-button__content{padding-right:8px}.m-button:not(.m-button--disabled):hover{color:var(--blue);--button-border-color: var(--blue)}.m-button:not(.m-button--disabled):focus,.m-button:not(.m-button--disabled):active{color:var(--blue-dark);--button-border-color: var(--blue-dark)}.m-button.m-button--secondary{color:var(--gray-500);--button-border-color: var(--white);background-color:var(--white)}.m-button:not(.m-button--disabled).m-button--secondary:hover{color:var(--gray-600);--button-border-color: var(--gray-150);background-color:var(--gray-150)}.m-button:not(.m-button--disabled).m-button--secondary:active,.m-button:not(.m-button--disabled).m-button--secondary:focus{color:var(--gray-600);--button-border-color: var(--gray-200);background-color:var(--gray-200)}.m-button.m-button--gray.m-button--secondary{color:var(--gray-600);--button-border-color: var(--gray-100);background-color:var(--gray-100)}.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:hover{color:var(--gray-600);--button-border-color: var(--gray-150);background-color:var(--gray-150)}.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:active,.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:focus{color:var(--gray-600);--button-border-color: var(--gray-200);background-color:var(--gray-200)}.m-button--blue{color:var(--white);--button-border-color: var(--blue);background-color:var(--blue)}.m-button--blue:not(.m-button--disabled):hover{color:var(--white);--button-border-color: var(--blue-hover);background-color:var(--blue-hover)}.m-button--blue:not(.m-button--disabled):active,.m-button--blue:not(.m-button--disabled):focus{color:var(--white);--button-border-color: var(--blue-focus);background-color:var(--blue-focus)}.m-button--blue.m-button--secondary{color:var(--blue-dark);--button-border-color: var(--blue-secondary);background-color:var(--blue-secondary)}.m-button--blue.m-button--secondary:not(.m-button--disabled):hover{color:var(--blue-darker);--button-border-color: var(--blue-secondary-hover);background-color:var(--blue-secondary-hover)}.m-button--blue.m-button--secondary:not(.m-button--disabled):active,.m-button--blue.m-button--secondary:not(.m-button--disabled):focus{color:var(--blue-darker);--button-border-color: var(--blue-secondary-focus);background-color:var(--blue-secondary-focus)}.m-button--green{color:var(--white);--button-border-color: var(--green);background-color:var(--green)}.m-button--green:not(.m-button--disabled):hover{color:var(--white);--button-border-color: var(--green-hover);background-color:var(--green-hover)}.m-button--green:not(.m-button--disabled):focus,.m-button--green:not(.m-button--disabled):active{color:var(--white);--button-border-color: var(--green-focus);background-color:var(--green-focus)}.m-button--green.m-button--secondary{color:var(--green-dark);--button-border-color: var(--green-secondary);background-color:var(--green-secondary)}.m-button--green.m-button--secondary:not(.m-button--disabled):hover{color:var(--green-darker);--button-border-color: var(--green-secondary-hover);background-color:var(--green-secondary-hover)}.m-button--green.m-button--secondary:not(.m-button--disabled):focus,.m-button--green.m-button--secondary:not(.m-button--disabled):active{color:var(--green-darker);--button-border-color: var(--green-secondary-focus);background-color:var(--green-secondary-focus)}.m-button--red{color:var(--white);--button-border-color: var(--red);background-color:var(--red)}.m-button--red:not(.m-button--disabled):hover{color:var(--white);--button-border-color: var(--red-hover);background-color:var(--red-hover)}.m-button--red:not(.m-button--disabled):focus,.m-button--red:not(.m-button--disabled):active{color:var(--white);--button-border-color: var(--red-focus);background-color:var(--red-focus)}.m-button--red.m-button--secondary{color:var(--red-dark);--button-border-color: var(--red-secondary);background-color:var(--red-secondary)}.m-button--red.m-button--secondary:not(.m-button--disabled):hover{color:var(--red-darker);--button-border-color: var(--red-secondary-hover);background-color:var(--red-secondary-hover)}.m-button--red.m-button--secondary:not(.m-button--disabled):active,.m-button--red.m-button--secondary:not(.m-button--disabled):focus{color:var(--red-darker);--button-border-color: var(--red-secondary-focus);background-color:var(--red-secondary-focus)}.m-button--yellow{color:var(--white);--button-border-color: var(--yellow);background-color:var(--yellow)}.m-button--yellow:not(.m-button--disabled):hover{color:var(--white);--button-border-color: var(--yellow-hover);background-color:var(--yellow-hover)}.m-button--yellow:not(.m-button--disabled):focus,.m-button--yellow:not(.m-button--disabled):active{color:var(--white);--button-border-color: var(--yellow-focus);background-color:var(--yellow-focus)}.m-button--yellow.m-button--secondary{color:var(--yellow-dark);--button-border-color: var(--yellow-secondary);background-color:var(--yellow-secondary)}.m-button--yellow.m-button--secondary:not(.m-button--disabled):hover{color:var(--yellow-darker);--button-border-color: var(--yellow-secondary-hover);background-color:var(--yellow-secondary-hover)}.m-button--yellow.m-button--secondary:not(.m-button--disabled):active,.m-button--yellow.m-button--secondary:not(.m-button--disabled):focus{color:var(--yellow-darker);--button-border-color: var(--yellow-secondary-focus);background-color:var(--yellow-secondary-focus)}.m-button--xs{--button-height: 22px;--button-padding: 0 6px;--button-font-size: 14px}.m-button--sm{--button-height: 28px;--button-padding: 0 10px;--button-font-size: 14px}.m-button--lg{--button-height: 40px;--button-padding: 0 18px;--button-font-size: 18px}.m-button--xl{--button-height: 44px;--button-padding: 0 22px;--button-font-size: 20px}.m-button--rounded{border-radius:34px}.m-button--rounded.m-button--xs{padding:0 10px}.m-button--rounded.m-button--sm{padding:0 14px}.m-button--rounded.m-button--md{padding:0 18px}.m-button--rounded.m-button--lg{padding:0 22px}.m-button--rounded.m-button--xl{padding:0 26px}.m-button--disabled{opacity:.8;cursor:not-allowed;user-select:none}.m-button-group{display:inline-flex;vertical-align:middle;position:relative}.m-button-group .m-button:first-child{border-top-left-radius:var(--button-border-radius);border-bottom-left-radius:var(--button-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.m-button-group .m-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--button-border-radius);border-bottom-right-radius:var(--button-border-radius)}.m-button-group .m-button{border-radius:0}.m-button-group .m-button:not(:first-child){border-left:none}.m-button-group .m-button:not(:first-child):after{content:"";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:transparent;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1)}.m-button-group .m-button:hover:not(:first-child):after{background-color:var(--button-border-color)}.m-button-group--block>.m-button{flex-basis:100%}.m-button-group--block{display:flex}.m-input__container{position:relative;display:flex;flex-direction:column;width:100%}.m-input{--input-height: 40px;--input-padding: 0 8px;--input-font-size: 15px;--input-border-radius: 4px;--input-clear-size: 1.2rem;--input-background-color: var(--white);--input-border-color: var(--gray-200);position:relative;display:inline-flex;align-items:center;height:var(--input-height);font-size:var(--input-font-size);background-color:var(--input-background-color);border:1px solid var(--input-border-color);box-shadow:none;border-radius:var(--input-border-radius);outline:0;cursor:text;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.m-input.m-input--disabled{--input-border-color: var(--gray-300);--input-background-color: var(--gray-100);opacity:.6;cursor:not-allowed}.m-input.m-input--disabled input{cursor:not-allowed}.m-input:not(.m-input--disabled):focus-within{--input-border-color: var(--blue);box-shadow:0 0 0 2px var(--blue-outline)}.m-input:not(.m-input--disabled):not(:focus-within):hover{--input-border-color: var(--gray-400)}.m-input input{flex:1 0 0;min-width:0;height:100%;padding:var(--input-padding);font-size:inherit;color:var(--gray-600);background-color:transparent;border:0;outline:0;border-radius:var(--input-border-radius)}.m-input__clearable{display:flex;align-items:center;justify-content:center;padding:0 6px}.m-input .m-input__clearable i.m-icon--close{cursor:pointer;width:var(--input-clear-size);height:var(--input-clear-size);display:flex;align-items:center;justify-content:center;border-radius:100%;color:var(--gray-500);background-color:transparent;transition:background-color .125s cubic-bezier(.4,0,.2,1)}.m-input .m-input__clearable i.m-icon--close:hover{color:var(--gray-500);background-color:var(--gray-150)}.m-input i.m-icon--close:before{--close-icon-size: 16px;background-color:currentColor;content:"";width:var(--close-icon-size);height:var(--close-icon-size);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--close-icon-size) var(--close-icon-size);mask-size:var(--close-icon-size) var(--close-icon-size)}.m-input--xs{--input-height: 32px;--input-padding: 0 8px;--input-font-size: 13px;--input-border-radius: 4px;--input-clear-size: 1.2rem}.m-input--sm{--input-height: 36px;--input-padding: 0 8px;--input-font-size: 14px;--input-border-radius: 4px;--input-clear-size: 1.2rem}.m-input--md{--input-height: 40px;--input-padding: 0 8px;--input-font-size: 15px;--input-border-radius: 4px;--input-clear-size: 1.2rem}.m-input--lg{--input-height: 42px;--input-padding: 0 8px;--input-font-size: 16px;--input-border-radius: 4px;--input-clear-size: 1.2rem}.m-input--xl{--input-height: 46px;--input-padding: 0 8px;--input-font-size: 18px;--input-border-radius: 6px;--input-clear-size: 1.2rem}.m-input__label{margin-bottom:5px;color:var(--gray-600);font-size:15px;font-weight:600}.m-input__help{margin-top:4px;color:var(--gray-500);font-size:15px;font-weight:400}.m-input__error{margin:4px 0 8px;color:var(--red);font-size:15px;font-weight:400}.m-form .m-form__input{margin-bottom:16px}.m-form .m-form__input .m-input__error{margin:4px 0 0}.m-select__container{position:relative;display:flex;flex-direction:column;width:100%}.m-select__container:focus{outline:none}.m-select{--select-height: 40px;--select-padding: 0 8px;--select-font-size: 15px;--select-border-radius: 4px;--select-clear-size: 1.2rem;--select-background-color: var(--white);--select-border-color: var(--gray-200);position:relative;display:inline-flex;align-items:center;height:var(--select-height);font-size:var(--select-font-size);background-color:var(--select-background-color);border:1px solid var(--select-border-color);box-shadow:none;border-radius:var(--select-border-radius);outline:0;cursor:text;width:100%;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.m-select:not(.m-select--disabled):not(.m-select--focused):hover{--select-border-color: var(--gray-400)}.m-select:not(.m-select--disabled):focus,.m-select:not(.m-select--disabled):focus-within,.m-select:not(.m-select--disabled).m-select--focused{--select-border-color: var(--blue);box-shadow:0 0 0 2px var(--blue-outline);outline:none}.m-select.m-select--disabled{--select-border-color: var(--gray-300);--select-background-color: var(--gray-100);opacity:.6;cursor:not-allowed}.m-select__clearable{display:flex;align-items:center;justify-content:center;padding:0 6px}.m-select .m-select__clearable i.m-icon--close{cursor:pointer;width:var(--select-clear-size);height:var(--select-clear-size);display:flex;align-items:center;justify-content:center;border-radius:100%;color:var(--gray-500);background-color:transparent;transition:background-color .125s cubic-bezier(.4,0,.2,1)}.m-select .m-select__clearable i.m-icon--close:hover{color:var(--gray-500);background-color:var(--gray-150)}.m-select i.m-icon--close:before{--close-icon-size: 16px;background-color:currentColor;content:"";width:var(--close-icon-size);height:var(--close-icon-size);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--close-icon-size) var(--close-icon-size);mask-size:var(--close-icon-size) var(--close-icon-size)}.m-select--xs{--select-height: 32px;--select-padding: 0 8px;--select-font-size: 13px;--select-border-radius: 4px;--select-clear-size: 1.2rem}.m-select--sm{--select-height: 36px;--select-padding: 0 8px;--select-font-size: 14px;--select-border-radius: 4px;--select-clear-size: 1.2rem}.m-select--md{--select-height: 40px;--select-padding: 0 8px;--select-font-size: 15px;--select-border-radius: 4px;--select-clear-size: 1.2rem}.m-select--lg{--select-height: 42px;--select-padding: 0 8px;--select-font-size: 16px;--select-border-radius: 4px;--select-clear-size: 1.2rem}.m-select--xl{--select-height: 46px;--select-padding: 0 8px;--select-font-size: 18px;--select-border-radius: 6px;--select-clear-size: 1.2rem}.m-select__label{margin-bottom:5px;color:var(--gray-600);font-size:15px;font-weight:600}.m-select__input{padding:var(--select-padding);font-size:15px;color:var(--gray-600)}.m-select__help{margin-top:4px;color:var(--gray-500);font-size:15px;font-weight:400}.m-select__error{margin:4px 0 8px;color:var(--red);font-size:15px;font-weight:400}.m-form .m-select__form{margin-bottom:16px}.m-form .m-select__form .m-select__error{margin:4px 0 0}.m-select__dropdown{z-index:100;max-height:400px;min-width:200px;overflow-y:auto;border-radius:4px;background-color:var(--white);box-shadow:0 0 0 1px var(--gray-200),0 4px 8px #0000001a;display:flex;flex-direction:column}.m-select__dropdown[data-popper-placement^=bottom-]{margin-top:5px!important}.m-select__dropdown[data-popper-placement^=top-]{margin-bottom:5px!important}.m-select__search{position:sticky;top:0;z-index:1;background-color:var(--white);padding:6px 6px 0}.m-select__options{padding:4px 0}.m-select__option{display:flex;align-items:center;justify-content:space-between;padding:8px;margin:0 4px;font-size:15px;color:var(--gray-600);cursor:pointer;transition:background-color .125s cubic-bezier(.4,0,.2,1);border-radius:4px}.m-select__option--selected{color:var(--blue)!important}.m-select__option--focused{background-color:var(--gray-100)}.m-select__placeholder-text{color:var(--gray-500)}.m-checkbox{--checkbox-width: 22px;--checkbox-height: 22px;--checkbox-border-radius: 6px;--checkbox-border-width: 1px;--checkbox-background-color: var(--white);--checkbox-border-color: var(--gray-300);--checkbox-gap: 6px;--checkbox-tick-width: 4px;--checkbox-tick-height: 10px;--checkbox-tick-height-negative: -10px;--checkbox-tick-top: 8px;--checkbox-tick-left: 3px;--checkbox-tick-border-width: 3px;display:flex;align-items:center;position:relative;font-weight:700;cursor:pointer;gap:var(--checkbox-gap)}.m-checkbox.m-checkbox--xs{--checkbox-width: 16px;--checkbox-height: 16px;--checkbox-border-radius: 4px;--checkbox-border-width: 1px;--checkbox-tick-top: 6px;--checkbox-tick-left: 1px;--checkbox-tick-width: 3px;--checkbox-tick-height: 8px;--checkbox-tick-height-negative: -8px}.m-checkbox.m-checkbox--sm{--checkbox-width: 20px;--checkbox-height: 20px;--checkbox-border-radius: 4px;--checkbox-border-width: 1px;--checkbox-tick-top: 7px;--checkbox-tick-left: 2px}.m-checkbox.m-checkbox--lg{--checkbox-width: 26px;--checkbox-height: 26px;--checkbox-border-radius: 8px;--checkbox-border-width: 1px;--checkbox-tick-top: 10px;--checkbox-tick-left: 3px;--checkbox-tick-border-width: 4px;--checkbox-tick-width: 4px;--checkbox-tick-height: 14px;--checkbox-tick-height-negative: -14px}.m-checkbox.m-checkbox--xl{--checkbox-width: 32px;--checkbox-height: 32px;--checkbox-border-radius: 8px;--checkbox-border-width: 1px;--checkbox-tick-top: 14px;--checkbox-tick-left: 5px;--checkbox-tick-border-width: 4px;--checkbox-tick-width: 5px;--checkbox-tick-height: 16px;--checkbox-tick-height-negative: -16px}.m-checkbox.m-checkbox--blue.m-checkbox--checked{--checkbox-background-color: var(--blue);--checkbox-border-color: var(--blue)}.m-checkbox.m-checkbox--green.m-checkbox--checked{--checkbox-background-color: var(--green);--checkbox-border-color: var(--green)}.m-checkbox.m-checkbox--red.m-checkbox--checked{--checkbox-background-color: var(--red);--checkbox-border-color: var(--red)}.m-checkbox.m-checkbox--yellow.m-checkbox--checked{--checkbox-background-color: var(--yellow);--checkbox-border-color: var(--yellow)}.m-checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0;display:none}.m-checkbox span{display:flex;height:var(--checkbox-height);width:var(--checkbox-width);border-radius:var(--checkbox-border-radius);border:var(--checkbox-border-width) solid var(--checkbox-border-color);background-color:var(--checkbox-background-color);transition:all 125ms cubic-bezier(.4,0,.2,1);position:relative}.m-checkbox:hover:not(.m-checkbox--checked):not(.m-checkbox--disabled) span{--checkbox-border-color: var(--gray-400);--checkbox-background-color: var(--gray-100)}.m-checkbox.m-checkbox--disabled span,.m-checkbox.m-checkbox--disabled .m-checkbox__label{cursor:not-allowed}.m-checkbox.m-checkbox--disabled span{opacity:.6}.m-checkbox:not(.m-checkbox--checked).m-checkbox--disabled span{--checkbox-border-color: var(--gray-300);--checkbox-background-color: var(--gray-100)}.m-checkbox.m-checkbox--checked span{background-color:var(--checkbox-background-color);border-color:var(--checkbox-background-color)}.m-checkbox.m-checkbox--checked span:before{content:"";position:absolute;transform:rotate(45deg);border-right:var(--checkbox-tick-border-width) solid transparent;border-bottom:var(--checkbox-tick-border-width) solid transparent;top:var(--checkbox-tick-top);left:var(--checkbox-tick-left);color:#fff;transform-origin:0% 100%;animation:draw-tick 125ms .17s cubic-bezier(.4,0,.2,1) forwards}.m-checkbox .m-checkbox__label{display:inline-block;vertical-align:middle;font-size:14px;line-height:24px;color:#000;font-weight:400;user-select:none}@keyframes draw-tick{0%{height:0px;width:0px;border-color:#fff;transform:translateZ(0) rotate(45deg)}25%{height:0px;width:var(--checkbox-tick-width);transform:translateZ(0) rotate(45deg)}to{border-color:#fff;height:var(--checkbox-tick-height);width:var(--checkbox-tick-width);transform:translate3d(0,var(--checkbox-tick-height-negative),0) rotate(45deg)}}.m-breadcrumbs{display:flex;list-style:none;margin:0;padding:4px;font-variant-numeric:tabular-nums;align-items:center;position:relative}.m-breadcrumbs__item:last-child .m-breadcrumbs__item-separator{display:none}.m-breadcrumbs__item{display:flex;align-items:center;outline:none;cursor:pointer;color:var(--gray-600)}.m-breadcrumbs__link{padding:4px 10px;font-size:14px;border-radius:4px;background-color:transparent;text-decoration:none;outline:none;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.m-breadcrumbs__link:hover{color:var(--blue-dark);background-color:var(--gray-100)}.m-breadcrumbs__item-separator{display:inline-flex;padding:0 6px;cursor:default;user-select:none;color:var(--gray-300)}.m-avatar{--avatar-height: 40px;--avatar-width: 40px;--avatar-font-size: 13px;--avatar-border-radius: 4px;width:var(--avatar-width);height:var(--avatar-height);font-size:var(--avatar-font-size);position:relative;display:inline-flex;background-color:var(--gray-200);color:var(--gray-400);overflow:hidden;white-space:nowrap;vertical-align:middle;justify-content:center;align-items:center;box-sizing:content-box;border-radius:var(--avatar-border-radius);font-weight:600;user-select:none}.m-avatar img{width:100%;height:100%}.m-avatar--circle{--avatar-border-radius: 50%}.m-avatar--rounded{--avatar-border-radius: 4px}.m-avatar--square{--avatar-border-radius: 0}.m-avatar--xs{--avatar-height: 24px;--avatar-width: 24px;--avatar-font-size: 11px}.m-avatar--sm{--avatar-height: 32px;--avatar-width: 32px;--avatar-font-size: 12px}.m-avatar--md{--avatar-height: 40px;--avatar-width: 40px;--avatar-font-size: 13px}.m-avatar--lg{--avatar-height: 48px;--avatar-width: 48px;--avatar-font-size: 16px}.m-avatar--xl{--avatar-height: 56px;--avatar-width: 56px;--avatar-font-size: 17px}.m-avatar-group .m-avatar:not(:last-child){margin-right:-10px}.m-avatar-group .m-avatar{border:2px solid var(--white)}.m-message-provider__container{z-index:5000;position:fixed;height:0;overflow:visible;display:flex;flex-direction:column;align-items:center}.m-message-provider__container--top{top:12px;left:0;right:0}.m-message__wrapper{margin:0 0 8px;z-index:0;transform-origin:top center;display:flex;align-items:center}.m-message{box-sizing:border-box;display:flex;align-items:center;padding:10px 20px;border-radius:3px;flex-wrap:nowrap;max-width:720px;color:var(--gray-700);background-color:var(--white);box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d}.m-skeleton{--skeleton-border-radius: 4px;--skeleton-height: 100%;--skeleton-width: 100%;position:relative;display:flex;background:linear-gradient(-90deg,var(--gray-100) 0%,var(--gray-200) 50%,var(--gray-100) 100%);background-size:400% 400%;overflow:hidden;white-space:nowrap;vertical-align:middle;justify-content:center;align-items:center;box-sizing:content-box;border-radius:var(--skeleton-border-radius);font-weight:600;user-select:none;width:var(--skeleton-width);height:var(--skeleton-height)}.m-skeleton--thumb{--skeleton-border-radius: 4px;--skeleton-height: 128px;--skeleton-width: 500px}.m-skeleton--heading{--skeleton-border-radius: 4px;--skeleton-height: 32px;--skeleton-width: 500px}.m-skeleton--line{--skeleton-border-radius: 4px;--skeleton-height: 20px;--skeleton-width: 500px}.m-skeleton--circle{--skeleton-border-radius: 50%;--skeleton-height: 40px;--skeleton-width: 40px}.m-skeleton--block{--skeleton-border-radius: 4px;--skeleton-height: 100%;--skeleton-width: 100%}.m-skeleton--pulse{animation:skeleton-pulse 1.5s ease-in-out infinite;-webkit-animation:skeleton-pulse 1.5s ease-in-out infinite}@keyframes skeleton-pulse{0%{background-position:0 0}to{background-position:-135% 0}}@-webkit-keyframes skeleton-pulse{0%{background-position:0 0}to{background-position:-135% 0}}.m-link{--link-color: var(--blue);--link-color-hover: var(--blue-hover);--link-color-focus: var(--blue-focus);--link-color-visited: var(--blue-focus);color:var(--link-color);text-decoration:none;transition:color .3s cubic-bezier(.4,0,.2,1)}.m-link--underline{text-decoration:underline}.m-link--block{display:flex}.m-link:visited{color:var(--link-color-visited)}.m-link:hover{color:var(--link-color-hover);text-decoration:underline}.m-link:focus,.m-link:active{color:var(--link-color-focus)}.m-link--blue,.m-link--blue:visited{--link-color: var(--blue);--link-color-hover: var(--blue-hover);--link-color-focus: var(--blue-focus);--link-color-visited: var(--blue-focus)}.m-link--blue:hover{--link-color: var(--blue-hover);--link-color-hover: var(--blue-hover);--link-color-focus: var(--blue-focus);--link-color-visited: var(--blue-focus)}.m-link--blue:focus,.m-link--blue:active{--link-color: var(--blue-focus);--link-color-hover: var(--blue-focus);--link-color-focus: var(--blue-focus);--link-color-visited: var(--blue-focus)}.m-link--green,.m-link--green:visited{--link-color: var(--green);--link-color-hover: var(--green-hover);--link-color-focus: var(--green-focus);--link-color-visited: var(--green-focus)}.m-link--green:hover{--link-color: var(--green-hover);--link-color-hover: var(--green-hover);--link-color-focus: var(--green-focus);--link-color-visited: var(--green-focus)}.m-link--green:focus,.m-link--green:active{--link-color: var(--green-focus);--link-color-hover: var(--green-focus);--link-color-focus: var(--green-focus);--link-color-visited: var(--green-focus)}.m-link--red,.m-link--red:visited{--link-color: var(--red);--link-color-hover: var(--red-hover);--link-color-focus: var(--red-focus);--link-color-visited: var(--red-focus)}.m-link--red:hover{--link-color: var(--red-hover);--link-color-hover: var(--red-hover);--link-color-focus: var(--red-focus);--link-color-visited: var(--red-focus)}.m-link--red:focus,.m-link--red:active{--link-color: var(--red-focus);--link-color-hover: var(--red-focus);--link-color-focus: var(--red-focus);--link-color-visited: var(--red-focus)}.m-link--yellow,.m-link--yellow:visited{--link-color: var(--yellow);--link-color-hover: var(--yellow-hover);--link-color-focus: var(--yellow-focus);--link-color-visited: var(--yellow-focus)}.m-link--yellow:hover{--link-color: var(--yellow-hover);--link-color-hover: var(--yellow-hover);--link-color-focus: var(--yellow-focus);--link-color-visited: var(--yellow-focus)}.m-link--yellow:focus,.m-link--yellow:active{--link-color: var(--yellow-focus);--link-color-hover: var(--yellow-focus);--link-color-focus: var(--yellow-focus);--link-color-visited: var(--yellow-focus)}.m-tooltip--wrapper{position:relative;display:inline-block;cursor:pointer}.m-tooltip{box-sizing:border-box}.m-tooltip.m-tooltip--reverse .m-tooltip--content{background-color:#ffffffe6;color:#000}.m-tooltip .m-tooltip--content{transition:opacity .3s ease;font-size:12px;font-weight:400;color:#fff;background-color:#000000bf;border-radius:4px;padding:5px 10px;pointer-events:none;width:max-content;max-width:300px}.m-tooltip .tooltip--arrow{position:absolute;color:#000000bf;width:10px}.m-tooltip[data-popper-placement^=top]{padding:5px 0 14px}.m-tooltip[data-popper-placement^=bottom]{padding:14px 0 5px}.m-tooltip[data-popper-placement^=left]{padding:0 8px 0 5px}.m-tooltip[data-popper-placement^=right]{padding:0 5px 0 8px}.m-tab-group{--tabs-gap: 14px;--tabs-background: transparent;--tabs-border-radius: 0;--tabs-padding: 0;--tabs-border: 1px solid var(--gray-200);--tab-background: var(transparent);--tab-color: var(--gray-600);--tab-font-size: 15px;--tab-padding: 12px 8px;--tab-border-radius: 0px;--tab-font-weight: 500;--tab-box-shadow: none}.m-tab-group__tabs{background:var(--tabs-background);border-radius:var(--tabs-border-radius);position:relative;border-bottom:var(--tabs-border);display:flex;min-width:100%;width:fit-content;list-style:none;padding:var(--tabs-padding);margin:0;gap:var(--tabs-gap)}.m-tab-group__tabs .m-tab .m-tabs__button{display:flex;align-items:center;justify-content:center;font-size:var(--tab-font-size);font-weight:var(--tab-font-weight);color:var(--tab-color);background-color:var(--tab-background);padding:var(--tab-padding);border-radius:var(--tab-border-radius);box-shadow:var(--tab-box-shadow);cursor:pointer;transition:all .2s ease-in-out;border:none}.m-tab-group__tabs .m-tab:not(.m-tab--disabled) .m-tabs__button:hover{--tab-background: var(transparent);--tab-color: var(--blue)}.m-tab-group__tabs .m-tab.m-tab--active .m-tabs__button{--tab-background: var(--white);--tab-color: var(--blue);--tab-box-shadow: inset 0px -2px 0px var(--blue)}.m-tab-group__tabs .m-tab.m-tab--disabled .m-tabs__button{--tab-color: var(--gray-400);cursor:not-allowed}.m-tab-group.m-tab-group--xs{--tabs-background: transparent;--tabs-border-radius: 0;--tabs-padding: 0;--tabs-gap: 8px;--tab-font-size: 12px;--tab-padding: 10px 6px}.m-tab-group.m-tab-group--sm{--tabs-background: transparent;--tabs-border-radius: 0;--tabs-padding: 0;--tabs-gap: 10px;--tab-font-size: 13px;--tab-padding: 13px 6px}.m-tab-group.m-tab-group--lg{--tabs-background: transparent;--tabs-border-radius: 0;--tabs-padding: 0;--tab-font-size: 16px;--tab-padding: 20px 12px}.m-tab-group.m-tab-group--xl{--tabs-background: transparent;--tabs-border-radius: 0;--tabs-padding: 0;--tab-font-size: 18px;--tab-padding: 24px 16px}.m-tab-group.m-tab-group--vertical{flex-direction:column}.m-tab-group.m-tab-group--vertical .m-tab-group__tabs{flex-direction:column;gap:0;width:200px}.m-table__wrapper{width:100%;overflow-x:auto}.m-table{--table-cell-padding: 10px 15px;border-collapse:collapse;width:100%}.m-table thead tr th{padding:var(--table-cell-padding);text-align:left;font-weight:500;background-color:var(--gray-150);white-space:nowrap;color:var(--gray-700);font-size:14px;line-height:15px}.m-table tbody tr:first-child td{border-top:none}.m-table tbody tr td{padding:var(--table-cell-padding);border-top:1px solid var(--gray-150);font-size:15px;line-height:15px;vertical-align:middle}.m-table.m-table--striped tbody tr:nth-child(even) td{background-color:var(--gray-50)}.m-table.m-table--hover tbody tr:hover td{background-color:var(--gray-50)}.m-dropdown{position:relative}.m-dropdown-menu{--dropdown-menu-width: 200px;--dropdown-menu-padding: 6px;--dropdown-menu-background-color: var(--white);--dropdown-menu-box-shadow: 0px 4px 10px 1px rgb(154 161 171 / 20%);--dropdown-menu-border-radius: 4px;--dropdown-menu-border: 1px solid var(--gray-200);--dropdown-menu-item-font-size: 15px;--dropdown-menu-item-height: 34px;--dropdown-menu-item-line-height: 34px;--dropdown-menu-item-color: var(--gray-600);--dropdown-menu-item-background-color: var(--white);--dropdown-menu-item-border-radius: 4px;--dropdown-menu-item-padding: 0px 8px;--dropdown-menu-gap: 4px;position:relative;background-color:var(--dropdown-menu-background-color);box-shadow:var(--dropdown-menu-box-shadow);border-radius:var(--dropdown-menu-border-radius);min-width:var(--dropdown-menu-width);padding:var(--dropdown-menu-padding);border:var(--dropdown-menu-border)}.m-dropdown-menu ul{list-style:none;margin:0;padding:0}.m-dropdown-menu ul .m-dropdown-item{position:relative;display:flex;align-items:center;cursor:pointer;font-size:var(--dropdown-menu-item-font-size);height:var(--dropdown-menu-item-height);line-height:var(--dropdown-menu-item-line-height);color:var(--dropdown-menu-item-color);background-color:var(--dropdown-menu-item-background-color);border-radius:var(--dropdown-menu-item-border-radius);padding:var(--dropdown-menu-item-padding);gap:var(--dropdown-menu-gap)}.m-dropdown-menu ul .m-dropdown-item .m-dropdown__text{white-space:nowrap;flex:1;z-index:1}.m-dropdown-menu ul .m-dropdown-item:hover{--dropdown-menu-item-color: var(--blue);--dropdown-menu-item-background-color: var(--gray-100)}.m-dropdown__icon-right,.m-dropdown__icon-left{display:flex;align-items:center}

package/lib/types/props.d.ts

@@ -0,0 +1,2 @@
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type Color = 'white' | 'black' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@teammodlr/ui-kit",
+  "version": "1.0.2",
+  "description": "",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.es.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src",
+    "!./src/__storybook__",
+    "!src/components/**/examples",
+    "*.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "import": "./lib/index.es.js",
+      "require": "./lib/index.cjs.js"
+    },
+    "./nuxt": "./lib/nuxt.js",
+    "./style": "./lib/style.css",
+    "./styles": "./lib/style.css",
+    "./nuxt.plugin": "./lib/nuxt.plugin.js",
+    "./nuxt.plugin.js": "./lib/nuxt.plugin.js"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "dev": "npm run storybook",
+    "storybook": "storybook dev -p 6006",
+    "build": "npm run build:vite && npm run gen-types",
+    "build:vite": "vite build",
+    "build:storybook": "storybook build",
+    "test": "",
+    "gen-types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
+    "prerelease": "npm run build",
+    "release": "np"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@nuxt/kit": "^3.0.0",
+    "@nuxt/schema": "^3.0.0",
+    "@storybook/addon-actions": "^7.0.0-beta.29",
+    "@storybook/addon-essentials": "^7.0.0-beta.29",
+    "@storybook/addon-interactions": "^7.0.0-beta.29",
+    "@storybook/addon-links": "^7.0.0-beta.29",
+    "@storybook/addons": "^7.0.0-beta.29",
+    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/theming": "^7.0.0-beta.29",
+    "@storybook/vue3": "^7.0.0-beta.29",
+    "@storybook/vue3-vite": "^7.0.0-beta.29",
+    "@types/jsdom": "^20.0.1",
+    "@types/node": "^18.11.17",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "babel-loader": "^8.3.0",
+    "jsdom": "^20.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.0-beta.29",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.2",
+    "vue": "^3.2.45",
+    "vue-loader": "^16.8.3",
+    "vue-tsc": "^1.0.19"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.6",
+    "@vueuse/core": "^9.11.0",
+    "np": "^7.6.3"
+  }
+}

package/src/__storybook__/argTypes.ts

@@ -0,0 +1,42 @@
+import { placementWhileList } from "@/composables/usePopper";
+
+export const sizeArgType = () => ({
+    size: {
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+        control: {
+            type: 'select',
+            labels: {
+                ['Extra Small']: 'xs',
+                ['Small']: 'sm',
+                ['Medium']: 'md',
+                ['Large']: 'lg',
+                ['Extra Large']: 'xl'
+            }
+        }
+    }
+});
+
+export const colorArgType = () => ({
+    color: {
+        options: [
+            'white',
+            'black',
+            'green',
+            'red',
+            'yellow',
+            'blue',
+        ],
+        control: {
+            type: 'select',
+        }
+    }
+});
+
+export const popperPositionArgType = () => ({
+    placement: {
+        options: placementWhileList,
+        control: {
+            type: 'select',
+        }
+    }
+})

package/src/__storybook__/createStory.ts

@@ -0,0 +1,15 @@
+import { h } from 'vue';
+import type { Component } from 'vue';
+
+export const createStory =
+    (component: Component, storyArgs: { classes?: string } = {}) =>
+        (args: any) => ({
+            setup: () => () =>
+                h(
+                    'div',
+                    {
+                        class: `storybook-example ${storyArgs.classes || ''}`
+                    },
+                    [h(component, args)]
+                )
+        });

package/src/__storybook__/index.ts

@@ -0,0 +1,2 @@
+export * from './createStory';
+export * from './argTypes';

package/src/components/avatar/Avatar.css

@@ -0,0 +1,69 @@
+.m-avatar {
+    --avatar-height: 40px;
+    --avatar-width: 40px;
+    --avatar-font-size: 13px;
+    --avatar-border-radius: 4px;
+    width: var(--avatar-width);
+    height: var(--avatar-height);
+    font-size: var(--avatar-font-size);
+    position: relative;
+    display: inline-flex;
+    background-color: var(--gray-200);
+    color: var(--gray-400);
+    overflow: hidden;
+    white-space: nowrap;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+    border-radius: var(--avatar-border-radius);
+    font-weight: 600;
+    user-select: none;
+}
+
+.m-avatar img {
+    width: 100%;
+    height: 100%;
+}
+
+.m-avatar--circle {
+    --avatar-border-radius: 50%;
+}
+
+.m-avatar--rounded {
+    --avatar-border-radius: 4px;
+}
+
+.m-avatar--square {
+    --avatar-border-radius: 0;
+}
+
+.m-avatar--xs {
+    --avatar-height: 24px;
+    --avatar-width: 24px;
+    --avatar-font-size: 11px;
+}
+
+.m-avatar--sm {
+    --avatar-height: 32px;
+    --avatar-width: 32px;
+    --avatar-font-size: 12px;
+}
+
+.m-avatar--md {
+    --avatar-height: 40px;
+    --avatar-width: 40px;
+    --avatar-font-size: 13px;
+}
+
+.m-avatar--lg {
+    --avatar-height: 48px;
+    --avatar-width: 48px;
+    --avatar-font-size: 16px;
+}
+
+.m-avatar--xl {
+    --avatar-height: 56px;
+    --avatar-width: 56px;
+    --avatar-font-size: 17px;
+}

package/src/components/avatar/Avatar.vue

@@ -0,0 +1,102 @@
+<template>
+    <span 
+        :class="classes"
+        :style="customSize" 
+        ref="avatar"
+    >
+        <MImage
+            v-if="(src || srcSet) && imageExists"
+            :src="src"
+            :alt="src"
+            :srcset="srcSet"
+            @error="handleImageLoadError"
+            />
+        <slot v-else />
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, inject, onMounted } from 'vue';
+import MImage from '../image/Image.vue';
+
+export default defineComponent({
+    name: "MAvatar",
+    components: {
+        MImage,
+    },
+    props: {
+        src: {
+            type: String,
+            default: ""
+        },
+        srcSet: {
+            type: String,
+            default: ""
+        },
+        size: {
+            type: [Number, String],
+            default: 'md'
+        },
+        fit: {
+            type: String,
+            default: "cover"
+        },
+        variant: {
+            type: String,
+            default: "circle"
+        }
+    },
+    emits: {
+        error: (e: Event) => true
+    },
+    setup(props, { emit }) {
+        const avatarGroup = inject('avatarGroup', undefined);
+        const avatar = ref<HTMLElement | null>(null);
+        const imageExists = ref(true);
+        const sizeValue = ref('');
+
+        const groupSize = computed(() => {
+            // @ts-ignore
+            return avatarGroup?.size
+        });
+
+        const isCustomSize = computed(() => {
+            return typeof props.size === 'number' || props.size.includes('px')
+        });
+
+        const customSize = computed(() => {
+            return isCustomSize.value ? {
+                width: props.size,
+                height: props.size
+            } : {}
+        });
+
+        const classes = computed(() => {
+            return {
+                'm-avatar': true,
+                [`m-avatar--${sizeValue.value}`]: !isCustomSize.value,
+                [`m-avatar--${props.variant}`]: true
+            }
+        });
+
+        const handleImageLoadError = (e: Event) => {
+            imageExists.value = false;
+            emit('error', e);
+        };
+
+        onMounted(() => {
+            sizeValue.value = groupSize.value || props.size;
+        });
+
+        return {
+            avatar,
+            avatarGroup,
+            classes,
+            customSize,
+            imageExists,
+
+            handleImageLoadError
+        }
+    }
+})
+</script>

package/src/components/avatargroup/AvatarGroup.css

@@ -0,0 +1,8 @@
+.m-avatar-group .m-avatar:not(:last-child) {
+    margin-right: calc(0px - 10px);
+}
+
+
+.m-avatar-group .m-avatar {
+    border: 2px solid var(--white);
+}

package/src/components/avatargroup/AvatarGroup.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="m-avatar-group">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide } from 'vue';
+
+
+export default defineComponent({
+    name: "MAvatarGroup",
+    props: {
+        max: {
+            type: Number,
+            default: 5
+        },
+        size: {
+            type: [Number, String],
+            default: 'md'
+        }
+    },
+    setup(props) {
+
+        provide('avatarGroup', props);
+
+        return {
+            props
+        }
+    }
+})
+</script>

package/src/components/breadcrumb/Breadcrumb.css

@@ -0,0 +1,46 @@
+.m-breadcrumbs {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 4px;
+    font-variant-numeric: tabular-nums;
+    align-items: center;
+    position: relative;
+}
+
+.m-breadcrumbs__item:last-child .m-breadcrumbs__item-separator {
+    display: none;
+}
+
+.m-breadcrumbs__item {
+    display: flex;
+    align-items: center;
+    outline: none;
+    cursor: pointer;
+    color: var(--gray-600);
+}
+
+.m-breadcrumbs__link {
+    padding: 4px 10px;
+    font-size: 14px;
+    border-radius: 4px;
+    background-color: transparent;
+    text-decoration: none;
+    outline: none;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-breadcrumbs__link:hover {
+    color: var(--blue-dark);
+    background-color: var(--gray-100);
+}
+
+.m-breadcrumbs__item-separator {
+    display: inline-flex;
+    padding: 0 6px;
+    cursor: default;
+    user-select: none;
+    color: var(--gray-300);
+    /*font-style: italic;*/
+    /*border-right: 2px solid transparent;*/
+}

package/src/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,51 @@
+<template>
+    <ol :class="classes">
+        <slot />
+    </ol>
+</template>
+  
+<script lang="ts">
+import {
+    defineComponent, reactive, computed, provide, toRef
+} from "vue";
+
+interface BreadcrumbState {
+    separator: string,
+    refreshItems: () => void
+}
+
+export default defineComponent({
+    name: "Breadcrumb",
+    components: {
+        BreadcrumbItem: () => import("../breadcrumbitem/BreadcrumbItem.vue")
+    },
+    props: {
+        seperator: {
+            type: String,
+            default: "/"
+        }
+    },
+    setup(props) {
+        const refreshItems = () => { };
+
+        const state: BreadcrumbState = reactive({
+            separator: toRef(props, 'seperator'),
+            refreshItems
+        });
+
+        const classes = computed(() => {
+            return {
+                'm-breadcrumbs': true
+            }
+        });
+
+        provide('breadcrumb', state);
+
+        return {
+            props,
+            refreshItems,
+            classes
+        }
+    }
+})
+</script>

package/src/components/breadcrumbitem/BreadcrumbItem.vue

@@ -0,0 +1,66 @@
+<template>
+    <li class="m-breadcrumbs__item">
+        <a tabindex="0" @click="handleClick" class="m-breadcrumbs__link">
+            <slot>{{ label }}</slot>
+        </a>
+        <span class="m-breadcrumbs__item-separator" role="separator">
+            {{ separator }}
+        </span>
+    </li>
+</template>
+  
+<script lang="ts">
+import {
+    defineComponent, ref, reactive, watch, inject, onBeforeUnmount
+} from "vue";
+
+interface BreadcrumbItemState {
+    label: string | number;
+}
+
+export default defineComponent({
+    name: 'BreadcrumbItem',
+    props: {
+        label: {
+            type: [String, Number],
+            default: null
+        }
+    },
+    setup(props) {
+        const breadcrumbState = inject("breadcrumb");
+
+        const label = ref(props.label);
+        const separator = ref("/");
+
+        watch(
+            () => props.label,
+            value => {
+                label.value = value;
+                // @ts-ignore
+                breadcrumbState?.refreshItems()
+            }
+        )
+
+        if (breadcrumbState) {
+            const state: BreadcrumbItemState = reactive({
+                label: label
+            })
+
+            // @ts-ignore
+            watch(() => breadcrumbState.separator, value => separator.value = value, { immediate: true });
+
+            onBeforeUnmount(() => { });
+        }
+
+        const handleClick = () => { };
+
+        return {
+            label,
+            separator,
+
+            handleClick
+        }
+    }
+})
+</script>
+  

package/src/components/breadcrumbitem/index.ts

@@ -0,0 +1 @@
+export { default as MBreadcrumbItem } from './MBreadcrumbItem.vue';