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

package/src/hooks/useAnimation.ts

@@ -1,111 +1,111 @@
-import type { CSSProperties } from 'react';
-import { useState, useEffect, useCallback } from 'react';
-
-export type AnimationStateStyles<TStyleProps extends CSSProperties> = {
-  closed: TStyleProps;
-  opening?: TStyleProps;
-  open: TStyleProps;
-  close?: TStyleProps;
-};
-
-export type AnimationStyles<TStyleProps extends CSSProperties> = Record<
-  string,
-  AnimationStateStyles<TStyleProps>
->;
-
-export function useAnimation<
-  TStyles extends AnimationStyles<TStyleProps>,
-  TStyleProps extends CSSProperties
->(opts: {
-  open: boolean;
-  styles: TStyles;
-  mode: keyof TStyles;
-  openTimeoutInMilliseconds?: number;
-  closeTimeoutInMilliseconds?: number;
-}) {
-  const {
-    styles,
-    mode,
-    open: openProp,
-    openTimeoutInMilliseconds = 225,
-    closeTimeoutInMilliseconds = 110,
-  } = opts;
-  const animationStyle = styles[mode];
-  const [{ timing, open, state, style }, setAnimation] = useState<{
-    state: keyof AnimationStateStyles<TStyleProps>;
-    timing: number;
-    open: boolean;
-    style: CSSProperties;
-  }>({
-    state: 'closed',
-    style: animationStyle.closed,
-    timing: closeTimeoutInMilliseconds,
-    open: openProp,
-  });
-
-  const handleClose = useCallback(() => {
-    setAnimation((animation) =>
-      animation.state === 'closed'
-        ? animation
-        : {
-            ...animation,
-            state: 'close',
-            style: animationStyle.close || animationStyle.closed,
-            timing: closeTimeoutInMilliseconds,
-          }
-    );
-  }, [animationStyle, closeTimeoutInMilliseconds]);
-
-  const handleOpen = useCallback(() => {
-    setAnimation((animation) =>
-      animation.state === 'open'
-        ? animation
-        : {
-            ...animation,
-            open: true,
-            state: 'opening',
-            style: animationStyle.opening || animationStyle.closed,
-          }
-    );
-  }, [animationStyle]);
-
-  useEffect(() => {
-    if (state === 'opening') {
-      setAnimation((animation) => ({
-        ...animation,
-        state: 'open',
-        style: animationStyle.open,
-        timing: openTimeoutInMilliseconds,
-      }));
-    }
-  }, [animationStyle.open, openTimeoutInMilliseconds, state]);
-
-  useEffect(() => {
-    if (state === 'close') {
-      const timeout = setTimeout(() => {
-        setAnimation({
-          state: 'closed',
-          style: animationStyle.closed,
-          open: false,
-          timing: closeTimeoutInMilliseconds,
-        });
-      }, closeTimeoutInMilliseconds);
-      return () => clearTimeout(timeout);
-    }
-  }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);
-
-  useEffect(() => {
-    if (openProp) {
-      handleOpen();
-    } else {
-      handleClose();
-    }
-  }, [handleClose, handleOpen, openProp]);
-
-  return {
-    state,
-    style,
-    timing,
-    open,
-  };
-}
+import type { CSSProperties } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+
+export type AnimationStateStyles<TStyleProps extends CSSProperties> = {
+  closed: TStyleProps;
+  opening?: TStyleProps;
+  open: TStyleProps;
+  close?: TStyleProps;
+};
+
+export type AnimationStyles<TStyleProps extends CSSProperties> = Record<
+  string,
+  AnimationStateStyles<TStyleProps>
+>;
+
+export function useAnimation<
+  TStyles extends AnimationStyles<TStyleProps>,
+  TStyleProps extends CSSProperties
+>(opts: {
+  open: boolean;
+  styles: TStyles;
+  mode: keyof TStyles;
+  openTimeoutInMilliseconds?: number;
+  closeTimeoutInMilliseconds?: number;
+}) {
+  const {
+    styles,
+    mode,
+    open: openProp,
+    openTimeoutInMilliseconds = 225,
+    closeTimeoutInMilliseconds = 110,
+  } = opts;
+  const animationStyle = styles[mode];
+  const [{ timing, open, state, style }, setAnimation] = useState<{
+    state: keyof AnimationStateStyles<TStyleProps>;
+    timing: number;
+    open: boolean;
+    style: CSSProperties;
+  }>({
+    state: 'closed',
+    style: animationStyle.closed,
+    timing: closeTimeoutInMilliseconds,
+    open: openProp,
+  });
+
+  const handleClose = useCallback(() => {
+    setAnimation((animation) =>
+      animation.state === 'closed'
+        ? animation
+        : {
+            ...animation,
+            state: 'close',
+            style: animationStyle.close || animationStyle.closed,
+            timing: closeTimeoutInMilliseconds,
+          }
+    );
+  }, [animationStyle, closeTimeoutInMilliseconds]);
+
+  const handleOpen = useCallback(() => {
+    setAnimation((animation) =>
+      animation.state === 'open'
+        ? animation
+        : {
+            ...animation,
+            open: true,
+            state: 'opening',
+            style: animationStyle.opening || animationStyle.closed,
+          }
+    );
+  }, [animationStyle]);
+
+  useEffect(() => {
+    if (state === 'opening') {
+      setAnimation((animation) => ({
+        ...animation,
+        state: 'open',
+        style: animationStyle.open,
+        timing: openTimeoutInMilliseconds,
+      }));
+    }
+  }, [animationStyle.open, openTimeoutInMilliseconds, state]);
+
+  useEffect(() => {
+    if (state === 'close') {
+      const timeout = setTimeout(() => {
+        setAnimation({
+          state: 'closed',
+          style: animationStyle.closed,
+          open: false,
+          timing: closeTimeoutInMilliseconds,
+        });
+      }, closeTimeoutInMilliseconds);
+      return () => clearTimeout(timeout);
+    }
+  }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);
+
+  useEffect(() => {
+    if (openProp) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+  }, [handleClose, handleOpen, openProp]);
+
+  return {
+    state,
+    style,
+    timing,
+    open,
+  };
+}

