@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.51

package/src/RadioButton/RadioButton.tsx

@@ -1,112 +1,112 @@
-import type { InputHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import type { RadioButtonProps as RadioButtonCoreProps } from '@basic-ui/core';
-import { RadioButton as RadioButtonCore } from '@basic-ui/core';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import type { RippleBoxProps } from '../Ripple';
-import { RippleBox } from '../Ripple';
-import { alpha } from '../color';
-import { RadioButtonIcon } from './RadioButtonIcon';
-import { useTheme } from '../theme';
-import {
-  SelectionControlLabel,
-  SelectionControlText,
-} from '../SelectionControl';
-
-export type RadioButtonProps = RadioButtonCoreProps;
-
-const RadioButtonInner = forwardRef<
-  HTMLInputElement,
-  RadioButtonProps &
-    BoxProps<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>
->(function RadioButtonInner(props, forwardedRef) {
-  const { innerAs: as, checked, disabled, __css, ...otherProps } = props;
-  const color = 'primary';
-  const theme = useTheme();
-
-  return (
-    <Box position="relative" display="inline-block" minWidth="auto">
-      <RippleBox<
-        RippleBoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>
-      >
-        as={as}
-        checked={checked}
-        ref={forwardedRef}
-        rippleColor={color}
-        baseOpacity={0}
-        hoverOpacity={0.04}
-        focusOpacity={0.12}
-        center={true}
-        disabled={disabled}
-        theme={theme}
-        __css={{
-          top: 0,
-          left: 0,
-          width: rem(40),
-          height: rem(40),
-          appearance: 'none',
-          ':focus': {
-            outline: 'none',
-          },
-          border: 'none',
-          borderRadius: 'full',
-          zIndex: 1,
-          position: 'absolute',
-          ...__css,
-        }}
-        {...otherProps}
-      />
-      <Box
-        __css={{
-          position: 'relative',
-          top: 0,
-          left: 0,
-          width: rem(40),
-          height: rem(40),
-          padding: rem(10),
-          lineHeight: 1,
-          color: checked ? 'primary' : alpha('on.surface', 0.54),
-          'input:disabled + &': {
-            color: alpha('on.surface', 0.38),
-          },
-        }}
-        role="presentation"
-        aria-hidden="true"
-      >
-        <RadioButtonIcon checked={checked} disabled={disabled} />
-      </Box>
-    </Box>
-  );
-});
-
-export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
-  function RadioButton(props, forwardedRef) {
-    const { as = 'input', children, disabled, ...otherProps } = props;
-
-    const inner = (
-      <RadioButtonCore
-        as={RadioButtonInner}
-        innerAs={as}
-        ref={forwardedRef}
-        disabled={disabled}
-        {...otherProps}
-      />
-    );
-
-    if (!children) {
-      return inner;
-    }
-
-    return (
-      <SelectionControlLabel>
-        {inner}
-        <SelectionControlText disabled={disabled}>
-          {children}
-        </SelectionControlText>
-      </SelectionControlLabel>
-    );
-  }
-);
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import type { RadioButtonProps as RadioButtonCoreProps } from '@basic-ui/core';
+import { RadioButton as RadioButtonCore } from '@basic-ui/core';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+import { alpha } from '../color';
+import { RadioButtonIcon } from './RadioButtonIcon';
+import { useTheme } from '../theme';
+import {
+  SelectionControlLabel,
+  SelectionControlText,
+} from '../SelectionControl';
+
+export type RadioButtonProps = RadioButtonCoreProps;
+
+const RadioButtonInner = forwardRef<
+  HTMLInputElement,
+  RadioButtonProps &
+    BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>
+>(function RadioButtonInner(props, forwardedRef) {
+  const { innerAs: as, checked, disabled, __css, ...otherProps } = props;
+  const color = 'primary';
+  const theme = useTheme();
+
+  return (
+    <Box position="relative" display="inline-block" minWidth="auto">
+      <RippleBox<
+        RippleBoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>
+      >
+        as={as}
+        checked={checked}
+        ref={forwardedRef}
+        rippleColor={color}
+        baseOpacity={0}
+        hoverOpacity={0.04}
+        focusOpacity={0.12}
+        center={true}
+        disabled={disabled}
+        theme={theme}
+        __css={{
+          top: 0,
+          left: 0,
+          width: rem(40),
+          height: rem(40),
+          appearance: 'none',
+          ':focus': {
+            outline: 'none',
+          },
+          border: 'none',
+          borderRadius: 'full',
+          zIndex: 1,
+          position: 'absolute',
+          ...__css,
+        }}
+        {...otherProps}
+      />
+      <Box
+        __css={{
+          position: 'relative',
+          top: 0,
+          left: 0,
+          width: rem(40),
+          height: rem(40),
+          padding: rem(10),
+          lineHeight: 1,
+          color: checked ? 'primary' : alpha('on.surface', 0.54),
+          'input:disabled + &': {
+            color: alpha('on.surface', 0.38),
+          },
+        }}
+        role="presentation"
+        aria-hidden="true"
+      >
+        <RadioButtonIcon checked={checked} disabled={disabled} />
+      </Box>
+    </Box>
+  );
+});
+
+export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
+  function RadioButton(props, forwardedRef) {
+    const { as = 'input', children, disabled, ...otherProps } = props;
+
+    const inner = (
+      <RadioButtonCore
+        as={RadioButtonInner}
+        innerAs={as}
+        ref={forwardedRef}
+        disabled={disabled}
+        {...otherProps}
+      />
+    );
+
+    if (!children) {
+      return inner;
+    }
+
+    return (
+      <SelectionControlLabel>
+        {inner}
+        <SelectionControlText disabled={disabled}>
+          {children}
+        </SelectionControlText>
+      </SelectionControlLabel>
+    );
+  }
+);

