91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
|
import { cn } from '../../lib/utils';
|
||
|
|
import type { ComponentProps, HTMLAttributes } from 'react';
|
||
|
|
import { forwardRef } from 'react';
|
||
|
|
|
||
|
|
export type InputGroupProps = HTMLAttributes<HTMLDivElement>;
|
||
|
|
|
||
|
|
export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
|
||
|
|
({ className, ...props }, ref) => (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
'flex flex-col rounded-xl border border-border/65 bg-background transition-[border-color,background-color]',
|
||
|
|
'focus-within:border-primary/45 focus-within:ring-1 focus-within:ring-primary/20',
|
||
|
|
'overflow-hidden',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
);
|
||
|
|
InputGroup.displayName = 'InputGroup';
|
||
|
|
|
||
|
|
export type InputGroupTextareaProps = ComponentProps<'textarea'>;
|
||
|
|
|
||
|
|
export const InputGroupTextarea = forwardRef<HTMLTextAreaElement, InputGroupTextareaProps>(
|
||
|
|
({ className, ...props }, ref) => (
|
||
|
|
<textarea
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
'w-full resize-none bg-transparent text-[13px] text-foreground/92 selection:bg-primary/25',
|
||
|
|
'placeholder:text-muted-foreground/62 placeholder:font-medium placeholder:text-[13px]',
|
||
|
|
'focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed',
|
||
|
|
'px-4 pt-3.5 pb-2 leading-[20px]',
|
||
|
|
'field-sizing-content min-h-[82px] max-h-52',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
);
|
||
|
|
InputGroupTextarea.displayName = 'InputGroupTextarea';
|
||
|
|
|
||
|
|
export type InputGroupAddonProps = HTMLAttributes<HTMLDivElement> & {
|
||
|
|
align?: 'block-start' | 'block-end';
|
||
|
|
};
|
||
|
|
|
||
|
|
export const InputGroupAddon = forwardRef<HTMLDivElement, InputGroupAddonProps>(
|
||
|
|
({ className, align = 'block-end', ...props }, ref) => (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
'flex items-center px-2.5 py-1.5',
|
||
|
|
align === 'block-start' && 'border-b border-border/35 bg-muted/8',
|
||
|
|
align === 'block-end' && 'border-t border-border/60 bg-muted/10',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
);
|
||
|
|
InputGroupAddon.displayName = 'InputGroupAddon';
|
||
|
|
|
||
|
|
export type InputGroupButtonProps = ComponentProps<'button'> & {
|
||
|
|
variant?: 'default' | 'ghost' | 'outline' | 'destructive';
|
||
|
|
size?: 'sm' | 'icon-sm' | 'default';
|
||
|
|
};
|
||
|
|
|
||
|
|
export const InputGroupButton = forwardRef<HTMLButtonElement, InputGroupButtonProps>(
|
||
|
|
({ className, variant = 'ghost', size = 'icon-sm', disabled, ...props }, ref) => (
|
||
|
|
<button
|
||
|
|
ref={ref}
|
||
|
|
type="button"
|
||
|
|
disabled={disabled}
|
||
|
|
className={cn(
|
||
|
|
'inline-flex items-center justify-center rounded-md transition-colors cursor-pointer',
|
||
|
|
'disabled:opacity-30 disabled:cursor-default',
|
||
|
|
size === 'icon-sm' && 'h-7 w-7',
|
||
|
|
size === 'sm' && 'h-7 px-2 text-[12px] gap-1',
|
||
|
|
size === 'default' && 'h-8 px-3 text-[13px] gap-1.5',
|
||
|
|
variant === 'ghost' && 'text-muted-foreground/78 hover:text-foreground hover:bg-muted/45',
|
||
|
|
variant === 'default' && 'bg-primary/80 text-primary-foreground hover:bg-primary',
|
||
|
|
variant === 'outline' && 'border border-border/40 text-muted-foreground/85 hover:text-foreground hover:bg-muted/35',
|
||
|
|
variant === 'destructive' && 'text-destructive/70 hover:text-destructive hover:bg-destructive/10',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
);
|
||
|
|
InputGroupButton.displayName = 'InputGroupButton';
|