Feat: started work with Mantine

Feat: removed chakra
2025-01-23 16:45:34 +03:00 · 2025-01-23 15:05:51 +03:00
26 changed files with 128 additions and 691 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
 # repomix
 repomix-output.txt
--- a/bun.lockb
+++ b/bun.lockb
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,9 +1,14 @@
 import type { NextConfig } from "next";
 import path from "node:path";
 const nextConfig: NextConfig = {
  output: "standalone",
  experimental: {
-    optimizePackageImports: ["@chakra-ui/react"],
+    optimizePackageImports: ["@mantine/core", "@mantine/hooks"],
  },
  sassOptions: {
    implementation: "sass-embedded",
    additionalData: `@use "${path.join(process.cwd(), "src/_mantine").replace(/\\/g, "/")}" as mantine;`,
  },
 };
--- a/package.json
+++ b/package.json
@@ -9,10 +9,10 @@
    "lint": "next lint"
  },
  "dependencies": {
-    "@chakra-ui/react": "^3.4.0",
+    "@mantine/core": "^7.16.1",
-    "@emotion/react": "^11.14.0",
+    "@mantine/hooks": "^7.16.1",
    "@mantine/modals": "^7.16.1",
    "next": "15.1.5",
    "next-themes": "^0.4.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-icons": "^5.4.0"
@@ -24,8 +24,10 @@
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.5",
-    "postcss": "^8",
+    "postcss": "^8.5.1",
-    "sass": "^1.83.4",
+    "postcss-preset-mantine": "^1.17.0",
    "postcss-simple-vars": "^7.0.1",
    "sass-embedded": "^1.83.4",
    "typescript": "^5"
  }
 }
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -0,0 +1,14 @@
 module.exports = {
  plugins: {
    "postcss-preset-mantine": {},
    "postcss-simple-vars": {
      variables: {
        "mantine-breakpoint-xs": "36em",
        "mantine-breakpoint-sm": "48em",
        "mantine-breakpoint-md": "62em",
        "mantine-breakpoint-lg": "75em",
        "mantine-breakpoint-xl": "88em",
      },
    },
  },
 };
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,6 +0,0 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
  plugins: {},
 };
 export default config;
--- a/src/_mantine.scss
+++ b/src/_mantine.scss
@@ -0,0 +1,57 @@
@use 'sass:math';
 // Define variables for your breakpoints,
 // values must be the same as in your theme
 $mantine-breakpoint-xs: '36em';
 $mantine-breakpoint-sm: '48em';
 $mantine-breakpoint-md: '62em';
 $mantine-breakpoint-lg: '75em';
 $mantine-breakpoint-xl: '88em';
@function rem($value) {
  @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
 }
@mixin light {
  [data-mantine-color-scheme='light'] & {
    @content;
  }
 }
@mixin dark {
  [data-mantine-color-scheme='dark'] & {
    @content;
  }
 }
@mixin hover {
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }
  @media (hover: none) {
    &:active {
      @content;
    }
  }
 }
@mixin smaller-than($breakpoint) {
  @media (max-width: $breakpoint) {
    @content;
  }
 }
@mixin larger-than($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
 }
