@basic-ui/material 1.0.0-alpha.41 → 1.0.0-alpha.43

package/src/CheckBox/CheckBox.tsx

@@ -1,170 +1,170 @@
-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>
-    );
-  }
-);
+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>
+    );
+  }
+);

package/src/CheckBox/CheckBoxIcon.tsx

@@ -1,64 +1,64 @@
-import type { ElementType, ReactNode } from 'react';
-import { forwardRef } from 'react';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { CheckPath } from './CheckPath';
-import { IndeterminatePath } from './IndeterminatePath';
-import { EASING_STANDARD } from '../motion';
-
-export interface CheckBoxIconProps extends BoxProps {
-  as?: ElementType<any>;
-  checked?: boolean;
-  disabled?: boolean;
-  indeterminate?: boolean;
-  children?: ReactNode;
-}
-
-export const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
-  function CheckBoxIcon(
-    {
-      __css = {},
-      as = 'div',
-      indeterminate,
-      checked,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      disabled,
-      backgroundColor,
-      borderColor,
-      opacity,
-      ...otherProps
-    },
-    forwardedRef
-  ) {
-    return (
-      <Box
-        as={as}
-        ref={forwardedRef}
-        backgroundColor={backgroundColor}
-        borderColor={borderColor}
-        opacity={opacity}
-        __css={{
-          color: 'on.primary',
-          borderWidth: rem(2),
-          borderRadius: rem(2),
-          borderStyle: 'solid',
-          width: rem(18),
-          height: rem(18),
-          transition: `background-color 90ms 0s ${EASING_STANDARD}, border-color 90ms 0s ${EASING_STANDARD}, opacity 90ms 0s ${EASING_STANDARD}`,
-          '& > svg': {
-            display: 'block',
-          },
-          __css,
-        }}
-        {...otherProps}
-      >
-        <svg viewBox="0 0 24 24">
-          <CheckPath checked={checked && !indeterminate} />
-          <IndeterminatePath checked={checked && indeterminate} />
-        </svg>
-      </Box>
-    );
-  }
-);
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { CheckPath } from './CheckPath';
+import { IndeterminatePath } from './IndeterminatePath';
+import { EASING_STANDARD } from '../motion';
+
+export interface CheckBoxIconProps extends BoxProps {
+  as?: ElementType<any>;
+  checked?: boolean;
+  disabled?: boolean;
+  indeterminate?: boolean;
+  children?: ReactNode;
+}
+
+export const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
+  function CheckBoxIcon(
+    {
+      __css = {},
+      as = 'div',
+      indeterminate,
+      checked,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      disabled,
+      backgroundColor,
+      borderColor,
+      opacity,
+      ...otherProps
+    },
+    forwardedRef
+  ) {
+    return (
+      <Box
+        as={as}
+        ref={forwardedRef}
+        backgroundColor={backgroundColor}
+        borderColor={borderColor}
+        opacity={opacity}
+        __css={{
+          color: 'on.primary',
+          borderWidth: rem(2),
+          borderRadius: rem(2),
+          borderStyle: 'solid',
+          width: rem(18),
+          height: rem(18),
+          transition: `background-color 90ms 0s ${EASING_STANDARD}, border-color 90ms 0s ${EASING_STANDARD}, opacity 90ms 0s ${EASING_STANDARD}`,
+          '& > svg': {
+            display: 'block',
+          },
+          __css,
+        }}
+        {...otherProps}
+      >
+        <svg viewBox="0 0 24 24">
+          <CheckPath checked={checked && !indeterminate} />
+          <IndeterminatePath checked={checked && indeterminate} />
+        </svg>
+      </Box>
+    );
+  }
+);

package/src/CheckBox/CheckPath.tsx

@@ -1,18 +1,18 @@
-import styled from '@emotion/styled';
-import { rem } from 'polished';
-
-const offset = 29.78333854675293; // document.querySelector(path).getTotalLength()
-
-const Path = styled.path<{ checked?: boolean }>((props) => ({
-  fill: 'none',
-  stroke: 'currentColor',
-  strokeWidth: rem(3.12),
-  strokeDasharray: offset,
-  transition: 'stroke-dashoffset .18s linear',
-  transitionDelay: props.checked ? '90ms' : '0',
-  strokeDashoffset: props.checked ? 0 : offset,
-}));
-
-export const CheckPath = ({ checked }: { checked?: boolean }) => {
-  return <Path d="M1.73,12.91 8.1,19.28 22.79,4.59" checked={checked} />;
-};
+import styled from '@emotion/styled';
+import { rem } from 'polished';
+
+const offset = 29.78333854675293; // document.querySelector(path).getTotalLength()
+
+const Path = styled.path<{ checked?: boolean }>((props) => ({
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: rem(3.12),
+  strokeDasharray: offset,
+  transition: 'stroke-dashoffset .18s linear',
+  transitionDelay: props.checked ? '90ms' : '0',
+  strokeDashoffset: props.checked ? 0 : offset,
+}));
+
+export const CheckPath = ({ checked }: { checked?: boolean }) => {
+  return <Path d="M1.73,12.91 8.1,19.28 22.79,4.59" checked={checked} />;
+};

package/src/CheckBox/IndeterminatePath.tsx

@@ -1,16 +1,16 @@
-import styled from '@emotion/styled';
-import { rem } from 'polished';
-
-const Line = styled.line<{ checked?: boolean; rotate?: boolean }>((props) => ({
-  fill: 'none',
-  stroke: 'currentColor',
-  strokeWidth: rem(4),
-  transformOrigin: 'center center',
-  transform: props.checked ? 'scaleX(1)' : 'scaleX(0)',
-  transition: 'transform .18s linear',
-  transitionDelay: props.checked ? '90ms' : '0',
-}));
-
-export const IndeterminatePath = ({ checked }: { checked?: boolean }) => {
-  return <Line y2="12" x2="22" y1="12" x1="2" checked={checked} />;
-};
+import styled from '@emotion/styled';
+import { rem } from 'polished';
+
+const Line = styled.line<{ checked?: boolean; rotate?: boolean }>((props) => ({
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: rem(4),
+  transformOrigin: 'center center',
+  transform: props.checked ? 'scaleX(1)' : 'scaleX(0)',
+  transition: 'transform .18s linear',
+  transitionDelay: props.checked ? '90ms' : '0',
+}));
+
+export const IndeterminatePath = ({ checked }: { checked?: boolean }) => {
+  return <Line y2="12" x2="22" y1="12" x1="2" checked={checked} />;
+};

package/src/CheckBox/index.ts

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