64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
||
|
|
merged?: boolean
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
|
||
|
|
({ className, merged, ...props }, ref) => (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
"flex relative flex-wrap items-stretch w-full group input-group ltr:flex-row rtl:flex-row-reverse group-focus-within:border-default dark:group-focus-within:border-default-500 ",
|
||
|
|
className,
|
||
|
|
{
|
||
|
|
merged: merged,
|
||
|
|
}
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
InputGroup.displayName = "InputGroup";
|
||
|
|
|
||
|
|
const InputGroupButton = React.forwardRef<
|
||
|
|
HTMLDivElement,
|
||
|
|
React.HTMLAttributes<HTMLDivElement>
|
||
|
|
>(({ className, ...props }, ref) => (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
"[&>*]:first:rounded-r-none [&>*]:last:rounded-l-none focus:border-default dark:focus:border-default-500",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
));
|
||
|
|
InputGroupButton.displayName = "InputGroupButton";
|
||
|
|
|
||
|
|
const InputGroupText = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||
|
|
({ className, color, ...props }, ref) => (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
"border border-default-200 text-default-500 text-sm font-normal bg-background flex items-center justify-center px-3 first:border-r-0 last:border-l-0 first:rounded-l-md last:rounded-r-md group-focus-within:border-default dark:group-focus-within:border-default-500 ring-default transition duration-300",
|
||
|
|
className,
|
||
|
|
{
|
||
|
|
"border-primary/50": color === "primary",
|
||
|
|
"border-secondary/50": color === "secondary",
|
||
|
|
"border-warning/50 ": color === "warning",
|
||
|
|
"border-info/50 ": color === "info",
|
||
|
|
"border-success/50": color === "success",
|
||
|
|
"border-destructive/50 ": color === "destructive"
|
||
|
|
}
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
InputGroupText.displayName = "InputGroupText";
|
||
|
|
|
||
|
|
export { InputGroup, InputGroupButton, InputGroupText };
|