@basic-ui/material 1.0.0-alpha.23 → 1.0.0-alpha.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.25",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.49",
+    "@basic-ui/core": "^0.0.50",
     "@basic-ui/dynamic-theme": "^0.0.8",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "3438c9ed529efc9e1a98130719ca372f4c750931"
+  "gitHead": "0d58f1872e2d6e046d1f17296322c9a6588a8a57"
 }

package/src/Badge/Badge.story.tsx

@@ -0,0 +1,68 @@
+import { rem } from 'polished';
+import { useState } from 'react';
+
+import { Box } from '../Box';
+import { NavRailIndicator, NavRailItem, NavRailLabel } from '../NavRail';
+import { KitchenIcon, ListIcon, MenuIcon } from '../NavRail/icons/test-icons';
+import { Badge } from './';
+
+export default { title: 'components/Badge' };
+
+const Example = () => {
+  const [selectedItem, setSelectedItem] = useState('0');
+
+  return (
+    <Box
+      bg="surface"
+      width="80px"
+      position="fixed"
+      top="0"
+      bottom="0"
+      left="0"
+      py={rem(80)}
+      display="flex"
+      flexDirection="column"
+      px={rem(12)}
+    >
+      <NavRailItem
+        selected={selectedItem === '0'}
+        onClick={() => setSelectedItem('0')}
+        position="relative"
+      >
+        <NavRailIndicator>
+          <MenuIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Menu</NavRailLabel>
+        <Badge position="absolute" top="-4px" right="-4px" size="small" />
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '1'}
+        onClick={() => setSelectedItem('1')}
+        position="relative"
+      >
+        <NavRailIndicator>
+          <KitchenIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Kitchen</NavRailLabel>
+        <Badge position="absolute" top="-4px" right="-4px">
+          9
+        </Badge>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '2'}
+        onClick={() => setSelectedItem('2')}
+        position="relative"
+      >
+        <NavRailIndicator>
+          <ListIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Orders</NavRailLabel>
+        <Badge position="absolute" top="-4px" right="-4px">
+          999+
+        </Badge>
+      </NavRailItem>
+    </Box>
+  );
+};
+
+export const Controlled = () => <Example />;

package/src/Badge/Badge.tsx

@@ -1,17 +1,47 @@
+import { rem } from 'polished';
 import { forwardRef } from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 
 export interface BadgeProps extends BoxProps {
-  placement: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  size?: 'small' | 'large';
 }
 
 export const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
   props,
   forwardedRef
 ) {
-  const { ...otherProps } = props;
+  const { size = 'large', __css, ...otherProps } = props;
 
-  return <Box ref={forwardedRef} {...otherProps} />;
+  return (
+    <Box
+      ref={forwardedRef}
+      __css={{
+        variant: 'text.label-small',
+        bg: 'error',
+        color: 'on.error',
+        borderRadius: 'full',
+        ...(size === 'small'
+          ? {
+              maxWidth: rem(6),
+              maxHeight: rem(6),
+              minWidth: rem(6),
+              minHeight: rem(6),
+            }
+          : {
+              px: 1,
+              maxHeight: rem(16),
+              minWidth: rem(16),
+              minHeight: rem(16),
+            }),
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontVariantNumeric: 'tabular-nums',
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
 });

package/src/NavRail/NavRail.story.tsx

@@ -5,57 +5,13 @@ import { Box } from '../Box';
 import { NavRailItem, NavRailIndicator, NavRailLabel } from './';
 import type { NavRailLabelProps } from './';
 import { EASING_STANDARD } from '../motion';
+import { KitchenIcon, ListIcon, MenuIcon } from './icons/test-icons';
 // import './styles.css';
 
 export default {
   title: 'components/NavRail',
 };
 
-const ListIcon = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height={16}
-    width={16}
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M8 17q.425 0 .713-.288Q9 16.425 9 16t-.287-.713Q8.425 15 8 15t-.713.287Q7 15.575 7 16t.287.712Q7.575 17 8 17Zm0-4q.425 0 .713-.288Q9 12.425 9 12t-.287-.713Q8.425 11 8 11t-.713.287Q7 11.575 7 12t.287.712Q7.575 13 8 13Zm0-4q.425 0 .713-.288Q9 8.425 9 8t-.287-.713Q8.425 7 8 7t-.713.287Q7 7.575 7 8t.287.712Q7.575 9 8 9Zm3 8h6v-2h-6Zm0-4h6v-2h-6Zm0-4h6V7h-6ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z"
-    />
-  </svg>
-);
-
-const KitchenIcon = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height={16}
-    width={16}
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M8 8V5h2v3Zm0 9v-5h2v5Zm-2 5q-.825 0-1.412-.587Q4 20.825 4 20V4q0-.825.588-1.413Q5.175 2 6 2h12q.825 0 1.413.587Q20 3.175 20 4v16q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12v-9H6v9ZM6 9h12V4H6Z"
-    />
-  </svg>
-);
-
-const MenuIcon = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height={16}
-    width={16}
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M17 22v-8h-3V7q0-2.075 1.463-3.537Q16.925 2 19 2v20ZM7 22v-9.15q-1.275-.35-2.137-1.4Q4 10.4 4 9V2h2v7h1V2h2v7h1V2h2v7q0 1.4-.863 2.45-.862 1.05-2.137 1.4V22Z"
-    />
-  </svg>
-);
-
 export const Default = () => {
   const [selectedItem, setSelectedItem] = useState('0');
 

package/src/NavRail/NavRailItem.tsx

@@ -159,7 +159,6 @@ export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
           backgroundColor: 'transparent',
           margin: 0,
           padding: 0,
-          px: rem(12),
           minHeight: rem(60),
           height: rem(60),
           cursor: 'pointer',

package/src/NavRail/icons/test-icons.tsx

@@ -0,0 +1,46 @@
+import type { SVGAttributes } from 'react';
+
+export const ListIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8 17q.425 0 .713-.288Q9 16.425 9 16t-.287-.713Q8.425 15 8 15t-.713.287Q7 15.575 7 16t.287.712Q7.575 17 8 17Zm0-4q.425 0 .713-.288Q9 12.425 9 12t-.287-.713Q8.425 11 8 11t-.713.287Q7 11.575 7 12t.287.712Q7.575 13 8 13Zm0-4q.425 0 .713-.288Q9 8.425 9 8t-.287-.713Q8.425 7 8 7t-.713.287Q7 7.575 7 8t.287.712Q7.575 9 8 9Zm3 8h6v-2h-6Zm0-4h6v-2h-6Zm0-4h6V7h-6ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z"
+    />
+  </svg>
+);
+
+export const KitchenIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8 8V5h2v3Zm0 9v-5h2v5Zm-2 5q-.825 0-1.412-.587Q4 20.825 4 20V4q0-.825.588-1.413Q5.175 2 6 2h12q.825 0 1.413.587Q20 3.175 20 4v16q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12v-9H6v9ZM6 9h12V4H6Z"
+    />
+  </svg>
+);
+
+export const MenuIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M17 22v-8h-3V7q0-2.075 1.463-3.537Q16.925 2 19 2v20ZM7 22v-9.15q-1.275-.35-2.137-1.4Q4 10.4 4 9V2h2v7h1V2h2v7h1V2h2v7q0 1.4-.863 2.45-.862 1.05-2.137 1.4V22Z"
+    />
+  </svg>
+);

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" />
+);

