{"_id":"@beladevo/liquid-glass-ui","name":"@beladevo/liquid-glass-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@beladevo/liquid-glass-ui","version":"0.1.0","description":"Liquid Glass design system — reusable frosted-glass UI components with SVG displacement-map refraction","license":"MIT","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":{"types":"./dist/styles/liquid-glass.css.d.ts","default":"./dist/styles/liquid-glass.css"}},"sideEffects":["*.css"],"scripts":{"build":"tsup","prepare":"tsup","prepublishOnly":"pnpm build"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@types/react":"^19.0.0","tsup":"^8.5.1","typescript":"^5.0.0"},"keywords":["liquid-glass","glass","ui","react","design-system","frosted-glass","backdrop-filter"],"_id":"@beladevo/liquid-glass-ui@0.1.0","gitHead":"e07c998bc18508426d0a5503ab36496df144c27f","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-DCNDghahPxKAbzSgDvBKondfR3C/khizGKspwsZnlVHz5WEoMosjF0zR2W1Ke+EIcmUVeWNq6uJvLGqElhqYew==","shasum":"645a35953a3776c10e10e14b71aa6a83170d83c7","tarball":"https://registry.npmjs.org/@beladevo/liquid-glass-ui/-/liquid-glass-ui-0.1.0.tgz","fileCount":7,"unpackedSize":41481,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFWqF8Lz1r3+6XWAaenRgdgP4StRTOx3y+oajgmRDqcqAiEAxnptHawIM7801KMCWMKKLddfWZRg1iWvQ+q8nCyzWO0="}]},"_npmUser":{"name":"beladevo","email":"omribeladevnew@gmail.com"},"directories":{},"maintainers":[{"name":"beladevo","email":"omribeladevnew@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/liquid-glass-ui_0.1.0_1776703077253_0.39697494206614725"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-20T16:37:57.162Z","0.1.0":"2026-04-20T16:37:57.389Z","modified":"2026-04-20T16:37:57.623Z"},"maintainers":[{"name":"beladevo","email":"omribeladevnew@gmail.com"}],"description":"Liquid Glass design system — reusable frosted-glass UI components with SVG displacement-map refraction","keywords":["liquid-glass","glass","ui","react","design-system","frosted-glass","backdrop-filter"],"license":"MIT","readme":"# liquid-glass-ui\n\nFrosted-glass React component library with SVG displacement-map refraction — buttons, cards, panels, and search inputs with Apple-style liquid glass aesthetics.\n\n---\n\n<!-- SCREENSHOT: Full demo — all components on a gradient/image background showing the glass effect -->\n\n---\n\n## Installation\n\n```bash\nnpm install liquid-glass-ui\n# or\npnpm add liquid-glass-ui\n```\n\n**Peer dependencies:** React ≥ 18\n\n---\n\n## Setup\n\nWrap your app (or the section where you want glass effects) with `LiquidGlassProvider`, and import the stylesheet.\n\n```tsx\nimport { LiquidGlassProvider } from 'liquid-glass-ui'\nimport 'liquid-glass-ui/styles'\n\nexport function App() {\n  return (\n    <LiquidGlassProvider>\n      {/* your content */}\n    </LiquidGlassProvider>\n  )\n}\n```\n\n> The provider injects an invisible SVG filter into the DOM that powers the refraction effect. Without it, components render as plain frosted glass without the displacement distortion.\n\n---\n\n## Components\n\n### `LiquidGlassButton`\n\nA button with three visual variants.\n\n```tsx\n<LiquidGlassButton variant=\"light\">Default</LiquidGlassButton>\n<LiquidGlassButton variant=\"dark\">Dark</LiquidGlassButton>\n<LiquidGlassButton variant=\"cta\">Call to Action</LiquidGlassButton>\n```\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `'light' \\| 'dark' \\| 'cta'` | `'light'` | Visual style |\n\nAccepts all standard `<button>` HTML attributes.\n\n<!-- SCREENSHOT: Three button variants side by side on a gradient background -->\n\n---\n\n### `LiquidGlassCard`\n\nA card container for grouping content.\n\n```tsx\n<LiquidGlassCard variant=\"light\">\n  <h3>Title</h3>\n  <p>Some content here.</p>\n</LiquidGlassCard>\n```\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `'light' \\| 'dark'` | `'light'` | Visual style |\n\nAccepts all standard `<div>` HTML attributes.\n\n<!-- SCREENSHOT: Card with content on a blurred/image background -->\n\n---\n\n### `LiquidGlassPanel`\n\nLike `LiquidGlassCard` but with more padding — intended for larger content sections.\n\n```tsx\n<LiquidGlassPanel variant=\"dark\">\n  <h2>Panel Title</h2>\n  <p>Larger content block.</p>\n</LiquidGlassPanel>\n```\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `'light' \\| 'dark'` | `'light'` | Visual style |\n\n---\n\n### `LiquidGlassSearchBar`\n\nAn input wrapped in a glass surface with an optional icon slot.\n\n```tsx\nimport { SearchIcon } from 'lucide-react'\n\n<LiquidGlassSearchBar\n  icon={<SearchIcon size={16} />}\n  placeholder=\"Search...\"\n  variant=\"light\"\n/>\n```\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `'light' \\| 'dark'` | `'light'` | Visual style |\n| `icon` | `React.ReactNode` | — | Icon rendered on the left |\n\nAccepts all standard `<input>` HTML attributes. Supports `ref` forwarding.\n\n<!-- SCREENSHOT: Search bar with icon, light and dark variants -->\n\n---\n\n## Theming\n\nPass a `theme` object to `LiquidGlassProvider` to customize the look globally.\n\n```tsx\nimport { LiquidGlassProvider, LiquidGlassTheme } from 'liquid-glass-ui'\n\nconst theme: LiquidGlassTheme = {\n  borderRadius: '1rem',\n  blur: 25,\n  tintColor: '45, 108, 223',   // RGB, no alpha\n  tintOpacity: 0.15,\n  specularOpacity: 0.9,\n  outerShadowBlur: '50px',\n}\n\n<LiquidGlassProvider theme={theme}>\n  {/* components pick up the new theme automatically */}\n</LiquidGlassProvider>\n```\n\n| Token | Type | Default | Description |\n|-------|------|---------|-------------|\n| `borderRadius` | `string` | `'1.4rem'` | Corner radius of all surfaces |\n| `blur` | `number` | `20` | Backdrop blur in px |\n| `tintColor` | `string` | `'255, 255, 255'` | RGB tint color (no alpha) |\n| `tintOpacity` | `number` | `0.14` | Tint alpha |\n| `specularOpacity` | `number` | `0.82` | Intensity of the specular highlight |\n| `outerShadowBlur` | `string` | `'40px'` | Outer drop-shadow spread |\n| `innerShadowBlur` | `string` | `'0px'` | Inner glow blur |\n| `innerShadowSpread` | `string` | `'0px'` | Inner glow spread |\n| `innerShadowColor` | `string` | `'rgba(255,255,255,0.45)'` | Inner glow color |\n\n### Dynamic theming (e.g. brand color)\n\n```tsx\nconst hex = brandColor.replace('#', '')\nconst r = parseInt(hex.slice(0, 2), 16)\nconst g = parseInt(hex.slice(2, 4), 16)\nconst b = parseInt(hex.slice(4, 6), 16)\n\nconst theme: LiquidGlassTheme = {\n  tintColor: `${r}, ${g}, ${b}`,\n  tintOpacity: 0.12,\n  innerShadowColor: `rgba(${r}, ${g}, ${b}, 0.22)`,\n}\n```\n\n<!-- SCREENSHOT: Same component with 3 different brand-color themes side by side -->\n\n---\n\n## Utilities\n\nFor cases where you need the CSS classes directly (e.g. styling a third-party component):\n\n```tsx\nimport { liquidGlassClasses } from 'liquid-glass-ui'\n\n<SomeComponent className={liquidGlassClasses.card} />\n```\n\nAvailable class presets: `surface`, `button`, `cta`, `card`, `panel`, `modal`, `dark`, `darkButton`, `darkCard`.\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-ace85291f736e8a48737d1fd8c86ac8e"}