aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
186 lines (183 loc) • 7.01 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useMemo, useCallback } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
const DEFAULT_GESTURES = [{
id: "quantum-loop",
name: "Quantum Loop",
pattern: "spiral-clockwise",
dimensions: [{
axis: "x",
weight: 0.4,
sensitivity: 0.7
}, {
axis: "y",
weight: 0.4,
sensitivity: 0.7
}, {
axis: "z",
weight: 0.2,
sensitivity: 0.6
}, {
axis: "rotation",
weight: 0.3,
sensitivity: 0.8
}],
description: "Circular gesture with rising elevation and gentle rotation.",
baselineConfidence: 0.82
}, {
id: "phase-shift",
name: "Phase Shift",
pattern: "figure-eight",
dimensions: [{
axis: "time",
weight: 0.2,
sensitivity: 0.5
}, {
axis: "pressure",
weight: 0.25,
sensitivity: 0.6
}, {
axis: "x",
weight: 0.35,
sensitivity: 0.65
}, {
axis: "y",
weight: 0.35,
sensitivity: 0.65
}],
description: "Alternating infinity loop signalling intent to switch contexts.",
baselineConfidence: 0.74
}, {
id: "portal-drag",
name: "Portal Drag",
pattern: "arc-downward",
dimensions: [{
axis: "z",
weight: 0.5,
sensitivity: 0.8
}, {
axis: "pressure",
weight: 0.3,
sensitivity: 0.7
}, {
axis: "time",
weight: 0.2,
sensitivity: 0.45
}],
description: "Pull motion to reveal immersive overlays.",
baselineConfidence: 0.69
}];
const dimensionLabel = {
x: "Lateral",
y: "Vertical",
z: "Depth",
time: "Temporal",
pressure: "Pressure",
rotation: "Rotation"
};
function MultiDimensionalGestureRecognizer({
gestures = DEFAULT_GESTURES,
onRecognize,
className,
showConfidence = true
}) {
const prefersReducedMotion = useReducedMotion();
const [activeGestureId, setActiveGestureId] = useState(null);
const summarizedGestures = useMemo(() => {
return gestures.length > 0 ? gestures : DEFAULT_GESTURES;
}, [gestures]);
const handleRecognize = useCallback(gesture => {
setActiveGestureId(gesture.id);
onRecognize?.(gesture);
}, [onRecognize]);
return jsxs(OptimizedGlassCore, {
role: "application",
"aria-label": "Multi-dimensional gesture recognizer",
className: cn("glass-radius-3xl glass-border glass-border-soft glass-p-6 space-y-6", "bg-gradient-to-br from-slate-950/80 via-indigo-950/40 to-slate-900/40", className),
children: [jsxs("header", {
className: "glass-flex glass-flex-wrap glass-items-center glass-justify-between glass-gap-4",
children: [jsxs("div", {
children: [jsx("h2", {
className: 'glass-text-xl font-semibold text-primary',
children: "Multi-dimensional Gesture Recognizer"
}), jsx("p", {
className: 'glass-text-sm text-primary/70',
children: "Analyse six-axis motion patterns with adaptive sensitivity tuning."
})]
}), showConfidence && activeGestureId && jsxs("span", {
className: 'glass-radius-full glass-border glass-border-white/10 glass-surface-subtle/10 glass-px-3 glass-py-1 glass-text-xs text-primary/80',
children: ["Active gesture:", " ", summarizedGestures.find(g => g.id === activeGestureId)?.name ?? "—"]
})]
}), jsx("div", {
className: 'glass-grid glass-gap-4 lg:grid-cols-3',
children: summarizedGestures.map(gesture => jsxs("button", {
type: "button",
onClick: () => handleRecognize(gesture),
className: cn("relative flex h-full flex-col gap-4 rounded-2xl border border-white/10 bg-white/5 p-4 text-left transition", "hover:border-white/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 glass-focus glass-touch-target glass-contrast-guard", activeGestureId === gesture.id ? "border-sky-400/60 shadow-[0_0_30px_-10px_rgba(125,211,252,0.8)]" : undefined),
children: [jsxs("div", {
children: [jsx("h3", {
className: 'glass-text-lg font-medium text-primary',
children: gesture.name
}), jsx("p", {
className: 'glass-text-xs text-primary/60',
children: gesture.description
})]
}), jsxs("dl", {
className: 'glass-grid glass-gap-2 glass-text-xs text-primary/70',
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-justify-between",
children: [jsx("dt", {
className: 'uppercase tracking-wide',
children: "Pattern"
}), jsx("dd", {
className: 'font-semibold text-primary/85',
children: gesture.pattern
})]
}), showConfidence && jsxs("div", {
className: "glass-flex glass-items-center glass-justify-between",
children: [jsx("dt", {
className: 'uppercase tracking-wide',
children: "Baseline confidence"
}), jsxs("dd", {
className: 'font-semibold text-primary',
children: [(Math.min(0.99, Math.max(0, gesture.baselineConfidence ?? 0.5)) * 100).toFixed(0), "%"]
})]
})]
}), jsxs("div", {
className: 'mt-auto space-y-2',
children: [jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between glass-text-xs text-primary/50',
children: [jsx("span", {
children: "Dimensional weights"
}), !prefersReducedMotion && jsxs("span", {
className: 'font-semibold text-primary/70',
children: [gesture.dimensions.length, " axes"]
})]
}), jsx("ul", {
className: 'glass-grid glass-gap-2 glass-text-xs text-primary',
children: gesture.dimensions.map(dimension => jsxs("li", {
className: "glass-flex glass-items-center glass-justify-between glass-radius-xl glass-border glass-border-white/5 glass-surface-subtle/5 glass-px-3 glass-py-2",
children: [jsx("span", {
className: 'font-medium text-primary/85',
children: dimensionLabel[dimension.axis]
}), jsxs("span", {
className: 'text-primary/60',
children: ["Weight ", (dimension.weight ?? 0.25).toFixed(2), " | Sens", " ", (dimension.sensitivity ?? 0.5).toFixed(2)]
})]
}, `${gesture.id}-${dimension.axis}`))
})]
})]
}, gesture.id))
})]
});
}
export { MultiDimensionalGestureRecognizer, MultiDimensionalGestureRecognizer as default };
//# sourceMappingURL=MultiDimensionalGestureRecognizer.js.map