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

package/src/Chip/ChipBase.tsx

@@ -1,141 +1,141 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { variant } from 'styled-system';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import type { Theme } from '../theme';
-import { useTheme } from '../theme';
-import {
-  alpha,
-  getDarkThemeBackgroundOverlay,
-  getColorOverlay,
-} from '../color';
-
-export type ChipBaseProps<
-  H = HTMLDivElement,
-  Attr = React.HTMLAttributes<H>
-> = BoxProps<H, Attr> & {
-  variant?: 'filled' | 'outlined';
-  backgroundColor?: string;
-  color?: string;
-  borderOpacity?: number;
-  disabled?: boolean;
-};
-
-function getFilledCSS(
-  theme: Theme,
-  bg: string,
-  color: string,
-  disabled: boolean
-) {
-  return {
-    ...(!disabled && bg !== 'surface'
-      ? { bg }
-      : {
-          ...getColorOverlay(theme, 'surface', 'primary', 0.05),
-        }),
-    color,
-    '&::before': {
-      backgroundColor: 'currentColor',
-      position: 'absolute',
-      content: '""',
-      opacity: 0,
-      pointerEvents: 'none',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      boxSizing: 'content-box',
-    },
-    '& > *': {
-      zIndex: 1,
-    },
-    ...(disabled && { boxShadow: 0, bg: alpha('on.surface', 0.32) }),
-  };
-}
-
-function getOutlinedCSS(
-  theme: Theme,
-  bg: string,
-  color: string,
-  borderOpacity: number
-) {
-  return {
-    ...(bg !== 'surface' ? { bg } : getDarkThemeBackgroundOverlay(theme, 2)),
-    color: color,
-    borderColor: alpha(color, borderOpacity),
-    borderStyle: 'solid',
-    borderWidth: rem(1),
-  };
-}
-
-export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
-  props,
-  forwardedRef
-) {
-  const {
-    as = 'div',
-    __css,
-    variant: variantProp = 'filled',
-    color: colorProp = 'on.surface',
-    backgroundColor: backgroundColorProp = 'surface',
-    borderOpacity: borderOpacityProp = 0.24,
-    children,
-    disabled = false,
-    ...otherProps
-  } = props;
-  const theme = useTheme();
-
-  return (
-    <Box
-      as={as}
-      data-disabled={disabled ? '' : undefined}
-      ref={forwardedRef}
-      __css={{
-        boxSizing: 'border-box',
-        position: 'relative',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        textAlign: 'center',
-        lineHeight: 'inherit',
-        textDecoration: 'none',
-        fontSize: 'inherit',
-        border: 0,
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        cursor: 'default',
-        WebkitTapHighlightColor: 'transparent',
-        willChange: 'transform,opacity',
-        minWidth: 'auto',
-        '&::-moz-focus-inner': {
-          border: 0,
-        },
-        ...variant({
-          scale: 'chips.variants',
-          prop: 'variant',
-          variants: {
-            text: {},
-          },
-        })({ variant: variantProp, theme }),
-        ...(variantProp === 'filled'
-          ? getFilledCSS(theme, backgroundColorProp, colorProp, disabled)
-          : getOutlinedCSS(
-              theme,
-              backgroundColorProp,
-              colorProp,
-              borderOpacityProp
-            )),
-        opacity: disabled ? 0.38 : 1,
-        ...__css,
-      }}
-      {...otherProps}
-    >
-      {children}
-    </Box>
-  );
-});
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { variant } from 'styled-system';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
+import {
+  alpha,
+  getDarkThemeBackgroundOverlay,
+  getColorOverlay,
+} from '../color';
+
+export type ChipBaseProps<
+  H = HTMLDivElement,
+  Attr = HTMLAttributes<H>
+> = BoxProps<H, Attr> & {
+  variant?: 'filled' | 'outlined';
+  backgroundColor?: string;
+  color?: string;
+  borderOpacity?: number;
+  disabled?: boolean;
+};
+
+function getFilledCSS(
+  theme: Theme,
+  bg: string,
+  color: string,
+  disabled: boolean
+) {
+  return {
+    ...(!disabled && bg !== 'surface'
+      ? { bg }
+      : {
+          ...getColorOverlay(theme, 'surface', 'primary', 0.05),
+        }),
+    color,
+    '&::before': {
+      backgroundColor: 'currentColor',
+      position: 'absolute',
+      content: '""',
+      opacity: 0,
+      pointerEvents: 'none',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      boxSizing: 'content-box',
+    },
+    '& > *': {
+      zIndex: 1,
+    },
+    ...(disabled && { boxShadow: 0, bg: alpha('on.surface', 0.32) }),
+  };
+}
+
+function getOutlinedCSS(
+  theme: Theme,
+  bg: string,
+  color: string,
+  borderOpacity: number
+) {
+  return {
+    ...(bg !== 'surface' ? { bg } : getDarkThemeBackgroundOverlay(theme, 2)),
+    color: color,
+    borderColor: alpha(color, borderOpacity),
+    borderStyle: 'solid',
+    borderWidth: rem(1),
+  };
+}
+
+export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
+  props,
+  forwardedRef
+) {
+  const {
+    as = 'div',
+    __css,
+    variant: variantProp = 'filled',
+    color: colorProp = 'on.surface',
+    backgroundColor: backgroundColorProp = 'surface',
+    borderOpacity: borderOpacityProp = 0.24,
+    children,
+    disabled = false,
+    ...otherProps
+  } = props;
+  const theme = useTheme();
+
+  return (
+    <Box
+      as={as}
+      data-disabled={disabled ? '' : undefined}
+      ref={forwardedRef}
+      __css={{
+        boxSizing: 'border-box',
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+        lineHeight: 'inherit',
+        textDecoration: 'none',
+        fontSize: 'inherit',
+        border: 0,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        cursor: 'default',
+        WebkitTapHighlightColor: 'transparent',
+        willChange: 'transform,opacity',
+        minWidth: 'auto',
+        '&::-moz-focus-inner': {
+          border: 0,
+        },
+        ...variant({
+          scale: 'chips.variants',
+          prop: 'variant',
+          variants: {
+            text: {},
+          },
+        })({ variant: variantProp, theme }),
+        ...(variantProp === 'filled'
+          ? getFilledCSS(theme, backgroundColorProp, colorProp, disabled)
+          : getOutlinedCSS(
+              theme,
+              backgroundColorProp,
+              colorProp,
+              borderOpacityProp
+            )),
+        opacity: disabled ? 0.38 : 1,
+        ...__css,
+      }}
+      {...otherProps}
+    >
+      {children}
+    </Box>
+  );
+});

