@kvell-group/ui 1.18.8 → 1.18.10

package/package.json

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

package/src/components/Inputs/@styles/input-base.module.css

@@ -0,0 +1,54 @@
+.input-base {
+  @media (hover: hover) {
+    &:hover:where(:not([data-loading], :disabled, [data-disabled])) {
+      --input-bd: var(--color-border-action-hover);
+    }
+  }
+
+  &:focus-within {
+    --input-bd: var(--color-border-action-focus-light);
+    box-shadow: var(--shadow-focus-ring-light);
+  }
+
+  &[data-error] {
+    --input-color: var(--color-text-status-destructive);
+    --input-bd: var(--color-border-action-destructive);
+
+    @media (hover: hover) {
+      &:hover:where(:not([data-loading], :disabled, [data-disabled])) {
+        --input-bd: var(--color-border-action-destructive-hover);
+      }
+    }
+
+    &:focus-within {
+      --input-bd: var(--color-border-action-focus-destructive-light);
+      box-shadow: var(--shadow-focus-ring-light-destructive);
+    }
+  }
+
+  &:disabled,
+  [data-disabled] {
+    --input-bd: var(--color-border-action-disabled);
+    box-shadow: none;
+  }
+}
+
+.error-message {
+  padding-block: rem(2px);
+  font-size: var(--mantine-font-size-caption-l);
+  line-height: var(--mantine-line-height-caption-l);
+  letter-spacing: var(--mantine-spacing-caption-l);
+  display: flex;
+  color: var(--color-text-status-destructive);
+
+  &::before {
+    content: '';
+    width: rem(16px);
+    height: rem(16px);
+    background: currentColor;
+    mask: url('../../../assets/error.svg') no-repeat;
+    margin-top: rem(1.5px);
+    margin-right: rem(4px);
+    flex-shrink: 0;
+  }
+}

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

@@ -1,6 +1,6 @@
 import { MaskedInput } from '../MaskedInput'
 
-import type { MaskedInputProps } from '../types'
+import type { MaskedInputProps } from '../@types/types'
 import { forwardRef } from 'react'
 import { CARD_EXPIRY_DATE_MASK } from '../../../constants/masks'
 import { IMask } from 'react-imask'

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

@@ -1,5 +1,5 @@
 import { MaskedInput } from '../MaskedInput'
-import type { MaskedInputProps } from '../types'
+import type { MaskedInputProps } from '../@types/types'
 import { forwardRef } from 'react'
 import { CARD_NUMBER_MASK } from '../../../constants/masks'
 import { IMask } from 'react-imask'

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

@@ -2,7 +2,7 @@ import { MaskedInput } from '../MaskedInput'
 import passwordClassNames from './CvvInput.module.css'
 import baseInputClassNames from '../Input/Input.module.css'
 import clsx from 'clsx'
-import type { MaskedInputProps } from '../types'
+import type { MaskedInputProps } from '../@types/types'
 import { forwardRef } from 'react'
 import { CARD_CVV_MASK } from '../../../constants/masks'
 import { IMask } from 'react-imask'

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

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

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

@@ -0,0 +1,17 @@
+.root {
+  margin-bottom: 0.5rem;
+}
+
+.pinInput {
+  /* 
+    44:50, original:
+    height: pin-input-size
+    width: pin-input-size
+  */
+  width: calc(var(--pin-input-size) * 0.88);
+}
+
+input {
+  --input-bd: var(--mantine-color-border-action-normal-0);
+  box-shadow: var(--mantine-shadow-xs);
+}

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { KvellUiProvider } from '@/components/KvellUiProvider'
+
+import { theme } from '@/theme'
+import { PinInput as PinInputComponent } from '@/components/Inputs/PinInput'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Inputs/PinInput',
+  component: PinInputComponent,
+  decorators: (Story) => (
+    <KvellUiProvider theme={theme}>
+      <div style={{ maxWidth: '465px' }}>
+        <Story />
+      </div>
+    </KvellUiProvider>
+  ),
+} satisfies Meta<typeof PinInputComponent>
+
+type Story = StoryObj<typeof PinInputComponent>
+
+// ----------------------------------------------------------------------
+
+export const PinInput: Story = {
+  args: {
+    placeholder: '',
+  },
+}
+
+export const PinInputError: Story = {
+  args: {
+    error: 'Ошибка OTP кода',
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Inputs/PinInput/PinInput.tsx

@@ -0,0 +1,39 @@
+import { Input, PinInput as PinInputComponent } from '@mantine/core'
+import type { PinInputProps as BasePinInputProps } from '@mantine/core'
+
+import classes from './PinInput.module.css'
+import textClasses from '../../../styles/typography.module.css'
+import inputBaseClasses from '../@styles/input-base.module.css'
+import { forwardRef } from 'react'
+import clsx from 'clsx'
+
+const inputClassName = clsx(
+  classes.input,
+  textClasses['body-m-regular'],
+  inputBaseClasses['input-base']
+)
+
+type PinInputProps = Omit<BasePinInputProps, 'error'> & {
+  error?: string
+}
+
+export const PinInput = forwardRef<HTMLInputElement, PinInputProps>((props, ref) => {
+  const { error, size = 'lg', gap = 4, radius = 'xl', ...restProps } = props
+
+  return (
+    <Input.Wrapper
+      error={error}
+      classNames={{ error: inputBaseClasses['error-message'] }}
+    >
+      <PinInputComponent
+        ref={ref}
+        {...restProps}
+        radius={radius}
+        gap={gap}
+        size={size}
+        error={Boolean(error)}
+        classNames={{ ...classes, input: inputClassName }}
+      />
+    </Input.Wrapper>
+  )
+})

package/src/components/Inputs/PinInput/index.ts

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

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

@@ -0,0 +1,3 @@
+.root .section {
+  --right-section-end: rem(3px);
+}

package/src/components/Inputs/Select/Select.tsx

@@ -0,0 +1,21 @@
+import { Select as MantineSelect } from '@mantine/core'
+import { RiArrowDownSLine as ArrowDownSVG } from '@remixicon/react'
+import clsx from 'clsx'
+import inputClassNames from '../Input/Input.module.css'
+import selectClassNames from './Select.module.css'
+
+// ----------------------------------------------------------------------
+
+const classNames = {
+  ...inputClassNames,
+  root: clsx(selectClassNames.root, inputClassNames.root),
+  section: clsx(selectClassNames.section, inputClassNames.section),
+}
+
+// ----------------------------------------------------------------------
+
+export const Select = MantineSelect.withProps({
+  classNames,
+  inputWrapperOrder: ['label', 'input', 'error', 'description'],
+  rightSection: <ArrowDownSVG size={16} />,
+})

package/src/index.ts

@@ -13,6 +13,7 @@ export { Select } from './components/Inputs/Select'
 export { Textarea } from './components/Inputs/Textarea'
 export { DatesProvider } from '@mantine/dates'
 export * from './components/Inputs/DatePickerInput'
+export { PinInput } from './components/Inputs/PinInput'
 
 //providers
 export { KvellUiProvider } from './components/KvellUiProvider'

package/src/components/Inputs/Select/Select.ts

@@ -1,9 +0,0 @@
-import { Select as MantineSelect } from '@mantine/core'
-import classNames from '../Input/Input.module.css'
-
-// ----------------------------------------------------------------------
-
-export const Select = MantineSelect.withProps({
-  classNames,
-  inputWrapperOrder: ['label', 'input', 'error', 'description'],
-})