@teammodlr/ui-kit 2.3.12 → 2.3.15

package/src/components/textarea/style/Textarea.css.ts

@@ -1,191 +1,191 @@
-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'
-    },
-
-    minHeight: vars.height,
-    width: '100%',
-    borderRadius: vars.radius,
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: vars.borderColor,
-    padding: `${vars.paddingY} ${vars.paddingX}`,
-    fontSize: themeVars.fontSize.base,
-    fontFamily: 'inherit',
-    display: 'block',
-    textAlign: 'left',
-    appearance: 'none',
-    boxSizing: 'border-box',
-    resize: 'vertical',
-    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.radius]: borderRadiuses.xs,
-            [vars.paddingX]: themeVars.space[1],
-            [vars.paddingY]: themeVars.space[0.5]
-        },
-        fontSize: themeVars.fontSize.small,
-        minHeight: '20px'
-    },
-    sm: {
-        vars: {
-            [vars.radius]: borderRadiuses.sm,
-            [vars.paddingX]: themeVars.space[1.5],
-            [vars.paddingY]: themeVars.space[1]
-        },
-        fontSize: themeVars.fontSize.small,
-        minHeight: '24px'
-    },
-    md: {
-        vars: {
-            [vars.radius]: borderRadiuses.md,
-            [vars.paddingX]: themeVars.space[1.5],
-            [vars.paddingY]: themeVars.space[1]
-        },
-        minHeight: '28px'
-    },
-    lg: {
-        vars: {
-            [vars.radius]: borderRadiuses.lg,
-            [vars.paddingX]: themeVars.space[2.5],
-            [vars.paddingY]: themeVars.space[1.5]
-        },
-        fontSize: themeVars.fontSize.large,
-        minHeight: '34px'
-    },
-    xl: {
-        vars: {
-            [vars.radius]: borderRadiuses.xl,
-            [vars.paddingX]: themeVars.space[3],
-            [vars.paddingY]: themeVars.space[1.5]
-        },
-        fontSize: themeVars.fontSize.large,
-        minHeight: '36px'
-    }
-});
-
-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]
-        }
-    }
-});
+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'
+    },
+
+    minHeight: vars.height,
+    width: '100%',
+    borderRadius: vars.radius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: vars.borderColor,
+    padding: `${vars.paddingY} ${vars.paddingX}`,
+    fontSize: themeVars.fontSize.base,
+    fontFamily: 'inherit',
+    display: 'block',
+    textAlign: 'left',
+    appearance: 'none',
+    boxSizing: 'border-box',
+    resize: 'vertical',
+    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.radius]: borderRadiuses.xs,
+            [vars.paddingX]: themeVars.space[1],
+            [vars.paddingY]: themeVars.space[0.5]
+        },
+        fontSize: themeVars.fontSize.small,
+        minHeight: '20px'
+    },
+    sm: {
+        vars: {
+            [vars.radius]: borderRadiuses.sm,
+            [vars.paddingX]: themeVars.space[1.5],
+            [vars.paddingY]: themeVars.space[1]
+        },
+        fontSize: themeVars.fontSize.small,
+        minHeight: '24px'
+    },
+    md: {
+        vars: {
+            [vars.radius]: borderRadiuses.md,
+            [vars.paddingX]: themeVars.space[1.5],
+            [vars.paddingY]: themeVars.space[1]
+        },
+        minHeight: '28px'
+    },
+    lg: {
+        vars: {
+            [vars.radius]: borderRadiuses.lg,
+            [vars.paddingX]: themeVars.space[2.5],
+            [vars.paddingY]: themeVars.space[1.5]
+        },
+        fontSize: themeVars.fontSize.large,
+        minHeight: '34px'
+    },
+    xl: {
+        vars: {
+            [vars.radius]: borderRadiuses.xl,
+            [vars.paddingX]: themeVars.space[3],
+            [vars.paddingY]: themeVars.space[1.5]
+        },
+        fontSize: themeVars.fontSize.large,
+        minHeight: '36px'
+    }
+});
+
+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]
+        }
+    }
+});

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

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

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

