@teammodlr/ui-kit 1.0.7 → 2.0.0

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

@@ -0,0 +1,257 @@
+import { createVar, globalKeyframes, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+import { fonts } from "../../../styles/typography.css";
+
+const sizes = {
+    xs: '300px',
+    sm: '400px',
+    md: '640px',
+    lg: '800px',
+    xl: '1140px',
+};
+
+export const vars = {
+    maxWidth: createVar(),
+    backgroundColor: createVar(),
+    borderColor: createVar(),
+    initialLeft: createVar(),
+    initialTop: createVar(),
+}
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.maxWidth]: sizes.xs,
+        },
+    },
+    sm: {
+        vars: {
+            [vars.maxWidth]: sizes.sm,
+        },
+    },
+    md: {
+        vars: {
+            [vars.maxWidth]: sizes.md,
+        },
+    },
+    lg: {
+        vars: {
+            [vars.maxWidth]: sizes.lg,
+        },
+    },
+    xl: {
+        vars: {
+            [vars.maxWidth]: sizes.xl,
+        },
+    },
+});
+
+
+export const background = style({
+    zIndex: 100,
+    backgroundColor: 'hsla(0,0%,45.1%,0.7)',
+    position: "fixed",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+});
+
+export const container = style({
+    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)",
+    border: `1px solid rgba(0, 0, 0, 0.45)`,
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+});
+
+export const header = style({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "start",
+    padding: `${themeVars.space[4]} ${themeVars.space[4]} 0 ${themeVars.space[4]}`,
+    flexShrink: "0"
+});
+
+export const title = style({
+    margin: 0,
+    fontSize: `${themeVars.fontSize.xlarge}`,
+    fontVariationSettings: `"wght" ${fonts.INTER.wghts[500]}`,
+    display: "flex",
+    alignItems: "center"
+});
+
+export const close = style([
+    {
+        outline: `none ${themeVars.color.gray[300]}`,
+        display: 'inline-block',
+        position: 'relative',
+        width: '1.5rem',
+        height: '1.5rem',
+        backgroundColor: 'transparent',
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+        borderRadius: themeVars.rounded.full,
+        marginLeft: themeVars.space[2],
+        ':hover': {
+            backgroundColor: themeVars.color.gray[100]
+        },
+        ':focus': {
+            backgroundColor: themeVars.color.gray[100]
+        },
+        '::before': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotate(45deg)',
+            width: '0.8rem',
+            height: '2px',
+            backgroundColor: themeVars.color.gray[500],
+            transformOrigin: 'center',
+            transition: 'all 0.2s'
+        },
+        '::after': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotate(-45deg)',
+            width: '0.8rem',
+            height: '2px',
+            backgroundColor: themeVars.color.gray[500],
+            transformOrigin: 'center',
+            transition: 'all 0.2s',
+        }
+    }
+]);
+
+export const body = style({
+    padding: `${themeVars.space[4]}`,
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: "1"
+});
+
+export const footer = style({
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    padding: `0 ${themeVars.space[4]} ${themeVars.space[4]} ${themeVars.space[4]}`,
+});
+
+const fadeOutBackgroundAnimation = "fade-out-background-animation";
+globalKeyframes(fadeOutBackgroundAnimation, {
+    'from': {
+        opacity: 1,
+    },
+    'to': {
+        opacity: 0,
+    }
+});
+
+const fadeInBackgroundAnimation = "fade-in-background-animation";
+globalKeyframes(fadeInBackgroundAnimation, {
+    'from': {
+        opacity: 0,
+    },
+    'to': {
+        opacity: 1,
+    }
+});
+
+const fadeOutAnimation = "fade-out-animation";
+globalKeyframes(fadeOutAnimation, {
+    'from': {
+        opacity: 1,
+        transform: 'scale(1)'
+    },
+    'to': {
+        opacity: 0,
+        transform: 'scale(0.8)'
+    }
+});
+
+const fadeInAnimation = "fade-in-animation";
+globalKeyframes(fadeInAnimation, {
+    '0%': {
+        opacity: 0,
+        transform: 'scale(0.5)',
+        left: vars.initialLeft,
+        top: vars.initialTop
+    },
+    '70%': {
+        opacity: 1,
+        transform: 'scale(1.03)',
+        left: 0,
+        top: 0
+    },
+    '100%': {
+        opacity: 1,
+        transform: 'scale(1)',
+    }
+});
+
+const fadeInAnimationNoBounce = "fade-in-animation-no-bounce";
+globalKeyframes(fadeInAnimationNoBounce, {
+    '0%': {
+        opacity: 0,
+        transform: 'scale(0.5)',
+        left: vars.initialLeft,
+        top: vars.initialTop
+    },
+    '60%': {
+        opacity: 1,
+    },
+    '100%': {
+        opacity: 1,
+        transform: 'scale(1)',
+        left: 0,
+        top: 0
+    }
+});
+
+export const fadeEnterNoBounce = style({
+    animationName: fadeInAnimationNoBounce,
+    animationDuration: '0.2s',
+    animationTimingFunction: 'ease-in-out',
+    transition: "transform 0.3s ease-out",
+})
+
+export const fadeEnter = style({
+    animationName: fadeInAnimation,
+    animationDuration: '0.25s',
+    animationTimingFunction: 'ease-in-out',
+    transition: themeVars.transition.default,
+})
+
+export const fadeLeave = style({
+    animationName: fadeOutAnimation,
+    animationDuration: '0.2s',
+    animationTimingFunction: 'ease-in-out',
+})
+
+export const fadeBackgroundEnter = style({
+    animationName: fadeInBackgroundAnimation,
+    animationDuration: '0.1s',
+    animationTimingFunction: 'ease-in-out',
+})
+
+export const fadeBackgroundLeave = style({
+    animationName: fadeOutBackgroundAnimation,
+    animationDuration: '0.2s',
+    animationTimingFunction: 'ease-in-out',
+})
+
+export const fadeEnterFrom = style({
+
+});

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

