@teammodlr/ui-kit 2.0.25 → 2.0.28

package/src/components/button/style/index.ts

@@ -1 +1 @@
-export * from './Button.css';
+export * from './Button.css';

package/src/components/buttongroup/ButtonGroup.vue

@@ -1,36 +1,36 @@
-<template>
-    <div
-            :class="classes"
-    >
-        <slot/>
-    </div>
-</template>
-
-<script lang="ts">
-import type {Size} from '../../types/props';
-import {defineComponent, type PropType, provide, reactive, toRef} from 'vue';
-import * as style from "./style";
-import type {ButtonGroupState} from "./symbol";
-import {BUTTON_GROUP_STATE} from "./symbol";
-
-export default defineComponent({
-    name: "MButtonGroup",
-    props: {
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        }
-    },
-    setup(props) {
-        const state: ButtonGroupState = reactive({
-            size: toRef(props, 'size')
-        });
-
-        provide(BUTTON_GROUP_STATE, state);
-
-        return {
-            classes: style.base
-        }
-    }
-})
-</script>
+<template>
+    <div
+            :class="classes"
+    >
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import type {Size} from '../../types/props';
+import {defineComponent, type PropType, provide, reactive, toRef} from 'vue';
+import * as style from "./style";
+import type {ButtonGroupState} from "./symbol";
+import {BUTTON_GROUP_STATE} from "./symbol";
+
+export default defineComponent({
+    name: "MButtonGroup",
+    props: {
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        }
+    },
+    setup(props) {
+        const state: ButtonGroupState = reactive({
+            size: toRef(props, 'size')
+        });
+
+        provide(BUTTON_GROUP_STATE, state);
+
+        return {
+            classes: style.base
+        }
+    }
+})
+</script>

package/src/components/buttongroup/examples/basic.vue

@@ -1,9 +1,9 @@
-<template>
-    <MButtonGroup>
-        <MButton>Hello</MButton>
-        <MButton>Hello</MButton>
-        <MButton>Hello</MButton>
-        <MButton>Hello</MButton>
-        <MButton>Hello</MButton>
-    </MButtonGroup>
-</template>
+<template>
+    <MButtonGroup>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+    </MButtonGroup>
+</template>

package/src/components/buttongroup/examples/icon-group.vue

@@ -1,22 +1,22 @@
-<template>
-    <MButtonGroup>
-        <MButton icon>
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
-            </svg>
-        </MButton>
-        <MButton icon>
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
-            </svg>
-
-        </MButton>
-        <MButton icon>
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm7 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
-            </svg>
-        </MButton>
-    </MButtonGroup>
-</template>
-<script setup lang="ts">
+<template>
+    <MButtonGroup>
+        <MButton icon>
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
+            </svg>
+        </MButton>
+        <MButton icon>
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
+            </svg>
+
+        </MButton>
+        <MButton icon>
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm7 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
+            </svg>
+        </MButton>
+    </MButtonGroup>
+</template>
+<script setup lang="ts">
 </script>

package/src/components/buttongroup/examples/index.stories.ts

@@ -1,23 +1,23 @@
-import MButtonGroup from "../ButtonGroup.vue";
-import MButton from "../../button/Button.vue";
-import {
-    MButtonGroupBasic,
-    MButtonGroupIconGroup
-} from "./index";
-
-import {
-    createStory,
-    sizeArgType
-} from "../../../__storybook__";
-
-export default {
-    component: MButtonGroup,
-    subcomponents: { MButton },
-    title: 'Components/Buttons/Group',
-    argTypes: {
-        ...sizeArgType()
-    }
-}
-
-export const Basic = createStory(MButtonGroupBasic);
+import MButtonGroup from "../ButtonGroup.vue";
+import MButton from "../../button/Button.vue";
+import {
+    MButtonGroupBasic,
+    MButtonGroupIconGroup
+} from "./index";
+
+import {
+    createStory,
+    sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MButtonGroup,
+    subcomponents: { MButton },
+    title: 'Components/Buttons/Group',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MButtonGroupBasic);
 export const IconGroup = createStory(MButtonGroupIconGroup);

package/src/components/buttongroup/examples/index.ts

@@ -1,2 +1,2 @@
-export { default as MButtonGroupBasic } from './basic.vue';
-export { default as MButtonGroupIconGroup } from './icon-group.vue';
+export { default as MButtonGroupBasic } from './basic.vue';
+export { default as MButtonGroupIconGroup } from './icon-group.vue';

package/src/components/buttongroup/style/ButtonGroup.css.ts

@@ -1,40 +1,40 @@
-import {globalStyle, style} from "@vanilla-extract/css";
-import {base as button} from "../../button/style/Button.css";
-import {border as buttonBorder} from "../../button/style/Button.css";
-import {borderState} from "../../button/style/Button.css";
-
-export const base = style({
-    display: "inline-flex",
-    position: "relative",
-    flexWrap: "nowrap",
-});
-
-globalStyle(`${base} > ${button}:first-child:not(:last-child)`, {
-    marginRight: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-});
-
-globalStyle(`${base} > ${button}:not(:first-child):not(:last-child)`, {
-    marginLeft: 0,
-    borderRadius: 0,
-    marginRight: 0,
-});
-
-globalStyle(`${base} > ${button}:not(:first-child) ${buttonBorder}`, {
-    borderLeftWidth: 0,
-});
-
-globalStyle(`${base} > ${button}:last-child:not(:first-child)`, {
-    marginLeft: 0,
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-});
-
-globalStyle(`${base} > ${button}:not(:first-child) ${borderState}`, {
-    left: '-1px'
-});
-
-export const vertical = style({
-    flexDirection: "column",
+import {globalStyle, style} from "@vanilla-extract/css";
+import {base as button} from "../../button/style/Button.css";
+import {border as buttonBorder} from "../../button/style/Button.css";
+import {borderState} from "../../button/style/Button.css";
+
+export const base = style({
+    display: "inline-flex",
+    position: "relative",
+    flexWrap: "nowrap",
+});
+
+globalStyle(`${base} > ${button}:first-child:not(:last-child)`, {
+    marginRight: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+});
+
+globalStyle(`${base} > ${button}:not(:first-child):not(:last-child)`, {
+    marginLeft: 0,
+    borderRadius: 0,
+    marginRight: 0,
+});
+
+globalStyle(`${base} > ${button}:not(:first-child) ${buttonBorder}`, {
+    borderLeftWidth: 0,
+});
+
+globalStyle(`${base} > ${button}:last-child:not(:first-child)`, {
+    marginLeft: 0,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+});
+
+globalStyle(`${base} > ${button}:not(:first-child) ${borderState}`, {
+    left: '-1px'
+});
+
+export const vertical = style({
+    flexDirection: "column",
 });

package/src/components/buttongroup/style/index.ts

@@ -1 +1 @@
-export * from './ButtonGroup.css';
+export * from './ButtonGroup.css';

package/src/components/buttongroup/symbol.ts

@@ -1,8 +1,8 @@
-import type {InjectionKey} from "vue";
-import type {Size} from "../../types/props";
-
-export interface ButtonGroupState {
-    size: Size
-}
-
+import type {InjectionKey} from "vue";
+import type {Size} from "../../types/props";
+
+export interface ButtonGroupState {
+    size: Size
+}
+
 export const BUTTON_GROUP_STATE: InjectionKey<ButtonGroupState> = Symbol('BUTTON_GROUP_STATE');

package/src/components/checkbox/Checkbox.css

@@ -1,185 +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);
-    }
-}
+.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);
+    }
+}