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

package/src/Divider/Divider.tsx

@@ -1,48 +1,48 @@
-import type { ElementType } from 'react';
-import { forwardRef } from 'react';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export interface DividerProps extends BoxProps {
-  as?: ElementType<any>;
-  direction?: 'vertical' | 'horizontal';
-}
-
-export const Divider = forwardRef<HTMLDivElement, DividerProps>(
-  function Divider(props, forwardedRef) {
-    const {
-      as = 'div',
-      direction = 'horizontal',
-      __css,
-      ...otherProps
-    } = props;
-
-    return (
-      <Box
-        ref={forwardedRef}
-        as={as}
-        role="separator"
-        {...otherProps}
-        __css={{
-          border: 'none',
-          listStyleType: 'none',
-          ...(direction === 'horizontal' && {
-            height: 0,
-            borderBottomWidth: rem(1),
-            borderBottomStyle: 'solid',
-            borderBottomColor: 'outline-variant',
-          }),
-          ...(direction === 'vertical' && {
-            width: 0,
-            borderRightWidth: rem(1),
-            borderRightStyle: 'solid',
-            borderRightColor: 'outline-variant',
-          }),
-          ...__css,
-        }}
-      />
-    );
-  }
-);
+import type { ElementType } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export interface DividerProps extends BoxProps {
+  as?: ElementType<any>;
+  direction?: 'vertical' | 'horizontal';
+}
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  function Divider(props, forwardedRef) {
+    const {
+      as = 'div',
+      direction = 'horizontal',
+      __css,
+      ...otherProps
+    } = props;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        as={as}
+        role="separator"
+        {...otherProps}
+        __css={{
+          border: 'none',
+          listStyleType: 'none',
+          ...(direction === 'horizontal' && {
+            height: 0,
+            borderBottomWidth: rem(1),
+            borderBottomStyle: 'solid',
+            borderBottomColor: 'outline-variant',
+          }),
+          ...(direction === 'vertical' && {
+            width: 0,
+            borderRightWidth: rem(1),
+            borderRightStyle: 'solid',
+            borderRightColor: 'outline-variant',
+          }),
+          ...__css,
+        }}
+      />
+    );
+  }
+);

package/src/Divider/index.ts

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

package/src/FloatingLabel/FloatingLabel.story.tsx

@@ -1,55 +1,55 @@
-import { useRef, useState } from 'react';
-
-import { FloatingLabel as FloatingLabelComponent } from './FloatingLabel';
-import { Box } from '../Box';
-import { Button } from '../Button';
-
-export default {
-  title: 'helper components/FloatingLabel',
-};
-
-const Example = () => {
-  const ref = useRef<HTMLDivElement>();
-  const [active, setActive] = useState(false);
-
-  return (
-    <Box p={4}>
-      <Box
-        display="flex"
-        style={{ position: 'relative' }}
-        px={3}
-        width={200}
-        maxWidth={200}
-        height={50}
-        maxHeight={50}
-        ref={ref}
-        mb={2}
-        bg="#eee"
-      >
-        <FloatingLabelComponent active={active} height={50}>
-          Standard
-        </FloatingLabelComponent>
-      </Box>
-      <Box
-        display="flex"
-        style={{ position: 'relative' }}
-        px={3}
-        width={200}
-        maxWidth={200}
-        height={50}
-        maxHeight={50}
-        ref={ref}
-        mb={2}
-        bg="#eee"
-      >
-        <FloatingLabelComponent active={active} height={50} offsetX={16}>
-          Standard
-        </FloatingLabelComponent>
-      </Box>
-      <Button onClick={() => setActive(true)}>Activate</Button>
-      <Button onClick={() => setActive(false)}>Deactivate</Button>
-    </Box>
-  );
-};
-
-export const FloatingLabel = () => <Example />;
+import { useRef, useState } from 'react';
+
+import { FloatingLabel as FloatingLabelComponent } from './FloatingLabel';
+import { Box } from '../Box';
+import { Button } from '../Button';
+
+export default {
+  title: 'helper components/FloatingLabel',
+};
+
+const Example = () => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [active, setActive] = useState(false);
+
+  return (
+    <Box p={4}>
+      <Box
+        display="flex"
+        style={{ position: 'relative' }}
+        px={3}
+        width={200}
+        maxWidth={200}
+        height={50}
+        maxHeight={50}
+        ref={ref}
+        mb={2}
+        bg="#eee"
+      >
+        <FloatingLabelComponent active={active} height={50}>
+          Standard
+        </FloatingLabelComponent>
+      </Box>
+      <Box
+        display="flex"
+        style={{ position: 'relative' }}
+        px={3}
+        width={200}
+        maxWidth={200}
+        height={50}
+        maxHeight={50}
+        ref={ref}
+        mb={2}
+        bg="#eee"
+      >
+        <FloatingLabelComponent active={active} height={50} offsetX={16}>
+          Standard
+        </FloatingLabelComponent>
+      </Box>
+      <Button onClick={() => setActive(true)}>Activate</Button>
+      <Button onClick={() => setActive(false)}>Deactivate</Button>
+    </Box>
+  );
+};
+
+export const FloatingLabel = () => <Example />;

