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

package/src/Switch/Switch.story.tsx

@@ -1,27 +1,98 @@
-import { Switch } from './';
-import { Box } from '../';
-
-export default {
-  title: 'components/Switch',
-};
-
-const Example = () => {
-  return (
-    <>
-      <Box>
-        <Switch>off/on</Switch>
-        <Switch disabled>off/on</Switch>
-        <Switch disabled defaultChecked={true}>
-          off/on
-        </Switch>
-      </Box>
-      <Box>
-        <Switch />
-        <Switch disabled />
-        <Switch disabled defaultChecked={true} />
-      </Box>
-    </>
-  );
-};
-
-export const Default = () => <Example />;
+import type { ReactElement } from 'react';
+import { forwardRef } from 'react';
+
+import { Switch } from './';
+import { Box } from '../';
+import type { CheckBoxIconProps } from '../CheckBox/CheckBoxIcon';
+
+export default {
+  title: 'components/Switch',
+};
+
+const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
+  function CheckBoxIcon(
+    {
+      __css = {},
+      indeterminate,
+      checked,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      disabled,
+      backgroundColor,
+      borderColor,
+      opacity,
+      ...otherProps
+    },
+    forwardedRef
+  ) {
+    return (
+      <Box
+        as="span"
+        ref={forwardedRef}
+        __css={{
+          display: 'inline-flex',
+          pointerEvents: 'none',
+          '& svg': {
+            width: 'var(--switch-icon-size)',
+            height: 'var(--switch-icon-size)',
+          },
+          __css,
+        }}
+        {...otherProps}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
+          {checked ? (
+            <path
+              d="M378 810 154 586l43-43 181 181 384-384 43 43-427 427Z"
+              fill="currentColor"
+            />
+          ) : (
+            <path
+              d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"
+              fill="currentColor"
+            />
+          )}
+        </svg>
+      </Box>
+    );
+  }
+);
+
+const Example = ({ icon }: { icon?: ReactElement<any> }) => {
+  return (
+    <>
+      <Box>
+        <Switch icon={icon}>off/on</Switch>
+        <Switch icon={icon} disabled>
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled defaultChecked={true}>
+          off/on
+        </Switch>
+      </Box>
+      <Box>
+        <Switch icon={icon} />
+        <Switch icon={icon} disabled />
+        <Switch icon={icon} disabled defaultChecked={true} />
+      </Box>
+      <Box>
+        <Switch icon={icon} size="small">
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled size="small">
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled defaultChecked={true} size="small">
+          off/on
+        </Switch>
+      </Box>
+      <Box>
+        <Switch icon={icon} size="small" />
+        <Switch icon={icon} disabled size="small" />
+        <Switch icon={icon} disabled defaultChecked={true} size="small" />
+      </Box>
+    </>
+  );
+};
+
+export const Default = () => <Example />;
+export const WithIcon = () => <Example icon={<CheckBoxIcon />} />;

package/src/Switch/Switch.tsx

@@ -1,127 +1,170 @@
-import type { InputHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import * as React from 'react';
-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 {
-  SelectionControlLabel,
-  SelectionControlText,
-} from '../SelectionControl';
-import { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';
-
-const CheckBoxCore: React.FC<
-  SwitchProps & {
-    innerAs?: React.ElementType<any>;
-  }
-> = _CheckBoxCore as any;
-
-export interface SwitchProps
-  extends BoxProps<
-    HTMLInputElement,
-    React.InputHTMLAttributes<HTMLInputElement>
-  > {
-  as?: React.ElementType<any>;
-  checked?: boolean;
-  disabled?: boolean;
-}
-
-const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
-  function SwitchInner(props, forwardedRef) {
-    const {
-      as: Comp = 'input',
-      disabled,
-      checked,
-      onChange,
-      __css,
-      ...otherProps
-    } = props;
-    const color = checked ? 'primary' : 'on.surface';
-    const theme = useTheme();
-
-    return (
-      <Box p={2} display="inline-block" minWidth="auto">
-        <Box position="relative">
-          <SwitchTrail checked={checked} disabled={disabled} />
-          <SwitchThumb checked={checked}>
-            <RippleBox<
-              RippleBoxProps<
-                HTMLInputElement,
-                InputHTMLAttributes<HTMLInputElement>
-              >
-            >
-              as={Comp}
-              role="switch"
-              type="checkbox"
-              checked={checked}
-              onChange={onChange}
-              theme={theme}
-              ref={forwardedRef}
-              aria-checked={checked ? 'true' : 'false'}
-              rippleColor={color}
-              baseOpacity={0}
-              hoverOpacity={0.04}
-              focusOpacity={0.12}
-              center={true}
-              disabled={disabled}
-              data-switch-thumb=""
-              {...otherProps}
-              __css={{
-                top: '50%',
-                left: '50%',
-                backgroundColor: 'transparent',
-                transform: 'translate(-50%, -50%)',
-                width: '100%',
-                height: '100%',
-                appearance: 'none',
-                ':focus': {
-                  outline: 'none',
-                },
-                border: 'none',
-                borderRadius: 'full',
-                zIndex: 1,
-                position: 'absolute',
-                ...__css,
-              }}
-            />
-            <SwitchCircle checked={checked} />
-          </SwitchThumb>
-        </Box>
-      </Box>
-    );
-  }
-);
-
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
-  props,
-  forwardedRef
-) {
-  const { as = 'input', disabled, children, ...otherProps } = props;
-
-  const inner = (
-    <CheckBoxCore
-      as={SwitchInner}
-      innerAs={as}
-      ref={forwardedRef}
-      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 { cloneElement, forwardRef } from 'react';
+import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
+import { rem } from 'polished';
+
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
+import {
+  SelectionControlLabel,
+  SelectionControlText,
+} from '../SelectionControl';
+import { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';
+
+const CheckBoxCore: FC<
+  SwitchProps & {
+    innerAs?: ElementType<any>;
+  }
+> = _CheckBoxCore as any;
+
+export interface SwitchProps
+  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+  as?: ElementType<any>;
+  checked?: boolean;
+  disabled?: boolean;
+  size?: 'small' | 'default';
+  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;
+}
+
+function getSizeCssVariables(size: 'small' | 'default', hasIcon: boolean) {
+  const multiplier = size === 'small' ? 0.75 : 1;
+  const BORDER_WIDTH = 2;
+  const TRAIL_WIDTH = 52 * multiplier;
+  const TRAIL_HEIGHT = 32 * multiplier;
+  return {
+    ['--switch-border-width']: rem(BORDER_WIDTH),
+    ['--switch-trail-width']: rem(TRAIL_WIDTH),
+    ['--switch-trail-height']: rem(TRAIL_HEIGHT),
+    ['--switch-icon-size']: rem(TRAIL_HEIGHT / 2),
+    ['--switch-state-layer-size']: rem(40 * multiplier),
+    ['--switch-thumb-size-checked-inactive']: rem(
+      TRAIL_HEIGHT - BORDER_WIDTH * 4
+    ),
+    ['--switch-thumb-size-checked-active']: rem(
+      TRAIL_HEIGHT - BORDER_WIDTH * 2
+    ),
+    ['--switch-thumb-size-unchecked-inactive']: rem(TRAIL_HEIGHT / 2),
+    ['--switch-thumb-size-unchecked-active']: rem(
+      TRAIL_HEIGHT - BORDER_WIDTH * 2
+    ),
+    ...(hasIcon && {
+      ['--switch-thumb-size-unchecked-inactive']:
+        'var(--switch-thumb-size-checked-inactive)',
+      ['--switch-thumb-size-unchecked-active']:
+        'var(--switch-thumb-size-checked-active)',
+    }),
+  };
+}
+
+const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
+  function SwitchInner(props, forwardedRef) {
+    const {
+      as: Comp = 'input',
+      disabled,
+      checked,
+      onChange,
+      size = 'default',
+      __css,
+      icon,
+      ...otherProps
+    } = props;
+    const color = checked ? 'primary' : 'on.surface';
+    const theme = useTheme();
+
+    return (
+      <Box
+        display="inline-block"
+        position="relative"
+        minWidth="auto"
+        sx={getSizeCssVariables(size, Boolean(icon))}
+      >
+        <SwitchTrail checked={checked} disabled={disabled} />
+        <SwitchThumb checked={checked}>
+          <RippleBox<
+            RippleBoxProps<
+              HTMLInputElement,
+              InputHTMLAttributes<HTMLInputElement>
+            >
+          >
+            as={Comp}
+            role="switch"
+            type="checkbox"
+            checked={checked}
+            onChange={onChange}
+            theme={theme}
+            ref={forwardedRef}
+            aria-checked={checked ? 'true' : 'false'}
+            rippleColor={color}
+            baseOpacity={0}
+            hoverOpacity={0.04}
+            focusOpacity={0.12}
+            center={true}
+            disabled={disabled}
+            data-switch-thumb=""
+            {...otherProps}
+            __css={{
+              top: '50%',
+              left: '50%',
+              backgroundColor: 'transparent',
+              transform: 'translate(-50%, -50%)',
+              width: '100%',
+              height: '100%',
+              appearance: 'none',
+              ':focus': {
+                outline: 'none',
+              },
+              border: 'none',
+              borderRadius: 'full',
+              zIndex: 1,
+              position: 'absolute',
+              ...__css,
+            }}
+          />
+          <SwitchCircle checked={checked}>
+            {icon
+              ? cloneElement(icon, {
+                  checked,
+                  ['data-checkbox-icon' as any]: '',
+                  disabled,
+                })
+              : null}
+          </SwitchCircle>
+        </SwitchThumb>
+      </Box>
+    );
+  }
+);
+
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
+  props,
+  forwardedRef
+) {
+  const { as = 'input', icon, disabled, children, ...otherProps } = props;
+
+  const inner = (
+    <CheckBoxCore
+      as={SwitchInner}
+      innerAs={as}
+      ref={forwardedRef}
+      icon={icon}
+      disabled={disabled}
+      {...otherProps}
+    />
+  );
+
+  if (!children) {
+    return inner;
+  }
+
+  return (
+    <SelectionControlLabel>
+      {inner}
+      <SelectionControlText disabled={disabled}>
+        {children}
+      </SelectionControlText>
+    </SelectionControlLabel>
+  );
+});

