@glinui/ui 0.1.0

package/dist/components/typewriter.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { usePrefersReducedMotion } from "../lib/use-prefers-reduced-motion";
+export const Typewriter = React.forwardRef(({ className, text, words, speed = 50, deleteSpeed = 30, delay = 0, cursor = true, cursorChar = "|", loop = false, pauseDuration = 1500, onComplete, "aria-label": ariaLabel, ...props }, ref) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const [displayedText, setDisplayedText] = React.useState("");
+    const [phase, setPhase] = React.useState("idle");
+    // Resolve the word list: words array takes priority, fallback to single text
+    const wordList = React.useMemo(() => {
+        if (words && words.length > 0)
+            return words;
+        if (text)
+            return [text];
+        return [""];
+    }, [words, text]);
+    const isMultiWord = wordList.length > 1;
+    // Stable ref so effect deps stay minimal
+    const onCompleteRef = React.useRef(onComplete);
+    React.useEffect(() => {
+        onCompleteRef.current = onComplete;
+    }, [onComplete]);
+    React.useEffect(() => {
+        // Reduced-motion: show first word immediately with no animation
+        if (prefersReducedMotion) {
+            setDisplayedText(wordList[0]);
+            setPhase("pausing");
+            onCompleteRef.current?.();
+            return;
+        }
+        let wordIndex = 0;
+        let charIndex = 0;
+        let timeoutId;
+        let cancelled = false;
+        const typeWord = () => {
+            if (cancelled)
+                return;
+            const currentWord = wordList[wordIndex];
+            setPhase("typing");
+            const typeStep = () => {
+                if (cancelled)
+                    return;
+                if (charIndex <= currentWord.length) {
+                    setDisplayedText(currentWord.slice(0, charIndex));
+                    charIndex += 1;
+                    timeoutId = setTimeout(typeStep, speed);
+                }
+                else {
+                    // Finished typing current word
+                    setPhase("pausing");
+                    onCompleteRef.current?.();
+                    if (isMultiWord || loop) {
+                        timeoutId = setTimeout(() => {
+                            if (cancelled)
+                                return;
+                            deleteWord(currentWord);
+                        }, pauseDuration);
+                    }
+                }
+            };
+            typeStep();
+        };
+        const deleteWord = (currentWord) => {
+            if (cancelled)
+                return;
+            setPhase("deleting");
+            let delIndex = currentWord.length;
+            const deleteStep = () => {
+                if (cancelled)
+                    return;
+                if (delIndex >= 0) {
+                    setDisplayedText(currentWord.slice(0, delIndex));
+                    delIndex -= 1;
+                    timeoutId = setTimeout(deleteStep, deleteSpeed);
+                }
+                else {
+                    // Finished deleting — move to next word
+                    wordIndex = (wordIndex + 1) % wordList.length;
+                    // If not looping and we've cycled through all words, stop
+                    if (!loop && wordIndex === 0 && !isMultiWord) {
+                        setPhase("pausing");
+                        return;
+                    }
+                    charIndex = 0;
+                    timeoutId = setTimeout(typeWord, speed * 2);
+                }
+            };
+            deleteStep();
+        };
+        setDisplayedText("");
+        setPhase("idle");
+        charIndex = 0;
+        wordIndex = 0;
+        timeoutId = setTimeout(typeWord, delay);
+        return () => {
+            cancelled = true;
+            clearTimeout(timeoutId);
+        };
+    }, [wordList, speed, deleteSpeed, delay, loop, pauseDuration, isMultiWord, prefersReducedMotion]);
+    // Cursor blinks when pausing; solid while actively typing/deleting
+    const cursorBlinking = phase === "pausing";
+    // For aria-label: join all words or use single text
+    const fullLabel = ariaLabel ?? wordList.join(", ");
+    return (_jsxs("span", { ref: ref, "aria-label": fullLabel, "aria-live": "off", className: cn("inline-flex items-baseline", className), ...props, children: [_jsx("span", { "aria-hidden": "true", children: displayedText }), cursor && (_jsx("span", { "aria-hidden": "true", className: cn("ml-[0.05em] inline-block select-none", cursorBlinking
+                    ? "animate-blink motion-reduce:[animation:none]"
+                    : "opacity-100"), children: cursorChar }))] }));
+});
+Typewriter.displayName = "Typewriter";

package/dist/components/word-rotate.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface WordRotateProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Array of words to cycle through */
+    words: string[];
+    /** Duration each word is shown (ms) */
+    duration?: number;
+    /** Animation speed for enter/exit (ms) */
+    animationDuration?: number;
+}
+export declare const WordRotate: React.ForwardRefExoticComponent<WordRotateProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=word-rotate.d.ts.map

package/dist/components/word-rotate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"word-rotate.d.ts","sourceRoot":"","sources":["../../src/components/word-rotate.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E,sCAAsC;IACtC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,eAAO,MAAM,UAAU,yFA0DtB,CAAA"}

package/dist/components/word-rotate.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export const WordRotate = React.forwardRef(({ className, words, duration = 2500, animationDuration = 300, style, ...props }, ref) => {
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    const [animating, setAnimating] = React.useState("idle");
+    React.useEffect(() => {
+        if (words.length <= 1)
+            return;
+        const prefersReduced = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (prefersReduced)
+            return;
+        const timer = setInterval(() => {
+            setAnimating("out");
+            setTimeout(() => {
+                setCurrentIndex((prev) => (prev + 1) % words.length);
+                setAnimating("in");
+                setTimeout(() => setAnimating("idle"), animationDuration);
+            }, animationDuration);
+        }, duration);
+        return () => clearInterval(timer);
+    }, [words, duration, animationDuration]);
+    return (_jsx("span", { ref: ref, className: cn("inline-block overflow-hidden", className), style: {
+            "--word-rotate-duration": `${animationDuration}ms`,
+            ...style,
+        }, ...props, children: _jsx("span", { className: cn("inline-block", animating === "in" && "animate-word-rotate-in", animating === "out" && "animate-word-rotate-out", "motion-reduce:[animation:none]"), "aria-live": "polite", children: words[currentIndex] }, currentIndex) }));
+});
+WordRotate.displayName = "WordRotate";

package/dist/index.d.ts

@@ -0,0 +1,80 @@
+export * from "./components/accordion";
+export * from "./components/alert-dialog";
+export * from "./components/animated-gradient";
+export * from "./components/alert";
+export * from "./components/aurora-background";
+export * from "./components/avatar";
+export * from "./components/badge";
+export * from "./components/blur-fade";
+export * from "./components/blur-spotlight";
+export * from "./components/border-beam";
+export * from "./components/button";
+export * from "./components/card";
+export * from "./components/checkbox";
+export * from "./components/chip";
+export * from "./components/chromatic-text";
+export * from "./components/code";
+export * from "./components/command";
+export * from "./components/counter";
+export * from "./components/data-table";
+export * from "./components/depth-card";
+export * from "./components/dot-pattern";
+export * from "./components/dropdown-menu";
+export * from "./components/floating-panel";
+export * from "./components/glass-breadcrumb";
+export * from "./components/glass-card";
+export * from "./components/glass-dock";
+export * from "./components/glow-border";
+export * from "./components/gradient-mesh";
+export * from "./components/glass-navbar";
+export * from "./components/glass-toggle";
+export * from "./components/heading";
+export * from "./components/hover-card";
+export * from "./components/icon-frame";
+export * from "./components/input";
+export * from "./components/kbd";
+export * from "./components/label";
+export * from "./components/light-leak";
+export * from "./components/liquid-button";
+export * from "./components/link";
+export * from "./components/magnetic-cta";
+export * from "./components/marquee";
+export * from "./components/meteor-shower";
+export * from "./components/modal";
+export * from "./components/morphing-tabs";
+export * from "./components/number-ticker";
+export * from "./components/orbiting-circles";
+export * from "./components/particle-field";
+export * from "./components/popover";
+export * from "./components/progress";
+export * from "./components/prism-border";
+export * from "./components/pulsating-button";
+export * from "./components/radio-group";
+export * from "./components/retro-grid";
+export * from "./components/reveal-text";
+export * from "./components/ripple";
+export * from "./components/ripple-button";
+export * from "./components/select";
+export * from "./components/separator";
+export * from "./components/sheet";
+export * from "./components/shimmer-button";
+export * from "./components/skeleton";
+export * from "./components/slider";
+export * from "./components/spotlight-card";
+export * from "./components/spotlight";
+export * from "./components/status-dot";
+export * from "./components/switch";
+export * from "./components/table";
+export * from "./components/tabs";
+export * from "./components/text";
+export * from "./components/text-reveal";
+export * from "./components/textarea";
+export * from "./components/sonner";
+export * from "./components/toast";
+export * from "./components/tree";
+export * from "./components/tooltip";
+export * from "./components/typewriter";
+export * from "./components/word-rotate";
+export * from "./lib/cn";
+export { useLiquidGlass } from "./lib/use-liquid-glass";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/index.js