package/src/index.ts

@@ -8,7 +8,6 @@ export * from './Button';
 export * from './Combobox';
 export * from './CheckBox';
 export * from './Chip';
-export * from './ColorMode';
 export * from './Divider';
 export * from './Dialog';
 export * from './FloatingLabel';
@@ -17,14 +16,18 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
+export * from './Popover';
 export * from './ProgressSpinner';
 export * from './RadioButton';
 export * from './Ripple';
+export * from './SearchBar';
 export * from './Select';
 export * from './SelectItem';
 export * from './Skeleton';
+export * from './Slider';
 export * from './Snackbar';
 export * from './Switch';
 export * from './Tab';
@@ -33,5 +36,7 @@ export * from './Table';
 export * from './Text';
 export * from './TextField';
 export * from './Tooltip';
+export * from './motion';
 export * from './theme';
 export * from './color';
+export * from './hooks/useAnimation';

package/src/motion.ts

@@ -0,0 +1,7 @@
+export const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+export const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+export const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+export const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+export const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';

package/src/tailwind/extendColors.ts

@@ -0,0 +1,51 @@
+import type { Theme } from '../theme/theme';
+
+export type ColorsObject = { [key: string]: string | ColorsObject };
+export function extendColors(theme: Theme): ColorsObject {
+  const modifiedColors: ColorsObject = {};
+  function extractColors(colors: ColorsObject, arr: ColorsObject, root = '') {
+    function insert(key: string, value: string) {
+      const parts = key.split('-');
+
+      let obj: any = arr;
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        const isLast = i === parts.length - 1;
+
+        if (isLast) {
+          if (typeof obj[part] === 'object') {
+            obj[part].DEFAULT = value;
+          } else {
+            obj[part] = value;
+          }
+        } else {
+          if (typeof obj[part] === 'string') {
+            obj[part] = { DEFAULT: obj[part] };
+          } else if (typeof obj[part] === 'undefined') {
+            obj[part] = {};
+          }
+          obj = obj[part];
+        }
+      }
+    }
+
+    for (const key of Object.keys(colors)) {
+      if (key === 'modes') {
+        continue;
+      }
+
+      const c = colors[key];
+      if (typeof c === 'string') {
+        const varName = `--${root + key}--rgb`;
+        insert(key, `rgba(var(${varName}), <alpha-value>)`);
+      } else if (typeof c === 'object') {
+        const subColors: ColorsObject = {};
+        extractColors(c, subColors, root + key + '-');
+        arr[key] = subColors;
+      }
+    }
+  }
+
+  extractColors(theme.colors as any, modifiedColors);
+  return modifiedColors;
+}

