@basic-ui/material 1.0.0-alpha.10 → 1.0.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -27,7 +27,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.41",
+    "@basic-ui/core": "^0.0.42",
+    "@basic-ui/dynamic-theme": "^0.0.1",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -49,8 +50,7 @@
     "@styled-system/css": "*",
     "polished": ">=3.0.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
-    "react-spring": "^9.0.0"
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "44f1ac879a4c37d4ae50c4c86fcd6920487e27c5"
+  "gitHead": "e90a86a4df1e30eab6fdf6c19eef30249d71c69a"
 }

package/src/CheckBox/CheckBox.story.tsx

@@ -86,22 +86,23 @@ const HeartCheckBoxIcon = (props) => {
 
 function ThreeStates() {
   const [state, setState] = useState<boolean | 'mixed'>(false);
+  const prevState = useRef(false);
 
   function onChange() {
-    console.log('here', state);
     switch (state) {
       case false:
+        prevState.current = false;
         setState('mixed');
         break;
       case 'mixed':
-        setState(true);
+        setState(prevState.current ? false : true);
         break;
       case true:
-        setState(false);
+        prevState.current = true;
+        setState('mixed');
         break;
     }
   }
-  console.log({ state });
 
   return (
     <CheckBox

package/src/ProgressSpinner/ProgressSpinner.tsx

@@ -15,10 +15,10 @@ export type ProgressSpinnerProps = BoxProps & {
 
 const innerDivRotate = keyframes({
   '0%': {
-    transformOrigin: '50% 50%',
+    transform: 'rotate(-90deg)',
   },
   '100%': {
-    transform: 'rotate(360deg)',
+    transform: 'rotate(270deg)',
   },
 });
 
@@ -70,9 +70,11 @@ export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
             display: 'inline-block',
             width: '100%',
             height: '100%',
-            ...(indeterminate
-              ? { animation: `${innerDivRotate} 1.4s linear infinite` }
-              : { transform: 'rotate(-90deg)' }),
+            transformOrigin: '50% 50%',
+            transform: 'rotate(-90deg)',
+            ...(indeterminate && {
+              animation: `${innerDivRotate} 1.4s linear infinite`,
+            }),
           }}
         >
           <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>
@@ -102,8 +104,6 @@ export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
                 indeterminate
                   ? {
                       animation: `${circleIndeterminate} 1.4s ease-in-out infinite`,
-                      strokeDasharray: '80px, 200px',
-                      strokeDashoffset: '0px',
                     }
                   : {
                       transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,

package/src/Snackbar/Snackbar.tsx

@@ -2,13 +2,13 @@ import { assignMultipleRefs } from '@basic-ui/core';
 import { rem } from 'polished';
 import type { ReactElement } from 'react';
 import { cloneElement, forwardRef, useRef } from 'react';
-
-import { Box } from '../Box';
 import {
   DARK_THEME_CLASS,
   DEFAULT_THEME_CLASS,
   useColorMode,
-} from '../ColorMode';
+} from '@basic-ui/dynamic-theme';
+
+import { Box } from '../Box';
 import type { PaperProps } from '../Paper';
 import { Paper } from '../Paper';
 import { Text } from '../Text';

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -1,169 +1,7 @@
-import { useMemo, useDeferredValue, useEffect } from 'react';
-import {
-  CorePalette,
-  argbFromHex,
-  hexFromArgb,
-} from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
-import type { Color } from '@basic-ui/color-picker';
-import { toColor } from '@basic-ui/color-picker';
-
-import { Box } from '..';
-import { TonalColors } from './components';
-import { TextFieldColorPicker } from './TextFieldColorPicker';
-import { ThemeColors } from './ThemeColors';
-import { makeColorScheme } from './makeColorScheme';
-import { theme } from '../theme';
-import { Text } from '../Text';
-import { Button } from '../Button';
-import { useLocalStorageCachedState } from './useLocalStorageCachedState';
-import { useDeferredColor } from './useDeferredColor';
+import { ThemeBuilder } from './ThemeBuilder';
 
 export default {
   title: 'components/ThemeExplorer',
 };
 
-const ThemeBuilder = () => {
-  const [primaryColor, setPrimaryColor] = useLocalStorageCachedState<Color>(
-    'primary',
-    toColor('hex', theme.colors.primary)
-  );
-  const deferredPrimaryColor = useDeferredValue(primaryColor);
-
-  const { a1, a2, a3, error, n1, n2 } = useMemo(
-    () => CorePalette.of(argbFromHex(deferredPrimaryColor.hex)),
-    [deferredPrimaryColor.hex]
-  );
-
-  const [secondaryColor, secondaryColorTonal, setSecondaryColor] =
-    useDeferredColor('secondary', a2);
-  const [tertiaryColor, tertiaryColorTonal, setTertiaryColor] =
-    useDeferredColor('tertiary', a3);
-  const [neutralColor, neutralColorTonal, setNeutralColor] = useDeferredColor(
-    'neutral',
-    n1
-  );
-
-  const scheme = useMemo(
-    () =>
-      makeColorScheme({
-        primary: a1,
-        secondary: secondaryColorTonal,
-        tertiary: tertiaryColorTonal,
-        error: error,
-        neutral: neutralColorTonal,
-        neutralVariant: n2,
-      }),
-    [a1, secondaryColorTonal, tertiaryColorTonal, error, neutralColorTonal, n2]
-  );
-
-  useEffect(() => {
-    localStorage.setItem('theme-builder.themeOverride', JSON.stringify(scheme));
-  }, [scheme]);
-
-  return (
-    <Box display="flex">
-      <Box
-        display="flex"
-        my={3}
-        sx={{ gap: 3 }}
-        flexDirection="column"
-        width="300px"
-        position="fixed"
-        top="0"
-      >
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Primary color"
-            value={primaryColor}
-            onChange={(c) => setPrimaryColor(c)}
-          />
-          <Button variant="text" disabled={true}>
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Secondary color"
-            value={
-              secondaryColor ||
-              toColor('hex', hexFromArgb(secondaryColorTonal.tone(40)))
-            }
-            onChange={(c) => setSecondaryColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setSecondaryColor(null)}
-            disabled={secondaryColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Tertiary color"
-            value={
-              tertiaryColor ||
-              toColor('hex', hexFromArgb(tertiaryColorTonal.tone(40)))
-            }
-            onChange={(c) => setTertiaryColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setTertiaryColor(null)}
-            disabled={tertiaryColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Neutral color"
-            value={
-              neutralColor ||
-              toColor('hex', hexFromArgb(neutralColorTonal.tone(40)))
-            }
-            onChange={(c) => setNeutralColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setNeutralColor(null)}
-            disabled={neutralColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
-      </Box>
-      <Box width="100%" pl="300px">
-        <Box width="600px" mx="auto">
-          <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
-            <Box flex="1">
-              <Text variant="title-medium" as="h1" pb={'0.3em'}>
-                Light theme
-              </Text>
-              <ThemeColors scheme={scheme} />
-            </Box>
-            <Box flex="1">
-              <Text variant="title-medium" as="h1" pb={'0.3em'}>
-                Dark theme
-              </Text>
-              <ThemeColors scheme={scheme.modes.dark} />
-            </Box>
-          </Box>
-          <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
-            <TonalColors palette={a1} />
-            <TonalColors palette={secondaryColorTonal} />
-            <TonalColors palette={tertiaryColorTonal} />
-            <TonalColors palette={error} />
-            <TonalColors palette={neutralColorTonal} />
-            <TonalColors palette={n2} />
-          </Box>
-          <Box as="pre" fontFamily="monospace" fontSize="12px">
-            {JSON.stringify({ colors: scheme }, null, 2)}
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
 export const Builder = () => <ThemeBuilder />;

package/src/ThemeExplorer/ThemeBuilder.tsx

@@ -0,0 +1,198 @@
+import type { ComponentType } from 'react';
+import { useState, useMemo, useDeferredValue, useEffect } from 'react';
+import {
+  CorePalette,
+  argbFromHex,
+  hexFromArgb,
+} from '@material/material-color-utilities';
+import type { Color } from '@basic-ui/color-picker';
+import { toColor } from '@basic-ui/color-picker';
+import {
+  THEME_OVERRIDE_KEY,
+  injectThemeOverride,
+  transformTheme,
+} from '@basic-ui/dynamic-theme';
+
+import { Box } from '../Box';
+import { TonalColors } from './components';
+import { TextFieldColorPicker } from './TextFieldColorPicker';
+import { ThemeColors } from './ThemeColors';
+import { makeColorScheme } from './makeColorScheme';
+import { theme } from '../theme';
+import { Text } from '../Text';
+import { Button } from '../Button';
+import { useLocalStorageCachedState } from './useLocalStorageCachedState';
+import { useDeferredColor } from './useDeferredColor';
+
+export interface ThemeBuilderProps {
+  CodeHighlightingComponent?: ComponentType<{
+    children: string;
+    className: string;
+    showButtons?: boolean;
+  }>;
+}
+
+function DefaultHighlighter(props: { children: string }) {
+  return (
+    <Box as="pre" fontFamily="monospace" fontSize="12px">
+      {props.children}
+    </Box>
+  );
+}
+
+export const ThemeBuilder = (props: ThemeBuilderProps) => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  return <ThemeBuilderImpl {...props} />;
+};
+
+const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
+  const { CodeHighlightingComponent = DefaultHighlighter } = props;
+  const [primaryColor, setPrimaryColor] = useLocalStorageCachedState<Color>(
+    toColor('hex', theme.colors.primary),
+    'primary'
+  );
+  const deferredPrimaryColor = useDeferredValue(primaryColor);
+
+  const { a1, a2, a3, error, n1, n2 } = useMemo(
+    () => CorePalette.of(argbFromHex(deferredPrimaryColor.hex)),
+    [deferredPrimaryColor.hex]
+  );
+
+  const [secondaryColor, secondaryColorTonal, setSecondaryColor] =
+    useDeferredColor('secondary', a2);
+  const [tertiaryColor, tertiaryColorTonal, setTertiaryColor] =
+    useDeferredColor('tertiary', a3);
+  const [neutralColor, neutralColorTonal, setNeutralColor] = useDeferredColor(
+    'neutral',
+    n1
+  );
+
+  const scheme = useMemo(
+    () =>
+      makeColorScheme({
+        primary: a1,
+        secondary: secondaryColorTonal,
+        tertiary: tertiaryColorTonal,
+        error: error,
+        neutral: neutralColorTonal,
+        neutralVariant: n2,
+      }),
+    [a1, secondaryColorTonal, tertiaryColorTonal, error, neutralColorTonal, n2]
+  );
+
+  const colorModes = useMemo(
+    () => transformTheme({ colors: scheme }, []).colorModes,
+    [scheme]
+  );
+  useEffect(() => {
+    localStorage.setItem(THEME_OVERRIDE_KEY, JSON.stringify({ colorModes }));
+    injectThemeOverride({ colorModes });
+  }, [colorModes]);
+
+  return (
+    <>
+      <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
+        <Box display="flex" minWidth="300px" flex="1">
+          <TextFieldColorPicker
+            label="Primary color"
+            value={primaryColor}
+            onChange={(c) => setPrimaryColor(c)}
+          />
+          <Button
+            variant="text"
+            disabled={
+              primaryColor.hex === toColor('hex', theme.colors.primary).hex
+            }
+            onClick={() =>
+              setPrimaryColor(toColor('hex', theme.colors.primary))
+            }
+          >
+            Reset
+          </Button>
+        </Box>
+        <Box display="flex" minWidth="300px" flex="1">
+          <TextFieldColorPicker
+            label="Secondary color"
+            value={
+              secondaryColor ||
+              toColor('hex', hexFromArgb(secondaryColorTonal.tone(40)))
+            }
+            onChange={(c) => setSecondaryColor(c)}
+          />
+          <Button
+            variant="text"
+            onClick={() => setSecondaryColor(null)}
+            disabled={secondaryColor === null}
+          >
+            Reset
+          </Button>
+        </Box>
+        <Box display="flex" minWidth="300px" flex="1">
+          <TextFieldColorPicker
+            label="Tertiary color"
+            value={
+              tertiaryColor ||
+              toColor('hex', hexFromArgb(tertiaryColorTonal.tone(40)))
+            }
+            onChange={(c) => setTertiaryColor(c)}
+          />
+          <Button
+            variant="text"
+            onClick={() => setTertiaryColor(null)}
+            disabled={tertiaryColor === null}
+          >
+            Reset
+          </Button>
+        </Box>
+        <Box display="flex" minWidth="300px" flex="1">
+          <TextFieldColorPicker
+            label="Neutral color"
+            value={
+              neutralColor ||
+              toColor('hex', hexFromArgb(neutralColorTonal.tone(40)))
+            }
+            onChange={(c) => setNeutralColor(c)}
+          />
+          <Button
+            variant="text"
+            onClick={() => setNeutralColor(null)}
+            disabled={neutralColor === null}
+          >
+            Reset
+          </Button>
+        </Box>
+      </Box>
+      <Box width="100%">
+        <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
+          <Box flex="1">
+            <Text variant="title-medium" as="h1" pb={'0.3em'}>
+              Light theme
+            </Text>
+            <ThemeColors scheme={scheme} />
+          </Box>
+          <Box flex="1">
+            <Text variant="title-medium" as="h1" pb={'0.3em'}>
+              Dark theme
+            </Text>
+            <ThemeColors scheme={scheme.modes.dark} />
+          </Box>
+        </Box>
+        <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
+          <TonalColors palette={a1} />
+          <TonalColors palette={secondaryColorTonal} />
+          <TonalColors palette={tertiaryColorTonal} />
+          <TonalColors palette={error} />
+          <TonalColors palette={neutralColorTonal} />
+          <TonalColors palette={n2} />
+        </Box>
+        <CodeHighlightingComponent className={`language-json`}>
+          {JSON.stringify({ colors: scheme }, null, 2)}
+        </CodeHighlightingComponent>
+      </Box>
+    </>
+  );
+};

package/src/ThemeExplorer/components.tsx

@@ -1,18 +1,18 @@
 import type { CSSProperties } from 'react';
 import { memo, useState } from 'react';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
-import { hexFromArgb, TonalPalette } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
+import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
 
-import { Box, Text, Tooltip } from '../';
+import { Box, Tooltip, Text } from '../';
 
 export const ColorItem = memo(
   (props: {
     token: string;
     style: CSSProperties;
-    height: number;
+    height?: number;
     width: string;
   }) => {
-    const { token, style, height = 50, width } = props;
+    const { token, style, width, height = '100%' } = props;
     const [computedColor, setComputedColor] = useState<string>();
     const hslColor = computedColor
       ? parseToHsl(computedColor)
@@ -41,27 +41,28 @@ export const ColorItem = memo(
           )
         }
       >
-        <Box
-          width={width}
-          height={height}
+        <Text
+          as="div"
+          variant="body-small"
           style={style}
-          pl="10px"
-          pt="10px"
           ref={(ref: HTMLDivElement | null) => {
             if (ref) {
               setComputedColor(window.getComputedStyle(ref).backgroundColor);
             }
           }}
+          sx={{
+            width,
+            height,
+            px: '10px',
+            py: '10px',
+            fontSize: '11px',
+            lineHeight: '11px',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+          }}
         >
-          <Text
-            variant="body-small"
-            as="span"
-            fontSize="11px"
-            lineHeight="11px"
-          >
-            {token}
-          </Text>
-        </Box>
+          {token}
+        </Text>
       </Tooltip>
     );
   }
@@ -88,6 +89,7 @@ export const ColorRow = memo(
             borderBottomRightRadius: 24,
             overflow: 'hidden',
           },
+          height,
         }}
       >
         {colors.map(({ token, bg, color }, idx) => (
@@ -102,7 +104,6 @@ export const ColorRow = memo(
             key={token}
             token={token}
             style={{ backgroundColor: bg, color: color }}
-            height={height}
           />
         ))}
       </Box>
@@ -132,8 +133,10 @@ export const TonalColorItem = memo(
           </>
         }
       >
-        <Box
+        <Text
           key={level}
+          as="div"
+          variant="body-small"
           flex={1}
           display="flex"
           alignItems="center"
@@ -144,7 +147,7 @@ export const TonalColorItem = memo(
           }}
         >
           {level}
-        </Box>
+        </Text>
       </Tooltip>
     );
   }

