liqgui 0.1.0

package/README.md

@@ -0,0 +1,190 @@
+# liqgui ✨
+
+[![npm version](https://img.shields.io/npm/v/liqgui.svg)](https://www.npmjs.com/package/liqgui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+Glassmorphism UI components that actually feel good. Built with spring physics.
+
+**[📖 Docs & Demo](https://bymehul.github.io/liqgui/docs/index.html)**
+
+## Why this exists
+
+Most glass-effect libraries look nice but feel off—stiff transitions, janky hovers, no thought put into motion. liqgui uses real spring physics (not just `ease-in-out`) so everything moves like it has weight.
+
+## What you get
+
+- **15 components** — buttons, cards, modals, toasts, the works
+- **Spring animations** — physics-based, not CSS keyframe guesswork  
+- **3D effects** — tilt on hover, ripples, glow trails
+- **Dark/light themes** — one CSS variable swap
+- **Accessible** — keyboard nav, focus traps, ARIA done right
+- **No dependencies** — just TypeScript, works with anything
+
+## Installation
+
+```bash
+npm install liqgui
+```
+
+## Quick Start
+
+```html
+<link rel="stylesheet" href="node_modules/liqgui/src/styles/tokens.css">
+<script type="module">
+  import 'liqgui';
+</script>
+
+<glass-button variant="primary">Click Me</glass-button>
+<glass-card glow>Your content here</glass-card>
+```
+
+## Components
+
+### Buttons & Actions
+```html
+<glass-button>Default</glass-button>
+<glass-button variant="primary">Primary</glass-button>
+<glass-button variant="outline">Outline</glass-button>
+<glass-button variant="ghost">Ghost</glass-button>
+<glass-button loading>Loading...</glass-button>
+```
+
+### Form Controls
+```html
+<glass-input placeholder="Enter text"></glass-input>
+<glass-toggle checked>Enable feature</glass-toggle>
+<glass-slider value="50" min="0" max="100"></glass-slider>
+<glass-dropdown>
+  <span slot="trigger">Select option</span>
+  <button role="option" data-value="1">Option 1</button>
+  <button role="option" data-value="2">Option 2</button>
+</glass-dropdown>
+```
+
+### Layout & Content
+```html
+<glass-card glow>Card with glow effect</glass-card>
+<glass-card no-tilt>Card without 3D tilt</glass-card>
+
+<glass-tabs>
+  <button data-value="tab1">Tab 1</button>
+  <button data-value="tab2">Tab 2</button>
+</glass-tabs>
+
+<glass-navbar auto-hide>
+  <span slot="brand">Brand</span>
+  <a href="#">Link</a>
+  <glass-button slot="actions">CTA</glass-button>
+</glass-navbar>
+```
+
+### Overlays
+```html
+<glass-modal id="modal">Modal content</glass-modal>
+<script>document.getElementById('modal').open();</script>
+
+<glass-tooltip position="top">
+  <button>Hover me</button>
+  <span slot="content">Tooltip text</span>
+</glass-tooltip>
+
+<glass-popover position="bottom">
+  <button slot="trigger">Click me</button>
+  <div>Popover content</div>
+</glass-popover>
+```
+
+### Notifications
+```javascript
+import { GlassToast } from 'liqgui';
+GlassToast.show('Success!', 'success');
+GlassToast.show('Error!', 'error');
+```
+
+### Data Display
+```html
+<glass-avatar size="lg" status="online">AB</glass-avatar>
+<glass-avatar-group>
+  <glass-avatar>A</glass-avatar>
+  <glass-avatar>B</glass-avatar>
+</glass-avatar-group>
+
+<glass-badge variant="success">New</glass-badge>
+<glass-badge-wrapper count="5">
+  <button>Notifications</button>
+</glass-badge-wrapper>
+
+<glass-progress value="75" max="100">75%</glass-progress>
+<glass-progress variant="circular" value="50">50%</glass-progress>
+<glass-progress indeterminate>Loading</glass-progress>
+```
+
+### Accordion
+```html
+<glass-accordion>
+  <glass-accordion-item open>
+    <span slot="title">Question 1</span>
+    Answer content here.
+  </glass-accordion-item>
+  <glass-accordion-item>
+    <span slot="title">Question 2</span>
+    More content.
+  </glass-accordion-item>
+</glass-accordion>
+```
+
+## Core Utilities
+
+```javascript
+import { 
+  springAnimate, bouncySpring, 
+  motion, 
+  setTheme 
+} from 'liqgui';
+
+// Spring animation
+springAnimate(0, 100, v => el.style.left = `${v}px`, bouncySpring);
+
+// Motion library
+motion.fadeIn(element);
+motion.scaleIn(element);
+motion.slideInUp(element);
+
+// Theming
+setTheme('dark');
+```
+
+## CSS Custom Properties
+
+```css
+:root {
+  --lg-blur: 20px;
+  --lg-radius: 20px;
+  --lg-accent: var(--lg-accent-blue);
+  --lg-bg: var(--lg-bg-dark);
+}
+```
+
+## Component List
+
+| Category | Components |
+|----------|-----------|
+| Actions | `glass-button` |
+| Forms | `glass-input`, `glass-toggle`, `glass-slider`, `glass-dropdown` |
+| Layout | `glass-card`, `glass-tabs`, `glass-navbar`, `glass-accordion` |
+| Overlays | `glass-modal`, `glass-tooltip`, `glass-popover`, `glass-toast` |
+| Data | `glass-avatar`, `glass-badge`, `glass-progress` |
+
+## Browser Support
+
+Modern browsers only (Chrome, Firefox, Safari, Edge). Uses Web Components and `backdrop-filter`.
+
+## Support
+
+If you find this useful, consider supporting my work:
+
+[![Support on Patreon](https://img.shields.io/badge/Patreon-Support-ff424d?logo=patreon)](https://www.patreon.com/c/bymehul) [![Buy me a Chai](https://img.shields.io/badge/Chai-Donate-ffdd00)](https://www.paywithchai.in/bymehul)
+
+## License
+
+MIT — do whatever you want with it.

package/dist/components/glass-accordion.d.ts

@@ -0,0 +1,15 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassAccordion extends BaseElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+}
+export declare class GlassAccordionItem extends BaseElement {
+    private contentEl?;
+    private contentHeight;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/glass-accordion.js

@@ -0,0 +1,173 @@
+import { BaseElement } from "../core/base-element.js";
+import { springAnimate, gentleSpring } from "../core/spring-engine.js";
+export class GlassAccordion extends BaseElement {
+    static get observedAttributes() {
+        return ["multiple"];
+    }
+    connectedCallback() {
+        this.mount(`
+            <div class="accordion">
+                <slot></slot>
+            </div>
+        `, `
+            :host {
+                display: block;
+            }
+            .accordion {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+        `);
+        // Handle item toggle
+        this.addEventListener("accordion-toggle", ((e) => {
+            if (!this.hasAttribute("multiple")) {
+                // Close other items
+                this.querySelectorAll("glass-accordion-item[open]").forEach(item => {
+                    if (item !== e.target) {
+                        item.removeAttribute("open");
+                    }
+                });
+            }
+        }));
+    }
+}
+customElements.define("glass-accordion", GlassAccordion);
+export class GlassAccordionItem extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this.contentHeight = 0;
+    }
+    static get observedAttributes() {
+        return ["open"];
+    }
+    connectedCallback() {
+        var _a;
+        this.mount(`
+            <div class="item">
+                <button class="header" aria-expanded="false">
+                    <span class="title"><slot name="title"></slot></span>
+                    <svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M6 9l6 6 6-6"/>
+                    </svg>
+                </button>
+                <div class="content-wrapper">
+                    <div class="content">
+                        <slot></slot>
+                    </div>
+                </div>
+            </div>
+        `, `
+            :host {
+                display: block;
+            }
+            .item {
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                border: 1px solid var(--lg-border);
+                border-radius: var(--lg-radius);
+                overflow: hidden;
+            }
+            .header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                padding: 1rem 1.25rem;
+                background: transparent;
+                border: none;
+                color: inherit;
+                font: inherit;
+                font-weight: 500;
+                cursor: pointer;
+                text-align: left;
+                transition: background 0.2s ease;
+            }
+            .header:hover {
+                background: rgba(255, 255, 255, 0.05);
+            }
+            .header:focus-visible {
+                outline: 2px solid var(--lg-accent-focus);
+                outline-offset: -2px;
+            }
+            .icon {
+                transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+                flex-shrink: 0;
+                opacity: 0.7;
+            }
+            :host([open]) .icon {
+                transform: rotate(180deg);
+            }
+            .content-wrapper {
+                height: 0;
+                overflow: hidden;
+            }
+            .content {
+                padding: 0 1.25rem 1rem;
+                opacity: 0.8;
+                line-height: 1.6;
+            }
+        `);
+        this.contentEl = this.root.querySelector(".content-wrapper");
+        // Get content height
+        requestAnimationFrame(() => {
+            const content = this.root.querySelector(".content");
+            if (content) {
+                this.contentHeight = content.offsetHeight;
+            }
+            if (this.hasAttribute("open")) {
+                this.contentEl.style.height = `${this.contentHeight}px`;
+            }
+        });
+        // Toggle on header click
+        (_a = this.root.querySelector(".header")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => {
+            this.toggle();
+        });
+    }
+    toggle() {
+        if (this.hasAttribute("open")) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        var _a;
+        this.setAttribute("open", "");
+        (_a = this.root.querySelector(".header")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", "true");
+        // Dispatch event for accordion parent
+        this.dispatchEvent(new CustomEvent("accordion-toggle", { bubbles: true }));
+        // Animate open
+        if (this.contentEl) {
+            const content = this.root.querySelector(".content");
+            this.contentHeight = (content === null || content === void 0 ? void 0 : content.offsetHeight) || 0;
+            springAnimate(0, this.contentHeight, (v) => {
+                this.contentEl.style.height = `${v}px`;
+            }, gentleSpring);
+        }
+    }
+    close() {
+        var _a;
+        this.removeAttribute("open");
+        (_a = this.root.querySelector(".header")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", "false");
+        // Animate close
+        if (this.contentEl) {
+            const currentHeight = this.contentEl.offsetHeight;
+            springAnimate(currentHeight, 0, (v) => {
+                this.contentEl.style.height = `${v}px`;
+            }, gentleSpring);
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "open" && this.contentEl) {
+            if (newValue !== null && oldValue === null) {
+                // Opening
+            }
+            else if (newValue === null && oldValue !== null) {
+                // Closing handled in close()
+            }
+        }
+    }
+}
+customElements.define("glass-accordion-item", GlassAccordionItem);

package/dist/components/glass-avatar.d.ts

@@ -0,0 +1,9 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassAvatar extends BaseElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+export declare class GlassAvatarGroup extends BaseElement {
+    connectedCallback(): void;
+}

package/dist/components/glass-avatar.js

@@ -0,0 +1,98 @@
+import { BaseElement } from "../core/base-element.js";
+export class GlassAvatar extends BaseElement {
+    static get observedAttributes() {
+        return ["src", "alt", "size", "status"];
+    }
+    connectedCallback() {
+        const src = this.getAttribute("src");
+        const alt = this.getAttribute("alt") || "";
+        const size = this.getAttribute("size") || "md";
+        const status = this.getAttribute("status");
+        this.mount(`
+            <div class="avatar ${size}">
+                ${src
+            ? `<img src="${src}" alt="${alt}" />`
+            : `<span class="initials"><slot></slot></span>`}
+                ${status ? `<span class="status ${status}"></span>` : ""}
+            </div>
+        `, `
+            :host {
+                display: inline-block;
+            }
+            .avatar {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                border: 2px solid var(--lg-border);
+                overflow: hidden;
+            }
+            
+            /* Sizes */
+            .avatar.xs { width: 24px; height: 24px; font-size: 0.625rem; }
+            .avatar.sm { width: 32px; height: 32px; font-size: 0.75rem; }
+            .avatar.md { width: 40px; height: 40px; font-size: 0.875rem; }
+            .avatar.lg { width: 56px; height: 56px; font-size: 1.125rem; }
+            .avatar.xl { width: 80px; height: 80px; font-size: 1.5rem; }
+            
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+            .initials {
+                font-weight: 600;
+                text-transform: uppercase;
+                color: rgba(255, 255, 255, 0.9);
+            }
+            .status {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                width: 25%;
+                height: 25%;
+                min-width: 8px;
+                min-height: 8px;
+                border-radius: 50%;
+                border: 2px solid rgba(18, 18, 22, 0.9);
+            }
+            .status.online { background: #30d158; }
+            .status.offline { background: #8e8e93; }
+            .status.busy { background: #ff453a; }
+            .status.away { background: #ffd60a; }
+        `);
+    }
+    attributeChangedCallback() {
+        // Re-render on attribute changes
+        if (this.isConnected) {
+            this.connectedCallback();
+        }
+    }
+}
+customElements.define("glass-avatar", GlassAvatar);
+// Avatar group for stacking
+export class GlassAvatarGroup extends BaseElement {
+    connectedCallback() {
+        this.mount(`<slot></slot>`, `
+            :host {
+                display: inline-flex;
+                flex-direction: row-reverse;
+            }
+            ::slotted(glass-avatar) {
+                margin-left: -0.75rem;
+                transition: transform 0.2s ease;
+            }
+            ::slotted(glass-avatar:hover) {
+                transform: translateY(-4px);
+                z-index: 1;
+            }
+            ::slotted(glass-avatar:last-child) {
+                margin-left: 0;
+            }
+        `);
+    }
+}
+customElements.define("glass-avatar-group", GlassAvatarGroup);

package/dist/components/glass-badge.d.ts

@@ -0,0 +1,10 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassBadge extends BaseElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+}
+export declare class GlassBadgeWrapper extends BaseElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}

package/dist/components/glass-badge.js

@@ -0,0 +1,151 @@
+import { BaseElement } from "../core/base-element.js";
+export class GlassBadge extends BaseElement {
+    static get observedAttributes() {
+        return ["variant", "size", "dot"];
+    }
+    connectedCallback() {
+        const variant = this.getAttribute("variant") || "default";
+        const size = this.getAttribute("size") || "md";
+        const isDot = this.hasAttribute("dot");
+        this.mount(`
+            <span class="badge ${variant} ${size} ${isDot ? 'dot' : ''}">
+                ${isDot ? '' : '<slot></slot>'}
+            </span>
+        `, `
+            :host {
+                display: inline-block;
+            }
+            .badge {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0.25rem 0.6rem;
+                border-radius: 999px;
+                font-size: 0.75rem;
+                font-weight: 600;
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                border: 1px solid var(--lg-border);
+            }
+            
+            /* Sizes */
+            .badge.sm { padding: 0.125rem 0.4rem; font-size: 0.625rem; }
+            .badge.md { padding: 0.25rem 0.6rem; font-size: 0.75rem; }
+            .badge.lg { padding: 0.375rem 0.75rem; font-size: 0.875rem; }
+            
+            /* Dot mode */
+            .badge.dot {
+                width: 8px;
+                height: 8px;
+                padding: 0;
+                min-width: 8px;
+            }
+            .badge.dot.sm { width: 6px; height: 6px; }
+            .badge.dot.lg { width: 10px; height: 10px; }
+            
+            /* Variants */
+            .badge.default {
+                background: rgba(255, 255, 255, 0.15);
+            }
+            .badge.primary {
+                background: var(--lg-accent);
+                border-color: transparent;
+                color: white;
+            }
+            .badge.success {
+                background: rgba(48, 209, 88, 0.2);
+                border-color: rgba(48, 209, 88, 0.4);
+                color: #30d158;
+            }
+            .badge.warning {
+                background: rgba(255, 214, 10, 0.2);
+                border-color: rgba(255, 214, 10, 0.4);
+                color: #ffd60a;
+            }
+            .badge.error {
+                background: rgba(255, 69, 58, 0.2);
+                border-color: rgba(255, 69, 58, 0.4);
+                color: #ff453a;
+            }
+            .badge.info {
+                background: rgba(90, 200, 250, 0.2);
+                border-color: rgba(90, 200, 250, 0.4);
+                color: #5ac8fa;
+            }
+            
+            /* Dot variants */
+            .badge.dot.success { background: #30d158; }
+            .badge.dot.warning { background: #ffd60a; }
+            .badge.dot.error { background: #ff453a; }
+            .badge.dot.info { background: #5ac8fa; }
+            .badge.dot.primary { background: #007aff; }
+        `);
+    }
+}
+customElements.define("glass-badge", GlassBadge);
+// Badge wrapper for adding badge to other elements
+export class GlassBadgeWrapper extends BaseElement {
+    static get observedAttributes() {
+        return ["count", "variant", "max", "dot"];
+    }
+    connectedCallback() {
+        const count = parseInt(this.getAttribute("count") || "0");
+        const max = parseInt(this.getAttribute("max") || "99");
+        const variant = this.getAttribute("variant") || "error";
+        const isDot = this.hasAttribute("dot");
+        const displayCount = count > max ? `${max}+` : String(count);
+        this.mount(`
+            <div class="wrapper">
+                <slot></slot>
+                ${(count > 0 || isDot) ? `
+                    <span class="badge ${variant} ${isDot ? 'dot' : ''}">
+                        ${isDot ? '' : displayCount}
+                    </span>
+                ` : ''}
+            </div>
+        `, `
+            :host {
+                display: inline-block;
+            }
+            .wrapper {
+                position: relative;
+                display: inline-block;
+            }
+            .badge {
+                position: absolute;
+                top: -4px;
+                right: -4px;
+                min-width: 18px;
+                height: 18px;
+                padding: 0 5px;
+                border-radius: 999px;
+                font-size: 0.625rem;
+                font-weight: 700;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 2px solid rgba(18, 18, 22, 0.9);
+                z-index: 1;
+            }
+            .badge.dot {
+                width: 10px;
+                height: 10px;
+                min-width: 10px;
+                padding: 0;
+                top: -2px;
+                right: -2px;
+            }
+            .badge.error { background: #ff453a; color: white; }
+            .badge.success { background: #30d158; color: white; }
+            .badge.warning { background: #ffd60a; color: black; }
+            .badge.info { background: #5ac8fa; color: white; }
+            .badge.primary { background: #007aff; color: white; }
+        `);
+    }
+    attributeChangedCallback() {
+        if (this.isConnected) {
+            this.connectedCallback();
+        }
+    }
+}
+customElements.define("glass-badge-wrapper", GlassBadgeWrapper);

package/dist/components/glass-button.d.ts

@@ -0,0 +1,6 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassButton extends BaseElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string, value: string): void;
+}