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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.44",
+  "version": "1.0.0-alpha.46",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.52",
+    "@basic-ui/core": "^0.0.53",
     "@basic-ui/dynamic-theme": "^0.0.11",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
@@ -62,5 +62,5 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "tailwindcss": "^3.0.0"
   },
-  "gitHead": "fc731d3f336d3dce8bcf3b6589d724883bc66c7a"
+  "gitHead": "006bc0e1e68809669136f96dc66f2e591bffbfb7"
 }

package/src/Alert/Alert.story.tsx

@@ -1,28 +1,28 @@
-import { Alert } from './';
-import { Link } from '../Link';
-// import './styles.css';
-
-export default {
-  title: 'Components/Alert',
-};
-
-export const Controlled = () => {
-  const color = ['primary', 'secondary', 'error'];
-  return (
-    <>
-      {color.map((c) => (
-        <Alert color={c} key={c} m={3}>
-          You can use{' '}
-          <Link
-            target="__blank"
-            rel="noopener noreferrer"
-            href="https://stripe.com/docs/connect/testing#account-numbers"
-          >
-            test accounts
-          </Link>{' '}
-          to simulate events and verify your integration.
-        </Alert>
-      ))}
-    </>
-  );
-};
+import { Alert } from './';
+import { Link } from '../Link';
+// import './styles.css';
+
+export default {
+  title: 'Components/Alert',
+};
+
+export const Controlled = () => {
+  const color = ['primary', 'secondary', 'error'];
+  return (
+    <>
+      {color.map((c) => (
+        <Alert color={c} key={c} m={3}>
+          You can use{' '}
+          <Link
+            target="__blank"
+            rel="noopener noreferrer"
+            href="https://stripe.com/docs/connect/testing#account-numbers"
+          >
+            test accounts
+          </Link>{' '}
+          to simulate events and verify your integration.
+        </Alert>
+      ))}
+    </>
+  );
+};

package/src/Alert/Alert.tsx