package/src/tailwind/index.ts

@@ -0,0 +1,56 @@
+import plugin from 'tailwindcss/plugin';
+import type { Config as TailwindConfig } from 'tailwindcss';
+import { css } from '@styled-system/css';
+
+import type { Theme } from '../theme';
+import { extendColors } from './extendColors';
+
+export type PluginOptions = {
+  theme?: Theme;
+};
+
+const textVariants = [
+  'display-large',
+  'display-medium',
+  'display-small',
+  'headline-large',
+  'headline-medium',
+  'headline-small',
+  'title-large',
+  'title-medium',
+  'title-small',
+  'label-large',
+  'label-medium',
+  'label-small',
+  'body-large',
+  'body-medium',
+  'body-small',
+];
+
+export default function generatePreset({
+  theme: basicUiTheme,
+}: {
+  theme: Theme;
+}): TailwindConfig {
+  return {
+    content: [],
+    darkMode: 'class',
+    theme: {
+      colors: {
+        ...extendColors(basicUiTheme),
+      },
+    },
+    plugins: [
+      plugin(function ({ addComponents }) {
+        for (const variant of textVariants) {
+          const themeStyle = basicUiTheme.text[variant];
+          if (themeStyle) {
+            addComponents({
+              [`.text-${variant}`]: css(themeStyle)(basicUiTheme) as any,
+            });
+          }
+        }
+      }),
+    ],
+  };
+}

package/src/tailwind/tests/extendColors.test.ts

