@a2v2ai/uikit 0.0.2 → 0.0.3

package/Alert/Alert.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { AlertCircle, CheckCircle2, Info as InfoIcon, AlertTriangle } from "../icons"
+
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Alert, AlertTitle, AlertDescription } from "./Alert"
+
+const meta: Meta<typeof Alert> = {
+  title: "Components/Alert",
+  component: Alert,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive", "success", "warning", "info"],
+      description: "The visual variant of the alert",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Alert className="w-[400px]">
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the cli.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Destructive: Story = {
+  render: () => (
+    <Alert variant="destructive" className="w-[400px]">
+      <AlertCircle className="size-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Success: Story = {
+  render: () => (
+    <Alert variant="success" className="w-[400px]">
+      <CheckCircle2 className="size-4" />
+      <AlertTitle>Success</AlertTitle>
+      <AlertDescription>
+        Your changes have been saved successfully.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Warning: Story = {
+  render: () => (
+    <Alert variant="warning" className="w-[400px]">
+      <AlertTriangle className="size-4" />
+      <AlertTitle>Warning</AlertTitle>
+      <AlertDescription>
+        Your account is about to expire. Please renew your subscription.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const InfoAlert: Story = {
+  render: () => (
+    <Alert variant="info" className="w-[400px]">
+      <InfoIcon className="size-4" />
+      <AlertTitle>Information</AlertTitle>
+      <AlertDescription>
+        A new version is available. Update now for new features.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={4} className="w-[400px]">
+      <Typography variant="h4" className="text-white">Alert Variants</Typography>
+
+      <Alert>
+        <AlertTitle>Default</AlertTitle>
+        <AlertDescription>This is a default alert message.</AlertDescription>
+      </Alert>
+
+      <Alert variant="destructive">
+        <AlertCircle className="size-4" />
+        <AlertTitle>Destructive</AlertTitle>
+        <AlertDescription>This is a destructive alert message.</AlertDescription>
+      </Alert>
+
+      <Alert variant="success">
+        <CheckCircle2 className="size-4" />
+        <AlertTitle>Success</AlertTitle>
+        <AlertDescription>This is a success alert message.</AlertDescription>
+      </Alert>
+
+      <Alert variant="warning">
+        <AlertTriangle className="size-4" />
+        <AlertTitle>Warning</AlertTitle>
+        <AlertDescription>This is a warning alert message.</AlertDescription>
+      </Alert>
+
+      <Alert variant="info">
+        <InfoIcon className="size-4" />
+        <AlertTitle>Info</AlertTitle>
+        <AlertDescription>This is an info alert message.</AlertDescription>
+      </Alert>
+    </Flex>
+  ),
+}

package/Alert/Alert.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type AlertVariant = "default" | "destructive" | "success" | "warning" | "info"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-white text-main-950 border-grey-200",
+        destructive:
+          "border-error-200 bg-error-50 text-error-700 [&>svg]:text-error-600",
+        success:
+          "border-success-200 bg-success-50 text-success-700 [&>svg]:text-success-600",
+        warning:
+          "border-warning-200 bg-warning-50 text-warning-700 [&>svg]:text-warning-600",
+        info: "border-info-200 bg-info-50 text-info-700 [&>svg]:text-info-600",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+)
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription, alertVariants }
+export type { AlertVariant }