@kvell-group/ui 1.18.0 → 1.18.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.18.0",
+  "version": "1.18.2",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -20,13 +20,16 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@mantine/core": "^8.0.2",
-    "@mantine/hooks": "^8.0.2"
+    "@mantine/carousel": "^8.1.3",
+    "@mantine/core": "^8.1.3",
+    "@mantine/hooks": "^8.1.3"
   },
   "peerDependencies": {
     "@remixicon/react": "^4.6.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "embla-carousel": "^8.5.2",
+    "embla-carousel-react": "^8.5.2",
+    "react": "^18.x || ^19.x",
+    "react-dom": "^18.x || ^19.x",
     "react-imask": "^7.6.1"
   },
   "devDependencies": {

package/src/components/Badge/Badge.module.css

@@ -0,0 +1,23 @@
+.root {
+  --badge-height-lg: rem(28px);
+  --badge-padding-x-lg: rem(6px);
+  --badge-fz-lg: var(--mantine-font-size-caption-l);
+
+  font-family: var(--mantine-font-family);
+  text-transform: none;
+  font-weight: 500;
+}
+
+.section {
+  margin-inline: 0;
+}
+
+.label {
+  margin-bottom: rem(-1px);
+}
+
+.root[data-size='lg'] > .label {
+  padding-inline: rem(4px);
+  letter-spacing: var(--mantine-spacing-caption-l);
+  line-height: var(--mantine-line-height-caption-l);
+}

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,5 @@
+import { Badge as MantineBadge } from '@mantine/core'
+import '@mantine/core/styles/Badge.layer.css'
+import classNames from './Badge.module.css'
+
+export const Badge = MantineBadge.withProps({ classNames })

package/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export { Badge } from './Badge'

package/src/components/Carousel/Carousel.ts

@@ -0,0 +1,2 @@
+import '@mantine/carousel/styles.layer.css'
+export * from '@mantine/carousel'

package/src/components/Carousel/index.ts

@@ -0,0 +1 @@
+export * from './Carousel'

package/src/components/KvellUiProvider/KvellUiProvider.module.css

@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url('./../../assets/fonts/onest-cyr-ext.woff2') format('woff2');
+  src: url('../../assets/fonts/onest-cyr-ext.woff2') format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
@@ -14,7 +14,7 @@
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url('./../../assets/fonts/onest-cyr.woff2') format('woff2');
+  src: url('../../assets/fonts/onest-cyr.woff2') format('woff2');
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
@@ -24,7 +24,7 @@
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url('./../../assets/fonts/onest-lat-ext.woff2') format('woff2');
+  src: url('../../assets/fonts/onest-lat-ext.woff2') format('woff2');
   unicode-range:
     U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
     U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
@@ -37,7 +37,7 @@
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url('./../../assets/fonts/onest-lat.woff2') format('woff2');
+  src: url('../../assets/fonts/onest-lat.woff2') format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
     U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

package/src/constants/font-variants.ts

@@ -1,4 +1,5 @@
 //heading
+export const H5_MEDIUM_FONT_VARIANT = 'h5-medium' as const
 export const H6_BOLD_FONT_VARIANT = 'h6-bold' as const
 
 //body
@@ -7,6 +8,7 @@ export const BODY_M_BOLD_FONT_VARIANT = 'body-m-bold' as const
 export const BODY_L_BOLD_FONT_VARIANT = 'body-l-bold' as const
 export const BODY_S_MEDIUM_FONT_VARIANT = 'body-s-medium' as const
 export const BODY_S_REGULAR_FONT_VARIANT = 'body-s-regular' as const
+export const BODY_S_SEMIBOLD_FONT_VARIANT = 'body-s-semibold' as const
 
 //caption
 export const CAPTION_L_MEDIUM_FONT_VARIANT = 'caption-l-medium' as const
@@ -17,6 +19,7 @@ export const CAPTION_M_REGULAR_FONT_VARIANT = 'caption-m-regular' as const
 
 export const FontVariants = [
   //heading
+  H5_MEDIUM_FONT_VARIANT,
   H6_BOLD_FONT_VARIANT,
   //body
   BODY_L_BOLD_FONT_VARIANT,
@@ -24,6 +27,7 @@ export const FontVariants = [
   BODY_M_BOLD_FONT_VARIANT,
   BODY_S_MEDIUM_FONT_VARIANT,
   BODY_S_REGULAR_FONT_VARIANT,
+  BODY_S_SEMIBOLD_FONT_VARIANT,
   //caption
   CAPTION_L_MEDIUM_FONT_VARIANT,
   CAPTION_L_REGULAR_FONT_VARIANT,

package/src/index.ts

@@ -19,6 +19,8 @@ export { CardLogoByPan } from './components/CardLogoByPan'
 export { Loader } from './components/Loader'
 export { Modal } from './components/Modal'
 export { Text } from './components/Text'
+export { Badge } from './components/Badge'
+export { Carousel } from './components/Carousel'
 
 // core-components ------------------------------------------------------
 

package/src/styles/typography.module.css

@@ -1,3 +1,11 @@
+.h5-medium {
+  font-family: var(--mantine-font-family);
+  font-weight: 500;
+  font-size: var(--mantine-font-size-h5);
+  line-height: var(--mantine-line-height-h5);
+  letter-spacing: var(--mantine-spacing-h5);
+}
+
 /* heading */
 .h6-bold {
   font-family: var(--mantine-font-family);
@@ -49,6 +57,14 @@ h2.body-m-medium,
   letter-spacing: var(--mantine-spacing-body-s);
 }
 
+.body-s-semibold {
+  font-family: var(--mantine-font-family);
+  font-weight: 600;
+  font-size: var(--mantine-font-size-body-s);
+  line-height: var(--mantine-line-height-body-s);
+  letter-spacing: var(--mantine-spacing-body-s);
+}
+
 /* caption */
 .caption-l-medium {
   font-family: var(--mantine-font-family);

package/src/theme/index.ts

@@ -82,15 +82,17 @@ export const theme: MantineThemeOverride = {
   }, */
   radius: {
     // same name from blank and mantine
-    xl: '0.75rem',
     xs: '0.25rem',
     sm: '0.375rem',
     md: '0.5rem',
     lg: '0.625rem',
+    xl: '0.75rem',
+    xxl: '1rem',
   },
   defaultRadius: 'xl',
   spacing: {
     //blank variables
+    h5: '-0.5px',
     h6: '-0.30000001192092896px',
     'body-m': '-0.20000000298023224px',
     'body-s': '-0.20000000298023224px',
@@ -106,6 +108,7 @@ export const theme: MantineThemeOverride = {
   }, //for example
   fontSizes: {
     //blank variables
+    h5: '30px',
     h6: '24px',
     'body-m': '18px',
     'body-l': '20px',
@@ -121,6 +124,7 @@ export const theme: MantineThemeOverride = {
   }, //for example
   lineHeights: {
     //blank variables
+    h5: '36px',
     h6: '32px',
     'body-m': '26px',
     'body-s': '24px',