mirror of
https://github.com/AppFlowy-IO/AppFlowy-Web.git
synced 2025-11-29 10:47:56 +08:00
15ec240887
* chore: import new ui system * chore: modified padding and rounded * chore: remove vertical padding * chore: add shadow * chore: add shadcn popover (#76) * chore: add circle progress (#77) * chore: add input (#78) * feat: add shadcn toast (#80) * chore: initial import * chore: style * chore: important * chore: add dropdown menu (#81) * feat: add shadcn tooltip (#79) * chore: initial import * chore: style * chore: fix text size * chore: add tooltip shortcut * chore: code cleanup and add flex col * chore: add avatar (#82) * chore: add dialog (#83) --------- Co-authored-by: Richard Shiue <71320345+richardshiue@users.noreply.github.com>
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import * as React from 'react';
|
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
// Base input styles that apply to all variants and sizes
|
|
const baseInputStyles = cn(
|
|
// Text and placeholder styling
|
|
'text-text-primary placeholder:text-text-tertiary',
|
|
|
|
// Selection styling
|
|
'selection:bg-fill-theme-thick selection:text-text-on-fill focus:caret-fill-theme-thick',
|
|
|
|
'bg-fill-transparent',
|
|
|
|
// Layout
|
|
'flex min-w-0',
|
|
|
|
// Typography
|
|
'text-sm',
|
|
|
|
// Effects
|
|
'outline-none',
|
|
|
|
// File input styling
|
|
'file:inline-flex file:border-0 file:bg-fill-transparent file:text-sm file:font-medium',
|
|
|
|
// Disabled state
|
|
'disabled:pointer-events-none disabled:cursor-not-allowed',
|
|
);
|
|
|
|
const inputVariants = cva(
|
|
baseInputStyles,
|
|
{
|
|
variants: {
|
|
variant: {
|
|
// Default variant with focus styles
|
|
default: 'border-border-grey-tertiary border focus-visible:border-border-theme-thick focus-visible:ring-border-theme-thick focus-visible:ring-[0.5px] disabled:border-border-grey-tertiary disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary hover:border-border-grey-tertiary-hover',
|
|
|
|
// Destructive variant for error states
|
|
destructive: 'border border-border-error-thick focus-visible:border-border-error-thick focus-visible:ring-border-error-thick focus-visible:ring-[0.5px] focus:caret-text-primary disabled:border-border-grey-tertiary disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary',
|
|
|
|
// Ghost variant without visible borders
|
|
ghost: 'border-fill-transparent focus-visible:border-transparent focus-visible:ring-transparent disabled:border-fill-transparent disabled:bg-fill-transparent disabled:text-text-tertiary',
|
|
},
|
|
size: {
|
|
// Small size input
|
|
sm: 'h-8 px-2 rounded-300',
|
|
|
|
// Medium size input (default)
|
|
md: 'h-10 px-2 rounded-400',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
size: 'sm',
|
|
},
|
|
},
|
|
);
|
|
|
|
export interface InputProps
|
|
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'variant'>,
|
|
VariantProps<typeof inputVariants> {}
|
|
|
|
function Input ({
|
|
className,
|
|
type,
|
|
variant,
|
|
size,
|
|
...props
|
|
}: InputProps) {
|
|
return (
|
|
<input
|
|
type={type}
|
|
data-slot="input"
|
|
className={cn(
|
|
inputVariants({ variant, size }),
|
|
// Invalid state styling (applied via aria-invalid attribute)
|
|
'aria-invalid:ring-border-error-thick aria-invalid:border-border-error-thick',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export { Input }; |