added core alart component

Author: ariflogs

app/(sink)/demo/components/page.tsx

@@ -2,6 +2,7 @@
 
 import {
   Accordion,
+  Alert,
   Avatar,
   Badge,
   Button,
@@ -12,6 +13,7 @@ import {
   TabsTriggerList,
 } from "@/packages/ui";
 import { Card } from "@/packages/ui/Cards/Card";
+import { Check, CheckCircle, CheckCircle2 } from "lucide-react";
 import React from "react";
 
 export default function page() {
@@ -76,12 +78,28 @@ export default function page() {
             <Card.Description>Card Description</Card.Description>
           </Card.Header>
         </Card>
-        <Accordion type="single" collapsible>
-          <Accordion.Item value="item-1">
-            <Accordion.Header>Head...</Accordion.Header>
-            <Accordion.Content>Content...</Accordion.Content>
-          </Accordion.Item>
-        </Accordion>
+      </div>
+
+      <div className="space-y-6">
+        <Alert>
+          <Alert.Title>Heads up!</Alert.Title>
+          <Alert.Description>
+            You can add components to your app using the cli.
+          </Alert.Description>
+        </Alert>
+
+        <Alert variant="secondary">
+          <Alert.Title>Heads up!</Alert.Title>
+          <Alert.Description>
+            You can add components to your app using the cli.
+          </Alert.Description>
+        </Alert>
+        <Alert variant="secondary" className="flex items-center">
+          <CheckCircle className="h-4 w-4 mr-4" />
+          <div>
+            <Alert.Title>Heads up!</Alert.Title>
+          </div>
+        </Alert>
       </div>
     </div>
   );

packages/ui/Alerts/Alert.tsx

@@ -0,0 +1,53 @@
+import { HtmlHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Text } from "../Text";
+
+const alertVariants = cva("relative w-full border-2 border-black p-4", {
+  variants: {
+    variant: {
+      default: "bg-primary-300 text-foreground",
+      secondary: "bg-black text-white",
+      destructive:
+        "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+interface IAlertProps
+  extends HtmlHTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {}
+
+const Alert = ({ className, variant, ...props }: IAlertProps) => (
+  <div
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+);
+Alert.displayName = "Alert";
+
+interface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}
+const AlertTitle = ({ className, ...props }: IAlertTitleProps) => (
+  <Text as="h5" className={cn("mb-1", className)} {...props} />
+);
+AlertTitle.displayName = "AlertTitle";
+
+interface IAlertDescriptionProps
+  extends HtmlHTMLAttributes<HTMLParagraphElement> {}
+const AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (
+  <div className={cn("text-muted", className)} {...props} />
+);
+
+AlertDescription.displayName = "AlertDescription";
+
+const AlertComponent = Object.assign(Alert, {
+  Title: AlertTitle,
+  Description: AlertDescription,
+});
+
+export { AlertComponent as Alert };

packages/ui/Alerts/index.ts

@@ -0,0 +1 @@
+export * from "./Alert";

packages/ui/index.ts

@@ -2,6 +2,7 @@ export * from "./Buttons";
 export * from "./Form";
 export * from "./Text";
 export * from "./Accordions";
+export * from "./Alerts";
 export * from "./Cards";
 export * from "./Avatars";
 export * from "./Badges";