@jusankar/moon 0.1.0

package/dist/src/components/alert/alert.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import { ClassProp } from 'class-variance-authority/types';
+import * as React from "react";
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/src/components/alert/alert.story.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Alert } from '.';
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Basic: Story;
+export declare const Destructive: Story;
+export declare const Action: Story;
+export declare const Colors: Story;

package/dist/src/components/alert/alert.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/alert/index.d.ts

@@ -0,0 +1 @@
+export * from './alert';

package/dist/src/components/badge/badge.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import { ClassProp } from 'class-variance-authority/types';
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+} & ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/src/components/badge/badge.story.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from '.';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Variants: Story;
+export declare const WithIcon: Story;
+export declare const WithSpinner: Story;
+export declare const AsLink: Story;
+export declare const CustomColors: Story;

package/dist/src/components/badge/badge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/badge/index.d.ts

@@ -0,0 +1 @@
+export * from './badge';

package/dist/src/components/card/card.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/src/components/card/card.story.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from '.';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Usage: Story;
+export declare const Size: Story;
+export declare const Image: Story;
+export declare const Demo: Story;

package/dist/src/components/card/card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/card/index.d.ts

@@ -0,0 +1 @@
+export * from './card';

package/dist/src/icons.d.ts

@@ -0,0 +1 @@
+export * from '@tabler/icons-react';

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/alert';
+export * from './components/badge';
+export * from './components/card';

package/dist/src/tests/vitest.setup.d.ts

@@ -0,0 +1,7 @@
+import { AxeMatchers } from 'vitest-axe';
+declare module 'vitest' {
+    interface Assertion<T = any> extends AxeMatchers {
+    }
+    interface AsymmetricMatchersContaining extends AxeMatchers {
+    }
+}

package/dist/src/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/vite.config.d.ts

@@ -0,0 +1,3 @@
+import { UserConfig } from 'vite';
+declare const _default: UserConfig;
+export default _default;

package/package.json

@@ -0,0 +1,132 @@
+{
+    "name": "@jusankar/moon",
+    "version": "0.1.0",
+    "private": false,
+    "type": "module",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./icons": {
+            "types": "./dist/icons.d.ts",
+            "import": "./dist/icons.js",
+            "require": "./dist/icons.js"
+        },
+        "./styles.css": "./src/styles/index.css"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "dev": "bun run storybook",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "build": "bunx --bun vite build",
+        "test": "vitest",
+        "test:ui": "vitest --ui",
+        "test:coverage": "vitest --coverage",
+        "test:smoke": "vitest render-all",
+        "check": "bunx --bun tsc",
+        "lint": "bunx --bun eslint . --ext .ts,.tsx",
+        "lint:fix": "bunx --bun eslint . --ext .ts,.tsx --fix",
+        "format": "bunx --bun prettier --write ."
+    },
+    "peerDependencies": {
+        "react": "^19.1.0"
+    },
+    "dependencies": {
+        "@storybook/addon-docs": "^10.1.7",
+        "@storybook/addon-onboarding": "^10.1.7",
+        "@tabler/icons-react": "^3.34.1",
+        "lucide-react": "^0.560.0",
+        "react-textarea-autosize": "^8.5.9"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.27.0",
+        "@hookform/resolvers": "^5.2.2",
+        "@radix-ui/react-accordion": "^1.2.12",
+        "@radix-ui/react-alert-dialog": "^1.1.15",
+        "@radix-ui/react-aspect-ratio": "^1.1.8",
+        "@radix-ui/react-avatar": "^1.1.11",
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-collapsible": "^1.1.12",
+        "@radix-ui/react-context-menu": "^2.2.16",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-hover-card": "^1.1.15",
+        "@radix-ui/react-label": "^2.1.8",
+        "@radix-ui/react-menubar": "^1.1.16",
+        "@radix-ui/react-navigation-menu": "^1.2.14",
+        "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-progress": "^1.1.8",
+        "@radix-ui/react-radio-group": "^1.3.8",
+        "@radix-ui/react-scroll-area": "^1.2.10",
+        "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-slider": "^1.3.6",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-toggle": "^1.1.10",
+        "@radix-ui/react-toggle-group": "^1.1.11",
+        "@radix-ui/react-tooltip": "^1.2.8",
+        "@storybook/react-vite": "^10.1.7",
+        "@tailwindcss/vite": "^4.1.18",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.1",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/bun": "^1.2.15",
+        "@types/node": "^22.9.0",
+        "@types/react": "19.1.0",
+        "@types/react-dom": "19.1.0",
+        "@typescript-eslint/eslint-plugin": "^8.49.0",
+        "@typescript-eslint/parser": "^8.49.0",
+        "@vitejs/plugin-react": "^5.1.2",
+        "@vitest/coverage-v8": "4.0.17",
+        "@vitest/ui": "4.0.17",
+        "ajv": "^8.17.1",
+        "bun-plugin-tailwind": "^0.0.15",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "date-fns": "^4.1.0",
+        "embla-carousel-react": "^8.6.0",
+        "eslint": "^9.39.1",
+        "eslint-plugin-hooks": "^0.4.3",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-storybook": "^9.0.13",
+        "husky": "^9.1.7",
+        "input-otp": "^1.4.2",
+        "jsdom": "^27.4.0",
+        "lint-staged": "^16.1.4",
+        "next-themes": "^0.4.6",
+        "prettier": "^3.7.4",
+        "prettier-plugin-tailwindcss": "^0.6.11",
+        "react-day-picker": "^9.12.0",
+        "react-dom": "^19.1.0",
+        "react-hook-form": "^7.68.0",
+        "react-resizable-panels": "^3.0.6",
+        "recharts": "2.15.4",
+        "semver": "^7.7.2",
+        "sonner": "^2.0.7",
+        "storybook": "^10.1.7",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4.1.18",
+        "tsx": "^4.19.2",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.32.1",
+        "vaul": "^1.1.2",
+        "vite": "^7.2.7",
+        "vite-plugin-dts": "^4.5.3",
+        "vite-tsconfig-paths": "^4.2.1",
+        "vitest": "4.0.17",
+        "vitest-axe": "^0.1.0",
+        "zod": "^4.1.13"
+    }
+}

