@kvell-group/ui 1.15.7 → 1.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/package.json +20 -7
  2. package/src/components/Button/Button.stories.tsx +8 -9
  3. package/src/components/Inputs/CardExpireDateInput/CardExpireDateInput.stories.tsx +43 -0
  4. package/src/components/Inputs/CardExpireDateInput/CardExpireDateInput.tsx +27 -0
  5. package/src/components/Inputs/CardExpireDateInput/index.ts +1 -0
  6. package/src/components/Inputs/CardInput/CardInput.stories.tsx +3 -4
  7. package/src/components/Inputs/CardInput/CardInput.tsx +4 -2
  8. package/src/components/Inputs/CvvInput/CvvInput.stories.tsx +3 -4
  9. package/src/components/Inputs/CvvInput/CvvInput.tsx +2 -0
  10. package/src/components/Inputs/Input.module.css +2 -2
  11. package/src/components/Inputs/Input.stories.tsx +3 -4
  12. package/src/components/Inputs/Input.tsx +1 -0
  13. package/src/components/Inputs/MaskedInput/MaskedInput.stories.tsx +5 -25
  14. package/src/components/Inputs/PasswordInput/PasswordInput.stories.tsx +3 -4
  15. package/src/components/Inputs/PasswordInput/PasswordInput.tsx +1 -0
  16. package/src/components/{MainProvider/MantineProvider.tsx → KvellUiProvider/KvellUiProvider.tsx} +6 -1
  17. package/src/components/KvellUiProvider/index.ts +1 -0
  18. package/src/components/Loader/Loader.stories.tsx +3 -4
  19. package/src/components/Modal/Modal.stories.tsx +3 -4
  20. package/src/components/Modal/Modal.tsx +1 -0
  21. package/src/components/Switch/Switch.module.css +4 -0
  22. package/src/components/Switch/Switch.stories.tsx +3 -4
  23. package/src/components/Text/Text.stories.tsx +3 -4
  24. package/src/components/theme.ts +1 -0
  25. package/src/core-components/Divider.tsx +2 -0
  26. package/src/index.js +24 -0
  27. package/src/index.ts +1 -18
  28. package/src/mantine.js +2 -0
  29. package/src/mantine.ts +1 -0
  30. package/src/assets/arrow-left.svg +0 -3
  31. package/src/assets/calendar.svg +0 -3
  32. package/src/assets/card.svg +0 -3
  33. package/src/assets/lead-icon.svg +0 -3
  34. package/src/components/MainProvider/index.ts +0 -1
package/package.json CHANGED
@@ -2,13 +2,23 @@
2
2
  "name": "@kvell-group/ui",
3
3
  "author": "Kvell Group",
4
4
  "private": false,
5
- "version": "1.15.7",
5
+ "version": "1.16.1",
6
6
  "type": "module",
7
- "main": "src/index.ts",
8
- "types": "src/index.ts",
7
+ "main": "./src/index.js",
8
+ "types": "./src/index.ts",
9
9
  "files": [
10
10
  "src"
11
11
  ],
12
+ "exports": {
13
+ ".": {
14
+ "import": "./src/index.js",
15
+ "types": "./src/index.ts"
16
+ },
17
+ "./mantine": {
18
+ "import": "./src/mantine.js",
19
+ "types": "./src/mantine.ts"
20
+ }
21
+ },
12
22
  "scripts": {
13
23
  "storybook": "storybook dev -p 6006",
14
24
  "semantic-release": "semantic-release",
@@ -18,9 +28,12 @@
18
28
  "format:fix": "prettier --write .",
19
29
  "build-storybook": "storybook build"
20
30
  },
31
+ "dependencies": {
32
+ "@mantine/core": "^8.0.1",
33
+ "@mantine/hooks": "^8.0.1",
34
+ "@remixicon/react": "^4.6.0"
35
+ },
21
36
  "peerDependencies": {
22
- "@mantine/core": "^7.17.3",
23
- "@mantine/hooks": "^7.17.3",
24
37
  "react": "^18.0.0",
25
38
  "react-dom": "^18.0.0",
26
39
  "react-imask": "^7.6.1"
@@ -43,6 +56,7 @@
43
56
  "@vitest/browser": "^3.1.1",
44
57
  "@vitest/coverage-v8": "^3.1.1",
45
58
  "autoprefixer": "^10.4.21",
59
+ "clsx": "^2.1.1",
46
60
  "eslint": "^9.21.0",
47
61
  "eslint-config-prettier": "^10.1.1",
48
62
  "eslint-plugin-react-hooks": "^5.1.0",
@@ -66,8 +80,7 @@
66
80
  "vite-plugin-lib-inject-css": "^2.2.1",
67
81
  "vite-plugin-svgr": "^4.3.0",
68
82
  "vite-tsconfig-paths": "^5.1.4",
69
- "vitest": "^3.1.1",
70
- "clsx": "^2.1.1"
83
+ "vitest": "^3.1.1"
71
84
  },
