@teammodlr/ui-kit 1.0.2

package/src/components/button/Button.css

@@ -0,0 +1,378 @@
+.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(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 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);
+}
+
+/**
+   * Info Button
+  */
+.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);
+}
+
+/**
+   * Success Button
+  */
+.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);
+}
+
+/**
+   * Danger Button
+  */
+.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);
+}
+
+/**
+   * Yellow Button
+  */
+.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: 0.8;
+    cursor: not-allowed;
+    user-select: none;
+}
+
+.m-button-group {
+    display: inline-flex;
+    vertical-align: middle;
+    position: relative;
+}
+
+/**
+   * Only round the first and last button 
+  */
+
+.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(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 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;
+}

package/src/components/button/Button.vue

@@ -0,0 +1,108 @@
+<template>
+    <component :is="computedTag" :to="to" :href="href" :type="type" :class="computedClasses" :disabled="disabled">
+        <div v-if="hasIconLeft" class="m-button__icon">
+            <slot name="icon-left" />
+        </div>
+        <span class="m-button__content">
+            <slot />
+        </span>
+        <div v-if="hasIconRight" class="m-button__icon">
+            <slot name="icon-right" />
+        </div>
+    </component>
+</template>
+  
+<script lang="ts">
+import { computed, defineComponent, inject } from "vue";
+import type { PropType } from 'vue';
+import type { Color, Size } from "@/types/props";
+
+export default defineComponent({
+    name: "MButton",
+    props: {
+        type: {
+            type: String,
+            default: 'button',
+        },
+        color: {
+            type: String as PropType<Color>,
+            default: ''
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        block: {
+            type: Boolean,
+            default: false
+        },
+        secondary: {
+            type: Boolean,
+            default: false
+        },
+        to: {
+            type: [String, Object],
+            default: ''
+        },
+        href: {
+            type: String,
+            default: '',
+        },
+        icon: {
+            type: Boolean,
+            default: false
+        },
+        strong: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { slots }) {
+        const group = inject('buttonGroup', {
+            groupProps: {},
+            isGroup: false
+        });
+        
+        const hasIconLeft = computed(() => !!(slots['icon-left']));
+        const hasIconRight = computed(() => !!(slots['icon-right']));
+
+        const computedClasses = computed(() => {
+            // @ts-ignore
+            const size = group.groupProps.size || props.size;
+            return [
+                'm-button',
+                `m-button--${size}`,
+                {
+                    [`m-button--${props.color}`]: props.color,
+                    'm-button--rounded': props.rounded,
+                    'm-button--block': props.block,
+                    'm-button--icon': props.icon,
+                    'm-button--secondary': props.secondary,
+                    'm-button--disabled': props.disabled,
+                    'm-button--strong': props.strong,
+                    'm-button--icon-left': hasIconLeft.value,
+                    'm-button--icon-right': hasIconRight.value,
+                }
+            ]
+        });
+
+        const computedTag = computed(() => (props.to ? 'router-link' : props.href ? 'a' : 'button'));
+
+        return {
+            computedClasses,
+            computedTag,
+            hasIconLeft,
+            hasIconRight
+        }
+    }
+})
+</script>
+  

package/src/components/buttongroup/ButtonGroup.vue

@@ -0,0 +1,47 @@
+<template>
+    <component
+        :is="tag"
+        :class="computedClasses"
+    >
+        <slot />
+    </component>
+</template>
+
+<script lang="ts">
+import type { Size } from '@/types/props';
+import { defineComponent, provide, type PropType, computed } from 'vue';
+
+export default defineComponent({
+    name: "MButtonGroup",
+    props: {
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        }
+    },
+    setup(props) {
+
+        provide('buttonGroup', {
+            groupProps: props,
+            isGroup: true
+        });
+
+        const computedClasses = computed(() => {
+            return [
+                'm-button-group',
+                {
+                    [`m-button-group--${props.size}`]: props.size
+                }
+            ]
+        });
+
+        return {
+            computedClasses
+        }
+    }
+})
+</script>

package/src/components/checkbox/Checkbox.css

@@ -0,0 +1,185 @@
+.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: bold;
+    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(0.4, 0, 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: 0.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: #FFFFFF;
+    transform-origin: 0% 100%;
+    animation: draw-tick 125ms 170ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.m-checkbox .m-checkbox__label {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 14px;
+    line-height: 24px;
+    color: #000000;
+    font-weight: 400;
+    user-select: none;
+}
+
+@keyframes draw-tick {
+    0% {
+        height: 0px;
+        width: 0px;
+        border-color: #FFF;
+        transform: translate3d(0, 0, 0) rotate(45deg);
+    }
+
+    25% {
+        height: 0px;
+        width: var(--checkbox-tick-width);
+        transform: translate3d(0, 0, 0) rotate(45deg);
+    }
+
+    100% {
+        border-color: #FFF;
+        height: var(--checkbox-tick-height);
+        width: var(--checkbox-tick-width);
+        transform: translate3d(0, var(--checkbox-tick-height-negative), 0) rotate(45deg);
+    }
+}