@@ -0,0 +1 @@
+export * from './Modal.css';

package/src/components/radio/Checkbox.css

@@ -0,0 +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);
+    }
+}

package/src/components/radio/Radio.vue

@@ -0,0 +1,137 @@
+<template>
+    <label :class="style.base" @click.prevent="toggle">
+        <input
+                v-model="checked"
+                type="radio"
+                :aria-checked="checked ? 'true' : 'false'"
+                :aria-disabled="(disabled || loading) ? 'true' : 'false'"
+                :aria-labelledby="`${id}-label`"
+                :disabled="disabled || loading"
+                :name="name"
+                :id="id"
+                :class="style.input"
+                v-bind="$attrs"
+                v-on="inputListeners"
+        />
+        <span :class="classes"></span>
+        <span :class="style.label" :id="`${id}-label`">
+            <template v-if="hasSlot">
+                <slot/>
+            </template>
+            <template v-else>
+                {{ label }}
+            </template>
+        </span>
+
+    </label>
+</template>
+
+<script lang="ts">
+import {defineComponent, toRef, ref, type PropType, watch, computed, defineExpose} 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({
+    name: "Radio",
+    emits: useInput.emits(),
+    props: {
+        ...useInput.props(),
+        ...useInteractive.props(),
+        label: {
+            type: String
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md',
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, {slots, emit}) {
+        const radioRef = ref<HTMLElement | null>(null);
+
+        const {focus, blur} = useInteractive(radioRef);
+
+        const {
+            id,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading,
+            inputListeners
+        } = useInput(props, {focus, emit});
+
+        const disabled = computed(() => formDisabled || formLoading || props.disabled || props.loading);
+        const name = toRef(props, 'name');
+        const checked = ref(false);
+        const hasSlot = computed(() => !!(slots.default));
+
+        const classes = computed(() => {
+            return [
+                style.checkbox,
+                [style.size[props.size]],
+                {
+                    [style.disabled]: disabled.value,
+                    [style.checked]: checked.value
+                }
+            ]
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        watch(() => props.modelValue, (value) => {
+            checked.value = !!value;
+        }, {immediate: true});
+
+        watch(() => checked.value, (value) => {
+            emit('update:modelValue', value);
+        });
+
+        function toggle() {
+            if (disabled.value) {
+                return;
+            }
+            checked.value = !checked.value;
+        }
+
+        defineExpose({
+            focus,
+            blur,
+        })
+
+        return {
+            id,
+            formError,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            disabled,
+            name,
+            checked,
+            radioRef,
+            inputError,
+            toggle,
+            style,
+            classes,
+            hasSlot,
+            inputListeners,
+            focus,
+            blur
+        }
+    }
+})
+</script>

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

@@ -0,0 +1,9 @@
+<template>
+    <MRadio v-model="checked" label="Test" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(false);
+</script>

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

@@ -0,0 +1,19 @@
+import MRadio from "../Radio.vue";
+import {
+    MRadioBasic,
+} from "./index";
+
+import {
+    createStory, sizeArgType, colorArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MRadio,
+    title: 'Components/Radio',
+    argTypes: {
+        ...sizeArgType(),
+        ...colorArgType()
+    }
+}
+
+export const Basic = createStory(MRadioBasic);

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

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