packages/ui: add alert

packages/ui/alert.tsx

@@ -0,0 +1,43 @@
+import { cn } from './utils';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+const variants = cva('flex p-4 mb-4 text-s rounded-md', {
+  defaultVariants: {
+    color: 'default',
+  },
+  variants: {
+    color: {
+      danger: 'border-red-300 bg-red-50 p-4 text-sm text-red-800',
+      default: 'border-blue-300 bg-blue-50 p-4 text-sm text-blue-800',
+      success: 'border-green-300 bg-green-50 p-4 text-sm text-green-800',
+      warning: 'border-yellow-300 bg-yellow-50 p-4 text-sm text-yellow-800',
+    },
+  },
+});
+
+export type AlertProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof variants> & { readonly description?: string; readonly title: string };
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, color, description, title, ...props }, ref) => (
+    <div className={cn(variants({ className, color }))} role="alert" {...props} ref={ref}>
+      <svg
+        className="mr-3 mt-[2px] inline h-4 w-4 flex-shrink-0"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+      </svg>
+      <span className="sr-only">Info</span>
+      <div>
+        <span className="font-medium">{title}</span>
+        {description && <div className="mt-1.5 list-inside list-disc">{description}</div>}
+      </div>
+    </div>
+  )
+);

packages/ui/index.tsx

@@ -1,3 +1,4 @@
+export * from './alert';
 export * from './background';
 export * from './button';
 export * from './checkbox';