@kvell-group/ui 1.18.20 → 1.18.22

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.18.20",
+  "version": "1.18.22",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -20,11 +20,12 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@mantine/carousel": "^8.2.7",
-    "@mantine/core": "^8.2.7",
-    "@mantine/dates": "^8.2.7",
-    "@mantine/form": "^8.2.7",
-    "@mantine/hooks": "^8.2.7"
+    "@mantine/carousel": "^8.2.8",
+    "@mantine/core": "^8.2.8",
+    "@mantine/dates": "^8.2.8",
+    "@mantine/form": "^8.2.8",
+    "@mantine/hooks": "^8.2.8",
+    "@mantine/notifications": "^8.2.8"
   },
   "peerDependencies": {
     "@remixicon/react": "^4.6.0",

package/src/components/CloseButton/CloseButton.module.css

@@ -0,0 +1,14 @@
+.root {
+  --cb-size: rem(24px);
+  border: rem(1px) solid transparent;
+  color: var(--color-icon-base-secondary);
+
+  @mixin hover {
+    background-color: var(--color-background-button-tertiary-hover);
+  }
+
+  &:focus-visible {
+    border-color: var(--color-border-action-focus-light);
+    box-shadow: var(--shadow-focus-ring-light);
+  }
+}

package/src/components/CloseButton/CloseButton.tsx

@@ -0,0 +1,8 @@
+import { CloseButton as MantineCloseButton } from '@mantine/core'
+import { RiCloseFill } from '@remixicon/react'
+import classNames from './CloseButton.module.css'
+
+export const CloseButton = MantineCloseButton.extend({
+  classNames,
+  defaultProps: { icon: <RiCloseFill size={14} /> },
+})

package/src/components/CloseButton/index.ts

@@ -0,0 +1 @@
+export * from './CloseButton'

package/src/components/DatesProvider/DatesProvider.ts

@@ -0,0 +1,2 @@
+import '@mantine/dates/styles.layer.css'
+export { DatesProvider } from '@mantine/dates'

package/src/components/DatesProvider/index.ts

@@ -0,0 +1 @@
+export * from './DatesProvider'

package/src/components/Inputs/DatePickerInput/DatePickerInput.tsx

@@ -6,4 +6,5 @@ import classNames from '../Input/Input.module.css'
 export const DatePickerInput = MantineDatePickerInput.withProps({
   classNames,
   inputWrapperOrder: ['label', 'input', 'error', 'description'],
+  size: 'sm',
 })

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

@@ -58,7 +58,7 @@
 
 .section {
   --input-section-color: var(--color-icon-base-tertiary);
-  --right-section-end: 0.75rem;
+  --right-section-end: 0.25rem;
   --left-section-start: 0.25rem;
 
   .wrapper[data-disabled] & {

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

@@ -1,5 +1,4 @@
 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'
@@ -17,5 +16,5 @@ const classNames = {
 export const Select = MantineSelect.withProps({
   classNames,
   inputWrapperOrder: ['label', 'input', 'error', 'description'],
-  rightSection: <ArrowDownSVG size={16} />,
+  comboboxProps: { floatingStrategy: 'fixed' },
 })

package/src/components/KvellUiProvider/KvellUiProvider.css

@@ -67,6 +67,7 @@
   --color-background-input-disabled: #fff;
   --color-background-surface-neutral: #f7f7f8;
   --color-background-surface-warning-subtle: #fdead8;
+  --color-background-surface-destructive: #fdf2f1;
   --color-border-action-normal: #dee0e3;
   --color-border-action-hover: #c8cad0;
   --color-border-action-disabled: #e9eaec;
@@ -93,8 +94,10 @@
   --color-icon-base-tertiary: #0d112666;
   --color-icon-base-quaternary: #0a0f2940;
   --color-icon-base-inverted: #ffffff;
+  --color-icon-status-info: #4778f5;
   --color-icon-status-success: #26bd6c;
   --color-icon-status-warning: #f48e2f;
+  --color-icon-status-destructive: #e6483d;
   --color-icon-status-destructive-secondary: #e6483db2;
   --color-icon-status-info-secondary: #3368f099;
   --shadow-focus-ring-light: 0px 0px 0px 2px #c8b2ff80;

package/src/components/KvellUiProvider/KvellUiProvider.tsx

@@ -2,7 +2,6 @@ import { MantineProvider as MantineProviderCore } from '@mantine/core'
 import type { MantineProviderProps } from '@mantine/core'
 
 import '@mantine/core/styles.layer.css'
-import '@mantine/dates/styles.layer.css'
 import './KvellUiProvider.css'
 
 // ----------------------------------------------------------------------

package/src/components/Modal/Modal.module.css

@@ -32,17 +32,7 @@
 }
 
 .close {
-  --cb-size: rem(24px);
   margin-top: rem(-4px);
   margin-right: rem(1px);
   background-color: var(--color-background-button-tertiary);
-
-  &:hover {
-    background-color: var(--color-background-button-tertiary-hover);
-  }
-
-  svg {
-    color: var(--color-icon-base-secondary);
-    scale: 0.75;
-  }
 }

package/src/components/Notifications/Notification.tsx

@@ -0,0 +1,10 @@
+import { Notification as MantineNotification } from '@mantine/core'
+import { RiErrorWarningFill } from '@remixicon/react'
+import classNames from './Notifications.module.css'
+
+export const Notification = MantineNotification.extend({
+  classNames,
+  defaultProps: {
+    icon: <RiErrorWarningFill size={20} />,
+  },
+})

package/src/components/Notifications/Notifications.module.css

@@ -0,0 +1,49 @@
+.root {
+  --notification-color: var(--color-icon-status-info);
+  border: rem(1px) solid var(--color-border-action-normal);
+  box-shadow: var(--mantine-shadow-sm);
+  padding: rem(16px);
+  align-items: flex-start;
+
+  &:global(.error) {
+    --notification-color: var(--color-icon-status-destructive);
+    background-color: var(--color-background-surface-destructive);
+
+    & .closeButton {
+      @mixin hover {
+        background-color: var(--color-background-button-destructive-tertiary);
+      }
+    }
+  }
+}
+
+.icon {
+  height: rem(24px);
+  width: rem(20px);
+  background-color: transparent;
+  color: var(--notification-color);
+  margin-inline-end: rem(12px);
+}
+
+.title {
+  font-size: var(--mantine-font-size-body-s);
+  line-height: var(--mantine-line-height-body-s);
+  margin-bottom: 0;
+}
+
+.description {
+  font-size: var(--mantine-font-size-caption-l);
+  line-height: var(--mantine-line-height-caption-l);
+  color: var(--color-text-base-secondary);
+}
+
+.closeButton {
+  --cb-size: rem(24px);
+  color: var(--color-icon-base-secondary);
+  background-color: transparent;
+
+  svg {
+    width: rem(16px);
+    height: rem(16px);
+  }
+}

package/src/components/Notifications/Notifications.ts

@@ -0,0 +1,2 @@
+import '@mantine/notifications/styles.layer.css'
+export * from '@mantine/notifications'

package/src/components/Notifications/index.ts

@@ -0,0 +1 @@
+export * from './Notifications'

package/src/index.ts

@@ -1,3 +1,6 @@
+//providers
+export { KvellUiProvider } from './components/KvellUiProvider'
+
 // constants
 export { theme } from './theme'
 
@@ -11,12 +14,10 @@ export { Checkbox } from './components/Inputs/Checkbox'
 export { Switch } from './components/Inputs/Switch'
 export { Select } from './components/Inputs/Select'
 export { Textarea } from './components/Inputs/Textarea'
-export { DatesProvider } from '@mantine/dates'
+export { DatesProvider } from './components/DatesProvider'
 export * from './components/Inputs/DatePickerInput'
 export { PinInput } from './components/Inputs/PinInput'
-
-//providers
-export { KvellUiProvider } from './components/KvellUiProvider'
+export * from './components/Notifications'
 
 //components
 export * from './components/Button'

package/src/theme/index.ts

@@ -1,4 +1,6 @@
 import { colorsTuple, type MantineThemeOverride } from '@mantine/core'
+import { Notification } from '../components/Notifications/Notification'
+import { CloseButton } from '../components/CloseButton'
 
 // ----------------------------------------------------------------------
 
@@ -149,14 +151,10 @@ export const theme: MantineThemeOverride = {
   defaultGradient: { from: 'black', to: 'yellow', deg: 25 }, //for example
   // activeClassName: 'class-name', //for example
   // focusClassName: 'class-name', //for example
-  /*  components: {
-    Title: Title.extend({
-      classNames: { root: 'classnames' },
-      styles: {},
-      vars: { order: 5 },
-      defaultProps: {},
-    }), //for example
-  }, */
+  components: {
+    CloseButton,
+    Notification,
+  },
   other: {
     // any additional vars
     /* usage: