feat(styled kit): add Alert component

Author: maiieul

.changeset/sixty-camels-flash.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+feat(styled kit): add Alert component

apps/website/src/_state/component-statuses.ts

@@ -12,6 +12,7 @@ export type ComponentKitsStatuses = {
 export const statusByComponent: ComponentKitsStatuses = {
   styled: {
     Accordion: ComponentStatus.Beta,
+    Alert: ComponentStatus.Beta,
     Badge: ComponentStatus.Beta,
     Button: ComponentStatus.Beta,
     Card: ComponentStatus.Beta,

apps/website/src/routes/docs/styled/alert/examples/alert.tsx

@@ -0,0 +1,13 @@
+import { component$ } from '@builder.io/qwik';
+import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
+import { LuAlertTriangle } from '@qwikest/icons/lucide';
+
+export default component$(() => {
+  return (
+    <Alert look="alert">
+      <LuAlertTriangle class="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+    </Alert>
+  );
+});

apps/website/src/routes/docs/styled/alert/examples/hero.tsx

@@ -0,0 +1,16 @@
+import { component$ } from '@builder.io/qwik';
+import { LuRocket } from '@qwikest/icons/lucide';
+
+import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return (
+    <Alert>
+      <LuRocket class="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the cli.
+      </AlertDescription>
+    </Alert>
+  );
+});

apps/website/src/routes/docs/styled/alert/examples/primary.tsx

@@ -0,0 +1,13 @@
+import { component$ } from '@builder.io/qwik';
+import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
+import { LuAlertTriangle } from '@qwikest/icons/lucide';
+
+export default component$(() => {
+  return (
+    <Alert look="primary">
+      <LuAlertTriangle class="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+    </Alert>
+  );
+});

apps/website/src/routes/docs/styled/alert/index.mdx

@@ -4,8 +4,42 @@ title: Qwik UI | Styled Alert Component
 
 import { statusByComponent } from '~/_state/component-statuses';
 
+<StatusBanner status={statusByComponent.styled.Alert} />
+
 # Alert
 
-In a digital landscape of gentle nudges, the Qwik UI Styled alert pops with a playful flair, ensuring every crucial whisper finds its audience effortlessly.
+Displays a callout for user attention.
 
-<StatusBanner status={statusByComponent.styled.Alert} />
+<Showcase name="hero" />
+
+## Installation
+
+```sh
+qwik-ui add alert
+```
+
+## Usage
+
+```tsx
+import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
+```
+
+```tsx
+<Alert>
+  <Terminal className="h-4 w-4" />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```
+
+## Examples
+
+### Alert
+
+<Showcase name="alert" vertical />
+
+### Primary
+
+<Showcase name="primary" vertical />

apps/website/src/routes/docs/styled/menu.md

@@ -9,6 +9,7 @@
 ## Components
 
 - [Accordion](/docs/styled/accordion)
+- [Alert](/docs/styled/alert)
 - [Badge](/docs/styled/badge)
 - [Button](/docs/styled/button)
 - [Card](/docs/styled/card)

packages/kit-styled/src/components/alert/alert.tsx

@@ -0,0 +1,52 @@
+import { component$, Slot, PropsOf } from '@builder.io/qwik';
+import { cn } from '@qwik-ui/utils';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      look: {
+        neutral: 'bg-background text-foreground',
+        alert: 'border-alert/60 text-alert [&>svg]:text-alert',
+        primary: 'border-primary',
+        secondary: 'border-secondary',
+      },
+    },
+    defaultVariants: {
+      look: 'neutral',
+    },
+  },
+);
+
+type AlertProps = PropsOf<'div'> & VariantProps<typeof alertVariants>;
+
+const Alert = component$<AlertProps>(({ look, ...props }) => {
+  return (
+    <div {...props} role="alert" class={cn(alertVariants({ look }), props.class)}>
+      <Slot />
+    </div>
+  );
+});
+
+const AlertTitle = component$<PropsOf<'h5'>>(({ ...props }) => {
+  return (
+    <h5
+      {...props}
+      class={cn('mb-1 font-medium leading-none tracking-tight', props.class)}
+    >
+      <Slot />
+    </h5>
+  );
+});
+
+const AlertDescription = component$<PropsOf<'div'>>(({ ...props }) => {
+  return (
+    <div {...props} class={cn('text-sm [&_p]:leading-relaxed', props.class)}>
+      <Slot />
+    </div>
+  );
+});
+
+export { Alert, AlertTitle, AlertDescription };

packages/kit-styled/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components/accordion/accordion';
+export * from './components/alert/alert';
 export * from './components/badge/badge';
 export * from './components/button/button';
 export * from './components/card/card';