@teammodlr/ui-kit 2.0.29 → 2.0.30

package/src/components/input/style/Input.css.ts

@@ -1,221 +1,221 @@
-import {createVar, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
-
-const sizes = {
-    xs: '26px',
-    sm: '30px',
-    md: '38px',
-    lg: '42px',
-    xl: '48px',
-};
-
-const borderRadiuses = {
-    xs: '2px',
-    sm: '3px',
-    md: '4px',
-    lg: '6px',
-    xl: '8px',
-};
-
-export const vars = {
-    height: createVar(),
-    radius: createVar(),
-    paddingX: createVar(),
-    paddingY: createVar(),
-    borderColor: createVar(),
-    backgroundColor: createVar(),
-    color: createVar(),
-    cursor: createVar(),
-}
-
-export const wrapper = style({
-    position: 'relative'
-});
-
-export const base = style({
-    vars: {
-        [vars.height]: sizes.md,
-        [vars.radius]: borderRadiuses.md,
-        [vars.paddingX]: themeVars.space[2],
-        [vars.paddingY]: themeVars.space[0.5],
-        [vars.borderColor]: themeVars.color.gray[300],
-        [vars.color]: themeVars.color.font.text,
-        [vars.backgroundColor]: '#FFFFFF',
-        [vars.cursor]: 'text',
-    },
-    height: vars.height,
-    minHeight: vars.height,
-    width: '100%',
-    borderRadius: vars.radius,
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: vars.borderColor,
-    padding: `${vars.paddingY} ${vars.paddingX}`,
-    fontSize: themeVars.fontSize.base,
-    display: 'block',
-    textAlign: 'left',
-    appearance: 'none',
-    lineHeight: vars.height,
-    boxSizing: 'border-box',
-    resize: 'none',
-    boxShadow: 'none',
-    color: vars.color,
-    transition: `color .3s ${themeVars.transition.default},
-        background-color .3s ${themeVars.transition.default},
-        box-shadow .3s ${themeVars.transition.default},
-        border-color .3s ${themeVars.transition.default}`,
-    ':hover': {
-        vars: {
-            [vars.borderColor]: themeVars.color.blue[400],
-        }
-    },
-    ':focus': {
-        vars: {
-            [vars.borderColor]: themeVars.color.blue[500],
-        },
-        outline: 'none',
-        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
-    }
-});
-
-export const size = styleVariants({
-    xs: {
-        vars: {
-            [vars.height]: sizes.xs,
-            [vars.radius]: borderRadiuses.xs,
-            [vars.paddingX]: themeVars.space[1],
-        },
-        fontSize: themeVars.fontSize.small,
-    },
-    sm: {
-        vars: {
-            [vars.height]: sizes.sm,
-            [vars.radius]: borderRadiuses.sm,
-            [vars.paddingX]: themeVars.space[1.5],
-        },
-        fontSize: themeVars.fontSize.small,
-    },
-    md: {
-        vars: {
-            [vars.height]: sizes.md,
-            [vars.radius]: borderRadiuses.md
-        },
-    },
-    lg: {
-        vars: {
-            [vars.height]: sizes.lg,
-            [vars.radius]: borderRadiuses.lg,
-            [vars.paddingX]: themeVars.space[2.5],
-        },
-        fontSize: themeVars.fontSize.large,
-    },
-    xl: {
-        vars: {
-            [vars.height]: sizes.xl,
-            [vars.radius]: borderRadiuses.xl,
-            [vars.paddingX]: themeVars.space[3],
-        },
-        fontSize: themeVars.fontSize.large,
-    },
-});
-
-export const block = style({
-    width: '100%',
-});
-
-export const disabled = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.gray[200],
-        [vars.color]: themeVars.color.gray[500],
-        [vars.backgroundColor]: themeVars.color.gray[50],
-        [vars.cursor]: 'not-allowed',
-    },
-    ':focus': {
-        boxShadow: 'none',
-    },
-    ':hover': {
-        cursor: 'not-allowed',
-    }
-});
-
-export const label = style({
-    fontWeight: "500",
-    display: 'inline-block',
-    fontSize: themeVars.fontSize.base,
-    wordBreak: 'break-word',
-    cursor: 'pointer',
-    marginBottom: themeVars.space[1],
-    color: themeVars.color.font.text
-});
-
-export const description = style({
-    display: 'block',
-    textDecoration: 'none',
-    fontSize: themeVars.fontSize.base,
-    color: themeVars.color.gray[600],
-    lineHeight: themeVars.fontSize.large,
-    wordBreak: 'break-word',
-    marginBottom: themeVars.space[1.5],
-});
-
-export const errorMessage = style({
-    display: 'block',
-    textDecoration: 'none',
-    fontSize: themeVars.fontSize.base,
-    color: themeVars.color.red[600],
-    wordBreak: 'break-word',
-    marginTop: themeVars.space[1.5],
-});
-
-export const error = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.red[500],
-    },
-    ':hover': {
-        vars: {
-            [vars.borderColor]: themeVars.color.red[500],
-        }
-    },
-    ':focus': {
-        boxShadow: `0 0 0 2px ${themeVars.color.red[200]}`,
-        vars: {
-            [vars.borderColor]: themeVars.color.red[500],
-        }
-    },
-});
-
-export const leftIcon = style({
-    pointerEvents: 'none',
-    position: 'absolute',
-    zIndex: 1,
-    left: 0,
-    top: 0,
-    bottom: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: "2.25rem",
-    color: themeVars.color.gray[400],
-});
-
-export const hasLeftIcon = style({
-    paddingLeft: "2.25rem",
-});
-
-export const rightIcon = style({
-    pointerEvents: 'none',
-    position: 'absolute',
-    zIndex: 1,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: "2.25rem",
-    color: themeVars.color.gray[400],
-});
-
-export const hasRightIcon = style({
-    paddingRight: "2.25rem",
-});
+import {createVar, style, styleVariants} from "@vanilla-extract/css";
+import {themeVars} from "../../../styles/theme.css";
+
+const sizes = {
+    xs: '26px',
+    sm: '30px',
+    md: '38px',
+    lg: '42px',
+    xl: '48px',
+};
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    paddingX: createVar(),
+    paddingY: createVar(),
+    borderColor: createVar(),
+    backgroundColor: createVar(),
+    color: createVar(),
+    cursor: createVar(),
+}
+
+export const wrapper = style({
+    position: 'relative'
+});
+
+export const base = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: borderRadiuses.md,
+        [vars.paddingX]: themeVars.space[2],
+        [vars.paddingY]: themeVars.space[0.5],
+        [vars.borderColor]: themeVars.color.gray[300],
+        [vars.color]: themeVars.color.font.text,
+        [vars.backgroundColor]: '#FFFFFF',
+        [vars.cursor]: 'text',
+    },
+    height: vars.height,
+    minHeight: vars.height,
+    width: '100%',
+    borderRadius: vars.radius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: vars.borderColor,
+    padding: `${vars.paddingY} ${vars.paddingX}`,
+    fontSize: themeVars.fontSize.base,
+    display: 'block',
+    textAlign: 'left',
+    appearance: 'none',
+    lineHeight: vars.height,
+    boxSizing: 'border-box',
+    resize: 'none',
+    boxShadow: 'none',
+    color: vars.color,
+    transition: `color .3s ${themeVars.transition.default},
+        background-color .3s ${themeVars.transition.default},
+        box-shadow .3s ${themeVars.transition.default},
+        border-color .3s ${themeVars.transition.default}`,
+    ':hover': {
+        vars: {
+            [vars.borderColor]: themeVars.color.blue[400],
+        }
+    },
+    ':focus': {
+        vars: {
+            [vars.borderColor]: themeVars.color.blue[500],
+        },
+        outline: 'none',
+        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+    }
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs,
+            [vars.radius]: borderRadiuses.xs,
+            [vars.paddingX]: themeVars.space[1],
+        },
+        fontSize: themeVars.fontSize.small,
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm,
+            [vars.radius]: borderRadiuses.sm,
+            [vars.paddingX]: themeVars.space[1.5],
+        },
+        fontSize: themeVars.fontSize.small,
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md,
+            [vars.radius]: borderRadiuses.md
+        },
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg,
+            [vars.radius]: borderRadiuses.lg,
+            [vars.paddingX]: themeVars.space[2.5],
+        },
+        fontSize: themeVars.fontSize.large,
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl,
+            [vars.radius]: borderRadiuses.xl,
+            [vars.paddingX]: themeVars.space[3],
+        },
+        fontSize: themeVars.fontSize.large,
+    },
+});
+
+export const block = style({
+    width: '100%',
+});
+
+export const disabled = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.gray[200],
+        [vars.color]: themeVars.color.gray[500],
+        [vars.backgroundColor]: themeVars.color.gray[50],
+        [vars.cursor]: 'not-allowed',
+    },
+    ':focus': {
+        boxShadow: 'none',
+    },
+    ':hover': {
+        cursor: 'not-allowed',
+    }
+});
+
+export const label = style({
+    fontWeight: "500",
+    display: 'inline-block',
+    fontSize: themeVars.fontSize.base,
+    wordBreak: 'break-word',
+    cursor: 'pointer',
+    marginBottom: themeVars.space[1],
+    color: themeVars.color.font.text
+});
+
+export const description = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.gray[600],
+    lineHeight: themeVars.fontSize.large,
+    wordBreak: 'break-word',
+    marginBottom: themeVars.space[1.5],
+});
+
+export const errorMessage = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.red[600],
+    wordBreak: 'break-word',
+    marginTop: themeVars.space[1.5],
+});
+
+export const error = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.red[500],
+    },
+    ':hover': {
+        vars: {
+            [vars.borderColor]: themeVars.color.red[500],
+        }
+    },
+    ':focus': {
+        boxShadow: `0 0 0 2px ${themeVars.color.red[200]}`,
+        vars: {
+            [vars.borderColor]: themeVars.color.red[500],
+        }
+    },
+});
+
+export const leftIcon = style({
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    left: 0,
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "2.25rem",
+    color: themeVars.color.gray[400],
+});
+
+export const hasLeftIcon = style({
+    paddingLeft: "2.25rem",
+});
+
+export const rightIcon = style({
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "2.25rem",
+    color: themeVars.color.gray[400],
+});
+
+export const hasRightIcon = style({
+    paddingRight: "2.25rem",
+});

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

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

