From fc0e0d957eecc150b6f17dc16d10fcd8b3f36b8c Mon Sep 17 00:00:00 2001
From: v1rtl <hi@v1rtl.site>
Date: Sat, 30 Nov 2024 02:05:04 +0200
Subject: [PATCH] doc fixes

---
 components/src/css/sprinkles.css.ts |  8 +++++++
 components/src/tokens/space.ts      |  1 +
 docs/src/components/NavBar.tsx      | 15 ++++++++----
 docs/src/components/SideBar.tsx     | 36 ++++++++++++++---------------
 docs/src/playroom/PlayroomState.tsx |  2 +-
 5 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/components/src/css/sprinkles.css.ts b/components/src/css/sprinkles.css.ts
index bc262351..1b1deb52 100644
--- a/components/src/css/sprinkles.css.ts
+++ b/components/src/css/sprinkles.css.ts
@@ -127,6 +127,10 @@ const staticProperties = defineProperties({
     whiteSpace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'initial', 'inherit'],
     textTransform: ['capitalize', 'uppercase', 'lowercase', 'none', 'initial', 'inherit'],
     borderWidth: commonVars.borderWidths,
+    borderRightWidth: commonVars.borderWidths,
+    borderBottomWidth: commonVars.borderWidths,
+    borderLeftWidth: commonVars.borderWidths,
+    borderTopWidth: commonVars.borderWidths,
     position: ['static', 'absolute', 'relative', 'fixed', 'sticky', 'initial', 'inherit'],
     cursor: ['default', 'pointer', 'not-allowed', 'text', 'initial', 'inherit', 'unset'],
     pointerEvents: ['none', 'auto', 'all', 'initial', 'inherit'],
@@ -140,6 +144,10 @@ const staticProperties = defineProperties({
     boxSizing: ['border-box', 'content-box', 'inherit'],
     wordBreak: ['break-all', 'normal', 'inherit'],
     borderStyle: ['solid', 'none', 'inherit'],
+    borderRightStyle: ['solid', 'none', 'inherit'],
+    borderBottomStyle: ['solid', 'none', 'inherit'],
+    borderLeftStyle: ['solid', 'none', 'inherit'],
+    borderTopStyle: ['solid', 'none', 'inherit'],
     touchAction: ['auto', 'none', 'inherit', 'unset'],
     outline: ['none', 'initial', 'inherit'],
     resize: ['none', 'initial', 'inherit'],
diff --git a/components/src/tokens/space.ts b/components/src/tokens/space.ts
index 53884b33..2e9650a9 100644
--- a/components/src/tokens/space.ts
+++ b/components/src/tokens/space.ts
@@ -5,6 +5,7 @@ const negativeSpace = {
   '-4.5': '-1.125rem',
   '-6': '-1.5rem',
   '-px': '-1px',
+  '-full': '-100%',
 }
 
 export const space = {
diff --git a/docs/src/components/NavBar.tsx b/docs/src/components/NavBar.tsx
index 9ded7ada..5cf5b3c4 100644
--- a/docs/src/components/NavBar.tsx
+++ b/docs/src/components/NavBar.tsx
@@ -15,7 +15,7 @@ export const NavBar = ({
     <Box
       display="flex"
       position="fixed"
-      // justifyContent="space-between"
+      justifyContent="space-between"
       alignItems="center"
       top="0"
       left="0"
@@ -23,8 +23,9 @@ export const NavBar = ({
       padding={{ base: '4', sm: '6' }}
       backgroundColor="backgroundPrimary"
       height={{ base: '20', sm: '24' }}
-      // borderBottom="1px solid"
-      // borderBottomColor="border"
+      borderBottomWidth="1x"
+      borderBottomStyle="solid"
+      borderBottomColor="border"
     >
       <Box display="flex">
         <Box
@@ -42,14 +43,18 @@ export const NavBar = ({
               wh="full"
               position="absolute"
               opacity={open ? '1' : '0'}
-              // transition="opacity 0.2s ease-in-out"
+              transitionDuration={200}
+              transitionProperty="all"
+              transitionTimingFunction="ease-in-out"
             />
             <Box
               as={MenuSVG}
               position="absolute"
               wh="full"
               opacity={open ? '0' : '1'}
-              transition="opacity 0.2s ease-in-out"
+              transitionProperty="all"
+              transitionDuration={200}
+              transitionTimingFunction="ease-in-out"
             />
           </Box>
         </Box>
diff --git a/docs/src/components/SideBar.tsx b/docs/src/components/SideBar.tsx
index 84127b0a..9d4391ee 100644
--- a/docs/src/components/SideBar.tsx
+++ b/docs/src/components/SideBar.tsx
@@ -24,20 +24,19 @@ const NavLink = ({
   href,
   children,
 }: PropsWithChildren<{ active: boolean, href: string, target?: string }>) => (
-  <Box>
-    <Link href={href}>
-      <Box
-        backgroundColor={active ? 'blueSurface' : 'transparent'}
-        height="9"
-        display="flex"
-        alignItems="center"
-        borderRadius="large"
-        px="4"
-      >
-        <Typography color={active ? 'accent' : 'text'}>{children}</Typography>
-      </Box>
-    </Link>
-  </Box>
+  <Link href={href}>
+    <Box
+      backgroundColor={active ? 'blueSurface' : 'transparent'}
+      height="9"
+      display="flex"
+      alignItems="center"
+      borderRadius="large"
+      px="4"
+    >
+      <Typography color={active ? 'accent' : 'text'}>{children}</Typography>
+    </Box>
+  </Link>
+
 )
 
 const Heading = ({
@@ -70,14 +69,15 @@ export const SideBar = ({ open, links }: { open: boolean, links: Links }) => {
       position="fixed"
       flexDirection="column"
       top={{ base: '20', sm: '24' }}
-      // left={{ base: open ? '0' : '-100%', sm: '0' }}
       width="64"
       bottom="0"
       backgroundColor="backgroundPrimary"
-      borderRight="1px solid"
+      borderRightWidth="1x"
+      borderRightStyle="solid"
       borderRightColor="border"
       gap="4"
-      transition="left 0.2s ease-in-out"
+      left={{ sm: '0', base: open ? '0' : '-full' }}
+      style={{ transition: 'left 0.2s ease-in-out' }}
       paddingRight="1"
     >
       <ScrollBox width="full" hideDividers>
@@ -155,7 +155,7 @@ export const SideBar = ({ open, links }: { open: boolean, links: Links }) => {
               <div key={name}>
                 <Typography
                   key={name}
-                  fontVariant="smallBold"
+                  fontVariant="extraSmallBold"
                   color="textSecondary"
                   px="4"
                   textTransform="capitalize"
diff --git a/docs/src/playroom/PlayroomState.tsx b/docs/src/playroom/PlayroomState.tsx
index 3c99529f..f1d63c0b 100644
--- a/docs/src/playroom/PlayroomState.tsx
+++ b/docs/src/playroom/PlayroomState.tsx
@@ -72,7 +72,7 @@ export const PlayroomStateProvider = ({
 }: React.PropsWithChildren<Props>) => {
   const [fallbackDefaultState] = React.useState(() => new Map())
   const defaultState = defaultStateProp ?? fallbackDefaultState
-  const state = React.useState(new Map<string, any>())
+  const state = React.useState(() => new Map<string, any>())
   const storeConsumer = React.useMemo(
     () => makeStoreConsumer(defaultState, ...state),
     [state, defaultState],