@basic-ui/material 1.0.0-alpha.30 → 1.0.0-alpha.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.30",
+  "version": "1.0.0-alpha.32",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "4c7fdd9ea2da383ea6f249ba864346e48da1e31a"
+  "gitHead": "42c1e44b1429227fe589e0f7a4bfeeb15b5e395a"
 }

package/src/Switch/Switch.story.tsx

@@ -1,41 +1,98 @@
+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 Example = () => {
+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>off/on</Switch>
-        <Switch disabled>off/on</Switch>
-        <Switch disabled defaultChecked={true}>
+        <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 />
-        <Switch disabled />
-        <Switch disabled defaultChecked={true} />
+        <Switch icon={icon} />
+        <Switch icon={icon} disabled />
+        <Switch icon={icon} disabled defaultChecked={true} />
       </Box>
       <Box>
-        <Switch size="small">off/on</Switch>
-        <Switch disabled size="small">
+        <Switch icon={icon} size="small">
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled size="small">
           off/on
         </Switch>
-        <Switch disabled defaultChecked={true} size="small">
+        <Switch icon={icon} disabled defaultChecked={true} size="small">
           off/on
         </Switch>
       </Box>
       <Box>
-        <Switch size="small" />
-        <Switch disabled size="small" />
-        <Switch disabled defaultChecked={true} size="small" />
+        <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,5 +1,5 @@
-import type { ElementType, FC, InputHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
+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';
 
@@ -26,9 +26,10 @@ export interface SwitchProps
   checked?: boolean;
   disabled?: boolean;
   size?: 'small' | 'default';
+  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;
 }
 
-function getSizeCssVariables(size: 'small' | 'default') {
+function getSizeCssVariables(size: 'small' | 'default', hasIcon: boolean) {
   const multiplier = size === 'small' ? 0.75 : 1;
   const BORDER_WIDTH = 2;
   const TRAIL_WIDTH = 52 * multiplier;
@@ -37,6 +38,7 @@ function getSizeCssVariables(size: 'small' | 'default') {
     ['--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
@@ -48,6 +50,12 @@ function getSizeCssVariables(size: 'small' | 'default') {
     ['--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)',
+    }),
   };
 }
 
@@ -60,6 +68,7 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
       onChange,
       size = 'default',
       __css,
+      icon,
       ...otherProps
     } = props;
     const color = checked ? 'primary' : 'on.surface';
@@ -70,7 +79,7 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
         display="inline-block"
         position="relative"
         minWidth="auto"
-        sx={getSizeCssVariables(size)}
+        sx={getSizeCssVariables(size, Boolean(icon))}
       >
         <SwitchTrail checked={checked} disabled={disabled} />
         <SwitchThumb checked={checked}>
@@ -114,7 +123,15 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
               ...__css,
             }}
           />
-          <SwitchCircle checked={checked} />
+          <SwitchCircle checked={checked}>
+            {icon
+              ? cloneElement(icon, {
+                  checked,
+                  ['data-checkbox-icon' as any]: '',
+                  disabled,
+                })
+              : null}
+          </SwitchCircle>
         </SwitchThumb>
       </Box>
     );
@@ -125,13 +142,14 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
   props,
   forwardedRef
 ) {
-  const { as = 'input', disabled, children, ...otherProps } = props;
+  const { as = 'input', icon, disabled, children, ...otherProps } = props;
 
   const inner = (
     <CheckBoxCore
       as={SwitchInner}
       innerAs={as}
       ref={forwardedRef}
+      icon={icon}
       disabled={disabled}
       {...otherProps}
     />

package/src/Switch/styledComponents.tsx

@@ -64,6 +64,9 @@ 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,
@@ -75,6 +78,7 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
       pointerEvents: 'none',
       zIndex: 1,
       backgroundColor: checked ? 'on.primary' : 'outline',
+      color: checked ? 'primary' : 'on.outline',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
@@ -82,6 +86,7 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
       '[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 ~ &':
         {
@@ -95,6 +100,7 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
       '[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,