package/src/components/link/Link.vue

@@ -1,54 +1,54 @@
-<template>
-    <component :is="tag" :to="to" :class="computedClasses" :disabled="disabled">
-        <slot />
-    </component>
-</template>
-  
-<script lang="ts">
-import type { Color } from "../../types/props";
-import { computed, defineComponent, type PropType } from "vue";
-
-export default defineComponent({
-    name: "MLink",
-    props: {
-        color: {
-            type: String as PropType<Color>
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        block: {
-            type: Boolean,
-            default: false
-        },
-        underline: {
-            type: Boolean,
-            default: false
-        },
-        to: [String, Object]
-    },
-    setup(props) {
-        const computedClasses = computed(() => {
-            return [
-                'm-link',
-                {
-                    [`m-link--${props.color}`]: props.color,
-                    'm-link--underline': props.underline,
-                    'm-link--block': props.block,
-                    'm-link--disabled': props.disabled,
-                    'm-link--external': tag.value === 'a'
-                }
-            ]
-        });
-
-        const tag = computed(() => (props.to ? 'router-link' : 'a'));
-
-        return {
-            computedClasses,
-            tag
-        }
-    }
-})
-</script>
+<template>
+    <component :is="tag" :to="to" :class="computedClasses" :disabled="disabled">
+        <slot />
+    </component>
+</template>
+  
+<script lang="ts">
+import type { Color } from "../../types/props";
+import { computed, defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+    name: "MLink",
+    props: {
+        color: {
+            type: String as PropType<Color>
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        block: {
+            type: Boolean,
+            default: false
+        },
+        underline: {
+            type: Boolean,
+            default: false
+        },
+        to: [String, Object]
+    },
+    setup(props) {
+        const computedClasses = computed(() => {
+            return [
+                'm-link',
+                {
+                    [`m-link--${props.color}`]: props.color,
+                    'm-link--underline': props.underline,
+                    'm-link--block': props.block,
+                    'm-link--disabled': props.disabled,
+                    'm-link--external': tag.value === 'a'
+                }
+            ]
+        });
+
+        const tag = computed(() => (props.to ? 'router-link' : 'a'));
+
+        return {
+            computedClasses,
+            tag
+        }
+    }
+})
+</script>
   

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

@@ -1,3 +1,3 @@
-<template>
-    <MLink href="https://www.google.com">Google</MLink>
-</template>
+<template>
+    <MLink href="https://www.google.com">Google</MLink>
+</template>

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

@@ -1,20 +1,20 @@
-import MLink from "../Link.vue";
-
-import {
-    MLinkBasic
-} from "./index";
-
-import {
-    createStory,
-    colorArgType
-} from "../../../__storybook__";
-
-export default {
-    component: MLink,
-    title: 'Components/Link',
-    argTypes: {
-        ...colorArgType()
-    }
-}
-
-export const Basic = createStory(MLinkBasic);
+import MLink from "../Link.vue";
+
+import {
+    MLinkBasic
+} from "./index";
+
+import {
+    createStory,
+    colorArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MLink,
+    title: 'Components/Link',
+    argTypes: {
+        ...colorArgType()
+    }
+}
+
+export const Basic = createStory(MLinkBasic);

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

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