{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "description": "LiquefyProvider and the config hooks every component reads its tokens from.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport { createContext, useContext, useMemo, useState, type CSSProperties, type ReactNode } from 'react'\n\nexport type LiquefyConfig = {\n  /** Minimum widths behind the responsive form of the `styles` prop. */\n  breakpoints: LiquefyBreakpoints\n  intensity: number\n  lens: boolean\n  motion: boolean\n  /** One spacing unit. `styles={{ p: 3 }}` resolves to three of these. */\n  spacing: number | string\n  theme: LiquefyTheme\n  tint: string\n  transparency: boolean\n  webgl: boolean\n  wobbliness: number\n}\n\nexport type LiquefyBreakpoint = 'lg' | 'md' | 'sm' | 'xl'\n\nexport type LiquefyBreakpoints = Record<LiquefyBreakpoint, number | string>\n\nexport type LiquefyTheme = 'dark' | 'light' | 'system'\n\nexport type LiquefyProviderProps = Partial<Omit<LiquefyConfig, 'breakpoints'>> & {\n  breakpoints?: Partial<LiquefyBreakpoints>\n  children: ReactNode\n  className?: string\n}\n\nexport const defaultBreakpoints: LiquefyBreakpoints = {\n  lg: 1024,\n  md: 768,\n  sm: 640,\n  xl: 1280,\n}\n\nconst defaultConfig: LiquefyConfig = {\n  breakpoints: defaultBreakpoints,\n  intensity: 0.72,\n  lens: true,\n  motion: true,\n  spacing: 4,\n  theme: 'system',\n  tint: '#8eb9ff',\n  transparency: true,\n  webgl: true,\n  wobbliness: 1,\n}\n\nconst LiquefyContext = createContext<LiquefyConfig>(defaultConfig)\n\n// Portaled surfaces (Select/Menu popovers) land in this node rather than\n// document.body, so they stay inside the provider subtree and inherit the\n// theme custom properties — otherwise they render with no fill or shadow.\nconst LiquefyPortalContext = createContext<HTMLElement | null>(null)\n\ntype CustomProperties = CSSProperties & Record<`--${string}`, string | number>\n\nexport const LiquefyProvider = ({\n  breakpoints,\n  children,\n  className,\n  intensity = defaultConfig.intensity,\n  lens = defaultConfig.lens,\n  motion = defaultConfig.motion,\n  spacing = defaultConfig.spacing,\n  theme = defaultConfig.theme,\n  tint = defaultConfig.tint,\n  transparency = defaultConfig.transparency,\n  webgl = defaultConfig.webgl,\n  wobbliness = defaultConfig.wobbliness,\n}: LiquefyProviderProps) => {\n  const [portalNode, setPortalNode] = useState<HTMLDivElement | null>(null)\n  // Serialized so an inline `breakpoints={{ md: 900 }}` literal does not hand\n  // every consumer a fresh config object on each render.\n  const breakpointsKey = breakpoints ? JSON.stringify(breakpoints) : ''\n  const resolvedBreakpoints = useMemo(\n    () => (breakpoints ? { ...defaultBreakpoints, ...breakpoints } : defaultBreakpoints),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [breakpointsKey],\n  )\n  const value = useMemo(\n    () => ({\n      breakpoints: resolvedBreakpoints,\n      intensity,\n      lens,\n      motion,\n      spacing,\n      theme,\n      tint,\n      transparency,\n      webgl,\n      wobbliness,\n    }),\n    [resolvedBreakpoints, intensity, lens, motion, spacing, theme, tint, transparency, webgl, wobbliness],\n  )\n  const style: CustomProperties = {\n    '--lq-accent': tint,\n    '--lq-intensity': intensity,\n    '--lq-space': typeof spacing === 'number' ? `${spacing}px` : spacing,\n  }\n\n  return (\n    <LiquefyContext.Provider value={value}>\n      <div\n        className={['lq-provider', className].filter(Boolean).join(' ')}\n        data-liquid-motion={motion ? 'on' : 'off'}\n        data-liquid-theme={theme}\n        data-liquid-transparency={transparency ? 'on' : 'off'}\n        style={style}\n      >\n        <LiquefyPortalContext.Provider value={portalNode}>\n          {children}\n          <div className=\"lq-portal\" ref={setPortalNode} />\n        </LiquefyPortalContext.Provider>\n      </div>\n    </LiquefyContext.Provider>\n  )\n}\n\nexport const useLiquefyConfig = (): LiquefyConfig => useContext(LiquefyContext)\n\nexport const useLiquefyPortalContainer = (): HTMLElement | null => useContext(LiquefyPortalContext)\n",
      "path": "registry/provider.tsx",
      "type": "registry:lib"
    }
  ],
  "name": "provider",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json"
  ],
  "title": "defaultBreakpoints",
  "type": "registry:lib"
}