liqgui 0.1.0

package/dist/core/motion.js

@@ -0,0 +1,54 @@
+import { liquidCurves, durations } from "./curves.js";
+export const motion = {
+    animate(element, keyframes, options) {
+        return element.animate(keyframes, options);
+    },
+    fadeIn(element, duration = durations.normal) {
+        return element.animate([{ opacity: 0 }, { opacity: 1 }], { duration, easing: liquidCurves.decelerate, fill: "forwards" });
+    },
+    fadeOut(element, duration = durations.normal) {
+        return element.animate([{ opacity: 1 }, { opacity: 0 }], { duration, easing: liquidCurves.accelerate, fill: "forwards" });
+    },
+    scaleIn(element, duration = durations.normal) {
+        return element.animate([
+            { opacity: 0, transform: "scale(0.9)" },
+            { opacity: 1, transform: "scale(1)" }
+        ], { duration, easing: liquidCurves.glassIn, fill: "forwards" });
+    },
+    scaleOut(element, duration = durations.normal) {
+        return element.animate([
+            { opacity: 1, transform: "scale(1)" },
+            { opacity: 0, transform: "scale(0.9)" }
+        ], { duration, easing: liquidCurves.glassOut, fill: "forwards" });
+    },
+    slideInUp(element, duration = durations.slow) {
+        return element.animate([
+            { opacity: 0, transform: "translateY(20px)" },
+            { opacity: 1, transform: "translateY(0)" }
+        ], { duration, easing: liquidCurves.glassIn, fill: "forwards" });
+    },
+    slideOutDown(element, duration = durations.slow) {
+        return element.animate([
+            { opacity: 1, transform: "translateY(0)" },
+            { opacity: 0, transform: "translateY(20px)" }
+        ], { duration, easing: liquidCurves.glassOut, fill: "forwards" });
+    },
+    blurIn(element, duration = durations.slow) {
+        return element.animate([
+            { opacity: 0, filter: "blur(10px)" },
+            { opacity: 1, filter: "blur(0px)" }
+        ], { duration, easing: liquidCurves.decelerate, fill: "forwards" });
+    },
+    shimmer(element) {
+        return element.animate([
+            { backgroundPosition: "-200% 0" },
+            { backgroundPosition: "200% 0" }
+        ], { duration: 1500, iterations: Infinity, easing: "linear" });
+    },
+    pulseGlow(element) {
+        return element.animate([
+            { boxShadow: "0 0 0 0 rgba(90, 200, 250, 0.4)" },
+            { boxShadow: "0 0 0 10px rgba(90, 200, 250, 0)" }
+        ], { duration: 1000, iterations: Infinity, easing: liquidCurves.standard });
+    }
+};

package/dist/core/spring-engine.d.ts

@@ -0,0 +1,12 @@
+export interface SpringConfig {
+    stiffness: number;
+    damping: number;
+    mass: number;
+}
+export declare const liquidSpring: SpringConfig;
+export declare const bouncySpring: SpringConfig;
+export declare const gentleSpring: SpringConfig;
+export declare const snappySpring: SpringConfig;
+export declare const sleekSpring: SpringConfig;
+export declare function springAnimate(from: number, to: number, onUpdate: (v: number) => void, config?: SpringConfig, onComplete?: () => void): () => void;
+export declare function springAnimateMulti(from: number[], to: number[], onUpdate: (values: number[]) => void, config?: SpringConfig, onComplete?: () => void): () => void;

package/dist/core/spring-engine.js

@@ -0,0 +1,90 @@
+// Spring presets
+export const liquidSpring = {
+    stiffness: 170,
+    damping: 26,
+    mass: 1
+};
+export const bouncySpring = {
+    stiffness: 180,
+    damping: 12,
+    mass: 1
+};
+export const gentleSpring = {
+    stiffness: 120,
+    damping: 20,
+    mass: 1
+};
+export const snappySpring = {
+    stiffness: 400,
+    damping: 30,
+    mass: 1
+};
+export const sleekSpring = {
+    stiffness: 200,
+    damping: 24,
+    mass: 0.8
+};
+export function springAnimate(from, to, onUpdate, config = liquidSpring, onComplete) {
+    let velocity = 0;
+    let value = from;
+    const dt = 1 / 60;
+    let rafId;
+    let stopped = false;
+    function step() {
+        if (stopped)
+            return;
+        const force = -config.stiffness * (value - to);
+        const dampingForce = -config.damping * velocity;
+        velocity += (force + dampingForce) / config.mass * dt;
+        value += velocity * dt;
+        onUpdate(value);
+        if (Math.abs(velocity) > 0.01 || Math.abs(value - to) > 0.01) {
+            rafId = requestAnimationFrame(step);
+        }
+        else {
+            onUpdate(to);
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }
+    }
+    rafId = requestAnimationFrame(step);
+    // Return cancel function
+    return () => {
+        stopped = true;
+        cancelAnimationFrame(rafId);
+    };
+}
+// Multi-value spring
+export function springAnimateMulti(from, to, onUpdate, config = liquidSpring, onComplete) {
+    const values = [...from];
+    const velocities = from.map(() => 0);
+    const dt = 1 / 60;
+    let rafId;
+    let stopped = false;
+    function step() {
+        if (stopped)
+            return;
+        let allSettled = true;
+        for (let i = 0; i < values.length; i++) {
+            const force = -config.stiffness * (values[i] - to[i]);
+            const dampingForce = -config.damping * velocities[i];
+            velocities[i] += (force + dampingForce) / config.mass * dt;
+            values[i] += velocities[i] * dt;
+            if (Math.abs(velocities[i]) > 0.01 || Math.abs(values[i] - to[i]) > 0.01) {
+                allSettled = false;
+            }
+        }
+        onUpdate([...values]);
+        if (!allSettled) {
+            rafId = requestAnimationFrame(step);
+        }
+        else {
+            onUpdate([...to]);
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }
+    }
+    rafId = requestAnimationFrame(step);
+    return () => {
+        stopped = true;
+        cancelAnimationFrame(rafId);
+    };
+}