@mixin ltr {
  [dir='ltr'] & {
    @content;
  }
 }
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -1,8 +0,0 @@
 export default async function Post({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  return (
    <div>
      <h1>Post: {slug}</h1>
    </div>
  );
 }
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,3 +0,0 @@
 export default function Blog() {
  return <h1>Blog</h1>;
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,8 @@
 import { ColorSchemeScript, MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.scss";
 import Providers from "./providers";
 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -25,8 +26,11 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="ru" suppressHydrationWarning>
      <head>
        <ColorSchemeScript />
      </head>
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <Providers>{children}</Providers>
+        <MantineProvider>{children}</MantineProvider>
      </body>
    </html>
  );
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,18 +1,42 @@
 "use client";
-import { Button } from "@/components/ui/button";
+import { AppShell, Burger, Button, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
-import { useColorMode, useColorModeValue } from "@/components/ui/color-mode";
+import { useDisclosure } from "@mantine/hooks";
-import { VStack } from "@chakra-ui/react";
+import { LuSun } from "react-icons/lu";
 export default function Home() {
-  const { toggleColorMode } = useColorMode();
+  const [opened, { toggle }] = useDisclosure();
-  const color = useColorModeValue("red", "blue");
+  const { setColorScheme, colorScheme } = useMantineColorScheme();
  return (
-    <VStack>
+    <AppShell
-      <Button onClick={toggleColorMode}>Test 1</Button>
+      header={{ height: 60 }}
-      <Button colorPalette={color} variant="solid">
+      navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
-        {color}
+      padding="md"
-      </Button>
+    >
-    </VStack>
+      <AppShell.Header>
        <Group h="100%" px="md">
          <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
          <div>Logo</div>
        </Group>
      </AppShell.Header>
      <AppShell.Navbar p="md">
        {Array(15)
          .fill(0)
          .map((_, index) => (
            <Skeleton key={index} h={28} mt="sm" animate={false} />
          ))}
        <Button
          onClick={() => {
            setColorScheme(colorScheme === "light" ? "dark" : "light");
          }}
        >
          <LuSun />
        </Button>
      </AppShell.Navbar>
      <AppShell.Main>Main</AppShell.Main>
      <AppShell.Footer>
        <div>Footer</div>
      </AppShell.Footer>
    </AppShell>
  );
 }
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -1,5 +0,0 @@
 import { Provider } from "@/components/ui/provider";
 export default function Providers(props: React.PropsWithChildren) {
  return <Provider>{props.children}</Provider>;
 }
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -1,74 +0,0 @@
 "use client"
 import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react"
 import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react"
 import * as React from "react"
 type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
 export interface AvatarProps extends ChakraAvatar.RootProps {
  name?: string
  src?: string
  srcSet?: string
  loading?: ImageProps["loading"]
  icon?: React.ReactElement
  fallback?: React.ReactNode
 }
 export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
  function Avatar(props, ref) {
    const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
      props
    return (
      <ChakraAvatar.Root ref={ref} {...rest}>
        <AvatarFallback name={name} icon={icon}>
          {fallback}
        </AvatarFallback>
        <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
        {children}
      </ChakraAvatar.Root>
    )
  },
 )
 interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
  name?: string
  icon?: React.ReactElement
 }
 const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
  function AvatarFallback(props, ref) {
    const { name, icon, children, ...rest } = props
    return (
      <ChakraAvatar.Fallback ref={ref} {...rest}>
        {children}
        {name != null && children == null && <>{getInitials(name)}</>}
        {name == null && children == null && (
          <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
        )}
      </ChakraAvatar.Fallback>
    )
  },
 )
 function getInitials(name: string) {
  const names = name.trim().split(" ")
  const firstName = names[0] != null ? names[0] : ""
  const lastName = names.length > 1 ? names[names.length - 1] : ""
  return firstName && lastName
    ? `${firstName.charAt(0)}${lastName.charAt(0)}`
    : firstName.charAt(0)
 }
 interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}
 export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
  function AvatarGroup(props, ref) {
    const { size, variant, borderless, ...rest } = props
    return (
      <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
        <Group gap="0" spaceX="-3" ref={ref} {...rest} />
      </ChakraAvatar.PropsProvider>
    )
  },
 )
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,33 +0,0 @@
 import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
 import { AbsoluteCenter, Button as ChakraButton, Span, Spinner } from "@chakra-ui/react";
 import * as React from "react";
 interface ButtonLoadingProps {
  loading?: boolean;
  loadingText?: React.ReactNode;
 }
 export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
  const { loading, disabled, loadingText, children, ...rest } = props;
  return (
    <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
      {loading && !loadingText ? (
        <>
          <AbsoluteCenter display="inline-flex">
            <Spinner size="inherit" color="inherit" />
          </AbsoluteCenter>
          <Span opacity={0}>{children}</Span>
        </>
      ) : loading && loadingText ? (
        <>
          <Spinner size="inherit" color="inherit" />
          {loadingText}
        </>
      ) : (
        children
      )}
    </ChakraButton>
  );
 });
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,25 +0,0 @@
 import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
 import * as React from "react"
 export interface CheckboxProps extends ChakraCheckbox.RootProps {
  icon?: React.ReactNode
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
  rootRef?: React.Ref<HTMLLabelElement>
 }
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  function Checkbox(props, ref) {
    const { icon, children, inputProps, rootRef, ...rest } = props
    return (
      <ChakraCheckbox.Root ref={rootRef} {...rest}>
        <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
        <ChakraCheckbox.Control>
          {icon || <ChakraCheckbox.Indicator />}
        </ChakraCheckbox.Control>
        {children != null && (
          <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
        )}
      </ChakraCheckbox.Root>
    )
  },
 )
