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

package/src/Button/OutlinedButton.tsx

@@ -1,47 +1,47 @@
-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),
+        },
+        ':last-of-type:nth-of-type(2)': {
+          borderLeftWidth: 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/context.tsx

@@ -1,17 +1,17 @@
-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 { 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);

package/src/Button/index.ts

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

package/src/CheckBox/CheckBox.story.tsx

@@ -1,155 +1,155 @@
-import { useState, useRef } from 'react';
-import { keyframes } from '@emotion/react';
-import type { Keyframes } from '@emotion/serialize';
-
-import { CheckBox, Box, EASING_STANDARD } from '../';
-
-export default {
-  title: 'components/CheckBox',
-};
-
-const HeartOutline = (props) => {
-  return (
-    <svg height={24} viewBox="0 0 24 24" width={24} {...props}>
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path
-        d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-const HeartFilled = (props) => {
-  return (
-    <svg height={24} viewBox="0 0 24 24" width={24} {...props}>
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path
-        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-const settingIn: Keyframes = keyframes({
-  '0%': {
-    transform: `scale(1)`,
-  },
-  '50%': {
-    transform: 'scale(1.2)',
-  },
-  '100%': {
-    transform: `scale(1)`,
-  },
-});
-
-const settingOut: Keyframes = keyframes({
-  '0%': {
-    transform: `scale(1)`,
-  },
-  '50%': {
-    transform: 'scale(0.8)',
-  },
-  '100%': {
-    transform: `scale(1)`,
-  },
-});
-
-const HeartCheckBoxIcon = (props) => {
-  const animation = useRef<Keyframes | undefined>(undefined);
-  const lastWasChecked = useRef(props.checked);
-
-  if (props.checked !== lastWasChecked.current) {
-    lastWasChecked.current = props.checked;
-    animation.current = props.checked ? settingIn : settingOut;
-  }
-
-  return (
-    <Box
-      __css={{
-        opacity: props.opacity,
-        color: props.borderColor,
-        animation: animation.current
-          ? `${animation.current} .25s ${EASING_STANDARD}`
-          : undefined,
-        translate: 'scale(1)',
-        '& > svg': {
-          display: 'block',
-        },
-      }}
-    >
-      {props.checked ? <HeartFilled /> : <HeartOutline />}
-    </Box>
-  );
-};
-
-function ThreeStates() {
-  const [state, setState] = useState<boolean | 'mixed'>(false);
-  const prevState = useRef(false);
-
-  function onChange() {
-    switch (state) {
-      case false:
-        prevState.current = false;
-        setState('mixed');
-        break;
-      case 'mixed':
-        setState(prevState.current ? false : true);
-        break;
-      case true:
-        prevState.current = true;
-        setState('mixed');
-        break;
-    }
-  }
-
-  return (
-    <CheckBox
-      checked={state !== false}
-      onChange={onChange}
-      indeterminate={state === 'mixed'}
-    >
-      Three states
-    </CheckBox>
-  );
-}
-
-const Example = () => {
-  return (
-    <>
-      <div>
-        <CheckBox indeterminate={true}>Indeterminate</CheckBox>
-      </div>
-      <div>
-        <CheckBox>Checkbox</CheckBox>
-      </div>
-      <div>
-        <CheckBox icon={<HeartCheckBoxIcon />}>Checkbox</CheckBox>
-      </div>
-      <div>
-        <CheckBox disabled>Disabled</CheckBox>
-      </div>
-      <div>
-        <CheckBox disabled defaultChecked={true}>
-          Disabled
-        </CheckBox>
-      </div>
-      <div>
-        <ThreeStates />
-      </div>
-
-      <Box display="flex">
-        <CheckBox indeterminate={true}>Indeterminate</CheckBox>
-        <CheckBox>Checkbox</CheckBox>
-        <CheckBox icon={<HeartCheckBoxIcon />}>Checkbox</CheckBox>
-        <CheckBox disabled>Disabled</CheckBox>
-        <CheckBox disabled defaultChecked={true}>
-          Disabled
-        </CheckBox>
-      </Box>
-    </>
-  );
-};
-
-export const Controlled = () => <Example />;
+import { useState, useRef } from 'react';
+import { keyframes } from '@emotion/react';
+import type { Keyframes } from '@emotion/serialize';
+
+import { CheckBox, Box, EASING_STANDARD } from '../';
+
+export default {
+  title: 'components/CheckBox',
+};
+
+const HeartOutline = (props) => {
+  return (
+    <svg height={24} viewBox="0 0 24 24" width={24} {...props}>
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path
+        d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+const HeartFilled = (props) => {
+  return (
+    <svg height={24} viewBox="0 0 24 24" width={24} {...props}>
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path
+        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+const settingIn: Keyframes = keyframes({
+  '0%': {
+    transform: `scale(1)`,
+  },
+  '50%': {
+    transform: 'scale(1.2)',
+  },
+  '100%': {
+    transform: `scale(1)`,
+  },
+});
+
+const settingOut: Keyframes = keyframes({
+  '0%': {
+    transform: `scale(1)`,
+  },
+  '50%': {
+    transform: 'scale(0.8)',
+  },
+  '100%': {
+    transform: `scale(1)`,
+  },
+});
+
+const HeartCheckBoxIcon = (props) => {
+  const animation = useRef<Keyframes | undefined>(undefined);
+  const lastWasChecked = useRef(props.checked);
+
+  if (props.checked !== lastWasChecked.current) {
+    lastWasChecked.current = props.checked;
+    animation.current = props.checked ? settingIn : settingOut;
+  }
+
+  return (
+    <Box
+      __css={{
+        opacity: props.opacity,
+        color: props.borderColor,
+        animation: animation.current
+          ? `${animation.current} .25s ${EASING_STANDARD}`
+          : undefined,
+        translate: 'scale(1)',
+        '& > svg': {
+          display: 'block',
+        },
+      }}
+    >
+      {props.checked ? <HeartFilled /> : <HeartOutline />}
+    </Box>
+  );
+};
+
+function ThreeStates() {
+  const [state, setState] = useState<boolean | 'mixed'>(false);
+  const prevState = useRef(false);
+
+  function onChange() {
+    switch (state) {
+      case false:
+        prevState.current = false;
+        setState('mixed');
+        break;
+      case 'mixed':
+        setState(prevState.current ? false : true);
+        break;
+      case true:
+        prevState.current = true;
+        setState('mixed');
+        break;
+    }
+  }
+
+  return (
+    <CheckBox
+      checked={state !== false}
+      onChange={onChange}
+      indeterminate={state === 'mixed'}
+    >
+      Three states
+    </CheckBox>
+  );
+}
+
+const Example = () => {
+  return (
+    <>
+      <div>
+        <CheckBox indeterminate={true}>Indeterminate</CheckBox>
+      </div>
+      <div>
+        <CheckBox>Checkbox</CheckBox>
+      </div>
+      <div>
+        <CheckBox icon={<HeartCheckBoxIcon />}>Checkbox</CheckBox>
+      </div>
+      <div>
+        <CheckBox disabled>Disabled</CheckBox>
+      </div>
+      <div>
+        <CheckBox disabled defaultChecked={true}>
+          Disabled
+        </CheckBox>
+      </div>
+      <div>
+        <ThreeStates />
+      </div>
+
+      <Box display="flex">
+        <CheckBox indeterminate={true}>Indeterminate</CheckBox>
+        <CheckBox>Checkbox</CheckBox>
+        <CheckBox icon={<HeartCheckBoxIcon />}>Checkbox</CheckBox>
+        <CheckBox disabled>Disabled</CheckBox>
+        <CheckBox disabled defaultChecked={true}>
+          Disabled
+        </CheckBox>
+      </Box>
+    </>
+  );
+};
+
+export const Controlled = () => <Example />;