@teammodlr/ui-kit 2.0.25 → 2.0.27

package/src/shims-vue.d.ts

@@ -1,6 +1,6 @@
-// shims-vue.d.ts
-declare module '*.vue' {
-    import type { DefineComponent } from 'vue'
-    const component: DefineComponent<{}, {}, any>
-    export default component
-}
+// shims-vue.d.ts
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

package/src/styles/theme.css.ts

@@ -1,170 +1,170 @@
-import {createGlobalTheme, globalStyle, styleVariants} from '@vanilla-extract/css';
-import {fonts} from "./typography.css";
-
-export const spaceScale = {
-    '0': '0px',
-    '0.5': '2px',
-    '1': '4px',
-    '1.5': '6px',
-    '2': '8px',
-    '2.5': '10px',
-    '3': '12px',
-    '3.5': '14px',
-    '4': '16px',
-    '5': '18px',
-};
-
-export const marginVariants = styleVariants(spaceScale, (space) => ({
-    margin: space
-}));
-
-export const borderRadiusScale = {
-    'none': '0px',
-    'xsmall': '1px',
-    'small': '2px',
-    'default': '4px',
-    'medium': '6px',
-    'large': '8px',
-    'xlarge': '12px',
-    'full': '9999px',
-};
-
-export const borderRadiusVariants = styleVariants(borderRadiusScale, (borderRadius) => ({
-    borderRadius: borderRadius
-}));
-
-export const fontSizeScale = {
-    'base': '14px',
-    'xsmall': '10px',
-    'small': '12px',
-    'large': '16px',
-    'xlarge': '18px',
-    'xxlarge': '20px',
-};
-
-export const fontSizeVariants = styleVariants(fontSizeScale, (fontSize) => ({
-    fontSize: fontSize
-}));
-
-export const shadows = {
-    'sm': '0px 3px 6px 1px rgb(154 161 171 / 15%)',
-    'md': '0px 4px 10px 1px rgb(154 161 171 / 20%)',
-    'lg': '0px 7px 14px 1px rgb(154 161 171 / 23%)'
-}
-
-export const shadowVariants = styleVariants(shadows, (shadow) => ({
-    boxShadow: shadow
-}));
-
-export const transitions = {
-    'default': 'cubic-bezier(0.4, 0, 0.2, 1)',
-}
-
-export const transitionsVariants = styleVariants(transitions, (transition) => ({
-    transition: transition
-}));
-
-export const themeVars = createGlobalTheme(':root', {
-    color: {
-        font: {
-            default: '#1F2328',
-            muted: '#656d76',
-            subtle: '#6e7781',
-            text: '#24292f'
-        },
-        gray: {
-            50: 'hsl(0,0%,98%)',
-            100: '#f6f8fa',
-            150: '#f2f3f5',
-            200: '#eaeef2',
-            250: '#f3f4f6',
-            300: '#d0d7de',
-            400: '#afb8c1',
-            500: '#8c959f',
-            600: '#6e7781',
-            700: '#57606a',
-            800: '#424a53',
-            900: '#32383f',
-        },
-        blue: {
-            50: 'hsl(214,100%,96.9%)',
-            100: 'hsl(214,94.6%,92.7%)',
-            200: 'hsl(213,96.9%,87.3%)',
-            300: 'hsl(212,96.4%,78.4%)',
-            400: 'hsl(213,93.9%,67.8%)',
-            500: 'hsl(217,91.2%,59.8%)',
-            600: 'hsl(221,83.2%,53.3%)',
-            700: 'hsl(224,76.3%,48%)',
-            800: 'hsl(226,70.7%,40.2%)',
-            900: 'hsl(224,64.3%,32.9%)',
-        },
-        amber: {
-            50: 'hsl(48,100%,96.1%)',
-            100: 'hsl(48,96.5%,88.8%)',
-            200: 'hsl(48,96.6%,76.7%)',
-            300: 'hsl(46,96.7%,64.5%)',
-            400: 'hsl(43,96.4%,56.3%)',
-            500: 'hsl(38,92.1%,50.2%)',
-            600: 'hsl(32,94.6%,43.7%)',
-            700: 'hsl(26,90.5%,37.1%)',
-            800: 'hsl(23,82.5%,31.4%)',
-            900: 'hsl(22,77.8%,26.5%)',
-        },
-        red: {
-            50: 'hsl(0,85.7%,97.3%)',
-            100: 'hsl(0,93.3%,94.1%)',
-            200: 'hsl(0,96.3%,89.4%)',
-            300: 'hsl(0,93.5%,81.8%)',
-            400: 'hsl(0,90.6%,70.8%)',
-            500: 'hsl(0,84.2%,60.2%)',
-            600: 'hsl(0,72.2%,50.6%)',
-            700: 'hsl(0,73.7%,41.8%)',
-            800: 'hsl(0,70%,35.3%)',
-            900: 'hsl(0,62.8%,30.6%)',
-        },
-        green: {
-            50: 'hsl(152,81%,95.9%)',
-            100: 'hsl(149,80.4%,90%)',
-            200: 'hsl(152,76%,80.4%)',
-            300: 'hsl(156,71.6%,66.9%)',
-            400: 'hsl(158,64.4%,51.6%)',
-            500: 'hsl(160,84.1%,39.4%)',
-            600: 'hsl(161,93.5%,30.4%)',
-            700: 'hsl(163,93.5%,24.3%)',
-            800: 'hsl(163,88.1%,19.8%)',
-            900: 'hsl(164,85.7%,16.5%)',
-        },
-        primary: 'hsl(217,91.2%,59.8%)',
-        saxe: {
-            50: '#D0D4E9',
-            100: '#C1C5E2',
-            200: '#A1A8D3',
-            300: '#828CC4',
-            400: '#636FB6',
-            500: '#4B57A0',
-            600: '#3C4680',
-            700: '#2E3561',
-            800: '#1F2442',
-            900: '#14172A',
-            950: '#0E101E'
-        }
-    },
-    space: spaceScale,
-    fontSize: fontSizeScale,
-    shadow: shadows,
-    transition: transitions,
-    rounded: borderRadiusScale,
-});
-
-globalStyle("*", {
-    boxSizing: 'border-box',
-});
-
-globalStyle("html, body", {
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-    color: themeVars.color.font.default
-});
-
-globalStyle("strong, h1, h2, h3, h4, h5, h6", {
-    fontWeight: "500",
-});
+import {createGlobalTheme, globalStyle, styleVariants} from '@vanilla-extract/css';
+import {fonts} from "./typography.css";
+
+export const spaceScale = {
+    '0': '0px',
+    '0.5': '2px',
+    '1': '4px',
+    '1.5': '6px',
+    '2': '8px',
+    '2.5': '10px',
+    '3': '12px',
+    '3.5': '14px',
+    '4': '16px',
+    '5': '18px',
+};
+
+export const marginVariants = styleVariants(spaceScale, (space) => ({
+    margin: space
+}));
+
+export const borderRadiusScale = {
+    'none': '0px',
+    'xsmall': '1px',
+    'small': '2px',
+    'default': '4px',
+    'medium': '6px',
+    'large': '8px',
+    'xlarge': '12px',
+    'full': '9999px',
+};
+
+export const borderRadiusVariants = styleVariants(borderRadiusScale, (borderRadius) => ({
+    borderRadius: borderRadius
+}));
+
+export const fontSizeScale = {
+    'base': '14px',
+    'xsmall': '10px',
+    'small': '12px',
+    'large': '16px',
+    'xlarge': '18px',
+    'xxlarge': '20px',
+};
+
+export const fontSizeVariants = styleVariants(fontSizeScale, (fontSize) => ({
+    fontSize: fontSize
+}));
+
+export const shadows = {
+    'sm': '0px 3px 6px 1px rgb(154 161 171 / 15%)',
+    'md': '0px 4px 10px 1px rgb(154 161 171 / 20%)',
+    'lg': '0px 7px 14px 1px rgb(154 161 171 / 23%)'
+}
+
+export const shadowVariants = styleVariants(shadows, (shadow) => ({
+    boxShadow: shadow
+}));
+
+export const transitions = {
+    'default': 'cubic-bezier(0.4, 0, 0.2, 1)',
+}
+
+export const transitionsVariants = styleVariants(transitions, (transition) => ({
+    transition: transition
+}));
+
+export const themeVars = createGlobalTheme(':root', {
+    color: {
+        font: {
+            default: '#1F2328',
+            muted: '#656d76',
+            subtle: '#6e7781',
+            text: '#24292f'
+        },
+        gray: {
+            50: 'hsl(0,0%,98%)',
+            100: '#f6f8fa',
+            150: '#f2f3f5',
+            200: '#eaeef2',
+            250: '#f3f4f6',
+            300: '#d0d7de',
+            400: '#afb8c1',
+            500: '#8c959f',
+            600: '#6e7781',
+            700: '#57606a',
+            800: '#424a53',
+            900: '#32383f',
+        },
+        blue: {
+            50: 'hsl(214,100%,96.9%)',
+            100: 'hsl(214,94.6%,92.7%)',
+            200: 'hsl(213,96.9%,87.3%)',
+            300: 'hsl(212,96.4%,78.4%)',
+            400: 'hsl(213,93.9%,67.8%)',
+            500: 'hsl(217,91.2%,59.8%)',
+            600: 'hsl(221,83.2%,53.3%)',
+            700: 'hsl(224,76.3%,48%)',
+            800: 'hsl(226,70.7%,40.2%)',
+            900: 'hsl(224,64.3%,32.9%)',
+        },
+        amber: {
+            50: 'hsl(48,100%,96.1%)',
+            100: 'hsl(48,96.5%,88.8%)',
+            200: 'hsl(48,96.6%,76.7%)',
+            300: 'hsl(46,96.7%,64.5%)',
+            400: 'hsl(43,96.4%,56.3%)',
+            500: 'hsl(38,92.1%,50.2%)',
+            600: 'hsl(32,94.6%,43.7%)',
+            700: 'hsl(26,90.5%,37.1%)',
+            800: 'hsl(23,82.5%,31.4%)',
+            900: 'hsl(22,77.8%,26.5%)',
+        },
+        red: {
+            50: 'hsl(0,85.7%,97.3%)',
+            100: 'hsl(0,93.3%,94.1%)',
+            200: 'hsl(0,96.3%,89.4%)',
+            300: 'hsl(0,93.5%,81.8%)',
+            400: 'hsl(0,90.6%,70.8%)',
+            500: 'hsl(0,84.2%,60.2%)',
+            600: 'hsl(0,72.2%,50.6%)',
+            700: 'hsl(0,73.7%,41.8%)',
+            800: 'hsl(0,70%,35.3%)',
+            900: 'hsl(0,62.8%,30.6%)',
+        },
+        green: {
+            50: 'hsl(152,81%,95.9%)',
+            100: 'hsl(149,80.4%,90%)',
+            200: 'hsl(152,76%,80.4%)',
+            300: 'hsl(156,71.6%,66.9%)',
+            400: 'hsl(158,64.4%,51.6%)',
+            500: 'hsl(160,84.1%,39.4%)',
+            600: 'hsl(161,93.5%,30.4%)',
+            700: 'hsl(163,93.5%,24.3%)',
+            800: 'hsl(163,88.1%,19.8%)',
+            900: 'hsl(164,85.7%,16.5%)',
+        },
+        primary: 'hsl(217,91.2%,59.8%)',
+        saxe: {
+            50: '#D0D4E9',
+            100: '#C1C5E2',
+            200: '#A1A8D3',
+            300: '#828CC4',
+            400: '#636FB6',
+            500: '#4B57A0',
+            600: '#3C4680',
+            700: '#2E3561',
+            800: '#1F2442',
+            900: '#14172A',
+            950: '#0E101E'
+        }
+    },
+    space: spaceScale,
+    fontSize: fontSizeScale,
+    shadow: shadows,
+    transition: transitions,
+    rounded: borderRadiusScale,
+});
+
+globalStyle("*", {
+    boxSizing: 'border-box',
+});
+
+globalStyle("html, body", {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    color: themeVars.color.font.default
+});
+
+globalStyle("strong, h1, h2, h3, h4, h5, h6", {
+    fontWeight: "500",
+});