--- a/src/components/ui/close-button.tsx
+++ b/src/components/ui/close-button.tsx
@@ -1,17 +0,0 @@
 import type { ButtonProps } from "@chakra-ui/react"
 import { IconButton as ChakraIconButton } from "@chakra-ui/react"
 import * as React from "react"
 import { LuX } from "react-icons/lu"
 export type CloseButtonProps = ButtonProps
 export const CloseButton = React.forwardRef<
  HTMLButtonElement,
  CloseButtonProps
 >(function CloseButton(props, ref) {
  return (
    <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
      {props.children ?? <LuX />}
    </ChakraIconButton>
  )
 })
--- a/src/components/ui/color-mode.tsx
+++ b/src/components/ui/color-mode.tsx
@@ -1,75 +0,0 @@
 "use client";
 import type { IconButtonProps } from "@chakra-ui/react";
 import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react";
 import type { ThemeProviderProps } from "next-themes";
 import { ThemeProvider, useTheme } from "next-themes";
 import * as React from "react";
 import { LuMoon, LuSun } from "react-icons/lu";
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ColorModeProviderProps extends ThemeProviderProps {}
 export function ColorModeProvider(props: ColorModeProviderProps) {
  return <ThemeProvider attribute="class" disableTransitionOnChange {...props} />;
 }
 export type ColorMode = "light" | "dark";
 export interface UseColorModeReturn {
  colorMode: ColorMode;
  setColorMode: (colorMode: ColorMode) => void;
  toggleColorMode: () => void;
 }
 export function useColorMode(): UseColorModeReturn {
  const { resolvedTheme, setTheme } = useTheme();
  const toggleColorMode = () => {
    setTheme(resolvedTheme === "light" ? "dark" : "light");
  };
  return {
    colorMode: resolvedTheme as ColorMode,
    setColorMode: setTheme,
    toggleColorMode,
  };
 }
 export function useColorModeValue<T>(light: T, dark: T) {
  const { colorMode } = useColorMode();
  return colorMode === "dark" ? dark : light;
 }
 export function ColorModeIcon() {
  const { colorMode } = useColorMode();
  return colorMode === "dark" ? <LuMoon /> : <LuSun />;
 }
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
 export const ColorModeButton = React.forwardRef<HTMLButtonElement, ColorModeButtonProps>(function ColorModeButton(
  props,
  ref,
 ) {
  const { toggleColorMode } = useColorMode();
  return (
    <ClientOnly fallback={<Skeleton boxSize="8" />}>
      <IconButton
        onClick={toggleColorMode}
        variant="ghost"
        aria-label="Toggle color mode"
        size="sm"
        ref={ref}
        {...props}
        css={{
          _icon: {
            width: "5",
            height: "5",
          },
        }}
      >
        <ColorModeIcon />
      </IconButton>
    </ClientOnly>
  );
 });
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,62 +0,0 @@
 import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react"
 import { CloseButton } from "./close-button"
 import * as React from "react"
 interface DialogContentProps extends ChakraDialog.ContentProps {
  portalled?: boolean
  portalRef?: React.RefObject<HTMLElement>
  backdrop?: boolean
 }
 export const DialogContent = React.forwardRef<
  HTMLDivElement,
  DialogContentProps
 >(function DialogContent(props, ref) {
  const {
    children,
    portalled = true,
    portalRef,
    backdrop = true,
    ...rest
  } = props
  return (
    <Portal disabled={!portalled} container={portalRef}>
      {backdrop && <ChakraDialog.Backdrop />}
      <ChakraDialog.Positioner>
        <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
          {children}
        </ChakraDialog.Content>
      </ChakraDialog.Positioner>
    </Portal>
  )
 })
 export const DialogCloseTrigger = React.forwardRef<
  HTMLButtonElement,
  ChakraDialog.CloseTriggerProps
 >(function DialogCloseTrigger(props, ref) {
  return (
    <ChakraDialog.CloseTrigger
      position="absolute"
      top="2"
      insetEnd="2"
      {...props}
      asChild
    >
      <CloseButton size="sm" ref={ref}>
        {props.children}
      </CloseButton>
    </ChakraDialog.CloseTrigger>
  )
 })
 export const DialogRoot = ChakraDialog.Root
 export const DialogFooter = ChakraDialog.Footer
 export const DialogHeader = ChakraDialog.Header
 export const DialogBody = ChakraDialog.Body
 export const DialogBackdrop = ChakraDialog.Backdrop
 export const DialogTitle = ChakraDialog.Title
 export const DialogDescription = ChakraDialog.Description
 export const DialogTrigger = ChakraDialog.Trigger
 export const DialogActionTrigger = ChakraDialog.ActionTrigger
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,52 +0,0 @@
 import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react"
 import { CloseButton } from "./close-button"
 import * as React from "react"
 interface DrawerContentProps extends ChakraDrawer.ContentProps {
  portalled?: boolean
  portalRef?: React.RefObject<HTMLElement>
  offset?: ChakraDrawer.ContentProps["padding"]
 }
 export const DrawerContent = React.forwardRef<
  HTMLDivElement,
  DrawerContentProps
 >(function DrawerContent(props, ref) {
  const { children, portalled = true, portalRef, offset, ...rest } = props
  return (
    <Portal disabled={!portalled} container={portalRef}>
      <ChakraDrawer.Positioner padding={offset}>
        <ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
          {children}
        </ChakraDrawer.Content>
      </ChakraDrawer.Positioner>
    </Portal>
  )
 })
 export const DrawerCloseTrigger = React.forwardRef<
  HTMLButtonElement,
  ChakraDrawer.CloseTriggerProps
 >(function DrawerCloseTrigger(props, ref) {
  return (
    <ChakraDrawer.CloseTrigger
      position="absolute"
      top="2"
      insetEnd="2"
      {...props}
      asChild
    >
      <CloseButton size="sm" ref={ref} />
    </ChakraDrawer.CloseTrigger>
  )
 })
 export const DrawerTrigger = ChakraDrawer.Trigger
 export const DrawerRoot = ChakraDrawer.Root
 export const DrawerFooter = ChakraDrawer.Footer
 export const DrawerHeader = ChakraDrawer.Header
 export const DrawerBody = ChakraDrawer.Body
 export const DrawerBackdrop = ChakraDrawer.Backdrop
 export const DrawerDescription = ChakraDrawer.Description
 export const DrawerTitle = ChakraDrawer.Title
 export const DrawerActionTrigger = ChakraDrawer.ActionTrigger
