aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
184 lines (181 loc) • 7.4 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useMemo } 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';
const DEFAULT_MOLECULES = [{
id: "c",
symbol: "C",
name: "Carbon",
valence: 4,
electronegativity: 2.55
}, {
id: "o",
symbol: "O",
name: "Oxygen",
valence: 2,
electronegativity: 3.44
}, {
id: "h1",
symbol: "H",
name: "Hydrogen",
valence: 1,
electronegativity: 2.2
}, {
id: "h2",
symbol: "H",
name: "Hydrogen",
valence: 1,
electronegativity: 2.2
}];
const DEFAULT_BONDS = [{
id: "c-o",
from: "c",
to: "o",
strength: 0.82,
type: "covalent",
resonance: 0.4
}, {
id: "c-h1",
from: "c",
to: "h1",
strength: 0.61,
type: "covalent"
}, {
id: "c-h2",
from: "c",
to: "h2",
strength: 0.63,
type: "covalent"
}];
const bondColors = {
ionic: "from-blue-500/70 to-sky-500/40",
covalent: "from-purple-500/70 to-fuchsia-500/40",
hydrogen: "from-emerald-400/70 to-teal-500/30",
"van-der-waals": "from-amber-400/70 to-orange-400/40"
};
function MolecularBondingInterface({
className,
molecules = DEFAULT_MOLECULES,
bonds = DEFAULT_BONDS,
onInspectBond
}) {
const moleculeMap = useMemo(() => {
const dictionary = new Map();
molecules.forEach(molecule => {
dictionary.set(molecule.id, molecule);
});
return dictionary;
}, [molecules]);
return jsxs(OptimizedGlassCore, {
role: "group",
"aria-label": "Molecular bonding interface",
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-slate-900/60 to-slate-900/40", className),
children: [jsxs("header", {
className: 'space-y-1',
children: [jsx("h2", {
className: 'glass-text-xl font-semibold text-primary',
children: "Molecular Bonding Interface"
}), jsx("p", {
className: 'glass-text-sm text-primary/70',
children: "Visualize complex bonding interactions with electronegativity and resonance indicators."
})]
}), jsxs("div", {
className: 'glass-grid glass-gap-4 md:grid-cols-[minmax(0,240px)_1fr]',
children: [jsxs("section", {
className: "glass-radius-2xl glass-border glass-border-white/10 glass-surface-subtle/5 glass-p-4 glass-backdrop-blur",
children: [jsx("h3", {
className: 'glass-text-sm font-semibold text-primary/80 uppercase tracking-wide',
children: "Molecules"
}), jsx("ul", {
className: 'mt-3 space-y-3 glass-text-sm',
children: molecules.map(molecule => jsxs("li", {
className: 'glass-flex glass-items-center glass-justify-between glass-radius-xl glass-border glass-border-white/10 glass-px-3 glass-py-2 text-primary/85',
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-gap-3",
children: [jsx("span", {
className: 'glass-flex h-9 w-9 glass-items-center glass-justify-center glass-radius-full glass-surface-subtle/10 glass-text-base font-semibold',
children: molecule.symbol
}), jsxs("span", {
children: [jsx("div", {
className: 'font-medium text-primary',
children: molecule.name
}), jsxs("div", {
className: 'glass-text-xs text-primary/60',
children: ["Valence: ", molecule.valence ?? "—", " | EN:", " ", molecule.electronegativity?.toFixed(2) ?? "—"]
})]
})]
}), typeof molecule.charge === "number" && jsx("span", {
className: cn("text-xs font-semibold", molecule.charge >= 0 ? "text-emerald-300" : "text-rose-300"),
children: molecule.charge >= 0 ? `+${molecule.charge}` : molecule.charge
})]
}, molecule.id))
})]
}), jsxs("section", {
className: "glass-radius-2xl glass-border glass-border-white/10 glass-surface-subtle/5 glass-p-4 glass-backdrop-blur",
children: [jsx("h3", {
className: 'glass-text-sm font-semibold text-primary/80 uppercase tracking-wide',
children: "Bond Network"
}), jsx("div", {
className: 'mt-4 glass-grid glass-gap-3 glass-text-sm',
children: bonds.map(bond => {
const source = moleculeMap.get(bond.from);
const target = moleculeMap.get(bond.to);
if (!source || !target) return null;
const gradient = bond.type ? bondColors[bond.type] : "from-slate-500/60 to-slate-700/30";
return jsxs("button", {
type: "button",
onClick: () => onInspectBond?.(bond),
className: cn("w-full rounded-2xl border border-white/10 px-4 py-3 text-left transition hover:border-white/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 glass-focus glass-touch-target glass-contrast-guard", "bg-gradient-to-r", gradient),
children: [jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between glass-gap-4 text-primary',
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-gap-2 glass-text-sm",
children: [jsx("span", {
className: 'font-semibold',
children: source.symbol
}), jsx("span", {
className: 'text-primary/60',
children: "\u21C4"
}), jsx("span", {
className: 'font-semibold',
children: target.symbol
})]
}), jsx("span", {
className: 'glass-text-xs uppercase tracking-wide text-primary/80',
children: bond.type ?? "unknown"
})]
}), jsxs("div", {
className: 'mt-3 glass-grid glass-gap-2 glass-text-xs text-primary/80 sm:grid-cols-2',
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-justify-between",
children: [jsx("span", {
children: "Strength Index"
}), jsxs("span", {
className: 'font-semibold text-primary',
children: [(bond.strength * 100).toFixed(0), "%"]
})]
}), typeof bond.resonance === "number" && jsxs("div", {
className: "glass-flex glass-items-center glass-justify-between",
children: [jsx("span", {
children: "Resonance"
}), jsxs("span", {
className: 'font-semibold text-primary/90',
children: [(bond.resonance * 100).toFixed(0), "%"]
})]
})]
})]
}, bond.id);
})
})]
})]
})]
});
}
export { MolecularBondingInterface, MolecularBondingInterface as default };
//# sourceMappingURL=MolecularBondingInterface.js.map