package/src/Tab/Tab.tsx

@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes } from 'react';
-import { forwardRef } 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';
@@ -20,10 +20,23 @@ const TabInner = forwardRef<
   TabProps & { selected?: boolean }
 >(function Tab(props, forwardedRef) {
   const { innerAs, selected, children, disabled, ...otherProps } = props;
-  const { textColor, indicatorColor, selectedTextColor } = useTabListContext();
+  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">
+    <Box
+      position="relative"
+      display="flex"
+      flex={1}
+      flexDirection="column"
+      height="100%"
+    >
       <RippleBox<
         RippleBoxProps<
           HTMLButtonElement,
@@ -36,11 +49,12 @@ const TabInner = forwardRef<
         disabled={disabled}
         __css={{
           px: 3,
-          position: 'relative',
+          py: 0,
           color: selected
             ? selectedTextColor || indicatorColor
             : alpha(textColor, disabled ? 0.37 : 0.7),
-          height: rem(48),
+          minHeight: rem(48),
+          height: '100%',
           backgroundColor: 'transparent',
           border: 'none',
           ':focus': {
@@ -53,15 +67,43 @@ const TabInner = forwardRef<
       >
         <Text
           as="span"
-          variant="label-large"
-          color="inherit"
-          height="100%"
-          textAlign="center"
+          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} />
+      <TabIndicator
+        selected={selected}
+        color={indicatorColor}
+        variant={variant}
+        labelRef={labelRef}
+      />
     </Box>
   );
 });

package/src/Tab/TabList.tsx

@@ -13,6 +13,7 @@ export type TabListProps = TabListPropsCore &
     indicatorColor?: string;
     textColor?: string;
     selectedTextColor?: string;
+    variant?: 'primary' | 'secondary';
   };
 
 const TabListInner = forwardRef<HTMLDivElement, TabListProps>(
@@ -37,12 +38,15 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
       indicatorColor = 'primary',
       textColor = 'on.surface',
       selectedTextColor,
+      variant = 'secondary',
       ...otherProps
     } = props;
     const currentIndicator = useRef<HTMLSpanElement>(null);
 
     return (
-      <TabListProvider value={{ indicatorColor, textColor, selectedTextColor }}>
+      <TabListProvider
+        value={{ indicatorColor, textColor, selectedTextColor, variant }}
+      >
         <TabIndicatorProvider value={{ currentIndicator }}>
           <TabListCore
             as={TabListInner}

package/src/Tab/context.ts

@@ -5,11 +5,13 @@ export interface TabListContextProps {
   indicatorColor: string;
   textColor: string;
   selectedTextColor?: string;
+  variant: 'primary' | 'secondary';
 }
 
 const TabListContext = createContext<TabListContextProps>({
   indicatorColor: 'primary',
   textColor: 'on.surface',
+  variant: 'secondary',
 });
 export const { Provider: TabListProvider } = TabListContext;
 export const useTabListContext = () => useContext(TabListContext);