@teammodlr/ui-kit 2.1.41 → 2.1.44

package/src/components/radio/style/Checkbox.css.ts

@@ -1,130 +1,130 @@
-import { createVar, style, styleVariants } from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-const sizes = {
-    xs: '16px',
-    sm: '18px',
-    md: '20px',
-    lg: '22px',
-    xl: '24px'
-};
-
-export const vars = {
-    height: createVar(),
-    radius: createVar(),
-    backgroundColor: createVar(),
-    borderColor: createVar(),
-    color: createVar()
-};
-
-export const base = style({
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    gap: themeVars.space['1.5']
-});
-
-export const input = style({
-    position: 'absolute',
-    opacity: 0,
-    cursor: 'pointer'
-});
-
-export const checkmark = style({
-    position: 'absolute',
-    width: `calc(${vars.height} - 2px)`,
-    height: `calc(${vars.height} - 2px)`,
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    color: 'white'
-});
-
-export const checkbox = style({
-    vars: {
-        [vars.height]: sizes.md,
-        [vars.radius]: themeVars.rounded.full,
-        [vars.backgroundColor]: 'white',
-        [vars.borderColor]: themeVars.color.gray[300],
-        [vars.color]: themeVars.color.gray[600]
-    },
-    position: 'relative',
-    width: vars.height,
-    height: vars.height,
-    borderRadius: vars.radius,
-    backgroundColor: vars.backgroundColor,
-    border: `1px solid ${vars.borderColor}`,
-    color: vars.color,
-    cursor: 'pointer',
-    transition: `all 0.125s ${themeVars.transition.default}`
-});
-
-export const checked = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.blue[500],
-        [vars.backgroundColor]: themeVars.color.blue[500]
-    },
-    selectors: {
-        ['&:after']: {
-            content: '',
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: `calc(${vars.height} - 10px)`,
-            height: `calc(${vars.height} - 10px)`,
-            borderRadius: themeVars.rounded.full,
-            backgroundColor: '#FFF'
-        }
-    }
-});
-
-export const disabled = style({
-    opacity: 0.5,
-    cursor: 'not-allowed'
-});
-
-export const indeterminate = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.blue[500],
-        [vars.backgroundColor]: themeVars.color.blue[500]
-    }
-});
-
-export const label = style({
-    marginLeft: themeVars.space['0.5'],
-    fontWeight: '500',
-    display: 'inline-block',
-    fontSize: themeVars.fontSize.base,
-    wordBreak: 'break-word',
-    cursor: 'pointer'
-});
-
-export const size = styleVariants({
-    xs: {
-        vars: {
-            [vars.height]: sizes.xs
-        }
-    },
-    sm: {
-        vars: {
-            [vars.height]: sizes.sm
-        }
-    },
-    md: {
-        vars: {
-            [vars.height]: sizes.md
-        }
-    },
-    lg: {
-        vars: {
-            [vars.height]: sizes.lg
-        }
-    },
-    xl: {
-        vars: {
-            [vars.height]: sizes.xl
-        }
-    }
-});
+import { createVar, style, styleVariants } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const sizes = {
+    xs: '16px',
+    sm: '18px',
+    md: '20px',
+    lg: '22px',
+    xl: '24px'
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    backgroundColor: createVar(),
+    borderColor: createVar(),
+    color: createVar()
+};
+
+export const base = style({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    gap: themeVars.space['1.5']
+});
+
+export const input = style({
+    position: 'absolute',
+    opacity: 0,
+    cursor: 'pointer'
+});
+
+export const checkmark = style({
+    position: 'absolute',
+    width: `calc(${vars.height} - 2px)`,
+    height: `calc(${vars.height} - 2px)`,
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    color: 'white'
+});
+
+export const checkbox = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: themeVars.rounded.full,
+        [vars.backgroundColor]: 'white',
+        [vars.borderColor]: themeVars.color.gray[300],
+        [vars.color]: themeVars.color.gray[600]
+    },
+    position: 'relative',
+    width: vars.height,
+    height: vars.height,
+    borderRadius: vars.radius,
+    backgroundColor: vars.backgroundColor,
+    border: `1px solid ${vars.borderColor}`,
+    color: vars.color,
+    cursor: 'pointer',
+    transition: `all 0.125s ${themeVars.transition.default}`
+});
+
+export const checked = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500]
+    },
+    selectors: {
+        ['&:after']: {
+            content: '',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: `calc(${vars.height} - 10px)`,
+            height: `calc(${vars.height} - 10px)`,
+            borderRadius: themeVars.rounded.full,
+            backgroundColor: '#FFF'
+        }
+    }
+});
+
+export const disabled = style({
+    opacity: 0.5,
+    cursor: 'not-allowed'
+});
+
+export const indeterminate = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500]
+    }
+});
+
+export const label = style({
+    marginLeft: themeVars.space['0.5'],
+    fontWeight: '500',
+    display: 'inline-block',
+    fontSize: themeVars.fontSize.base,
+    wordBreak: 'break-word',
+    cursor: 'pointer'
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs
+        }
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm
+        }
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md
+        }
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg
+        }
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl
+        }
+    }
+});

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

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

package/src/components/radiobutton/RadioButton.vue

