@teammodlr/ui-kit 2.3.12 → 2.3.15

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

@@ -1,72 +1,72 @@
-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'
-};
-
-export const vars = {
-    height: createVar(),
-    width: createVar(),
-    marginBottom: createVar(),
-    radius: createVar(),
-    startColor: createVar(),
-    endColor: createVar()
-};
-
-export const base = style({
-    vars: {
-        [vars.width]: '100%',
-        [vars.height]: '1em',
-        [vars.marginBottom]: themeVars.space[2],
-        [vars.radius]: borderRadiuses.md,
-        [vars.startColor]: themeVars.color.gray[200],
-        [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]
-});
-
-const shineAnimation = 'skeleton-shine-animation';
-globalKeyframes(shineAnimation, {
-    '0%': {
-        background: themeVars.color.gray[200]
-    },
-    '40%': {
-        background: themeVars.color.gray[100]
-    },
-    '80%': {
-        background: themeVars.color.gray[200]
-    },
-    '100%': {
-        background: themeVars.color.gray[200]
-    }
-});
-
-export const loading = style({
-    selectors: {
-        ['&::after']: {
-            content: '',
-            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`
-        }
-    }
-});
+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'
+};
+
+export const vars = {
+    height: createVar(),
+    width: createVar(),
+    marginBottom: createVar(),
+    radius: createVar(),
+    startColor: createVar(),
+    endColor: createVar()
+};
+
+export const base = style({
+    vars: {
+        [vars.width]: '100%',
+        [vars.height]: '1em',
+        [vars.marginBottom]: themeVars.space[2],
+        [vars.radius]: borderRadiuses.md,
+        [vars.startColor]: themeVars.color.gray[200],
+        [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]
+});
+
+const shineAnimation = 'skeleton-shine-animation';
+globalKeyframes(shineAnimation, {
+    '0%': {
+        background: themeVars.color.gray[200]
+    },
+    '40%': {
+        background: themeVars.color.gray[100]
+    },
+    '80%': {
+        background: themeVars.color.gray[200]
+    },
+    '100%': {
+        background: themeVars.color.gray[200]
+    }
+});
+
+export const loading = style({
+    selectors: {
+        ['&::after']: {
+            content: '',
+            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`
+        }
+    }
+});

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,50 +1,50 @@
-import {
-    createVar,
-    globalKeyframes,
-    globalStyle,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-
-export const slider = style({
-    userSelect: 'none',
-    position: 'relative',
-    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%)',
-    backgroundSize: '14px 14px',
-    backgroundPosition: '0 0, 0 7px, 7px -7px, -7px 0px',
-    overflow: 'hidden',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    borderRadius: '6px'
-});
-
-export const sliderBar = style({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-});
-
-export const hueSliderThumb = style({
-    transform: 'translate(-50%)',
-    position: 'absolute',
-    top: '-2px',
-    width: '18px',
-    height: '18px',
-    borderRadius: '50%',
-    backgroundColor: 'rgba(255,255,255,0.5)',
-    border: '2px solid white',
-    boxShadow: '0 0 3px rgba(0, 0, 0, 1)',
-    cursor: 'e-resize'
-});
+import {
+    createVar,
+    globalKeyframes,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+
+export const slider = style({
+    userSelect: 'none',
+    position: 'relative',
+    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%)',
+    backgroundSize: '14px 14px',
+    backgroundPosition: '0 0, 0 7px, 7px -7px, -7px 0px',
+    overflow: 'hidden',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: '6px'
+});
+
+export const sliderBar = style({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+});
+
+export const hueSliderThumb = style({
+    transform: 'translate(-50%)',
+    position: 'absolute',
+    top: '-2px',
+    width: '18px',
+    height: '18px',
+    borderRadius: '50%',
+    backgroundColor: 'rgba(255,255,255,0.5)',
+    border: '2px solid white',
+    boxShadow: '0 0 3px rgba(0, 0, 0, 1)',
+    cursor: 'e-resize'
+});

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

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

package/src/components/switch/Switch.vue

@@ -1,132 +1,132 @@
-<template>
-    <label :class="style.base" @click.prevent="toggle">
-        <input v-model="checked" type="checkbox" :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 { 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';
-import * as style from './style';
-
-export default defineComponent({
-    name: "Switch",
-    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, expose }) {
-        const toggleRef = ref<HTMLElement | null>(null);
-
-        const { focus, blur } = useInteractive(toggleRef);
-
-        const {
-            id,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            formError,
-            formDisabled,
-            formLoading,
-            inputListeners
-        } = useInput(props, { focus, emit });
-
-        const disabled = computed(() => formDisabled || props.disabled || props.loading);
-        const name = toRef(props, 'name');
-        const checked = ref(false);
-        const hasSlot = computed(() => !!(slots.default));
-
-        const classes = computed(() => {
-            return [
-                style.toggle,
-                [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;
-        }
-
-        expose({
-            focus,
-            blur,
-        })
-
-        return {
-            id,
-            formError,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            disabled,
-            name,
-            checked,
-            toggleRef,
-            inputError,
-            toggle,
-            style,
-            classes,
-            hasSlot,
-            inputListeners,
-            focus,
-            blur
-        }
-    }
-})
-</script>
+<template>
+    <label :class="style.base" @click.prevent="toggle">
+        <input v-model="checked" type="checkbox" :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 { 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';
+import * as style from './style';
+
+export default defineComponent({
+    name: "Switch",
+    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, expose }) {
+        const toggleRef = ref<HTMLElement | null>(null);
+
+        const { focus, blur } = useInteractive(toggleRef);
+
+        const {
+            id,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading,
+            inputListeners
+        } = useInput(props, { focus, emit });
+
+        const disabled = computed(() => formDisabled || props.disabled || props.loading);
+        const name = toRef(props, 'name');
+        const checked = ref(false);
+        const hasSlot = computed(() => !!(slots.default));
+
+        const classes = computed(() => {
+            return [
+                style.toggle,
+                [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;
+        }
+
+        expose({
+            focus,
+            blur,
+        })
+
+        return {
+            id,
+            formError,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            disabled,
+            name,
+            checked,
+            toggleRef,
+            inputError,
+            toggle,
+            style,
+            classes,
+            hasSlot,
+            inputListeners,
+            focus,
+            blur
+        }
+    }
+})
+</script>

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

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

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

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

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

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

package/src/components/switch/examples/slot.vue

@@ -1,11 +1,11 @@
-<template>
-    <MToggle v-model="checked">
-        Weapon
-    </MToggle>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const checked = ref(false);
-</script>
+<template>
+    <MToggle v-model="checked">
+        Weapon
+    </MToggle>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(false);
+</script>

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

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

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

@@ -1,23 +1,23 @@
-<template>
-    <MTabGroup v-model="active">
-        <MTab value="one" label="OneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOne" closable @on-close="close">
-            Hello Worlddsd
-        </MTab>
-        <MTab value="two" label="Two" disabled>
-            Hello World Two
-        </MTab>
-        <MTab value="three" label="Third">
-            Hello World Two dfndjfn
-        </MTab>
-    </MTabGroup>
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-
-const active = ref("one");
-
-function close(tab: any) {
-    console.log('hi', tab);
-}
-</script>
+<template>
+    <MTabGroup v-model="active">
+        <MTab value="one" label="OneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOne" closable @on-close="close">
+            Hello Worlddsd
+        </MTab>
+        <MTab value="two" label="Two" disabled>
+            Hello World Two
+        </MTab>
+        <MTab value="three" label="Third">
+            Hello World Two dfndjfn
+        </MTab>
+    </MTabGroup>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const active = ref("one");
+
+function close(tab: any) {
+    console.log('hi', tab);
+}
+</script>

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

@@ -1,2 +1,2 @@
-export { default as MTabsBasic } from './basic.vue';
-export { default as MTabsVertical } from './vertical.vue';
+export { default as MTabsBasic } from './basic.vue';
+export { default as MTabsVertical } from './vertical.vue';