package/src/styles/typography.css.ts

@@ -1,91 +1,91 @@
-import type { FontMetrics } from "@capsizecss/core";
-import interFontMetrics from "@capsizecss/metrics/inter";
-import { createTextStyle } from "@capsizecss/vanilla-extract";
-import { style } from "@vanilla-extract/css";
-
-interface Meta {
-    fallback: string;
-    file: string;
-    format: string;
-    metrics: FontMetrics;
-    name: string;
-    wghtRange: string;
-    wghts: {
-        [key: string]: number;
-    };
-}
-
-type FontFamilyId = "INTER";
-
-type Fonts = Record<FontFamilyId, Meta>;
-
-const FONT_DIR = `/fonts`;
-
-export const fonts: Fonts = {
-    INTER: {
-        fallback: `sans-serif`,
-        file: ``,
-        format: `truetype-variations`,
-        metrics: interFontMetrics,
-        name: `Inter`,
-        wghtRange: `100 900`,
-        wghts: {
-            "400": 400,
-            "500": 500,
-            "600": 600,
-            "700": 700,
-        },
-    },
-};
-
-// https://type-scale.com
-// Major Third
-// base: 16
-const typeScale = {
-    s: 12.8,
-    m: 16,
-    l: 20,
-    xl: 25,
-};
-
-interface Props {
-    id: FontFamilyId;
-    leading: number;
-    size: number;
-}
-
-function calcFontCss({ id, leading, size }: Props) {
-    return style([
-        createTextStyle({
-            fontMetrics: fonts[id].metrics,
-            fontSize: size,
-            leading,
-        }),
-        {
-            fontFamily: `"${fonts[id].name}", ${fonts[id].fallback}`,
-        },
-    ]);
-}
-
-export const fontStyles = {
-    INTER_SMALL: calcFontCss({
-        id: "INTER",
-        leading: 16.5,
-        size: typeScale.s,
-    }),
-    INTER_MED: calcFontCss({
-        id: "INTER",
-        leading: 21,
-        size: typeScale.m,
-    }),
-    INTER_LARGE: calcFontCss({
-        id: "INTER",
-        leading: 25,
-        size: typeScale.l,
-    }),
-    INTER_XLARGE: calcFontCss({
-        id: "INTER",
-        leading: 32,
-        size: typeScale.xl,
-    }),
-};
+import type { FontMetrics } from "@capsizecss/core";
+import interFontMetrics from "@capsizecss/metrics/inter";
+import { createTextStyle } from "@capsizecss/vanilla-extract";
+import { style } from "@vanilla-extract/css";
+
+interface Meta {
+    fallback: string;
+    file: string;
+    format: string;
+    metrics: FontMetrics;
+    name: string;
+    wghtRange: string;
+    wghts: {
+        [key: string]: number;
+    };
+}
+
+type FontFamilyId = "INTER";
+
+type Fonts = Record<FontFamilyId, Meta>;
+
+const FONT_DIR = `/fonts`;
+
+export const fonts: Fonts = {
+    INTER: {
+        fallback: `sans-serif`,
+        file: ``,
+        format: `truetype-variations`,
+        metrics: interFontMetrics,
+        name: `Inter`,
+        wghtRange: `100 900`,
+        wghts: {
+            "400": 400,
+            "500": 500,
+            "600": 600,
+            "700": 700,
+        },
+    },
+};
+
+// https://type-scale.com
+// Major Third
+// base: 16
+const typeScale = {
+    s: 12.8,
+    m: 16,
+    l: 20,
+    xl: 25,
+};
+
+interface Props {
+    id: FontFamilyId;
+    leading: number;
+    size: number;
+}
+
+function calcFontCss({ id, leading, size }: Props) {
+    return style([
+        createTextStyle({
+            fontMetrics: fonts[id].metrics,
+            fontSize: size,
+            leading,
+        }),
+        {
+            fontFamily: `"${fonts[id].name}", ${fonts[id].fallback}`,
+        },
+    ]);
+}
+
+export const fontStyles = {
+    INTER_SMALL: calcFontCss({
+        id: "INTER",
+        leading: 16.5,
+        size: typeScale.s,
+    }),
+    INTER_MED: calcFontCss({
+        id: "INTER",
+        leading: 21,
+        size: typeScale.m,
+    }),
+    INTER_LARGE: calcFontCss({
+        id: "INTER",
+        leading: 25,
+        size: typeScale.l,
+    }),
+    INTER_XLARGE: calcFontCss({
+        id: "INTER",
+        leading: 32,
+        size: typeScale.xl,
+    }),
+};