--- a/src/components/ui/field.tsx
+++ b/src/components/ui/field.tsx
@@ -1,33 +0,0 @@
 import { Field as ChakraField } from "@chakra-ui/react"
 import * as React from "react"
 export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
  label?: React.ReactNode
  helperText?: React.ReactNode
  errorText?: React.ReactNode
  optionalText?: React.ReactNode
 }
 export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
  function Field(props, ref) {
    const { label, children, helperText, errorText, optionalText, ...rest } =
      props
    return (
      <ChakraField.Root ref={ref} {...rest}>
        {label && (
          <ChakraField.Label>
            {label}
            <ChakraField.RequiredIndicator fallback={optionalText} />
          </ChakraField.Label>
        )}
        {children}
        {helperText && (
          <ChakraField.HelperText>{helperText}</ChakraField.HelperText>
        )}
        {errorText && (
          <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
        )}
      </ChakraField.Root>
    )
  },
 )
--- a/src/components/ui/input-group.tsx
+++ b/src/components/ui/input-group.tsx
@@ -1,53 +0,0 @@
 import type { BoxProps, InputElementProps } from "@chakra-ui/react"
 import { Group, InputElement } from "@chakra-ui/react"
 import * as React from "react"
 export interface InputGroupProps extends BoxProps {
  startElementProps?: InputElementProps
  endElementProps?: InputElementProps
  startElement?: React.ReactNode
  endElement?: React.ReactNode
  children: React.ReactElement<InputElementProps>
  startOffset?: InputElementProps["paddingStart"]
  endOffset?: InputElementProps["paddingEnd"]
 }
 export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
  function InputGroup(props, ref) {
    const {
      startElement,
      startElementProps,
      endElement,
      endElementProps,
      children,
      startOffset = "6px",
      endOffset = "6px",
      ...rest
    } = props
    const child =
      React.Children.only<React.ReactElement<InputElementProps>>(children)
    return (
      <Group ref={ref} {...rest}>
        {startElement && (
          <InputElement pointerEvents="none" {...startElementProps}>
            {startElement}
          </InputElement>
        )}
        {React.cloneElement(child, {
          ...(startElement && {
            ps: `calc(var(--input-height) - ${startOffset})`,
          }),
          ...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
          ...children.props,
        })}
        {endElement && (
          <InputElement placement="end" {...endElementProps}>
            {endElement}
          </InputElement>
        )}
      </Group>
    )
  },
 )
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,59 +0,0 @@
 import { Popover as ChakraPopover, Portal } from "@chakra-ui/react"
 import { CloseButton } from "./close-button"
 import * as React from "react"
 interface PopoverContentProps extends ChakraPopover.ContentProps {
  portalled?: boolean
  portalRef?: React.RefObject<HTMLElement>
 }
 export const PopoverContent = React.forwardRef<
  HTMLDivElement,
  PopoverContentProps
 >(function PopoverContent(props, ref) {
  const { portalled = true, portalRef, ...rest } = props
  return (
    <Portal disabled={!portalled} container={portalRef}>
      <ChakraPopover.Positioner>
        <ChakraPopover.Content ref={ref} {...rest} />
      </ChakraPopover.Positioner>
    </Portal>
  )
 })
 export const PopoverArrow = React.forwardRef<
  HTMLDivElement,
  ChakraPopover.ArrowProps
 >(function PopoverArrow(props, ref) {
  return (
    <ChakraPopover.Arrow {...props} ref={ref}>
      <ChakraPopover.ArrowTip />
    </ChakraPopover.Arrow>
  )
 })
 export const PopoverCloseTrigger = React.forwardRef<
  HTMLButtonElement,
  ChakraPopover.CloseTriggerProps
 >(function PopoverCloseTrigger(props, ref) {
  return (
    <ChakraPopover.CloseTrigger
      position="absolute"
      top="1"
      insetEnd="1"
      {...props}
      asChild
      ref={ref}
    >
      <CloseButton size="sm" />
    </ChakraPopover.CloseTrigger>
  )
 })
 export const PopoverTitle = ChakraPopover.Title
 export const PopoverDescription = ChakraPopover.Description
 export const PopoverFooter = ChakraPopover.Footer
 export const PopoverHeader = ChakraPopover.Header
 export const PopoverRoot = ChakraPopover.Root
 export const PopoverBody = ChakraPopover.Body
 export const PopoverTrigger = ChakraPopover.Trigger
