packages/ui: add danger mode to container

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<HTMLDivElement> & PropsWithChildren;
 
-export function ElementContainer({ children, id, title, ...props }: ContainerProps) {
-  return (
-    <div {...props} className="flex flex-col justify-center">
+const variants = cva('flex h-9 items-center', {
+  defaultVariants: {
+    intent: 'default',
+  },
+  variants: {
+    intent: {
+      danger: '[&>*]:border-red-500',
+      default: '',
+    },
+  },
+});
+
+export type WrapperProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof variants> & { readonly message?: string };
+
+export const ElementContainer = forwardRef<HTMLDivElement, WrapperProps>(
+  ({ children, className, id, intent, message = 'Некорректные данные', title, ...props }, ref) => (
+    <div {...props} className="flex flex-col justify-center" ref={ref} {...props}>
       <label
         htmlFor={id}
         className="mb-1 block overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-black text-opacity-90"
       >
         {title}
       </label>
-      <div className="flex h-9 items-center">{children}</div>
+      <div className={cn(variants({ className, intent }))}>{children}</div>
+      <div className="mt-1 text-xs text-red-500 transition-all ease-in-out">
+        {intent === 'danger' ? message : <div className="my-4" />}
+      </div>
     </div>
-  );
-}
+  )
+);