package/src/FloatingLabel/FloatingLabel.tsx

@@ -1,77 +1,77 @@
-import type { ComponentType, LabelHTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-import { rem } from 'polished';
-
-import { Text as _Text } from '../Text';
-import { useNotchedOutlineContext } from '../NotchedOutline/context';
-import { EASING_STANDARD } from '../motion';
-
-export interface FloatingLabelProps
-  extends LabelHTMLAttributes<HTMLLabelElement> {
-  children?: ReactNode;
-  active?: boolean;
-  offsetX?: number;
-  height?: number;
-  scale?: number;
-  px?: number;
-  translateX?: number;
-  translateY?: number;
-  transitionTime?: number;
-}
-
-export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
-  function FloatingLabel(props, forwardedRef) {
-    const {
-      offsetX = 0,
-      scale = 0.75,
-      height = 56,
-      active,
-      transitionTime = 150,
-      style = {},
-      translateX: translateXProp,
-      translateY: translateYProp,
-      children,
-      ...otherProps
-    } = props;
-
-    const ctx = useNotchedOutlineContext();
-    const notchStart = ctx ? ctx.notchStart : 0;
-
-    const Text: ComponentType<any> = _Text;
-
-    const translateX =
-      translateXProp !== undefined ? translateXProp : notchStart - offsetX;
-    const translateY =
-      translateYProp !== undefined ? translateYProp : -height / 2;
-
-    const transform = active
-      ? `translate(${rem(translateX)}, ${rem(translateY)}) scale(${scale})`
-      : undefined;
-
-    return (
-      <Text
-        as="label"
-        variant="body-large"
-        ref={forwardedRef}
-        __css={{
-          position: 'absolute',
-          fontWeight: 'regular',
-          display: 'inline-flex',
-          alignItems: 'center',
-          left: rem(offsetX),
-          height: typeof height === 'number' ? rem(height) : height,
-          transformOrigin: 'left center',
-          transition: `transform ${transitionTime}ms ${EASING_STANDARD}, color ${transitionTime}ms ${EASING_STANDARD}`,
-          pointerEvents: 'none',
-        }}
-        style={{
-          transform,
-          ...style,
-        }}
-        {...otherProps}
-      >
-        {children}
-      </Text>
-    );
-  }
-);
+import type { ComponentType, LabelHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import { Text as _Text } from '../Text';
+import { useNotchedOutlineContext } from '../NotchedOutline/context';
+import { EASING_STANDARD } from '../motion';
+
+export interface FloatingLabelProps
+  extends LabelHTMLAttributes<HTMLLabelElement> {
+  children?: ReactNode;
+  active?: boolean;
+  offsetX?: number;
+  height?: number;
+  scale?: number;
+  px?: number;
+  translateX?: number;
+  translateY?: number;
+  transitionTime?: number;
+}
+
+export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
+  function FloatingLabel(props, forwardedRef) {
+    const {
+      offsetX = 0,
+      scale = 0.75,
+      height = 56,
+      active,
+      transitionTime = 150,
+      style = {},
+      translateX: translateXProp,
+      translateY: translateYProp,
+      children,
+      ...otherProps
+    } = props;
+
+    const ctx = useNotchedOutlineContext();
+    const notchStart = ctx ? ctx.notchStart : 0;
+
+    const Text: ComponentType<any> = _Text;
+
+    const translateX =
+      translateXProp !== undefined ? translateXProp : notchStart - offsetX;
+    const translateY =
+      translateYProp !== undefined ? translateYProp : -height / 2;
+
+    const transform = active
+      ? `translate(${rem(translateX)}, ${rem(translateY)}) scale(${scale})`
+      : undefined;
+
+    return (
+      <Text
+        as="label"
+        variant="body-large"
+        ref={forwardedRef}
+        __css={{
+          position: 'absolute',
+          fontWeight: 'regular',
+          display: 'inline-flex',
+          alignItems: 'center',
+          left: rem(offsetX),
+          height: typeof height === 'number' ? rem(height) : height,
+          transformOrigin: 'left center',
+          transition: `transform ${transitionTime}ms ${EASING_STANDARD}, color ${transitionTime}ms ${EASING_STANDARD}`,
+          pointerEvents: 'none',
+        }}
+        style={{
+          transform,
+          ...style,
+        }}
+        {...otherProps}
+      >
+        {children}
+      </Text>
+    );
+  }
+);

