"use client"; import * as React from "react"; import { motion } from "motion/react"; /* ── sound ─────────────────────────────────────────────── */ let _a: AudioContext, _b: AudioBuffer; const tick = () => { if (typeof window === "undefined") return; if (!_a) { _a = new AudioContext(); _b = _a.createBuffer(1, (_a.sampleRate * 0.003) | 0, _a.sampleRate); const d = _b.getChannelData(0); for (let i = 0; i < d.length; i++) d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4; } const s = _a.createBufferSource(); s.buffer = _b; const g = _a.createGain(); g.gain.value = 0.08; s.connect(g).connect(_a.destination); s.start(); }; /* ── theme ─────────────────────────────────────────────── */ /* Light: frosted-white panels, soft outer shadows */ /* Dark : original white-tint glass, inner glow */ const GLASS_CSS = ` .gf{ --gf-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62)); --gf-border:rgba(0,0,0,0.06); --gf-shadow:0 0 1px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8); --gf-sep:rgba(0,0,0,0.06); --gf-dim:rgba(0,0,0,0.42); --gf-mid:rgba(0,0,0,0.55); --gf-hi:rgba(0,0,0,0.88); --gf-hover:rgba(0,0,0,0.025); --gf-toggle-on:#007AFF; --gf-toggle-off:rgba(0,0,0,0.1); --gf-seg-bg:rgba(0,0,0,0.04); --gf-seg-active:rgba(0,0,0,0.07); --gf-knob:#fff; --gf-knob-border:rgba(0,0,0,0.08); --gf-knob-shadow:0 1px 3px rgba(0,0,0,0.12); --gf-ghost:rgba(0,0,0,0.03); --gf-ghost-h:rgba(0,0,0,0.06) } .dark .gf,[data-theme="dark"] .gf{ --gf-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)); --gf-border:rgba(255,255,255,0.07); --gf-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04); --gf-sep:rgba(255,255,255,0.06); --gf-dim:rgba(255,255,255,0.28); --gf-mid:rgba(255,255,255,0.5); --gf-hi:rgba(255,255,255,0.88); --gf-hover:rgba(255,255,255,0.015); --gf-toggle-on:#0A84FF; --gf-toggle-off:rgba(255,255,255,0.1); --gf-seg-bg:rgba(255,255,255,0.04); --gf-seg-active:rgba(255,255,255,0.09); --gf-knob:#fff; --gf-knob-border:rgba(255,255,255,0.06); --gf-knob-shadow:0 1px 3px rgba(0,0,0,0.15); --gf-ghost:rgba(255,255,255,0.02); --gf-ghost-h:rgba(255,255,255,0.05) }`; /* ── palette ───────────────────────────────────────────── */ const P = { glass: "var(--gf-glass)", glassBorder: "var(--gf-border)", glassShadow: "var(--gf-shadow)", separator: "var(--gf-sep)", dim: "var(--gf-dim)", mid: "var(--gf-mid)", hi: "var(--gf-hi)", accent: "hsl(var(--primary))", accentFg: "hsl(var(--primary-foreground))", toggleOn: "var(--gf-toggle-on)", toggleOff: "var(--gf-toggle-off)", segBg: "var(--gf-seg-bg)", segActive: "var(--gf-seg-active)", hoverRow: "var(--gf-hover)", knob: "var(--gf-knob)", knobBorder: "var(--gf-knob-border)", knobShadow: "var(--gf-knob-shadow)", ghost: "var(--gf-ghost)", ghostHover: "var(--gf-ghost-h)", }; /* ── context ───────────────────────────────────────────── */ const FormCtx = React.createContext({ sound: true }); /* ═══════════════════════════════════════════════════════════ GlassForm — outer

wrapper ═══════════════════════════════════════════════════════════ */ interface GlassFormProps { children: React.ReactNode; onSubmit?: (e: React.FormEvent) => void; sound?: boolean; style?: React.CSSProperties; } function GlassForm({ children, onSubmit, sound = true, style, }: GlassFormProps) { return ( { e.preventDefault(); if (sound) tick(); onSubmit?.(e); }} style={{ width: "100%", maxWidth: 380, display: "flex", flexDirection: "column", gap: 24, ...style, }} > {children} ); } /* ═══════════════════════════════════════════════════════════ FormGroup — rounded glass container grouping rows ═══════════════════════════════════════════════════════════ */ interface FormGroupProps { title?: string; footer?: string; children: React.ReactNode; } function FormGroup({ title, footer, children }: FormGroupProps) { const items = React.Children.toArray(children).filter(Boolean); return (

{title && (

{title}

)}

{items.map((child, i) => ( {i > 0 && (

)} {child} ))}

{footer && (

{footer}

)}

); } /* ═══════════════════════════════════════════════════════════ FormField — label + text input row ═══════════════════════════════════════════════════════════ */ interface FormFieldProps { label: string; type?: string; placeholder?: string; value?: string; defaultValue?: string; onChange?: (value: string) => void; disabled?: boolean; autoFocus?: boolean; } function FormField({ label, type = "text", placeholder, value, defaultValue, onChange, disabled, autoFocus, }: FormFieldProps) { const [showPass, setShowPass] = React.useState(false); const [hover, setHover] = React.useState(false); const isPassword = type === "password"; return (

setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "flex", alignItems: "center", padding: "0 16px", minHeight: 44, opacity: disabled ? 0.35 : 1, background: hover && !disabled ? P.hoverRow : "transparent", transition: "background 120ms", }} > {label} onChange?.(e.target.value)} disabled={disabled} autoFocus={autoFocus} style={{ flex: 1, fontSize: 15, color: P.hi, background: "transparent", border: "none", outline: "none", textAlign: "right", padding: "11px 0", fontFamily: "inherit", }} /> {isPassword && ( )}

); } /* ═══════════════════════════════════════════════════════════ FormToggle — label + iOS-style toggle ═══════════════════════════════════════════════════════════ */ interface FormToggleProps { label: string; description?: string; checked?: boolean; defaultChecked?: boolean; onChange?: (checked: boolean) => void; } function FormToggle({ label, description, checked, defaultChecked, onChange, }: FormToggleProps) { const { sound } = React.useContext(FormCtx); const [internal, setInternal] = React.useState(defaultChecked ?? false); const [hover, setHover] = React.useState(false); const active = checked !== undefined ? checked : internal; const toggle = () => { if (sound) tick(); const next = !active; if (onChange) onChange(next); else setInternal(next); }; return (

{ if (e.key === " " || e.key === "Enter") { e.preventDefault(); toggle(); } }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "flex", alignItems: "center", padding: "0 16px", minHeight: 44, cursor: "pointer", userSelect: "none", background: hover ? P.hoverRow : "transparent", transition: "background 120ms", }} >

