framercode 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './framer.js';
+export { ContextProviders, WithFramerBreakpoints, FramerCodeProvider, } from './react.js';
+export type { ContextProvidersProps, WithFramerBreakpointsProps, FramerCodeProviderProps, LocaleInfo, } from './react.js';
+export { defaultBreakpointSizes, breakpointForWidth } from './breakpoints.js';
+export type { Breakpoint, VariantMap } from './breakpoints.js';

package/dist/index.js

@@ -0,0 +1,5 @@
+// Public surface: the full Framer runtime (so `framer` / `framer-motion`
+// imports in exported components resolve here) plus the React glue.
+export * from './framer.js';
+export { ContextProviders, WithFramerBreakpoints, FramerCodeProvider, } from './react.js';
+export { defaultBreakpointSizes, breakpointForWidth } from './breakpoints.js';

package/dist/react.d.ts

@@ -0,0 +1,44 @@
+import React, { type ReactNode } from 'react';
+import { type VariantMap } from './breakpoints.js';
+type Routes = Record<string, {
+    path: string;
+}>;
+export interface LocaleInfo {
+    id?: string;
+    slug?: string;
+    code?: string;
+    name?: string;
+}
+export interface FramerCodeProviderProps {
+    /** Client-side navigation handler (e.g. React Router / Next router). */
+    navigate?: (url: string) => void;
+    /** Active locale slug, e.g. "en". */
+    locale?: string;
+    children?: ReactNode;
+}
+/** App-level provider supplying navigation + locale to exported components. */
+export declare function FramerCodeProvider(props: FramerCodeProviderProps): React.JSX.Element;
+export interface ContextProvidersProps {
+    locale?: string;
+    locales?: LocaleInfo[];
+    routes?: Routes;
+    framerSiteId?: string;
+    children?: ReactNode;
+}
+/**
+ * Wraps an exported Framer component with the runtime contexts it expects
+ * (fetch client, custom cursor, form/site id, locale, routes).
+ */
+export declare function ContextProviders({ locale: localeProp, locales, routes, framerSiteId, children, }: ContextProvidersProps): React.JSX.Element;
+export interface WithFramerBreakpointsProps {
+    Component: React.ComponentType<any>;
+    variants: VariantMap;
+    [key: string]: any;
+}
+/**
+ * Renders the variant of a component matching the current viewport width.
+ * All variants are rendered hidden via `.framercode-hidden` and the active one is
+ * revealed by the breakpoint media queries in styles.css.
+ */
+export declare function WithFramerBreakpoints({ Component, variants, ...rest }: WithFramerBreakpointsProps): any;
+export {};

package/dist/react.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useSyncExternalStore, } from 'react';
+// The bundled Framer runtime is compiled JS; pull the runtime providers via a
+// namespace and treat them as untyped (the runtime d.ts doesn't declare them).
+// @ts-ignore - runtime is compiled JS with a partial d.ts.
+import * as FramerRuntime from './framer.js';
+import { breakpointForWidth, fillBreakpoints, } from './breakpoints.js';
+const { CustomCursorHost, FetchClientProvider, FormContext, LocaleInfoContext, } = FramerRuntime;
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+function isEmpty(obj) {
+    return Object.keys(obj).length === 0;
+}
+const routesContext = createContext({});
+const providerContext = createContext({});
+/** App-level provider supplying navigation + locale to exported components. */
+export function FramerCodeProvider(props) {
+    return (_jsx(providerContext.Provider, { value: props, children: props.children }));
+}
+/**
+ * Wraps an exported Framer component with the runtime contexts it expects
+ * (fetch client, custom cursor, form/site id, locale, routes).
+ */
+export function ContextProviders({ locale: localeProp, locales, routes, framerSiteId, children, }) {
+    const outer = useContext(providerContext);
+    const locale = localeProp || outer.locale;
+    const activeLocale = locales?.find((l) => l.slug === locale || l.code === locale || l.id === locale);
+    const localeInfo = useMemo(() => ({
+        activeLocale,
+        locales,
+        setLocale: async () => {
+            // Locale switching is not supported outside Framer; no-op.
+        },
+    }), [activeLocale, locales]);
+    return (_jsx(FetchClientProvider, { children: _jsx(CustomCursorHost, { children: _jsx(FormContext.Provider, { value: framerSiteId, children: _jsx(LocaleInfoContext.Provider, { value: localeInfo, children: _jsx(routesContext.Provider, { value: routes ?? {}, children: children }) }) }) }) }));
+}
+const subscribeResize = (callback) => {
+    window.addEventListener('resize', callback);
+    return () => window.removeEventListener('resize', callback);
+};
+/**
+ * Renders the variant of a component matching the current viewport width.
+ * All variants are rendered hidden via `.framercode-hidden` and the active one is
+ * revealed by the breakpoint media queries in styles.css.
+ */
+export function WithFramerBreakpoints({ Component, variants, ...rest }) {
+    // getServerSnapshot returns '' so SSR/hydration match (server renders all).
+    const current = useSyncExternalStore(subscribeResize, () => breakpointForWidth(window.innerWidth) ?? '', () => '');
+    if (isEmpty(variants)) {
+        return _jsx(Component, { ...rest });
+    }
+    const filled = fillBreakpoints(variants);
+    const groups = new Map();
+    for (const bp of Object.keys(filled)) {
+        const variant = filled[bp];
+        if (!variant)
+            continue;
+        const existing = groups.get(variant);
+        if (existing) {
+            existing.breakpoints.push(bp);
+            existing.className = cx(existing.className, `framercode-${bp}`);
+        }
+        else {
+            groups.set(variant, {
+                variant,
+                className: cx('framercode', 'framercode-hidden', `framercode-${bp}`),
+                breakpoints: [bp],
+            });
+        }
+    }
+    return [...groups.values()].map(({ variant, className, breakpoints }) => {
+        const visible = !current || breakpoints.includes(current);
+        if (!visible)
+            return null;
+        return (_jsx(Component, { suppressHydrationWarning: true, layoutId: variant, ...rest, className: cx(className, rest.className), variant: variant }, variant));
+    });
+}