--- a/src/components/ui/provider.tsx
+++ b/src/components/ui/provider.tsx
@@ -1,15 +0,0 @@
 "use client"
 import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
 import {
  ColorModeProvider,
  type ColorModeProviderProps,
 } from "./color-mode"
 export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
 }
--- a/src/components/ui/radio.tsx
+++ b/src/components/ui/radio.tsx
@@ -1,24 +0,0 @@
 import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"
 import * as React from "react"
 export interface RadioProps extends ChakraRadioGroup.ItemProps {
  rootRef?: React.Ref<HTMLDivElement>
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
 }
 export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
  function Radio(props, ref) {
    const { children, inputProps, rootRef, ...rest } = props
    return (
      <ChakraRadioGroup.Item ref={rootRef} {...rest}>
        <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
        <ChakraRadioGroup.ItemIndicator />
        {children && (
          <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
        )}
      </ChakraRadioGroup.Item>
    )
  },
 )
 export const RadioGroup = ChakraRadioGroup.Root
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,82 +0,0 @@
 import { Slider as ChakraSlider, For, HStack } from "@chakra-ui/react"
 import * as React from "react"
 export interface SliderProps extends ChakraSlider.RootProps {
  marks?: Array<number | { value: number; label: React.ReactNode }>
  label?: React.ReactNode
  showValue?: boolean
 }
 export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
  function Slider(props, ref) {
    const { marks: marksProp, label, showValue, ...rest } = props
    const value = props.defaultValue ?? props.value
    const marks = marksProp?.map((mark) => {
      if (typeof mark === "number") return { value: mark, label: undefined }
      return mark
    })
    const hasMarkLabel = !!marks?.some((mark) => mark.label)
    return (
      <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
        {label && !showValue && (
          <ChakraSlider.Label>{label}</ChakraSlider.Label>
        )}
        {label && showValue && (
          <HStack justify="space-between">
            <ChakraSlider.Label>{label}</ChakraSlider.Label>
            <ChakraSlider.ValueText />
          </HStack>
        )}
        <ChakraSlider.Control data-has-mark-label={hasMarkLabel || undefined}>
          <ChakraSlider.Track>
            <ChakraSlider.Range />
          </ChakraSlider.Track>
          <SliderThumbs value={value} />
          <SliderMarks marks={marks} />
        </ChakraSlider.Control>
      </ChakraSlider.Root>
    )
  },
 )
 function SliderThumbs(props: { value?: number[] }) {
  const { value } = props
  return (
    <For each={value}>
      {(_, index) => (
        <ChakraSlider.Thumb key={index} index={index}>
          <ChakraSlider.HiddenInput />
        </ChakraSlider.Thumb>
      )}
    </For>
  )
 }
 interface SliderMarksProps {
  marks?: Array<number | { value: number; label: React.ReactNode }>
 }
 const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(
  function SliderMarks(props, ref) {
    const { marks } = props
    if (!marks?.length) return null
    return (
      <ChakraSlider.MarkerGroup ref={ref}>
        {marks.map((mark, index) => {
          const value = typeof mark === "number" ? mark : mark.value
          const label = typeof mark === "number" ? undefined : mark.label
          return (
            <ChakraSlider.Marker key={index} value={value}>
              <ChakraSlider.MarkerIndicator />
              {label}
            </ChakraSlider.Marker>
          )
        })}
      </ChakraSlider.MarkerGroup>
    )
  },
 )
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,46 +0,0 @@
 import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
 import * as React from "react"
 export interface TooltipProps extends ChakraTooltip.RootProps {
  showArrow?: boolean
  portalled?: boolean
  portalRef?: React.RefObject<HTMLElement>
  content: React.ReactNode
  contentProps?: ChakraTooltip.ContentProps
  disabled?: boolean
 }
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
  function Tooltip(props, ref) {
    const {
      showArrow,
      children,
      disabled,
      portalled = true,
      content,
      contentProps,
      portalRef,
      ...rest
    } = props
    if (disabled) return children
    return (
      <ChakraTooltip.Root {...rest}>
        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
        <Portal disabled={!portalled} container={portalRef}>
          <ChakraTooltip.Positioner>
            <ChakraTooltip.Content ref={ref} {...contentProps}>
              {showArrow && (
                <ChakraTooltip.Arrow>
                  <ChakraTooltip.ArrowTip />
                </ChakraTooltip.Arrow>
              )}
              {content}
            </ChakraTooltip.Content>
          </ChakraTooltip.Positioner>
        </Portal>
      </ChakraTooltip.Root>
    )
  },
 )
Author	SHA1	Message	Date
Sergey Elpashev	d97cafa9ec	Feat: started work with Mantine	2025-01-23 16:45:34 +03:00
Sergey Elpashev	c8a42598bf	Feat: removed chakra	2025-01-23 15:05:51 +03:00