@gracefullight/liquid-glass/dist/index.mjs.map

Liquid glass UI components for React

{"version":3,"sources":["../src/liquid-glass-provider.tsx","../src/liquid-glass-filters.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { createContext, useContext } from \"react\";\n\nexport interface LiquidGlassConfig {\n  radius?: string;\n  shadow?: string;\n  shadowOffset?: string;\n  shadowBlur?: string;\n  shadowSpread?: string;\n  shadowColor?: string;\n  tintColor?: string;\n  tintOpacity?: number;\n  frostBlur?: string;\n  noiseFrequency?: number;\n  distortionStrength?: number;\n  filterSeed?: number;\n  filterNumOctaves?: number;\n}\n\nconst defaultConfig: LiquidGlassConfig = {\n  radius: \"12px\",\n  shadow: \"0px 6px 24px rgba(0,0,0,0.2)\",\n  shadowOffset: \"0px\",\n  shadowBlur: \"20px\",\n  shadowSpread: \"-5px\",\n  shadowColor: \"rgba(255,255,255,0.7)\",\n  tintColor: \"255,255,255\",\n  tintOpacity: 0.04,\n  frostBlur: \"2px\",\n  noiseFrequency: 0.002,\n  distortionStrength: 10,\n  filterSeed: 92,\n  filterNumOctaves: 2,\n};\n\nconst LiquidGlassContext = createContext<LiquidGlassConfig>(defaultConfig);\n\nexport const LiquidGlassProvider = ({\n  value,\n  children,\n}: { value?: Partial<LiquidGlassConfig>; children: ReactNode }) => {\n  const merged = { ...defaultConfig, ...value };\n  return (\n    <LiquidGlassContext.Provider value={merged}>\n      {children}\n      {/* Global SVG filter definition */}\n      <svg\n        width=\"0\"\n        height=\"0\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        style={{ position: \"absolute\" }}\n      >\n        <title>Liquid Glass SVG Filters</title>\n        <filter\n          id=\"liquid-glass-distortion\"\n          x=\"0\"\n          y=\"0\"\n          width=\"100%\"\n          height=\"100%\"\n        >\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency={`${merged.noiseFrequency} ${merged.noiseFrequency}`}\n            numOctaves={merged.filterNumOctaves}\n            seed={merged.filterSeed}\n            result=\"noise\"\n          />\n          <feGaussianBlur in=\"noise\" stdDeviation=\"2\" result=\"blurred\" />\n          <feDisplacementMap\n            in2=\"blurred\"\n            in=\"SourceGraphic\"\n            scale={merged.distortionStrength}\n            xChannelSelector=\"R\"\n            yChannelSelector=\"G\"\n          />\n        </filter>\n      </svg>\n    </LiquidGlassContext.Provider>\n  );\n};\n\nexport const useLiquidGlass = () => useContext(LiquidGlassContext);\n","import type { FC } from \"react\";\n\nimport { useLiquidGlass } from \"./liquid-glass-provider\";\n\nexport interface LiquidGlassFiltersProps {\n  innerShadowZIndex?: number;\n  backdropFilterZIndex?: number;\n}\n\nexport const LiquidGlassFilters: FC<LiquidGlassFiltersProps> = ({\n  innerShadowZIndex = 0,\n  backdropFilterZIndex = -1,\n}) => {\n  const ctx = useLiquidGlass();\n\n  return (\n    <>\n      {/* Inner shadow and tint layer (::before equivalent) */}\n      <span\n        aria-hidden=\"true\"\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          width: \"100%\",\n          height: \"100%\",\n          zIndex: innerShadowZIndex,\n          borderRadius: \"inherit\",\n          pointerEvents: \"none\",\n          boxShadow: `inset ${ctx.shadowOffset} ${ctx.shadowOffset} ${ctx.shadowBlur} ${ctx.shadowSpread} ${ctx.shadowColor}`,\n          backgroundColor: `rgba(${ctx.tintColor}, ${ctx.tintOpacity})`,\n        }}\n      />\n\n      {/* Backdrop filter layer with SVG distortion (::after equivalent) */}\n      <span\n        aria-hidden=\"true\"\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          width: \"100%\",\n          height: \"100%\",\n          zIndex: backdropFilterZIndex,\n          borderRadius: \"inherit\",\n          pointerEvents: \"none\",\n          isolation: \"isolate\",\n          backdropFilter: `blur(${ctx.frostBlur})`,\n          WebkitBackdropFilter: `blur(${ctx.frostBlur})`,\n          filter: \"url(#liquid-glass-distortion)\",\n          WebkitFilter: \"url(#liquid-glass-distortion)\",\n        }}\n      />\n    </>\n  );\n};\n"],"mappings":";;;AAEA,SAAS,eAAe,kBAAkB;AAoDlC,cACA,YADA;AAlCR,IAAM,gBAAmC;AAAA,EACvC,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,WAAW;AAAA,EACX,aAAa;AAAA,EACb,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,kBAAkB;AACpB;AAEA,IAAM,qBAAqB,cAAiC,aAAa;AAElE,IAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,SAAS,EAAE,GAAG,eAAe,GAAG,MAAM;AAC5C,SACE,qBAAC,mBAAmB,UAAnB,EAA4B,OAAO,QACjC;AAAA;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,eAAY;AAAA,QACZ,WAAU;AAAA,QACV,OAAO,EAAE,UAAU,WAAW;AAAA,QAE9B;AAAA,8BAAC,WAAM,sCAAwB;AAAA,UAC/B;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,GAAE;AAAA,cACF,GAAE;AAAA,cACF,OAAM;AAAA,cACN,QAAO;AAAA,cAEP;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAe,GAAG,OAAO,cAAc,IAAI,OAAO,cAAc;AAAA,oBAChE,YAAY,OAAO;AAAA,oBACnB,MAAM,OAAO;AAAA,oBACb,QAAO;AAAA;AAAA,gBACT;AAAA,gBACA,oBAAC,oBAAe,IAAG,SAAQ,cAAa,KAAI,QAAO,WAAU;AAAA,gBAC7D;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAI;AAAA,oBACJ,IAAG;AAAA,oBACH,OAAO,OAAO;AAAA,oBACd,kBAAiB;AAAA,oBACjB,kBAAiB;AAAA;AAAA,gBACnB;AAAA;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEO,IAAM,iBAAiB,MAAM,WAAW,kBAAkB;;;ACnE7D,mBAEE,OAAAA,MAFF,QAAAC,aAAA;AAPG,IAAM,qBAAkD,CAAC;AAAA,EAC9D,oBAAoB;AAAA,EACpB,uBAAuB;AACzB,MAAM;AACJ,QAAM,MAAM,eAAe;AAE3B,SACE,gBAAAA,MAAA,YAEE;AAAA,oBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,eAAe;AAAA,UACf,WAAW,SAAS,IAAI,YAAY,IAAI,IAAI,YAAY,IAAI,IAAI,UAAU,IAAI,IAAI,YAAY,IAAI,IAAI,WAAW;AAAA,UACjH,iBAAiB,QAAQ,IAAI,SAAS,KAAK,IAAI,WAAW;AAAA,QAC5D;AAAA;AAAA,IACF;AAAA,IAGA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,eAAe;AAAA,UACf,WAAW;AAAA,UACX,gBAAgB,QAAQ,IAAI,SAAS;AAAA,UACrC,sBAAsB,QAAQ,IAAI,SAAS;AAAA,UAC3C,QAAQ;AAAA,UACR,cAAc;AAAA,QAChB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":["jsx","jsxs"]}