package/src/FloatingLabel/index.ts

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

package/src/LineRipple/LineRipple.story.tsx

@@ -1,43 +1,43 @@
-import { useRef, useState } from 'react';
-
-import { LineRipple } from './';
-import { Box } from '../Box';
-import { Text } from '../Text';
-import { Button } from '../Button';
-
-export default {
-  title: 'helper components/LineRipple',
-};
-
-const Example = () => {
-  const ref = useRef<HTMLDivElement>();
-  const [active, setActive] = useState(false);
-
-  return (
-    <Box p={2}>
-      <Box
-        display="flex"
-        style={{ position: 'relative' }}
-        alignItems="center"
-        justifyContent="center"
-        width={200}
-        maxWidth={200}
-        height={50}
-        maxHeight={50}
-        ref={ref}
-        mb={2}
-        bg="#eee"
-        overflow="hidden"
-      >
-        <Text variant="body-medium" style={{ zIndex: 1 }}>
-          Hello
-        </Text>
-        <LineRipple active={active} />
-      </Box>
-      <Button onClick={() => setActive(true)}>Activate</Button>
-      <Button onClick={() => setActive(false)}>Deactivate</Button>
-    </Box>
-  );
-};
-
-export const Controlled = () => <Example />;
+import { useRef, useState } from 'react';
+
+import { LineRipple } from './';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { Button } from '../Button';
+
+export default {
+  title: 'helper components/LineRipple',
+};
+
+const Example = () => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [active, setActive] = useState(false);
+
+  return (
+    <Box p={2}>
+      <Box
+        display="flex"
+        style={{ position: 'relative' }}
+        alignItems="center"
+        justifyContent="center"
+        width={200}
+        maxWidth={200}
+        height={50}
+        maxHeight={50}
+        ref={ref}
+        mb={2}
+        bg="#eee"
+        overflow="hidden"
+      >
+        <Text variant="body-medium" style={{ zIndex: 1 }}>
+          Hello
+        </Text>
+        <LineRipple active={active} />
+      </Box>
+      <Button onClick={() => setActive(true)}>Activate</Button>
+      <Button onClick={() => setActive(false)}>Deactivate</Button>
+    </Box>
+  );
+};
+
+export const Controlled = () => <Example />;

package/src/LineRipple/LineRipple.tsx

