@amitgandhinz/liquidglass-react 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 drawbuildplay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# Liquid Glass React UI
+
+A modern, highly aesthetically pleasing React UI component library featuring a "Liquid Glass" design system. This library focuses on transparency, blur effects, and depth to create a premium, native-feeling user interface.
+
+## ✨ Design Philosophy
+
+The "Liquid Glass" aesthetic is defined by:
+-   **High Blur & Transparency**: Backgrounds use heavy `backdrop-filter: blur(40px)` with `saturate(190%)` for a vibrant, frosted glass look.
+-   **Depth**: Multi-layered shadows and subtle white borders create a 3D sense of hierarchy.
+-   **Fluidity**: Components like the `Sheet` and `Growl` use smooth, spring-like animations.
+-   **Responsiveness**: Layouts adapt intelligently, such as the `Sheet` transforming from a bottom-sheet on mobile to a centered modal on desktop.
+
+## 🚀 Getting Started
+
+### Prerequisites
+-   Node.js (v16+)
+-   npm or yarn
+
+### Installation
+Clone the repository and install dependencies:
+
+```bash
+git clone https://github.com/drawbuildplay/liquidglass-react.git
+cd liquidglass-react
+npm install
+```
+
+### Running the Environment
+We use **Storybook** for developing and showcasing components in isolation.
+
+```bash
+npm run storybook
+```
+This will open the Storybook interface at `http://localhost:6006`.
+
+## 🧩 Components
+
+The library includes a suite of reusable "glass" components:
+
+-   **`Showcase`**: A full mobile app simulation demonstrating all components working together.
+-   **`Sheet`**: A versatile surface that acts as a bottom-sheet on mobile and a modal on desktop.
+-   **`TabBar`**: A floating, glass-effect navigation bar with active state effects.
+-   **`Toolbar`**: A sticky header component with support for titles and action buttons.
+-   **`PopUpButtonMenu`**: A context menu with glass styling and checkmark support.
+-   **`Alert`**: A premium modal dialog for confirmations and warnings.
+-   **`Growl`**: A slide-down notification for non-blocking feedback.
+-   **`Button`**: Pill-shaped buttons with various variants (Primary, Secondary, Ghost, Destructive).
+-   **`Overlay`**: A standard modal backdrop utility.
+
+## 📱 Showcase Demo
+
+Check out the [Live Demo](https://liquidglass.drawbuildplay.com/?path=/story/examples-showcase--mobile-app-demo) to see the components in action within a simulated iPhone 16 Pro frame.

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/liquid-glass-react.css

@@ -0,0 +1 @@
+.liquid-glass-panel{background:#fff6;backdrop-filter:blur(20px) saturate(100%) contrast(100%);-webkit-backdrop-filter:blur(20px) saturate(190%) contrast(115%);border-radius:32px;padding:24px;border:1px solid rgba(255,255,255,.3);box-shadow:0 25px 60px #0000004d,inset 0 1px 2px #ffffffb3,inset 0 -1px 1px #0000000d;color:#fff;display:flex;flex-direction:column}.profile-name,.profile-bio,.stat-count,.stat-label,.profile-location span{color:#000;text-shadow:0 0 15px rgba(255,255,255,.8),0 0 2px rgba(255,255,255,.5)}.liquid-list{display:flex;flex-direction:column;gap:0;padding:0;width:100%}.liquid-list-item{margin-bottom:0;width:100%}.liquid-card{display:flex;align-items:center;padding:16px;backdrop-filter:blur(20px) saturate(100%) contrast(25%);-webkit-backdrop-filter:blur(20px) saturate(190%) contrast(115%);border-radius:0;border:none;border-bottom:1px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s ease;color:#000;width:100%;box-sizing:border-box;gap:12px}.liquid-card:hover{background:#ffffff80;border-color:#ffffff4d;transform:none}.liquid-list-item{background:#fff6;backdrop-filter:blur(20px) saturate(100%) contrast(100%);-webkit-backdrop-filter:blur(20px);transition:background .2s ease;padding:16px;width:100%;box-sizing:border-box}.liquid-list-item:hover{background:#ffffff8c}.liquid-list>*{border-radius:0;margin:0}.liquid-list>.swipeable-row-container{border-radius:0}.liquid-list>:first-child{border-top-left-radius:20px;border-top-right-radius:20px;overflow:hidden}.liquid-list>.swipeable-row-container:first-child{border-top-left-radius:20px;border-top-right-radius:20px}.liquid-list>:last-child{border-bottom-left-radius:20px;border-bottom-right-radius:20px;border-bottom:none;overflow:hidden}.liquid-list>.swipeable-row-container:last-child{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.liquid-card-left{flex-shrink:0;display:flex;align-items:center;justify-content:center}.liquid-card-center{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}.liquid-card-right{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:8px}.liquid-glass-grid-container{width:100%;container-type:inline-size;container-name:grid-container}.liquid-glass-grid-content{display:grid;grid-template-columns:repeat(12,1fr);gap:25px;padding:0 8px;width:100%;background:#fff}@container grid-container (max-width: 3300px){.liquid-glass-grid-content{grid-template-columns:repeat(11,1fr)}}@container grid-container (max-width: 3000px){.liquid-glass-grid-content{grid-template-columns:repeat(10,1fr)}}@container grid-container (max-width: 2700px){.liquid-glass-grid-content{grid-template-columns:repeat(9,1fr)}}@container grid-container (max-width: 2400px){.liquid-glass-grid-content{grid-template-columns:repeat(8,1fr)}}@container grid-container (max-width: 2100px){.liquid-glass-grid-content{grid-template-columns:repeat(7,1fr)}}@container grid-container (max-width: 1800px){.liquid-glass-grid-content{grid-template-columns:repeat(6,1fr)}}@container grid-container (max-width: 1500px){.liquid-glass-grid-content{grid-template-columns:repeat(5,1fr)}}@container grid-container (max-width: 1200px){.liquid-glass-grid-content{grid-template-columns:repeat(4,1fr)}}@container grid-container (max-width: 900px){.liquid-glass-grid-content{grid-template-columns:repeat(3,1fr);gap:15px}}@container grid-container (max-width: 600px){.liquid-glass-grid-content{grid-template-columns:repeat(2,1fr);gap:8px}}.drawer-fixed-toggle{position:fixed;top:20px;left:10px;z-index:2000}.drawer-toggle-btn.liquid-glass-button{border-radius:50%!important;padding:0!important}.drawer-toggle-btn.liquid-glass-button:hover{transform:scale(1.05)}.side-drawer-container{position:fixed;top:0;bottom:0;left:0;z-index:1000;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}.side-drawer-content{pointer-events:auto;height:100%;position:relative;display:flex}.side-drawer-glass{height:100%;display:flex;flex-direction:column;position:relative;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#141417f2;border-right:1px solid rgba(255,255,255,.1);box-shadow:4px 0 24px #0006;overflow:hidden;width:650px;padding:0!important}@media(min-width:769px){.side-drawer-container{transform:translate(0)}.side-drawer-container.collapsed{transform:translate(-650px)}.drawer-inner{overflow:hidden}}.drawer-inner{flex:1;opacity:1;transition:opacity .2s ease;scrollbar-width:none;padding:0;width:100%;height:100%}.drawer-inner::-webkit-scrollbar{display:none}.drawer-inner.hidden{opacity:0;pointer-events:none}@media(max-width:768px){.side-drawer-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:3000;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}.side-drawer-container.collapsed{transform:translate(-100%)}.side-drawer-glass{width:100%;height:100%;border-radius:0;border:none;background:#141417f2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.drawer-fixed-toggle{display:none}.side-drawer-container.collapsed .drawer-inner{display:block}.side-drawer-backdrop{display:none}}.swipeable-row-container{border-radius:12px}.swipeable-row-background svg{color:#fff;font-size:18px}:root{--lg-color-background: #ffffff;--lg-color-text: #1d1d1f;--lg-color-primary: #007aff;--lg-glass-bg: rgba(255, 255, 255, .75);--lg-glass-border: rgba(255, 255, 255, .4);--lg-glass-blur: 24px;--lg-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .1);--lg-glass-radius: 18px;--lg-spacing-xs: 4px;--lg-spacing-sm: 8px;--lg-spacing-md: 16px;--lg-spacing-lg: 24px;--lg-spacing-xl: 32px;--lg-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}body{font-family:var(--lg-font-family);color:var(--lg-color-text);margin:0;background:#fbfbfd}.lg-glass{background:var(--lg-glass-bg);backdrop-filter:blur(var(--lg-glass-blur));-webkit-backdrop-filter:blur(var(--lg-glass-blur));border:1px solid var(--lg-glass-border);box-shadow:var(--lg-glass-shadow);border-radius:var(--lg-glass-radius)}.lg-button-reset{background:none;border:none;padding:0;margin:0;cursor:pointer;font-family:inherit;color:inherit}.liquid-glass-button:hover:not(:disabled){transform:translateY(-1px) scale(1.03)}.liquid-glass-button:active:not(:disabled){transform:translateY(0) scale(.97);transition:transform .12s ease}