@basic-ui/material 0.1.15 → 1.0.0-alpha.1

package/build/esm/hooks/useAnimation.js

@@ -1,51 +1,62 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState, useEffect, useCallback } from 'react';
 export function useAnimation(opts) {
-  const {
-    styles,
-    mode,
-    open: openProp,
-    openTimeoutInMilliseconds = 225,
-    closeTimeoutInMilliseconds = 110
-  } = opts;
-  const animationStyle = styles[mode];
-  const [{
-    timing,
-    open,
-    state,
-    style
-  }, setAnimation] = useState({
+  var styles = opts.styles,
+      mode = opts.mode,
+      openProp = opts.open,
+      _opts$openTimeoutInMi = opts.openTimeoutInMilliseconds,
+      openTimeoutInMilliseconds = _opts$openTimeoutInMi === void 0 ? 225 : _opts$openTimeoutInMi,
+      _opts$closeTimeoutInM = opts.closeTimeoutInMilliseconds,
+      closeTimeoutInMilliseconds = _opts$closeTimeoutInM === void 0 ? 110 : _opts$closeTimeoutInM;
+  var animationStyle = styles[mode];
+
+  var _useState = useState({
     state: 'closed',
     style: animationStyle.closed,
     timing: closeTimeoutInMilliseconds,
     open: openProp
-  });
-  const handleClose = useCallback(() => {
-    setAnimation(animation => animation.state === 'closed' ? animation : _extends({}, animation, {
-      state: 'close',
-      style: animationStyle.close || animationStyle.closed,
-      timing: closeTimeoutInMilliseconds
-    }));
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      _useState2$ = _useState2[0],
+      timing = _useState2$.timing,
+      open = _useState2$.open,
+      state = _useState2$.state,
+      style = _useState2$.style,
+      setAnimation = _useState2[1];
+
+  var handleClose = useCallback(function () {
+    setAnimation(function (animation) {
+      return animation.state === 'closed' ? animation : _extends({}, animation, {
+        state: 'close',
+        style: animationStyle.close || animationStyle.closed,
+        timing: closeTimeoutInMilliseconds
+      });
+    });
   }, [animationStyle, closeTimeoutInMilliseconds]);
-  const handleOpen = useCallback(() => {
-    setAnimation(animation => animation.state === 'open' ? animation : _extends({}, animation, {
-      open: true,
-      state: 'opening',
-      style: animationStyle.opening || animationStyle.closed
-    }));
+  var handleOpen = useCallback(function () {
+    setAnimation(function (animation) {
+      return animation.state === 'open' ? animation : _extends({}, animation, {
+        open: true,
+        state: 'opening',
+        style: animationStyle.opening || animationStyle.closed
+      });
+    });
   }, [animationStyle]);
-  useEffect(() => {
+  useEffect(function () {
     if (state === 'opening') {
-      setAnimation(animation => _extends({}, animation, {
-        state: 'open',
-        style: animationStyle.open,
-        timing: openTimeoutInMilliseconds
-      }));
+      setAnimation(function (animation) {
+        return _extends({}, animation, {
+          state: 'open',
+          style: animationStyle.open,
+          timing: openTimeoutInMilliseconds
+        });
+      });
     }
   }, [animationStyle.open, openTimeoutInMilliseconds, state]);
-  useEffect(() => {
+  useEffect(function () {
     if (state === 'close') {
-      const timeout = setTimeout(() => {
+      var timeout = setTimeout(function () {
         setAnimation({
           state: 'closed',
           style: animationStyle.closed,
@@ -53,10 +64,12 @@ export function useAnimation(opts) {
           timing: closeTimeoutInMilliseconds
         });
       }, closeTimeoutInMilliseconds);
-      return () => clearTimeout(timeout);
+      return function () {
+        return clearTimeout(timeout);
+      };
     }
   }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);
-  useEffect(() => {
+  useEffect(function () {
     if (openProp) {
       handleOpen();
     } else {
@@ -64,10 +77,10 @@ export function useAnimation(opts) {
     }
   }, [handleClose, handleOpen, openProp]);
   return {
-    state,
-    style,
-    timing,
-    open
+    state: state,
+    style: style,
+    timing: timing,
+    open: open
   };
 }
 //# sourceMappingURL=useAnimation.js.map

package/build/esm/hooks/useAnimation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useAnimation.ts"],"names":["useState","useEffect","useCallback","useAnimation","opts","styles","mode","open","openProp","openTimeoutInMilliseconds","closeTimeoutInMilliseconds","animationStyle","timing","state","style","setAnimation","closed","handleClose","animation","close","handleOpen","opening","timeout","setTimeout","clearTimeout"],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback, CSSProperties } from 'react';\n\nexport type AnimationStateStyles<TStyleProps extends CSSProperties> = {\n  closed: TStyleProps;\n  opening?: TStyleProps;\n  open: TStyleProps;\n  close?: TStyleProps;\n};\n\nexport type AnimationStyles<TStyleProps extends CSSProperties> = Record<\n  string,\n  AnimationStateStyles<TStyleProps>\n>;\n\nexport function useAnimation<\n  TStyles extends AnimationStyles<TStyleProps>,\n  TStyleProps extends CSSProperties\n>(opts: {\n  open: boolean;\n  styles: TStyles;\n  mode: keyof TStyles;\n  openTimeoutInMilliseconds?: number;\n  closeTimeoutInMilliseconds?: number;\n}) {\n  const {\n    styles,\n    mode,\n    open: openProp,\n    openTimeoutInMilliseconds = 225,\n    closeTimeoutInMilliseconds = 110,\n  } = opts;\n  const animationStyle = styles[mode];\n  const [{ timing, open, state, style }, setAnimation] = useState<{\n    state: keyof AnimationStateStyles<TStyleProps>;\n    timing: number;\n    open: boolean;\n    style: CSSProperties;\n  }>({\n    state: 'closed',\n    style: animationStyle.closed,\n    timing: closeTimeoutInMilliseconds,\n    open: openProp,\n  });\n\n  const handleClose = useCallback(() => {\n    setAnimation((animation) =>\n      animation.state === 'closed'\n        ? animation\n        : {\n            ...animation,\n            state: 'close',\n            style: animationStyle.close || animationStyle.closed,\n            timing: closeTimeoutInMilliseconds,\n          }\n    );\n  }, [animationStyle, closeTimeoutInMilliseconds]);\n\n  const handleOpen = useCallback(() => {\n    setAnimation((animation) =>\n      animation.state === 'open'\n        ? animation\n        : {\n            ...animation,\n            open: true,\n            state: 'opening',\n            style: animationStyle.opening || animationStyle.closed,\n          }\n    );\n  }, [animationStyle]);\n\n  useEffect(() => {\n    if (state === 'opening') {\n      setAnimation((animation) => ({\n        ...animation,\n        state: 'open',\n        style: animationStyle.open,\n        timing: openTimeoutInMilliseconds,\n      }));\n    }\n  }, [animationStyle.open, openTimeoutInMilliseconds, state]);\n\n  useEffect(() => {\n    if (state === 'close') {\n      const timeout = setTimeout(() => {\n        setAnimation({\n          state: 'closed',\n          style: animationStyle.closed,\n          open: false,\n          timing: closeTimeoutInMilliseconds,\n        });\n      }, closeTimeoutInMilliseconds);\n      return () => clearTimeout(timeout);\n    }\n  }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);\n\n  useEffect(() => {\n    if (openProp) {\n      handleOpen();\n    } else {\n      handleClose();\n    }\n  }, [handleClose, handleOpen, openProp]);\n\n  return {\n    state,\n    style,\n    timing,\n    open,\n  };\n}\n"],"file":"useAnimation.js"}
+{"version":3,"sources":["../../../src/hooks/useAnimation.ts"],"names":["useState","useEffect","useCallback","useAnimation","opts","styles","mode","openProp","open","openTimeoutInMilliseconds","closeTimeoutInMilliseconds","animationStyle","state","style","closed","timing","setAnimation","handleClose","animation","close","handleOpen","opening","timeout","setTimeout","clearTimeout"],"mappings":"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","sourcesContent":["import type { CSSProperties } from 'react';\nimport { useState, useEffect, useCallback } from 'react';\n\nexport type AnimationStateStyles<TStyleProps extends CSSProperties> = {\n  closed: TStyleProps;\n  opening?: TStyleProps;\n  open: TStyleProps;\n  close?: TStyleProps;\n};\n\nexport type AnimationStyles<TStyleProps extends CSSProperties> = Record<\n  string,\n  AnimationStateStyles<TStyleProps>\n>;\n\nexport function useAnimation<\n  TStyles extends AnimationStyles<TStyleProps>,\n  TStyleProps extends CSSProperties\n>(opts: {\n  open: boolean;\n  styles: TStyles;\n  mode: keyof TStyles;\n  openTimeoutInMilliseconds?: number;\n  closeTimeoutInMilliseconds?: number;\n}) {\n  const {\n    styles,\n    mode,\n    open: openProp,\n    openTimeoutInMilliseconds = 225,\n    closeTimeoutInMilliseconds = 110,\n  } = opts;\n  const animationStyle = styles[mode];\n  const [{ timing, open, state, style }, setAnimation] = useState<{\n    state: keyof AnimationStateStyles<TStyleProps>;\n    timing: number;\n    open: boolean;\n    style: CSSProperties;\n  }>({\n    state: 'closed',\n    style: animationStyle.closed,\n    timing: closeTimeoutInMilliseconds,\n    open: openProp,\n  });\n\n  const handleClose = useCallback(() => {\n    setAnimation((animation) =>\n      animation.state === 'closed'\n        ? animation\n        : {\n            ...animation,\n            state: 'close',\n            style: animationStyle.close || animationStyle.closed,\n            timing: closeTimeoutInMilliseconds,\n          }\n    );\n  }, [animationStyle, closeTimeoutInMilliseconds]);\n\n  const handleOpen = useCallback(() => {\n    setAnimation((animation) =>\n      animation.state === 'open'\n        ? animation\n        : {\n            ...animation,\n            open: true,\n            state: 'opening',\n            style: animationStyle.opening || animationStyle.closed,\n          }\n    );\n  }, [animationStyle]);\n\n  useEffect(() => {\n    if (state === 'opening') {\n      setAnimation((animation) => ({\n        ...animation,\n        state: 'open',\n        style: animationStyle.open,\n        timing: openTimeoutInMilliseconds,\n      }));\n    }\n  }, [animationStyle.open, openTimeoutInMilliseconds, state]);\n\n  useEffect(() => {\n    if (state === 'close') {\n      const timeout = setTimeout(() => {\n        setAnimation({\n          state: 'closed',\n          style: animationStyle.closed,\n          open: false,\n          timing: closeTimeoutInMilliseconds,\n        });\n      }, closeTimeoutInMilliseconds);\n      return () => clearTimeout(timeout);\n    }\n  }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);\n\n  useEffect(() => {\n    if (openProp) {\n      handleOpen();\n    } else {\n      handleClose();\n    }\n  }, [handleClose, handleOpen, openProp]);\n\n  return {\n    state,\n    style,\n    timing,\n    open,\n  };\n}\n"],"file":"useAnimation.js"}

package/build/esm/theme/theme.d.ts

@@ -1,36 +1,59 @@
 export declare const theme: {
     googleFonts: string;
     colors: {
-        background: string;
-        surface: string;
-        error: string;
         primary: string;
         secondary: string;
-        muted: string;
+        tertiary: string;
+        error: string;
+        'primary-container': string;
+        'secondary-container': string;
+        'tertiary-container': string;
+        'error-container': string;
+        background: string;
+        surface: string;
+        'surface-variant': string;
+        outline: string;
         on: {
             primary: string;
             secondary: string;
+            tertiary: string;
             error: string;
+            'primary-container': string;
+            'secondary-container': string;
+            'tertiary-container': string;
+            'error-container': string;
             background: string;
             surface: string;
-            muted: string;
+            'surface-variant': string;
+            outline: string;
         };
         modes: {
             dark: {
-                text: string;
-                background: string;
-                surface: string;
-                error: string;
                 primary: string;
                 secondary: string;
-                muted: string;
+                tertiary: string;
+                error: string;
+                'primary-container': string;
+                'secondary-container': string;
+                'tertiary-container': string;
+                'error-container': string;
+                background: string;
+                surface: string;
+                'surface-variant': string;
+                outline: string;
                 on: {
                     primary: string;
                     secondary: string;
+                    tertiary: string;
                     error: string;
+                    'primary-container': string;
+                    'secondary-container': string;
+                    'tertiary-container': string;
+                    'error-container': string;
                     background: string;
                     surface: string;
-                    muted: string;
+                    'surface-variant': string;
+                    outline: string;
                 };
             };
         };
@@ -42,10 +65,19 @@ export declare const theme: {
     radii: {
         none: number;
         default: string;
+        'extra-small': string;
+        'extra-small_top': string;
+        small: string;
+        medium: string;
         large: string;
+        large_end: string;
+        large_top: string;
+        'extra-large': string;
+        'extra-large_top': string;
+        full: string;
         circle: string;
     };
-    shadows: {
+    shadowsOriginal: {
         0: string;
         1: string;
         2: string;
@@ -72,6 +104,14 @@ export declare const theme: {
         23: string;
         24: string;
     };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+    };
     fonts: {
         body: string;
         heading: string;
@@ -187,9 +227,8 @@ export declare const theme: {
         button: {
             variant: string;
             fontSize: number;
-            fontWeight: string;
             letterSpacing: string;
-            lineHeight: string;
+            fontWeight: string;
         };
         caption: {
             variant: string;
@@ -251,17 +290,17 @@ export declare const theme: {
         variants: {
             base: {
                 variant: string;
-                borderRadius: string;
                 boxShadow: string;
                 py: number;
-                px: number;
+                px: string;
                 height: string;
+                borderRadius: string;
                 cursor: string;
                 outline: string;
             };
             text: {
                 variant: string;
-                px: number;
+                px: string;
             };
             filled: {
                 variant: string;
@@ -276,6 +315,7 @@ export declare const theme: {
                 width: string;
                 maxWidth: string;
                 borderRadius: string;
+                px: number;
             };
             'fab-mini': {
                 variant: string;
@@ -283,6 +323,16 @@ export declare const theme: {
                 maxHeight: string;
                 width: string;
                 maxWidth: string;
+                borderRadius: string;
+                px: number;
+            };
+            'fab-large': {
+                variant: string;
+                height: string;
+                maxHeight: string;
+                width: string;
+                maxWidth: string;
+                borderRadius: string;
                 px: number;
             };
             'fab-extended': {
@@ -303,13 +353,19 @@ export declare const theme: {
         };
         elevations: {
             none: {};
-            contained: {
+            default: {
                 transition: string;
-                boxShadow: number;
-                ':focus,:hover': {
+                '&:hover': {
+                    boxShadow: number;
+                };
+                '&:hover:disabled': {
                     boxShadow: number;
                 };
-                ':active': {
+            };
+            elevated: {
+                transition: string;
+                boxShadow: number;
+                '&:hover': {
                     boxShadow: number;
                 };
                 '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
@@ -319,10 +375,7 @@ export declare const theme: {
             floating: {
                 transition: string;
                 boxShadow: number;
-                ':focus,:hover': {
-                    boxShadow: number;
-                };
-                ':active': {
+                ':hover': {
                     boxShadow: number;
                 };
                 '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
@@ -369,39 +422,32 @@ export declare const theme: {
             };
             filled: {
                 variant: string;
+                boxShadow: number;
+                ':active:not([data-disabled])': {
+                    boxShadow: number;
+                };
             };
             outlined: {
                 variant: string;
             };
         };
     };
+    dialogs: {
+        variants: {
+            base: {
+                borderRadius: string;
+            };
+        };
+        backgroundColorOverlay: number;
+    };
     paper: {
         overlays: {
-            '0': number;
-            '1': number;
-            '2': number;
-            '3': number;
-            '4': number;
-            '5': number;
-            '6': number;
-            '7': number;
-            '8': number;
-            '9': number;
-            '10': number;
-            '11': number;
-            '12': number;
-            '13': number;
-            '14': number;
-            '15': number;
-            '16': number;
-            '17': number;
-            '18': number;
-            '19': number;
-            '20': number;
-            '21': number;
-            '22': number;
-            '23': number;
-            '24': number;
+            0: number;
+            1: number;
+            2: number;
+            3: number;
+            4: number;
+            5: number;
         };
     };
     zIndices: {