@@ -1,81 +1,81 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import { rem } from 'polished';
-
-import { useTheme } from '../theme';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { EASING_STANDARD } from '../motion';
-
-export interface LineRippleProps extends BoxProps {
-  active?: boolean;
-  transitionDuration?: number;
-  posx?: number;
-  children?: ReactNode;
-}
-
-export const LineRipple = forwardRef<HTMLDivElement, LineRippleProps>(
-  function LineRipple(props, forwardedRef) {
-    const {
-      as: asProp,
-      transitionDuration = 180,
-      color = 'primary',
-      active = false,
-      posx = -1,
-      style: styleProp = {},
-      __css,
-      ...otherProps
-    } = props;
-
-    const [style, setStyle] = useState<CSSProperties>();
-    const theme = useTheme();
-    const leaveTimeout = useRef<number>();
-
-    useEffect(() => {
-      if (active) {
-        setStyle({
-          transform: 'scaleX(1)',
-          transformOrigin: posx >= 0 ? `${posx}px center` : undefined,
-          opacity: 1,
-        });
-      } else {
-        setStyle({
-          transform: 'scaleX(1)',
-          opacity: 0,
-        });
-
-        leaveTimeout.current = window.setTimeout(() => {
-          setStyle(undefined);
-        }, transitionDuration);
-      }
-
-      return () => {
-        clearTimeout(leaveTimeout.current);
-      };
-    }, [active, posx, transitionDuration]);
-
-    return (
-      <Box
-        as={asProp}
-        ref={forwardedRef}
-        bg={color}
-        theme={theme}
-        style={{ ...style, ...styleProp }}
-        __css={{
-          position: 'absolute',
-          bottom: '0',
-          left: '0',
-          width: '100%',
-          height: rem(2),
-          zIndex: 1,
-          transform: 'scaleX(0)',
-          transformOrigin: 'center center',
-          transition: `transform ${transitionDuration}ms ${EASING_STANDARD},opacity ${transitionDuration}ms ${EASING_STANDARD}`,
-          opacity: 0,
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { CSSProperties, ReactNode } from 'react';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { rem } from 'polished';
+
+import { useTheme } from '../theme';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
+
+export interface LineRippleProps extends BoxProps {
+  active?: boolean;
+  transitionDuration?: number;
+  posx?: number;
+  children?: ReactNode;
+}
+
+export const LineRipple = forwardRef<HTMLDivElement, LineRippleProps>(
+  function LineRipple(props, forwardedRef) {
+    const {
+      as: asProp,
+      transitionDuration = 180,
+      color = 'primary',
+      active = false,
+      posx = -1,
+      style: styleProp = {},
+      __css,
+      ...otherProps
+    } = props;
+
+    const [style, setStyle] = useState<CSSProperties>();
+    const theme = useTheme();
+    const leaveTimeout = useRef<number | undefined>(undefined);
+
+    useEffect(() => {
+      if (active) {
+        setStyle({
+          transform: 'scaleX(1)',
+          transformOrigin: posx >= 0 ? `${posx}px center` : undefined,
+          opacity: 1,
+        });
+      } else {
+        setStyle({
+          transform: 'scaleX(1)',
+          opacity: 0,
+        });
+
+        leaveTimeout.current = window.setTimeout(() => {
+          setStyle(undefined);
+        }, transitionDuration);
+      }
+
+      return () => {
+        clearTimeout(leaveTimeout.current);
+      };
+    }, [active, posx, transitionDuration]);
+
+    return (
+      <Box
+        as={asProp}
+        ref={forwardedRef}
+        bg={color}
+        theme={theme}
+        style={{ ...style, ...styleProp }}
+        __css={{
+          position: 'absolute',
+          bottom: '0',
+          left: '0',
+          width: '100%',
+          height: rem(2),
+          zIndex: 1,
+          transform: 'scaleX(0)',
+          transformOrigin: 'center center',
+          transition: `transform ${transitionDuration}ms ${EASING_STANDARD},opacity ${transitionDuration}ms ${EASING_STANDARD}`,
+          opacity: 0,
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/LineRipple/index.ts

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

package/src/Link/Link.story.tsx

@@ -1,14 +1,14 @@
-import { Link } from './';
-import { Text } from '../Text';
-
-export default { title: 'components/Link' };
-
-const Example = () => {
-  return (
-    <Text>
-      Hello world. Welcome to <Link href="https://google.com">Google.com</Link>
-    </Text>
-  );
-};
-
-export const Simple = () => <Example />;
+import { Link } from './';
+import { Text } from '../Text';
+
+export default { title: 'components/Link' };
+
+const Example = () => {
+  return (
+    <Text>
+      Hello world. Welcome to <Link href="https://google.com">Google.com</Link>
+    </Text>
+  );
+};
+
+export const Simple = () => <Example />;