@basic-ui/material 1.0.0-alpha.52 → 1.0.0-alpha.54

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: any) {
+  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: any) {
+  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/SplitButton.story.tsx

@@ -0,0 +1,110 @@
+import type { StoryObj } from '@storybook/react-vite';
+
+import { ButtonGroup } from './ButtonGroup';
+import { SplitButton, SplitMenuButton } from './SplitButton';
+import { Box } from '../Box';
+import { Divider } from '../Divider';
+import { Menu, MenuPopover, MenuList, MenuItem } from '../Menu';
+
+export default { title: 'components/Button' };
+
+const colors = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'error',
+  'primary-container',
+  'secondary-container',
+  'tertiary-container',
+  'error-container',
+] as const;
+
+type Color = typeof colors[number];
+type ControlShape = 'default' | 'rounded' | 'square';
+type ControlSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+const ArrowDownIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width={24}
+    height={24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 96 960 960"
+    {...props}
+  >
+    <path d="M480 696 280 497h400L480 696Z" fill="currentColor" />
+  </svg>
+);
+
+export const SplitButtonExample: StoryObj = {
+  name: 'Split Button',
+  render: ({
+    color = 'primary',
+    shape = 'default',
+    size = 'default',
+  }: {
+    color?: Color;
+    shape?: ControlShape;
+    size?: ControlSize;
+  }) => {
+    const resolvedShape = shape === 'default' ? undefined : shape;
+    const resolvedSize = size === 'default' ? undefined : size;
+
+    return (
+      <Box display="flex" flexDirection="row" sx={{ gap: 4 }}>
+        {(['text', 'filled', 'outlined'] as const).map((buttonVariant) => (
+          <Box
+            display="flex"
+            flexDirection="column"
+            sx={{ gap: 4 }}
+            key={buttonVariant}
+          >
+            <ButtonGroup variant="split">
+              <SplitButton
+                variant={buttonVariant}
+                size={resolvedSize}
+                shape={resolvedShape}
+                color={color}
+              >
+                Send tip
+              </SplitButton>
+              <Menu>
+                <SplitMenuButton
+                  variant={buttonVariant}
+                  size={resolvedSize}
+                  shape={resolvedShape}
+                  color={color}
+                >
+                  <ArrowDownIcon />
+                </SplitMenuButton>
+                <MenuPopover>
+                  <MenuList>
+                    <MenuItem>Standard</MenuItem>
+                    <MenuItem>Priority</MenuItem>
+                    <MenuItem disabled={true}>Paused</MenuItem>
+                    <Divider />
+                    <MenuItem>Custom</MenuItem>
+                  </MenuList>
+                </MenuPopover>
+              </Menu>
+            </ButtonGroup>
+          </Box>
+        ))}
+      </Box>
+    );
+  },
+};
+
+SplitButtonExample.args = {
+  color: 'primary',
+  shape: 'default',
+  size: 'default',
+};
+SplitButtonExample.argTypes = {
+  color: { control: 'select', options: colors },
+  shape: { control: 'inline-radio', options: ['default', 'rounded', 'square'] },
+  size: {
+    control: 'inline-radio',
+    options: ['default', 'xs', 'sm', 'md', 'lg', 'xl'],
+  },
+};

package/src/Button/SplitButton.tsx

@@ -0,0 +1,40 @@
+import { forwardRef } from 'react';
+import { MenuButton as MenuButtonCore } from '@basic-ui/core';
+import type { MenuButtonProps as MenuButtonPropsCore } from '@basic-ui/core';
+
+import { Button, type ButtonProps } from './Button';
+import { ButtonGroup, type ButtonGroupProps } from './ButtonGroup';
+
+export type SplitButtonGroupProps = ButtonGroupProps;
+
+export const SplitButtonGroup = forwardRef<
+  HTMLDivElement,
+  SplitButtonGroupProps
+>(function SplitButtonGroup(props, ref) {
+  return <ButtonGroup ref={ref} variant="split" {...props} />;
+});
+
+export type SplitButtonProps = ButtonProps;
+
+export const SplitButton = forwardRef<HTMLButtonElement, SplitButtonProps>(
+  function SplitButton(props, ref) {
+    return <Button ref={ref} {...props} />;
+  }
+);
+
+export type SplitMenuButtonProps = ButtonProps & MenuButtonPropsCore;
+
+export const SplitMenuButton = forwardRef<
+  HTMLButtonElement,
+  SplitMenuButtonProps
+>(function SplitMenuButton({ as = 'button', ...props }, ref) {
+  return (
+    <MenuButtonCore
+      as={Button}
+      innerAs={as}
+      ref={ref}
+      data-split-menu-button=""
+      {...props}
+    />
+  );
+});

package/src/Button/TransparentButton.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { get, css } from '@styled-system/css';
-import { rem } from 'polished';
 
 import { BaseButton } from './BaseButton';
 import type { Theme } from '../theme';
@@ -18,48 +17,7 @@ export const TransparentButton = styled(BaseButton)(
       '&:focus-visible': {
         outline: 'none',
       },
-    }),
-  ({ theme, color = 'primary', isGroupedButton = false }) =>
-    isGroupedButton && {
-      '[data-button-group=""] &': {
-        borderColor:
-          get(theme, `colors.${String(color)}`) ||
-          (typeof color === 'string' ? color : undefined),
-        ':first-of-type': {
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0,
-          borderRightStyle: 'solid',
-          borderRightWidth: rem(1),
-        },
-        ':not(:first-of-type):not(:last-of-type)': {
-          borderRadius: 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),
-        },
-      },
-    }
+    })
 );
 
 export function getRippleProperties(theme: Theme) {

package/src/Button/context.tsx

@@ -1,17 +1,19 @@
-import { createContext, useContext } from 'react';
-
-import type { ButtonProps } from './Button';
-
-// ButtonGroup Component
-export type ButtonGroupContextProps = {
-  variant?: ButtonProps['variant'];
-  direction?: 'row' | 'column';
-};
-
-export const ButtonGroupContext = createContext<ButtonGroupContextProps | null>(
-  null
-);
-ButtonGroupContext.displayName = 'ButtonGroupContext';
-
-export const useButtonGroupContext = (): ButtonGroupContextProps | null =>
-  useContext(ButtonGroupContext);
+import { createContext, useContext } from 'react';
+
+import type { ButtonVariants } from './Button';
+
+// ButtonGroup Component
+export type ButtonGroupContextProps = {
+  variant?: 'standard' | 'connected' | 'split';
+  buttonVariant?: ButtonVariants;
+  direction?: 'row' | 'column';
+  connected?: boolean;
+};
+
+export const ButtonGroupContext = createContext<ButtonGroupContextProps | null>(
+  null
+);
+ButtonGroupContext.displayName = 'ButtonGroupContext';
+
+export const useButtonGroupContext = (): ButtonGroupContextProps | null =>
+  useContext(ButtonGroupContext);

package/src/Button/index.ts

@@ -1,2 +1,3 @@
-export * from './Button';
-export * from './ButtonGroup';
+export * from './Button';
+export * from './ButtonGroup';
+export * from './SplitButton';