@@ -1,5 +1,5 @@
-<template>
-    <MTooltip text="Hello World">
-        <MButton>Top</MButton>
-    </MTooltip>
-</template>
+<template>
+    <MTooltip text="Hello World">
+        <MButton>Top</MButton>
+    </MTooltip>
+</template>

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

@@ -1,17 +1,17 @@
-import MTooltip from '../Tooltip.vue';
-import MButton from '@/components/button/Button.vue';
-import { MTooltipBasic, MTooltipPlacement } from './index';
-
-import { createStory, popperPositionArgType } from '../../../__storybook__';
-
-export default {
-    component: MTooltip,
-    subcomponents: { MButton },
-    title: 'Components/Tooltip',
-    argTypes: {
-        ...popperPositionArgType()
-    }
-};
-
-export const Basic = createStory(MTooltipBasic);
-export const Placement = createStory(MTooltipPlacement);
+import MTooltip from '../Tooltip.vue';
+import MButton from '@/components/button/Button.vue';
+import { MTooltipBasic, MTooltipPlacement } from './index';
+
+import { createStory, popperPositionArgType } from '../../../__storybook__';
+
+export default {
+    component: MTooltip,
+    subcomponents: { MButton },
+    title: 'Components/Tooltip',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+};
+
+export const Basic = createStory(MTooltipBasic);
+export const Placement = createStory(MTooltipPlacement);

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

@@ -1,2 +1,2 @@
-export { default as MTooltipBasic } from './basic.vue';
-export { default as MTooltipPlacement } from './placement.vue';
+export { default as MTooltipBasic } from './basic.vue';
+export { default as MTooltipPlacement } from './placement.vue';

package/src/components/tooltip/examples/placement.vue

@@ -1,9 +1,9 @@
-<template>
-    <div style="padding: 200px;">
-        <MTooltip text="Hello World" placement="top">
-            <div style="width: 100px; height: 50px; background: red;">
-
-            </div>
-        </MTooltip>
-    </div>
-</template>
+<template>
+    <div style="padding: 200px;">
+        <MTooltip text="Hello World" placement="top">
+            <div style="width: 100px; height: 50px; background: red;">
+
+            </div>
+        </MTooltip>
+    </div>
+</template>

package/src/components/tooltip/style/Tooltip.css.ts

