@basic-ui/material 1.0.0-alpha.46 → 1.0.0-alpha.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.46",
+  "version": "1.0.0-alpha.48",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -62,5 +62,5 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "tailwindcss": "^3.0.0"
   },
-  "gitHead": "006bc0e1e68809669136f96dc66f2e591bffbfb7"
+  "gitHead": "38fd099ab13b9ce7a4df02e9bc634a858cf1782a"
 }

package/src/Table/Table.story.tsx

@@ -1,227 +1,227 @@
-import { Table, TableRow, TableBody, TableHead, TableCell } from './';
-import { Link } from '../Link';
-
-export default {
-  title: 'components/Table',
-};
-
-const data = {
-  items: [
-    {
-      full_name: 'facebook/react',
-      url: 'https://github.com/facebook/react',
-      owner: 'facebook',
-      stargazers_count: 151659,
-    },
-    {
-      full_name: 'duxianwei520/react',
-      url: 'https://github.com/duxianwei520/react',
-      owner: 'duxianwei520',
-      stargazers_count: 3724,
-    },
-    {
-      full_name: 'discountry/react',
-      url: 'https://github.com/discountry/react',
-      owner: 'discountry',
-      stargazers_count: 946,
-    },
-    {
-      full_name: 'Cathy0807/react',
-      url: 'https://github.com/Cathy0807/react',
-      owner: 'Cathy0807',
-      stargazers_count: 653,
-    },
-    {
-      full_name: 'react-redux-antd-es6/react',
-      url: 'https://github.com/react-redux-antd-es6/react',
-      owner: 'react-redux-antd-es6',
-      stargazers_count: 721,
-    },
-    {
-      full_name: 'HackYourFuture/React',
-      url: 'https://github.com/HackYourFuture/React',
-      owner: 'HackYourFuture',
-      stargazers_count: 82,
-    },
-    {
-      full_name: 'ReactiveCocoa/ReactiveCocoa',
-      url: 'https://github.com/ReactiveCocoa/ReactiveCocoa',
-      owner: 'ReactiveCocoa',
-      stargazers_count: 19837,
-    },
-    {
-      full_name: 'facebook/react-native',
-      url: 'https://github.com/facebook/react-native',
-      owner: 'facebook',
-      stargazers_count: 88492,
-    },
-    {
-      full_name: 'vercel/next.js',
-      url: 'https://github.com/vercel/next.js',
-      owner: 'vercel',
-      stargazers_count: 50396,
-    },
-    {
-      full_name: 'ReactTraining/react-router',
-      url: 'https://github.com/ReactTraining/react-router',
-      owner: 'ReactTraining',
-      stargazers_count: 41060,
-    },
-    {
-      full_name: 'azat-co/react',
-      url: 'https://github.com/azat-co/react',
-      owner: 'azat-co',
-      stargazers_count: 209,
-    },
-    {
-      full_name: 'facebook/create-react-app',
-      url: 'https://github.com/facebook/create-react-app',
-      owner: 'facebook',
-      stargazers_count: 80029,
-    },
-    {
-      full_name: 'zeit-ui/react',
-      url: 'https://github.com/zeit-ui/react',
-      owner: 'zeit-ui',
-      stargazers_count: 723,
-    },
-    {
-      full_name: 'ui-router/react',
-      url: 'https://github.com/ui-router/react',
-      owner: 'ui-router',
-      stargazers_count: 366,
-    },
-    {
-      full_name: 'omergulcicek/react',
-      url: 'https://github.com/omergulcicek/react',
-      owner: 'omergulcicek',
-      stargazers_count: 379,
-    },
-    {
-      full_name: 'werein/react',
-      url: 'https://github.com/werein/react',
-      owner: 'werein',
-      stargazers_count: 240,
-    },
-    {
-      full_name: 'enaqx/awesome-react',
-      url: 'https://github.com/enaqx/awesome-react',
-      owner: 'enaqx',
-      stargazers_count: 37589,
-    },
-    {
-      full_name: 'react-boilerplate/react-boilerplate',
-      url: 'https://github.com/react-boilerplate/react-boilerplate',
-      owner: 'react-boilerplate',
-      stargazers_count: 25818,
-    },
-    {
-      full_name: 'ruanyf/react-demos',
-      url: 'https://github.com/ruanyf/react-demos',
-      owner: 'ruanyf',
-      stargazers_count: 15179,
-    },
-    {
-      full_name: 'reactiveui/ReactiveUI',
-      url: 'https://github.com/reactiveui/ReactiveUI',
-      owner: 'reactiveui',
-      stargazers_count: 5572,
-    },
-    {
-      full_name: 'zf-huangxiao/react',
-      url: 'https://github.com/zf-huangxiao/react',
-      owner: 'zf-huangxiao',
-      stargazers_count: 44,
-    },
-    {
-      full_name: 'kdchang/reactjs101',
-      url: 'https://github.com/kdchang/reactjs101',
-      owner: 'kdchang',
-      stargazers_count: 3667,
-    },
-    {
-      full_name: 'davezuko/react-redux-starter-kit',
-      url: 'https://github.com/davezuko/react-redux-starter-kit',
-      owner: 'davezuko',
-      stargazers_count: 10408,
-    },
-    {
-      full_name: 'react-navigation/react-navigation',
-      url: 'https://github.com/react-navigation/react-navigation',
-      owner: 'react-navigation',
-      stargazers_count: 18391,
-    },
-    {
-      full_name: 'JedWatson/react-select',
-      url: 'https://github.com/JedWatson/react-select',
-      owner: 'JedWatson',
-      stargazers_count: 20403,
-    },
-    {
-      full_name: 'reactjs/reactjs.org',
-      url: 'https://github.com/reactjs/reactjs.org',
-      owner: 'reactjs',
-      stargazers_count: 4732,
-    },
-    {
-      full_name: 'leilihuang/React',
-      url: 'https://github.com/leilihuang/React',
-      owner: 'leilihuang',
-      stargazers_count: 137,
-    },
-    {
-      full_name: 'reactioncommerce/reaction',
-      url: 'https://github.com/reactioncommerce/reaction',
-      owner: 'reactioncommerce',
-      stargazers_count: 10340,
-    },
-    {
-      full_name: 'streamich/react-use',
-      url: 'https://github.com/streamich/react-use',
-      owner: 'streamich',
-      stargazers_count: 13742,
-    },
-    {
-      full_name: 'StephenGrider/ReactNativeReduxCasts',
-      url: 'https://github.com/StephenGrider/ReactNativeReduxCasts',
-      owner: 'StephenGrider',
-      stargazers_count: 2591,
-    },
-  ],
-  total_count: 1456586,
-};
-
-const GitHubTable = () => {
-  const widths = ['45%', '35%', '20%'];
-
-  return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableCell width={widths[0]}>Name</TableCell>
-          <TableCell width={widths[1]}>Owner</TableCell>
-          <TableCell width={widths[2]} textAlign="right">
-            Star count
-          </TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {data.items.map((item) => (
-          <TableRow key={item.full_name}>
-            <TableCell width={widths[0]}>
-              <Link href={item.url} target="_blank" rel="noopener noreferrer">
-                {item.full_name}
-              </Link>
-            </TableCell>
-            <TableCell width={widths[1]}>{item.owner}</TableCell>
-            <TableCell width={widths[2]} textAlign="right">
-              {item.stargazers_count} stars
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
-export const Example = () => <GitHubTable />;
+import { Table, TableRow, TableBody, TableHead, TableCell } from './';
+import { Link } from '../Link';
+
+export default {
+  title: 'components/Table',
+};
+
+const data = {
+  items: [
+    {
+      full_name: 'facebook/react',
+      url: 'https://github.com/facebook/react',
+      owner: 'facebook',
+      stargazers_count: 151659,
+    },
+    {
+      full_name: 'duxianwei520/react',
+      url: 'https://github.com/duxianwei520/react',
+      owner: 'duxianwei520',
+      stargazers_count: 3724,
+    },
+    {
+      full_name: 'discountry/react',
+      url: 'https://github.com/discountry/react',
+      owner: 'discountry',
+      stargazers_count: 946,
+    },
+    {
+      full_name: 'Cathy0807/react',
+      url: 'https://github.com/Cathy0807/react',
+      owner: 'Cathy0807',
+      stargazers_count: 653,
+    },
+    {
+      full_name: 'react-redux-antd-es6/react',
+      url: 'https://github.com/react-redux-antd-es6/react',
+      owner: 'react-redux-antd-es6',
+      stargazers_count: 721,
+    },
+    {
+      full_name: 'HackYourFuture/React',
+      url: 'https://github.com/HackYourFuture/React',
+      owner: 'HackYourFuture',
+      stargazers_count: 82,
+    },
+    {
+      full_name: 'ReactiveCocoa/ReactiveCocoa',
+      url: 'https://github.com/ReactiveCocoa/ReactiveCocoa',
+      owner: 'ReactiveCocoa',
+      stargazers_count: 19837,
+    },
+    {
+      full_name: 'facebook/react-native',
+      url: 'https://github.com/facebook/react-native',
+      owner: 'facebook',
+      stargazers_count: 88492,
+    },
+    {
+      full_name: 'vercel/next.js',
+      url: 'https://github.com/vercel/next.js',
+      owner: 'vercel',
+      stargazers_count: 50396,
+    },
+    {
+      full_name: 'ReactTraining/react-router',
+      url: 'https://github.com/ReactTraining/react-router',
+      owner: 'ReactTraining',
+      stargazers_count: 41060,
+    },
+    {
+      full_name: 'azat-co/react',
+      url: 'https://github.com/azat-co/react',
+      owner: 'azat-co',
+      stargazers_count: 209,
+    },
+    {
+      full_name: 'facebook/create-react-app',
+      url: 'https://github.com/facebook/create-react-app',
+      owner: 'facebook',
+      stargazers_count: 80029,
+    },
+    {
+      full_name: 'zeit-ui/react',
+      url: 'https://github.com/zeit-ui/react',
+      owner: 'zeit-ui',
+      stargazers_count: 723,
+    },
+    {
+      full_name: 'ui-router/react',
+      url: 'https://github.com/ui-router/react',
+      owner: 'ui-router',
+      stargazers_count: 366,
+    },
+    {
+      full_name: 'omergulcicek/react',
+      url: 'https://github.com/omergulcicek/react',
+      owner: 'omergulcicek',
+      stargazers_count: 379,
+    },
+    {
+      full_name: 'werein/react',
+      url: 'https://github.com/werein/react',
+      owner: 'werein',
+      stargazers_count: 240,
+    },
+    {
+      full_name: 'enaqx/awesome-react',
+      url: 'https://github.com/enaqx/awesome-react',
+      owner: 'enaqx',
+      stargazers_count: 37589,
+    },
+    {
+      full_name: 'react-boilerplate/react-boilerplate',
+      url: 'https://github.com/react-boilerplate/react-boilerplate',
+      owner: 'react-boilerplate',
+      stargazers_count: 25818,
+    },
+    {
+      full_name: 'ruanyf/react-demos',
+      url: 'https://github.com/ruanyf/react-demos',
+      owner: 'ruanyf',
+      stargazers_count: 15179,
+    },
+    {
+      full_name: 'reactiveui/ReactiveUI',
+      url: 'https://github.com/reactiveui/ReactiveUI',
+      owner: 'reactiveui',
+      stargazers_count: 5572,
+    },
+    {
+      full_name: 'zf-huangxiao/react',
+      url: 'https://github.com/zf-huangxiao/react',
+      owner: 'zf-huangxiao',
+      stargazers_count: 44,
+    },
+    {
+      full_name: 'kdchang/reactjs101',
+      url: 'https://github.com/kdchang/reactjs101',
+      owner: 'kdchang',
+      stargazers_count: 3667,
+    },
+    {
+      full_name: 'davezuko/react-redux-starter-kit',
+      url: 'https://github.com/davezuko/react-redux-starter-kit',
+      owner: 'davezuko',
+      stargazers_count: 10408,
+    },
+    {
+      full_name: 'react-navigation/react-navigation',
+      url: 'https://github.com/react-navigation/react-navigation',
+      owner: 'react-navigation',
+      stargazers_count: 18391,
+    },
+    {
+      full_name: 'JedWatson/react-select',
+      url: 'https://github.com/JedWatson/react-select',
+      owner: 'JedWatson',
+      stargazers_count: 20403,
+    },
+    {
+      full_name: 'reactjs/reactjs.org',
+      url: 'https://github.com/reactjs/reactjs.org',
+      owner: 'reactjs',
+      stargazers_count: 4732,
+    },
+    {
+      full_name: 'leilihuang/React',
+      url: 'https://github.com/leilihuang/React',
+      owner: 'leilihuang',
+      stargazers_count: 137,
+    },
+    {
+      full_name: 'reactioncommerce/reaction',
+      url: 'https://github.com/reactioncommerce/reaction',
+      owner: 'reactioncommerce',
+      stargazers_count: 10340,
+    },
+    {
+      full_name: 'streamich/react-use',
+      url: 'https://github.com/streamich/react-use',
+      owner: 'streamich',
+      stargazers_count: 13742,
+    },
+    {
+      full_name: 'StephenGrider/ReactNativeReduxCasts',
+      url: 'https://github.com/StephenGrider/ReactNativeReduxCasts',
+      owner: 'StephenGrider',
+      stargazers_count: 2591,
+    },
+  ],
+  total_count: 1456586,
+};
+
+const GitHubTable = () => {
+  const widths = ['45%', '35%', '20%'];
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell width={widths[0]}>Name</TableCell>
+          <TableCell width={widths[1]}>Owner</TableCell>
+          <TableCell width={widths[2]} textAlign="right">
+            Star count
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {data.items.map((item) => (
+          <TableRow key={item.full_name}>
+            <TableCell width={widths[0]}>
+              <Link href={item.url} target="_blank" rel="noopener noreferrer">
+                {item.full_name}
+              </Link>
+            </TableCell>
+            <TableCell width={widths[1]}>{item.owner}</TableCell>
+            <TableCell width={widths[2]} textAlign="right">
+              {item.stargazers_count} stars
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+export const Example = () => <GitHubTable />;

package/src/Table/Table.tsx

@@ -1,34 +1,28 @@
-import { rem } from 'polished';
-import { forwardRef } from 'react';
-
-import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
-
-export type TableProps = PaperProps;
-
-export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
-  const { children, elevation = 0, __css, ...rest } = props;
-
-  return (
-    <Paper
-      ref={ref}
-      role="table"
-      display="flex"
-      width="100%"
-      flexDirection="column"
-      elevation={elevation}
-      darkThemeBackgroundOverlay={elevation}
-      borderRadius="extra-large"
-      __css={{
-        borderColor: 'surface-variant',
-        borderWidth: rem(2),
-        borderStyle: 'solid',
-        overflowX: 'auto',
-        ...__css,
-      }}
-      {...rest}
-    >
-      {children}
-    </Paper>
-  );
-});
+import { forwardRef } from 'react';
+
+import type { PaperProps } from '../Paper';
+import { Box } from '../Box';
+
+export type TableProps = PaperProps;
+
+export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
+  const { children, __css, ...rest } = props;
+
+  return (
+    <Box
+      ref={ref}
+      role="table"
+      __css={{
+        display: 'flex',
+        width: '100%',
+        flexDirection: 'column',
+        borderRadius: 'small',
+        overflowX: 'auto',
+        ...__css,
+      }}
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
+});

package/src/Table/TableBody.tsx

@@ -1,17 +1,17 @@
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export type TableBodyProps = BoxProps;
-
-export const TableBody = forwardRef<HTMLDivElement, TableBodyProps>(
-  (props, ref) => {
-    const { children, ...rest } = props;
-    return (
-      <Box ref={ref} role="rowgroup" {...rest}>
-        {children}
-      </Box>
-    );
-  }
-);
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export type TableBodyProps = BoxProps;
+
+export const TableBody = forwardRef<HTMLDivElement, TableBodyProps>(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    return (
+      <Box ref={ref} role="rowgroup" {...rest}>
+        {children}
+      </Box>
+    );
+  }
+);

package/src/Table/TableCell.tsx

@@ -1,34 +1,37 @@
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { useTableHeadContext } from './context';
-
-export type TableCellProps = BoxProps;
-
-export const TableCell = forwardRef<HTMLDivElement, TableCellProps>(
-  (props, ref) => {
-    const { children, __css, ...rest } = props;
-    const isHeadCell = useTableHeadContext();
-
-    return (
-      <Box
-        ref={ref}
-        px={1}
-        py={3}
-        role={isHeadCell ? 'columnheader' : 'cell'}
-        __css={{
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          fontWeight: isHeadCell ? 'medium' : undefined,
-          color: 'on.surface',
-          ...__css,
-        }}
-        {...rest}
-      >
-        {children}
-      </Box>
-    );
-  }
-);
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTableHeadContext } from './context';
+
+export type TableCellProps = BoxProps;
+
+export const TableCell = forwardRef<HTMLDivElement, TableCellProps>(
+  (props, ref) => {
+    const { children, __css, ...rest } = props;
+    const isHeadCell = useTableHeadContext();
+
+    return (
+      <Box
+        ref={ref}
+        role={isHeadCell ? 'columnheader' : 'cell'}
+        __css={{
+          px: 1,
+          height: rem(36),
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          fontWeight: isHeadCell ? 'medium' : undefined,
+          color: 'on.surface',
+          display: 'flex',
+          alignItems: 'center',
+          ...__css,
+        }}
+        {...rest}
+      >
+        {children}
+      </Box>
+    );
+  }
+);