@basic-ui/material 1.0.0-alpha.45 → 1.0.0-alpha.47

package/src/Box/Box.tsx

@@ -1,127 +1,127 @@
-import type { ElementType, FC, HTMLAttributes, RefAttributes } from 'react';
-import { forwardRef } from 'react';
-import type { CSSObject } from '@emotion/react';
-import styled from '@emotion/styled';
-import type {
-  SpaceProps,
-  LayoutProps,
-  TypographyProps,
-  ColorProps,
-  FlexboxProps,
-  BorderProps,
-  GridProps,
-  BackgroundProps,
-  PositionProps,
-  ShadowProps,
-  ResponsiveValue,
-} from 'styled-system';
-import {
-  compose,
-  space,
-  layout,
-  typography,
-  color,
-  flexbox,
-  border,
-  grid,
-  background,
-  position,
-  shadow,
-} from 'styled-system';
-import type {
-  SystemStyleObject,
-  ResponsiveStyleValue,
-} from '@styled-system/css';
-import { css, get } from '@styled-system/css';
-import shouldForwardProp from '@styled-system/should-forward-prop';
-
-import type { Theme } from '../theme';
-import { useTheme } from '../theme';
-
-export type SxStyleProp =
-  | SystemStyleObject
-  | Record<
-      string,
-      | SystemStyleObject
-      | ResponsiveStyleValue<number | string>
-      | Record<
-          string,
-          SystemStyleObject | ResponsiveStyleValue<number | string>
-        >
-    >;
-
-export interface BaseProps {
-  as?: ElementType<any>;
-  sx?: SxStyleProp;
-  // css?: CSSObject | ((props: { theme: Theme }) => CSSObject);
-  __css?: SxStyleProp;
-  variant?: ResponsiveValue<string>;
-  tx?: string;
-  theme: Theme;
-}
-export const sx = ({ theme, sx }: BaseProps) => css(sx)(theme) as CSSObject;
-export const base = ({ theme, __css }: BaseProps) =>
-  css(__css)(theme) as CSSObject;
-export const variant = ({
-  theme,
-  variant = 'default',
-  tx = 'variants',
-}: BaseProps) =>
-  css(get(theme, tx + '.' + variant, get(theme, variant as any)))(
-    theme
-  ) as CSSObject;
-
-type KnownBoxProps = BaseProps &
-  SpaceProps &
-  LayoutProps &
-  TypographyProps &
-  ColorProps &
-  FlexboxProps &
-  BorderProps &
-  GridProps &
-  BackgroundProps &
-  PositionProps &
-  ShadowProps & { zIndex?: number | string };
-
-export type BoxProps<
-  H = HTMLDivElement,
-  Attr extends HTMLAttributes<H> = HTMLAttributes<H>
-> = Omit<Attr, keyof KnownBoxProps> & Partial<KnownBoxProps> & RefAttributes<H>;
-
-const BoxBase = styled('div' as unknown as FC, {
-  shouldForwardProp,
-})<BoxProps<HTMLDivElement>>(
-  {
-    boxSizing: 'border-box',
-    margin: 0,
-    minWidth: 0,
-  },
-  base,
-  variant,
-  sx,
-  (props: any) => props.css,
-  compose(
-    space,
-    layout,
-    typography,
-    color,
-    flexbox,
-    border,
-    grid,
-    background,
-    position,
-    shadow
-  )
-);
-
-export const Box: <
-  Props = BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
->(
-  props: Props
-) => JSX.Element = forwardRef<HTMLDivElement, BoxProps<HTMLDivElement>>(
-  function Box(props, forwardedRef) {
-    const theme = useTheme();
-
-    return <BoxBase ref={forwardedRef} theme={theme} {...props} />;
-  }
-) as any;
+import type { ElementType, FC, HTMLAttributes, RefAttributes } from 'react';
+import { forwardRef } from 'react';
+import type { CSSObject } from '@emotion/react';
+import styled from '@emotion/styled';
+import type {
+  SpaceProps,
+  LayoutProps,
+  TypographyProps,
+  ColorProps,
+  FlexboxProps,
+  BorderProps,
+  GridProps,
+  BackgroundProps,
+  PositionProps,
+  ShadowProps,
+  ResponsiveValue,
+} from 'styled-system';
+import {
+  compose,
+  space,
+  layout,
+  typography,
+  color,
+  flexbox,
+  border,
+  grid,
+  background,
+  position,
+  shadow,
+} from 'styled-system';
+import type {
+  SystemStyleObject,
+  ResponsiveStyleValue,
+} from '@styled-system/css';
+import { css, get } from '@styled-system/css';
+import shouldForwardProp from '@styled-system/should-forward-prop';
+
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
+
+export type SxStyleProp =
+  | SystemStyleObject
+  | Record<
+      string,
+      | SystemStyleObject
+      | ResponsiveStyleValue<number | string>
+      | Record<
+          string,
+          SystemStyleObject | ResponsiveStyleValue<number | string>
+        >
+    >;
+
+export interface BaseProps {
+  as?: ElementType<any>;
+  sx?: SxStyleProp;
+  // css?: CSSObject | ((props: { theme: Theme }) => CSSObject);
+  __css?: SxStyleProp;
+  variant?: ResponsiveValue<string>;
+  tx?: string;
+  theme: Theme;
+}
+export const sx = ({ theme, sx }: BaseProps) => css(sx)(theme) as CSSObject;
+export const base = ({ theme, __css }: BaseProps) =>
+  css(__css)(theme) as CSSObject;
+export const variant = ({
+  theme,
+  variant = 'default',
+  tx = 'variants',
+}: BaseProps) =>
+  css(get(theme, tx + '.' + variant, get(theme, variant as any)))(
+    theme
+  ) as CSSObject;
+
+type KnownBoxProps = BaseProps &
+  SpaceProps &
+  LayoutProps &
+  TypographyProps &
+  ColorProps &
+  FlexboxProps &
+  BorderProps &
+  GridProps &
+  BackgroundProps &
+  PositionProps &
+  ShadowProps & { zIndex?: number | string };
+
+export type BoxProps<
+  H = HTMLDivElement,
+  Attr extends HTMLAttributes<H> = HTMLAttributes<H>
+> = Omit<Attr, keyof KnownBoxProps> & Partial<KnownBoxProps> & RefAttributes<H>;
+
+const BoxBase = styled('div' as unknown as FC, {
+  shouldForwardProp,
+})<BoxProps<HTMLDivElement>>(
+  {
+    boxSizing: 'border-box',
+    margin: 0,
+    minWidth: 0,
+  },
+  base,
+  variant,
+  sx,
+  (props: any) => props.css,
+  compose(
+    space,
+    layout,
+    typography,
+    color,
+    flexbox,
+    border,
+    grid,
+    background,
+    position,
+    shadow
+  )
+);
+
+export const Box: <
+  Props = BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
+>(
+  props: Props
+) => JSX.Element = forwardRef<HTMLDivElement, BoxProps<HTMLDivElement>>(
+  function Box(props, forwardedRef) {
+    const theme = useTheme();
+
+    return <BoxBase ref={forwardedRef} theme={theme} {...props} />;
+  }
+) as any;

