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

package/src/Dialog/useDialogAnimation.tsx

@@ -1,50 +1,49 @@
-import { useAnimation } from '../hooks/useAnimation';
-
-const styles = {
-  slide: {
-    closed: { opacity: 0.6, transform: 'translateY(100%)' },
-    open: { opacity: 1, transform: 'translateY(0%)' },
-    close: { opacity: 0, transform: 'translateY(10%)' },
-  },
-  grow: {
-    closed: { opacity: 0.8, transform: 'scale(0.8)' },
-    open: { opacity: 1, transform: 'scale(1)' },
-    close: { opacity: 0, transform: 'scale(1)' },
-  },
-  'slide-grow': {
-    closed: { opacity: 0.8, transform: 'translateY(50%) scale(0.8)' },
-    open: { opacity: 1, transform: 'translateY(0%) scale(1)' },
-    close: { opacity: 0 },
-  },
-};
-
-export type DialogAnimationModes = keyof typeof styles;
-
-export function useDialogAnimation(opts: {
-  open: boolean;
-  mode?: DialogAnimationModes;
-  openTimeoutInMilliseconds?: number;
-  closeTimeoutInMilliseconds?: number;
-}) {
-  const { mode = 'grow', ...otherOpts } = opts;
-  const { open, state, style, timing } = useAnimation({
-    styles,
-    mode,
-    ...otherOpts,
-  });
-  const scrimOpacity = state === 'open' ? 1 : 0;
-
-  const transition = `opacity ${timing}ms cubic-bezier(.4,0,.2,1),transform ${timing}ms cubic-bezier(.4,0,.2,1)`;
-  const scrimTransition = `opacity ${
-    (timing * 0.4) | 0
-  }ms cubic-bezier(.4,0,.2,1)`;
-
-  return {
-    containerStyle: { ...style, transition },
-    scrimStyle: {
-      opacity: scrimOpacity,
-      transition: scrimTransition,
-    },
-    open,
-  };
-}
+import { useAnimation } from '../hooks/useAnimation';
+import { EASING_STANDARD } from '../motion';
+
+const styles = {
+  slide: {
+    closed: { opacity: 0.6, transform: 'translateY(100%)' },
+    open: { opacity: 1, transform: 'translateY(0%)' },
+    close: { opacity: 0, transform: 'translateY(10%)' },
+  },
+  grow: {
+    closed: { opacity: 0.8, transform: 'scale(0.8)' },
+    open: { opacity: 1, transform: 'scale(1)' },
+    close: { opacity: 0, transform: 'scale(1)' },
+  },
+  'slide-grow': {
+    closed: { opacity: 0.8, transform: 'translateY(50%) scale(0.8)' },
+    open: { opacity: 1, transform: 'translateY(0%) scale(1)' },
+    close: { opacity: 0 },
+  },
+};
+
+export type DialogAnimationModes = keyof typeof styles;
+
+export function useDialogAnimation(opts: {
+  open: boolean;
+  mode?: DialogAnimationModes;
+  openTimeoutInMilliseconds?: number;
+  closeTimeoutInMilliseconds?: number;
+}) {
+  const { mode = 'grow', ...otherOpts } = opts;
+  const { open, state, style, timing } = useAnimation({
+    styles,
+    mode,
+    ...otherOpts,
+  });
+  const scrimOpacity = state === 'open' ? 1 : 0;
+
+  const transition = `opacity ${timing}ms ${EASING_STANDARD},transform ${timing}ms ${EASING_STANDARD}`;
+  const scrimTransition = `opacity ${(timing * 0.4) | 0}ms ${EASING_STANDARD}`;
+
+  return {
+    containerStyle: { ...style, transition },
+    scrimStyle: {
+      opacity: scrimOpacity,
+      transition: scrimTransition,
+    },
+    open,
+  };
+}

package/src/Divider/Divider.story.tsx

@@ -1,39 +1,39 @@
-import { Divider } from './';
-import { Text } from '../Text';
-import { Box } from '../Box';
-// import './styles.css';
-
-export default {
-  title: 'components/Divider',
-};
-
-const ExampleHorizontal = () => {
-  return (
-    <Box bg="surface">
-      <Text height={50} p={3}>
-        Hello
-      </Text>
-      <Divider m={2} />
-      <Text height={50} p={3}>
-        Hello
-      </Text>
-    </Box>
-  );
-};
-
-const ExampleVertical = () => {
-  return (
-    <Box bg="surface" display="flex" flexDirection="row">
-      <Text height={50} p={3}>
-        Hello
-      </Text>
-      <Divider m={2} direction="vertical" />
-      <Text height={50} p={3}>
-        Hello
-      </Text>
-    </Box>
-  );
-};
-
-export const Horizontal = () => <ExampleHorizontal />;
-export const Vertical = () => <ExampleVertical />;
+import { Divider } from './';
+import { Text } from '../Text';
+import { Box } from '../Box';
+// import './styles.css';
+
+export default {
+  title: 'components/Divider',
+};
+
+const ExampleHorizontal = () => {
+  return (
+    <Box bg="surface">
+      <Text height={50} p={3}>
+        Hello
+      </Text>
+      <Divider m={2} />
+      <Text height={50} p={3}>
+        Hello
+      </Text>
+    </Box>
+  );
+};
+
+const ExampleVertical = () => {
+  return (
+    <Box bg="surface" display="flex" flexDirection="row">
+      <Text height={50} p={3}>
+        Hello
+      </Text>
+      <Divider m={2} direction="vertical" />
+      <Text height={50} p={3}>
+        Hello
+      </Text>
+    </Box>
+  );
+};
+
+export const Horizontal = () => <ExampleHorizontal />;
+export const Vertical = () => <ExampleVertical />;

package/src/Divider/Divider.tsx

@@ -1,49 +1,48 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { alpha } from '../color';
-
-export interface DividerProps extends BoxProps {
-  as?: React.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: alpha('on.surface', 0.12),
-          }),
-          ...(direction === 'vertical' && {
-            width: 0,
-            borderRightWidth: rem(1),
-            borderRightStyle: 'solid',
-            borderRightColor: alpha('on.surface', 0.12),
-          }),
-          ...__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>();
+  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,76 +1,77 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { rem } from 'polished';
-
-import { Text as _Text } from '../Text';
-import { useNotchedOutlineContext } from '../NotchedOutline/context';
-
-export interface FloatingLabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  children?: React.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: React.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="subtitle1"
-        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 cubic-bezier(.4,0,.2,1), color ${transitionTime}ms cubic-bezier(.4,0,.2,1)`,
-          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="body1" 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>();
+  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 />;