@@ -0,0 +1,123 @@
+import { extendColors } from '../extendColors';
+
+test('extendColors', () => {
+  expect(
+    extendColors({
+      colors: {
+        primary: '#123456',
+        'primary-container': '#123456',
+        secondary: '#123456',
+        surface: '#123456',
+        'surface-container-lowest': '#123456',
+        'surface-container-low': '#123456',
+        'surface-container': '#123456',
+        'surface-container-high': '#123456',
+        'surface-container-highest': '#123456',
+        on: {
+          primary: '#123456',
+          'primary-container': '#123456',
+          surface: '#123456',
+          'surface-container-lowest': '#123456',
+          'surface-container-low': '#123456',
+          'surface-container': '#123456',
+          'surface-container-high': '#123456',
+          'surface-container-highest': '#123456',
+        },
+      },
+    } as any)
+  ).toMatchInlineSnapshot(`
+    Object {
+      "on": Object {
+        "primary": Object {
+          "DEFAULT": "rgba(var(--on-primary--rgb), <alpha-value>)",
+          "container": "rgba(var(--on-primary-container--rgb), <alpha-value>)",
+        },
+        "surface": Object {
+          "DEFAULT": "rgba(var(--on-surface--rgb), <alpha-value>)",
+          "container": Object {
+            "DEFAULT": "rgba(var(--on-surface-container--rgb), <alpha-value>)",
+            "high": "rgba(var(--on-surface-container-high--rgb), <alpha-value>)",
+            "highest": "rgba(var(--on-surface-container-highest--rgb), <alpha-value>)",
+            "low": "rgba(var(--on-surface-container-low--rgb), <alpha-value>)",
+            "lowest": "rgba(var(--on-surface-container-lowest--rgb), <alpha-value>)",
+          },
+        },
+      },
+      "primary": Object {
+        "DEFAULT": "rgba(var(--primary--rgb), <alpha-value>)",
+        "container": "rgba(var(--primary-container--rgb), <alpha-value>)",
+      },
+      "secondary": "rgba(var(--secondary--rgb), <alpha-value>)",
+      "surface": Object {
+        "DEFAULT": "rgba(var(--surface--rgb), <alpha-value>)",
+        "container": Object {
+          "DEFAULT": "rgba(var(--surface-container--rgb), <alpha-value>)",
+          "high": "rgba(var(--surface-container-high--rgb), <alpha-value>)",
+          "highest": "rgba(var(--surface-container-highest--rgb), <alpha-value>)",
+          "low": "rgba(var(--surface-container-low--rgb), <alpha-value>)",
+          "lowest": "rgba(var(--surface-container-lowest--rgb), <alpha-value>)",
+        },
+      },
+    }
+  `);
+
+  expect(
+    extendColors({
+      colors: {
+        primary: '#123456',
+        'primary-container': '#123456',
+        secondary: '#123456',
+        'surface-container-lowest': '#123456',
+        'surface-container-low': '#123456',
+        'surface-container-high': '#123456',
+        'surface-container-highest': '#123456',
+        'surface-container': '#123456',
+        surface: '#123456',
+        on: {
+          primary: '#123456',
+          'primary-container': '#123456',
+          surface: '#123456',
+          'surface-container-lowest': '#123456',
+          'surface-container-low': '#123456',
+          'surface-container': '#123456',
+          'surface-container-high': '#123456',
+          'surface-container-highest': '#123456',
+        },
+      },
+    } as any)
+  ).toMatchInlineSnapshot(`
+    Object {
+      "on": Object {
+        "primary": Object {
+          "DEFAULT": "rgba(var(--on-primary--rgb), <alpha-value>)",
+          "container": "rgba(var(--on-primary-container--rgb), <alpha-value>)",
+        },
+        "surface": Object {
+          "DEFAULT": "rgba(var(--on-surface--rgb), <alpha-value>)",
+          "container": Object {
+            "DEFAULT": "rgba(var(--on-surface-container--rgb), <alpha-value>)",
+            "high": "rgba(var(--on-surface-container-high--rgb), <alpha-value>)",
+            "highest": "rgba(var(--on-surface-container-highest--rgb), <alpha-value>)",
+            "low": "rgba(var(--on-surface-container-low--rgb), <alpha-value>)",
+            "lowest": "rgba(var(--on-surface-container-lowest--rgb), <alpha-value>)",
+          },
+        },
+      },
+      "primary": Object {
+        "DEFAULT": "rgba(var(--primary--rgb), <alpha-value>)",
+        "container": "rgba(var(--primary-container--rgb), <alpha-value>)",
+      },
+      "secondary": "rgba(var(--secondary--rgb), <alpha-value>)",
+      "surface": Object {
+        "DEFAULT": "rgba(var(--surface--rgb), <alpha-value>)",
+        "container": Object {
+          "DEFAULT": "rgba(var(--surface-container--rgb), <alpha-value>)",
+          "high": "rgba(var(--surface-container-high--rgb), <alpha-value>)",
+          "highest": "rgba(var(--surface-container-highest--rgb), <alpha-value>)",
+          "low": "rgba(var(--surface-container-low--rgb), <alpha-value>)",
+          "lowest": "rgba(var(--surface-container-lowest--rgb), <alpha-value>)",
+        },
+      },
+    }
+  `);
+});

package/src/theme/index.ts

@@ -1,2 +1,2 @@
-export * from './theme';
-export * from './useTheme';
+export * from './theme';
+export * from './useTheme';