@modul/mbui 0.0.9 → 0.0.10-beta-pv-52970-e24498f8

package/src/@/config/label.ts

@@ -0,0 +1,89 @@
+export default {
+	textColor: {
+		label: {
+			primary: {
+				DEFAULT: 'var(--btn-primary)',
+				outline: {
+					DEFAULT: 'var(--btn-primary-bg)',
+					hover: 'var(--btn-primary-hover-bg)',
+					focus: 'var(var(--btn-primary-focus-bg)',
+					active: 'var(--btn-primary-active-bg)',
+				}
+			},
+			secondary: 'var(--btn-secondary)',
+			success: 'var(--btn-success)',
+			ghost: 'var(--btn-ghost)',
+			outline: {
+				DEFAULT: 'var(--btn-ghost)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			}
+		}
+	},
+	backgroundColor: {
+		label: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			success: {
+				DEFAULT: 'var(--btn-success-bg)',
+				hover: 'var(--btn-success-hover-bg)',
+				focus: 'var(var(--btn-success-focus-bg)',
+				active: 'var(--btn-success-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			}
+		}
+	},
+	borderColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+				outline: {
+					DEFAULT: 'var(--btn-primary-bg)',
+					hover: 'var(--btn-primary-hover-bg)',
+					focus: 'var(var(--btn-primary-focus-bg)',
+					active: 'var(--btn-primary-active-bg)',
+				}
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			success: {
+				DEFAULT: 'var(--btn-success-bg)',
+				hover: 'var(--btn-success-hover-bg)',
+				focus: 'var(var(--btn-success-focus-bg)',
+				active: 'var(--btn-success-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			},
+			outline: {
+				DEFAULT: 'var(--btn-ghost)',
+			}
+		}
+	}
+}

package/src/BottomNavigation/BottomNavigation.tsx

@@ -11,8 +11,7 @@ export type IProps = {
 	children: React.ReactNode
 }
 
-const btnClasses =
-	'inline-flex flex-col gap-y-[8px] place-items-center hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active p-[8px] w-full text-[10px] text-center hover:text-primary leading-[1.33] transition duration-300'
+const btnClasses = 'inline-flex flex-col place-items-center gap-y-[8px] hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active p-[8px] w-full text-[10px] text-center text-light hover:text-primary data-[status=active]:text-primary leading-[1.33] transition duration-300'
 
 const BottomNavigationLink = React.forwardRef<HTMLButtonElement, BottomNavigationLinkProps>(({ className, asChild, ...props }, ref) => {
 	const Comp = asChild ? Slot : "button"

package/src/Button/Button.tsx

@@ -6,7 +6,7 @@ import { cn } from '../@/lib/utils'
 // import { cn } from "@/lib/utils" порешать с алиасами
 
 const buttonVariants = cva(
-	'inline-flex items-center border-[2px] justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring ring-offset-1 disabled:pointer-events-none disabled:opacity-[.24]',
+	'inline-flex justify-center items-center border-[2px] disabled:opacity-[.24] focus-visible:ring ring-offset-1 font-medium whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none',
 	{
 		variants: {
 			variant: {
@@ -37,7 +37,7 @@ const buttonVariants = cva(
 	}
 )
 const textVariants = cva(
-	'inline-flex whitespace-nowrap transition-colors focus-visible:outline-current rounded-[.25em] disabled:pointer-events-none disabled:opacity-[.24]',
+	'inline-flex whitespace-nowrap transition-colors focus-visible:outline-current disabled:opacity-[.24] rounded-[.25em] disabled:pointer-events-none',
 	{
 		variants: {
 			variant: {

package/src/Button/index.ts

@@ -1 +1 @@
-export {Button} from './Button'
+export {Button, buttonVariants} from './Button'

package/src/Chip/Chip.tsx

@@ -0,0 +1,56 @@
+import React, { FC, PropsWithChildren } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from '@radix-ui/react-slot'
+import { cn } from '../@/lib/utils'
+// import { cn } from "@/lib/utils" порешать с алиасами
+
+const chipVariants = cva(
+	'inline-flex justify-center items-center border-[2px] disabled:opacity-[.24] rounded-full ring-offset-1 font-medium whitespace-nowrap transition-colors disabled:pointer-events-none',
+	{
+		variants: {
+			variant: {
+				primary:
+					'text-btn-primary bg-btn-primary hover:bg-btn-primary-hover focus:bg-btn-primary-focus active:bg-btn-primary-active border-btn-primary hover:border-btn-primary-hover focus:border-btn-primary-focus active:border-btn-primary-active',
+				secondary:
+					'text-btn-secondary bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active',
+				success:
+					'text-btn-success bg-btn-success hover:bg-btn-success-hover focus:bg-btn-success-focus active:bg-btn-success-active border-btn-success hover:border-btn-success-hover focus:border-btn-success-focus active:border-btn-success-active',
+				'primary-outline':
+					'text-btn-primary-outline hover:text-btn-primary-outline-hover focus:text-btn-primary-outline-focus active:text-btn-primary-outline-active bg-btn-primary-outline hover:bg-btn-primary-outline-hover focus:bg-btn-primary-outline-focus active:bg-btn-primary-outline-active border-btn-primary-outline hover:border-btn-primary-outline-hover focus:border-btn-primary-outline-focus active:border-btn-primary-outline-active',
+				outline: 'border-[1px] text-btn-outline border-btn-outline ring-[currentColor]',
+				ghost: 'text-btn-ghost bg-btn-ghost hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active border-transparent',
+			},
+			size: {
+				lg: '',
+				md: '',
+				sm: 'h-[14px] px-[20px] text-[10px] leading-[1.4]',
+				xs: '',
+				xxs: '',
+			},
+		},
+		defaultVariants: {
+			variant: 'secondary',
+			size: 'sm',
+		},
+	}
+)
+
+export interface IChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof chipVariants> {
+	asChild?: boolean
+}
+
+const Chip = React.forwardRef<HTMLButtonElement, IChipProps>(({ children, variant, size, className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "span"
+
+	return (
+		<Comp
+        className={cn(chipVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+	)
+})
+
+Chip.displayName = 'Chip'
+
+export { Chip }

package/src/Chip/index.ts

@@ -0,0 +1 @@
+export { Chip } from './Chip'

package/src/DashboardDrawer/DashboardDrawer.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+import { Check } from '../Icon'
+import { cn } from '../@/lib/utils'
+
+const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => <DrawerPrimitive.Root {...props} />
+
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerTitle = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DrawerPrimitive.Title
+		ref={ref}
+		className={cn(className)}
+		{...props}
+	/>
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerFooter: React.FC = () => (
+	<DrawerClose className="p-[16px]">
+		<svg
+			className="mx-auto"
+			width="38"
+			height="10"
+			viewBox="0 0 38 10"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M0 7.39774C0 8.68678 1.25226 9.60455 2.48147 9.21638L17.7955 4.38038C18.5794 4.13282 19.4206 4.13282 20.2045 4.38038L35.5185 9.21638C36.7477 9.60455 38 8.68678 38 7.39774C38 6.56568 37.4606 5.82966 36.6671 5.5791L20.2045 0.380377C19.4206 0.132817 18.5794 0.132817 17.7955 0.380377L1.33286 5.5791C0.539422 5.82966 0 6.56568 0 7.39774Z"
+				fill="#243036"
+				fillOpacity="0.24"
+			/>
+		</svg>
+	</DrawerClose>
+)
+type DrawerListProps = {
+	children: React.ReactNode
+}
+const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
+	return (
+		<div
+			role="list"
+			className="px-[20px] divide-y"
+		>
+			{children}
+		</div>
+	)
+}
+type DrawerListItemProps = {
+	value: string
+	label: string | JSX.Element
+	isActive?: boolean
+	onClick?: () => void
+}
+const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isActive, onClick }) => {
+	return (
+		<button
+			className="flex py-[16px] w-full text-left"
+			role="listitem"
+			aria-selected={isActive}
+			aria-labelledby="1"
+			onClick={onClick}
+		>
+			<span className="w-[calc(100%-50px)]">
+				<span
+					className="flex [&+span]:mt-[4px] font-medium text-[14px] text-muted leading-[1.28]"
+					id="1"
+				>
+					<span className="[&+span]:ml-[8px] truncate">{label}</span>
+
+					<span className="inline-flex bg-[#EE7C2D] px-[4px] rounded-full h-[16px] text-[#fff] text-[12px] truncate leading-[16px] shrink-0">
+						23
+					</span>
+				</span>
+				<span className="block font-bold text-[20px] leading-[1.2]">{value}</span>
+			</span>
+			{isActive && (
+				<Check
+					width={16}
+					height={16}
+					className="ml-auto text-primary self-center"
+				/>
+			)}
+		</button>
+	)
+}
+
+const DrawerContent = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DrawerPortal>
+		<DrawerPrimitive.Content
+			ref={ref}
+			className={cn(
+				'fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px',
+				className
+			)}
+			{...props}
+		>
+			<DrawerTitle className="sr-only">Выбор компании</DrawerTitle>
+			{children}
+			<DrawerFooter />
+		</DrawerPrimitive.Content>
+	</DrawerPortal>
+))
+DrawerContent.displayName = 'DrawerContent'
+
+export { Drawer, DrawerTrigger, DrawerContent, DrawerClose, DrawerList, DrawerListItem }

package/src/Drawer/BottomDrawer.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+import { cn } from '../@/lib/utils'
+
+const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => <DrawerPrimitive.Root {...props} />
+
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerTitle = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DrawerPrimitive.Title
+		ref={ref}
+		className={cn(className)}
+		{...props}
+	/>
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerFooter: React.FC = () => (
+	<DrawerClose className="p-[16px]">
+		<svg
+			className="mx-auto"
+			width="38"
+			height="10"
+			viewBox="0 0 38 10"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M0 7.39774C0 8.68678 1.25226 9.60455 2.48147 9.21638L17.7955 4.38038C18.5794 4.13282 19.4206 4.13282 20.2045 4.38038L35.5185 9.21638C36.7477 9.60455 38 8.68678 38 7.39774C38 6.56568 37.4606 5.82966 36.6671 5.5791L20.2045 0.380377C19.4206 0.132817 18.5794 0.132817 17.7955 0.380377L1.33286 5.5791C0.539422 5.82966 0 6.56568 0 7.39774Z"
+				fill="#243036"
+				fillOpacity="0.24"
+			/>
+		</svg>
+	</DrawerClose>
+)
+type DrawerListProps = {
+	children: React.ReactNode
+}
+const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
+	return (
+		<div
+			role="listbox"
+			className="px-[20px]"
+		>
+			{children}
+		</div>
+	)
+}
+type DrawerListItemProps = {
+	value: string
+	label: string | JSX.Element
+	isSelected?: boolean,
+}
+const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isSelected }) => {
+	return (
+		<div
+			role="option"
+			aria-labelledby="1"
+			aria-selected={isSelected}
+			className="flex"
+			tabIndex={0}
+		>
+			<div className="shrink-0">
+				<p
+					className="font-medium text-[14px] text-muted leading-[1.4]"
+					id="1"
+				>
+					{label}
+				</p>
+				<p className="font-bold text-[20px] leading-[1.2]">{value}</p>
+			</div>
+			{isSelected && <span></span>}
+		</div>
+	)
+}
+
+const DrawerContent = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DrawerPortal>
+		<DrawerPrimitive.Content
+			ref={ref}
+			className={cn(
+				'fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px',
+				className
+			)}
+
+			{...props}
+		>
+			<DrawerTitle className="sr-only">Выбор компании</DrawerTitle>
+			{children}
+			<DrawerFooter />
+		</DrawerPrimitive.Content>
+	</DrawerPortal>
+))
+DrawerContent.displayName = 'DrawerContent'
+
+export { Drawer, DrawerTrigger, DrawerContent, DrawerClose, DrawerList, DrawerListItem }

package/src/{DasboardDrawer → Drawer}/DashboardDrawer.tsx

@@ -3,6 +3,7 @@ import { Drawer as DrawerPrimitive } from 'vaul'
 import { cn } from '../@/lib/utils'
 
 const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => <DrawerPrimitive.Root {...props} />
+
 Drawer.displayName = 'Drawer'
 
 const DrawerTrigger = DrawerPrimitive.Trigger
@@ -48,7 +49,7 @@ const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
 	return (
 		<div
 			role="listbox"
-			className="px-[12px] py-[20px]"
+			className="px-[20px]"
 		>
 			{children}
 		</div>
@@ -90,9 +91,10 @@ const DrawerContent = React.forwardRef<
 		<DrawerPrimitive.Content
 			ref={ref}
 			className={cn(
-				'fixed inset-x-0 top-0 flex h-auto flex-col bg-app bg-[#fff] shadow-sm rounded-[8px] #24303614; 0px 0px 16px 4px',
+				'fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px',
 				className
 			)}
+
 			{...props}
 		>
 			<DrawerTitle className="sr-only">Выбор компании</DrawerTitle>

package/src/Input/Input.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { cn } from '../@/lib/utils'
+
+const InputLabel = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+	({ className, children, ...props }) => {
+		return (
+			<label
+				className={cn('mb-[4px] font-medium text-[12px] text-light leading-[1.33] focus:text-primary focus-visible:text-primary', className)}
+				{...props}
+			>
+				{children}
+			</label>
+		)
+	}
+)
+
+InputLabel.displayName = 'InputLabel'
+
+const InputField = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(({ className, type, ...props }, ref) => {
+	return (
+		<input
+			type={type}
+			className={cn(
+				'border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-1 focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed',
+				className
+			)}
+			ref={ref}
+			{...props}
+		/>
+	)
+})
+
+InputField.displayName = 'InputField'
+
+export { InputField, InputLabel }

package/src/Input/index.ts

@@ -0,0 +1 @@
+export { InputField, InputLabel } from './Input'

package/src/Label/Label.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../@/lib/utils'
+
+const labelVariants = cva('peer-disabled:opacity-70 font-medium text-[12px] leading-[1.33] peer-disabled:cursor-not-allowed')
+
+const Label = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+	<LabelPrimitive.Root
+		ref={ref}
+		className={cn(labelVariants(), className)}
+		{...props}
+	/>
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/src/Label/index.ts

@@ -0,0 +1 @@
+export { Label } from './Label'

package/src/Page/Page.tsx

@@ -1,12 +1,20 @@
 import React, {FC} from 'react';
 import { cn } from '../@/lib/utils';
 
-type IPageProps = {
+type IProps = {
 	children?: React.ReactNode,
 	className?: string
 }
 
-const Page: FC<IPageProps> = ({children, className}) => {
+const PageNavbar: FC<IProps> = ({children, className}) => {
+	return <div className={cn('flex items-center h-[44px] px-[20px]', className)}>
+		{children}
+	</div>
+}
+
+PageNavbar.displayName = 'PageNavbar'
+
+const Page: FC<IProps> = ({children, className}) => {
 	return (
 		<div className={cn('sm:container bg-page h-screen', className)}>
 			{children}
@@ -14,4 +22,6 @@ const Page: FC<IPageProps> = ({children, className}) => {
 	);
 }
 
-export { Page };
+Page.displayName = 'Page'
+
+export { Page, PageNavbar };

package/src/Page/index.ts

@@ -1 +1 @@
-export { Page } from './Page'
+export { Page, PageNavbar } from './Page'

package/src/Tabs/Tabs.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import cn from 'classnames'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
-import {TabsProps} from "@radix-ui/react-tabs";
+import { TabsProps } from '@radix-ui/react-tabs'
 
 type TabsComponents = {
-	List: typeof TabsList,
-	Trigger: typeof TabsTrigger,
-	Content: typeof TabsContent,
+	List: typeof TabsList
+	Trigger: typeof TabsTrigger
+	Content: typeof TabsContent
 }
 
-const Tabs: React.FC<TabsProps> & TabsComponents = ({ ...props }) => <TabsPrimitive.Root {...props}/>
+const Tabs: React.FC<TabsProps> & TabsComponents = ({ ...props }) => <TabsPrimitive.Root {...props} />
 
 const TabsList = React.forwardRef<
 	React.ElementRef<typeof TabsPrimitive.List>,
@@ -18,7 +18,7 @@ const TabsList = React.forwardRef<
 	<TabsPrimitive.List
 		ref={ref}
 		className={cn(
-			'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+			'inline-flex items-center gap-x-[24px] border-b-2',
 			className
 		)}
 		{...props}
@@ -32,7 +32,7 @@ const TabsTrigger = React.forwardRef<
 	<TabsPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+		'inline-flex relative after:-bottom-[2px] after:absolute after:inset-x-0 justify-center items-center after:bg-primary disabled:opacity-50 pb-[12px] data-[state=active]:border-bottom-[2px] rounded-[4px] focus-visible:ring-2 focus-visible:ring-ring ring-offset-background focus-visible:ring-offset-2 data-[state=active]:after:h-[3px] text-[14px] data-[state=active]:text-primary leading-[1.4] whitespace-nowrap motion-reduce:hover:transform-none transition-all after:transition-all motion-reduce:transition-none focus-visible:outline-none disabled:pointer-events-none',
 			className
 		)}
 		{...props}
@@ -46,7 +46,7 @@ const TabsContent = React.forwardRef<
 	<TabsPrimitive.Content
 		ref={ref}
 		className={cn(
-			'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
 			className
 		)}
 		{...props}
@@ -54,10 +54,10 @@ const TabsContent = React.forwardRef<
 ))
 
 Tabs.List = TabsList
-TabsList.displayName = "TabsList"
+TabsList.displayName = 'TabsList'
 Tabs.Trigger = TabsTrigger
-TabsTrigger.displayName = "TabsTrigger"
+TabsTrigger.displayName = 'TabsTrigger'
 Tabs.Content = TabsContent
-TabsContent.displayName = "TabsContent"
+TabsContent.displayName = 'TabsContent'
 
-export default Tabs
+export { Tabs }

package/src/Tabs/index.ts

@@ -1,5 +1 @@
-import Tabs from './Tabs'
-
-export default Tabs
-
-export { Tabs }
+export { Tabs } from './Tabs'