package/src/RadioButton/RadioButtonIcon.tsx

@@ -1,45 +1,44 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { rem } from 'polished';
-
-import { Box } from '../Box';
-
-export interface RadioButtonIconProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  checked?: boolean;
-  disabled?: boolean;
-}
-
-export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
-  function RadioButtonIcon(props, forwardedRef) {
-    const { checked, ...otherProps } = props;
-
-    return (
-      <Box
-        ref={forwardedRef}
-        __css={{
-          borderColor: 'currentColor',
-          borderStyle: 'solid',
-          borderRadius: 'full',
-          borderWidth: rem(2),
-          width: '100%',
-          height: '100%',
-          p: rem(3),
-        }}
-        {...otherProps}
-      >
-        <Box
-          __css={{
-            backgroundColor: 'currentColor',
-            borderRadius: 'full',
-            width: '100%',
-            height: '100%',
-            transition:
-              'transform .12s cubic-bezier(0,0,.2,1) 0ms,background-color .12s cubic-bezier(0,0,.2,1) 0ms',
-            transform: checked ? 'scale(1)' : 'scale(0)',
-          }}
-        />
-      </Box>
-    );
-  }
-);
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
+
+export interface RadioButtonIconProps extends HTMLAttributes<HTMLDivElement> {
+  checked?: boolean;
+  disabled?: boolean;
+}
+
+export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
+  function RadioButtonIcon(props, forwardedRef) {
+    const { checked, ...otherProps } = props;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        __css={{
+          borderColor: 'currentColor',
+          borderStyle: 'solid',
+          borderRadius: 'full',
+          borderWidth: rem(2),
+          width: '100%',
+          height: '100%',
+          p: rem(3),
+        }}
+        {...otherProps}
+      >
+        <Box
+          __css={{
+            backgroundColor: 'currentColor',
+            borderRadius: 'full',
+            width: '100%',
+            height: '100%',
+            transition: `transform .12s ${EASING_STANDARD} 0ms,background-color .12s ${EASING_STANDARD} 0ms`,
+            transform: checked ? 'scale(1)' : 'scale(0)',
+          }}
+        />
+      </Box>
+    );
+  }
+);

package/src/RadioButton/RadioGroup.tsx