@@ -1,33 +1,33 @@
-import { rem } from 'polished';
-import { forwardRef } from 'react';
-
-import { alpha } from '../color';
-import type { TextProps } from '../Text';
-import { Text } from '../Text';
-
-export type AlertProps = TextProps & { color?: string };
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  props,
-  forwardedRef
-) {
-  const { as = 'div', color = 'secondary', __css, ...otherProps } = props;
-
-  return (
-    <Text
-      ref={forwardedRef}
-      as={as}
-      variant="body-medium"
-      __css={{
-        p: 3,
-        bg: alpha(color, 0.1),
-        borderRadius: 'extra-small',
-        borderColor: alpha(color, 0.2),
-        borderStyle: 'solid',
-        borderWidth: rem(1),
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import { rem } from 'polished';
+import { forwardRef } from 'react';
+
+import { alpha } from '../color';
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
+
+export type AlertProps = TextProps & { color?: string };
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  forwardedRef
+) {
+  const { as = 'div', color = 'secondary', __css, ...otherProps } = props;
+
+  return (
+    <Text
+      ref={forwardedRef}
+      as={as}
+      variant="body-medium"
+      __css={{
+        p: 3,
+        bg: alpha(color, 0.1),
+        borderRadius: 'extra-small',
+        borderColor: alpha(color, 0.2),
+        borderStyle: 'solid',
+        borderWidth: rem(1),
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/Button/ButtonGroup.story.tsx

@@ -1,106 +1,131 @@
-import { Box } from '../Box';
-import { Button } from './Button';
-import { ButtonGroup as BaseButtonGroup } from './ButtonGroup';
-
-export default { title: 'components/ButtonGroup' };
-
-const Example = () => {
-  return (
-    <Box sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}>
-      <BaseButtonGroup variant="text">
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="text">
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="text">
-        <Button>Hello</Button>
-        <Button disabled>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="filled">
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="filled">
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="filled">
-        <Button>Hello</Button>
-        <Button disabled>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="outlined">
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="outlined">
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="outlined">
-        <Button>Hello</Button>
-        <Button disabled>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-    </Box>
-  );
-};
-
-const Pressable = () => {
-  return (
-    <Box sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}>
-      <BaseButtonGroup variant="text">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="text">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="text">
-        <Button aria-pressed="true">Hello</Button>
-        <Button disabled>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="filled">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="filled">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="filled">
-        <Button aria-pressed="true">Hello</Button>
-        <Button disabled>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="outlined">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="outlined">
-        <Button aria-pressed="true">Hello</Button>
-        <Button>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-      <BaseButtonGroup variant="outlined">
-        <Button aria-pressed="true">Hello</Button>
-        <Button disabled>Hello</Button>
-        <Button>Hello</Button>
-      </BaseButtonGroup>
-    </Box>
-  );
-};
-
-export const ButtonGroup = () => <Example />;
-export const ButtonGroupPressable = () => <Pressable />;
+import { Box } from '../Box';
+import { Button } from './Button';
+import { ButtonGroup as BaseButtonGroup } from './ButtonGroup';
+
+export default { title: 'components/ButtonGroup' };
+
+const Example = () => {
+  return (
+    <Box sx={{ gap: 24, flexDirection: 'row', display: 'flex' }}>
+      {(['text', 'filled', 'outlined'] as const).map((variant) => (
+        <Box
+          sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}
+          key={variant}
+        >
+          <BaseButtonGroup variant={variant}>
+            <Button>Hello</Button>
+            <Button>Hello</Button>
+          </BaseButtonGroup>
+
+          <BaseButtonGroup variant={variant}>
+            <Button disabled>Hello</Button>
+            <Button>Hello</Button>
+          </BaseButtonGroup>
+          <BaseButtonGroup variant={variant}>
+            <Button>Hello</Button>
+            <Button disabled>Hello</Button>
+          </BaseButtonGroup>
+          <BaseButtonGroup variant={variant}>
+            <Button disabled>Hello</Button>
+            <Button disabled>Hello</Button>
+          </BaseButtonGroup>
+
+          <BaseButtonGroup variant={variant}>
+            <Button>Hello</Button>
+            <Button>Hello</Button>
+            <Button>Hello</Button>
+          </BaseButtonGroup>
+
+          <BaseButtonGroup variant={variant}>
+            <Button disabled>Hello</Button>
+            <Button disabled>Hello</Button>
+            <Button disabled>Hello</Button>
+          </BaseButtonGroup>
+
+          <BaseButtonGroup variant={variant}>
+            <Button disabled>Hello</Button>
+            <Button>Hello</Button>
+            <Button>Hello</Button>
+          </BaseButtonGroup>
+          <BaseButtonGroup variant={variant}>
+            <Button>Hello</Button>
+            <Button disabled>Hello</Button>
+            <Button>Hello</Button>
+          </BaseButtonGroup>
+          <BaseButtonGroup variant={variant}>
+            <Button>Hello</Button>
+            <Button>Hello</Button>
+            <Button disabled>Hello</Button>
+          </BaseButtonGroup>
+          <BaseButtonGroup variant={variant}>
+            <Button>Hello</Button>
+            <Button disabled>Hello</Button>
+            <Button disabled>Hello</Button>
+          </BaseButtonGroup>
+          <BaseButtonGroup variant={variant}>
+            <Button disabled>Hello</Button>
+            <Button>Hello</Button>
+            <Button disabled>Hello</Button>
+          </BaseButtonGroup>
+          <BaseButtonGroup variant={variant}>
+            <Button disabled>Hello</Button>
+            <Button disabled>Hello</Button>
+            <Button>Hello</Button>
+          </BaseButtonGroup>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+const Pressable = () => {
+  return (
+    <Box sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}>
+      <BaseButtonGroup variant="text">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button aria-pressed="true">Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button aria-pressed="true">Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button aria-pressed="true">Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+    </Box>
+  );
+};
+
+export const ButtonGroup = () => <Example />;
+export const ButtonGroupPressable = () => <Pressable />;

package/src/Button/ButtonGroup.tsx

@@ -1,35 +1,35 @@
-import { forwardRef, useMemo } from 'react';
-
-import type { ButtonProps } from './Button';
-import type { ButtonGroupContextProps } from './context';
-import { ButtonGroupContext } from './context';
-
-export type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;
-
-export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
-  function ButtonGroup(props, forwardedRef) {
-    const {
-      as: Comp = 'div',
-      variant = 'text',
-      direction = 'row',
-      ...otherProps
-    } = props;
-
-    const value: ButtonGroupContextProps = useMemo(
-      () => ({ direction, variant }),
-      [direction, variant]
-    );
-
-    return (
-      <ButtonGroupContext.Provider value={value}>
-        <Comp
-          ref={forwardedRef}
-          role="group"
-          data-button-group=""
-          data-button-group-direction={direction}
-          {...otherProps}
-        />
-      </ButtonGroupContext.Provider>
-    );
-  }
-);
+import { forwardRef, useMemo } from 'react';
+
+import type { ButtonProps } from './Button';
+import type { ButtonGroupContextProps } from './context';
+import { ButtonGroupContext } from './context';
+
+export type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      variant = 'text',
+      direction = 'row',
+      ...otherProps
+    } = props;
+
+    const value: ButtonGroupContextProps = useMemo(
+      () => ({ direction, variant }),
+      [direction, variant]
+    );
+
+    return (
+      <ButtonGroupContext.Provider value={value}>
+        <Comp
+          ref={forwardedRef}
+          role="group"
+          data-button-group=""
+          data-button-group-direction={direction}
+          {...otherProps}
+        />
+      </ButtonGroupContext.Provider>
+    );
+  }
+);

package/src/Button/FilledButton.tsx

@@ -53,8 +53,23 @@ export const FilledButton = styled(BaseButton)(
           borderLeftStyle: 'solid',
           borderLeftWidth: rem(1),
         },
+        // Handling the border between enabled/disabled buttons
+        ':not(:disabled):has(+ :disabled)': {
+          borderRightWidth: rem(1),
+          borderRightStyle: 'solid',
+        },
+        ':disabled + :not(:disabled)': {
+          borderLeftWidth: rem(1),
+          borderLeftStyle: 'solid',
+        },
+        ':not(:disabled) + :disabled': {
+          borderLeftWidth: rem(0),
+        },
+        ':disabled:has(+ :not(:disabled))': {
+          borderRightWidth: rem(0),
+        },
         ':last-of-type:nth-of-type(2)': {
-          borderLeftWidth: 0,
+          borderLeftWidth: rem(0),
         },
       },
     }

package/src/Button/OutlinedButton.tsx

@@ -1,47 +1,62 @@
-import styled from '@emotion/styled';
-import { css } from '@styled-system/css';
-import { rem } from 'polished';
-
-import { alpha } from '../color';
-import { TransparentButton } from './TransparentButton';
-
-export const OutlinedButton = styled(TransparentButton)(
-  css({
-    borderStyle: 'solid',
-    borderWidth: rem(1),
-    borderColor: 'outline',
-    boxShadow: 0,
-    '&:focus,:&active,:&hover': { boxShadow: 0 },
-    '&:focus-visible,&:active': {
-      borderColor: 'currentColor',
-    },
-    '&:disabled': {
-      color: alpha('on.surface', 0.38),
-      borderColor: alpha('outline', 0.12),
-      cursor: 'default',
-    },
-  }),
-  ({ isGroupedButton = false }) =>
-    isGroupedButton && {
-      '[data-button-group=""] &': {
-        ':first-of-type': {
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0,
-        },
-        ':not(:first-of-type):not(:last-of-type)': {
-          borderRadius: 0,
-          borderRightWidth: 0,
-          borderLeftWidth: 0,
-        },
-        ':last-of-type': {
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-          borderLeftStyle: 'solid',
-          borderLeftWidth: rem(1),
-        },
-        ':last-of-type:nth-of-type(2)': {
-          borderLeftWidth: 0,
-        },
-      },
-    }
-);
+import styled from '@emotion/styled';
+import { css } from '@styled-system/css';
+import { rem } from 'polished';
+
+import { alpha } from '../color';
+import { TransparentButton } from './TransparentButton';
+
+export const OutlinedButton = styled(TransparentButton)(
+  css({
+    borderStyle: 'solid',
+    borderWidth: rem(1),
+    borderColor: 'outline',
+    boxShadow: 0,
+    '&:focus,:&active,:&hover': { boxShadow: 0 },
+    '&:focus-visible,&:active': {
+      borderColor: 'currentColor',
+    },
+    '&:disabled': {
+      color: alpha('on.surface', 0.38),
+      borderColor: alpha('outline', 0.12),
+      cursor: 'default',
+    },
+  }),
+  ({ isGroupedButton = false }) =>
+    isGroupedButton && {
+      '[data-button-group=""] &': {
+        ':first-of-type': {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+        },
+        ':not(:first-of-type):not(:last-of-type)': {
+          borderRadius: 0,
+          borderRightWidth: 0,
+          borderLeftWidth: 0,
+        },
+        ':last-of-type': {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          borderLeftStyle: 'solid',
+          borderLeftWidth: rem(1),
+        },
+        // Handling the border between enabled/disabled buttons
+        ':not(:disabled):has(+ :disabled)': {
+          borderRightWidth: rem(1),
+          borderRightStyle: 'solid',
+        },
+        ':disabled + :not(:disabled)': {
+          borderLeftWidth: rem(1),
+          borderLeftStyle: 'solid',
+        },
+        ':not(:disabled) + :disabled': {
+          borderLeftWidth: rem(0),
+        },
+        ':disabled:has(+ :not(:disabled))': {
+          borderRightWidth: rem(0),
+        },
+        ':last-of-type:nth-of-type(2)': {
+          borderLeftWidth: rem(0),
+        },
+      },
+    }
+);

package/src/Button/TransparentButton.tsx

@@ -40,8 +40,23 @@ export const TransparentButton = styled(BaseButton)(
           borderLeftStyle: 'solid',
           borderLeftWidth: rem(1),
         },
+        // Handling the border between enabled/disabled buttons
+        ':not(:disabled):has(+ :disabled)': {
+          borderRightWidth: rem(1),
+          borderRightStyle: 'solid',
+        },
+        ':disabled + :not(:disabled)': {
+          borderLeftWidth: rem(1),
+          borderLeftStyle: 'solid',
+        },
+        ':not(:disabled) + :disabled': {
+          borderLeftWidth: rem(0),
+        },
+        ':disabled:has(+ :not(:disabled))': {
+          borderRightWidth: rem(0),
+        },
         ':last-of-type:nth-of-type(2)': {
-          borderLeftWidth: 0,
+          borderLeftWidth: rem(0),
         },
       },
     }