@kvell-group/ui 1.18.1 → 1.18.3

package/mantine/index.ts

@@ -1,2 +1,3 @@
 export * from '@mantine/core'
 export * from '@mantine/hooks'
+export * from '@mantine/form'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.18.1",
+  "version": "1.18.3",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -20,11 +20,15 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@mantine/carousel": "^8.1.3",
     "@mantine/core": "^8.1.3",
+    "@mantine/form": "^8.1.3",
     "@mantine/hooks": "^8.1.3"
   },
   "peerDependencies": {
     "@remixicon/react": "^4.6.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"

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/Button/Button.module.css

@@ -38,6 +38,20 @@
     }
   }
 
+  &[data-variant='ghost'] {
+    background-color: transparent;
+    color: var(--mantine-color-text-base-secondary-0);
+    box-shadow: none;
+
+    &:hover {
+      background-color: var(--mantine-color-background-button-ghost-hover-0);
+    }
+
+    .loader {
+      --button-color: var(--mantine-color-gray-5);
+    }
+  }
+
   &:disabled,
   &[data-disabled] {
     background-color: var(--mantine-color-background-button-primary-disabled-0);

package/src/components/Button/constants.ts

@@ -1,11 +1,13 @@
 export const PRIMARY_BUTTON_VARIANT = 'primary' as const
 export const SECONDARY_BUTTON_VARIANT = 'secondary' as const
 export const TERTIARY_BUTTON_VARIANT = 'tertiary' as const
+export const GHOST_BUTTON_VARIANT = 'ghost' as const
 
 export const ButtonVariants = [
   PRIMARY_BUTTON_VARIANT,
   SECONDARY_BUTTON_VARIANT,
   TERTIARY_BUTTON_VARIANT,
+  GHOST_BUTTON_VARIANT,
 ]
 
 // ----------------------------------------------------------------------

package/src/components/Card/Card.module.css

@@ -0,0 +1,16 @@
+.root:where([data-with-border]) {
+  position: relative;
+  border: none;
+}
+
+.root:where([data-with-border])::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border: calc(0.0625rem * var(--mantine-scale)) solid #0a0f2914;
+  border-radius: inherit;
+}

package/src/components/Card/Card.ts

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

package/src/components/Card/index.ts

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

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,9 @@ 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'
+export { Card } from './components/Card'
 
 // 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

@@ -26,10 +26,12 @@ export const theme: MantineThemeOverride = {
     //buttons
     'background-button-tertiary': colorsTuple('#0a0f290a'),
     'background-button-primary-disabled': colorsTuple('#e9eaec'),
+    'background-button-ghost-hover': colorsTuple('#0A0F290A'),
 
     //icons
     'icon-base-secondary': colorsTuple('#0f132499'),
     'icon-base-tertiary': colorsTuple('#0D112666'),
+    'icon-base-quaternary': colorsTuple('#0A0F2940'),
     'icon-status-success': colorsTuple('#26BD6C'),
     // icon/base/secondary
 
@@ -82,15 +84,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 +110,7 @@ export const theme: MantineThemeOverride = {
   }, //for example
   fontSizes: {
     //blank variables
+    h5: '30px',
     h6: '24px',
     'body-m': '18px',
     'body-l': '20px',
@@ -121,6 +126,7 @@ export const theme: MantineThemeOverride = {
   }, //for example
   lineHeights: {
     //blank variables
+    h5: '36px',
     h6: '32px',
     'body-m': '26px',
     'body-s': '24px',