@basic-ui/material 0.1.15 → 1.0.0-alpha.1

package/src/Select/Select.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Select } from './';
 import { SelectItem } from '../SelectItem';
 import { Box } from '../Box';
@@ -9,6 +10,19 @@ export default {
   title: 'components/Select',
 };
 
+const SearchIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
+
 const Example = ({ variant, native = false }) => {
   const [error, setError] = useState<boolean | string>(false);
   const [color, setColor] = useState<'primary' | 'secondary'>('primary');
@@ -186,7 +200,19 @@ const Example = ({ variant, native = false }) => {
             label=""
             helperText="Helper text"
             children={children}
-            leadingIcon={'O'}
+            leadingIcon={<SearchIcon />}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select
+            error={error}
+            color={color}
+            native={native}
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            children={children}
+            leadingIcon={<SearchIcon />}
           />
         </Box>
       </Box>

package/src/Select/Select.tsx

@@ -1,25 +1,14 @@
-import {
-  forwardRef,
-  useState,
-  useRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
-  useEffect,
-  useId,
-} from 'react';
-
-import type * as React from 'react';
+import { forwardRef, useState, useRef, useEffect, useId } from 'react';
+import * as React from 'react';
 import {
   wrapEvent,
   assignMultipleRefs,
   useControlledState,
 } from '@basic-ui/core';
-import { useTheme, Theme } from '../theme';
-import {
-  Select as SelectComp,
-  SelectButton,
-  SelectProps as BaseSelectProps,
-} from './styledComponents';
+
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
+import { Select as SelectComp, SelectButton } from './styledComponents';
 import { FilledContainer } from '../TextField/FilledContainer';
 import { HelperText } from '../TextField/HelperText';
 import { OutlinedContainer } from '../TextField/OutlinedContainer';
@@ -27,6 +16,7 @@ import { SelectProvider } from './context';
 import { Menu, MenuPopover, MenuList } from '../Menu';
 import { SelectIcon } from './SelectIcon';
 import { makeDefaultRender } from './defaultRender';
+import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { IconContainer } from '../TextField/IconContainer';
 
@@ -37,7 +27,7 @@ const componentMap = {
 
 export interface SelectProps
   extends Omit<
-    React.SelectHTMLAttributes<HTMLSelectElement>,
+    BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>,
     'value' | 'defaultValue' | 'onChange'
   > {
   variant?: 'outlined' | 'filled';
@@ -108,7 +98,10 @@ export const Select = forwardRef<
 
   const handleOnChange = (e: any) => {
     onChange &&
-      onChange(e as any, native ? e.target.value : e.target.dataset.value);
+      onChange(
+        e as any,
+        native ? e.target.value : e.currentTarget.dataset.value
+      );
   };
 
   const hasError = Boolean(error);
@@ -122,9 +115,9 @@ export const Select = forwardRef<
 
   const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;
 
-  const Comp: ForwardRefExoticComponent<
-    BaseSelectProps & RefAttributes<HTMLSelectElement | HTMLButtonElement>
-  > = native ? SelectComp : (SelectButton as any);
+  const Comp: React.ComponentType<any> = native
+    ? (SelectComp as any)
+    : (SelectButton as any);
 
   useEffect(() => {
     // right after mounting, if the default value in the select element
@@ -170,6 +163,7 @@ export const Select = forwardRef<
               aria-describedby={helperTextId}
               hasLabel={!!label}
               leadingIcon={Boolean(leadingIcon)}
+              trailingIcon={true}
               {...otherProps}
             >
               {native ? children : renderValue(value)}
@@ -182,20 +176,6 @@ export const Select = forwardRef<
                     minWidth: buttonRef?.current?.offsetWidth,
                   }}
                   role="listbox"
-                  __css={
-                    variant === 'filled'
-                      ? {
-                          "[data-popper-placement='top'] &": {
-                            borderBottomLeftRadius: 0,
-                            borderBottomRightRadius: 0,
-                          },
-                          "[data-popper-placement='bottom'] &": {
-                            borderTopLeftRadius: 0,
-                            borderTopRightRadius: 0,
-                          },
-                        }
-                      : {}
-                  }
                 >
                   {children}
                 </MenuList>

package/src/Select/SelectIcon.tsx

@@ -1,8 +1,12 @@
-import { forwardRef, SVGAttributes } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import type { SVGAttributes } from 'react';
+import { forwardRef } from 'react';
+import * as React from 'react';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
+import { PADDING_RIGHT_WITH_ICON } from '../TextField/consts';
 
 export type SelectIconProps = BoxProps<
   SVGElement,
@@ -22,7 +26,7 @@ export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
         __css={{
           position: 'absolute',
           top: `calc(50% - ${rem(12)})`,
-          right: rem(7),
+          right: rem(PADDING_RIGHT_WITH_ICON),
           width: rem(24),
           height: rem(24),
           color: open ? 'primary' : alpha('on.surface', 0.54),

package/src/Select/defaultRender.ts

@@ -1,18 +1,18 @@
 import { Children, isValidElement } from 'react';
 
-export const makeDefaultRender = (children?: React.ReactNode) => (
-  val?: string
-): string | undefined => {
-  if (children && val !== undefined) {
-    const allChildren = Children.toArray(children);
-    for (let i = 0; i < allChildren.length; i++) {
-      const child = allChildren[i];
-      if (isValidElement(child)) {
-        if (String(child.props.value) === val) {
-          return child.props.children;
+export const makeDefaultRender =
+  (children?: React.ReactNode) =>
+  (val?: string): string | undefined => {
+    if (children && val !== undefined) {
+      const allChildren = Children.toArray(children);
+      for (let i = 0; i < allChildren.length; i++) {
+        const child = allChildren[i];
+        if (isValidElement(child)) {
+          if (String(child.props.value) === val) {
+            return child.props.children;
+          }
         }
       }
     }
-  }
-  return val || undefined;
-};
+    return val || undefined;
+  };

package/src/Select/styledComponents.tsx

@@ -1,7 +1,9 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { MenuButton as BaseMenuButton, MenuButtonProps } from '@basic-ui/core';
-import { Theme } from '../theme';
+import * as React from 'react';
+import type { MenuButtonProps } from '@basic-ui/core';
+import { MenuButton as BaseMenuButton } from '@basic-ui/core';
+
+import type { Theme } from '../theme';
 import { Input } from '../TextField/Input';
 
 export interface SelectProps
@@ -26,17 +28,21 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 const SelectButtonInner = forwardRef<
   HTMLButtonElement,
   SelectProps & { innerAs?: React.ElementType<any> }
->(({ innerAs = 'button', ...props }, forwardedRef) => {
+>(({ innerAs = 'div', ...props }, forwardedRef) => {
   const InputButton: React.FC<
     SelectProps & React.RefAttributes<HTMLButtonElement>
   > = Input as any;
 
-  return <InputButton as={innerAs} ref={forwardedRef} {...props} />;
+  return (
+    <InputButton as={innerAs} ref={forwardedRef} tabIndex={0} {...props} />
+  );
 });
 
 export const SelectButton = forwardRef<
   HTMLButtonElement,
   SelectProps & MenuButtonProps
->(({ as, ...props }, ref) => (
-  <BaseMenuButton as={SelectButtonInner} innerAs={as} ref={ref} {...props} />
+>(({ as, children, ...props }, ref) => (
+  <BaseMenuButton as={SelectButtonInner} innerAs={as} ref={ref} {...props}>
+    {children}
+  </BaseMenuButton>
 ));

package/src/SelectItem/SelectItem.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import { MenuItem, MenuItemProps } from '../Menu';
-import { useSelectContext } from '../Select/context';
 import { wrapEvent } from '@basic-ui/core';
 
+import type { MenuItemProps } from '../Menu';
+import { MenuItem } from '../Menu';
+import { useSelectContext } from '../Select/context';
+
 export type SelectItemProps = MenuItemProps;
 
 const ZERO_WIDTH_SPACE = '\u200b';

package/src/SelectionControl/SelectionControlLabel.tsx

@@ -1,6 +1,9 @@
-import { forwardRef, LabelHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import type { LabelHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import * as React from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export interface SelectionControlLabelProps
   extends BoxProps<

package/src/SelectionControl/SelectionControlText.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Text, TextProps } from '../Text';
+import * as React from 'react';
+
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
 import { alpha } from '../color';
 
 export interface SelectionControlTextProps extends TextProps {

package/src/Skeleton/DelayAppearance.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { BoxProps, Box } from '../Box';
+import * as React from 'react';
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export const appearAnimation: Keyframes = keyframes({
   to: {

package/src/Skeleton/Skeleton.story.tsx

@@ -20,11 +20,11 @@ const Skeletons = ({
         animation={animation}
         width={60}
         height={60}
-        borderRadius="50%"
+        borderRadius="full"
         m={2}
       />
       <Skeleton animation={animation} m={2}>
-        <Box width={60} height={60} borderRadius="50%" />
+        <Box width={60} height={60} borderRadius="full" />
       </Skeleton>
     </Box>
   );

package/src/Skeleton/Skeleton.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import * as React from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 import { useTheme } from '../theme';
 import { pulseAnimationStyle, waveAnimationStyle } from './animation';

package/src/Skeleton/animation.ts

@@ -1,6 +1,7 @@
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
-import { SystemStyleObject } from '@styled-system/css';
+import type { Keyframes } from '@emotion/serialize';
+import type { SystemStyleObject } from '@styled-system/css';
+
 import { alpha } from '../color';
 
 export const pulseAnimation: Keyframes = keyframes({

package/src/Snackbar/Snackbar.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Snackbar } from './';
 import { Box } from '../Box';
 import { Button } from '../Button';

package/src/Snackbar/Snackbar.tsx

@@ -1,14 +1,16 @@
 import { assignMultipleRefs } from '@basic-ui/core';
 import { rem } from 'polished';
 import { cloneElement, forwardRef, useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { Box } from '../Box';
 import {
   DARK_THEME_CLASS,
   DEFAULT_THEME_CLASS,
   useColorMode,
 } from '../ColorMode';
-import { Paper, PaperProps } from '../Paper';
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
 import { Text } from '../Text';
 import { useSnackbarAnimation } from './useSnackbarAnimation';
 
@@ -39,21 +41,21 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
 
     return (
       <Paper
-        elevation={6}
-        backgroundOverlay={6}
+        elevation={4}
+        darkThemeBackgroundOverlay={4}
         className={
           colorMode === 'default' ? DARK_THEME_CLASS : DEFAULT_THEME_CLASS
         }
         ref={assignMultipleRefs(forwardedRef, ref)}
         __css={{
-          boxShadow: 6,
+          boxShadow: 4,
           py: rem(6),
           pl: 3,
           pr: 3,
           display: 'inline-flex',
           minWidth: `min(100%, ${rem(344)})`,
           maxWidth: ['100%', 'unset'],
-          borderRadius: rem(4),
+          borderRadius: 'extra-small',
           color: 'on.surface',
           flexDirection: 'row',
           willChange: 'transform,opacity',

package/src/Snackbar/Stack.tsx

@@ -1,13 +1,13 @@
-import { MutableRefObject, ReactElement, useLayoutEffect } from 'react';
-import type * as React from 'react';
+import type { MutableRefObject, ReactElement, FC } from 'react';
 import {
+  useLayoutEffect,
   createContext,
-  FC,
   useContext,
   useEffect,
   useRef,
   useState,
 } from 'react';
+import * as React from 'react';
 
 export type StackPlacement =
   | 'top-right'

package/src/Snackbar/useSnackbarAnimation.ts

@@ -1,4 +1,6 @@
-import { CSSProperties, useEffect } from 'react';
+import type { CSSProperties } from 'react';
+import { useEffect } from 'react';
+
 import { useStackItem } from './Stack';
 
 const TRANSITION_TIME = 150;

package/src/Switch/Switch.tsx

@@ -1,10 +1,13 @@
-import { forwardRef, InputHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { RippleBox, RippleBoxProps } from '../Ripple';
-import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
-import { rem } from 'polished';
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import * as React from 'react';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
+
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
 import {
   SelectionControlLabel,
   SelectionControlText,
@@ -42,8 +45,8 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
 
     return (
       <Box p={2} display="inline-block" minWidth="auto">
-        <Box position="relative" opacity={disabled ? 0.38 : 1}>
-          <SwitchTrail checked={checked} />
+        <Box position="relative">
+          <SwitchTrail checked={checked} disabled={disabled} />
           <SwitchThumb checked={checked}>
             <RippleBox<
               RippleBoxProps<
@@ -52,6 +55,7 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
               >
             >
               as={Comp}
+              role="switch"
               type="checkbox"
               checked={checked}
               onChange={onChange}
@@ -64,20 +68,21 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
               focusOpacity={0.12}
               center={true}
               disabled={disabled}
+              data-switch-thumb=""
               {...otherProps}
               __css={{
                 top: '50%',
                 left: '50%',
                 backgroundColor: 'transparent',
                 transform: 'translate(-50%, -50%)',
-                width: rem(48),
-                height: rem(48),
+                width: '100%',
+                height: '100%',
                 appearance: 'none',
                 ':focus': {
                   outline: 'none',
                 },
                 border: 'none',
-                borderRadius: '50%',
+                borderRadius: 'full',
                 zIndex: 1,
                 position: 'absolute',
                 ...__css,

package/src/Switch/styledComponents.tsx

@@ -1,33 +1,59 @@
 import { rem } from 'polished';
+
 import { Box } from '../Box';
 
-export const SwitchTrail = ({ checked = false, ...otherProps }) => (
+const BORDER_WIDTH = 2;
+const TRAIL_WIDTH = 52;
+const TRAIL_HEIGHT = 32;
+const CIRCLE_SIZE_INACTIVE_CHECKED = 24;
+const CIRCLE_SIZE_ACTIVE_CHECKED = 28;
+const CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;
+const CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;
+
+export const SwitchTrail = ({
+  checked = false,
+  disabled = false,
+  ...otherProps
+}) => (
   <Box
     __css={{
-      width: rem(32),
-      height: rem(14),
-      borderRadius: rem(7),
-      backgroundColor: checked ? 'primary' : 'on.surface',
-      opacity: checked ? 0.54 : 0.38,
+      width: rem(TRAIL_WIDTH),
+      height: rem(TRAIL_HEIGHT),
+      borderRadius: rem(TRAIL_HEIGHT / 2),
+      borderWidth: rem(BORDER_WIDTH),
+      borderStyle: 'solid',
+      backgroundColor: checked ? 'primary' : 'surface-variant',
+      borderColor: checked ? 'primary' : 'outline',
+      ...(disabled && {
+        opacity: 0.12,
+        backgroundColor: checked ? 'on.surface' : 'surface-variant',
+        borderColor: 'on.surface',
+      }),
     }}
     {...otherProps}
   />
 );
 
+const THUMB_SIZE = 40;
 export const SwitchThumb = ({ checked = false, ...otherProps }) => (
   <Box
     position="absolute"
-    width={rem(54)}
-    height={rem(48)}
-    borderRadius={rem(24)}
-    left={rem(-21)}
-    top={rem(-17)}
+    width={rem(THUMB_SIZE)}
+    height={rem(THUMB_SIZE)}
+    borderRadius="full"
+    left={'50%'}
+    top={'50%'}
     __css={{
-      cursor: 'pointer',
-      transform: checked ? `translate(${rem(20)})` : 'none',
+      transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${rem(
+        (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2
+      )})) translateY(-50%)`,
       WebkitTapHighlightColor: 'transparent',
       transition:
-        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1)',
+        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
+      '& > input': {
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+      },
     }}
     {...otherProps}
   />
@@ -37,22 +63,46 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
   <Box
     __css={{
       position: 'absolute',
-      width: rem(20),
-      height: rem(20),
-      boxShadow: 2,
+      width: checked
+        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
+        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+      height: checked
+        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
+        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
       boxSizing: 'border-box',
-      borderWidth: rem(10),
-      borderStyle: 'solid',
-      borderRadius: '50%',
+      borderRadius: 'full',
       pointerEvents: 'none',
       zIndex: 1,
-      backgroundColor: checked ? 'primary' : '#fff',
-      borderColor: checked ? 'primary' : '#fff',
+      backgroundColor: checked ? 'on.primary' : 'outline',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
       transition: 'inherit',
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &':
+        {
+          backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
+        },
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &':
+        {
+          height: checked
+            ? CIRCLE_SIZE_ACTIVE_CHECKED
+            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+          width: checked
+            ? CIRCLE_SIZE_ACTIVE_CHECKED
+            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+        },
+      '[data-switch-thumb=""]:disabled ~ &': {
+        opacity: checked ? 1 : 0.38,
+        backgroundColor: checked ? 'surface' : 'on.surface',
+        height: checked
+          ? CIRCLE_SIZE_INACTIVE_CHECKED
+          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+        width: checked
+          ? CIRCLE_SIZE_INACTIVE_CHECKED
+          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+      },
     }}
+    data-switch-circle=""
     role="presentation"
     aria-hidden="true"
     {...otherProps}

package/src/Tab/Tab.tsx

@@ -1,8 +1,12 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-import type * as React from 'react';
-import { Tab as TabCore, TabProps as TabPropsCore } from '@basic-ui/core';
-import { RippleBox, RippleBoxProps } from '../Ripple';
+import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import * as React from 'react';
+import type { TabProps as TabPropsCore } from '@basic-ui/core';
+import { Tab as TabCore } from '@basic-ui/core';
 import { rem } from 'polished';
+
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
 import { alpha } from '../color';
 import { Text } from '../Text';
 import { Box } from '../Box';

package/src/Tab/TabList.tsx

@@ -1,10 +1,10 @@
 import { forwardRef, useRef } from 'react';
-import {
-  TabList as TabListCore,
-  TabListProps as TabListPropsCore,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
+import type { TabListProps as TabListPropsCore } from '@basic-ui/core';
+import { TabList as TabListCore } from '@basic-ui/core';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { TabIndicatorProvider } from '../TabIndicator';
 import { TabListProvider } from './context';
 

package/src/Tab/TabPanel.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
-import {
-  TabPanel as TabPanelCore,
-  TabPanelProps as TabPanelPropsCore,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
+import type { TabPanelProps as TabPanelPropsCore } from '@basic-ui/core';
+import { TabPanel as TabPanelCore } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type TabPanelProps = TabPanelPropsCore & BoxProps;