@kvell-group/ui 1.18.13 → 1.18.15

package/package.json

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

package/src/components/ActionIcon/ActionIcon.tsx

@@ -1,7 +1,5 @@
 import { createPolymorphicComponent, ActionIcon as MantineActionIcon } from '@mantine/core'
 import type { ActionIconProps as BaseActionIconProps } from '@mantine/core'
-import '@mantine/core/styles/UnstyledButton.layer.css'
-import '@mantine/core/styles/Button.layer.css'
 import classNames from './ActionIcon.module.css'
 import { forwardRef } from 'react'
 import type { ExtendedActionIconVariant } from './types'

package/src/components/Button/Button.tsx

@@ -1,7 +1,5 @@
 import { createPolymorphicComponent, Button as MantineButton } from '@mantine/core'
 import type { ButtonProps as BaseButtonProps } from '@mantine/core'
-import '@mantine/core/styles/UnstyledButton.layer.css'
-import '@mantine/core/styles/Button.layer.css'
 import classNames from './Button.module.css'
 import { forwardRef } from 'react'
 import type { ExtendedButtonVariant } from './types'

package/src/components/Pagination/Pagination.module.css

@@ -0,0 +1,44 @@
+.root {
+  --pagination-active-bg: var(--color-background-button-tertiary);
+  --pagination-active-color: var(--color-text-base-primary);
+
+  --pagination-control-size-sm: rem(32px);
+  --pagination-control-size-md: rem(40px);
+
+  color: var(--color-text-base-secondary);
+  font-weight: 500;
+
+  &[data-size='sm'] {
+    --pagination-control-radius: var(--mantine-radius-lg);
+
+    & .control {
+      --pagination-control-fz: var(--mantine-font-size-caption-l);
+    }
+  }
+
+  &[data-size='md'] {
+    --pagination-control-radius: var(--mantine-radius-xl);
+
+    & .control {
+      --pagination-control-fz: var(--mantine-font-size-body-s);
+    }
+  }
+}
+
+.control {
+  border-color: transparent;
+}
+
+.control:not([data-active]) {
+  color: var(--color-text-base-secondary);
+  background: none;
+}
+
+.control:hover:not(:disabled, [data-disabled]) {
+  background: var(--color-background-button-tertiary);
+}
+
+.control:focus-visible {
+  border-color: var(--color-border-action-focus-light);
+  box-shadow: var(--shadow-focus-ring-light);
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,10 @@
+import { Pagination as MantinePagination } from '@mantine/core'
+import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
+import classNames from './Pagination.module.css'
+
+export const Pagination = MantinePagination.withProps({
+  classNames,
+  previousIcon: () => <RiArrowLeftLine size={16} />,
+  nextIcon: () => <RiArrowRightLine size={16} />,
+  dotsIcon: () => '...',
+})

package/src/components/Pagination/index.ts

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

package/src/index.ts

@@ -28,6 +28,7 @@ export { Badge } from './components/Badge'
 export { Carousel } from './components/Carousel'
 export { Card } from './components/Card'
 export * from './components/ActionIcon'
+export * from './components/Pagination'
 
 // core-components ------------------------------------------------------