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

package/src/NotchedOutline/NotchedOutline.story.tsx

@@ -1,99 +1,99 @@
-import {} from './';
-import { rem } from 'polished';
-
-import { NotchedOutline } from './NotchedOutline';
-import { Box } from '../Box';
-import { FloatingLabel } from '../FloatingLabel';
-// import './styles.css';
-
-export default {
-  title: 'helper components/NotchedOutline',
-};
-
-const Example = () => {
-  const labelWidth = 68.27;
-
-  return (
-    <>
-      <Box
-        m={3}
-        display="inline-block"
-        sx={{ position: 'relative', bg: 'muted', borderRadius: 'extra-small' }}
-      >
-        <NotchedOutline
-          borderColor="primary"
-          borderWidth={1}
-          borderRadius={4}
-          notchWidth={labelWidth * 0.75}
-          notchActive={false}
-          label={<FloatingLabel offsetX={12}>Standard</FloatingLabel>}
-        >
-          <Box width={rem(200)} height={rem(56)} />
-        </NotchedOutline>
-      </Box>
-      <Box>
-        <Box
-          m={3}
-          display="inline-block"
-          sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
-        >
-          <NotchedOutline
-            borderColor="primary"
-            borderWidth={1}
-            borderRadius={4}
-            notchWidth={labelWidth * 0.75}
-            notchActive={true}
-            label={
-              <FloatingLabel active offsetX={12}>
-                Standard
-              </FloatingLabel>
-            }
-          >
-            <Box width={rem(200)} height={rem(56)} />
-          </NotchedOutline>
-        </Box>
-      </Box>
-      {/* With offset */}
-      <Box
-        m={3}
-        display="inline-block"
-        sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
-      >
-        <NotchedOutline
-          borderColor="primary"
-          borderWidth={1}
-          borderRadius={4}
-          notchWidth={labelWidth * 0.75}
-          notchActive={false}
-          label={<FloatingLabel offsetX={12}>Standard</FloatingLabel>}
-        >
-          <Box width={rem(200)} height={rem(56)} />
-        </NotchedOutline>
-      </Box>
-      <Box>
-        <Box
-          m={3}
-          display="inline-block"
-          sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
-        >
-          <NotchedOutline
-            borderColor="primary"
-            borderWidth={1}
-            borderRadius={4}
-            notchWidth={labelWidth * 0.75}
-            notchActive={true}
-            label={
-              <FloatingLabel active offsetX={12}>
-                Standard
-              </FloatingLabel>
-            }
-          >
-            <Box width={rem(200)} height={rem(56)} />
-          </NotchedOutline>
-        </Box>
-      </Box>
-    </>
-  );
-};
-
-export const Controlled = () => <Example />;
+import {} from './';
+import { rem } from 'polished';
+
+import { NotchedOutline } from './NotchedOutline';
+import { Box } from '../Box';
+import { FloatingLabel } from '../FloatingLabel';
+// import './styles.css';
+
+export default {
+  title: 'helper components/NotchedOutline',
+};
+
+const Example = () => {
+  const labelWidth = 68.27;
+
+  return (
+    <>
+      <Box
+        m={3}
+        display="inline-block"
+        sx={{ position: 'relative', bg: 'muted', borderRadius: 'extra-small' }}
+      >
+        <NotchedOutline
+          borderColor="primary"
+          borderWidth={1}
+          borderRadius={4}
+          notchWidth={labelWidth * 0.75}
+          notchActive={false}
+          label={<FloatingLabel offsetX={12}>Standard</FloatingLabel>}
+        >
+          <Box width={rem(200)} height={rem(56)} />
+        </NotchedOutline>
+      </Box>
+      <Box>
+        <Box
+          m={3}
+          display="inline-block"
+          sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
+        >
+          <NotchedOutline
+            borderColor="primary"
+            borderWidth={1}
+            borderRadius={4}
+            notchWidth={labelWidth * 0.75}
+            notchActive={true}
+            label={
+              <FloatingLabel active offsetX={12}>
+                Standard
+              </FloatingLabel>
+            }
+          >
+            <Box width={rem(200)} height={rem(56)} />
+          </NotchedOutline>
+        </Box>
+      </Box>
+      {/* With offset */}
+      <Box
+        m={3}
+        display="inline-block"
+        sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
+      >
+        <NotchedOutline
+          borderColor="primary"
+          borderWidth={1}
+          borderRadius={4}
+          notchWidth={labelWidth * 0.75}
+          notchActive={false}
+          label={<FloatingLabel offsetX={12}>Standard</FloatingLabel>}
+        >
+          <Box width={rem(200)} height={rem(56)} />
+        </NotchedOutline>
+      </Box>
+      <Box>
+        <Box
+          m={3}
+          display="inline-block"
+          sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
+        >
+          <NotchedOutline
+            borderColor="primary"
+            borderWidth={1}
+            borderRadius={4}
+            notchWidth={labelWidth * 0.75}
+            notchActive={true}
+            label={
+              <FloatingLabel active offsetX={12}>
+                Standard
+              </FloatingLabel>
+            }
+          >
+            <Box width={rem(200)} height={rem(56)} />
+          </NotchedOutline>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export const Controlled = () => <Example />;

package/src/NotchedOutline/NotchedOutline.tsx

@@ -1,81 +1,80 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { rem } from 'polished';
-
-import { NotchedOutlineProvider } from './context';
-import { useTheme } from '../theme';
-import { NOTCH_PADDING, InnerContainer } from './styledComponents';
-
-export interface NotchedOutlineProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  borderColor: string;
-  borderStyle?: string;
-  borderWidth: number;
-  borderRadius?: number;
-  notchStart?: number;
-  notchWidth: number;
-  notchActive?: boolean;
-  forceActive?: boolean;
-  label?: React.ReactNode;
-  children?: React.ReactNode;
-}
-
-export const NotchedOutline = forwardRef<HTMLDivElement, NotchedOutlineProps>(
-  function NotchedOutline(props, forwardedRef) {
-    let {
-      /* eslint-disable prefer-const */
-      borderRadius = 0,
-      borderColor = 'primary',
-      borderWidth = 0,
-      borderStyle = 'solid',
-      notchStart = 0,
-      notchWidth = 0,
-      notchActive = false,
-      forceActive = false,
-      children,
-      label,
-      ...otherProps
-      /* eslint-enable prefer-const */
-    } = props;
-
-    // Minimum notch start position that makes sense. Otherwise it will mess up with the border/border radii
-    const MIN_NOTCH_POSX = (props.borderRadius || 0) + NOTCH_PADDING;
-
-    const theme = useTheme();
-
-    notchStart = Math.max(MIN_NOTCH_POSX, notchStart);
-
-    return (
-      <NotchedOutlineProvider value={{ notchStart }}>
-        {children}
-        <InnerContainer
-          ref={forwardedRef}
-          {...otherProps}
-          color={borderColor}
-          theme={theme}
-          borderRadius={borderRadius}
-          borderWidth={borderWidth}
-          borderWidthWhenFocused={borderWidth * 2}
-          borderStyle={borderStyle}
-          notchStart={notchStart}
-          forceActive={forceActive}
-        >
-          <div data-notch-outline-item="start" />
-          {label && (
-            <div
-              data-notch-outline-item="middle"
-              style={{
-                width: notchActive
-                  ? `calc(${notchWidth}px + ${rem(NOTCH_PADDING * 2)})`
-                  : 0,
-              }}
-            >
-              {label}
-            </div>
-          )}
-          <div data-notch-outline-item="end" />
-        </InnerContainer>
-      </NotchedOutlineProvider>
-    );
-  }
-);
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import { NotchedOutlineProvider } from './context';
+import { useTheme } from '../theme';
+import { NOTCH_PADDING, InnerContainer } from './styledComponents';
+
+export interface NotchedOutlineProps extends HTMLAttributes<HTMLDivElement> {
+  borderColor: string;
+  borderStyle?: string;
+  borderWidth: number;
+  borderRadius?: number;
+  notchStart?: number;
+  notchWidth: number;
+  notchActive?: boolean;
+  forceActive?: boolean;
+  label?: ReactNode;
+  children?: ReactNode;
+}
+
+export const NotchedOutline = forwardRef<HTMLDivElement, NotchedOutlineProps>(
+  function NotchedOutline(props, forwardedRef) {
+    let {
+      /* eslint-disable prefer-const */
+      borderRadius = 0,
+      borderColor = 'primary',
+      borderWidth = 0,
+      borderStyle = 'solid',
+      notchStart = 0,
+      notchWidth = 0,
+      notchActive = false,
+      forceActive = false,
+      children,
+      label,
+      ...otherProps
+      /* eslint-enable prefer-const */
+    } = props;
+
+    // Minimum notch start position that makes sense. Otherwise it will mess up with the border/border radii
+    const MIN_NOTCH_POSX = (props.borderRadius || 0) + NOTCH_PADDING;
+
+    const theme = useTheme();
+
+    notchStart = Math.max(MIN_NOTCH_POSX, notchStart);
+
+    return (
+      <NotchedOutlineProvider value={{ notchStart }}>
+        {children}
+        <InnerContainer
+          ref={forwardedRef}
+          {...otherProps}
+          color={borderColor}
+          theme={theme}
+          borderRadius={borderRadius}
+          borderWidth={borderWidth}
+          borderWidthWhenFocused={borderWidth * 2}
+          borderStyle={borderStyle}
+          notchStart={notchStart}
+          forceActive={forceActive}
+        >
+          <div data-notch-outline-item="start" />
+          {label && (
+            <div
+              data-notch-outline-item="middle"
+              style={{
+                width: notchActive
+                  ? `calc(${notchWidth}px + ${rem(NOTCH_PADDING * 2)})`
+                  : 0,
+              }}
+            >
+              {label}
+            </div>
+          )}
+          <div data-notch-outline-item="end" />
+        </InnerContainer>
+      </NotchedOutlineProvider>
+    );
+  }
+);

package/src/NotchedOutline/context.ts

@@ -1,12 +1,12 @@
-import { createContext, useContext } from 'react';
-
-// NotchedOutline Component
-export interface NotchedOutlineContextProps {
-  notchStart: number;
-}
-
-const notchedoutlineContext = createContext<NotchedOutlineContextProps | null>(
-  null
-);
-export const { Provider: NotchedOutlineProvider } = notchedoutlineContext;
-export const useNotchedOutlineContext = () => useContext(notchedoutlineContext);
+import { createContext, useContext } from 'react';
+
+// NotchedOutline Component
+export interface NotchedOutlineContextProps {
+  notchStart: number;
+}
+
+const notchedoutlineContext = createContext<NotchedOutlineContextProps | null>(
+  null
+);
+export const { Provider: NotchedOutlineProvider } = notchedoutlineContext;
+export const useNotchedOutlineContext = () => useContext(notchedoutlineContext);

package/src/NotchedOutline/index.ts

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

package/src/NotchedOutline/styledComponents.ts

@@ -1,121 +1,122 @@
-import styled from '@emotion/styled';
-import { rem } from 'polished';
-import shouldForwardProp from '@styled-system/should-forward-prop';
-import { css } from '@styled-system/css';
-
-import { alpha } from '../color';
-import type { Theme } from '../theme';
-
-export const NOTCH_PADDING = 4;
-
-const makeSelector = (
-  state:
-    | 'hover:not([disabled]):not(:focus)'
-    | 'focus:not([disabled])'
-    | 'disabled'
-) =>
-  `input:${state} ~ & [data-notch-outline-item],` +
-  `select:${state} ~ & [data-notch-outline-item],` +
-  `[role="button"]:${state} ~ & [data-notch-outline-item],` +
-  `textarea:${state} ~ & [data-notch-outline-item]`;
-
-export const InnerContainer = styled('div', {
-  shouldForwardProp,
-})<{
-  color?: string;
-  theme?: Theme;
-  borderRadius: number;
-  borderWidth: number;
-  borderWidthWhenFocused: number;
-  borderStyle: string;
-  notchStart: number;
-  forceActive?: boolean;
-}>(
-  {
-    position: 'absolute',
-    display: 'flex',
-    left: 0,
-    top: 0,
-    bottom: 0,
-    width: '100%',
-    height: '100%',
-    pointerEvents: 'none',
-  },
-  ({
-    color = 'on.surface',
-    borderRadius: borderRadiusPx,
-    borderWidth: borderWidthPx,
-    borderWidthWhenFocused: borderWidthWhenFocusedPx,
-    borderStyle,
-    notchStart,
-    forceActive = false,
-  }) => {
-    const width = rem(notchStart - NOTCH_PADDING);
-    const borderRadius = rem(borderRadiusPx);
-    const borderWidth = rem(borderWidthPx);
-    const borderWidthWhenFocused = rem(borderWidthWhenFocusedPx);
-
-    function borderStyling(borderRadius: string, borderWidth: string) {
-      return {
-        ['&[data-notch-outline-item="start"]']: {
-          borderTopLeftRadius: borderRadius,
-          borderBottomLeftRadius: borderRadius,
-          borderWidth: borderWidth,
-          borderRightWidth: 0,
-          width,
-        },
-        ['&[data-notch-outline-item="middle"]']: {
-          borderWidth: 0,
-          borderBottomWidth: borderWidth,
-        },
-        ['&[data-notch-outline-item="end"]']: {
-          borderWidth: borderWidth,
-          borderLeft: 0,
-          borderTopRightRadius: borderRadius,
-          borderBottomRightRadius: borderRadius,
-          flex: 1,
-        },
-      };
-    }
-
-    const inactiveStyle = {
-      color: 'on.surface-variant',
-      borderColor: 'outline',
-      ...borderStyling(borderRadius, borderWidth),
-    };
-
-    const hoverStyle = {
-      borderColor: 'on.surface',
-      color: 'on.surface-variant',
-    };
-
-    const focusStyle = {
-      borderColor: color,
-      color: alpha(color, 0.87),
-      ...borderStyling(borderRadius, borderWidthWhenFocused),
-    };
-
-    const disabledStyle = {
-      borderColor: alpha('on.surface', 0.06),
-      color: alpha('on.surface', 0.38),
-    };
-
-    return css({
-      // notch items styles when not focused
-      ['[data-notch-outline-item]']: {
-        boxSizing: 'border-box',
-        borderStyle,
-        transition: `border-color .15s cubic-bezier(.4,0,.2,1)`,
-        ...(forceActive ? focusStyle : inactiveStyle),
-      },
-      // notch items styles when input is hovered
-      [makeSelector('hover:not([disabled]):not(:focus)')]: forceActive
-        ? focusStyle
-        : hoverStyle,
-      // notch items styles when input is focused
-      [makeSelector('focus:not([disabled])')]: focusStyle,
-      // notch items styles when input is disabled
-      [makeSelector('disabled')]: disabledStyle,
-    });
-  }
-);
+import styled from '@emotion/styled';
+import { rem } from 'polished';
+import shouldForwardProp from '@styled-system/should-forward-prop';
+import { css } from '@styled-system/css';
+
+import { alpha } from '../color';
+import type { Theme } from '../theme';
+import { EASING_STANDARD } from '../motion';
+
+export const NOTCH_PADDING = 4;
+
+const makeSelector = (
+  state:
+    | 'hover:not([disabled]):not(:focus)'
+    | 'focus:not([disabled])'
+    | 'disabled'
+) =>
+  `input:${state} ~ & [data-notch-outline-item],` +
+  `select:${state} ~ & [data-notch-outline-item],` +
+  `[role="button"]:${state} ~ & [data-notch-outline-item],` +
+  `textarea:${state} ~ & [data-notch-outline-item]`;
+
+export const InnerContainer = styled('div', {
+  shouldForwardProp,
+})<{
+  color?: string;
+  theme?: Theme;
+  borderRadius: number;
+  borderWidth: number;
+  borderWidthWhenFocused: number;
+  borderStyle: string;
+  notchStart: number;
+  forceActive?: boolean;
+}>(
+  {
+    position: 'absolute',
+    display: 'flex',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+  },
+  ({
+    color = 'on.surface',
+    borderRadius: borderRadiusPx,
+    borderWidth: borderWidthPx,
+    borderWidthWhenFocused: borderWidthWhenFocusedPx,
+    borderStyle,
+    notchStart,
+    forceActive = false,
+  }) => {
+    const width = rem(notchStart - NOTCH_PADDING);
+    const borderRadius = rem(borderRadiusPx);
+    const borderWidth = rem(borderWidthPx);
+    const borderWidthWhenFocused = rem(borderWidthWhenFocusedPx);
+
+    function borderStyling(borderRadius: string, borderWidth: string) {
+      return {
+        ['&[data-notch-outline-item="start"]']: {
+          borderTopLeftRadius: borderRadius,
+          borderBottomLeftRadius: borderRadius,
+          borderWidth: borderWidth,
+          borderRightWidth: 0,
+          width,
+        },
+        ['&[data-notch-outline-item="middle"]']: {
+          borderWidth: 0,
+          borderBottomWidth: borderWidth,
+        },
+        ['&[data-notch-outline-item="end"]']: {
+          borderWidth: borderWidth,
+          borderLeft: 0,
+          borderTopRightRadius: borderRadius,
+          borderBottomRightRadius: borderRadius,
+          flex: 1,
+        },
+      };
+    }
+
+    const inactiveStyle = {
+      color: 'on.surface-variant',
+      borderColor: 'outline',
+      ...borderStyling(borderRadius, borderWidth),
+    };
+
+    const hoverStyle = {
+      borderColor: 'on.surface',
+      color: 'on.surface-variant',
+    };
+
+    const focusStyle = {
+      borderColor: color,
+      color: alpha(color, 0.87),
+      ...borderStyling(borderRadius, borderWidthWhenFocused),
+    };
+
+    const disabledStyle = {
+      borderColor: alpha('on.surface', 0.06),
+      color: alpha('on.surface', 0.38),
+    };
+
+    return css({
+      // notch items styles when not focused
+      ['[data-notch-outline-item]']: {
+        boxSizing: 'border-box',
+        borderStyle,
+        transition: `border-color .15s ${EASING_STANDARD}`,
+        ...(forceActive ? focusStyle : inactiveStyle),
+      },
+      // notch items styles when input is hovered
+      [makeSelector('hover:not([disabled]):not(:focus)')]: forceActive
+        ? focusStyle
+        : hoverStyle,
+      // notch items styles when input is focused
+      [makeSelector('focus:not([disabled])')]: focusStyle,
+      // notch items styles when input is disabled
+      [makeSelector('disabled')]: disabledStyle,
+    });
+  }
+);