@@ -1,90 +1,90 @@
-import { createVar, globalKeyframes, style } from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-export const vars = {
-    backgroundColor: createVar(),
-    color: createVar()
-};
-
-export const wrapper = style({
-    position: 'relative',
-    display: 'inline-flex'
-});
-
-export const container = style({
-    zIndex: 50
-});
-
-export const tooltip = style({
-    vars: {
-        [vars.backgroundColor]: themeVars.color.gray[900],
-        [vars.color]: themeVars.color.gray[100]
-    },
-    zIndex: 50,
-    transition: 'opacity 0.3s, ease',
-    position: 'fixed',
-    fontSize: '13px',
-    fontWeight: 'normal',
-    color: vars.color,
-    backgroundColor: vars.backgroundColor,
-    borderRadius: themeVars.rounded.default,
-    padding: `${themeVars.space[1.5]} ${themeVars.space[2]}`,
-    pointerEvents: 'none',
-    width: 'max-content',
-    maxWidth: '300px',
-    boxSizing: 'border-box',
-    selectors: {
-        '&[data-popper-placement^="top"]': {
-            margin: `${themeVars.space[1]} 0 ${themeVars.space[3]} 0`
-        },
-        '&[data-popper-placement^="bottom"]': {
-            margin: `${themeVars.space[3]} 0 ${themeVars.space[1]} 0`
-        },
-        '&[data-popper-placement^="left"]': {
-            margin: `0 ${themeVars.space[3]} 0 ${themeVars.space[1]}`
-        },
-        '&[data-popper-placement^="right"]': {
-            margin: `0 ${themeVars.space[1]} 0 ${themeVars.space[3]}`
-        }
-    }
-});
-
-export const reverse = style({
-    vars: {
-        [vars.backgroundColor]: themeVars.color.gray[100],
-        [vars.color]: themeVars.color.gray[900]
-    }
-});
-
-const fadeOutAnimation = 'fade-out-animation';
-globalKeyframes(fadeOutAnimation, {
-    from: {
-        opacity: 1
-    },
-    to: {
-        opacity: 0
-    }
-});
-
-const fadeInAnimation = 'fade-in-animation';
-globalKeyframes(fadeInAnimation, {
-    '0%': {
-        opacity: 0
-    },
-    '100%': {
-        opacity: 1
-    }
-});
-
-export const fadeEnter = style({
-    animationName: fadeInAnimation,
-    animationDuration: '0.125s',
-    animationTimingFunction: 'ease-in-out',
-    transition: themeVars.transition.default
-});
-
-export const fadeLeave = style({
-    animationName: fadeOutAnimation,
-    animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out'
-});
+import { createVar, globalKeyframes, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const vars = {
+    backgroundColor: createVar(),
+    color: createVar()
+};
+
+export const wrapper = style({
+    position: 'relative',
+    display: 'inline-flex'
+});
+
+export const container = style({
+    zIndex: 50
+});
+
+export const tooltip = style({
+    vars: {
+        [vars.backgroundColor]: themeVars.color.gray[900],
+        [vars.color]: themeVars.color.gray[100]
+    },
+    zIndex: 50,
+    transition: 'opacity 0.3s, ease',
+    position: 'fixed',
+    fontSize: '13px',
+    fontWeight: 'normal',
+    color: vars.color,
+    backgroundColor: vars.backgroundColor,
+    borderRadius: themeVars.rounded.default,
+    padding: `${themeVars.space[1.5]} ${themeVars.space[2]}`,
+    pointerEvents: 'none',
+    width: 'max-content',
+    maxWidth: '300px',
+    boxSizing: 'border-box',
+    selectors: {
+        '&[data-popper-placement^="top"]': {
+            margin: `${themeVars.space[1]} 0 ${themeVars.space[3]} 0`
+        },
+        '&[data-popper-placement^="bottom"]': {
+            margin: `${themeVars.space[3]} 0 ${themeVars.space[1]} 0`
+        },
+        '&[data-popper-placement^="left"]': {
+            margin: `0 ${themeVars.space[3]} 0 ${themeVars.space[1]}`
+        },
+        '&[data-popper-placement^="right"]': {
+            margin: `0 ${themeVars.space[1]} 0 ${themeVars.space[3]}`
+        }
+    }
+});
+
+export const reverse = style({
+    vars: {
+        [vars.backgroundColor]: themeVars.color.gray[100],
+        [vars.color]: themeVars.color.gray[900]
+    }
+});
+
+const fadeOutAnimation = 'fade-out-animation';
+globalKeyframes(fadeOutAnimation, {
+    from: {
+        opacity: 1
+    },
+    to: {
+        opacity: 0
+    }
+});
+
+const fadeInAnimation = 'fade-in-animation';
+globalKeyframes(fadeInAnimation, {
+    '0%': {
+        opacity: 0
+    },
+    '100%': {
+        opacity: 1
+    }
+});
+
+export const fadeEnter = style({
+    animationName: fadeInAnimation,
+    animationDuration: '0.125s',
+    animationTimingFunction: 'ease-in-out',
+    transition: themeVars.transition.default
+});
+
+export const fadeLeave = style({
+    animationName: fadeOutAnimation,
+    animationDuration: '0.2s',
+    animationTimingFunction: 'ease-in-out'
+});

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

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