package/dist/core/supports.d.ts

@@ -0,0 +1 @@
+export declare const supportsBlur: () => boolean;

package/dist/core/supports.js

@@ -0,0 +1 @@
+export const supportsBlur = () => CSS.supports("backdrop-filter", "blur(10px)");

package/dist/core/theme.d.ts

@@ -0,0 +1,2 @@
+export type Theme = "light" | "dark";
+export declare const setTheme: (t: Theme) => Theme;

package/dist/core/theme.js

@@ -0,0 +1 @@
+export const setTheme = (t) => document.documentElement.dataset.theme = t;

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import "./components/glass-card.js";
+import "./components/glass-button.js";
+import "./components/glass-input.js";
+import "./components/glass-modal.js";
+import "./components/glass-tabs.js";
+import "./components/glass-navbar.js";
+import "./components/glass-toast.js";
+import "./components/glass-toggle.js";
+import "./components/glass-slider.js";
+import "./components/glass-dropdown.js";
+import "./components/glass-tooltip.js";
+import "./components/glass-progress.js";
+import "./components/glass-avatar.js";
+import "./components/glass-badge.js";
+import "./components/glass-accordion.js";
+export { springAnimate, springAnimateMulti, liquidSpring, bouncySpring, gentleSpring, snappySpring, sleekSpring } from "./core/spring-engine.js";
+export type { SpringConfig } from "./core/spring-engine.js";
+export { liquidCurves, durations, createTransition } from "./core/curves.js";
+export { glowCSS, createRipple } from "./core/glow.js";
+export { motion } from "./core/motion.js";
+export { trapFocus } from "./core/focus-trap.js";
+export { supportsBlur } from "./core/supports.js";
+export { setTheme } from "./core/theme.js";
+export type { Theme } from "./core/theme.js";
+export { GlassButton } from "./components/glass-button.js";
+export { GlassCard } from "./components/glass-card.js";
+export { GlassInput } from "./components/glass-input.js";
+export { GlassModal } from "./components/glass-modal.js";
+export { GlassTabs } from "./components/glass-tabs.js";
+export { GlassNavbar } from "./components/glass-navbar.js";
+export { GlassToast } from "./components/glass-toast.js";
+export { GlassToggle } from "./components/glass-toggle.js";
+export { GlassSlider } from "./components/glass-slider.js";
+export { GlassDropdown } from "./components/glass-dropdown.js";
+export { GlassTooltip, GlassPopover } from "./components/glass-tooltip.js";
+export { GlassProgress } from "./components/glass-progress.js";
+export { GlassAvatar, GlassAvatarGroup } from "./components/glass-avatar.js";
+export { GlassBadge, GlassBadgeWrapper } from "./components/glass-badge.js";
+export { GlassAccordion, GlassAccordionItem } from "./components/glass-accordion.js";

package/dist/index.js

@@ -0,0 +1,40 @@
+// Components
+import "./components/glass-card.js";
+import "./components/glass-button.js";
+import "./components/glass-input.js";
+import "./components/glass-modal.js";
+import "./components/glass-tabs.js";
+import "./components/glass-navbar.js";
+import "./components/glass-toast.js";
+import "./components/glass-toggle.js";
+import "./components/glass-slider.js";
+import "./components/glass-dropdown.js";
+import "./components/glass-tooltip.js";
+import "./components/glass-progress.js";
+import "./components/glass-avatar.js";
+import "./components/glass-badge.js";
+import "./components/glass-accordion.js";
+// Core exports
+export { springAnimate, springAnimateMulti, liquidSpring, bouncySpring, gentleSpring, snappySpring, sleekSpring } from "./core/spring-engine.js";
+export { liquidCurves, durations, createTransition } from "./core/curves.js";
+export { glowCSS, createRipple } from "./core/glow.js";
+export { motion } from "./core/motion.js";
+export { trapFocus } from "./core/focus-trap.js";
+export { supportsBlur } from "./core/supports.js";
+export { setTheme } from "./core/theme.js";
+// Component exports
+export { GlassButton } from "./components/glass-button.js";
+export { GlassCard } from "./components/glass-card.js";
+export { GlassInput } from "./components/glass-input.js";
+export { GlassModal } from "./components/glass-modal.js";
+export { GlassTabs } from "./components/glass-tabs.js";
+export { GlassNavbar } from "./components/glass-navbar.js";
+export { GlassToast } from "./components/glass-toast.js";
+export { GlassToggle } from "./components/glass-toggle.js";
+export { GlassSlider } from "./components/glass-slider.js";
+export { GlassDropdown } from "./components/glass-dropdown.js";
+export { GlassTooltip, GlassPopover } from "./components/glass-tooltip.js";
+export { GlassProgress } from "./components/glass-progress.js";
+export { GlassAvatar, GlassAvatarGroup } from "./components/glass-avatar.js";
+export { GlassBadge, GlassBadgeWrapper } from "./components/glass-badge.js";
+export { GlassAccordion, GlassAccordionItem } from "./components/glass-accordion.js";

