@teammodlr/ui-kit 2.1.7 → 2.1.9

package/src/components/modal/style/Modal.css.ts

@@ -1,12 +1,17 @@
-import {createVar, globalKeyframes, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import {
+    createVar,
+    globalKeyframes,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const sizes = {
     xs: '300px',
     sm: '400px',
     md: '640px',
     lg: '800px',
-    xl: '1140px',
+    xl: '1140px'
 };
 
 export const vars = {
@@ -14,77 +19,77 @@ export const vars = {
     backgroundColor: createVar(),
     borderColor: createVar(),
     initialLeft: createVar(),
-    initialTop: createVar(),
-}
+    initialTop: createVar()
+};
 
 export const size = styleVariants({
     xs: {
         vars: {
-            [vars.maxWidth]: sizes.xs,
-        },
+            [vars.maxWidth]: sizes.xs
+        }
     },
     sm: {
         vars: {
-            [vars.maxWidth]: sizes.sm,
-        },
+            [vars.maxWidth]: sizes.sm
+        }
     },
     md: {
         vars: {
-            [vars.maxWidth]: sizes.md,
-        },
+            [vars.maxWidth]: sizes.md
+        }
     },
     lg: {
         vars: {
-            [vars.maxWidth]: sizes.lg,
-        },
+            [vars.maxWidth]: sizes.lg
+        }
     },
     xl: {
         vars: {
-            [vars.maxWidth]: sizes.xl,
-        },
-    },
+            [vars.maxWidth]: sizes.xl
+        }
+    }
 });
 
-
 export const background = style({
     zIndex: 100,
     backgroundColor: 'hsla(0,0%,45.1%,0.7)',
-    position: "fixed",
+    position: 'fixed',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
 });
 
 export const container = style({
-    backgroundColor: "#fff",
-    width: "100%",
+    backgroundColor: '#fff',
+    width: '100%',
     maxWidth: vars.maxWidth,
     borderRadius: themeVars.rounded.medium,
-    boxShadow: "0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04)",
+    boxShadow:
+        '0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04)',
     border: `1px solid rgba(0, 0, 0, 0.45)`,
-    display: "flex",
-    flexDirection: "column",
-    position: "relative",
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative'
 });
 
 export const header = style({
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "flex-start",
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
     padding: `${themeVars.space[4]} ${themeVars.space[4]} 0 ${themeVars.space[4]}`,
-    flexShrink: "0",
+    flexShrink: '0'
 });
 
 export const title = style({
     margin: 0,
     fontSize: `${themeVars.fontSize.xlarge}`,
-    fontWeight: "500",
-    display: "flex",
-    alignItems: "center",
+    fontWeight: '500',
+    display: 'flex',
+    alignItems: 'center',
     color: themeVars.color.font.default
 });
 
