mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-12 23:33:43 +08:00
kuekhaoyangandClaude Opus 4.6
df137c97f3
- Upgrade CSS variables with proper glass transparency, fixed gradient backgrounds, cubic-bezier(0.2, 0.8, 0.2, 1) fluid transitions, and enhanced shadow/border values matching the Liquid Glass touchstone - Add full backdrop-filter: blur(25px) saturate(180%) to glass-card, glass-input, glass-popover, and glass-backdrop CSS classes - Add lensing inner-glow hover effects and toast-in animation - Update all UI components (Button, Card, Input, Badge, Switch, SegmentedControl, ConfirmDialog, ModalBackdrop, ModalHeader, BackToTop, Navbar) for strict Liquid Glass compliance - Enforce rounded-2xl / rounded-full consistency across all components - Bump version to 4.6.0, update @vercel/analytics to ^2.0.1 Co-Authored-By: Claude Opus 4.6 <[email protected]>
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import React, { forwardRef } from 'react';
|
|
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label?: string;
|
|
error?: string;
|
|
}
|
|
|
|
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
({ label, error, className = '', ...props }, ref) => {
|
|
return (
|
|
<div className="w-full">
|
|
{label && (
|
|
<label className="block text-sm font-medium text-[var(--text-color)] mb-2">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<input
|
|
ref={ref}
|
|
className={`
|
|
w-full px-4 py-3 md:px-6 md:py-4
|
|
text-base
|
|
bg-[var(--glass-bg)]
|
|
backdrop-blur-[10px] saturate-[150%]
|
|
[-webkit-backdrop-filter:blur(10px)_saturate(150%)]
|
|
border border-[var(--glass-border)]
|
|
rounded-[var(--radius-2xl)]
|
|
text-[var(--text-color)]
|
|
placeholder:text-[var(--text-color-secondary)]
|
|
focus:outline-none
|
|
focus:border-[var(--accent-color)]
|
|
focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent-color)_30%,transparent)]
|
|
transition-all duration-[0.4s]
|
|
[transition-timing-function:cubic-bezier(0.2,0.8,0.2,1)]
|
|
touch-manipulation
|
|
${error ? 'border-red-500' : ''}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<p className="mt-2 text-sm text-red-400">{error}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
Input.displayName = 'Input';
|