package/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "liqgui",
+    "version": "0.1.0",
+    "description": "Premium glassmorphism component library with spring physics animations",
+    "type": "module",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./styles": "./src/styles/tokens.css"
+    },
+    "files": [
+        "dist",
+        "src/styles"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "glassmorphism",
+        "ui",
+        "components",
+        "web-components",
+        "spring-physics",
+        "animations",
+        "glass",
+        "css",
+        "typescript"
+    ],
+    "author": "bymehul",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/bymehul/liqgui"
+    },
+    "homepage": "https://bymehul.github.io/liqgui/docs/index.html",
+    "bugs": {
+        "url": "https://github.com/bymehul/liqgui/issues"
+    },
+    "devDependencies": {
+        "typescript": "^5.9.3"
+    }
+}

package/src/styles/tokens.css

@@ -0,0 +1,140 @@
+/*
+CSS
+ */
+
+:root {
+  /* Blur & Radius */
+  --lg-blur: 20px;
+  --lg-radius: 20px;
+  --lg-radius-sm: 12px;
+  --lg-radius-lg: 28px;
+
+  /* Background Colors */
+  --lg-bg-light: rgba(255, 255, 255, 0.18);
+  --lg-bg-dark: rgba(18, 18, 22, 0.65);
+  --lg-bg: var(--lg-bg-dark);
+
+  /* Border */
+  --lg-border: rgba(255, 255, 255, 0.18);
+  --lg-border-hover: rgba(255, 255, 255, 0.35);
+
+  /* Shadows */
+  --lg-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
+  --lg-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.25);
+  --lg-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.45);
+
+  /* Accent Gradients */
+  --lg-accent-blue: linear-gradient(135deg, #5ac8fa 0%, #007aff 100%);
+  --lg-accent-purple: linear-gradient(135deg, #bf5af2 0%, #5856d6 100%);
+  --lg-accent-green: linear-gradient(135deg, #30d158 0%, #34c759 100%);
+  --lg-accent-orange: linear-gradient(135deg, #ff9f0a 0%, #ff6b00 100%);
+  --lg-accent-pink: linear-gradient(135deg, #ff375f 0%, #ff2d55 100%);
+  --lg-accent-teal: linear-gradient(135deg, #64d2ff 0%, #00c7be 100%);
+
+  /* Default accent */
+  --lg-accent: var(--lg-accent-blue);
+  --lg-accent-focus: #5ac8fa;
+
+  /* Typography */
+  --lg-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
+  --lg-font-mono: 'SF Mono', 'Fira Code', monospace;
+
+  /* Spacing */
+  --lg-space-xs: 0.25rem;
+  --lg-space-sm: 0.5rem;
+  --lg-space-md: 1rem;
+  --lg-space-lg: 1.5rem;
+  --lg-space-xl: 2rem;
+
+  /* Transitions */
+  --lg-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  --lg-transition: 250ms cubic-bezier(0.16, 1, 0.3, 1);
+  --lg-transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Light theme */
+:root[data-theme="light"] {
+  --lg-bg: var(--lg-bg-light);
+  --lg-border: rgba(0, 0, 0, 0.1);
+  --lg-border-hover: rgba(0, 0, 0, 0.2);
+}
+
+/* Dark theme (default) */
+:root[data-theme="dark"] {
+  --lg-bg: var(--lg-bg-dark);
+}
+
+/* Accessibility: Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --lg-transition-fast: 0ms;
+    --lg-transition: 0ms;
+    --lg-transition-slow: 0ms;
+  }
+}
+
+/* Accessibility: Reduced transparency */
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --lg-blur: 0px;
+    --lg-bg-light: rgba(255, 255, 255, 0.95);
+    --lg-bg-dark: rgba(18, 18, 22, 0.95);
+  }
+}
+
+/* Global keyframes */
+@keyframes lg-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes lg-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes lg-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes lg-shimmer {
+  from {
+    background-position: -200% 0;
+  }
+
+  to {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes lg-pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}