package/src/ThemeExplorer/index.ts

@@ -0,0 +1 @@
+export * from './ThemeBuilder';

package/src/ThemeExplorer/makeColorScheme.tsx

@@ -1,5 +1,5 @@
 import type { TonalPalette } from '@material/material-color-utilities';
-import { hexFromArgb } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
+import { hexFromArgb } from '@material/material-color-utilities';
 
 export function makeColorScheme(opts: {
   primary: TonalPalette;

package/src/ThemeExplorer/useDeferredColor.tsx

@@ -1,17 +1,16 @@
 import { useMemo, useDeferredValue } from 'react';
-import { TonalPalette, argbFromHex } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
+import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
 import type { Color } from '@basic-ui/color-picker';
 
 import { useLocalStorageCachedState } from './useLocalStorageCachedState';
 
-// import './styles.css';
 export function useDeferredColor(
   key: string,
   fallbackValue: TonalPalette
 ): [Color | null, TonalPalette, (c: Color | null) => void] {
   const [color, setColor] = useLocalStorageCachedState<Color | null>(
-    'theme-builder.' + key,
-    null
+    null,
+    'theme-builder.' + key
   );
   const deferredColor = useDeferredValue(color);
   const colorTonal = useMemo(

package/src/ThemeExplorer/useLocalStorageCachedState.ts

@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'react';
 
 export function useLocalStorageCachedState<T>(
-  key: string,
-  initialValue: T
+  initialValue: T,
+  key: string
 ): [T, (c: T) => void] {
   const [state, _setState] = useState<T>(
     () => JSON.parse(localStorage.getItem(key) || 'null') || initialValue

package/src/Tooltip/Tooltip.story.tsx

@@ -9,7 +9,7 @@ export default {
 };
 
 const Example = () => {
-  const buttonRef = useRef();
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const [counter, setCounter] = useState(0);
   useEffect(() => {
     const interval = setInterval(() => setCounter((f) => f + 1), 50);

package/src/color.ts

@@ -1,8 +1,8 @@
 import type { SystemStyleObject } from '@styled-system/css';
 import { get } from '@styled-system/css';
 import { parseToRgb } from 'polished';
+import { DARK_THEME_CLASS } from '@basic-ui/dynamic-theme';
 
-import { DARK_THEME_CLASS } from './ColorMode';
 import type { Theme } from './theme';
 
 export const alpha =

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';