{label}

{description && (

{description}

)}

); } /* ═══════════════════════════════════════════════════════════ FormSegment — label + segmented control ═══════════════════════════════════════════════════════════ */ interface SegmentOption { label: string; value: string; } interface FormSegmentProps { label: string; options: SegmentOption[]; value?: string; defaultValue?: string; onChange?: (value: string) => void; } function FormSegment({ label, options, value, defaultValue, onChange, }: FormSegmentProps) { const { sound } = React.useContext(FormCtx); const id = React.useId(); const [internal, setInternal] = React.useState( defaultValue || options[0]?.value, ); const active = value !== undefined ? value : internal; const select = (v: string) => { if (sound) tick(); if (onChange) onChange(v); else setInternal(v); }; return (

{label}

{options.map((opt) => { const isActive = active === opt.value; return ( ); })}

); } /* ═══════════════════════════════════════════════════════════ FormButton — action button ═══════════════════════════════════════════════════════════ */ interface FormButtonProps { children: React.ReactNode; variant?: "primary" | "glass" | "text"; type?: "submit" | "button"; onClick?: () => void; disabled?: boolean; } function FormButton({ children, variant = "primary", type = "submit", onClick, disabled, }: FormButtonProps) { const { sound } = React.useContext(FormCtx); const [hover, setHover] = React.useState(false); const isPrimary = variant === "primary"; const isText = variant === "text"; return ( { if (disabled) return; if (sound) tick(); onClick?.(); }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} disabled={disabled} style={{ width: "100%", padding: isText ? "8px 0" : "12px 0", fontSize: 15, fontWeight: isPrimary ? 600 : 500, letterSpacing: isPrimary ? "-0.01em" : undefined, color: isPrimary ? P.accentFg : isText ? P.accent : P.hi, background: isPrimary ? P.accent : isText ? "transparent" : hover ? P.ghostHover : P.ghost, filter: isPrimary && hover ? "brightness(1.1)" : undefined, border: isPrimary || isText ? "none" : `1px solid ${P.glassBorder}`, borderRadius: isText ? 0 : 14, cursor: disabled ? "default" : "pointer", fontFamily: "inherit", transition: "all 150ms", opacity: disabled ? 0.35 : 1, boxShadow: isPrimary ? "0 1px 3px rgba(0,0,0,0.12)" : isText ? "none" : P.glassShadow, }} > {children} ); } /* ── exports ───────────────────────────────────────────── */ export { GlassForm, FormGroup, FormField, FormToggle, FormSegment, FormButton }; export type { GlassFormProps, FormGroupProps, FormFieldProps, FormToggleProps, FormSegmentProps, FormButtonProps, };

Glass Form

Installation

Build stunning UIs in minutes