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

package/src/CheckBox/CheckBox.story.tsx

@@ -1,154 +1,155 @@
-import { useState, useRef } from 'react';
-import { keyframes } from '@emotion/react';
-import type { Keyframes } from '@emotion/serialize';
-
-import { CheckBox, Box } 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 cubic-bezier(.4,0,.2,1)`
-          : undefined,
-        translate: 'scale(1)',
-        '& > svg': {
-          display: 'block',
-        },
-      }}
-    >
-      {props.checked ? <HeartFilled /> : <HeartOutline />}
-    </Box>
-  );
-};
-
-function ThreeStates() {
-  const [state, setState] = useState<boolean | 'mixed'>(false);
-
-  function onChange() {
-    console.log('here', state);
-    switch (state) {
-      case false:
-        setState('mixed');
-        break;
-      case 'mixed':
-        setState(true);
-        break;
-      case true:
-        setState(false);
-        break;
-    }
-  }
-  console.log({ state });
-
-  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 />;

package/src/CheckBox/CheckBox.tsx

@@ -1,174 +1,170 @@
-import type { InputHTMLAttributes } from 'react';
-import { forwardRef, cloneElement } from 'react';
-import * as React from 'react';
-import { rem } from 'polished';
-import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
-
-import type { RippleBoxProps } from '../Ripple';
-import { RippleBox } from '../Ripple';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { useTheme } from '../theme';
-import { CheckBoxIcon } from './CheckBoxIcon';
-import {
-  SelectionControlLabel,
-  SelectionControlText,
-} from '../SelectionControl';
-
-export interface CheckBoxProps
-  extends BoxProps<
-    HTMLInputElement,
-    React.InputHTMLAttributes<HTMLInputElement>
-  > {
-  as?: React.ElementType<any>;
-  checked?: boolean;
-  indeterminate?: boolean;
-  disabled?: boolean;
-  icon?: React.ReactElement<{ checked?: boolean; disabled?: boolean }>;
-}
-
-const CheckBoxCore: React.FC<
-  CheckBoxProps & {
-    innerAs?: React.ElementType<any>;
-  }
-> = _CheckBoxCore as any;
-
-function getColors(disabled?: boolean, checked?: boolean) {
-  if (checked && disabled) {
-    return ['on.surface', 'transparent', 0.38];
-  } else if (checked) {
-    return ['primary', 'primary', 1];
-  }
-  return ['transparent', 'on.surface', disabled ? 0.38 : 0.54];
-}
-
-const CheckBoxInner = forwardRef<HTMLInputElement, CheckBoxProps>(
-  function CheckBoxInner(props, forwardedRef) {
-    const {
-      as: Comp = 'input',
-      disabled,
-      checked,
-      indeterminate = false,
-      onChange,
-      icon = <CheckBoxIcon />,
-      __css,
-      ...otherProps
-    } = props;
-    const color = checked ? 'primary' : 'on.surface';
-    const theme = useTheme();
-    const [backgroundColor, borderColor, opacity] = getColors(
-      disabled,
-      checked
-    );
-
-    return (
-      <Box position="relative" display="inline-block" minWidth="auto">
-        <RippleBox<
-          RippleBoxProps<
-            HTMLInputElement,
-            InputHTMLAttributes<HTMLInputElement>
-          >
-        >
-          as={Comp}
-          type="checkbox"
-          checked={checked}
-          onChange={onChange}
-          theme={theme}
-          ref={forwardedRef}
-          rippleColor={color}
-          baseOpacity={0}
-          hoverOpacity={checked ? 0.16 : 0.12}
-          focusOpacity={checked ? 0.24 : 0.16}
-          center={true}
-          disabled={disabled}
-          aria-checked={
-            indeterminate
-              ? checked
-                ? 'mixed'
-                : 'false'
-              : checked
-              ? 'true'
-              : 'false'
-          }
-          data-indeterminate={indeterminate ? '' : undefined}
-          {...otherProps}
-          __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,
-          }}
-        />
-        <Box
-          __css={{
-            position: 'relative',
-            top: 0,
-            left: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: rem(40),
-            width: rem(40),
-          }}
-          role="presentation"
-          aria-hidden="true"
-        >
-          {cloneElement(icon, {
-            checked,
-            indeterminate,
-            ['data-checkbox-icon']: '',
-            disabled,
-            backgroundColor,
-            borderColor,
-            opacity,
-          })}
-        </Box>
-      </Box>
-    );
-  }
-);
-
-export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
-  function CheckBox(props, forwardedRef) {
-    const {
-      as = 'input',
-      icon = <CheckBoxIcon />,
-      disabled,
-      children,
-      ...otherProps
-    } = props;
-
-    const inner = (
-      <CheckBoxCore
-        as={CheckBoxInner}
-        innerAs={as}
-        ref={forwardedRef}
-        icon={icon}
-        disabled={disabled}
-        {...otherProps}
-      />
-    );
-
-    if (!children) {
-      return inner;
-    }
-
-    return (
-      <SelectionControlLabel>
-        {inner}
-        <SelectionControlText disabled={disabled}>
-          {children}
-        </SelectionControlText>
-      </SelectionControlLabel>
-    );
-  }
-);
+import type { ElementType, FC, InputHTMLAttributes, ReactElement } from 'react';
+import { forwardRef, cloneElement } from 'react';
+import { rem } from 'polished';
+import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
+
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
+import { CheckBoxIcon } from './CheckBoxIcon';
+import {
+  SelectionControlLabel,
+  SelectionControlText,
+} from '../SelectionControl';
+
+export interface CheckBoxProps
+  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+  as?: ElementType<any>;
+  checked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;
+}
+
+const CheckBoxCore: FC<
+  CheckBoxProps & {
+    innerAs?: ElementType<any>;
+  }
+> = _CheckBoxCore as any;
+
+function getColors(disabled?: boolean, checked?: boolean) {
+  if (checked && disabled) {
+    return ['on.surface', 'transparent', 0.38];
+  } else if (checked) {
+    return ['primary', 'primary', 1];
+  }
+  return ['transparent', 'on.surface', disabled ? 0.38 : 0.54];
+}
+
+const CheckBoxInner = forwardRef<HTMLInputElement, CheckBoxProps>(
+  function CheckBoxInner(props, forwardedRef) {
+    const {
+      as: Comp = 'input',
+      disabled,
+      checked,
+      indeterminate = false,
+      onChange,
+      icon = <CheckBoxIcon />,
+      __css,
+      ...otherProps
+    } = props;
+    const color = checked ? 'primary' : 'on.surface';
+    const theme = useTheme();
+    const [backgroundColor, borderColor, opacity] = getColors(
+      disabled,
+      checked
+    );
+
+    return (
+      <Box position="relative" display="inline-block" minWidth="auto">
+        <RippleBox<
+          RippleBoxProps<
+            HTMLInputElement,
+            InputHTMLAttributes<HTMLInputElement>
+          >
+        >
+          as={Comp}
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+          theme={theme}
+          ref={forwardedRef}
+          rippleColor={color}
+          baseOpacity={0}
+          hoverOpacity={checked ? 0.16 : 0.12}
+          focusOpacity={checked ? 0.24 : 0.16}
+          center={true}
+          disabled={disabled}
+          aria-checked={
+            indeterminate
+              ? checked
+                ? 'mixed'
+                : 'false'
+              : checked
+              ? 'true'
+              : 'false'
+          }
+          data-indeterminate={indeterminate ? '' : undefined}
+          {...otherProps}
+          __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,
+          }}
+        />
+        <Box
+          __css={{
+            position: 'relative',
+            top: 0,
+            left: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: rem(40),
+            width: rem(40),
+          }}
+          role="presentation"
+          aria-hidden="true"
+        >
+          {cloneElement(icon, {
+            checked,
+            indeterminate,
+            ['data-checkbox-icon']: '',
+            disabled,
+            backgroundColor,
+            borderColor,
+            opacity,
+          })}
+        </Box>
+      </Box>
+    );
+  }
+);
+
+export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
+  function CheckBox(props, forwardedRef) {
+    const {
+      as = 'input',
+      icon = <CheckBoxIcon />,
+      disabled,
+      children,
+      ...otherProps
+    } = props;
+
+    const inner = (
+      <CheckBoxCore
+        as={CheckBoxInner}
+        innerAs={as}
+        ref={forwardedRef}
+        icon={icon}
+        disabled={disabled}
+        {...otherProps}
+      />
+    );
+
+    if (!children) {
+      return inner;
+    }
+
+    return (
+      <SelectionControlLabel>
+        {inner}
+        <SelectionControlText disabled={disabled}>
+          {children}
+        </SelectionControlText>
+      </SelectionControlLabel>
+    );
+  }
+);