code: tsx,nextjs,frontends (3 files)

frontends/nextjs/src/components/ui/molecules/tabs/components/TabsContent.tsx

@@ -1,17 +1,17 @@
 'use client'
 
-import type { BoxProps } from '@mui/material'
-import { Box } from '@mui/material'
+import { Box } from '@fakemui/layout/Box'
+import type { BoxProps } from '@fakemui/layout/Box'
 import { forwardRef, useContext } from 'react'
 
 import { TabsContext } from '../core/tabs-context'
 
-export interface TabsContentProps extends BoxProps {
+export interface TabsContentProps extends Omit<BoxProps, 'ref'> {
   value: string
 }
 
 const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
-  ({ children, value, sx, ...props }, ref) => {
+  ({ children, value, style, ...props }, ref) => {
     const context = useContext(TabsContext)
 
     if (!context) {
@@ -22,16 +22,16 @@ const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
 
     return (
       <Box
-        ref={ref}
+        ref={ref as React.Ref<HTMLElement>}
         role="tabpanel"
         id={`${context.idPrefix}-panel-${value}`}
         aria-labelledby={`${context.idPrefix}-tab-${value}`}
         hidden={!isActive}
-        sx={{
+        style={{
           flex: 1,
           outline: 'none',
           display: isActive ? 'block' : 'none',
-          ...sx,
+          ...style,
         }}
         {...props}
       >

frontends/nextjs/src/components/ui/molecules/tabs/components/TabsTrigger.tsx

@@ -1,18 +1,19 @@
 'use client'
 
-import type { BoxProps } from '@mui/material'
-import { Box } from '@mui/material'
-import type { MouseEvent } from 'react'
+import { Box } from '@fakemui/layout/Box'
+import type { MouseEvent, CSSProperties, ButtonHTMLAttributes } from 'react'
 import { forwardRef, useContext } from 'react'
 
 import { TabsContext } from '../core/tabs-context'
+import styles from './TabsTrigger.module.scss'
 
-export interface TabsTriggerProps extends BoxProps<'button'> {
+export interface TabsTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'ref'> {
   value: string
+  style?: CSSProperties
 }
 
 const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
-  ({ children, value, onClick, disabled, sx, ...props }, ref) => {
+  ({ children, value, onClick, disabled, style, className, ...props }, ref) => {
     const context = useContext(TabsContext)
 
     if (!context) {
@@ -31,7 +32,7 @@ const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
 
     return (
       <Box
-        ref={ref}
+        ref={ref as React.Ref<HTMLElement>}
         component="button"
         type="button"
         role="tab"
@@ -43,35 +44,8 @@ const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
         data-state={isSelected ? 'active' : 'inactive'}
         data-value={value}
         onClick={handleClick}
-        sx={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          whiteSpace: 'nowrap',
-          px: 2,
-          py: 0.75,
-          fontSize: '0.875rem',
-          fontWeight: 500,
-          borderRadius: 1.5,
-          border: 0,
-          bgcolor: 'transparent',
-          color: 'text.secondary',
-          cursor: 'pointer',
-          transition: 'all 0.15s',
-          '&:hover': {
-            color: 'text.primary',
-          },
-          '&[aria-selected="true"]': {
-            bgcolor: 'background.paper',
-            color: 'text.primary',
-            boxShadow: 1,
-          },
-          '&:disabled': {
-            opacity: 0.5,
-            cursor: 'not-allowed',
-          },
-          ...sx,
-        }}
+        className={`${styles.tabsTrigger} ${className ?? ''}`}
+        style={style}
         {...props}
       >
         {children}

frontends/nextjs/src/components/ui/molecules/tabs/core/Tabs.tsx

@@ -1,19 +1,19 @@
 'use client'
 
-import type { BoxProps } from '@mui/material'
-import { Box } from '@mui/material'
+import { Box } from '@fakemui/layout/Box'
+import type { BoxProps } from '@fakemui/layout/Box'
 import { forwardRef, useId, useState } from 'react'
 
 import { TabsContext } from './tabs-context'
 
-export interface TabsProps extends BoxProps {
+export interface TabsProps extends Omit<BoxProps, 'ref'> {
   defaultValue?: string
   value?: string
   onValueChange?: (value: string) => void
 }
 
 const Tabs = forwardRef<HTMLDivElement, TabsProps>(
-  ({ children, defaultValue, value, onValueChange, sx, ...props }, ref) => {
+  ({ children, defaultValue, value, onValueChange, style, ...props }, ref) => {
     const [internalValue, setInternalValue] = useState(defaultValue ?? '')
     const currentValue = value ?? internalValue
     const idPrefix = useId()
@@ -27,7 +27,16 @@ const Tabs = forwardRef<HTMLDivElement, TabsProps>(
 
     return (
       <TabsContext.Provider value={{ value: currentValue, setValue: handleValueChange, idPrefix }}>
-        <Box ref={ref} sx={{ display: 'flex', flexDirection: 'column', gap: 2, ...sx }} {...props}>
+        <Box
+          ref={ref as React.Ref<HTMLElement>}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '16px',
+            ...style,
+          }}
+          {...props}
+        >
           {children}
         </Box>
       </TabsContext.Provider>