package/src/Box/index.ts

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

package/src/Button/ButtonGroup.story.tsx

@@ -6,49 +6,74 @@ 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 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>
   );
 };

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/FloatingActionButton.tsx

@@ -1,9 +1,9 @@
-import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
-import type { Theme } from '../theme';
-
-export function getRippleProperties(theme: Theme) {
-  return {
-    ...filledButtonGetProperties(theme),
-    rippleEnabled: true,
-  };
-}
+import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
+import type { Theme } from '../theme';
+
+export function getRippleProperties(theme: Theme) {
+  return {
+    ...filledButtonGetProperties(theme),
+    rippleEnabled: true,
+  };
+}

package/src/Button/OutlinedButton.tsx

@@ -39,8 +39,23 @@ export const OutlinedButton = styled(TransparentButton)(
           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/SpinnerButton.story.tsx

@@ -1,91 +1,91 @@
-import type { FC } from 'react';
-import { useState } from 'react';
-import type { SpinnerProps, SpinnerButtonProps } from '@basic-ui/core';
-import {
-  Spinner as SpinnerBase,
-  SpinnerButton as SpinnerButtonBase,
-} from '@basic-ui/core';
-
-import { Button, Box, Text } from '../';
-import { alpha } from '../color';
-import { useTheme } from '../theme';
-import type { BoxProps } from '../Box';
-
-export default {
-  title: 'components/SpinnerButton',
-};
-
-const Spinner: FC<Omit<BoxProps, 'onChange'> & SpinnerProps> =
-  SpinnerBase as any;
-const SpinnerButton: FC<BoxProps & SpinnerButtonProps> =
-  SpinnerButtonBase as any;
-
-function AddIcon(props) {
-  return (
-    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor" />
-    </svg>
-  );
-}
-function RemoveIcon(props) {
-  return (
-    <svg viewBox="0 0 24 24" height={24} width={24} {...props}>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M19 13H5v-2h14v2z" fill="currentColor" />
-    </svg>
-  );
-}
-
-const Example = ({ vertical = false }) => {
-  const theme = useTheme();
-  const [value, setValue] = useState(0);
-  const size = 36;
-
-  return (
-    <Spinner
-      value={value}
-      minValue={0}
-      maxValue={5}
-      as={Box}
-      onChange={(e, value) => setValue(value)}
-      sx={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        flexDirection: vertical ? 'column-reverse' : 'row',
-        borderRadius: 'full',
-        '&:focus': {
-          outline: 'none',
-          boxShadow: `0px 0px 10px 0px ${alpha('primary', 0.6)(theme)}`,
-        },
-      }}
-    >
-      <SpinnerButton
-        type="previous"
-        as={Button}
-        variant="filled"
-        p={0}
-        width={size}
-        height={size}
-      >
-        <RemoveIcon />
-      </SpinnerButton>
-      <Text variant="body-medium" textAlign="center" width={size}>
-        {value}
-      </Text>
-      <SpinnerButton
-        type="next"
-        as={Button}
-        variant="filled"
-        p={0}
-        width={size}
-        height={size}
-      >
-        <AddIcon />
-      </SpinnerButton>
-    </Spinner>
-  );
-};
-
-export const Horizontal = () => <Example />;
-export const Vertical = () => <Example vertical={true} />;
+import type { FC } from 'react';
+import { useState } from 'react';
+import type { SpinnerProps, SpinnerButtonProps } from '@basic-ui/core';
+import {
+  Spinner as SpinnerBase,
+  SpinnerButton as SpinnerButtonBase,
+} from '@basic-ui/core';
+
+import { Button, Box, Text } from '../';
+import { alpha } from '../color';
+import { useTheme } from '../theme';
+import type { BoxProps } from '../Box';
+
+export default {
+  title: 'components/SpinnerButton',
+};
+
+const Spinner: FC<Omit<BoxProps, 'onChange'> & SpinnerProps> =
+  SpinnerBase as any;
+const SpinnerButton: FC<BoxProps & SpinnerButtonProps> =
+  SpinnerButtonBase as any;
+
+function AddIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor" />
+    </svg>
+  );
+}
+function RemoveIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" height={24} width={24} {...props}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19 13H5v-2h14v2z" fill="currentColor" />
+    </svg>
+  );
+}
+
+const Example = ({ vertical = false }) => {
+  const theme = useTheme();
+  const [value, setValue] = useState(0);
+  const size = 36;
+
+  return (
+    <Spinner
+      value={value}
+      minValue={0}
+      maxValue={5}
+      as={Box}
+      onChange={(e, value) => setValue(value)}
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        flexDirection: vertical ? 'column-reverse' : 'row',
+        borderRadius: 'full',
+        '&:focus': {
+          outline: 'none',
+          boxShadow: `0px 0px 10px 0px ${alpha('primary', 0.6)(theme)}`,
+        },
+      }}
+    >
+      <SpinnerButton
+        type="previous"
+        as={Button}
+        variant="filled"
+        p={0}
+        width={size}
+        height={size}
+      >
+        <RemoveIcon />
+      </SpinnerButton>
+      <Text variant="body-medium" textAlign="center" width={size}>
+        {value}
+      </Text>
+      <SpinnerButton
+        type="next"
+        as={Button}
+        variant="filled"
+        p={0}
+        width={size}
+        height={size}
+      >
+        <AddIcon />
+      </SpinnerButton>
+    </Spinner>
+  );
+};
+
+export const Horizontal = () => <Example />;
+export const Vertical = () => <Example vertical={true} />;

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),
         },
       },
     }