package/src/types/props.ts

@@ -1,5 +1,5 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type Color = 'white' | 'black' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
-
-export type Variant = 'default' | 'tertiary' | 'primary' | 'dark' | 'success' | 'warning' | 'error';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type Color = 'white' | 'black' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
+
+export type Variant = 'default' | 'tertiary' | 'primary' | 'dark' | 'success' | 'warning' | 'error';

package/volar.d.ts

@@ -1,16 +1,16 @@
-declare module 'vue' {
-    export interface GlobalComponents {
-        MAvatar: typeof import ('@teammodlr/ui-kit')['MAvatar']
-        MAvatarGroup: typeof import ('@teammodlr/ui-kit')['MAvatarGroup']
-        MBreadcrumb: typeof import ('@teammodlr/ui-kit')['MBreadcrumb']
-        MBreadcrumbItem: typeof import ('@teammodlr/ui-kit')['MBreadcrumbItem']
-        MButton: typeof import ('@teammodlr/ui-kit')['MButton']
-        MInput: typeof import ('@teammodlr/ui-kit')['MInput']
-        MMessageProvider: typeof import ('@teammodlr/ui-kit')['MMessageProvider']
-        MTree: typeof import ('@teammodlr/ui-kit')['MTree']
-        MVirtualScroll: typeof import ('@teammodlr/ui-kit')['MVirtualScroll']
-        [key: string]: any
-    }
-}
-
-export {}
+declare module 'vue' {
+    export interface GlobalComponents {
+        MAvatar: typeof import ('@teammodlr/ui-kit')['MAvatar']
+        MAvatarGroup: typeof import ('@teammodlr/ui-kit')['MAvatarGroup']
+        MBreadcrumb: typeof import ('@teammodlr/ui-kit')['MBreadcrumb']
+        MBreadcrumbItem: typeof import ('@teammodlr/ui-kit')['MBreadcrumbItem']
+        MButton: typeof import ('@teammodlr/ui-kit')['MButton']
+        MInput: typeof import ('@teammodlr/ui-kit')['MInput']
+        MMessageProvider: typeof import ('@teammodlr/ui-kit')['MMessageProvider']
+        MTree: typeof import ('@teammodlr/ui-kit')['MTree']
+        MVirtualScroll: typeof import ('@teammodlr/ui-kit')['MVirtualScroll']
+        [key: string]: any
+    }
+}
+
+export {}