@kvell-group/ui 1.18.19 → 1.18.21

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.18.19",
+  "version": "1.18.21",
   "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/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/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/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,43 @@
+.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);
+}

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/components/Text/Text.tsx

@@ -1,18 +1,17 @@
-import type { TextProps as TextBaseProps } from '@mantine/core'
+import type { ElementProps, TextProps as TextBaseProps } from '@mantine/core'
 import { Text as TextBase } from '@mantine/core'
-import { forwardRef, type ReactNode, type Ref } from 'react'
+import { forwardRef } from 'react'
 
 import classesNames from '../../styles/typography.module.css'
 import type { TextVariants } from './types'
 
 // ----------------------------------------------------------------------
 
-type TextProps = Omit<TextBaseProps, 'variant'> & {
-  children: ReactNode
+interface TextProps extends TextBaseProps, ElementProps<'p', keyof TextBaseProps> {
   variant?: TextVariants
 }
 
-export const Text = forwardRef((props: TextProps, ref: Ref<HTMLParagraphElement>) => (
+export const Text = forwardRef<HTMLParagraphElement, TextProps>((props, ref) => (
   <TextBase
     ref={ref}
     {...props}

package/src/index.ts

@@ -11,9 +11,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'
+export * from './components/Notifications'
 
 //providers
 export { KvellUiProvider } from './components/KvellUiProvider'

package/src/theme/index.ts

@@ -1,4 +1,5 @@
 import { colorsTuple, type MantineThemeOverride } from '@mantine/core'
+import { Notification } from '../components/Notifications/Notification'
 
 // ----------------------------------------------------------------------
 
@@ -149,14 +150,9 @@ 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: {
+    Notification,
+  },
   other: {
     // any additional vars
     /* usage: