@basic-ui/material 1.0.0-alpha.42 → 1.0.0-alpha.44

package/src/Table/TableHead.tsx

@@ -1,31 +1,31 @@
-import { forwardRef } from 'react';
-import { rem } from 'polished';
-
-import { TableHeadProvider } from './context';
-import type { TableBodyProps } from './TableBody';
-import { TableBody } from './TableBody';
-import { mixColor } from '../color';
-
-export type TableHeadProps = TableBodyProps;
-
-export const TableHead = forwardRef<HTMLDivElement, TableHeadProps>(
-  (props, ref) => {
-    const { children, __css, ...rest } = props;
-
-    return (
-      <TableBody
-        ref={ref}
-        __css={{
-          borderBottomStyle: 'solid',
-          borderBottomWidth: rem(1),
-          borderBottomColor: 'surface-variant',
-          background: mixColor('surface', 'primary', 0.05),
-          ...__css,
-        }}
-        {...rest}
-      >
-        <TableHeadProvider value={true}>{children}</TableHeadProvider>
-      </TableBody>
-    );
-  }
-);
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import { TableHeadProvider } from './context';
+import type { TableBodyProps } from './TableBody';
+import { TableBody } from './TableBody';
+import { mixColor } from '../color';
+
+export type TableHeadProps = TableBodyProps;
+
+export const TableHead = forwardRef<HTMLDivElement, TableHeadProps>(
+  (props, ref) => {
+    const { children, __css, ...rest } = props;
+
+    return (
+      <TableBody
+        ref={ref}
+        __css={{
+          borderBottomStyle: 'solid',
+          borderBottomWidth: rem(1),
+          borderBottomColor: 'surface-variant',
+          background: mixColor('surface', 'primary', 0.05),
+          ...__css,
+        }}
+        {...rest}
+      >
+        <TableHeadProvider value={true}>{children}</TableHeadProvider>
+      </TableBody>
+    );
+  }
+);

package/src/Table/TableRow.tsx

@@ -1,38 +1,38 @@
-import { forwardRef } from 'react';
-import { rem } from 'polished';
-
-import type { TextProps } from '../Text';
-import { Text } from '../Text';
-
-export type TableRowProps = TextProps;
-
-export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(
-  (props, ref) => {
-    const { children, __css, ...rest } = props;
-
-    return (
-      <Text
-        ref={ref}
-        as="div"
-        role="row"
-        display="flex"
-        flexDirection="row"
-        width="100%"
-        variant="body-medium"
-        px={2}
-        __css={{
-          borderBottomStyle: 'solid',
-          borderBottomWidth: rem(1),
-          borderBottomColor: 'surface-variant',
-          '&:last-of-type': {
-            borderBottom: 'none',
-          },
-          ...__css,
-        }}
-        {...rest}
-      >
-        {children}
-      </Text>
-    );
-  }
-);
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
+
+export type TableRowProps = TextProps;
+
+export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(
+  (props, ref) => {
+    const { children, __css, ...rest } = props;
+
+    return (
+      <Text
+        ref={ref}
+        as="div"
+        role="row"
+        display="flex"
+        flexDirection="row"
+        width="100%"
+        variant="body-medium"
+        px={2}
+        __css={{
+          borderBottomStyle: 'solid',
+          borderBottomWidth: rem(1),
+          borderBottomColor: 'surface-variant',
+          '&:last-of-type': {
+            borderBottom: 'none',
+          },
+          ...__css,
+        }}
+        {...rest}
+      >
+        {children}
+      </Text>
+    );
+  }
+);

package/src/Table/context.ts

@@ -1,6 +1,6 @@
-import { createContext, useContext } from 'react';
-
-// TableHead Component
-const TableHeadContext = createContext<boolean>(false);
-export const { Provider: TableHeadProvider } = TableHeadContext;
-export const useTableHeadContext = () => useContext(TableHeadContext);
+import { createContext, useContext } from 'react';
+
+// TableHead Component
+const TableHeadContext = createContext<boolean>(false);
+export const { Provider: TableHeadProvider } = TableHeadContext;
+export const useTableHeadContext = () => useContext(TableHeadContext);

package/src/Table/index.ts

@@ -1,5 +1,5 @@
-export * from './Table';
-export * from './TableHead';
-export * from './TableBody';
-export * from './TableCell';
-export * from './TableRow';
+export * from './Table';
+export * from './TableHead';
+export * from './TableBody';
+export * from './TableCell';
+export * from './TableRow';

package/src/Text/LoremIpsum.tsx

