@teammodlr/ui-kit 2.1.8 → 2.1.9

package/src/components/select/style/Select.css.ts

@@ -1,12 +1,17 @@
-import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
+import {
+    createVar,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const sizes = {
     xs: '26px',
     sm: '30px',
     md: '38px',
     lg: '42px',
-    xl: '48px',
+    xl: '48px'
 };
 
 const borderRadiuses = {
@@ -14,7 +19,7 @@ const borderRadiuses = {
     sm: '3px',
     md: '4px',
     lg: '6px',
-    xl: '8px',
+    xl: '8px'
 };
 
 export const vars = {
@@ -27,13 +32,12 @@ export const vars = {
     color: createVar(),
     cursor: createVar(),
     optionColor: createVar(),
-    optionBackgroundColor: createVar(),
-}
+    optionBackgroundColor: createVar()
+};
 
 export const wrapper = style({
     position: 'relative',
-    outline: 'none',
-
+    outline: 'none'
 });
 
 export const base = style({
@@ -45,7 +49,7 @@ export const base = style({
         [vars.borderColor]: themeVars.color.gray[300],
         [vars.color]: themeVars.color.gray[900],
         [vars.backgroundColor]: '#FFFFFF',
-        [vars.cursor]: 'text',
+        [vars.cursor]: 'text'
     },
     minHeight: vars.height,
     width: '100%',
@@ -69,15 +73,15 @@ export const base = style({
         border-color .3s ${themeVars.transition.default}`,
     ':hover': {
         vars: {
-            [vars.borderColor]: themeVars.color.blue[400],
+            [vars.borderColor]: themeVars.color.blue[400]
         }
     },
     ':focus': {
         vars: {
-            [vars.borderColor]: themeVars.color.blue[500],
+            [vars.borderColor]: themeVars.color.blue[500]
         },
         outline: 'none',
-        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
     }
 });
 
@@ -87,11 +91,11 @@ export const selectedTags = style({
     alignItems: 'center',
     gap: themeVars.space[1],
     paddingTop: themeVars.space[1.5],
-    paddingBottom: themeVars.space[1.5],
+    paddingBottom: themeVars.space[1.5]
 });
 
 export const block = style({
-    width: '100%',
+    width: '100%'
 });
 
 export const disabled = style({
@@ -99,23 +103,23 @@ export const disabled = style({
         [vars.borderColor]: themeVars.color.gray[200],
         [vars.color]: themeVars.color.gray[500],
         [vars.backgroundColor]: themeVars.color.gray[50],
-        [vars.cursor]: 'not-allowed',
+        [vars.cursor]: 'not-allowed'
     },
     ':focus': {
-        boxShadow: 'none',
+        boxShadow: 'none'
     },
     ':hover': {
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     }
 });
 
 export const label = style({
-    fontWeight: "500",
+    fontWeight: '500',
     display: 'inline-block',
     fontSize: themeVars.fontSize.base,
     wordBreak: 'break-word',
     cursor: 'pointer',
-    marginBottom: themeVars.space[1],
+    marginBottom: themeVars.space[1]
 });
 
 export const description = style({
@@ -125,7 +129,7 @@ export const description = style({
     color: themeVars.color.gray[600],
     lineHeight: themeVars.fontSize.large,
     wordBreak: 'break-word',
-    marginBottom: themeVars.space[1.5],
+    marginBottom: themeVars.space[1.5]
 });
 
 export const errorMessage = style({
@@ -134,29 +138,29 @@ export const errorMessage = style({
     fontSize: themeVars.fontSize.base,
     color: themeVars.color.red[600],
     wordBreak: 'break-word',
-    marginTop: themeVars.space[1.5],
+    marginTop: themeVars.space[1.5]
 });
 
 export const error = style({
     vars: {
-        [vars.borderColor]: themeVars.color.red[500],
+        [vars.borderColor]: themeVars.color.red[500]
     },
     ':hover': {
         vars: {
-            [vars.borderColor]: themeVars.color.red[500],
+            [vars.borderColor]: themeVars.color.red[500]
         }
     },
     ':focus': {
         boxShadow: `0 0 0 2px ${themeVars.color.red[200]}`,
         vars: {
-            [vars.borderColor]: themeVars.color.red[500],
+            [vars.borderColor]: themeVars.color.red[500]
         }
-    },
+    }
 });
 
 export const focused = style({
     vars: {
-        [vars.borderColor]: themeVars.color.blue[500],
+        [vars.borderColor]: themeVars.color.blue[500]
     },
     boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
 });
@@ -171,28 +175,28 @@ export const rightIcon = style({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: "2.25rem",
-    color: themeVars.color.gray[400],
+    width: '2.25rem',
+    color: themeVars.color.gray[400]
 });
 
 export const hasRightIcon = style({
-    paddingRight: "2.25rem",
+    paddingRight: '2.25rem'
 });
 
 export const menu = style({
-    backgroundColor: "#FFFFFF",
-    borderRadius: "4px",
+    backgroundColor: '#FFFFFF',
+    borderRadius: '4px',
     zIndex: 4000,
     border: `1px solid ${themeVars.color.gray[200]}`,
     boxShadow: themeVars.shadow.md,
-    maxHeight: "230px",
-    overflowY: "auto",
+    maxHeight: '230px',
+    overflowY: 'auto'
 });
 
 export const placeholder = style({
-    userSelect: "none",
-    color: themeVars.color.gray[500],
-})
+    userSelect: 'none',
+    color: themeVars.color.gray[500]
+});
 
 export const search = style({
     // padding: `${themeVars.space[1]} ${themeVars.space[1]} 0`,
@@ -201,7 +205,7 @@ export const search = style({
     top: 0,
     zIndex: 1,
     borderBottom: `1px solid ${themeVars.color.gray[200]}`,
-    display: 'flex',
+    display: 'flex'
 });
 
 export const searchInput = style({
@@ -218,47 +222,46 @@ export const options = style({
     padding: themeVars.space[1],
     display: 'flex',
     flexDirection: 'column',
-    gap: themeVars.space[0.5],
+    gap: themeVars.space[0.5]
 });
 
 export const option = style({
     vars: {
         [vars.optionColor]: themeVars.color.gray[800],
-        [vars.optionBackgroundColor]: '#FFFFFF',
+        [vars.optionBackgroundColor]: '#FFFFFF'
     },
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    cursor: "pointer",
-    minHeight: "36px",
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    minHeight: '36px',
     fontSize: themeVars.fontSize.base,
     paddingBlock: themeVars.space['1.5'],
     paddingInline: themeVars.space['3'],
     gap: themeVars.space[2],
     color: vars.optionColor,
-    transition: "background-color 0.05s ease-in-out",
+    transition: 'background-color 0.05s ease-in-out',
     backgroundColor: vars.optionBackgroundColor,
     borderRadius: borderRadiuses.md,
-    userSelect: "none",
+    userSelect: 'none',
     ':hover': {
         vars: {
             [vars.optionColor]: themeVars.color.gray[800],
-            [vars.optionBackgroundColor]: themeVars.color.gray[100],
-        },
+            [vars.optionBackgroundColor]: themeVars.color.gray[100]
+        }
     }
 });
 
-
 export const optionFocused = style({
     vars: {
         [vars.optionColor]: themeVars.color.gray[800],
-        [vars.optionBackgroundColor]: themeVars.color.gray[100],
+        [vars.optionBackgroundColor]: themeVars.color.gray[100]
     },
     ':hover': {
         vars: {
             [vars.optionColor]: themeVars.color.gray[800],
-            [vars.optionBackgroundColor]: themeVars.color.gray[100],
-        },
+            [vars.optionBackgroundColor]: themeVars.color.gray[100]
+        }
     }
 });
 
@@ -275,9 +278,7 @@ export const optionSelected = style({
     // }
 });
 
-export const optionLabel = style({
-
-});
+export const optionLabel = style({});
 
 export const checkAll = style({
     display: 'flex',
@@ -304,7 +305,7 @@ export const checkAllButton = style({
     background: 'none',
     outline: 'none',
     ':hover': {
-        borderColor: themeVars.color.gray[300],
+        borderColor: themeVars.color.gray[300]
     }
 });
 
@@ -314,7 +315,7 @@ export const checkAllButtonActive = style({
     color: 'white',
     ':hover': {
         borderColor: themeVars.color.blue[600],
-        background: themeVars.color.blue[600],
+        background: themeVars.color.blue[600]
     }
 });
 
@@ -339,7 +340,7 @@ globalStyle(`${optionIcon} > svg`, {
     top: '1px',
     width: themeVars.space[5],
     height: themeVars.space[5],
-    color: themeVars.color.blue[500],
+    color: themeVars.color.blue[500]
 });
 
 export const noResults = style({
@@ -352,7 +353,7 @@ export const noResults = style({
     gap: themeVars.space[0.5],
     width: '100%',
     color: themeVars.color.gray[500],
-    fontSize: themeVars.fontSize.small,
+    fontSize: themeVars.fontSize.small
 });
 
 export const clearable = style({
@@ -361,5 +362,5 @@ export const clearable = style({
     position: 'absolute',
     right: themeVars.space[2],
     top: '0',
-    display: 'flex',
-})
+    display: 'flex'
+});

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

@@ -1,17 +1,13 @@
-import { createStory } from "../../../__storybook__";
-import MSkeleton from "../Skeleton.vue";
+import { createStory } from '../../../__storybook__';
+import MSkeleton from '../Skeleton.vue';
 
-import {
-    MSkeletonBasic,
-    MSkeletonPost
-} from "./index";
+import { MSkeletonBasic, MSkeletonPost } from './index';
 
 export default {
     component: MSkeleton,
     title: 'Components/Skeleton',
-    argTypes: {
-    }
-}
+    argTypes: {}
+};
 
 export const Basic = createStory(MSkeletonBasic);
 export const Post = createStory(MSkeletonPost);

package/src/components/skeleton/style/Skeleton.css.ts

@@ -1,12 +1,12 @@
-import {createVar, globalKeyframes, style} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import { createVar, globalKeyframes, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const borderRadiuses = {
     xs: '2px',
     sm: '3px',
     md: '4px',
     lg: '6px',
-    xl: '8px',
+    xl: '8px'
 };
 
 export const vars = {
@@ -15,7 +15,7 @@ export const vars = {
     marginBottom: createVar(),
     radius: createVar(),
     startColor: createVar(),
-    endColor: createVar(),
+    endColor: createVar()
 };
 
 export const base = style({
@@ -25,31 +25,31 @@ export const base = style({
         [vars.marginBottom]: themeVars.space[2],
         [vars.radius]: borderRadiuses.md,
         [vars.startColor]: themeVars.color.gray[200],
-        [vars.endColor]: themeVars.color.gray[100],
+        [vars.endColor]: themeVars.color.gray[100]
     },
     width: vars.width,
     height: vars.height,
     marginBottom: vars.marginBottom,
     borderRadius: vars.radius,
-    position: "relative",
-    display: "inline-block",
-    overflow: "hidden",
-    backgroundColor: themeVars.color.gray[200],
+    position: 'relative',
+    display: 'inline-block',
+    overflow: 'hidden',
+    backgroundColor: themeVars.color.gray[200]
 });
 
-const shineAnimation = "skeleton-shine-animation";
+const shineAnimation = 'skeleton-shine-animation';
 globalKeyframes(shineAnimation, {
     '0%': {
-        background: themeVars.color.gray[200],
+        background: themeVars.color.gray[200]
     },
     '40%': {
-        background: themeVars.color.gray[100],
+        background: themeVars.color.gray[100]
     },
     '80%': {
-        background: themeVars.color.gray[200],
+        background: themeVars.color.gray[200]
     },
     '100%': {
-        background: themeVars.color.gray[200],
+        background: themeVars.color.gray[200]
     }
 });
 
@@ -60,13 +60,13 @@ export const loading = style({
             position: 'absolute',
             pointerEvents: 'none',
             inset: '0',
-            
+
             // backgroundImage: `linear-gradient(to right,transparent 25%,${themeVars.color.gray[100]} 37%,transparent 63%)`,
             backgroundColor: themeVars.color.gray[100],
             transition: `${vars.startColor} .3s ease-in-out,
                           ${vars.endColor} .3s ease-in-out,
                           background-color .3s ease-in-out`,
-            animation: `${shineAnimation} 1.5s cubic-bezier(0.36, 0, 0.64, 1) infinite`,
+            animation: `${shineAnimation} 1.5s cubic-bezier(0.36, 0, 0.64, 1) infinite`
         }
     }
 });

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

@@ -1,2 +1,2 @@
-export {assignInlineVars} from '@vanilla-extract/dynamic';
-export * from './Skeleton.css';
+export { assignInlineVars } from '@vanilla-extract/dynamic';
+export * from './Skeleton.css';

package/src/components/slider/style/Slider.css.ts

@@ -1,16 +1,23 @@
-import { createVar, globalKeyframes, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import {
+    createVar,
+    globalKeyframes,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
 
 export const slider = style({
     userSelect: 'none',
     position: 'relative',
-    height: '14px',
+    height: '14px'
 });
 
 export const sliderTransparent = style({
     userSelect: 'none',
     position: 'absolute',
     height: '14px',
-    backgroundImage: 'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
+    backgroundImage:
+        'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
     backgroundSize: '14px 14px',
     backgroundPosition: '0 0, 0 7px, 7px -7px, -7px 0px',
     overflow: 'hidden',
@@ -39,5 +46,5 @@ export const hueSliderThumb = style({
     backgroundColor: 'rgba(255,255,255,0.5)',
     border: '2px solid white',
     boxShadow: '0 0 3px rgba(0, 0, 0, 1)',
-    cursor: 'e-resize',
-});
+    cursor: 'e-resize'
+});

package/src/components/switch/Switch.vue

@@ -5,7 +5,7 @@
             :disabled="disabled || loading" :name="name" :id="id" :class="style.input" v-bind="$attrs"
             v-on="inputListeners" />
 
-        <span :class="classes">            
+        <span :class="classes">
         </span>
 
         <span :class="style.label" :id="`${id}-label`">
@@ -22,7 +22,7 @@
 
 
 <script lang="ts">
-import { computed, defineComponent, defineExpose, type PropType, ref, toRef, watch } from 'vue';
+import { computed, defineComponent, type PropType, ref, toRef, watch } from 'vue';
 import { useInput } from '../../composables/useInput';
 import { useInteractive } from "../../composables/useInteractive";
 import type { Size } from '../../types/props';
@@ -50,7 +50,7 @@ export default defineComponent({
             default: false
         }
     },
-    setup(props, { slots, emit }) {
+    setup(props, { slots, emit, expose }) {
         const toggleRef = ref<HTMLElement | null>(null);
 
         const { focus, blur } = useInteractive(toggleRef);
@@ -102,7 +102,7 @@ export default defineComponent({
             checked.value = !checked.value;
         }
 
-        defineExpose({
+        expose({
             focus,
             blur,
         })

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

@@ -1,12 +1,7 @@
-import MSwitch from "../Switch.vue";
-import {
-    MSwitchBasic,
-    MSwitchSlot
-} from "./index";
+import MSwitch from '../Switch.vue';
+import { MSwitchBasic, MSwitchSlot } from './index';
 
-import {
-    createStory, sizeArgType, colorArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
 
 export default {
     component: MSwitch,
@@ -14,7 +9,7 @@ export default {
     argTypes: {
         ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MSwitchBasic);
 export const Slot = createStory(MSwitchSlot);

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

@@ -1,3 +1,2 @@
 export { default as MSwitchBasic } from './basic.vue';
 export { default as MSwitchSlot } from './slot.vue';
-