48 lines
1.7 KiB
React
48 lines
1.7 KiB
React
import React from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
/**
|
|
* PncyssD Design System Input
|
|
* Supports standard input, select, and textarea with consistent glassmorphism styling.
|
|
*/
|
|
|
|
const baseStyles = "w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 focus:bg-white/10 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed backdrop-blur-sm";
|
|
const errorStyles = "border-red-500/50 focus:border-red-500 focus:ring-red-500/50 bg-red-500/5";
|
|
|
|
export const Input = React.forwardRef(({ className, error, ...props }, ref) => {
|
|
return (
|
|
<input
|
|
ref={ref}
|
|
className={clsx(baseStyles, error && errorStyles, className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
});
|
|
|
|
export const Select = React.forwardRef(({ className, children, error, ...props }, ref) => {
|
|
return (
|
|
<div className="relative">
|
|
<select
|
|
ref={ref}
|
|
className={clsx(baseStyles, "appearance-none pr-10", error && errorStyles, className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</select>
|
|
<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export const Textarea = React.forwardRef(({ className, error, ...props }, ref) => {
|
|
return (
|
|
<textarea
|
|
ref={ref}
|
|
className={clsx(baseStyles, "resize-none min-h-[100px]", error && errorStyles, className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
});
|