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

package/src/CheckBox/CheckBoxIcon.tsx

@@ -1,64 +1,64 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { CheckPath } from './CheckPath';
-import { IndeterminatePath } from './IndeterminatePath';
-
-export interface CheckBoxIconProps extends BoxProps {
-  as?: React.ElementType<any>;
-  checked?: boolean;
-  disabled?: boolean;
-  indeterminate?: boolean;
-  children?: React.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 cubic-bezier(0,0,.2,1), border-color 90ms 0s cubic-bezier(0,0,.2,1), opacity 90ms 0s cubic-bezier(0,0,.2,1)',
-          '& > 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';

package/src/Chip/ButtonChip.tsx

@@ -1,86 +1,86 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { rem } from 'polished';
-
-import type { ChipBaseProps } from './ChipBase';
-import { ChipBase } from './ChipBase';
-import { RippleBox } from '../Ripple';
-import { useTheme } from '../theme';
-
-export type ButtonChipProps = ChipBaseProps & {
-  checked?: boolean;
-  disabled?: boolean;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
-};
-
-export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
-  function ButtonChip(props, forwardedRef) {
-    const {
-      as = 'div',
-      onClick,
-      disabled: disabledProp,
-      leadingIcon,
-      trailingIcon,
-      children,
-      color,
-      __css,
-      ...otherProps
-    } = props;
-
-    const theme = useTheme();
-    const isClickable = onClick && !disabledProp;
-
-    return (
-      <ChipBase
-        as="div"
-        onClick={isClickable ? onClick : undefined}
-        disabled={disabledProp}
-        color="on.surface"
-        backgroundColor="surface"
-        __css={__css}
-        {...otherProps}
-      >
-        <RippleBox
-          as={as}
-          role={isClickable ? 'button' : undefined}
-          tabIndex={isClickable ? 0 : undefined}
-          theme={theme}
-          ref={forwardedRef}
-          rippleColor={'currentColor'}
-          baseOpacity={0}
-          hoverOpacity={0.12}
-          focusOpacity={0.24}
-          center={false}
-          disabled={!isClickable}
-          aria-disabled={!isClickable}
-          __css={{
-            bg: 'transparent',
-            color: 'inherit',
-            padding: `0`,
-            pl: leadingIcon ? rem(8) : rem(12),
-            pr: trailingIcon ? rem(8) : rem(12),
-            gap: rem(8),
-            width: '100%',
-            minWidth: 'auto',
-            height: '100%',
-            appearance: 'none',
-            ':focus': {
-              outline: 'none',
-            },
-            border: 'none',
-            borderRadius: 0,
-            position: 'relative',
-            display: 'inline-flex',
-            alignItems: 'center',
-            cursor: isClickable ? 'pointer' : 'default',
-          }}
-        >
-          {leadingIcon}
-          {children}
-          {trailingIcon}
-        </RippleBox>
-      </ChipBase>
-    );
-  }
-);
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import type { ChipBaseProps } from './ChipBase';
+import { ChipBase } from './ChipBase';
+import { RippleBox } from '../Ripple';
+import { useTheme } from '../theme';
+
+export type ButtonChipProps = ChipBaseProps & {
+  checked?: boolean;
+  disabled?: boolean;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+};
+
+export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
+  function ButtonChip(props, forwardedRef) {
+    const {
+      as = 'div',
+      onClick,
+      disabled: disabledProp,
+      leadingIcon,
+      trailingIcon,
+      children,
+      color,
+      __css,
+      ...otherProps
+    } = props;
+
+    const theme = useTheme();
+    const isClickable = onClick && !disabledProp;
+
+    return (
+      <ChipBase
+        as="div"
+        onClick={isClickable ? onClick : undefined}
+        disabled={disabledProp}
+        color="on.surface"
+        backgroundColor="surface"
+        __css={__css}
+        {...otherProps}
+      >
+        <RippleBox
+          as={as}
+          role={isClickable ? 'button' : undefined}
+          tabIndex={isClickable ? 0 : undefined}
+          theme={theme}
+          ref={forwardedRef}
+          rippleColor={'currentColor'}
+          baseOpacity={0}
+          hoverOpacity={0.12}
+          focusOpacity={0.24}
+          center={false}
+          disabled={!isClickable}
+          aria-disabled={!isClickable}
+          __css={{
+            bg: 'transparent',
+            color: 'inherit',
+            padding: `0`,
+            pl: leadingIcon ? rem(8) : rem(12),
+            pr: trailingIcon ? rem(8) : rem(12),
+            gap: rem(8),
+            width: '100%',
+            minWidth: 'auto',
+            height: '100%',
+            appearance: 'none',
+            ':focus': {
+              outline: 'none',
+            },
+            border: 'none',
+            borderRadius: 0,
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            cursor: isClickable ? 'pointer' : 'default',
+          }}
+        >
+          {leadingIcon}
+          {children}
+          {trailingIcon}
+        </RippleBox>
+      </ChipBase>
+    );
+  }
+);