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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.29",
+  "version": "1.0.0-alpha.30",
   "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": "ee3fb47600f6b456b30902d30436894fde9c5387"
+  "gitHead": "4c7fdd9ea2da383ea6f249ba864346e48da1e31a"
 }

package/src/SelectionControl/SelectionControlLabel.tsx

@@ -25,6 +25,7 @@ export const SelectionControlLabel = forwardRef<
         position: 'relative',
         alignItems: 'center',
         WebkitTapHighlightColor: 'transparent',
+        gap: 1,
         ...__css,
       }}
       {...otherProps}

package/src/Switch/Switch.story.tsx

@@ -20,6 +20,20 @@ const Example = () => {
         <Switch disabled />
         <Switch disabled defaultChecked={true} />
       </Box>
+      <Box>
+        <Switch size="small">off/on</Switch>
+        <Switch disabled size="small">
+          off/on
+        </Switch>
+        <Switch disabled defaultChecked={true} size="small">
+          off/on
+        </Switch>
+      </Box>
+      <Box>
+        <Switch size="small" />
+        <Switch disabled size="small" />
+        <Switch disabled defaultChecked={true} size="small" />
+      </Box>
     </>
   );
 };

package/src/Switch/Switch.tsx

@@ -1,6 +1,7 @@
 import type { ElementType, FC, InputHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
+import { rem } from 'polished';
 
 import type { RippleBoxProps } from '../Ripple';
 import { RippleBox } from '../Ripple';
@@ -24,6 +25,30 @@ export interface SwitchProps
   as?: ElementType<any>;
   checked?: boolean;
   disabled?: boolean;
+  size?: 'small' | 'default';
+}
+
+function getSizeCssVariables(size: 'small' | 'default') {
+  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-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
+    ),
+  };
 }
 
 const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
@@ -33,6 +58,7 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
       disabled,
       checked,
       onChange,
+      size = 'default',
       __css,
       ...otherProps
     } = props;
@@ -40,53 +66,56 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
     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>
-              >
+      <Box
+        display="inline-block"
+        position="relative"
+        minWidth="auto"
+        sx={getSizeCssVariables(size)}
+      >
+        <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>
+          >
+            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>
     );
   }

package/src/Switch/styledComponents.tsx

@@ -1,15 +1,17 @@
-import { rem } from 'polished';
-
 import { Box } from '../Box';
 import { EASING_STANDARD } from '../motion';
 
-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;
+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,
@@ -18,10 +20,10 @@ export const SwitchTrail = ({
 }) => (
   <Box
     __css={{
-      width: rem(TRAIL_WIDTH),
-      height: rem(TRAIL_HEIGHT),
-      borderRadius: rem(TRAIL_HEIGHT / 2),
-      borderWidth: rem(BORDER_WIDTH),
+      width: TRAIL_WIDTH,
+      height: TRAIL_HEIGHT,
+      borderRadius: 'full',
+      borderWidth: BORDER_WIDTH,
       borderStyle: 'solid',
       backgroundColor: checked ? 'primary' : 'surface-variant',
       borderColor: checked ? 'primary' : 'outline',
@@ -35,24 +37,23 @@ export const SwitchTrail = ({
   />
 );
 
-const THUMB_SIZE = 40;
 export const SwitchThumb = ({ checked = false, ...otherProps }) => (
   <Box
     position="absolute"
-    width={rem(THUMB_SIZE)}
-    height={rem(THUMB_SIZE)}
+    width={STATE_LAYER_SIZE}
+    height={STATE_LAYER_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%)`,
+      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: THUMB_SIZE,
-        height: THUMB_SIZE,
+        width: STATE_LAYER_SIZE,
+        height: STATE_LAYER_SIZE,
       },
     }}
     {...otherProps}
@@ -64,11 +65,11 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
     __css={{
       position: 'absolute',
       width: checked
-        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
-        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+        ? CIRCLE_SIZE_INACTIVE_CHECKED
+        : CIRCLE_SIZE_INACTIVE_UNCHECKED,
       height: checked
-        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
-        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+        ? CIRCLE_SIZE_INACTIVE_CHECKED
+        : CIRCLE_SIZE_INACTIVE_UNCHECKED,
       boxSizing: 'border-box',
       borderRadius: 'full',
       pointerEvents: 'none',