@kvell-group/ui 1.16.17 → 1.16.19

package/package.json

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

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

@@ -18,9 +18,9 @@ export const CardExpireDateInput = forwardRef<HTMLInputElement, MaskedInputProps
       ref={ref}
       autoComplete='cc-exp'
       inputMode='numeric'
+      placeholder='12/25'
       {...props}
       mask={mask}
-      placeholder='____ ____ ____ ____'
       leftSection={<CalendarSVG size={20} />}
     />
   )

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

@@ -1,12 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { MantineProvider } from '@/components/MainProvider'
-
-import '@mantine/core/styles.css'
 import { theme } from '@/components/theme'
 import { Checkbox as CheckboxComponent } from '@/components/Inputs/Checkbox'
 import { Text } from '@/components/Text'
 import { Anchor } from '@mantine/core'
+import { KvellUiProvider } from '@/components/KvellUiProvider'
 
 // ----------------------------------------------------------------------
 
@@ -14,11 +12,11 @@ const meta = {
   title: 'Components/Inputs/Checkbox',
   component: CheckboxComponent,
   decorators: (Story) => (
-    <MantineProvider theme={theme}>
+    <KvellUiProvider theme={theme}>
       <div style={{ maxWidth: '465px' }}>
         <Story />
       </div>
-    </MantineProvider>
+    </KvellUiProvider>
   ),
 } satisfies Meta<typeof CheckboxComponent>
 

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

@@ -1,6 +1,6 @@
 import { MaskedInput } from '../MaskedInput'
 import passwordClassNames from './CvvInput.module.css'
-import baseInputClassNames from '../Input.module.css'
+import baseInputClassNames from '../Input/Input.module.css'
 import clsx from 'clsx'
 import type { MaskedInputProps } from '../types'
 import { forwardRef } from 'react'
@@ -22,6 +22,7 @@ export const CvvInput = forwardRef<HTMLInputElement, MaskedInputProps>((props, r
     ref={ref}
     inputMode='numeric'
     autoComplete='cc-csc'
+    placeholder='123'
     {...props}
     mask={mask}
     classNames={{ ...restClassNames, input: classNames }}

package/src/components/Inputs/{Input.module.css → Input/Input.module.css}

@@ -30,7 +30,7 @@
   padding-left: 0.25rem;
 
   &::before {
-    content: url('../../assets/error.svg');
+    content: url('../../../assets/error.svg');
     position: relative;
     top: 3px;
     left: -0.25rem;

package/src/components/Inputs/{Input.stories.tsx → Input/Input.stories.tsx}

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

package/src/components/Inputs/{Input.tsx → Input/Input.tsx}

@@ -1,9 +1,9 @@
 import '@mantine/core/styles/Input.layer.css'
 import { TextInput } from '@mantine/core'
 import classNames from './Input.module.css'
-import textClassNames from '../../styles/typography.module.css'
+import textClassNames from '../../../styles/typography.module.css'
 import clsx from 'clsx'
-import { CAPTION_L_REGULAR_FONT_VARIANT } from '../../constants/font-variants'
+import { CAPTION_L_REGULAR_FONT_VARIANT } from '../../../constants/font-variants'
 
 // ----------------------------------------------------------------------
 

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

@@ -1,5 +1,5 @@
 import { IMaskInput } from 'react-imask'
-import { Input } from '../Input'
+import { Input } from '../Input/Input'
 import { forwardRef } from 'react'
 import type { MaskedInputProps } from '../types'
 

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

@@ -1,5 +1,5 @@
 import { PasswordInput as PasswordInputBase } from '@mantine/core'
-import classNames from '../Input.module.css'
+import classNames from '../Input/Input.module.css'
 import sectionClassNames from './PasswordInput.module.css'
 import textClassNames from '../../../styles/typography.module.css'
 import clsx from 'clsx'

package/src/components/{Switch → Inputs/Switch}/Switch.module.css

@@ -20,7 +20,7 @@
   margin-top: 0;
 
   &::before {
-    content: url('../../assets/error.svg');
+    content: url('../../../assets/error.svg');
     position: relative;
     top: 3px;
     left: -0.25rem;

package/src/components/{Switch → Inputs/Switch}/Switch.stories.tsx

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

package/src/components/{Switch → Inputs/Switch}/Switch.tsx

@@ -1,8 +1,8 @@
 import { Switch as SwitchBase } from '@mantine/core'
 import classes from './Switch.module.css'
-import textClassNames from '../../styles/typography.module.css'
+import textClassNames from '../../../styles/typography.module.css'
 import clsx from 'clsx'
-import { CAPTION_L_MEDIUM_FONT_VARIANT } from '../../constants/font-variants'
+import { CAPTION_L_MEDIUM_FONT_VARIANT } from '../../../constants/font-variants'
 
 // ----------------------------------------------------------------------
 

package/src/index.ts

@@ -5,16 +5,16 @@ export { Button } from './components/Button'
 export { theme } from './components/theme'
 
 //inputs
-export { Input } from './components/Inputs'
+export { Input } from './components/Inputs/Input'
 export { CardInput } from './components/Inputs/CardInput'
 export { MaskedInput } from './components/Inputs/MaskedInput'
 export { PasswordInput } from './components/Inputs/PasswordInput'
 export { CvvInput } from './components/Inputs/CvvInput'
 export { Checkbox } from './components/Inputs/Checkbox'
+export { Switch } from './components/Inputs/Switch'
 
 export { Loader } from './components/Loader'
 export { Modal } from './components/Modal'
-export { Switch } from './components/Switch'
 export { Text } from './components/Text'
 
 //providers