@kvell-group/ui 1.15.5 → 1.15.7

package/package.json

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

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

@@ -0,0 +1,30 @@
+.root {
+  --checkbox-size-sm: rem(16px);
+  --checkbox-size-md: rem(20px);
+  --checkbox-radius: var(--mantine-radius-xs);
+}
+
+.label {
+  --label-offset-start: rem(8px);
+}
+
+:where([data-mantine-color-scheme='light']) .root:hover .input:not(:checked):not(:disabled) {
+  border-color: var(--mantine-color-border-action-hover-0);
+}
+
+.inner {
+  margin-top: rem(2px);
+}
+
+.input {
+  box-shadow: var(--mantine-shadow-xs);
+}
+
+:where([data-mantine-color-scheme='light']) .input:disabled {
+  background-color: var(--mantine-color-background-checkbox-disabled-0);
+  border-color: var(--mantine-color-background-checkbox-disabled-0);
+}
+
+[data-mantine-color-scheme='light'] .input:disabled + .icon {
+  color: var(--mantine-color-border-base-surface-0);
+}

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

@@ -0,0 +1,57 @@
+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'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Inputs/Checkbox',
+  component: CheckboxComponent,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <div style={{ maxWidth: '465px' }}>
+        <Story />
+      </div>
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof CheckboxComponent>
+
+type Story = StoryObj<typeof CheckboxComponent>
+
+// ----------------------------------------------------------------------
+
+export const Checkbox: Story = {
+  args: {
+    label: (
+      <Text variant='caption-l-medium'>
+        Соглашаюсь с условиями{' '}
+        <Anchor
+          href='#'
+          target='_blank'
+          rel='noreferrer'
+          c='text-accent-blue-accent.0'
+          inherit
+        >
+          КИД (Ключевого информационного документа)
+        </Anchor>
+      </Text>
+    ),
+  },
+}
+
+export const CheckboxChecked: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

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

@@ -0,0 +1,22 @@
+import { Checkbox as MantineCheckbox } from '@mantine/core'
+import textClassNames from '../../../styles/typography.module.css'
+import classNames from './Checkbox.module.css'
+import { CAPTION_L_MEDIUM_FONT_VARIANT } from '../../../constants/font-variants'
+import clsx from 'clsx'
+
+// ----------------------------------------------------------------------
+
+const inputClassName = clsx(textClassNames[CAPTION_L_MEDIUM_FONT_VARIANT], classNames.label)
+
+// ----------------------------------------------------------------------
+
+export const Checkbox = MantineCheckbox.withProps({
+  size: 'sm',
+  classNames: {
+    label: inputClassName,
+    root: classNames.root,
+    inner: classNames.inner,
+    input: classNames.input,
+    icon: classNames.icon,
+  },
+})

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

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

package/src/components/theme.ts

@@ -19,7 +19,9 @@ export const theme: MantineThemeOverride = {
     //borders
     'border-action-normal': colorsTuple('#dee0e3'),
     'border-action-destructive': colorsTuple('#f7c3c0'),
+    'border-action-hover': colorsTuple('#C8CAD0'),
     'border-base-alpha': colorsTuple('#0a0f2914'),
+    'border-base-surface': colorsTuple('#ffffff'),
 
     //buttons
     'background-button-tertiary': colorsTuple('#0a0f290a'),
@@ -36,10 +38,12 @@ export const theme: MantineThemeOverride = {
     'text-base-tertiary': colorsTuple('#0d112666'),
     'text-base-quaternary': colorsTuple('#0a0f2940'),
     'text-status-destructive': colorsTuple('#e6483d'),
+    'text-accent-blue-accent': colorsTuple('#4778F5'),
 
     //toggle
     'background-toggle-active': colorsTuple('#26bd6c'),
     'background-toggle-default': colorsTuple('#babdc5'),
+    'background-checkbox-disabled': colorsTuple('#DEE0E3'),
 
     //typography
     'typography-secondary': colorsTuple('#91989e'),

package/src/index.ts

@@ -10,6 +10,7 @@ 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 { Loader } from './components/Loader'
 export { Modal } from './components/Modal'