@@ -1,131 +1,131 @@
-<template>
-    <label :class="computedClasses" :disabled="disabled" @click="handleClick" v-bind="$attrs" :aria-selected="selected" :aria-disabled="disabled">
-        <input type="radio" :class="computedRadioClasses" :name="name" :value="id" :disabled="disabled">
-        <span>
-            <slot />
-        </span>
-    </label>
-</template>
-
-<script lang="ts">
-import type {PropType} from "vue";
-import {computed, defineComponent, inject, ref } from "vue";
-import type {Size} from "../../types/props";
-import * as style from "./style";
-import {useInteractive} from "../../composables/useInteractive";
-import {useInput} from "../../composables/useInput";
-import {RADIO_BUTTON_GROUP_STATE} from "../radiobuttongroup/symbol";
-
-export default defineComponent({
-    name: "MRadioButton",
-    props: {
-        ...useInput.props(),
-        ...useInteractive.props(),
-        id: {
-            type: [String, Number],
-            required: true
-        },
-        type: {
-            type: String,
-            default: 'button',
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        icon: {
-            type: Boolean,
-            default: false
-        },
-        onClick: {
-            type: Function as PropType<(e: MouseEvent) => void>,
-            default: () => {
-            }
-        }
-    },
-    emits: ['update:modelValue'],
-    setup(props, {emit, expose}) {
-        const radioRef = ref<HTMLElement | null>(null);
-        const parentState = inject(RADIO_BUTTON_GROUP_STATE, null);
-        const value = computed(() => {
-            return parentState?.modelValue;
-        });
-        const sizeValue = computed<Size>(() => {
-            return parentState?.size || props.size;
-        });
-
-        const name = computed(() => {
-            return parentState?.name;
-        });
-
-        const {focus, blur} = useInteractive(radioRef);
-
-        const {
-            id,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            formError,
-            formDisabled,
-            formLoading,
-            inputListeners
-        } = useInput(props, {focus, emit});
-
-        const selected = computed(() => {
-            // @ts-ignore
-            return value.value === props.id;
-        });
-
-        const computedClasses = computed(() => {
-            return [
-                style.base,
-                [style.size[sizeValue.value]],
-                {
-                    [style.icon]: props.icon,
-                    [style.variant.default]: !selected.value,
-                    [style.variant.active]: selected.value,
-                }
-            ]
-        });
-
-        const computedRadioClasses = computed(() => {
-            return [
-                style.radio
-            ]
-        });
-
-        const handleClick = (e: MouseEvent): void => {
-            if (props.disabled) {
-                e.preventDefault();
-                return;
-            }
-
-            // @ts-ignore
-            parentState.doUpdateValue(props.id);
-            props.onClick(e);
-        };
-
-        expose({
-            focus,
-            blur,
-        })
-
-        return {
-            radioRef,
-            computedClasses,
-            handleClick,
-            selected,
-            value,
-            name,
-            focus,
-            blur,
-            computedRadioClasses
-        }
-    }
-})
-</script>
+<template>
+    <label :class="computedClasses" :disabled="disabled" @click="handleClick" v-bind="$attrs" :aria-selected="selected" :aria-disabled="disabled">
+        <input type="radio" :class="computedRadioClasses" :name="name" :value="id" :disabled="disabled">
+        <span>
+            <slot />
+        </span>
+    </label>
+</template>
+
+<script lang="ts">
+import type {PropType} from "vue";
+import {computed, defineComponent, inject, ref } from "vue";
+import type {Size} from "../../types/props";
+import * as style from "./style";
+import {useInteractive} from "../../composables/useInteractive";
+import {useInput} from "../../composables/useInput";
+import {RADIO_BUTTON_GROUP_STATE} from "../radiobuttongroup/symbol";
+
+export default defineComponent({
+    name: "MRadioButton",
+    props: {
+        ...useInput.props(),
+        ...useInteractive.props(),
+        id: {
+            type: [String, Number],
+            required: true
+        },
+        type: {
+            type: String,
+            default: 'button',
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        icon: {
+            type: Boolean,
+            default: false
+        },
+        onClick: {
+            type: Function as PropType<(e: MouseEvent) => void>,
+            default: () => {
+            }
+        }
+    },
+    emits: ['update:modelValue'],
+    setup(props, {emit, expose}) {
+        const radioRef = ref<HTMLElement | null>(null);
+        const parentState = inject(RADIO_BUTTON_GROUP_STATE, null);
+        const value = computed(() => {
+            return parentState?.modelValue;
+        });
+        const sizeValue = computed<Size>(() => {
+            return parentState?.size || props.size;
+        });
+
+        const name = computed(() => {
+            return parentState?.name;
+        });
+
+        const {focus, blur} = useInteractive(radioRef);
+
+        const {
+            id,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading,
+            inputListeners
+        } = useInput(props, {focus, emit});
+
+        const selected = computed(() => {
+            // @ts-ignore
+            return value.value === props.id;
+        });
+
+        const computedClasses = computed(() => {
+            return [
+                style.base,
+                [style.size[sizeValue.value]],
+                {
+                    [style.icon]: props.icon,
+                    [style.variant.default]: !selected.value,
+                    [style.variant.active]: selected.value,
+                }
+            ]
+        });
+
+        const computedRadioClasses = computed(() => {
+            return [
+                style.radio
+            ]
+        });
+
+        const handleClick = (e: MouseEvent): void => {
+            if (props.disabled) {
+                e.preventDefault();
+                return;
+            }
+
+            // @ts-ignore
+            parentState.doUpdateValue(props.id);
+            props.onClick(e);
+        };
+
+        expose({
+            focus,
+            blur,
+        })
+
+        return {
+            radioRef,
+            computedClasses,
+            handleClick,
+            selected,
+            value,
+            name,
+            focus,
+            blur,
+            computedRadioClasses
+        }
+    }
+})
+</script>