72
85
  "publishConfig": {
73
86
  "access": "public"
@@ -1,10 +1,9 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
 
3
- import { MantineProvider } from '@/components/MainProvider'
4
- import LeadSVG from '@/assets/lead-icon.svg'
5
- import ArrowLeftSVG from '@/assets/arrow-left.svg'
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
+
5
+ import { RiArrowLeftLine as ArrowLeftSVG, RiLockLine as LockSVG } from '@remixicon/react'
6
6
 
7
- import '@mantine/core/styles.css'
8
7
  import { theme } from '@/components/theme'
9
8
  import { Button } from '@/components/Button'
10
9
  import { Text } from '@/components/Text/Text'
@@ -25,9 +24,9 @@ const meta = {
25
24
  argTypes: { variant: ButtonVariants },
26
25
  component: Button,
27
26
  decorators: (Story) => (
28
- <MantineProvider theme={theme}>
27
+ <KvellUiProvider theme={theme}>
29
28
  <Story />
30
- </MantineProvider>
29
+ </KvellUiProvider>
31
30
  ),
32
31
  } satisfies Meta<typeof Button>
33
32
 
@@ -61,7 +60,7 @@ export const ComponentButton: Story = {
61
60
  export const PrimaryButton: Story = {
62
61
  args: {
63
62
  variant: PRIMARY_BUTTON_VARIANT,
64
- leftSection: <LeadSVG />,
63
+ leftSection: <LockSVG size={20} />,
65
64
  fullWidth: true,
66
65
  style: { maxWidth: '465px' },
67
66
  children: <Text variant={BODY_S_MEDIUM_FONT_VARIANT}>Оплатить 7 605,30 RUB</Text>,
@@ -72,7 +71,7 @@ export const PrimaryButton: Story = {
72
71
  export const SecondaryButton: Story = {
73
72
  args: {
74
73
  variant: SECONDARY_BUTTON_VARIANT,
75
- leftSection: <ArrowLeftSVG />,
74
+ leftSection: <ArrowLeftSVG size={20} />,
76
75
  children: 'Вернуться на сайт продавца',
77
76
  },
78
77
  }
@@ -80,7 +79,7 @@ export const SecondaryButton: Story = {
80
79
  export const TertiaryButton: Story = {
81
80
  args: {
82
81
  variant: TERTIARY_BUTTON_VARIANT,
83
- leftSection: <ArrowLeftSVG />,
82
+ leftSection: <ArrowLeftSVG size={20} />,
84
83
  children: 'Сохранённые карты',
85
84
  },
86
85
  }
@@ -0,0 +1,43 @@
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
+
5
+ import { theme } from '@/components/theme'
6
+ import { CardExpireDateInput as CardExpireDateInputComponent } from '@/components/Inputs/CardExpireDateInput'
7
+
8
+ // ----------------------------------------------------------------------
9
+
10
+ const meta = {
11
+ title: 'Components/Inputs/CardExpireDate',
12
+ component: CardExpireDateInputComponent,
13
+ decorators: (Story) => (
14
+ <KvellUiProvider theme={theme}>
15
+ <div style={{ maxWidth: '144px' }}>
16
+ <Story />
17
+ </div>
18
+ </KvellUiProvider>
19
+ ),
20
+ } satisfies Meta<typeof CardExpireDateInputComponent>
21
+
22
+ type Story = StoryObj<typeof CardExpireDateInputComponent>
23
+
24
+ // ----------------------------------------------------------------------
25
+
26
+ export const CardExpireDateInput: Story = {
27
+ args: {
28
+ value: '1225',
29
+ label: 'Срок действия',
30
+ },
31
+ }
32
+
33
+ export const CardExpireDateInputError: Story = {
34
+ args: {
35
+ value: '0120',
36
+ label: 'Срок действия',
37
+ error: 'Срок действия карты истёк',
38
+ },
39
+ }
40
+
41
+ // ----------------------------------------------------------------------
42
+
43
+ export default meta
@@ -0,0 +1,27 @@
1
+ import { MaskedInput } from '../MaskedInput'
2
+
3
+ import type { MaskedInputProps } from '../types'
4
+ import { forwardRef } from 'react'
5
+ import { CARD_EXPIRY_DATE_MASK } from '../../../constants/masks'
6
+ import { IMask } from 'react-imask'
7
+ import { RiCalendarLine as CalendarSVG } from '@remixicon/react'
8
+
9
+ // ----------------------------------------------------------------------
10
+
11
+ const mask = IMask.createMask({ mask: CARD_EXPIRY_DATE_MASK })
12
+
13
+ // ----------------------------------------------------------------------
14
+
15
+ export const CardExpireDateInput = forwardRef<HTMLInputElement, MaskedInputProps>((props, ref) => {
16
+ return (
17
+ <MaskedInput
18
+ ref={ref}
19
+ autoComplete='cc-exp'
20
+ inputMode='numeric'
21
+ {...props}
22
+ mask={mask}
23
+ placeholder='____ ____ ____ ____'
24
+ leftSection={<CalendarSVG size={20} />}
25
+ />
26
+ )
27
+ })
@@ -0,0 +1 @@
1
+ export { CardExpireDateInput } from './CardExpireDateInput'
@@ -1,8 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
 
3
- import { MantineProvider } from '@/components/MainProvider'
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
4
 
5
- import '@mantine/core/styles.css'
6
5
  import { theme } from '@/components/theme'
7
6
 
8
7
  import { CardInput as CardInputComponent } from '@/components/Inputs/CardInput'
@@ -13,11 +12,11 @@ const meta = {
13
12
  title: 'Components/Inputs/CardInput',
14
13
  component: CardInputComponent,
15
14
  decorators: (Story) => (
16
- <MantineProvider theme={theme}>
15
+ <KvellUiProvider theme={theme}>
17
16
  <div style={{ maxWidth: '465px' }}>
18
17
  <Story />
19
18
  </div>
20
- </MantineProvider>
19
+ </KvellUiProvider>
21
20
  ),
22
21
  } satisfies Meta<typeof CardInputComponent>
23
22
 
@@ -1,10 +1,10 @@
1
- import CardSVG from '../../../assets/card.svg'
2
1
  import { MaskedInput } from '../MaskedInput'
3
2
  import { useCardLogo } from './useCardLogo'
4
3
  import type { MaskedInputProps } from '../types'
5
4
  import { forwardRef } from 'react'
6
5
  import { CARD_NUMBER_MASK } from '../../../constants/masks'
7
6
  import { IMask } from 'react-imask'
7
+ import { RiBankCardLine as CardSVG } from '@remixicon/react'
8
8
 
9
9
  // ----------------------------------------------------------------------
10
10
 
@@ -18,10 +18,12 @@ export const CardInput = forwardRef<HTMLInputElement, MaskedInputProps>((props,
18
18
  return (
19
19
  <MaskedInput
20
20
  ref={ref}
21
+ inputMode='numeric'
22
+ autoComplete='cc-number'
21
23
  {...props}
22
24
  mask={mask}
23
25
  rightSection={CardLogo && <CardLogo />}
24
- leftSection={<CardSVG />}
26
+ leftSection={<CardSVG size={20} />}
25
27
  placeholder='____ ____ ____ ____'
26
28
  />
27
29
  )
@@ -1,8 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
 
3
- import { MantineProvider } from '@/components/MainProvider'
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
4
 
5
- import '@mantine/core/styles.css'
6
5
  import { theme } from '@/components/theme'
7
6
  import { CvvInput as CvvInputComponent } from '@/components/Inputs/CvvInput'
8
7
 
@@ -12,11 +11,11 @@ const meta = {
12
11
  title: 'Components/Inputs/CvvInput',
13
12
  component: CvvInputComponent,
14
13
  decorators: (Story) => (
15
- <MantineProvider theme={theme}>
14
+ <KvellUiProvider theme={theme}>
16
15
  <div style={{ maxWidth: '304px' }}>
17
16
  <Story />
18
17
  </div>
19
- </MantineProvider>
18
+ </KvellUiProvider>
20
19
  ),
21
20
  } satisfies Meta<typeof CvvInputComponent>
22
21
 
@@ -20,6 +20,8 @@ const mask = IMask.createMask({ mask: CARD_CVV_MASK })
20
20
  export const CvvInput = forwardRef<HTMLInputElement, MaskedInputProps>((props, ref) => (
21
21
  <MaskedInput
22
22
  ref={ref}
23
+ inputMode='numeric'
24
+ autoComplete='cc-csc'
23
25
  {...props}
24
26
  mask={mask}
25
27
  classNames={{ ...restClassNames, input: classNames }}
@@ -1,8 +1,8 @@
1
1
  .input {
2
2
  border-radius: var(--mantine-radius-xl);
3
3
  border: 1px solid var(--mantine-color-border-action-normal-0);
4
- box-shadow: var(--mantine-shadows-xs);
5
- color: var(--mantine-color-text-base-primary);
4
+ box-shadow: var(--mantine-shadow-xs);
5
+ color: var(--mantine-color-text-base-primary-0);
6
6
 
7
7
  --input-height: 2.5rem;
8
8
 
@@ -1,8 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
 
3
- import { MantineProvider } from '@/components/MainProvider'
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
4
 
5
- import '@mantine/core/styles.css'
6
5
  import { theme } from '@/components/theme'
7
6
  import { Input as InputComponent } from '@/components/Inputs/Input'
8
7
 
@@ -12,11 +11,11 @@ const meta = {
12
11
  title: 'Components/Inputs/Input',
13
12
  component: InputComponent,
14
13
  decorators: (Story) => (
15
- <MantineProvider theme={theme}>
14
+ <KvellUiProvider theme={theme}>
16
15
  <div style={{ maxWidth: '465px' }}>
17
16
  <Story />
18
17
  </div>
19
- </MantineProvider>
18
+ </KvellUiProvider>
20
19
  ),
21
20
  } satisfies Meta<typeof InputComponent>
22
21
 
@@ -1,3 +1,4 @@
1
+ import '@mantine/core/styles/Input.layer.css'
1
2
  import { TextInput } from '@mantine/core'
2
3
  import classNames from './Input.module.css'
3
4
  import textClassNames from '../../styles/typography.module.css'
@@ -1,12 +1,11 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
 
3
- import { MantineProvider } from '@/components/MainProvider'
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
4
 
5
- import '@mantine/core/styles.css'
6
5
  import { theme } from '@/components/theme'
7
6
  import { MaskedInput as MaskedInputComponent } from '@/components/Inputs/MaskedInput'
8
- import CalendarSVG from '@/assets/calendar.svg'
9
- import { CARD_EXPIRY_DATE_MASK, PHONE_MASK } from '@/constants/masks'
7
+
8
+ import { PHONE_MASK } from '@/constants/masks'
10
9
 
11
10
  // ----------------------------------------------------------------------
12
11
 
@@ -14,11 +13,11 @@ const meta = {
14
13
  title: 'Components/Inputs/MaskedInput',
15
14
  component: MaskedInputComponent,
16
15
  decorators: (Story) => (
17
- <MantineProvider theme={theme}>
16
+ <KvellUiProvider theme={theme}>
18
17
  <div style={{ maxWidth: '304px' }}>
19
18
  <Story />
20
19
  </div>
21
- </MantineProvider>
20
+ </KvellUiProvider>
22
21
  ),
23
22
  } satisfies Meta<typeof MaskedInputComponent>
24
23
 
@@ -34,25 +33,6 @@ export const MaskedInput: Story = {
34
33
  },
35
34
  }
36
35
 
37
- export const MaskedInputExpiryDate: Story = {
38
- args: {
39
- leftSection: <CalendarSVG />,
40
- mask: CARD_EXPIRY_DATE_MASK,
41
- value: '1225',
42
- label: 'Срок действия',
43
- },
44
- }
45
-
46
- export const MaskedInputExpiryDateError: Story = {
47
- args: {
48
- leftSection: <CalendarSVG />,
49
- mask: CARD_EXPIRY_DATE_MASK,
50
- value: '0120',
51
- label: 'Срок действия',
52
- error: 'Срок действия карты истёк',
53
- },
54
- }
55
-
56
36
  // ----------------------------------------------------------------------
57
37
 
58
38
  export default meta
@@ -1,8 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
 
3
- import { MantineProvider } from '@/components/MainProvider'
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
4
 
5
- import '@mantine/core/styles.css'
6
5
  import { theme } from '@/components/theme'
7
6
  import { PasswordInput as PasswordInputComponent } from '@/components/Inputs/PasswordInput/PasswordInput'
8
7
 
@@ -12,11 +11,11 @@ const meta = {
12
11
  title: 'Components/Inputs/PasswordInput',
13
12
  component: PasswordInputComponent,
14
13
  decorators: (Story) => (
15
- <MantineProvider theme={theme}>
14
+ <KvellUiProvider theme={theme}>
16
15
  <div style={{ maxWidth: '465px' }}>
17
16
  <Story />
18
17
  </div>
19
- </MantineProvider>
18
+ </KvellUiProvider>
20
19
  ),
21
20
  } satisfies Meta<typeof PasswordInputComponent>
22
21
 
@@ -23,4 +23,5 @@ export const PasswordInput = PasswordInputBase.withProps({
23
23
  error: errorClassNames,
24
24
  section: sectionClassNames.section,
25
25
  },
26
+ autoComplete: 'current-password',
26
27
  })
@@ -1,9 +1,14 @@
1
1
  import { MantineProvider as MantineProviderCore } from '@mantine/core'
2
2
  import type { MantineProviderProps } from '@mantine/core'
3
3
 
4
+ import '@mantine/core/styles.layer.css'
5
+ import '@mantine/core/styles/baseline.layer.css'
6
+ import '@mantine/core/styles/default-css-variables.layer.css'
7
+ import '@mantine/core/styles/global.layer.css'
8
+
4
9
  // ----------------------------------------------------------------------
5
10
 
6
- export function MantineProvider({ children, theme, ...restProps }: MantineProviderProps) {
11
+ export function KvellUiProvider({ children, theme, ...restProps }: MantineProviderProps) {
7
12
  return (
8
13
  <MantineProviderCore
9
14
  theme={theme}
@@ -0,0 +1 @@
1
+ export { KvellUiProvider } from './KvellUiProvider'
@@ -1,8 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
 
3
- import { MantineProvider } from '@/components/MainProvider'
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
4
 
5
- import '@mantine/core/styles.css'
6
5
  import { theme } from '@/components/theme'
7
6
  import { Loader } from '@/components/Loader'
8
7
  import { LoaderSizes } from '@/components/Loader/constants'
@@ -13,11 +12,11 @@ const meta = {
13
12
  title: 'Components/Loader',
14
13
  component: Loader,
15
14
  decorators: (Story) => (
16
- <MantineProvider theme={theme}>
15
+ <KvellUiProvider theme={theme}>
17
16
  <div style={{ width: '120px', height: '120px', backgroundColor: 'whitesmoke' }}>
18
17
  <Story />
19
18
  </div>
20
- </MantineProvider>
19
+ </KvellUiProvider>
21
20
  ),
22
21
  } satisfies Meta<typeof Loader>
23
22
 
@@ -1,9 +1,8 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
 
3
- import { MantineProvider } from '@/components/MainProvider'
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
4
  import { Text } from '@/components/Text'
5
5
 
6
- import '@mantine/core/styles.css'
7
6
  import { theme } from '@/components/theme'
8
7
  import { Modal } from '@/components/Modal'
9
8
  import { Button } from '@/components/Button'
@@ -66,9 +65,9 @@ const meta = {
66
65
  title: 'Components/Modal',
67
66
  component: ModalWrapper,
68
67
  decorators: (Story) => (
69
- <MantineProvider theme={theme}>
68
+ <KvellUiProvider theme={theme}>
70
69
  <Story />
71
- </MantineProvider>
70
+ </KvellUiProvider>
72
71
  ),
73
72
  } satisfies Meta<typeof ModalWrapper>
74
73
 
@@ -1,4 +1,5 @@
1
1
  import { Modal as ModalBase } from '@mantine/core'
2
+ import '@mantine/core/styles/Modal.layer.css'
2
3
  import classNames from './Modal.module.css'
3
4
  import textClassNames from '../../styles/typography.module.css'
4
5
  import { BODY_M_MEDIUM_FONT_VARIANT } from '../../constants/font-variants'
@@ -26,3 +26,7 @@
26
26
  left: -0.25rem;
27
27
  }
28
28
  }
29
+
30
+ .thumb::before {
31
+ display: none;
32
+ }
@@ -1,8 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
 
3
- import { MantineProvider } from '@/components/MainProvider'
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
4
 
5
- import '@mantine/core/styles.css'
6
5
  import { theme } from '@/components/theme'
7
6
  import { Switch } from '@/components/Switch'
8
7
 
@@ -12,9 +11,9 @@ const meta = {
12
11
  title: 'Components/Switch',
13
12
  component: Switch,
14
13
  decorators: (Story) => (
15
- <MantineProvider theme={theme}>
14
+ <KvellUiProvider theme={theme}>
16
15
  <Story />
17
- </MantineProvider>
16
+ </KvellUiProvider>
18
17
  ),
19
18
  } satisfies Meta<typeof Switch>
20
19
 
@@ -1,8 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
 
3
- import { MantineProvider } from '@/components/MainProvider'
3
+ import { KvellUiProvider } from '@/components/KvellUiProvider'
4
4
 
5
- import '@mantine/core/styles.css'
6
5
  import { theme } from '@/components/theme'
7
6
  import { Text } from '@/components/Text/Text'
8
7
  import { FontVariants } from '@/constants/font-variants'
@@ -13,9 +12,9 @@ const meta = {
13
12
  title: 'Components/Text',
14
13
  component: Text,
15
14
  decorators: (Story) => (
16
- <MantineProvider theme={theme}>
15
+ <KvellUiProvider theme={theme}>
17
16
  <Story />
18
- </MantineProvider>
17
+ </KvellUiProvider>
19
18
  ),
20
19
  } satisfies Meta<typeof Text>
21
20
 
@@ -34,6 +34,7 @@ export const theme: MantineThemeOverride = {
34
34
  // icon/base/secondary
35
35
 
36
36
  //text
37
+ 'text-base-primary': colorsTuple('#14151a'),
37
38
  'text-base-secondary': colorsTuple('#0f132499'),
38
39
  'text-base-tertiary': colorsTuple('#0d112666'),
39
40
  'text-base-quaternary': colorsTuple('#0a0f2940'),
@@ -0,0 +1,2 @@
1
+ import '@mantine/core/styles/Divider.layer.css'
2
+ export { Divider } from '@mantine/core'
package/src/index.js ADDED
@@ -0,0 +1,24 @@
1
+ // components
2
+ export { Button } from './components/Button'
3
+
4
+ // constants
5
+ export { theme } from './components/theme'
6
+
7
+ //inputs
8
+ export { Input } from './components/Inputs'
9
+ export { CardInput } from './components/Inputs/CardInput'
10
+ export { MaskedInput } from './components/Inputs/MaskedInput'
11
+ export { PasswordInput } from './components/Inputs/PasswordInput'
12
+ export { CvvInput } from './components/Inputs/CvvInput'
13
+ export { Checkbox } from './components/Inputs/Checkbox'
14
+
15
+ export { Loader } from './components/Loader'
16
+ export { Modal } from './components/Modal'
17
+ export { Switch } from './components/Switch'
18
+ export { Text } from './components/Text'
19
+
20
+ //providers
21
+ export { KvellUiProvider } from './components/KvellUiProvider'
22
+
23
+ //core-components
24
+ export { Divider } from './core-components/Divider'
package/src/index.ts CHANGED
@@ -1,18 +1 @@
1
- // constants
2
- export { theme } from './components/theme'
3
-
4
- // components
5
- export { Button } from './components/Button'
6
-
7
- //inputs
8
- export { Input } from './components/Inputs'
9
- export { CardInput } from './components/Inputs/CardInput'
10
- export { MaskedInput } from './components/Inputs/MaskedInput'
11
- export { PasswordInput } from './components/Inputs/PasswordInput'
12
- export { CvvInput } from './components/Inputs/CvvInput'
13
- export { Checkbox } from './components/Inputs/Checkbox'
14
-
15
- export { Loader } from './components/Loader'
16
- export { Modal } from './components/Modal'
17
- export { Switch } from './components/Switch'
18
- export { Text } from './components/Text'
1
+ export * from './index'
package/src/mantine.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from '@mantine/core'
2
+ export * from '@mantine/hooks'
package/src/mantine.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './mantine'
@@ -1,3 +0,0 @@
1
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M6.52334 9.1664H16.6667V10.8331H6.52334L10.9933 15.3031L9.81501 16.4814L3.33334 9.99973L9.81501 3.51807L10.9933 4.6964L6.52334 9.1664Z" fill="currentColor" fill-opacity="0.6" style="fill:#0F1324;fill:color(display-p3 0.0588 0.0745 0.1412);fill-opacity:0.6;"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M14.6667 2.49992H18C18.221 2.49992 18.433 2.58772 18.5892 2.744C18.7455 2.90028 18.8333 3.11224 18.8333 3.33325V16.6666C18.8333 16.8876 18.7455 17.0996 18.5892 17.2558C18.433 17.4121 18.221 17.4999 18 17.4999H2.99999C2.77898 17.4999 2.56701 17.4121 2.41073 17.2558C2.25445 17.0996 2.16666 16.8876 2.16666 16.6666V3.33325C2.16666 3.11224 2.25445 2.90028 2.41073 2.744C2.56701 2.58772 2.77898 2.49992 2.99999 2.49992H6.33332V0.833252H7.99999V2.49992H13V0.833252H14.6667V2.49992ZM13 4.16659H7.99999V5.83325H6.33332V4.16659H3.83332V7.49992H17.1667V4.16659H14.6667V5.83325H13V4.16659ZM17.1667 9.16658H3.83332V15.8333H17.1667V9.16658Z" fill="currentColor" fill-opacity="0.4" style="fill:#0D1126;fill:color(display-p3 0.0510 0.0667 0.1490);fill-opacity:0.4;"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M2.49984 2.5H17.4998C17.7209 2.5 17.9328 2.5878 18.0891 2.74408C18.2454 2.90036 18.3332 3.11232 18.3332 3.33333V16.6667C18.3332 16.8877 18.2454 17.0996 18.0891 17.2559C17.9328 17.4122 17.7209 17.5 17.4998 17.5H2.49984C2.27882 17.5 2.06686 17.4122 1.91058 17.2559C1.7543 17.0996 1.6665 16.8877 1.6665 16.6667V3.33333C1.6665 3.11232 1.7543 2.90036 1.91058 2.74408C2.06686 2.5878 2.27882 2.5 2.49984 2.5ZM16.6665 9.16667H3.33317V15.8333H16.6665V9.16667ZM16.6665 7.5V4.16667H3.33317V7.5H16.6665ZM11.6665 12.5H14.9998V14.1667H11.6665V12.5Z" fill="currentColor" fill-opacity="0.4" style="fill:#0D1126;fill:color(display-p3 0.0510 0.0667 0.1490);fill-opacity:0.4;"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M15.8333 8.33334H16.6667C16.8877 8.33334 17.0996 8.42114 17.2559 8.57742C17.4122 8.7337 17.5 8.94566 17.5 9.16667V17.5C17.5 17.721 17.4122 17.933 17.2559 18.0893C17.0996 18.2455 16.8877 18.3333 16.6667 18.3333H3.33333C3.11232 18.3333 2.90036 18.2455 2.74408 18.0893C2.5878 17.933 2.5 17.721 2.5 17.5V9.16667C2.5 8.94566 2.5878 8.7337 2.74408 8.57742C2.90036 8.42114 3.11232 8.33334 3.33333 8.33334H4.16667V7.50001C4.16667 6.73396 4.31755 5.97542 4.6107 5.26769C4.90386 4.55995 5.33354 3.91689 5.87521 3.37522C6.41689 2.83354 7.05995 2.40386 7.76768 2.11071C8.47541 1.81756 9.23396 1.66667 10 1.66667C10.766 1.66667 11.5246 1.81756 12.2323 2.11071C12.9401 2.40386 13.5831 2.83354 14.1248 3.37522C14.6665 3.91689 15.0961 4.55995 15.3893 5.26769C15.6825 5.97542 15.8333 6.73396 15.8333 7.50001V8.33334ZM4.16667 10V16.6667H15.8333V10H4.16667ZM9.16667 11.6667H10.8333V15H9.16667V11.6667ZM14.1667 8.33334V7.50001C14.1667 6.39494 13.7277 5.33513 12.9463 4.55373C12.1649 3.77233 11.1051 3.33334 10 3.33334C8.89493 3.33334 7.83512 3.77233 7.05372 4.55373C6.27232 5.33513 5.83333 6.39494 5.83333 7.50001V8.33334H14.1667Z" fill="currentColor" style="fill:white;fill-opacity:1;"/>
3
- </svg>
@@ -1 +0,0 @@
1
- export { MantineProvider } from './MantineProvider'