@@ -1,27 +1,27 @@
-import { forwardRef } from 'react';
-import type { RadioGroupProps as RadioGroupCoreProps } from '@basic-ui/core';
-import { RadioGroup as RadioGroupCore } from '@basic-ui/core';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export type RadioGroupProps = Omit<
-  BoxProps,
-  'onChange' | 'value' | 'defaultValue'
-> &
-  RadioGroupCoreProps;
-
-export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  function RadioGroup(props, forwardedRef) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { as, ...otherProps } = props;
-
-    return (
-      <Box<RadioGroupProps>
-        as={RadioGroupCore}
-        ref={forwardedRef}
-        {...otherProps}
-      />
-    );
-  }
-);
+import { forwardRef } from 'react';
+import type { RadioGroupProps as RadioGroupCoreProps } from '@basic-ui/core';
+import { RadioGroup as RadioGroupCore } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export type RadioGroupProps = Omit<
+  BoxProps,
+  'onChange' | 'value' | 'defaultValue'
+> &
+  RadioGroupCoreProps;
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  function RadioGroup(props, forwardedRef) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { as, ...otherProps } = props;
+
+    return (
+      <Box<RadioGroupProps>
+        as={RadioGroupCore}
+        ref={forwardedRef}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/RadioButton/index.ts

@@ -1,2 +1,2 @@
-export * from './RadioButton';
-export * from './RadioGroup';
+export * from './RadioButton';
+export * from './RadioGroup';

package/src/Ripple/Ripple.story.tsx

@@ -1,78 +1,78 @@
-import { useRef, useState } from 'react';
-import { get } from '@styled-system/css';
-
-import { Ripple, useRipple } from './';
-import { Box } from '../Box';
-import { Text } from '../Text';
-import { Button } from '../Button';
-import { useTheme } from '../theme';
-
-export default {
-  title: 'helper components/Ripple',
-};
-
-const Example = () => {
-  const theme = useTheme();
-  const ref = useRef<HTMLDivElement>();
-  const [textColor, setTextColor] = useState<string>(undefined);
-  const {
-    activate,
-    deactivate,
-    animation,
-    style: rippleStyle,
-  } = useRipple({
-    opacity: 1,
-    backgroundColor: get(theme, 'colors.primary'),
-  });
-
-  return (
-    <Box p={2}>
-      <Box
-        ref={ref}
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-        width={500}
-        height={500}
-        maxWidth={500}
-        maxHeight={500}
-        mb={2}
-        bg="#eee"
-        sx={{
-          position: 'relative',
-          borderRadius: 'extra-large',
-          overflow: 'hidden',
-          willChange: 'transform',
-        }}
-      >
-        <Ripple animation={animation} style={rippleStyle} />
-        <Text variant="h3" style={{ zIndex: 1, color: textColor }}>
-          Hello
-        </Text>
-      </Box>
-      <Button
-        onClick={() => {
-          ref.current &&
-            activate(
-              ref.current.getBoundingClientRect(),
-              Math.random() * 500,
-              Math.random() * 500
-            );
-          setTextColor(theme.colors.on.primary);
-        }}
-      >
-        Activate
-      </Button>
-      <Button
-        onClick={() => {
-          deactivate();
-          setTextColor(undefined);
-        }}
-      >
-        Deactivate
-      </Button>
-    </Box>
-  );
-};
-
-export const Controlled = () => <Example />;
+import { useRef, useState } from 'react';
+import { get } from '@styled-system/css';
+
+import { Ripple, useRipple } from './';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { Button } from '../Button';
+import { useTheme } from '../theme';
+
+export default {
+  title: 'helper components/Ripple',
+};
+
+const Example = () => {
+  const theme = useTheme();
+  const ref = useRef<HTMLDivElement>();
+  const [textColor, setTextColor] = useState<string>(undefined);
+  const {
+    activate,
+    deactivate,
+    animation,
+    style: rippleStyle,
+  } = useRipple({
+    opacity: 1,
+    backgroundColor: get(theme, 'colors.primary'),
+  });
+
+  return (
+    <Box p={2}>
+      <Box
+        ref={ref}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        width={500}
+        height={500}
+        maxWidth={500}
+        maxHeight={500}
+        mb={2}
+        bg="#eee"
+        sx={{
+          position: 'relative',
+          borderRadius: 'extra-large',
+          overflow: 'hidden',
+          willChange: 'transform',
+        }}
+      >
+        <Ripple animation={animation} style={rippleStyle} />
+        <Text variant="headline-medium" style={{ zIndex: 1, color: textColor }}>
+          Hello
+        </Text>
+      </Box>
+      <Button
+        onClick={() => {
+          ref.current &&
+            activate(
+              ref.current.getBoundingClientRect(),
+              Math.random() * 500,
+              Math.random() * 500
+            );
+          setTextColor(theme.colors.on.primary);
+        }}
+      >
+        Activate
+      </Button>
+      <Button
+        onClick={() => {
+          deactivate();
+          setTextColor(undefined);
+        }}
+      >
+        Deactivate
+      </Button>
+    </Box>
+  );
+};
+
+export const Controlled = () => <Example />;

package/src/Ripple/Ripple.tsx

@@ -1,33 +1,33 @@
-import styled from '@emotion/styled';
-import type { CSSObject } from '@emotion/react';
-
-import {
-  RIPPLE_BACKGROUND_COLOR,
-  RIPPLE_SIZE,
-  RIPPLE_POSITION,
-} from './constants';
-
-export const rippleStyle = ({
-  animation,
-}: {
-  animation?: string;
-}): CSSObject => ({
-  position: 'absolute',
-  boxSizing: 'content-box',
-  display: 'block',
-  content: '""',
-  width: `var(${RIPPLE_SIZE})`,
-  height: `var(${RIPPLE_SIZE})`,
-  top: `var(${RIPPLE_POSITION})`,
-  left: `var(${RIPPLE_POSITION})`,
-  backgroundColor: `var(${RIPPLE_BACKGROUND_COLOR})`,
-  transformOrigin: 'center center',
-  opacity: 0,
-  borderRadius: '999999px',
-  animation,
-  willChange: 'opacity,transform',
-});
-
-export const Ripple = styled.div<{ animation?: string }>(rippleStyle, {
-  pointerEvents: 'none',
-});
+import styled from '@emotion/styled';
+import type { CSSObject } from '@emotion/react';
+
+import {
+  RIPPLE_BACKGROUND_COLOR,
+  RIPPLE_SIZE,
+  RIPPLE_POSITION,
+} from './constants';
+
+export const rippleStyle = ({
+  animation,
+}: {
+  animation?: string;
+}): CSSObject => ({
+  position: 'absolute',
+  boxSizing: 'content-box',
+  display: 'block',
+  content: '""',
+  width: `var(${RIPPLE_SIZE})`,
+  height: `var(${RIPPLE_SIZE})`,
+  top: `var(${RIPPLE_POSITION})`,
+  left: `var(${RIPPLE_POSITION})`,
+  backgroundColor: `var(${RIPPLE_BACKGROUND_COLOR})`,
+  transformOrigin: 'center center',
+  opacity: 0,
+  borderRadius: '999999px',
+  animation,
+  willChange: 'opacity,transform',
+});
+
+export const Ripple = styled.div<{ animation?: string }>(rippleStyle, {
+  pointerEvents: 'none',
+});