'use client' import { createContext, useContext, useMemo, useState, type CSSProperties, type ReactNode } from 'react' export type LiquefyConfig = { /** Minimum widths behind the responsive form of the `styles` prop. */ breakpoints: LiquefyBreakpoints /** Backdrop blur added to every glass, in pixels. Each surface keeps the blur its own job needs on top. */ frost: number /** * The four ornaments. They are what makes the material read as liquefy-ui * rather than plain glass, and they are separable because a product that * wants the optics without the personality should not have to fork the * stylesheet to get it. */ glow: boolean intensity: number lens: boolean motion: boolean /** * How much of the bend the material can take before the backdrop would * fold back on itself to actually spend, 0 to 1. The top of the range is * the strongest the glass goes, not the point it breaks. */ refraction: number ripple: boolean shimmer: boolean sparkle: boolean /** One spacing unit. `styles={{ p: 3 }}` resolves to three of these. */ spacing: number | string theme: LiquefyTheme tint: string transparency: boolean /** * How much of the material's own dressing sits over the backdrop — fill, * inner sheen, cast shadow and the lift it gives the backdrop's colour — * from 1 for the full material down to 0, which leaves nothing on it but * the lit rim and the refraction behind it. * * A theme that needs more than that to stay legible raises it from * underneath: `--lq-veil-floor` is the least material a theme will let a * surface show, and the dark one asks for some because a hairline on black * is not a panel. Set that property to 0 to opt a subtree out. */ veil: number webgl: boolean wobbliness: number } export type LiquefyBreakpoint = 'lg' | 'md' | 'sm' | 'xl' export type LiquefyBreakpoints = Record export type LiquefyTheme = 'dark' | 'light' | 'system' export type LiquefyProviderProps = Partial> & { breakpoints?: Partial children: ReactNode className?: string } export const defaultBreakpoints: LiquefyBreakpoints = { lg: 1024, md: 768, sm: 640, xl: 1280, } const defaultConfig: LiquefyConfig = { breakpoints: defaultBreakpoints, frost: 0, glow: true, intensity: 1.2, lens: true, motion: true, refraction: 1, ripple: false, shimmer: false, sparkle: false, spacing: 4, theme: 'system', tint: '#8f8f8f', transparency: true, veil: 0, webgl: true, wobbliness: 0.1, } const LiquefyContext = createContext(defaultConfig) // Portaled surfaces (Select/Menu popovers) land in this node rather than // document.body, so they stay inside the provider subtree and inherit the // theme custom properties — otherwise they render with no fill or shadow. const LiquefyPortalContext = createContext(null) type CustomProperties = CSSProperties & Record<`--${string}`, string | number> export const LiquefyProvider = ({ breakpoints, children, className, frost = defaultConfig.frost, glow = defaultConfig.glow, intensity = defaultConfig.intensity, lens = defaultConfig.lens, motion = defaultConfig.motion, refraction = defaultConfig.refraction, ripple = defaultConfig.ripple, shimmer = defaultConfig.shimmer, sparkle = defaultConfig.sparkle, spacing = defaultConfig.spacing, theme = defaultConfig.theme, tint = defaultConfig.tint, transparency = defaultConfig.transparency, veil = defaultConfig.veil, webgl = defaultConfig.webgl, wobbliness = defaultConfig.wobbliness, }: LiquefyProviderProps) => { const [portalNode, setPortalNode] = useState(null) // Serialized so an inline `breakpoints={{ md: 900 }}` literal does not hand // every consumer a fresh config object on each render. const breakpointsKey = breakpoints ? JSON.stringify(breakpoints) : '' const resolvedBreakpoints = useMemo( () => (breakpoints ? { ...defaultBreakpoints, ...breakpoints } : defaultBreakpoints), // eslint-disable-next-line react-hooks/exhaustive-deps [breakpointsKey], ) const value = useMemo( () => ({ breakpoints: resolvedBreakpoints, frost, glow, intensity, lens, motion, refraction, ripple, shimmer, sparkle, spacing, theme, tint, transparency, veil, webgl, wobbliness, }), [ resolvedBreakpoints, frost, glow, intensity, lens, motion, refraction, ripple, shimmer, sparkle, spacing, theme, tint, transparency, veil, webgl, wobbliness, ], ) const style: CustomProperties = { '--lq-accent': tint, '--lq-frost': `${frost}px`, '--lq-intensity': intensity, '--lq-space': typeof spacing === 'number' ? `${spacing}px` : spacing, '--lq-veil': veil, } return (

{children}

) } export const useLiquefyConfig = (): LiquefyConfig => useContext(LiquefyContext) /** * The node inside the provider that popups portal into. Pass it as a Base UI * `Portal`'s `container` so a popup you compose yourself keeps the theme's * custom properties; `null` outside a provider, or before it has mounted. */ export const useLiquefyPortalContainer = (): HTMLElement | null => useContext(LiquefyPortalContext)