@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.50

package/src/Tab/Tab.story.tsx

@@ -1,53 +1,209 @@
-import { Tabs, TabList, Tab, TabPanels, TabPanel } from './';
-import { AppBar } from '../AppBar';
-
-// import './styles.css';
-
-export default {
-  title: 'components/Tab',
-};
-
-const Example = () => {
-  return (
-    <Tabs defaultIndex={0}>
-      <AppBar variant="default" py={0} height={48} elevation="elevated">
-        <TabList width="100%">
-          <Tab>Item 1</Tab>
-          <Tab>Item 2</Tab>
-          <Tab>Item 3</Tab>
-          <Tab disabled>Item 4</Tab>
-        </TabList>
-      </AppBar>
-      <TabPanels>
-        <TabPanel>Panel 1</TabPanel>
-        <TabPanel>Panel 2</TabPanel>
-        <TabPanel>Panel 3</TabPanel>
-        <TabPanel>Panel 4</TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-};
-
-const ExampleAppBar = () => {
-  return (
-    <Tabs>
-      <AppBar variant="primary" py={0} height={48} elevation="elevated">
-        <TabList textColor="on.primary" indicatorColor="surface" width="100%">
-          <Tab>Item 1</Tab>
-          <Tab>Item 2</Tab>
-          <Tab>Item 3</Tab>
-          <Tab disabled>Item 4</Tab>
-        </TabList>
-      </AppBar>
-      <TabPanels>
-        <TabPanel>Panel 1</TabPanel>
-        <TabPanel>Panel 2</TabPanel>
-        <TabPanel>Panel 3</TabPanel>
-        <TabPanel>Panel 4</TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-};
-
-export const Controlled = () => <Example />;
-export const WithAppBar = () => <ExampleAppBar />;
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from './';
+import { AppBar } from '../AppBar';
+
+// import './styles.css';
+
+const FlightIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={48}
+    width={48}
+    viewBox="0 0 48 48"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M17.5 44v-2.1l4-3V26.35L4 31.5v-2.9l17.5-10.3V6.5q0-1.05.725-1.775Q22.95 4 24 4q1.05 0 1.775.725.725.725.725 1.775v11.8L44 28.6v2.9l-17.5-5.15V38.9l4 3V44L24 42.15Z"
+    />
+  </svg>
+);
+
+const LuggageIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={48}
+    width={48}
+    viewBox="0 0 48 48"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M13 42q-1.25 0-2.125-.875T10 39V15.5q0-1.45 1.025-2.475Q12.05 12 13.5 12H18V5.5q0-.7.625-1.1Q19.25 4 20 4h8q.75 0 1.375.4T30 5.5V12h5q1.25 0 2.125.875T38 15v24q0 1.25-.875 2.125T35 42q0 .85-.575 1.425Q33.85 44 33 44q-.85 0-1.425-.575Q31 42.85 31 42H17q0 .85-.575 1.425Q15.85 44 15 44q-.85 0-1.425-.575Q13 42.85 13 42Zm7-30h8V6h-8Zm-7 27h22V15H13v24Zm3.5-3h2V18h-2Zm6.5 0h2V18h-2Zm6.5 0h2V18h-2ZM13 39V15v24Z"
+    />
+  </svg>
+);
+
+const ExploreIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={48}
+    width={48}
+    viewBox="0 0 48 48"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m13.15 34.85 14.5-7.15 7.15-14.5-14.5 7.15ZM24 26q-.85 0-1.425-.575Q22 24.85 22 24q0-.85.575-1.425Q23.15 22 24 22q.85 0 1.425.575Q26 23.15 26 24q0 .85-.575 1.425Q24.85 26 24 26Zm0 18q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Zm0-3q7.1 0 12.05-4.975Q41 31.05 41 24q0-7.1-4.95-12.05Q31.1 7 24 7q-7.05 0-12.025 4.95Q7 16.9 7 24q0 7.05 4.975 12.025Q16.95 41 24 41Zm0-17Z"
+    />
+  </svg>
+);
+
+const TuneIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={48}
+    width={48}
+    viewBox="0 0 48 48"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M21.35 42V30.75h3v4.15H42v3H24.35V42ZM6 37.9v-3h12.35v3Zm9.35-8.3v-4.1H6v-3h9.35v-4.2h3v11.3Zm6-4.1v-3H42v3Zm8.3-8.25V6h3v4.1H42v3h-9.35v4.15ZM6 13.1v-3h20.65v3Z"
+    />
+  </svg>
+);
+
+export default {
+  title: 'components/Tab',
+};
+
+const Example = ({ variant }: { variant: 'primary' | 'secondary' }) => {
+  return (
+    <Tabs defaultIndex={0}>
+      <AppBar variant="default" py={0} height={48} elevation="elevated">
+        <TabList width="100%" variant={variant} height="100%">
+          <Tab>Flights</Tab>
+          <Tab>Trips</Tab>
+          <Tab>Explore</Tab>
+          <Tab disabled>Settings</Tab>
+        </TabList>
+      </AppBar>
+      <TabPanels>
+        <TabPanel>Panel 1</TabPanel>
+        <TabPanel>Panel 2</TabPanel>
+        <TabPanel>Panel 3</TabPanel>
+        <TabPanel>Panel 4</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+const ExampleWithIcons = ({
+  variant,
+}: {
+  variant: 'primary' | 'secondary';
+}) => {
+  return (
+    <Tabs defaultIndex={0}>
+      <AppBar variant="default" py={0} height={64} elevation="elevated">
+        <TabList width="100%" variant={variant} height="100%">
+          <Tab>
+            <FlightIcon width="24px" height="24px" /> Flights
+          </Tab>
+          <Tab>
+            <LuggageIcon width="24px" height="24px" />
+            Trips
+          </Tab>
+          <Tab>
+            <ExploreIcon width="24px" height="24px" />
+            Explore
+          </Tab>
+          <Tab disabled>
+            <TuneIcon width="24px" height="24px" /> Settings
+          </Tab>
+        </TabList>
+      </AppBar>
+      <TabPanels>
+        <TabPanel>Panel 1</TabPanel>
+        <TabPanel>Panel 2</TabPanel>
+        <TabPanel>Panel 3</TabPanel>
+        <TabPanel>Panel 4</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+const ExampleAppBar = ({ variant }: { variant: 'primary' | 'secondary' }) => {
+  return (
+    <Tabs>
+      <AppBar variant="primary" py={0} height={48} elevation="elevated">
+        <TabList
+          textColor="on.primary"
+          indicatorColor="surface"
+          width="100%"
+          height="100%"
+          variant={variant}
+        >
+          <Tab>Flights</Tab>
+          <Tab>Trips</Tab>
+          <Tab>Explore</Tab>
+          <Tab disabled>Settings</Tab>
+        </TabList>
+      </AppBar>
+      <TabPanels>
+        <TabPanel>Panel 1</TabPanel>
+        <TabPanel>Panel 2</TabPanel>
+        <TabPanel>Panel 3</TabPanel>
+        <TabPanel>Panel 4</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+const ExampleAppBarWithIcons = ({
+  variant,
+}: {
+  variant: 'primary' | 'secondary';
+}) => {
+  return (
+    <Tabs>
+      <AppBar variant="primary" py={0} height={64} elevation="elevated">
+        <TabList
+          textColor="on.primary"
+          indicatorColor="surface"
+          width="100%"
+          height="100%"
+          variant={variant}
+        >
+          <Tab>
+            <FlightIcon width="24px" height="24px" /> Flights
+          </Tab>
+          <Tab>
+            <LuggageIcon width="24px" height="24px" />
+            Trips
+          </Tab>
+          <Tab>
+            <ExploreIcon width="24px" height="24px" />
+            Explore
+          </Tab>
+          <Tab disabled>
+            <TuneIcon width="24px" height="24px" /> Settings
+          </Tab>
+        </TabList>
+      </AppBar>
+      <TabPanels>
+        <TabPanel>Panel 1</TabPanel>
+        <TabPanel>Panel 2</TabPanel>
+        <TabPanel>Panel 3</TabPanel>
+        <TabPanel>Panel 4</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const ControlledPrimary = () => <Example variant="primary" />;
+export const ControlledSecondary = () => <Example variant="secondary" />;
+export const ControlledWithIconsPrimary = () => (
+  <ExampleWithIcons variant="primary" />
+);
+export const ControlledWithIconsSecondary = () => (
+  <ExampleWithIcons variant="secondary" />
+);
+export const WithAppBarPrimary = () => <ExampleAppBar variant="primary" />;
+export const WithAppBarSecondary = () => <ExampleAppBar variant="secondary" />;
+export const WithAppBarWithIconsPrimary = () => (
+  <ExampleAppBarWithIcons variant="primary" />
+);
+export const WithAppBarWithIconsSecondary = () => (
+  <ExampleAppBarWithIcons variant="secondary" />
+);

package/src/Tab/Tab.tsx

@@ -1,82 +1,120 @@
-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';
-import { TabIndicator } from '../TabIndicator';
-import { useTabListContext } from './context';
-
-export type TabProps = TabPropsCore &
-  RippleBoxProps<
-    HTMLButtonElement,
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  >;
-
-const TabInner = forwardRef<
-  HTMLButtonElement,
-  TabProps & { selected?: boolean }
->(function Tab(props, forwardedRef) {
-  const { innerAs, selected, children, disabled, ...otherProps } = props;
-  const { textColor, indicatorColor, selectedTextColor } = useTabListContext();
-
-  return (
-    <Box position="relative" display="flex" flex={1} flexDirection="column">
-      <RippleBox<
-        RippleBoxProps<
-          HTMLButtonElement,
-          ButtonHTMLAttributes<HTMLButtonElement>
-        >
-      >
-        as={innerAs}
-        ref={forwardedRef}
-        rippleColor={indicatorColor}
-        disabled={disabled}
-        __css={{
-          px: 3,
-          position: 'relative',
-          color: selected
-            ? selectedTextColor || indicatorColor
-            : alpha(textColor, disabled ? 0.37 : 0.7),
-          height: rem(48),
-          backgroundColor: 'transparent',
-          border: 'none',
-          ':focus': {
-            outline: 'none',
-          },
-          width: '100%',
-          alignItems: 'center',
-        }}
-        {...otherProps}
-      >
-        <Text
-          as="span"
-          variant="button"
-          color="inherit"
-          height="100%"
-          textAlign="center"
-        >
-          {children}
-        </Text>
-      </RippleBox>
-      <TabIndicator selected={selected} color={indicatorColor} />
-    </Box>
-  );
-});
-
-export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
-  props,
-  forwardedRef
-) {
-  const { as = 'button', ...otherProps } = props;
-
-  return (
-    <TabCore as={TabInner} innerAs={as} ref={forwardedRef} {...otherProps} />
-  );
-});
+import type { ButtonHTMLAttributes } from 'react';
+import { useState, useEffect, useRef, forwardRef } 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';
+import { TabIndicator } from '../TabIndicator';
+import { useTabListContext } from './context';
+
+export type TabProps = TabPropsCore &
+  RippleBoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>;
+
+const TabInner = forwardRef<
+  HTMLButtonElement,
+  TabProps & { selected?: boolean }
+>(function Tab(props, forwardedRef) {
+  const { innerAs, selected, children, disabled, ...otherProps } = props;
+  const { textColor, indicatorColor, selectedTextColor, variant } =
+    useTabListContext();
+  const labelRef = useRef<HTMLParagraphElement>(null);
+
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <Box
+      position="relative"
+      display="flex"
+      flex={1}
+      flexDirection="column"
+      height="100%"
+    >
+      <RippleBox<
+        RippleBoxProps<
+          HTMLButtonElement,
+          ButtonHTMLAttributes<HTMLButtonElement>
+        >
+      >
+        as={innerAs}
+        ref={forwardedRef}
+        rippleColor={indicatorColor}
+        disabled={disabled}
+        __css={{
+          px: 3,
+          py: 0,
+          color: selected
+            ? selectedTextColor || indicatorColor
+            : alpha(textColor, disabled ? 0.37 : 0.7),
+          minHeight: rem(48),
+          height: '100%',
+          backgroundColor: 'transparent',
+          border: 'none',
+          ':focus': {
+            outline: 'none',
+          },
+          width: '100%',
+          alignItems: 'center',
+        }}
+        {...otherProps}
+      >
+        <Text
+          as="span"
+          variant="title-small"
+          ref={labelRef}
+          __css={{
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'inherit',
+            height: '100%',
+            textAlign: 'center',
+            position: 'relative',
+            flexDirection: 'column',
+            ...(variant === 'primary' &&
+              selected &&
+              !mounted && {
+                '&::before': {
+                  content: '""',
+                  bg: indicatorColor,
+                  position: 'absolute',
+                  bottom: 0,
+                  zIndex: 1,
+                  width: '100%',
+                  height: rem(3),
+                  borderTopLeftRadius: rem(3),
+                  borderTopRightRadius: rem(3),
+                },
+              }),
+          }}
+        >
+          {children}
+        </Text>
+      </RippleBox>
+      <TabIndicator
+        selected={selected}
+        color={indicatorColor}
+        variant={variant}
+        labelRef={labelRef}
+      />
+    </Box>
+  );
+});
+
+export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
+  props,
+  forwardedRef
+) {
+  const { as = 'button', ...otherProps } = props;
+
+  return (
+    <TabCore as={TabInner} innerAs={as} ref={forwardedRef} {...otherProps} />
+  );
+});

package/src/Tab/TabList.tsx

@@ -1,57 +1,61 @@
-import { forwardRef, useRef } from 'react';
-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';
-
-export type TabListProps = TabListPropsCore &
-  BoxProps & {
-    indicatorColor?: string;
-    textColor?: string;
-    selectedTextColor?: string;
-  };
-
-const TabListInner = forwardRef<HTMLDivElement, TabListProps>(
-  function TabListInner(props, forwardedRef) {
-    const { innerAs, ...otherProps } = props;
-
-    return (
-      <Box
-        as={innerAs}
-        ref={forwardedRef}
-        __css={{ minWidth: rem(360), display: 'flex', alignItems: 'center' }}
-        {...otherProps}
-      />
-    );
-  }
-);
-
-export const TabList = forwardRef<HTMLDivElement, TabListProps>(
-  function TabList(props, forwardedRef) {
-    const {
-      as = 'div',
-      indicatorColor = 'primary',
-      textColor = 'on.surface',
-      selectedTextColor,
-      ...otherProps
-    } = props;
-    const currentIndicator = useRef<HTMLSpanElement>(null);
-
-    return (
-      <TabListProvider value={{ indicatorColor, textColor, selectedTextColor }}>
-        <TabIndicatorProvider value={{ currentIndicator }}>
-          <TabListCore
-            as={TabListInner}
-            innerAs={as}
-            ref={forwardedRef}
-            {...otherProps}
-          />
-        </TabIndicatorProvider>
-      </TabListProvider>
-    );
-  }
-);
+import { forwardRef, useRef } from 'react';
+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';
+
+export type TabListProps = TabListPropsCore &
+  BoxProps & {
+    indicatorColor?: string;
+    textColor?: string;
+    selectedTextColor?: string;
+    variant?: 'primary' | 'secondary';
+  };
+
+const TabListInner = forwardRef<HTMLDivElement, TabListProps>(
+  function TabListInner(props, forwardedRef) {
+    const { innerAs, ...otherProps } = props;
+
+    return (
+      <Box
+        as={innerAs}
+        ref={forwardedRef}
+        __css={{ minWidth: rem(360), display: 'flex', alignItems: 'center' }}
+        {...otherProps}
+      />
+    );
+  }
+);
+
+export const TabList = forwardRef<HTMLDivElement, TabListProps>(
+  function TabList(props, forwardedRef) {
+    const {
+      as = 'div',
+      indicatorColor = 'primary',
+      textColor = 'on.surface',
+      selectedTextColor,
+      variant = 'secondary',
+      ...otherProps
+    } = props;
+    const currentIndicator = useRef<HTMLSpanElement>(null);
+
+    return (
+      <TabListProvider
+        value={{ indicatorColor, textColor, selectedTextColor, variant }}
+      >
+        <TabIndicatorProvider value={{ currentIndicator }}>
+          <TabListCore
+            as={TabListInner}
+            innerAs={as}
+            ref={forwardedRef}
+            {...otherProps}
+          />
+        </TabIndicatorProvider>
+      </TabListProvider>
+    );
+  }
+);

package/src/Tab/TabPanel.tsx

@@ -1,31 +1,31 @@
-import { forwardRef } from 'react';
-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;
-
-const TabPanelInner = forwardRef<HTMLDivElement, TabPanelProps>(
-  function TabPanelInner(props, forwardedRef) {
-    const { innerAs, ...otherProps } = props;
-
-    return <Box as={innerAs} ref={forwardedRef} {...otherProps} />;
-  }
-);
-
-export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
-  function TabPanel(props, forwardedRef) {
-    const { as = 'div', ...otherProps } = props;
-
-    return (
-      <TabPanelCore
-        as={TabPanelInner}
-        innerAs={as}
-        ref={forwardedRef}
-        {...otherProps}
-      />
-    );
-  }
-);
+import { forwardRef } from 'react';
+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;
+
+const TabPanelInner = forwardRef<HTMLDivElement, TabPanelProps>(
+  function TabPanelInner(props, forwardedRef) {
+    const { innerAs, ...otherProps } = props;
+
+    return <Box as={innerAs} ref={forwardedRef} {...otherProps} />;
+  }
+);
+
+export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
+  function TabPanel(props, forwardedRef) {
+    const { as = 'div', ...otherProps } = props;
+
+    return (
+      <TabPanelCore
+        as={TabPanelInner}
+        innerAs={as}
+        ref={forwardedRef}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Tab/TabPanels.tsx

@@ -1,5 +1,5 @@
-import { TabPanels } from '@basic-ui/core';
-import type { TabPanelsProps } from '@basic-ui/core';
-
-export { TabPanels };
-export type { TabPanelsProps };
+import { TabPanels } from '@basic-ui/core';
+import type { TabPanelsProps } from '@basic-ui/core';
+
+export { TabPanels };
+export type { TabPanelsProps };