@basic-ui/material 1.0.0-alpha.27 → 1.0.0-alpha.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.27",
+  "version": "1.0.0-alpha.29",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "062149324aa0b0df6dd2a3cd9b7e8b88fdd2e783"
+  "gitHead": "ee3fb47600f6b456b30902d30436894fde9c5387"
 }

package/src/Divider/Divider.tsx

@@ -32,13 +32,13 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
             height: 0,
             borderBottomWidth: rem(1),
             borderBottomStyle: 'solid',
-            borderBottomColor: 'outline',
+            borderBottomColor: 'outline-variant',
           }),
           ...(direction === 'vertical' && {
             width: 0,
             borderRightWidth: rem(1),
             borderRightStyle: 'solid',
-            borderRightColor: 'outline',
+            borderRightColor: 'outline-variant',
           }),
           ...__css,
         }}

package/src/Snackbar/Stack.tsx

@@ -1,5 +1,5 @@
-import type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';
 import {
+  useMemo,
   useLayoutEffect,
   createContext,
   useContext,
@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';
 
 export type StackPlacement =
   | 'top-right'
@@ -209,12 +210,15 @@ export const StackProvider: FC<{
   maxSize?: number;
 }> = ({ children, gap = 8, placement = 'top-right', maxSize = 3 }) => {
   const onAddItemRef = useRef<(element: ReactElement) => void>(null);
-  function onAddItem(element: ReactElement) {
-    onAddItemRef.current?.(element);
-  }
+  const value = useMemo(
+    () => ({
+      addItem: (element: ReactElement) => onAddItemRef.current?.(element),
+    }),
+    []
+  );
 
   return (
-    <StackContext.Provider value={{ addItem: onAddItem }}>
+    <StackContext.Provider value={value}>
       {children}
       <StackContent
         gap={gap}

package/src/theme/theme.ts

@@ -39,6 +39,7 @@ export const theme = {
     surface: '#fcfcfc',
     'surface-variant': '#efdee5',
     outline: '#81747a',
+    'outline-variant': '#d3c2c9',
     on: {
       primary: '#ffffff',
       secondary: '#ffffff',
@@ -52,6 +53,7 @@ export const theme = {
       surface: '#1f1a1c',
       'surface-variant': '#4f4349',
       outline: '#feecf3',
+      'outline-variant': '#22191e',
     },
     modes: {
       dark: {
@@ -67,6 +69,7 @@ export const theme = {
         surface: '#1f1a1c',
         'surface-variant': '#4f4349',
         outline: '#9b8d93',
+        'outline-variant': '#4f4349',
         on: {
           primary: '#5b0e47',
           secondary: '#402a37',
@@ -80,6 +83,7 @@ export const theme = {
           surface: '#eae0e3',
           'surface-variant': '#d3c2c9',
           outline: '#22191e',
+          'outline-variant': '#efdee5',
         },
       },
     },