@@ -1,18 +1,18 @@
-import type { FC } from 'react';
-
-import { Text } from '.';
-
-const phrase =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sem ut tincidunt eleifend. Cras eget sem nisi. Mauris at orci pretium, auctor ex non, vestibulum mauris. Etiam at nisi eu enim volutpat semper. Phasellus interdum tincidunt eleifend. Suspendisse potenti. Nulla dapibus felis in purus tristique pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
-  const phrases = [];
-  for (let i = 0; i < count; i++) {
-    phrases.push(
-      <Text variant="body-medium" key={`p-${i}`} m={'1.2em'}>
-        {phrase}
-      </Text>
-    );
-  }
-  return <>{phrases}</>;
-};
+import type { FC } from 'react';
+
+import { Text } from '.';
+
+const phrase =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sem ut tincidunt eleifend. Cras eget sem nisi. Mauris at orci pretium, auctor ex non, vestibulum mauris. Etiam at nisi eu enim volutpat semper. Phasellus interdum tincidunt eleifend. Suspendisse potenti. Nulla dapibus felis in purus tristique pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
+  const phrases = [];
+  for (let i = 0; i < count; i++) {
+    phrases.push(
+      <Text variant="body-medium" key={`p-${i}`} m={'1.2em'}>
+        {phrase}
+      </Text>
+    );
+  }
+  return <>{phrases}</>;
+};

package/src/Text/Text.story.tsx

@@ -1,75 +1,75 @@
-import { Text } from './';
-import { Box } from '../Box';
-// import './styles.css';
-
-export default {
-  title: 'components/Text',
-};
-
-const loremIpsum =
-  'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
-  'Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque,' +
-  'possimus nihil molestias sapiente necessitatibus dolor saepe inventore,' +
-  'soluta id accusantium voluptas beatae.';
-
-const Example = () => {
-  const variantMapping = {
-    'display-large': 'Display large',
-    'display-medium': 'Display medium',
-    'display-small': 'Display small',
-    'headline-large': 'Headline large',
-    'headline-medium': 'Headline medium',
-    'headline-small': 'Headline small',
-    'title-large': 'Title large',
-    'title-medium': 'Title medium',
-    'title-small': 'Title small',
-    'label-large': 'Label large',
-    'label-medium': 'Label medium',
-    'label-small': 'Label small',
-    'body-large': `Body large. ${loremIpsum}`,
-    'body-medium': `Body medium. ${loremIpsum}`,
-    'body-small': `Body small. ${loremIpsum}`,
-  };
-  const variants = Object.keys(variantMapping).map((v) => (
-    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
-      {variantMapping[v]}
-    </Text>
-  ));
-
-  return (
-    <Box bg="surface" p="2">
-      {variants}
-    </Box>
-  );
-};
-
-export const AllVariants = () => <Example />;
-
-export const LegacyVariants = () => {
-  const variantMapping = {
-    h1: 'Heading 1',
-    h2: 'Heading 2',
-    h3: 'Heading 3',
-    h4: 'Heading 4',
-    h5: 'Heading 5',
-    h6: 'Heading 6',
-    subtitle1: 'Subtitle 1',
-    subtitle2: 'Subtitle 2',
-    body1: `Body 1. ${loremIpsum}`,
-    body2: `Body 2. ${loremIpsum}`,
-    button: 'Button text',
-    caption: 'Caption text',
-    overline: 'Overline text',
-  };
-  const variants = Object.keys(variantMapping).map((v) => (
-    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
-      {variantMapping[v]}
-    </Text>
-  ));
-
-  return (
-    <Box bg="surface" p="2">
-      {variants}
-    </Box>
-  );
-};
+import { Text } from './';
+import { Box } from '../Box';
+// import './styles.css';
+
+export default {
+  title: 'components/Text',
+};
+
+const loremIpsum =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
+  'Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque,' +
+  'possimus nihil molestias sapiente necessitatibus dolor saepe inventore,' +
+  'soluta id accusantium voluptas beatae.';
+
+const Example = () => {
+  const variantMapping = {
+    'display-large': 'Display large',
+    'display-medium': 'Display medium',
+    'display-small': 'Display small',
+    'headline-large': 'Headline large',
+    'headline-medium': 'Headline medium',
+    'headline-small': 'Headline small',
+    'title-large': 'Title large',
+    'title-medium': 'Title medium',
+    'title-small': 'Title small',
+    'label-large': 'Label large',
+    'label-medium': 'Label medium',
+    'label-small': 'Label small',
+    'body-large': `Body large. ${loremIpsum}`,
+    'body-medium': `Body medium. ${loremIpsum}`,
+    'body-small': `Body small. ${loremIpsum}`,
+  };
+  const variants = Object.keys(variantMapping).map((v) => (
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
+      {variantMapping[v]}
+    </Text>
+  ));
+
+  return (
+    <Box bg="surface" p="2">
+      {variants}
+    </Box>
+  );
+};
+
+export const AllVariants = () => <Example />;
+
+export const LegacyVariants = () => {
+  const variantMapping = {
+    h1: 'Heading 1',
+    h2: 'Heading 2',
+    h3: 'Heading 3',
+    h4: 'Heading 4',
+    h5: 'Heading 5',
+    h6: 'Heading 6',
+    subtitle1: 'Subtitle 1',
+    subtitle2: 'Subtitle 2',
+    body1: `Body 1. ${loremIpsum}`,
+    body2: `Body 2. ${loremIpsum}`,
+    button: 'Button text',
+    caption: 'Caption text',
+    overline: 'Overline text',
+  };
+  const variants = Object.keys(variantMapping).map((v) => (
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
+      {variantMapping[v]}
+    </Text>
+  ));
+
+  return (
+    <Box bg="surface" p="2">
+      {variants}
+    </Box>
+  );
+};

package/src/Text/Text.tsx

@@ -1,84 +1,84 @@
-import type { ElementType } from 'react';
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-/**
- * @deprecated
- */
-export type LegacyTextVariants =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'subtitle1'
-  | 'subtitle2'
-  | 'body1'
-  | 'body2'
-  | 'caption'
-  | 'overline'
-  | 'button';
-
-export type TextVariants =
-  | 'display-large'
-  | 'display-medium'
-  | 'display-small'
-  | 'headline-large'
-  | 'headline-medium'
-  | 'headline-small'
-  | 'title-large'
-  | 'title-medium'
-  | 'title-small'
-  | 'label-large'
-  | 'label-medium'
-  | 'label-small'
-  | 'body-large'
-  | 'body-medium'
-  | 'body-small';
-
-export interface TextProps extends BoxProps {
-  variant?: LegacyTextVariants | TextVariants;
-}
-
-const mappings: { [key: string]: ElementType<any> } = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  subtitle1: 'h6',
-  subtitle2: 'h6',
-  body1: 'p',
-  body2: 'p',
-  caption: 'p',
-  overline: 'p',
-  button: 'p',
-};
-
-export const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
-  props,
-  forwardedRef
-) {
-  const { as, variant = 'body-medium', ...otherProps } = props;
-  let Comp = as;
-  if (!Comp) {
-    Comp = mappings[variant] || 'p';
-  }
-
-  return (
-    <Box
-      as={Comp}
-      ref={forwardedRef as any}
-      tx="text"
-      variant={variant}
-      __css={{
-        color: 'inherit',
-      }}
-      {...otherProps}
-    />
-  );
-});
+import type { ElementType } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+/**
+ * @deprecated
+ */
+export type LegacyTextVariants =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'subtitle1'
+  | 'subtitle2'
+  | 'body1'
+  | 'body2'
+  | 'caption'
+  | 'overline'
+  | 'button';
+
+export type TextVariants =
+  | 'display-large'
+  | 'display-medium'
+  | 'display-small'
+  | 'headline-large'
+  | 'headline-medium'
+  | 'headline-small'
+  | 'title-large'
+  | 'title-medium'
+  | 'title-small'
+  | 'label-large'
+  | 'label-medium'
+  | 'label-small'
+  | 'body-large'
+  | 'body-medium'
+  | 'body-small';
+
+export interface TextProps extends BoxProps {
+  variant?: LegacyTextVariants | TextVariants;
+}
+
+const mappings: { [key: string]: ElementType<any> } = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  subtitle1: 'h6',
+  subtitle2: 'h6',
+  body1: 'p',
+  body2: 'p',
+  caption: 'p',
+  overline: 'p',
+  button: 'p',
+};
+
+export const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
+  props,
+  forwardedRef
+) {
+  const { as, variant = 'body-medium', ...otherProps } = props;
+  let Comp = as;
+  if (!Comp) {
+    Comp = mappings[variant] || 'p';
+  }
+
+  return (
+    <Box
+      as={Comp}
+      ref={forwardedRef as any}
+      tx="text"
+      variant={variant}
+      __css={{
+        color: 'inherit',
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/Text/index.ts

@@ -1 +1 @@
-export * from './Text';
+export * from './Text';