package/src/Switch/index.ts

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

package/src/Switch/styledComponents.tsx

@@ -1,110 +1,117 @@
-import { rem } from 'polished';
-
-import { Box } from '../Box';
-
-const BORDER_WIDTH = 2;
-const TRAIL_WIDTH = 52;
-const TRAIL_HEIGHT = 32;
-const CIRCLE_SIZE_INACTIVE_CHECKED = 24;
-const CIRCLE_SIZE_ACTIVE_CHECKED = 28;
-const CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;
-const CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;
-
-export const SwitchTrail = ({
-  checked = false,
-  disabled = false,
-  ...otherProps
-}) => (
-  <Box
-    __css={{
-      width: rem(TRAIL_WIDTH),
-      height: rem(TRAIL_HEIGHT),
-      borderRadius: rem(TRAIL_HEIGHT / 2),
-      borderWidth: rem(BORDER_WIDTH),
-      borderStyle: 'solid',
-      backgroundColor: checked ? 'primary' : 'surface-variant',
-      borderColor: checked ? 'primary' : 'outline',
-      ...(disabled && {
-        opacity: 0.12,
-        backgroundColor: checked ? 'on.surface' : 'surface-variant',
-        borderColor: 'on.surface',
-      }),
-    }}
-    {...otherProps}
-  />
-);
-
-const THUMB_SIZE = 40;
-export const SwitchThumb = ({ checked = false, ...otherProps }) => (
-  <Box
-    position="absolute"
-    width={rem(THUMB_SIZE)}
-    height={rem(THUMB_SIZE)}
-    borderRadius="full"
-    left={'50%'}
-    top={'50%'}
-    __css={{
-      transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${rem(
-        (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2
-      )})) translateY(-50%)`,
-      WebkitTapHighlightColor: 'transparent',
-      transition:
-        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
-      '& > input': {
-        width: THUMB_SIZE,
-        height: THUMB_SIZE,
-      },
-    }}
-    {...otherProps}
-  />
-);
-
-export const SwitchCircle = ({ checked = false, ...otherProps }) => (
-  <Box
-    __css={{
-      position: 'absolute',
-      width: checked
-        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
-        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
-      height: checked
-        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
-        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
-      boxSizing: 'border-box',
-      borderRadius: 'full',
-      pointerEvents: 'none',
-      zIndex: 1,
-      backgroundColor: checked ? 'on.primary' : 'outline',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      transition: 'inherit',
-      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &':
-        {
-          backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
-        },
-      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &':
-        {
-          height: checked
-            ? CIRCLE_SIZE_ACTIVE_CHECKED
-            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
-          width: checked
-            ? CIRCLE_SIZE_ACTIVE_CHECKED
-            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
-        },
-      '[data-switch-thumb=""]:disabled ~ &': {
-        opacity: checked ? 1 : 0.38,
-        backgroundColor: checked ? 'surface' : 'on.surface',
-        height: checked
-          ? CIRCLE_SIZE_INACTIVE_CHECKED
-          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
-        width: checked
-          ? CIRCLE_SIZE_INACTIVE_CHECKED
-          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
-      },
-    }}
-    data-switch-circle=""
-    role="presentation"
-    aria-hidden="true"
-    {...otherProps}
-  />
-);
+import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
+
+const BORDER_WIDTH = 'var(--switch-border-width)';
+const TRAIL_WIDTH = 'var(--switch-trail-width)';
+const TRAIL_HEIGHT = 'var(--switch-trail-height)';
+const STATE_LAYER_SIZE = 'var(--switch-state-layer-size)';
+const CIRCLE_SIZE_INACTIVE_CHECKED =
+  'var(--switch-thumb-size-checked-inactive)';
+const CIRCLE_SIZE_ACTIVE_CHECKED = 'var(--switch-thumb-size-checked-active)';
+const CIRCLE_SIZE_INACTIVE_UNCHECKED =
+  'var(--switch-thumb-size-unchecked-inactive)';
+const CIRCLE_SIZE_ACTIVE_UNCHECKED =
+  'var(--switch-thumb-size-unchecked-active)';
+
+export const SwitchTrail = ({
+  checked = false,
+  disabled = false,
+  ...otherProps
+}) => (
+  <Box
+    __css={{
+      width: TRAIL_WIDTH,
+      height: TRAIL_HEIGHT,
+      borderRadius: 'full',
+      borderWidth: BORDER_WIDTH,
+      borderStyle: 'solid',
+      backgroundColor: checked ? 'primary' : 'surface-variant',
+      borderColor: checked ? 'primary' : 'outline',
+      ...(disabled && {
+        opacity: 0.12,
+        backgroundColor: checked ? 'on.surface' : 'surface-variant',
+        borderColor: 'on.surface',
+      }),
+    }}
+    {...otherProps}
+  />
+);
+
+export const SwitchThumb = ({ checked = false, ...otherProps }) => (
+  <Box
+    position="absolute"
+    width={STATE_LAYER_SIZE}
+    height={STATE_LAYER_SIZE}
+    borderRadius="full"
+    left={'50%'}
+    top={'50%'}
+    __css={{
+      transform: `translateX(calc(-50% ${checked ? '+' : '-'}
+        (${TRAIL_WIDTH} - ${CIRCLE_SIZE_INACTIVE_CHECKED} - ${BORDER_WIDTH} * 4) / 2
+      )) translateY(-50%)`,
+      WebkitTapHighlightColor: 'transparent',
+      transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,
+      '& > input': {
+        width: STATE_LAYER_SIZE,
+        height: STATE_LAYER_SIZE,
+      },
+    }}
+    {...otherProps}
+  />
+);
+
+export const SwitchCircle = ({ checked = false, ...otherProps }) => (
+  <Box
+    __css={{
+      position: 'absolute',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: checked
+        ? CIRCLE_SIZE_INACTIVE_CHECKED
+        : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+      height: checked
+        ? CIRCLE_SIZE_INACTIVE_CHECKED
+        : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+      boxSizing: 'border-box',
+      borderRadius: 'full',
+      pointerEvents: 'none',
+      zIndex: 1,
+      backgroundColor: checked ? 'on.primary' : 'outline',
+      color: checked ? 'primary' : 'on.outline',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      transition: 'inherit',
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &':
+        {
+          backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
+          color: checked ? 'on.primary-container' : 'surface-variant',
+        },
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &':
+        {
+          height: checked
+            ? CIRCLE_SIZE_ACTIVE_CHECKED
+            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+          width: checked
+            ? CIRCLE_SIZE_ACTIVE_CHECKED
+            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+        },
+      '[data-switch-thumb=""]:disabled ~ &': {
+        opacity: checked ? 1 : 0.38,
+        backgroundColor: checked ? 'surface' : 'on.surface',
+        color: checked ? 'on.surface' : 'surface',
+        height: checked
+          ? CIRCLE_SIZE_INACTIVE_CHECKED
+          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+        width: checked
+          ? CIRCLE_SIZE_INACTIVE_CHECKED
+          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+      },
+    }}
+    data-switch-circle=""
+    role="presentation"
+    aria-hidden="true"
+    {...otherProps}
+  />
+);