@kvell-group/ui 1.7.1 → 1.8.0

package/dist/components/MainProvider/MantineProvider.js

@@ -1,5 +1,5 @@
 import { jsx as v, jsxs as I } from "react/jsx-runtime";
-import { u as E, a as j, k as d, e as M, g as p, p as z, b as f, r as D, d as R, D as B, c as G, M as U, f as q } from "../../MantineThemeProvider-CyD9KzqB.js";
+import { u as E, b as j, k as d, e as M, c as p, p as z, d as f, r as D, f as R, D as B, h as G, M as U, i as q } from "../../MantineThemeProvider-kHsOfZUW.js";
 import { useLayoutEffect as J, useEffect as k, useRef as K, useState as Q, useCallback as S } from "react";
 function X(r) {
   var o;

package/dist/components/Typography/TypographyBodySMedium.d.ts

@@ -0,0 +1,2 @@
+import { TypographyProps } from './types';
+export declare const TypographyBodySMedium: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Typography/TypographyBodySMedium.js

@@ -0,0 +1,14 @@
+import { jsx as s } from "react/jsx-runtime";
+import { T as t } from "../../Text-B8e4XllM.js";
+import '../../assets/TypographyBodySMedium.css';const r = "_root_41o9b_1", m = {
+  root: r
+}, c = (o) => /* @__PURE__ */ s(
+  t,
+  {
+    ...o,
+    classNames: m
+  }
+);
+export {
+  c as TypographyBodySMedium
+};

package/dist/components/Typography/TypographyCaptionLMedium.d.ts

@@ -0,0 +1,2 @@
+import { TypographyProps } from './types';
+export declare const TypographyCaptionLMedium: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Typography/TypographyCaptionLMedium.js

@@ -0,0 +1,14 @@
+import { jsx as s } from "react/jsx-runtime";
+import { T as t } from "../../Text-B8e4XllM.js";
+import '../../assets/TypographyCaptionLMedium.css';const r = "_root_k5pqg_1", a = {
+  root: r
+}, e = (o) => /* @__PURE__ */ s(
+  t,
+  {
+    ...o,
+    classNames: a
+  }
+);
+export {
+  e as TypographyCaptionLMedium
+};

package/dist/components/Typography/types.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from '@mantine/core';
+import { ReactNode } from 'react';
+export type TypographyProps = {
+    children: ReactNode;
+} & TextProps;

package/dist/components/Typography/types.js

@@ -0,0 +1 @@
+

package/dist/components/theme.js

@@ -1,7 +1,7 @@
-function e(r) {
+function a(r) {
   return Array.isArray(r) ? r : Array(10).fill(r);
 }
-const a = {
+const e = {
   focusRing: "never",
   scale: 1,
   //default value
@@ -10,11 +10,12 @@ const a = {
   // white: 'ffffff',
   black: "#14151a",
   colors: {
-    primary: e("#14151a"),
-    white: e("#ffffff")
+    primary: a("#14151a"),
+    secondary: a("#ffffff"),
+    tertiary: a("#0a0f290a")
   },
   primaryShade: 6,
-  // { light: 6, dark: 8 } by theme
+  // { light: 6, dark: 8 } default mantine by theme
   primaryColor: "primary",
   /* variantColorResolver: ({ color, variant, gradient, theme }) => {
       if (variant === 'primary') {
@@ -47,20 +48,50 @@ const a = {
       //..
     },
   }, */
-  radius: { xs: "6px", sm: "8px", md: "12px", lg: "16px", xl: "18px" },
+  radius: {
+    xl: "12px"
+    // xs: '6px', sm: '8px', md: '12px', lg: '16px',
+  },
   //!!!TODO sync with blank
   defaultRadius: "sm",
-  // spacing: { xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px' }, //for example
-  // fontSizes: { xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px' }, //for example
-  // lineHeights: { xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px' }, //for example
-  // breakpoints: { xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px' }, //for example
-  /* shadows: {
-    xs: '1px 1px 3px rgba(0, 0, 0, .25)',
-    sm: '1px 1px 3px rgba(0, 0, 0, .25)',
-    md: '1px 1px 3px rgba(0, 0, 0, .25)',
-    lg: '1px 1px 3px rgba(0, 0, 0, .25)',
-    xl: '1px 1px 3px rgba(0, 0, 0, .25)',
-  }, //for example */
+  spacing: {
+    //blank variables
+    "body-s": " -0.20000000298023224px",
+    "caption-l": "-0.10000000149011612px;"
+    //mantine variables !!!TODO sync with mantine
+    // xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px'
+  },
+  //for example
+  fontSizes: {
+    //blank variables
+    "body-s-medium": "16px",
+    "caption-l": "14px",
+    // mantine variables !!!TODO sync with mantine
+    xs: "6px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "18px"
+  },
+  //for example
+  lineHeights: {
+    //blank variables
+    "body-s": "24px",
+    "caption-l": "20px"
+    // mantine variables !!!TODO sync with mantine
+    // xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px'
+  },
+  //for example
+  // breakpoints: { xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px' }, //for example !!!TODO sync with mantine
+  shadows: {
+    //same name for mantine and
+    xs: "0px 1px 2px 0px #14151A0D"
+    // sm: '1px 1px 3px rgba(0, 0, 0, .25)',
+    // md: '1px 1px 3px rgba(0, 0, 0, .25)',
+    // lg: '1px 1px 3px rgba(0, 0, 0, .25)',
+    // xl: '1px 1px 3px rgba(0, 0, 0, .25)',
+  },
+  //for example
   respectReducedMotion: !1,
   //default
   cursorType: "default",
@@ -78,8 +109,33 @@ const a = {
   }, */
   other: {
     // any additional vars
+    /* usage:
+      import { createStyles } from '@mantine/core';
+    
+      const useStyles = createStyles((theme) => ({
+        customBox: {
+          padding: theme.other.customSpacing,
+          backgroundColor: theme.other.brandColor,
+        },
+      }));
+    
+      function MyComponent() {
+        const { classes } = useStyles();
+    
+        return <div className={classes.customBox}>Hello Mantine</div>;
+      }
+        
+      // theme-override.d.ts
+      import '@mantine/core';
+    
+      declare module '@mantine/core' {
+        export interface MantineThemeOther {
+          customSpacing: string;
+          brandColor: string;
+        }
+      }*/
   }
 };
 export {
-  a as theme
+  e as theme
 };