@kvell-group/ui 1.18.4 → 1.18.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.18.4",
+  "version": "1.18.6",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -22,6 +22,7 @@
   "dependencies": {
     "@mantine/carousel": "^8.1.3",
     "@mantine/core": "^8.1.3",
+    "@mantine/dates": "^8.1.3",
     "@mantine/form": "^8.1.3",
     "@mantine/hooks": "^8.1.3"
   },

package/src/components/Badge/Badge.module.css

@@ -1,11 +1,42 @@
 .root {
+  --badge-height-xs: rem(16px);
+  --badge-height-sm: rem(20px);
+  --badge-height-md: rem(24px);
   --badge-height-lg: rem(28px);
-  --badge-padding-x-lg: rem(6px);
+  --badge-fz-xs: var(--mantine-font-size-caption-m);
+  --badge-fz-sm: var(--mantine-font-size-caption-m);
+  --badge-fz-md: var(--mantine-font-size-caption-l);
   --badge-fz-lg: var(--mantine-font-size-caption-l);
+  --badge-padding-x-xs: rem(2px);
+  --badge-padding-x-sm: rem(3px);
+  --badge-padding-x-md: rem(4px);
+  --badge-padding-x-lg: rem(6px);
 
-  font-family: var(--mantine-font-family);
   text-transform: none;
   font-weight: 500;
+  letter-spacing: var(--badge-ls);
+
+  &[data-size='xs'] {
+    --badge-radius: var(--mantine-radius-xs);
+    --badge-label-padding-x: rem(2px);
+    --badge-lh: var(--mantine-line-height-caption-m);
+    --badge-ls: var(--mantine-spacing-caption-m);
+  }
+
+  &[data-size='sm'] {
+    --badge-radius: var(--mantine-radius-sm);
+    --badge-label-padding-x: rem(3px);
+    --badge-lh: var(--mantine-line-height-caption-m);
+    --badge-ls: var(--mantine-spacing-caption-m);
+  }
+
+  &[data-size='md'],
+  &[data-size='lg'] {
+    --badge-radius: var(--mantine-radius-md);
+    --badge-label-padding-x: rem(4px);
+    --badge-lh: var(--mantine-line-height-caption-l);
+    --badge-ls: var(--mantine-spacing-caption-l);
+  }
 }
 
 .section {
@@ -14,10 +45,5 @@
 
 .label {
   margin-bottom: rem(-1px);
-}
-
-.root[data-size='lg'] > .label {
-  padding-inline: rem(4px);
-  letter-spacing: var(--mantine-spacing-caption-l);
-  line-height: var(--mantine-line-height-caption-l);
+  padding-inline: var(--badge-label-padding-x);
 }

package/src/components/Badge/Badge.tsx

@@ -2,4 +2,4 @@ import { Badge as MantineBadge } from '@mantine/core'
 import '@mantine/core/styles/Badge.layer.css'
 import classNames from './Badge.module.css'
 
-export const Badge = MantineBadge.withProps({ classNames })
+export const Badge = MantineBadge.withProps({ classNames, bd: 0 })

package/src/components/Button/Button.module.css

@@ -1,107 +1,150 @@
 .root {
-  --button-height-sm: 2rem;
-  --button-height-md: 2.5rem;
-  --button-height-lg: 3rem;
+  --button-height-xs: rem(24px);
+  --button-height-sm: rem(32px);
+  --button-height-md: rem(40px);
+  --button-height-lg: rem(48px);
 
-  --button-padding-x-sm: 1rem;
-  --button-padding-x-md: 1rem;
-  --button-padding-x-lg: 1rem;
+  --button-padding-x-xs: rem(8px);
+  --button-padding-x-sm: rem(10px);
+  --button-padding-x-md: rem(12px);
+  --button-padding-x-lg: rem(16px);
 
-  font-family: var(--mantine-font-family);
   font-weight: 500;
-  font-size: var(--mantine-font-size-caption-l);
-  line-height: var(--mantine-line-height-caption-l);
-  letter-spacing: var(--mantine-spacing-caption-l);
+  border: rem(1px) solid transparent;
+
+  &[data-size='xs'] {
+    --button-radius: var(--mantine-radius-md);
+    font-size: var(--mantine-font-size-caption-m);
+    line-height: var(--mantine-line-height-caption-m);
+    letter-spacing: var(--mantine-spacing-caption-m);
+  }
+
+  &[data-size='sm'] {
+    --button-radius: var(--mantine-radius-lg);
+    font-size: var(--mantine-font-size-caption-l);
+    line-height: var(--mantine-line-height-caption-l);
+    letter-spacing: var(--mantine-spacing-caption-l);
+  }
+
+  &[data-size='md'] {
+    --button-radius: var(--mantine-radius-xl);
+    font-size: var(--mantine-font-size-caption-l);
+    line-height: var(--mantine-line-height-caption-l);
+    letter-spacing: var(--mantine-spacing-caption-l);
+  }
+
+  &[data-size='lg'] {
+    --button-radius: var(--mantine-radius-xl);
+    font-size: var(--mantine-font-size-body-s);
+    line-height: var(--mantine-line-height-body-s);
+    letter-spacing: var(--mantine-spacing-body-s);
+  }
 
   &[data-variant='primary'] {
-    background-color: var(--mantine-color-primary-0);
-    color: var(--mantine-color-white);
+    --button-bg: var(--color-background-button-primary);
+    --button-hover: var(--color-background-button-primary-hover);
+    --button-color: var(--color-text-base-inverted);
     box-shadow: var(--mantine-shadow-xs);
 
     &:focus-visible {
-      border: none;
-    }
-
-    &:hover {
-      background-color: var(--color-background-button-primary-hover);
+      border-color: transparent;
     }
 
-    &:disabled,
-    &[data-disabled] {
+    &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
       background-color: var(--color-background-button-primary-disabled);
+      box-shadow: none;
     }
   }
 
   &[data-variant='secondary'] {
-    background-color: var(--mantine-color-secondary-0);
-    color: var(--mantine-color-primary);
-    border: 1px solid var(--mantine-color-border-action-normal-0);
+    --button-bg: var(--color-background-button-secondary);
+    --button-hover: var(--color-background-button-secondary-hover);
+    --button-color: var(--color-text-base-primary);
+    border-color: var(--color-border-action-normal);
     box-shadow: var(--mantine-shadow-xs);
 
-    &:hover {
-      background-color: var(--color-background-button-secondary-hover);
-      border: 1px solid var(--color-border-action-hover);
+    @media (hover: hover) {
+      &:hover:where(:not([data-loading], :disabled, [data-disabled])) {
+        border-color: var(--color-border-action-hover);
+      }
     }
 
-    &:disabled,
-    &[data-disabled] {
+    &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
       background-color: var(--color-background-button-secondary-disabled);
-      border: 1px solid var(--color-border-action-disabled);
+      border-color: var(--color-border-action-disabled);
+      box-shadow: none;
     }
 
-    .loader {
-      --button-color: var(--mantine-color-gray-5);
+    &::before {
+      background-color: rgba(0, 0, 0, 0.05);
     }
   }
 
   &[data-variant='tertiary'] {
-    background-color: var(--color-background-button-tertiary);
-    color: var(--mantine-color-primary);
+    --button-bg: var(--color-background-button-tertiary);
+    --button-hover: var(--color-background-button-tertiary-hover);
+    --button-color: var(--color-text-base-primary);
 
-    &:hover {
-      background-color: var(--color-background-button-tertiary-hover);
-    }
-
-    &:disabled,
-    &[data-disabled] {
+    &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
       background-color: var(--color-background-button-tertiary);
     }
 
-    .loader {
-      --button-color: var(--mantine-color-gray-5);
+    &::before {
+      background-color: rgba(0, 0, 0, 0.05);
     }
   }
 
   &[data-variant='ghost'] {
-    background-color: transparent;
-    color: var(--mantine-color-text-base-secondary-0);
+    --button-bg: transparent;
+    --button-hover: var(--color-background-button-ghost-hover);
+    --button-color: var(--color-text-base-secondary);
     box-shadow: none;
 
-    &:hover {
-      background-color: var(--color-background-button-ghost-hover);
-    }
-
-    &:disabled,
-    &[data-disabled] {
+    &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
       background-color: transparent;
     }
 
-    .loader {
-      --button-color: var(--mantine-color-gray-5);
+    &::before {
+      background-color: rgba(0, 0, 0, 0.05);
     }
   }
 
-  &:disabled,
-  &[data-disabled] {
+  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
     color: var(--color-text-base-quaternary);
   }
 
   &:focus-visible {
-    border: rem(1px) solid var(--color-border-action-focus-light);
+    border-color: var(--color-border-action-focus-light);
     box-shadow: var(--shadow-focus-ring-light);
   }
+
+  &:where([data-with-left-section]) {
+    padding-inline-start: var(--button-padding-x);
+  }
 }
 
 .section {
-  --mantine-spacing-xs: 0.25rem;
+  &:where([data-position='left']) {
+    margin-inline-end: rem(4px);
+
+    .root[data-size='sm'] & {
+      margin-inline-end: rem(2px);
+    }
+  }
+
+  &:where([data-position='right']) {
+    margin-inline-start: rem(4px);
+
+    .root[data-size='sm'] & {
+      margin-inline-start: rem(2px);
+    }
+  }
+}
+
+.label {
+  .root[data-size='sm'] &,
+  .root[data-size='md'] &,
+  .root[data-size='lg'] & {
+    padding-inline: rem(4px);
+  }
 }

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

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

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

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

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

@@ -6,36 +6,50 @@
 
 .input {
   --input-height: 2.5rem;
+  --input-color: var(--color-text-base-primary);
+  --input-disabled-bg: var(--color-background-input-disabled);
+  --input-disabled-color: var(--color-text-base-quaternary);
+  --input-radius: var(--mantine-radius-xl);
+  --input-bd: var(--color-border-action-normal);
 
-  border-radius: var(--mantine-radius-xl);
-  border: 1px solid var(--mantine-color-border-action-normal-0);
   box-shadow: var(--mantine-shadow-xs);
-  color: var(--mantine-color-text-base-primary-0);
 
   [data-position='left'] ~ & {
     --input-padding-inline-start: 2.5rem;
   }
 
-  &:hover {
-    border-color: var(--color-border-action-hover);
+  @media (hover: hover) {
+    &:hover:where(:not([data-loading], :disabled, [data-disabled])) {
+      --input-bd: var(--color-border-action-hover);
+    }
   }
 
   &:focus-within {
-    border-color: var(--mantine-color-text-base-primary-0);
+    --input-bd: var(--color-border-action-focus-light);
+    box-shadow: var(--shadow-focus-ring-light);
   }
 
   &[data-error] {
-    border: 1px solid var(--color-border-action-destructive);
-    color: var(--color-text-status-destructive);
+    --input-color: var(--color-text-status-destructive);
+    --input-bd: var(--color-border-action-destructive);
 
-    &:hover {
-      border-color: var(--color-border-action-destructive-hover);
+    @media (hover: hover) {
+      &:hover:where(:not([data-loading], :disabled, [data-disabled])) {
+        --input-bd: var(--color-border-action-destructive-hover);
+      }
     }
 
     &:focus-within {
-      border-color: var(--color-border-action-focus-destructive-light);
+      --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;
+  }
 }
 
 .wrapper {
@@ -43,8 +57,13 @@
 }
 
 .section {
+  --input-section-color: var(--color-icon-base-tertiary);
   --right-section-end: 0.75rem;
   --left-section-start: 0.25rem;
+
+  .wrapper[data-disabled] & {
+    --input-section-color: var(--color-icon-base-quaternary);
+  }
 }
 
 .description,
@@ -53,16 +72,17 @@
   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;
 
   &::before {
     content: '';
-    display: inline-block;
     width: rem(16px);
     height: rem(16px);
     background: currentColor;
-    mask: url('../../../assets/error.svg');
+    mask: url('../../../assets/error.svg') no-repeat;
+    margin-top: rem(2px);
     margin-right: rem(4px);
-    vertical-align: sub;
+    flex-shrink: 0;
   }
 }
 

package/src/components/KvellUiProvider/KvellUiProvider.module.css

@@ -47,6 +47,9 @@
   --color-background-accent-gray-accent: #717684;
   --color-background-accent-gray-subtle: #e9eaec;
   --color-background-accent-green-accent: #26bd6c;
+  --color-background-badge-gray: #e9eaec;
+  --color-background-badge-green: #d1fae4;
+  --color-background-badge-orange: #fdead8;
   --color-background-button-primary: #14151a;
   --color-background-button-primary-hover: #1f2228;
   --color-background-button-primary-disabled: #e9eaec;
@@ -56,6 +59,10 @@
   --color-background-button-tertiary: #0a0f290a;
   --color-background-button-tertiary-hover: #0a0f2914;
   --color-background-button-ghost-hover: #0a0f290a;
+  --color-background-button-destructive-tertiary: #e6483d1a;
+  --color-background-input-disabled: #fff;
+  --color-background-surface-neutral: #f7f7f8;
+  --color-background-surface-warning-subtle: #fdead8;
   --color-border-action-normal: #dee0e3;
   --color-border-action-hover: #c8cad0;
   --color-border-action-disabled: #e9eaec;
@@ -63,13 +70,23 @@
   --color-border-action-destructive: #f7c3c0;
   --color-border-action-destructive-hover: #f5b2ad;
   --color-border-action-focus-destructive-light: #f08b85;
+  --color-border-base-alpha: #0a0f2914;
   --color-text-accent-blue-accent: #4778f5;
+  --color-text-accent-green-inverted: #166e3f;
+  --color-text-accent-orange-inverted: #ae590a;
+  --color-text-base-primary: #14151a;
+  --color-text-base-secondary: #0f132499;
   --color-text-base-tertiary: #0d112666;
   --color-text-base-quaternary: #0a0f2940;
+  --color-text-base-inverted: #ffffff;
   --color-text-status-destructive: #e6483d;
   --color-icon-base-secondary: #0f132499;
   --color-icon-base-tertiary: #0d112666;
   --color-icon-base-quaternary: #0a0f2940;
   --color-icon-base-inverted: #ffffff;
+  --color-icon-status-success: #26bd6c;
+  --color-icon-status-warning: #f48e2f;
+  --color-icon-status-destructive-secondary: #e6483db2;
   --shadow-focus-ring-light: 0px 0px 0px 2px #c8b2ff80;
+  --shadow-focus-ring-light-destructive: 0px 0px 0px 2px #ffb2b299;
 }

package/src/components/KvellUiProvider/KvellUiProvider.tsx

@@ -2,6 +2,7 @@ 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.module.css'
 
 // ----------------------------------------------------------------------

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

@@ -1,43 +1,48 @@
 .root {
-  box-shadow: var(--mantine-shadows-lg);
-  width: 100%;
+  --mb-shadow: var(--mantine-shadows-lg);
+  --mb-padding: rem(20px);
+}
+
+@media (max-width: $mantine-breakpoint-xs) {
+  .inner {
+    align-items: end;
+    padding: 0;
+  }
 }
 
 .content {
-  border-radius: var(--mantine-radius-xl);
-  border: 1px solid var(--mantine-color-border-action-normal-0);
-  white-space: pre-wrap;
-  padding: 0.5rem;
+  border: rem(1px) solid var(--color-border-base-alpha);
+  border-radius: var(--mantine-radius-xxl);
 
   @media (max-width: $mantine-breakpoint-xs) {
-    width: 100%;
-    border-radius: var(--mantine-radius-xl) var(--mantine-radius-xl) 0 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 }
 
-.header {
-  padding-bottom: 0.25rem;
+.body {
+  padding-bottom: rem(32px);
 }
 
-.inner {
-  @media (max-width: $mantine-breakpoint-xs) {
-    align-items: end;
-    padding: 0;
-    width: 100%;
-  }
+.title {
+  font-weight: 600;
+  font-size: var(--mantine-font-size-body-s);
+  line-height: var(--mantine-line-height-body-s);
+  letter-spacing: var(--mantine-spacing-body-s);
 }
 
-button.close {
-  position: absolute;
-  right: 0.25rem;
-  top: 0.4rem;
-  display: flex;
+.close {
+  --cb-size: rem(24px);
+  margin-top: rem(-4px);
+  margin-right: rem(1px);
   background-color: var(--color-background-button-tertiary);
-  border-radius: 50%;
-  --cb-size: 1.5rem;
 
-  & > svg {
-    color: var(--mantine-color-icon-base-secondary-0);
+  &:hover {
+    background-color: var(--color-background-button-tertiary-hover);
+  }
+
+  svg {
+    color: var(--color-icon-base-secondary);
     scale: 0.75;
   }
 }

package/src/components/Modal/Modal.tsx

@@ -1,11 +1,10 @@
 import { Modal as ModalBase } from '@mantine/core'
 import '@mantine/core/styles/Modal.layer.css'
 import classNames from './Modal.module.css'
-import textClassNames from '../../styles/typography.module.css'
-import { BODY_M_MEDIUM_FONT_VARIANT } from '../../constants/font-variants'
 
 // ----------------------------------------------------------------------
 
 export const Modal = ModalBase.withProps({
-  classNames: { ...classNames, title: textClassNames[BODY_M_MEDIUM_FONT_VARIANT] },
+  classNames,
+  transitionProps: { transition: 'fade-up' },
 })

package/src/constants/font-variants.ts

@@ -1,12 +1,14 @@
 //heading
 export const H5_MEDIUM_FONT_VARIANT = 'h5-medium' as const
 export const H5_SEMIBOLD_FONT_VARIANT = 'h5-semibold' as const
+export const H5_BOLD_FONT_VARIANT = 'h5-bold' as const
 export const H6_BOLD_FONT_VARIANT = 'h6-bold' as const
 
 //body
 export const BODY_M_REGULAR_FONT_VARIANT = 'body-m-regular' as const
 export const BODY_M_MEDIUM_FONT_VARIANT = 'body-m-medium' as const
 export const BODY_M_BOLD_FONT_VARIANT = 'body-m-bold' as const
+export const BODY_L_MEDIUM_FONT_VARIANT = 'body-l-medium' as const
 export const BODY_L_BOLD_FONT_VARIANT = 'body-l-bold' as const
 export const BODY_S_MEDIUM_FONT_VARIANT = 'body-s-medium' as const
 export const BODY_S_REGULAR_FONT_VARIANT = 'body-s-regular' as const
@@ -23,8 +25,10 @@ export const FontVariants = [
   //heading
   H5_MEDIUM_FONT_VARIANT,
   H5_SEMIBOLD_FONT_VARIANT,
+  H5_BOLD_FONT_VARIANT,
   H6_BOLD_FONT_VARIANT,
   //body
+  BODY_L_MEDIUM_FONT_VARIANT,
   BODY_L_BOLD_FONT_VARIANT,
   BODY_M_REGULAR_FONT_VARIANT,
   BODY_M_MEDIUM_FONT_VARIANT,

package/src/index.ts

@@ -11,6 +11,8 @@ 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 * from './components/Inputs/DatePickerInput'
 
 //providers
 export { KvellUiProvider } from './components/KvellUiProvider'

package/src/styles/typography.module.css

@@ -1,3 +1,4 @@
+/* heading */
 .h5-medium {
   font-family: var(--mantine-font-family);
   font-weight: 500;
@@ -14,7 +15,22 @@
   letter-spacing: var(--mantine-spacing-h5);
 }
 
-/* heading */
+.h5-bold {
+  font-family: var(--mantine-font-family);
+  font-weight: 700;
+  font-size: var(--mantine-font-size-h5);
+  line-height: var(--mantine-line-height-h5);
+  letter-spacing: var(--mantine-spacing-h5);
+}
+
+.h6-medium {
+  font-family: var(--mantine-font-family);
+  font-weight: 500;
+  font-size: var(--mantine-font-size-h6);
+  line-height: var(--mantine-line-height-h6);
+  letter-spacing: var(--mantine-spacing-h6);
+}
+
 .h6-bold {
   font-family: var(--mantine-font-family);
   font-weight: 700;