aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
70 lines (67 loc) • 2.71 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import React from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { GlassButton } from '../button/GlassButton.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';
function GlassTagInput({
value,
onChange,
placeholder = "Add tag…",
suggestions = [],
className
}) {
const [input, setInput] = React.useState("");
const add = t => {
const tag = t.trim();
if (!tag) return;
if (!value.includes(tag)) onChange([...value, tag]);
setInput("");
};
const remove = tag => onChange(value.filter(v => v !== tag));
return jsxs(OptimizedGlassCore, {
"data-glass-component": true,
elevation: "level1",
className: cn("glass-radius-xl glass-p-2 flex flex-wrap glass-gap-2", className),
children: [value.map(t => jsxs("span", {
className: "glass-inline-flex glass-items-center glass-gap-1 glass-px-2 glass-py-1 glass-text-sm glass-radius-lg glass-surface-subtle/10 glass-border glass-border-white/20",
children: [t, jsx("button", {
onClick: e => remove(t),
className: 'text-primary/60 hover:text-primary glass-focus glass-touch-target glass-contrast-guard',
children: "\u00D7"
})]
}, t)), jsx("input", {
value: input,
onChange: e => setInput(e.target.value),
onKeyDown: e => {
if (e.key === "Enter") {
e.preventDefault();
add(input);
} else if (e.key === "Backspace" && !input && value.length) {
remove(value[value.length - 1]);
}
},
placeholder: placeholder,
className: 'glass-flex-1 min-w-[120px] bg-transparent outline-none glass-text-sm placeholder:text-primary/50 glass-focus glass-touch-target glass-contrast-guard'
}), !!suggestions.length && input && jsx("div", {
className: 'glass-w-full -mb-1',
children: jsx("div", {
className: "glass-mt-1 glass-radius-lg glass-border glass-border-white/15 glass-surface-dark/20 glass-p-1",
children: suggestions.filter(s => s.toLowerCase().includes(input.toLowerCase())).slice(0, 6).map(s => jsx(GlassButton, {
variant: "ghost",
size: "sm",
className: "glass-w-full glass-justify-start",
onClick: e => add(s),
children: s
}, s))
})
})]
});
}
export { GlassTagInput, GlassTagInput as default };
//# sourceMappingURL=GlassTagInput.js.map