@basic-ui/material 1.0.0-alpha.52 → 1.0.0-alpha.54

package/src/Tab/Tab.story.tsx

@@ -1,209 +1,209 @@
-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" />
-);
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from './';
+import { AppBar } from '../AppBar';
+
+// import './styles.css';
+
+const FlightIcon = (props: any) => (
+  <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: any) => (
+  <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: any) => (
+  <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: any) => (
+  <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,120 +1,120 @@
-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} />
-  );
-});
+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} />
+  );
+});