package/src/Chip/ChoiceChip.tsx

@@ -1,127 +1,127 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { RadioButton, CheckBox } from '@basic-ui/core';
-import { rem } from 'polished';
-
-import type { ChipBaseProps } from './ChipBase';
-import { ChipBase } from './ChipBase';
-import type { RippleBoxProps } from '../Ripple';
-import { RippleBox } from '../Ripple';
-import { useTheme } from '../theme';
-import { Box } from '../Box';
-
-export type ChoiceChipProps = ChipBaseProps<
-  HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
-> & {
-  checked?: boolean;
-  disabled?: boolean;
-  type: 'checkbox' | 'radio';
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
-};
-
-const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
-  function InnerInput(props, forwardedRef) {
-    const {
-      type,
-      color = 'primary',
-      checked,
-      'aria-checked': ariaChecked,
-      defaultChecked,
-      value,
-      name,
-      defaultValue,
-      disabled,
-      onChange,
-      leadingIcon,
-      trailingIcon,
-      children,
-      __css,
-      ...otherProps
-    } = props;
-
-    const theme = useTheme();
-
-    return (
-      <ChipBase
-        as="label"
-        disabled={disabled}
-        backgroundColor={checked ? color + '-container' : 'surface'}
-        color={checked ? 'on.' + color + '-container' : 'on.surface'}
-        borderOpacity={checked ? 0 : 0.24}
-        __css={__css}
-        {...otherProps}
-      >
-        <Box
-          as="span"
-          __css={{
-            width: '100%',
-            height: '100%',
-            border: 'none',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            pl: leadingIcon ? rem(8) : rem(12),
-            pr: trailingIcon ? rem(8) : rem(12),
-          }}
-        >
-          <RippleBox<
-            RippleBoxProps<
-              HTMLInputElement,
-              React.InputHTMLAttributes<HTMLInputElement>
-            >
-          >
-            as="input"
-            type={type}
-            aria-checked={ariaChecked}
-            checked={checked}
-            onChange={onChange}
-            defaultChecked={defaultChecked}
-            value={value}
-            defaultValue={defaultValue}
-            theme={theme}
-            disabled={disabled}
-            rippleColor={color}
-            baseOpacity={0}
-            hoverOpacity={0.12}
-            focusOpacity={0.24}
-            name={name}
-            ref={forwardedRef}
-            __css={{
-              bg: 'transparent',
-              top: 0,
-              left: 0,
-              width: '100%',
-              height: '100%',
-              appearance: 'none',
-              ':focus': {
-                outline: 'none',
-              },
-              border: 'none',
-              borderRadius: 0,
-              position: 'absolute',
-            }}
-          />
-          {leadingIcon}
-          {children}
-          {trailingIcon}
-        </Box>
-      </ChipBase>
-    );
-  }
-);
-
-export const ChoiceChip = forwardRef<HTMLInputElement, ChoiceChipProps>(
-  function ChoiceChip(props, forwardedRef) {
-    const { type = 'checkbox', ...otherProps } = props;
-
-    const Comp: React.FC<ChoiceChipProps> = (
-      type === 'radio' ? RadioButton : CheckBox
-    ) as any;
-
-    return (
-      <Comp ref={forwardedRef} as={InnerInput} type={type} {...otherProps} />
-    );
-  }
-);
+import type { FC, InputHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { RadioButton, CheckBox } from '@basic-ui/core';
+import { rem } from 'polished';
+
+import type { ChipBaseProps } from './ChipBase';
+import { ChipBase } from './ChipBase';
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+import { useTheme } from '../theme';
+import { Box } from '../Box';
+
+export type ChoiceChipProps = ChipBaseProps<
+  HTMLInputElement,
+  InputHTMLAttributes<HTMLInputElement>
+> & {
+  checked?: boolean;
+  disabled?: boolean;
+  type: 'checkbox' | 'radio';
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+};
+
+const InnerInput: FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
+  function InnerInput(props, forwardedRef) {
+    const {
+      type,
+      color = 'primary',
+      checked,
+      'aria-checked': ariaChecked,
+      defaultChecked,
+      value,
+      name,
+      defaultValue,
+      disabled,
+      onChange,
+      leadingIcon,
+      trailingIcon,
+      children,
+      __css,
+      ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    return (
+      <ChipBase
+        as="label"
+        disabled={disabled}
+        backgroundColor={checked ? color + '-container' : 'surface'}
+        color={checked ? 'on.' + color + '-container' : 'on.surface'}
+        borderOpacity={checked ? 0 : 0.24}
+        __css={__css}
+        {...otherProps}
+      >
+        <Box
+          as="span"
+          __css={{
+            width: '100%',
+            height: '100%',
+            border: 'none',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pl: leadingIcon ? rem(8) : rem(12),
+            pr: trailingIcon ? rem(8) : rem(12),
+          }}
+        >
+          <RippleBox<
+            RippleBoxProps<
+              HTMLInputElement,
+              InputHTMLAttributes<HTMLInputElement>
+            >
+          >
+            as="input"
+            type={type}
+            aria-checked={ariaChecked}
+            checked={checked}
+            onChange={onChange}
+            defaultChecked={defaultChecked}
+            value={value}
+            defaultValue={defaultValue}
+            theme={theme}
+            disabled={disabled}
+            rippleColor={color}
+            baseOpacity={0}
+            hoverOpacity={0.12}
+            focusOpacity={0.24}
+            name={name}
+            ref={forwardedRef}
+            __css={{
+              bg: 'transparent',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              appearance: 'none',
+              ':focus': {
+                outline: 'none',
+              },
+              border: 'none',
+              borderRadius: 0,
+              position: 'absolute',
+            }}
+          />
+          {leadingIcon}
+          {children}
+          {trailingIcon}
+        </Box>
+      </ChipBase>
+    );
+  }
+);
+
+export const ChoiceChip = forwardRef<HTMLInputElement, ChoiceChipProps>(
+  function ChoiceChip(props, forwardedRef) {
+    const { type = 'checkbox', ...otherProps } = props;
+
+    const Comp: FC<ChoiceChipProps> = (
+      type === 'radio' ? RadioButton : CheckBox
+    ) as any;
+
+    return (
+      <Comp ref={forwardedRef} as={InnerInput} type={type} {...otherProps} />
+    );
+  }
+);

package/src/Chip/index.ts

@@ -1,2 +1,2 @@
-export * from './Chip';
-export * from './ChoiceChip';
+export * from './Chip';
+export * from './ChoiceChip';

package/src/Combobox/Combobox.story.tsx

@@ -1,5 +1,5 @@
+import type { ChangeEvent } from 'react';
 import { useMemo, useState } from 'react';
-import * as React from 'react';
 
 import {
   Combobox,
@@ -34,7 +34,7 @@ function UncontrolledClientSideExample({ initialValue = '' }) {
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTerm(event.target.value);
   };
 
@@ -92,7 +92,7 @@ function ControlledClientSideExample({ initialValue = '' }) {
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTerm(event.target.value);
     setSelected('');
   };