@@ -0,0 +1,79 @@
+export * from "./components/accordion";
+export * from "./components/alert-dialog";
+export * from "./components/animated-gradient";
+export * from "./components/alert";
+export * from "./components/aurora-background";
+export * from "./components/avatar";
+export * from "./components/badge";
+export * from "./components/blur-fade";
+export * from "./components/blur-spotlight";
+export * from "./components/border-beam";
+export * from "./components/button";
+export * from "./components/card";
+export * from "./components/checkbox";
+export * from "./components/chip";
+export * from "./components/chromatic-text";
+export * from "./components/code";
+export * from "./components/command";
+export * from "./components/counter";
+export * from "./components/data-table";
+export * from "./components/depth-card";
+export * from "./components/dot-pattern";
+export * from "./components/dropdown-menu";
+export * from "./components/floating-panel";
+export * from "./components/glass-breadcrumb";
+export * from "./components/glass-card";
+export * from "./components/glass-dock";
+export * from "./components/glow-border";
+export * from "./components/gradient-mesh";
+export * from "./components/glass-navbar";
+export * from "./components/glass-toggle";
+export * from "./components/heading";
+export * from "./components/hover-card";
+export * from "./components/icon-frame";
+export * from "./components/input";
+export * from "./components/kbd";
+export * from "./components/label";
+export * from "./components/light-leak";
+export * from "./components/liquid-button";
+export * from "./components/link";
+export * from "./components/magnetic-cta";
+export * from "./components/marquee";
+export * from "./components/meteor-shower";
+export * from "./components/modal";
+export * from "./components/morphing-tabs";
+export * from "./components/number-ticker";
+export * from "./components/orbiting-circles";
+export * from "./components/particle-field";
+export * from "./components/popover";
+export * from "./components/progress";
+export * from "./components/prism-border";
+export * from "./components/pulsating-button";
+export * from "./components/radio-group";
+export * from "./components/retro-grid";
+export * from "./components/reveal-text";
+export * from "./components/ripple";
+export * from "./components/ripple-button";
+export * from "./components/select";
+export * from "./components/separator";
+export * from "./components/sheet";
+export * from "./components/shimmer-button";
+export * from "./components/skeleton";
+export * from "./components/slider";
+export * from "./components/spotlight-card";
+export * from "./components/spotlight";
+export * from "./components/status-dot";
+export * from "./components/switch";
+export * from "./components/table";
+export * from "./components/tabs";
+export * from "./components/text";
+export * from "./components/text-reveal";
+export * from "./components/textarea";
+export * from "./components/sonner";
+export * from "./components/toast";
+export * from "./components/tree";
+export * from "./components/tooltip";
+export * from "./components/typewriter";
+export * from "./components/word-rotate";
+export * from "./lib/cn";
+export { useLiquidGlass } from "./lib/use-liquid-glass";

package/dist/lib/cn.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/lib/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/lib/use-liquid-glass.d.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties, ReactNode } from "react";
+/**
+ * Liquid Glass — SVG displacement-map refraction for `backdrop-filter`.
+ *
+ * Uses `feDisplacementMap` to create real optical refraction through a
+ * curved "squircle" surface. The SVG filter handles ONLY the displacement;
+ * blur + saturation are chained as separate CSS `backdrop-filter` functions
+ * so Chrome processes them correctly.
+ *
+ * `backdrop-filter: url(#svgFilter) blur(Xpx) saturate(Y)`
+ *
+ * Browser support (2026):
+ *   - Chromium (Chrome, Edge, Brave, Arc, Opera) — full refraction
+ *   - Safari / Firefox — graceful fallback to CSS blur + saturate
+ *
+ * When Safari / Firefox add `backdrop-filter: url()` support, the
+ * effect will automatically upgrade without code changes.
+ *
+ * Technique credit: https://kube.io/blog/liquid-glass-css-svg
+ */
+type LiquidGlassOptions = {
+    /** Max pixel displacement for refraction (default: 40) */
+    displacement?: number;
+    /** Gaussian blur standard-deviation in px (default: 12) */
+    blur?: number;
+    /** Saturation multiplier — 1.8 = Apple's 180% (default: 1.8) */
+    saturate?: number;
+    /** Surface profile shape (default: "squircle") */
+    profile?: "squircle" | "convex";
+    /** Disable the effect entirely (default: false) */
+    disabled?: boolean;
+};
+export declare function useLiquidGlass(opts?: LiquidGlassOptions): {
+    /** Attach to the glass element */
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    /** Render this anywhere in the DOM (hidden SVG filter defs) */
+    svgFilter: ReactNode;
+    /** Apply to the glass element's `style` prop */
+    style: CSSProperties;
+    /** Filter ID (for manual usage) */
+    filterId: string;
+    /** True when SVG refraction is active (Chrome only) */
+    isSupported: boolean;
+};
+export {};
+//# sourceMappingURL=use-liquid-glass.d.ts.map

