4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T163a,'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: true, 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) export const useLiquefyPortalContainer = (): HTMLElement | null => useContext(LiquefyPortalContext) 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@liquefy-ui","registryDependencies":["https://liquefy-ui.com/r/liquefy-ui.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/provider.tsx","content":"$50","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]