@@ -103,7 +108,7 @@ export const close = style([
         borderRadius: themeVars.rounded.full,
         marginLeft: themeVars.space[2],
         ':hover': {
-            backgroundColor: themeVars.color.gray[150],
+            backgroundColor: themeVars.color.gray[150]
         },
         ':focus': {
             backgroundColor: themeVars.color.gray[150]
@@ -130,59 +135,59 @@ export const close = style([
             height: '2px',
             backgroundColor: themeVars.color.gray[500],
             transformOrigin: 'center',
-            transition: 'all 0.2s',
+            transition: 'all 0.2s'
         }
     }
 ]);
 
 export const body = style({
     padding: `${themeVars.space[4]}`,
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: "1",
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: '1',
     color: themeVars.color.font.text
 });
 
 export const footer = style({
-    display: "flex",
-    width: "100%",
-    alignItems: "center",
-    padding: `0 ${themeVars.space[4]} ${themeVars.space[4]} ${themeVars.space[4]}`,
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    padding: `0 ${themeVars.space[4]} ${themeVars.space[4]} ${themeVars.space[4]}`
 });
 
-const fadeOutBackgroundAnimation = "fade-out-background-animation";
+const fadeOutBackgroundAnimation = 'fade-out-background-animation';
 globalKeyframes(fadeOutBackgroundAnimation, {
-    'from': {
-        opacity: 1,
+    from: {
+        opacity: 1
     },
-    'to': {
-        opacity: 0,
+    to: {
+        opacity: 0
     }
 });
 
-const fadeInBackgroundAnimation = "fade-in-background-animation";
+const fadeInBackgroundAnimation = 'fade-in-background-animation';
 globalKeyframes(fadeInBackgroundAnimation, {
-    'from': {
-        opacity: 0,
+    from: {
+        opacity: 0
     },
-    'to': {
-        opacity: 1,
+    to: {
+        opacity: 1
     }
 });
 
-const fadeOutAnimation = "fade-out-animation";
+const fadeOutAnimation = 'fade-out-animation';
 globalKeyframes(fadeOutAnimation, {
-    'from': {
+    from: {
         opacity: 1,
         transform: 'scale(1)'
     },
-    'to': {
+    to: {
         opacity: 0,
         transform: 'scale(0.8)'
     }
 });
 
-const fadeInAnimation = "fade-in-animation";
+const fadeInAnimation = 'fade-in-animation';
 globalKeyframes(fadeInAnimation, {
     '0%': {
         opacity: 0,
@@ -198,11 +203,11 @@ globalKeyframes(fadeInAnimation, {
     },
     '100%': {
         opacity: 1,
-        transform: 'scale(1)',
+        transform: 'scale(1)'
     }
 });
 
-const fadeInAnimationNoBounce = "fade-in-animation-no-bounce";
+const fadeInAnimationNoBounce = 'fade-in-animation-no-bounce';
 globalKeyframes(fadeInAnimationNoBounce, {
     '0%': {
         opacity: 0,
@@ -211,7 +216,7 @@ globalKeyframes(fadeInAnimationNoBounce, {
         top: vars.initialTop
     },
     '60%': {
-        opacity: 1,
+        opacity: 1
     },
     '100%': {
         opacity: 1,
@@ -225,34 +230,32 @@ export const fadeEnterNoBounce = style({
     animationName: fadeInAnimationNoBounce,
     animationDuration: '0.2s',
     animationTimingFunction: 'ease-in-out',
-    transition: "transform 0.3s ease-out",
-})
+    transition: 'transform 0.3s ease-out'
+});
 
 export const fadeEnter = style({
     animationName: fadeInAnimation,
     animationDuration: '0.25s',
     animationTimingFunction: 'ease-in-out',
-    transition: themeVars.transition.default,
-})
+    transition: themeVars.transition.default
+});
 
 export const fadeLeave = style({
     animationName: fadeOutAnimation,
     animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out',
-})
+    animationTimingFunction: 'ease-in-out'
+});
 
 export const fadeBackgroundEnter = style({
     animationName: fadeInBackgroundAnimation,
     animationDuration: '0.1s',
-    animationTimingFunction: 'ease-in-out',
-})
+    animationTimingFunction: 'ease-in-out'
+});
 
 export const fadeBackgroundLeave = style({
     animationName: fadeOutBackgroundAnimation,
     animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out',
-})
-
-export const fadeEnterFrom = style({
-
+    animationTimingFunction: 'ease-in-out'
 });
+
+export const fadeEnterFrom = style({});

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

@@ -1,15 +1,11 @@
-import MPagination from "../Pagination.vue";
-import {
-    MPaginationBasic
-} from "./index";
+import MPagination from '../Pagination.vue';
+import { MPaginationBasic } from './index';
 
-import {
-    createStory
-} from "../../../__storybook__";
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MPagination,
     title: 'Components/Pagination'
-}
+};
 
-export const Basic = createStory(MPaginationBasic)
+export const Basic = createStory(MPaginationBasic);

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

@@ -1 +1 @@
-export { default as MPaginationBasic } from './basic.vue';
+export { default as MPaginationBasic } from './basic.vue';

package/src/components/pagination/style/Pagination.css.ts

@@ -1,64 +1,69 @@
-import {createVar, globalKeyframes, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import {
+    createVar,
+    globalKeyframes,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const sizes = {
     xs: '300px',
     sm: '400px',
     md: '640px',
     lg: '800px',
-    xl: '1140px',
+    xl: '1140px'
 };
 
 export const vars = {
     backgroundColor: createVar(),
-    color: createVar(),
-}
+    color: createVar()
+};
 
 export const pagination = style({
-    display: "inline-flex",
-    alignItems: "center",
+    display: 'inline-flex',
+    alignItems: 'center',
     fontSize: themeVars.fontSize.small,
-    boxSizing: "border-box"
+    boxSizing: 'border-box'
 });
 
 export const buttons = style({
-    display: "inline-flex",
-    alignItems: "center",
+    display: 'inline-flex',
+    alignItems: 'center',
     fontSize: themeVars.fontSize.small,
-    boxSizing: "border-box",
-    gap: themeVars.space["2.5"]
+    boxSizing: 'border-box',
+    gap: themeVars.space['2.5']
 });
 
 export const pages = style({
-    display: "inline-flex",
-    alignItems: "center",
+    display: 'inline-flex',
+    alignItems: 'center',
     margin: 0,
-    gap: themeVars.space["1"]
+    gap: themeVars.space['1']
 });
 
 export const page = style({
     vars: {
-        [vars.backgroundColor]: "transparent",
-        [vars.color]: themeVars.color.gray["700"]
+        [vars.backgroundColor]: 'transparent',
+        [vars.color]: themeVars.color.gray['700']
     },
-    height: "28px",
-    width: "28px",
+    height: '28px',
+    width: '28px',
     borderRadius: themeVars.rounded.default,
-    outline: "none",
-    border: "none",
+    outline: 'none',
+    border: 'none',
     fontSize: 'inherit',
-    padding: `0px ${themeVars.space["2"]}`,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
+    padding: `0px ${themeVars.space['2']}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     lineHeight: 1,
     color: vars.color,
     backgroundColor: vars.backgroundColor,
-    cursor: "pointer",
+    cursor: 'pointer',
     selectors: {
         '&:hover': {
             vars: {
-                [vars.backgroundColor]: themeVars.color.gray["150"],
+                [vars.backgroundColor]: themeVars.color.gray['150']
             }
         }
     }
@@ -66,23 +71,22 @@ export const page = style({
 
 export const active = style({
     vars: {
-        [vars.backgroundColor]: themeVars.color.blue["600"],
-        [vars.color]: "#FFF"
+        [vars.backgroundColor]: themeVars.color.blue['600'],
+        [vars.color]: '#FFF'
     },
     selectors: {
         '&:hover': {
             vars: {
-                [vars.backgroundColor]: themeVars.color.blue["700"],
+                [vars.backgroundColor]: themeVars.color.blue['700']
             }
         }
     }
 });
 
 export const svg = style({
-    height: "calc(1em + 2px)",
-    width: "calc(1em + 2px)",
-    display: "inline-block",
-    fontSize: "inherit",
-    userSelect: "none",
-
-});
+    height: 'calc(1em + 2px)',
+    width: 'calc(1em + 2px)',
+    display: 'inline-block',
+    fontSize: 'inherit',
+    userSelect: 'none'
+});

package/src/components/radio/Radio.vue

@@ -28,11 +28,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from 'vue';
-import { computed, defineComponent, defineExpose, ref, toRef } from 'vue';
-import { useInput } from '../../composables/useInput';
-import { useInteractive } from "../../composables/useInteractive";
-import type { Size } from '../../types/props';
+import type {PropType} from 'vue';
+import {computed, defineComponent, ref, toRef} from 'vue';
+import {useInput} from '../../composables/useInput';
+import {useInteractive} from "../../composables/useInteractive";
+import type {Size} from '../../types/props';
 import * as style from './style';
 
 export default defineComponent({
@@ -61,7 +61,7 @@ export default defineComponent({
             default: null
         }
     },
-    setup(props, {slots, emit}) {
+    setup(props, {slots, emit, expose}) {
         const radioRef = ref<HTMLElement | null>(null);
 
         const {focus, blur} = useInteractive(radioRef);
@@ -106,7 +106,7 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
-        defineExpose({
+        expose({
             focus,
             blur,
         })

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

@@ -1,12 +1,7 @@
-import MRadio from "../Radio.vue";
-import {
-    MRadioBasic,
-    MRadioGroup,
-} from "./index";
+import MRadio from '../Radio.vue';
+import { MRadioBasic, MRadioGroup } from './index';
 
-import {
-    createStory, sizeArgType, colorArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
 
 export default {
     component: MRadio,
@@ -15,7 +10,7 @@ export default {
         ...sizeArgType(),
         ...colorArgType()
     }
-}
+};
 
 export const Basic = createStory(MRadioBasic);
 export const Group = createStory(MRadioGroup);

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

@@ -1,3 +1,2 @@
 export { default as MRadioBasic } from './basic.vue';
 export { default as MRadioGroup } from './group.vue';
-

package/src/components/radio/style/Checkbox.css.ts

@@ -1,12 +1,12 @@
-import {createVar, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import { createVar, style, styleVariants } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const sizes = {
     xs: '16px',
     sm: '18px',
     md: '20px',
     lg: '22px',
-    xl: '24px',
+    xl: '24px'
 };
 
 export const vars = {
@@ -15,30 +15,30 @@ export const vars = {
     backgroundColor: createVar(),
     borderColor: createVar(),
     color: createVar()
-}
+};
 
 export const base = style({
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    cursor: "pointer",
-    gap: themeVars.space['1.5'],
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    gap: themeVars.space['1.5']
 });
 
 export const input = style({
     position: 'absolute',
     opacity: 0,
-    cursor: "pointer"
+    cursor: 'pointer'
 });
 
 export const checkmark = style({
-    position: "absolute",
+    position: 'absolute',
     width: `calc(${vars.height} - 2px)`,
     height: `calc(${vars.height} - 2px)`,
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    color: "white",
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    color: 'white'
 });
 
 export const checkbox = style({
@@ -47,9 +47,9 @@ export const checkbox = style({
         [vars.radius]: themeVars.rounded.full,
         [vars.backgroundColor]: 'white',
         [vars.borderColor]: themeVars.color.gray[300],
-        [vars.color]: themeVars.color.gray[600],
+        [vars.color]: themeVars.color.gray[600]
     },
-    position: "relative",
+    position: 'relative',
     width: vars.height,
     height: vars.height,
     borderRadius: vars.radius,
@@ -63,7 +63,7 @@ export const checkbox = style({
 export const checked = style({
     vars: {
         [vars.borderColor]: themeVars.color.blue[500],
-        [vars.backgroundColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500]
     },
     selectors: {
         ['&:after']: {
@@ -75,31 +75,31 @@ export const checked = style({
             width: `calc(${vars.height} - 10px)`,
             height: `calc(${vars.height} - 10px)`,
             borderRadius: themeVars.rounded.full,
-            backgroundColor: "#FFF"
+            backgroundColor: '#FFF'
         }
     }
 });
 
 export const disabled = style({
     opacity: 0.5,
-    cursor: 'not-allowed',
+    cursor: 'not-allowed'
 });
 
 export const indeterminate = style({
     vars: {
         [vars.borderColor]: themeVars.color.blue[500],
-        [vars.backgroundColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500]
     }
 });
 
 export const label = style({
     marginLeft: themeVars.space['0.5'],
-    fontWeight: "500",
+    fontWeight: '500',
     display: 'inline-block',
     fontSize: themeVars.fontSize.base,
     wordBreak: 'break-word',
-    cursor: 'pointer',
-})
+    cursor: 'pointer'
+});
 
 export const size = styleVariants({
     xs: {
@@ -115,17 +115,16 @@ export const size = styleVariants({
     md: {
         vars: {
             [vars.height]: sizes.md
-        },
+        }
     },
     lg: {
         vars: {
-            [vars.height]: sizes.lg,
-        },
+            [vars.height]: sizes.lg
+        }
     },
     xl: {
         vars: {
-            [vars.height]: sizes.xl,
-        },
-    },
+            [vars.height]: sizes.xl
+        }
+    }
 });
-

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

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

package/src/components/radiobutton/RadioButton.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import type {PropType} from "vue";
-import {computed, defineComponent, inject, ref,defineExpose } from "vue";
+import {computed, defineComponent, inject, ref } from "vue";
 import type {Size} from "../../types/props";
 import * as style from "./style";
 import {useInteractive} from "../../composables/useInteractive";
@@ -48,7 +48,7 @@ export default defineComponent({
         }
     },
     emits: ['update:modelValue'],
-    setup(props, {emit}) {
+    setup(props, {emit, expose}) {
         const radioRef = ref<HTMLElement | null>(null);
         const parentState = inject(RADIO_BUTTON_GROUP_STATE, null);
         const value = computed(() => {
@@ -110,7 +110,7 @@ export default defineComponent({
             props.onClick(e);
         };
 
-        defineExpose({
+        expose({
             focus,
             blur,
         })