@kvell-group/ui 1.16.25 → 1.18.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.16.25",
+  "version": "1.18.0",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/Button/Button.stories.tsx

@@ -4,7 +4,7 @@ import { KvellUiProvider } from '@/components/KvellUiProvider'
 
 import { RiArrowLeftLine as ArrowLeftSVG, RiLockLine as LockSVG } from '@remixicon/react'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { Button } from '@/components/Button'
 import { Text } from '@/components/Text/Text'
 import {

package/src/components/Button/Button.tsx

@@ -4,7 +4,7 @@ import '@mantine/core/styles/UnstyledButton.layer.css'
 import '@mantine/core/styles/Button.layer.css'
 import classNames from './Button.module.css'
 import { forwardRef } from 'react'
-import { ExtendedButtonVariant } from './types'
+import type { ExtendedButtonVariant } from './types'
 
 // ----------------------------------------------------------------------
 

package/src/components/Button/types.ts

@@ -1,5 +1,5 @@
 import { ButtonVariants } from './constants'
-import { ButtonVariant } from '@mantine/core'
+import type { ButtonVariant } from '@mantine/core'
 
 // ----------------------------------------------------------------------
 

package/src/components/CardLogoByPan/CardLogoByPan.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 
 import { CardLogoByPan as CardLogoByPanComponent } from '@/components/CardLogoByPan/CardLogoByPan'
 

package/src/components/Inputs/CardExpireDateInput/CardExpireDateInput.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { CardExpireDateInput as CardExpireDateInputComponent } from '@/components/Inputs/CardExpireDateInput'
 
 // ----------------------------------------------------------------------

package/src/components/Inputs/CardInput/CardInput.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 
 import { CardInput as CardInputComponent } from '@/components/Inputs/CardInput'
 

package/src/components/Inputs/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { Checkbox as CheckboxComponent } from '@/components/Inputs/Checkbox'
 import { Text } from '@/components/Text'
 import { Anchor } from '@mantine/core'

package/src/components/Inputs/CvvInput/CvvInput.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { CvvInput as CvvInputComponent } from '@/components/Inputs/CvvInput'
 
 // ----------------------------------------------------------------------

package/src/components/Inputs/Input/Input.module.css

@@ -9,6 +9,7 @@
   &[data-error] {
     border: 1px solid var(--mantine-color-border-action-destructive-0);
     margin-bottom: -0.125px;
+    color: var(--mantine-color-text-status-destructive-0);
   }
 
   [data-position='left'] ~ & {

package/src/components/Inputs/Input/Input.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { Input as InputComponent } from '@/components/Inputs/Input/Input'
 
 // ----------------------------------------------------------------------

package/src/components/Inputs/MaskedInput/MaskedInput.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { MaskedInput as MaskedInputComponent } from '@/components/Inputs/MaskedInput'
 
 import { PHONE_MASK } from '@/constants/masks'

package/src/components/Inputs/PasswordInput/PasswordInput.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { PasswordInput as PasswordInputComponent } from '@/components/Inputs/PasswordInput/PasswordInput'
 
 // ----------------------------------------------------------------------

package/src/components/Inputs/Switch/Switch.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { Switch } from '@/components/Inputs/Switch'
 
 // ----------------------------------------------------------------------

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

@@ -1,5 +1,44 @@
+/* cyrillic-ext */
 @font-face {
-  font-family: 'Inter';
-  src: url(./../../assets/fonts/inter.woff2) format('woff2');
+  font-family: Onest;
+  font-style: normal;
   font-weight: 100 900;
+  font-display: swap;
+  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;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: Onest;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('./../../assets/fonts/onest-cyr.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: Onest;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  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,
+    U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: Onest;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  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/components/Loader/Loader.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { Loader } from '@/components/Loader'
 import { LoaderSizes } from '@/components/Loader/constants'
 

package/src/components/Modal/Modal.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 import { Text } from '@/components/Text'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { Modal } from '@/components/Modal'
 import { Button } from '@/components/Button'
 

package/src/components/Text/Text.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { KvellUiProvider } from '@/components/KvellUiProvider'
 
-import { theme } from '@/components/theme'
+import { theme } from '@/theme'
 import { Text } from '@/components/Text/Text'
 import { FontVariants } from '@/constants/font-variants'
 

package/src/components/Text/Text.tsx

@@ -1,6 +1,6 @@
 import type { TextProps as TextBaseProps } from '@mantine/core'
 import { Text as TextBase } from '@mantine/core'
-import { forwardRef, ReactNode, Ref } from 'react'
+import { forwardRef, type ReactNode, type Ref } from 'react'
 
 import classesNames from '../../styles/typography.module.css'
 import type { TextVariants } from './types'

package/src/index.ts

@@ -1,9 +1,5 @@
-// components
-export { Button } from './components/Button'
-export { CardLogoByPan } from './components/CardLogoByPan'
-
 // constants
-export { theme } from './components/theme'
+export { theme } from './theme'
 
 //inputs
 export { Input } from './components/Inputs/Input'
@@ -14,14 +10,17 @@ export { CvvInput } from './components/Inputs/CvvInput'
 export { Checkbox } from './components/Inputs/Checkbox'
 export { Switch } from './components/Inputs/Switch'
 
+//providers
+export { KvellUiProvider } from './components/KvellUiProvider'
+
+//components
+export { Button } from './components/Button'
+export { CardLogoByPan } from './components/CardLogoByPan'
 export { Loader } from './components/Loader'
 export { Modal } from './components/Modal'
 export { Text } from './components/Text'
 
-//providers
-export { KvellUiProvider } from './components/KvellUiProvider'
+// core-components ------------------------------------------------------
 
-//core-components
-// ----------------------------------------------------------------------
 //Miscellaneous
-export { Divider } from './core-components/Divider'
+export { Divider } from './components/@core/Divider'

package/src/{components/theme.ts → theme/index.ts}

@@ -1,4 +1,4 @@
-import { colorsTuple, MantineThemeOverride } from '@mantine/core'
+import { colorsTuple, type MantineThemeOverride } from '@mantine/core'
 
 // ----------------------------------------------------------------------
 
@@ -70,9 +70,9 @@ export const theme: MantineThemeOverride = {
   }, //color by variant */
   autoContrast: false, //default value
   luminanceThreshold: 0.3, //default value
-  fontFamily: 'Inter, Arial, Helvetica, sans-serif',
+  fontFamily: 'Onest, Arial, Helvetica, sans-serif',
   /* headings: {
-    fontFamily: 'Inter',
+    fontFamily: 'Onest',
     fontWeight: '600',
     textWrap: 'wrap', // 'nowrap', 'balance', 'pretty', 'stable',
     sizes: {