feat(ui): add alert component

packages/ui/package.json

@@ -23,6 +23,11 @@
       "require": "./dist/alert-dialog.js",
       "types": "./dist/alert-dialog.d.ts"
     },
+    "./alert": {
+      "import": "./dist/alert.mjs",
+      "require": "./dist/alert.js",
+      "types": "./dist/alert.d.ts"
+    },
     "./avatar": {
       "import": "./dist/avatar.mjs",
       "require": "./dist/avatar.js",
@@ -153,6 +158,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "lint": "eslint src --fix --max-warnings 0",
+    "format": "prettier --write src",
     "clean": "rimraf .turbo node_modules dist"
   },
   "dependencies": {

packages/ui/src/alert.tsx

@@ -0,0 +1,70 @@
+import { forwardRef } from "react";
+
+import { tv, type VariantProps } from "@fellipeutaka/styles";
+
+export const AlertStyles = {
+  Root: tv({
+    base: [
+      "relative w-full rounded-lg border border-border p-4",
+      "[&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+    ],
+    variants: {
+      variant: {
+        default: ["bg-background text-foreground"],
+        destructive: [
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }),
+  Title: tv({
+    base: ["mb-1 font-medium leading-none tracking-tight"],
+  }),
+  Description: tv({
+    base: ["text-sm", "[&_p]:leading-relaxed"],
+  }),
+};
+
+export const AlertRoot = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<(typeof AlertStyles)["Root"]>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={AlertStyles.Root({ variant, className })}
+    {...props}
+  />
+));
+AlertRoot.displayName = "Alert";
+
+export const AlertTitle = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, children, ...props }, ref) => (
+  <h5 ref={ref} className={AlertStyles.Title({ className })} {...props}>
+    {children}
+  </h5>
+));
+AlertTitle.displayName = "AlertTitle";
+
+export const AlertDescription = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={AlertStyles.Description({ className })}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export const Alert = Object.assign(AlertRoot, {
+  Title: AlertTitle,
+  Description: AlertDescription,
+});

packages/ui/src/avatar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import { forwardRef } from "react";
 
 import { tv } from "@fellipeutaka/styles";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
@@ -23,7 +23,7 @@ export type AvatarProps = React.ComponentPropsWithoutRef<
   typeof AvatarPrimitive.Root
 >;
 
-const Root = React.forwardRef<
+const Root = forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   AvatarProps
 >(({ className, ...props }, ref) => (
@@ -39,7 +39,7 @@ export type AvatarImageProps = React.ComponentPropsWithoutRef<
   typeof AvatarPrimitive.Image
 >;
 
-const Image = React.forwardRef<
+const Image = forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   AvatarImageProps
 >(({ className, ...props }, ref) => (
@@ -55,7 +55,7 @@ export type AvatarFallbackProps = React.ComponentPropsWithoutRef<
   typeof AvatarPrimitive.Fallback
 >;
 
-const Fallback = React.forwardRef<
+const Fallback = forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (