@basic-ui/material 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/Snackbar/index.ts

@@ -1,2 +1,3 @@
 export * from './Snackbar';
 export * from './Stack';
+export * from './useSnackbarAnimation';

package/src/Snackbar/useSnackbarAnimation.ts

@@ -1,6 +1,7 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, MutableRefObject } from 'react';
 import { useEffect } from 'react';
 
+import { EASING_STANDARD } from '../motion';
 import { useStackItem } from './Stack';
 
 const TRANSITION_TIME = 150;
@@ -65,7 +66,7 @@ const slideFromLeft = {
 };
 
 type AnimationState = 'entering' | 'entered' | 'exiting';
-export const placements = {
+const placements = {
   'top-right': {
     style: { top: 3, right: 3 },
     animate: (state: AnimationState, translateY: number) =>
@@ -100,7 +101,7 @@ export const placements = {
 const commonStyle = { position: 'fixed', zIndex: 'snackbar' };
 
 function getTransition(timems: number) {
-  return `opacity ${timems}ms cubic-bezier(.4,0,.2,1),transform ${timems}ms cubic-bezier(.4,0,.2,1)`;
+  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
 }
 
 const defaultAnimation = {
@@ -110,7 +111,7 @@ const defaultAnimation = {
 };
 
 export function useSnackbarAnimation(
-  ref: React.MutableRefObject<HTMLDivElement | null>,
+  ref: MutableRefObject<HTMLDivElement | null>,
   timeout: number
 ): {
   style: CSSProperties;

package/src/Switch/Switch.story.tsx

@@ -1,27 +1,98 @@
+import type { ReactElement } from 'react';
+import { forwardRef } from 'react';
+
 import { Switch } from './';
 import { Box } from '../';
+import type { CheckBoxIconProps } from '../CheckBox/CheckBoxIcon';
 
 export default {
   title: 'components/Switch',
 };
 
-const Example = () => {
+const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
+  function CheckBoxIcon(
+    {
+      __css = {},
+      indeterminate,
+      checked,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      disabled,
+      backgroundColor,
+      borderColor,
+      opacity,
+      ...otherProps
+    },
+    forwardedRef
+  ) {
+    return (
+      <Box
+        as="span"
+        ref={forwardedRef}
+        __css={{
+          display: 'inline-flex',
+          pointerEvents: 'none',
+          '& svg': {
+            width: 'var(--switch-icon-size)',
+            height: 'var(--switch-icon-size)',
+          },
+          __css,
+        }}
+        {...otherProps}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
+          {checked ? (
+            <path
+              d="M378 810 154 586l43-43 181 181 384-384 43 43-427 427Z"
+              fill="currentColor"
+            />
+          ) : (
+            <path
+              d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"
+              fill="currentColor"
+            />
+          )}
+        </svg>
+      </Box>
+    );
+  }
+);
+
+const Example = ({ icon }: { icon?: ReactElement<any> }) => {
   return (
     <>
       <Box>
-        <Switch>off/on</Switch>
-        <Switch disabled>off/on</Switch>
-        <Switch disabled defaultChecked={true}>
+        <Switch icon={icon}>off/on</Switch>
+        <Switch icon={icon} disabled>
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled defaultChecked={true}>
+          off/on
+        </Switch>
+      </Box>
+      <Box>
+        <Switch icon={icon} />
+        <Switch icon={icon} disabled />
+        <Switch icon={icon} disabled defaultChecked={true} />
+      </Box>
+      <Box>
+        <Switch icon={icon} size="small">
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled size="small">
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled defaultChecked={true} size="small">
           off/on
         </Switch>
       </Box>
       <Box>
-        <Switch />
-        <Switch disabled />
-        <Switch disabled defaultChecked={true} />
+        <Switch icon={icon} size="small" />
+        <Switch icon={icon} disabled size="small" />
+        <Switch icon={icon} disabled defaultChecked={true} size="small" />
       </Box>
     </>
   );
 };
 
 export const Default = () => <Example />;
+export const WithIcon = () => <Example icon={<CheckBoxIcon />} />;

package/src/Switch/Switch.tsx

@@ -1,7 +1,7 @@
-import type { InputHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import * as React from 'react';
+import type { ElementType, FC, InputHTMLAttributes, ReactElement } from 'react';
+import { cloneElement, forwardRef } from 'react';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
+import { rem } from 'polished';
 
 import type { RippleBoxProps } from '../Ripple';
 import { RippleBox } from '../Ripple';
@@ -14,20 +14,49 @@ import {
 } from '../SelectionControl';
 import { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';
 
-const CheckBoxCore: React.FC<
+const CheckBoxCore: FC<
   SwitchProps & {
-    innerAs?: React.ElementType<any>;
+    innerAs?: ElementType<any>;
   }
 > = _CheckBoxCore as any;
 
-interface SwitchProps
-  extends BoxProps<
-    HTMLInputElement,
-    React.InputHTMLAttributes<HTMLInputElement>
-  > {
-  as?: React.ElementType<any>;
+export interface SwitchProps
+  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+  as?: ElementType<any>;
   checked?: boolean;
   disabled?: boolean;
+  size?: 'small' | 'default';
+  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;
+}
+
+function getSizeCssVariables(size: 'small' | 'default', hasIcon: boolean) {
+  const multiplier = size === 'small' ? 0.75 : 1;
+  const BORDER_WIDTH = 2;
+  const TRAIL_WIDTH = 52 * multiplier;
+  const TRAIL_HEIGHT = 32 * multiplier;
+  return {
+    ['--switch-border-width']: rem(BORDER_WIDTH),
+    ['--switch-trail-width']: rem(TRAIL_WIDTH),
+    ['--switch-trail-height']: rem(TRAIL_HEIGHT),
+    ['--switch-icon-size']: rem(TRAIL_HEIGHT / 2),
+    ['--switch-state-layer-size']: rem(40 * multiplier),
+    ['--switch-thumb-size-checked-inactive']: rem(
+      TRAIL_HEIGHT - BORDER_WIDTH * 4
+    ),
+    ['--switch-thumb-size-checked-active']: rem(
+      TRAIL_HEIGHT - BORDER_WIDTH * 2
+    ),
+    ['--switch-thumb-size-unchecked-inactive']: rem(TRAIL_HEIGHT / 2),
+    ['--switch-thumb-size-unchecked-active']: rem(
+      TRAIL_HEIGHT - BORDER_WIDTH * 2
+    ),
+    ...(hasIcon && {
+      ['--switch-thumb-size-unchecked-inactive']:
+        'var(--switch-thumb-size-checked-inactive)',
+      ['--switch-thumb-size-unchecked-active']:
+        'var(--switch-thumb-size-checked-active)',
+    }),
+  };
 }
 
 const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
@@ -37,60 +66,73 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
       disabled,
       checked,
       onChange,
+      size = 'default',
       __css,
+      icon,
       ...otherProps
     } = props;
     const color = checked ? 'primary' : 'on.surface';
     const theme = useTheme();
 
     return (
-      <Box p={2} display="inline-block" minWidth="auto">
-        <Box position="relative">
-          <SwitchTrail checked={checked} disabled={disabled} />
-          <SwitchThumb checked={checked}>
-            <RippleBox<
-              RippleBoxProps<
-                HTMLInputElement,
-                InputHTMLAttributes<HTMLInputElement>
-              >
+      <Box
+        display="inline-block"
+        position="relative"
+        minWidth="auto"
+        sx={getSizeCssVariables(size, Boolean(icon))}
+      >
+        <SwitchTrail checked={checked} disabled={disabled} />
+        <SwitchThumb checked={checked}>
+          <RippleBox<
+            RippleBoxProps<
+              HTMLInputElement,
+              InputHTMLAttributes<HTMLInputElement>
             >
-              as={Comp}
-              role="switch"
-              type="checkbox"
-              checked={checked}
-              onChange={onChange}
-              theme={theme}
-              ref={forwardedRef}
-              aria-checked={checked ? 'true' : 'false'}
-              rippleColor={color}
-              baseOpacity={0}
-              hoverOpacity={0.04}
-              focusOpacity={0.12}
-              center={true}
-              disabled={disabled}
-              data-switch-thumb=""
-              {...otherProps}
-              __css={{
-                top: '50%',
-                left: '50%',
-                backgroundColor: 'transparent',
-                transform: 'translate(-50%, -50%)',
-                width: '100%',
-                height: '100%',
-                appearance: 'none',
-                ':focus': {
-                  outline: 'none',
-                },
-                border: 'none',
-                borderRadius: 'full',
-                zIndex: 1,
-                position: 'absolute',
-                ...__css,
-              }}
-            />
-            <SwitchCircle checked={checked} />
-          </SwitchThumb>
-        </Box>
+          >
+            as={Comp}
+            role="switch"
+            type="checkbox"
+            checked={checked}
+            onChange={onChange}
+            theme={theme}
+            ref={forwardedRef}
+            aria-checked={checked ? 'true' : 'false'}
+            rippleColor={color}
+            baseOpacity={0}
+            hoverOpacity={0.04}
+            focusOpacity={0.12}
+            center={true}
+            disabled={disabled}
+            data-switch-thumb=""
+            {...otherProps}
+            __css={{
+              top: '50%',
+              left: '50%',
+              backgroundColor: 'transparent',
+              transform: 'translate(-50%, -50%)',
+              width: '100%',
+              height: '100%',
+              appearance: 'none',
+              ':focus': {
+                outline: 'none',
+              },
+              border: 'none',
+              borderRadius: 'full',
+              zIndex: 1,
+              position: 'absolute',
+              ...__css,
+            }}
+          />
+          <SwitchCircle checked={checked}>
+            {icon
+              ? cloneElement(icon, {
+                  checked,
+                  ['data-checkbox-icon' as any]: '',
+                  disabled,
+                })
+              : null}
+          </SwitchCircle>
+        </SwitchThumb>
       </Box>
     );
   }
@@ -100,13 +142,14 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
   props,
   forwardedRef
 ) {
-  const { as = 'input', disabled, children, ...otherProps } = props;
+  const { as = 'input', icon, disabled, children, ...otherProps } = props;
 
   const inner = (
     <CheckBoxCore
       as={SwitchInner}
       innerAs={as}
       ref={forwardedRef}
+      icon={icon}
       disabled={disabled}
       {...otherProps}
     />

package/src/Switch/styledComponents.tsx

@@ -1,14 +1,17 @@
-import { rem } from 'polished';
-
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
-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;
+const BORDER_WIDTH = 'var(--switch-border-width)';
+const TRAIL_WIDTH = 'var(--switch-trail-width)';
+const TRAIL_HEIGHT = 'var(--switch-trail-height)';
+const STATE_LAYER_SIZE = 'var(--switch-state-layer-size)';
+const CIRCLE_SIZE_INACTIVE_CHECKED =
+  'var(--switch-thumb-size-checked-inactive)';
+const CIRCLE_SIZE_ACTIVE_CHECKED = 'var(--switch-thumb-size-checked-active)';
+const CIRCLE_SIZE_INACTIVE_UNCHECKED =
+  'var(--switch-thumb-size-unchecked-inactive)';
+const CIRCLE_SIZE_ACTIVE_UNCHECKED =
+  'var(--switch-thumb-size-unchecked-active)';
 
 export const SwitchTrail = ({
   checked = false,
@@ -17,10 +20,10 @@ export const SwitchTrail = ({
 }) => (
   <Box
     __css={{
-      width: rem(TRAIL_WIDTH),
-      height: rem(TRAIL_HEIGHT),
-      borderRadius: rem(TRAIL_HEIGHT / 2),
-      borderWidth: rem(BORDER_WIDTH),
+      width: TRAIL_WIDTH,
+      height: TRAIL_HEIGHT,
+      borderRadius: 'full',
+      borderWidth: BORDER_WIDTH,
       borderStyle: 'solid',
       backgroundColor: checked ? 'primary' : 'surface-variant',
       borderColor: checked ? 'primary' : 'outline',
@@ -34,25 +37,23 @@ export const SwitchTrail = ({
   />
 );
 
-const THUMB_SIZE = 40;
 export const SwitchThumb = ({ checked = false, ...otherProps }) => (
   <Box
     position="absolute"
-    width={rem(THUMB_SIZE)}
-    height={rem(THUMB_SIZE)}
+    width={STATE_LAYER_SIZE}
+    height={STATE_LAYER_SIZE}
     borderRadius="full"
     left={'50%'}
     top={'50%'}
     __css={{
-      transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${rem(
-        (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2
-      )})) translateY(-50%)`,
+      transform: `translateX(calc(-50% ${checked ? '+' : '-'}
+        (${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),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
+      transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,
       '& > input': {
-        width: THUMB_SIZE,
-        height: THUMB_SIZE,
+        width: STATE_LAYER_SIZE,
+        height: STATE_LAYER_SIZE,
       },
     }}
     {...otherProps}
@@ -63,17 +64,21 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
   <Box
     __css={{
       position: 'absolute',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       width: checked
-        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
-        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+        ? CIRCLE_SIZE_INACTIVE_CHECKED
+        : CIRCLE_SIZE_INACTIVE_UNCHECKED,
       height: checked
-        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
-        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+        ? CIRCLE_SIZE_INACTIVE_CHECKED
+        : CIRCLE_SIZE_INACTIVE_UNCHECKED,
       boxSizing: 'border-box',
       borderRadius: 'full',
       pointerEvents: 'none',
       zIndex: 1,
       backgroundColor: checked ? 'on.primary' : 'outline',
+      color: checked ? 'primary' : 'on.outline',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
@@ -81,6 +86,7 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
       '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &':
         {
           backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
+          color: checked ? 'on.primary-container' : 'surface-variant',
         },
       '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &':
         {
@@ -94,6 +100,7 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
       '[data-switch-thumb=""]:disabled ~ &': {
         opacity: checked ? 1 : 0.38,
         backgroundColor: checked ? 'surface' : 'on.surface',
+        color: checked ? 'on.surface' : 'surface',
         height: checked
           ? CIRCLE_SIZE_INACTIVE_CHECKED
           : CIRCLE_SIZE_INACTIVE_UNCHECKED,

package/src/Tab/Tab.story.tsx

@@ -3,19 +3,114 @@ 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 = () => {
+const Example = ({ variant }: { variant: 'primary' | 'secondary' }) => {
   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 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>
@@ -28,15 +123,62 @@ const Example = () => {
   );
 };
 
-const ExampleAppBar = () => {
+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%">
-          <Tab>Item 1</Tab>
-          <Tab>Item 2</Tab>
-          <Tab>Item 3</Tab>
-          <Tab disabled>Item 4</Tab>
+        <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>
@@ -49,5 +191,19 @@ const ExampleAppBar = () => {
   );
 };
 
-export const Controlled = () => <Example />;
-export const WithAppBar = () => <ExampleAppBar />;
+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" />
+);