From ddeeb1d986b94656fd3930ff89300a7e41720c0f Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Wed, 12 Nov 2025 19:50:16 +0100
Subject: [PATCH 1/2] feat: add Alert component with styles and Storybook
 stories

---
 src/components/alert/Alert.stories.tsx | 14 +++++++++++
 src/components/alert/Alert.style.scss  | 28 +++++++++++++++++++++
 src/components/alert/Alert.tsx         | 34 ++++++++++++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 src/components/alert/Alert.stories.tsx
 create mode 100644 src/components/alert/Alert.style.scss
 create mode 100644 src/components/alert/Alert.tsx

diff --git a/src/components/alert/Alert.stories.tsx b/src/components/alert/Alert.stories.tsx
new file mode 100644
index 00000000..6420dccd
--- /dev/null
+++ b/src/components/alert/Alert.stories.tsx
@@ -0,0 +1,14 @@
+import {Meta} from "@storybook/react";
+import {Alert} from "./Alert";
+import React from "react";
+
+export default {
+    title: "Alert",
+    component: Alert
+} as Meta
+
+export const AlertExample = () => {
+    return <Alert color={"error"}>
+        This is an alert message!
+    </Alert>
+}
\ No newline at end of file
diff --git a/src/components/alert/Alert.style.scss b/src/components/alert/Alert.style.scss
new file mode 100644
index 00000000..a2331d04
--- /dev/null
+++ b/src/components/alert/Alert.style.scss
@@ -0,0 +1,28 @@
+@use "../../styles/helpers";
+@use "../../styles/box";
+@use "../../styles/variables";
+
+.alert {
+  padding: variables.$md;
+  font-size: variables.$sm;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: variables.$xxs;
+
+  & {
+    @include helpers.fontStyle();
+    @include helpers.borderRadius();
+  }
+
+  > svg {
+    min-width: variables.$md;
+    min-height: variables.$md;
+  }
+}
+
+@each $name, $color in variables.$colors {
+    .alert--#{$name} {
+      @include box.box($color);
+    }
+}
\ No newline at end of file
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
new file mode 100644
index 00000000..ec15d40f
--- /dev/null
+++ b/src/components/alert/Alert.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import {Code0Component, Color, mergeCode0Props} from "../../utils";
+import {
+    IconAlertCircle,
+    IconCircleCheck,
+    IconCircleDot,
+    IconCircleX,
+    IconInfoCircle,
+    IconProps
+} from "@tabler/icons-react";
+import "./Alert.style.scss"
+
+export interface AlertProps extends Code0Component<HTMLDivElement> {
+    color?: Color
+    children: React.ReactNode
+}
+
+export const Alert: React.FC<AlertProps> = (props) => {
+    const {color = "secondary", children, ...rest} = props
+
+    const icons: Record<Color, React.ReactElement<IconProps>> = {
+        "primary": <IconCircleDot size={16}/>,
+        "secondary": <IconCircleDot size={16}/>,
+        "info": <IconInfoCircle size={16}/>,
+        "success": <IconCircleCheck size={16}/>,
+        "warning": <IconAlertCircle size={16}/>,
+        "error": <IconCircleX size={16}/>,
+    }
+
+    return <div {...mergeCode0Props(`alert alert--${color}`, rest)}>
+        {icons[color]}
+        {children}
+    </div>
+}
\ No newline at end of file

From 7bdd513659d28401f46d1ed08f5dfcb1c61a06f4 Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Wed, 12 Nov 2025 19:51:22 +0100
Subject: [PATCH 2/2] feat: add Alert component with styles and Storybook
 stories

---
 src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.ts b/src/index.ts
index 1e8214c0..381d8101 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
+export * from "./components/alert/Alert"
 export * from "./components/avatar/Avatar"
 export * from "./components/badge/Badge"
 export * from "./components/breadcrumb/Breadcrumb"