unframer 2.7.11 → 2.9.0

package/src/react.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { combinedCSSRules, LayoutGroup } from './framer.js'
+import { combinedCSSRules, LayoutGroup, MotionConfig } from './framer.js'
 
 import {
     ComponentPropsWithoutRef,
@@ -192,3 +192,48 @@ const onResize = (callback) => {
     window.addEventListener('resize', callback)
     return () => window.removeEventListener('resize', callback)
 }
+
+import {
+    // @ts-ignore
+    CustomCursorHost,
+    // @ts-ignore
+    FetchClientProvider,
+    // @ts-ignore
+    FormContext,
+    // @ts-ignore
+    Router,
+} from './framer.js'
+
+export function ContextProviders({
+    locale,
+    children,
+    framerSiteId,
+    routes,
+    routeId,
+    pathVariables,
+    collectionUtils,
+    locales,
+}) {
+    const localeId = locales?.find(
+        (l) => l.slug === locale || l.code === locale || l.id === locale,
+    )?.id
+    return (
+        <FetchClientProvider>
+            <CustomCursorHost>
+                <FormContext.Provider value={framerSiteId}>
+                    <Router
+                        initialRoute={routeId}
+                        initialPathVariables={pathVariables}
+                        initialLocaleId={localeId}
+                        enableImproveInpDuringHydration={true}
+                        routes={routes}
+                        collectionUtils={collectionUtils}
+                        locales={locales}
+                    >
+                        {children}
+                    </Router>
+                </FormContext.Provider>
+            </CustomCursorHost>
+        </FetchClientProvider>
+    )
+}

package/src/utils.ts

@@ -3,6 +3,7 @@ import pico from 'picocolors'
 import { marked } from 'marked'
 import { markedTerminal } from 'marked-terminal'
 import { createSpinner } from 'nanospinner'
+import kebabCase from 'just-kebab-case'
 
 export const spinner = createSpinner('Downloading Framer Components') as any
 
@@ -29,3 +30,11 @@ export const logger = {
         console.error([prefix, ...args].map((x) => pico.red(x)).join(' '))
     },
 }
+
+export function componentNameToPath(name: string) {
+    return name
+        .split('/')
+        .filter(Boolean)
+        .map((part) => kebabCase(part))
+        .join('/')
+}