diff --git a/packages/ui/container.tsx b/packages/ui/container.tsx index 66242b5..fa3acf9 100644 --- a/packages/ui/container.tsx +++ b/packages/ui/container.tsx @@ -1,17 +1,38 @@ -import type { HTMLAttributes, PropsWithChildren } from 'react'; +import { cn } from './utils'; +import type { VariantProps } from 'class-variance-authority'; +import { cva } from 'class-variance-authority'; +import { forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react'; export type ContainerProps = HTMLAttributes & PropsWithChildren; -export function ElementContainer({ children, id, title, ...props }: ContainerProps) { - return ( -
+const variants = cva('flex h-9 items-center', { + defaultVariants: { + intent: 'default', + }, + variants: { + intent: { + danger: '[&>*]:border-red-500', + default: '', + }, + }, +}); + +export type WrapperProps = HTMLAttributes & + VariantProps & { readonly message?: string }; + +export const ElementContainer = forwardRef( + ({ children, className, id, intent, message = 'Некорректные данные', title, ...props }, ref) => ( +
-
{children}
+
{children}
+
+ {intent === 'danger' ? message :
} +
- ); -} + ) +);