package/src/components/alert/alert.story.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Alert, AlertDescription, AlertTitle, AlertAction } from '~/src/components/alert'
+import { CheckCircle2Icon, InfoIcon, AlertCircleIcon, AlertTriangleIcon } from 'lucide-react'
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+}
+export default meta
+type Story = StoryObj<typeof Alert>
+
+export const Basic: Story = {
+  render: () => (
+    <Alert className="max-w-md">
+      <CheckCircle2Icon />
+      <AlertTitle>Account updated successfully</AlertTitle>
+      <AlertDescription>
+        Your profile information has been saved. Changes will be reflected immediately.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Destructive: Story = {
+  render: () => (
+    <Alert variant="destructive" className="max-w-md">
+      <AlertCircleIcon />
+      <AlertTitle>Payment failed</AlertTitle>
+      <AlertDescription>
+        Your payment could not be processed. Please check your payment method and try again.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Action: Story = {
+  render: () => (
+    <Alert className="max-w-md">
+      <AlertTitle>Dark mode is now available</AlertTitle>
+      <AlertDescription>Enable it under your profile settings to get started.</AlertDescription>
+      <AlertAction>
+          Enable
+      </AlertAction>
+    </Alert>
+  ),
+}
+
+export const Colors: Story = {
+  render: () => (
+    <Alert className="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
+      <AlertTriangleIcon />
+      <AlertTitle>Your subscription will expire in 3 days.</AlertTitle>
+      <AlertDescription>
+        Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
+      </AlertDescription>
+    </Alert>
+  ),
+}

package/src/components/alert/alert.test.tsx

@@ -0,0 +1,299 @@
+import React from "react"
+import { describe, it, expect, vi } from "vitest"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe } from "vitest-axe"
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  AlertAction,
+} from "src/components/alert"
+import { CheckCircle2Icon, InfoIcon, AlertCircleIcon } from "lucide-react"
+
+describe("Alert Component", () => {
+  describe("rendering", () => {
+    it("renders Alert with title and description", () => {
+      render(
+        <Alert>
+          <CheckCircle2Icon data-slot="icon" />
+          <AlertTitle data-slot="title">Payment successful</AlertTitle>
+          <AlertDescription data-slot="description">
+            Your payment of $29.99 has been processed.
+          </AlertDescription>
+        </Alert>,
+      )
+      expect(screen.getByText("Payment successful")).toBeVisible()
+      expect(screen.getByText(/has been processed/i)).toBeVisible()
+    })
+
+    it("renders icon as an svg element", () => {
+      const { container } = render(
+        <Alert>
+          <InfoIcon data-slot="icon" />
+          <AlertTitle>New feature</AlertTitle>
+          <AlertDescription>Feature description</AlertDescription>
+        </Alert>,
+      )
+      const icon = container.querySelector('[data-slot="icon"]')
+      expect(icon?.tagName.toLowerCase()).toBe("svg")
+    })
+
+    it("renders AlertTitle and AlertDescription elements", () => {
+      const { container } = render(
+        <Alert>
+          <CheckCircle2Icon />
+          <AlertTitle data-slot="title">Title text</AlertTitle>
+          <AlertDescription data-slot="description">Desc text</AlertDescription>
+        </Alert>,
+      )
+      expect(container.querySelector('[data-slot="title"]')).toBeInTheDocument()
+      expect(
+        container.querySelector('[data-slot="description"]'),
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe("components", () => {
+    it("renders AlertTitle displaying the provided text", () => {
+      render(<AlertTitle data-slot="title">Alert Title</AlertTitle>)
+      expect(screen.getByText("Alert Title")).toBeVisible()
+    })
+
+    it("renders AlertDescription displaying the provided text", () => {
+      render(<AlertDescription data-slot="description">Description</AlertDescription>)
+      expect(screen.getByText("Description")).toBeVisible()
+    })
+
+    it("renders AlertAction as a container for action elements", () => {
+      render(
+        <AlertAction data-slot="action">
+          <button>Click me</button>
+        </AlertAction>,
+      )
+      expect(screen.getByRole("button", { name: "Click me" })).toBeVisible()
+    })
+  })
+
+  describe("variants", () => {
+    it("applies default variant class when no variant prop provided", () => {
+      const { container } = render(
+        <Alert>
+          <AlertTitle>Default variant</AlertTitle>
+        </Alert>,
+      )
+      expect(container.firstChild).toHaveClass("alert-default")
+    })
+
+    it("applies destructive variant class when variant prop set to destructive", () => {
+      const { container } = render(
+        <Alert variant="destructive">
+          <AlertTitle>Destructive variant</AlertTitle>
+        </Alert>,
+      )
+      expect(container.firstChild).toHaveClass("alert-destructive")
+    })
+  })
+
+  describe("size", () => {
+    // The component does not appear to have a size prop documented or usage.
+    it("does not support size prop and ignores it gracefully", () => {
+      // TypeScript will block unsupported size prop; testing that passing it does nothing
+      const { container } = render(
+        // @ts-expect-error testing unknown prop
+        <Alert size="lg">
+          <AlertTitle>Size ignored</AlertTitle>
+        </Alert>,
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe("subcomponents", () => {
+    it("renders AlertTitle and AlertDescription correctly", () => {
+      const { container } = render(
+        <Alert>
+          <AlertTitle data-slot="title">My title</AlertTitle>
+          <AlertDescription data-slot="description">My description</AlertDescription>
+        </Alert>,
+      )
+      expect(container.querySelector('[data-slot="title"]')).toBeInTheDocument()
+      expect(container.querySelector('[data-slot="description"]')).toBeInTheDocument()
+    })
+
+    it("renders AlertAction in the top-right corner slot", () => {
+      const { container } = render(
+        <Alert>
+          <AlertTitle>Title</AlertTitle>
+          <AlertDescription>Description</AlertDescription>
+          <AlertAction data-slot="action">
+            <button>Action</button>
+          </AlertAction>
+        </Alert>,
+      )
+      expect(container.querySelector('[data-slot="action"]')).toBeInTheDocument()
+      expect(screen.getByRole("button", { name: "Action" })).toBeVisible()
+    })
+  })
+
+  describe("state", () => {
+    // No state variants like disabled or loading appear documented.
+    it("renders normally without explicit state props", () => {
+      render(
+        <Alert>
+          <AlertTitle>No state prop</AlertTitle>
+        </Alert>,
+      )
+      expect(screen.getByText("No state prop")).toBeVisible()
+    })
+  })
+
+  describe("props", () => {
+    it("accepts and applies className to Alert", () => {
+      const { container } = render(
+        <Alert className="custom-class">
+          <AlertTitle>Test</AlertTitle>
+        </Alert>,
+      )
+      expect(container.firstChild).toHaveClass("custom-class")
+    })
+
+    it("accepts and applies className to AlertTitle", () => {
+      const { container } = render(
+        <AlertTitle className="title-class" data-slot="title">
+          Title
+        </AlertTitle>,
+      )
+      expect(container.querySelector('[data-slot="title"]')).toHaveClass("title-class")
+    })
+
+    it("accepts and applies className to AlertDescription", () => {
+      const { container } = render(
+        <AlertDescription className="desc-class" data-slot="description">
+          Desc
+        </AlertDescription>,
+      )
+      expect(container.querySelector('[data-slot="description"]')).toHaveClass("desc-class")
+    })
+
+    it("accepts and applies className to AlertAction", () => {
+      const { container } = render(
+        <AlertAction className="action-class" data-slot="action">
+          <button>Btn</button>
+        </AlertAction>,
+      )
+      expect(container.querySelector('[data-slot="action"]')).toHaveClass("action-class")
+    })
+
+    it("accepts variant prop on Alert", () => {
+      const { container } = render(
+        <Alert variant="destructive">
+          <AlertTitle>Destructive</AlertTitle>
+        </Alert>,
+      )
+      expect(container.firstChild).toHaveClass("alert-destructive")
+    })
+  })
+
+  describe("interactions", () => {
+    // Alert does not handle direct interactions like button clicks internally besides delegated children.
+    it("does not handle internal interactions", () => {
+      render(
+        <Alert>
+          <AlertTitle>Interaction test</AlertTitle>
+        </Alert>,
+      )
+      // No interactive elements inside alert by default
+      expect(screen.queryByRole("button")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <Alert>
+          <CheckCircle2Icon />
+          <AlertTitle>Accessible Title</AlertTitle>
+          <AlertDescription>This is an accessible alert description.</AlertDescription>
+        </Alert>,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has appropriate roles and aria attributes", () => {
+      render(
+        <Alert>
+          <CheckCircle2Icon />
+          <AlertTitle>Role Test</AlertTitle>
+          <AlertDescription>Description</AlertDescription>
+        </Alert>,
+      )
+      const alert = screen.getByRole("alert")
+      expect(alert).toBeInTheDocument()
+      expect(screen.getByText("Role Test")).toBeVisible()
+    })
+  })
+
+  describe("error handling", () => {
+    it("renders gracefully with no children", () => {
+      const { container } = render(<Alert />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders gracefully with minimal props", () => {
+      render(
+        <Alert>
+          <AlertTitle>Only title</AlertTitle>
+        </Alert>,
+      )
+      expect(screen.getByText("Only title")).toBeVisible()
+    })
+
+    it("handles invalid variant prop without crashing", () => {
+      // @ts-expect-error testing invalid prop
+      const { container } = render(<Alert variant="invalid" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("renders AlertAction without children gracefully", () => {
+      const { container } = render(<AlertAction />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe("exports", () => {
+    it("exports Alert component", () => {
+      expect(Alert).toBeDefined()
+      const { container } = render(<Alert />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("exports AlertTitle component", () => {
+      expect(AlertTitle).toBeDefined()
+      const { container } = render(<AlertTitle>Title Export</AlertTitle>)
+      expect(screen.getByText("Title Export")).toBeVisible()
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("exports AlertDescription component", () => {
+      expect(AlertDescription).toBeDefined()
+      const { container } = render(
+        <AlertDescription>Description Export</AlertDescription>,
+      )
+      expect(screen.getByText("Description Export")).toBeVisible()
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it("exports AlertAction component", () => {
+      expect(AlertAction).toBeDefined()
+      const { container } = render(
+        <AlertAction>
+          <button>Btn Export</button>
+        </AlertAction>,
+      )
+      expect(screen.getByRole("button", { name: "Btn Export" })).toBeVisible()
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+})

package/src/components/alert/alert.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "~/src/utils"
+const alertVariants = cva("grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*=\'size-\'])]:size-4 w-full relative group/alert", {
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground",
+      destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+export { Alert, AlertTitle, AlertDescription, AlertAction }