import { forwardRef, ReactNode } from 'react'; import { clsx } from 'clsx'; import { Reorder } from 'framer-motion'; import { CloseIcon } from '../icons'; import { createComponentGroup } from '../utility/component-group'; import { UnStyledButton } from './button'; import { Tooltip } from './tooltip'; import './tabs.css'; type TabProps = { isActive?: boolean; value: object; className?: string; children: ReactNode; }; const TabRoot = forwardRef( ({ isActive, value, children, className, ...props }, ref) => ( {children} ), ); TabRoot.displayName = 'Tab'; const TabButton = forwardRef< HTMLButtonElement, JSX.IntrinsicElements['button'] >((props, ref) => ( {props.children} )); TabButton.displayName = 'Tab.Button'; const TabClose = forwardRef( (props, ref) => ( ), ); TabClose.displayName = 'Tab.Close'; export const Tab = createComponentGroup(TabRoot, { Button: TabButton, Close: TabClose, }); type TabsProps = { values: object[]; onReorder: (newOrder: any[]) => void; className?: string; children: ReactNode; }; export const Tabs = forwardRef( ({ values, onReorder, children, className, ...props }, ref) => ( {children} ), ); Tabs.displayName = 'Tabs';