Alert

import { Alert } from "@kuzenbo/core";

export default function Example() {
  return (
    <Alert variant="default">
      <AlertIcon />
      <Alert.Title>Heads up!</Alert.Title>
      <Alert.Description>
        You can add components to your app using the CLI.
      </Alert.Description>
    </Alert>
  );
}

<Alert variant="danger">
  <AlertIcon />
  <Alert.Title>Error</Alert.Title>
  <Alert.Description>
    Your session has expired. Please log in again.
  </Alert.Description>
</Alert>

<Alert variant="warning">
  <AlertIcon />
  <Alert.Title>Warning</Alert.Title>
  <Alert.Description>
    Your trial is expiring soon. Upgrade to continue.
  </Alert.Description>
</Alert>

<Alert variant="success">
  <AlertIcon />
  <Alert.Title>Success</Alert.Title>
  <Alert.Description>
    Your changes have been saved successfully.
  </Alert.Description>
</Alert>

<Alert variant="info">
  <AlertIcon />
  <Alert.Title>Note</Alert.Title>
  <Alert.Description>
    This feature is currently in beta.
  </Alert.Description>
</Alert>

<Alert appearance="default" variant="primary">
  <Alert.Title>Default appearance</Alert.Title>
  <Alert.Description>Standard background and border.</Alert.Description>
</Alert>

<Alert appearance="subtle" variant="primary">
  <Alert.Title>Subtle appearance</Alert.Title>
  <Alert.Description>Lighter background with reduced contrast.</Alert.Description>
</Alert>

<Alert appearance="outline" variant="primary">
  <Alert.Title>Outline appearance</Alert.Title>
  <Alert.Description>Background color with border emphasis.</Alert.Description>
</Alert>

<Alert appearance="inverted" variant="primary">
  <Alert.Title>Inverted appearance</Alert.Title>
  <Alert.Description>Dark surface with semantic accents.</Alert.Description>
</Alert>

<Alert variant="default">
  <AlertIcon />
  <Alert.Title>Update available</Alert.Title>
  <Alert.Description>
    A new version is available. Update now to get the latest features.
  </Alert.Description>
  <Alert.Action>
    <Button size="xs" variant="outline">Update</Button>
  </Alert.Action>
</Alert>

<Alert size="xs" variant="default">
  <Alert.Title>Extra small</Alert.Title>
  <Alert.Description>Compact alert for dense layouts.</Alert.Description>
</Alert>

<Alert size="sm" variant="default">
  <Alert.Title>Small</Alert.Title>
  <Alert.Description>Smaller alert size.</Alert.Description>
</Alert>

<Alert size="md" variant="default">
  <Alert.Title>Medium (default)</Alert.Title>
  <Alert.Description>Standard alert size.</Alert.Description>
</Alert>

<Alert size="lg" variant="default">
  <Alert.Title>Large</Alert.Title>
  <Alert.Description>Larger alert size.</Alert.Description>
</Alert>

<Alert size="xl" variant="default">
  <Alert.Title>Extra large</Alert.Title>
  <Alert.Description>Maximum alert size.</Alert.Description>
</Alert>