package/dist/lib/use-liquid-glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-liquid-glass.d.ts","sourceRoot":"","sources":["../../src/lib/use-liquid-glass.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrD;;;;;;;;;;;;;;;;;;GAkBG;AAEH,KAAK,kBAAkB,GAAG;IACxB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAA;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAmGD,wBAAgB,cAAc,CAAC,IAAI,GAAE,kBAAuB;IA0GxD,kCAAkC;;IAElC,+DAA+D;eACvC,SAAS;IACjC,gDAAgD;;IAEhD,mCAAmC;;IAEnC,uDAAuD;;EAG1D"}

package/dist/lib/use-liquid-glass.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+// ---------------------------------------------------------------------------
+// Browser detection
+// ---------------------------------------------------------------------------
+/** Only Chromium exposes SVG filters as `backdrop-filter`. */
+function supportsBackdropSvgFilter() {
+    if (typeof navigator === "undefined")
+        return false;
+    return /Chrome|Chromium/.test(navigator.userAgent);
+}
+// ---------------------------------------------------------------------------
+// Displacement map generator
+// ---------------------------------------------------------------------------
+/**
+ * Builds a PNG data-URL encoding a displacement map.
+ *
+ * Red channel  → horizontal displacement
+ * Green channel → vertical displacement
+ * 128 = neutral (no shift), ±127 = max shift.
+ *
+ * Generated at half resolution for performance — the SVG filter stretches
+ * it to the element size via `preserveAspectRatio="none"`.
+ */
+function buildDisplacementMap(w, h, profile) {
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext("2d");
+    const img = ctx.createImageData(w, h);
+    const px = img.data;
+    const mx = w / 2;
+    const my = h / 2;
+    for (let row = 0; row < h; row++) {
+        for (let col = 0; col < w; col++) {
+            const i = (row * w + col) * 4;
+            // Normalized coords [-1, 1]
+            const nx = (col - mx) / mx;
+            const ny = (row - my) / my;
+            // Distance from centre (squircle or circle)
+            const dist = profile === "squircle"
+                ? (Math.abs(nx) ** 4 + Math.abs(ny) ** 4) ** 0.25
+                : Math.hypot(nx, ny);
+            // Outside shape or dead-centre → no displacement
+            if (dist >= 1 || dist < 0.002) {
+                px[i] = 128;
+                px[i + 1] = 128;
+                px[i + 2] = 128;
+                px[i + 3] = 255;
+                continue;
+            }
+            // Surface gradient magnitude (derivative of height function)
+            let grad;
+            if (profile === "squircle") {
+                // h = (1 - d^4)^0.25  →  |∇h| ∝ d^3 / (1 - d^4)^0.75
+                grad = dist ** 3 / Math.max(1 - dist ** 4, 1e-4) ** 0.75;
+            }
+            else {
+                // h = √(1 - d²)  →  |∇h| = d / √(1 - d²)
+                grad = dist / Math.max(1 - dist * dist, 1e-4) ** 0.5;
+            }
+            // Smooth falloff near rim so edges don't clip hard
+            grad *= (1 - dist) ** 0.5;
+            grad = Math.min(grad, 1);
+            // Direction: radially outward from centre
+            const angle = Math.atan2(ny, nx);
+            const dx = Math.cos(angle) * grad;
+            const dy = Math.sin(angle) * grad;
+            // Encode in R/G channels — FULL range ±127 for maximum refraction
+            px[i] = Math.round(Math.max(0, Math.min(255, 128 + dx * 127)));
+            px[i + 1] = Math.round(Math.max(0, Math.min(255, 128 + dy * 127)));
+            px[i + 2] = 128;
+            px[i + 3] = 255;
+        }
+    }
+    ctx.putImageData(img, 0, 0);
+    return canvas.toDataURL("image/png");
+}
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+export function useLiquidGlass(opts = {}) {
+    const { displacement = 40, blur = 12, saturate = 1.8, profile = "squircle", disabled = false, } = opts;
+    const uid = useId().replace(/:/g, "");
+    const filterId = `lg-${uid}`;
+    const ref = useRef(null);
+    const [supported, setSupported] = useState(false);
+    const [dim, setDim] = useState({ w: 0, h: 0 });
+    const [mapUrl, setMapUrl] = useState(null);
+    // Detect Chromium on mount
+    useEffect(() => {
+        if (!disabled)
+            setSupported(supportsBackdropSvgFilter());
+    }, [disabled]);
+    // Observe element dimensions
+    useEffect(() => {
+        if (!supported || !ref.current)
+            return;
+        const el = ref.current;
+        const ro = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const { width, height } = entry.contentRect;
+            setDim({ w: Math.round(width), h: Math.round(height) });
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [supported]);
+    // Generate displacement map at half resolution (better quality than 1/4)
+    useEffect(() => {
+        if (!supported || dim.w < 16 || dim.h < 16)
+            return;
+        const scale = 0.5;
+        const url = buildDisplacementMap(Math.round(dim.w * scale), Math.round(dim.h * scale), profile);
+        setMapUrl(url);
+    }, [supported, dim.w, dim.h, profile]);
+    const ready = supported && !!mapUrl && dim.w > 0;
+    // SVG filter — ONLY displacement, no blur or saturate.
+    // Blur + saturate are chained as CSS functions in `backdropFilter`.
+    // This is critical: Chrome processes `url()` + CSS functions correctly
+    // only when the SVG filter is simple (displacement only).
+    const svgFilter = ready ? (_jsx("svg", { width: "0", height: "0", style: { position: "fixed", top: 0, left: 0, pointerEvents: "none" }, "aria-hidden": true, children: _jsx("defs", { children: _jsxs("filter", { id: filterId, x: "0", y: "0", width: dim.w, height: dim.h, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feImage", { href: mapUrl, x: "0", y: "0", width: dim.w, height: dim.h, result: "dispMap", preserveAspectRatio: "none" }), _jsx("feDisplacementMap", { in: "SourceGraphic", in2: "dispMap", scale: String(displacement), xChannelSelector: "R", yChannelSelector: "G" })] }) }) })) : null;
+    // Style: chain SVG displacement with CSS blur + saturate
+    // Chrome processes: url(#filter) → blur → saturate as a pipeline
+    const style = ready
+        ? {
+            backdropFilter: `url(#${filterId}) blur(${blur}px) saturate(${saturate})`,
+            WebkitBackdropFilter: `url(#${filterId}) blur(${blur}px) saturate(${saturate})`,
+        }
+        : {};
+    return {
+        /** Attach to the glass element */
+        ref,
+        /** Render this anywhere in the DOM (hidden SVG filter defs) */
+        svgFilter: svgFilter,
+        /** Apply to the glass element's `style` prop */
+        style,
+        /** Filter ID (for manual usage) */
+        filterId,
+        /** True when SVG refraction is active (Chrome only) */
+        isSupported: ready,
+    };
+}

package/dist/lib/use-prefers-reduced-motion.d.ts

@@ -0,0 +1,2 @@
+export declare function usePrefersReducedMotion(): boolean;
+//# sourceMappingURL=use-prefers-reduced-motion.d.ts.map

package/dist/lib/use-prefers-reduced-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-prefers-reduced-motion.d.ts","sourceRoot":"","sources":["../../src/lib/use-prefers-reduced-motion.ts"],"names":[],"mappings":"AAMA,wBAAgB,uBAAuB,YA0BtC"}

package/dist/lib/use-prefers-reduced-motion.js

@@ -0,0 +1,23 @@
+"use client";
+import * as React from "react";
+const QUERY = "(prefers-reduced-motion: reduce)";
+export function usePrefersReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
+    React.useEffect(() => {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return;
+        }
+        const mediaQuery = window.matchMedia(QUERY);
+        const handleChange = () => {
+            setPrefersReducedMotion(mediaQuery.matches);
+        };
+        handleChange();
+        if (typeof mediaQuery.addEventListener === "function") {
+            mediaQuery.addEventListener("change", handleChange);
+            return () => mediaQuery.removeEventListener("change", handleChange);
+        }
+        mediaQuery.addListener(handleChange);
+        return () => mediaQuery.removeListener(handleChange);
+    }, []);
+    return prefersReducedMotion;
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@glinui/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GLINCKER/glinui",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://glinui.com",
+  "bugs": "https://github.com/GLINCKER/glinui/issues",
+  "keywords": ["glinui", "glassmorphism", "liquid-glass", "react", "tailwindcss", "ui", "design-system"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "echo 'lint: @glinui/ui (todo)'",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^0.563.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.2",
+    "@vitest/coverage-v8": "3.2.4",
+    "axe-core": "^4.11.1",
+    "jsdom": "^26.1.0",
+    "vitest": "^3.2.4"
+  }
+}