feat(component): an alert component

apps/website/src/components/menu/menu.tsx

@@ -15,6 +15,10 @@ export const Menu = component$<Props>(({ onClose$ }) => {
       label: 'Accordion',
       path: `/docs/${appState.theme.toLowerCase()}/accordion`,
     },
+    {
+      label: 'Alert',
+      path: `/docs/${appState.theme.toLowerCase()}/alert`,
+    },
     { label: 'Button', path: `/docs/${appState.theme.toLowerCase()}/button` },
     {
       label: 'ButtonGroup',

apps/website/src/routes/docs/daisy/alert/index.tsx

@@ -0,0 +1,57 @@
+import { $, component$ } from '@builder.io/qwik';
+import { Alert as DaisyAlert } from '@qwik-ui/theme-daisy';
+import { GitHubIcon } from '../../../../components/icons/GitHubIcon';
+
+export default component$(() => {
+  return (
+    <div class="container flex flex-col gap-8">
+      <h2>This is the documentation for the Alert</h2>
+
+      <div class="flex flex-col gap-4">
+        <DaisyAlert>This is a success alert.</DaisyAlert>
+        <DaisyAlert variant="error">This is an error alert.</DaisyAlert>
+        <DaisyAlert variant="warning">This is a warning alert.</DaisyAlert>
+        <DaisyAlert variant="info">This is an info alert.</DaisyAlert>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <h3>With a title</h3>
+        <DaisyAlert variant="warning" title="Watch out!">
+          This is a warning alert.
+        </DaisyAlert>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <h3>With an icon</h3>
+        <DaisyAlert variant="success">
+          <div q:slot="icon">💸</div>
+          This is a success alert with an icon.
+        </DaisyAlert>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <h3>With a action</h3>
+        <DaisyAlert
+          variant="error"
+          action={{ label: 'undo', onClick$: $(() => alert('Undoing...')) }}
+        >
+          This is a success alert with an action.
+        </DaisyAlert>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <h3>A mix</h3>
+        <DaisyAlert
+          variant="info"
+          title="Did you know?"
+          action={{ label: 'cool!', onClick$: $(() => alert('Hi!')) }}
+        >
+          <div q:slot="icon">
+            <GitHubIcon />
+          </div>
+          This is an info alert with an action, icon, and title.
+        </DaisyAlert>
+      </div>
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/alert/index.tsx

@@ -0,0 +1,19 @@
+import { component$ } from '@builder.io/qwik';
+import { Alert as HeadlessAlert } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <div class="container">
+      <h2>This is the documentation for the Alert</h2>
+
+      <br />
+      <HeadlessAlert>This is an error alert.</HeadlessAlert>
+      <br />
+      <HeadlessAlert>This is an warning alert.</HeadlessAlert>
+      <br />
+      <HeadlessAlert>This is an info alert.</HeadlessAlert>
+      <br />
+      <HeadlessAlert>This is an success alert.</HeadlessAlert>
+    </div>
+  );
+});

packages/daisy/src/components/alert/alert.tsx

@@ -0,0 +1,62 @@
+import { component$, Slot } from '@builder.io/qwik';
+import {
+  Alert as HeadlessAlert,
+  AlertProps as HeadlessAlertProps,
+} from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
+import { Button, ButtonProps } from '../button/button';
+import { daisyConfig } from './daisy.config';
+
+export interface DaisyAlertProps extends HeadlessAlertProps {
+  variant?: DaisyAlertVariants;
+  size?: DaisyAlertSizes;
+  rounding?: DaisyAlertRoundings;
+  action?: DaisyAlertAction;
+  title?: string;
+}
+
+export type DaisyAlertVariants = 'error' | 'warning' | 'info' | 'success';
+export type DaisyAlertSizes = 'sm' | 'md' | 'lg';
+export type DaisyAlertRoundings = 'sm' | 'md' | 'lg';
+export interface DaisyAlertAction extends ButtonProps {
+  label: string;
+}
+
+export const Alert = component$((props: DaisyAlertProps) => {
+  const {
+    variant = 'primary',
+    size = 'md',
+    rounding = 'md',
+    class: classNames,
+    action,
+    title,
+    ...rest
+  } = props;
+  const { variants, sizes, radius } = daisyConfig;
+
+  return (
+    <HeadlessAlert
+      {...rest}
+      class={clsq(
+        variants[variant],
+        sizes[size],
+        radius[rounding],
+        'flex gap-4',
+        classNames
+      )}
+    >
+      <Slot name="icon" />
+      <div class="flex-1">
+        {title ? <b>{title}</b> : null}
+        <p>
+          <Slot />
+        </p>
+      </div>
+      {action ? (
+        <Button variant={variant} size="xs" {...action}>
+          {action.label}
+        </Button>
+      ) : null}
+    </HeadlessAlert>
+  );
+});

packages/daisy/src/components/alert/daisy.config.ts

@@ -0,0 +1,19 @@
+export const daisyConfig = {
+  variants: {
+    primary: 'bg-purple-200 text-purple-900',
+    error: 'bg-red-200 text-red-900',
+    info: 'bg-blue-200 text-blue-900',
+    success: 'bg-green-200 text-green-900',
+    warning: 'bg-yellow-200 text-yellow-900',
+  },
+  sizes: {
+    sm: 'px-2 py-1 text-xs',
+    md: 'px-4 py-2 font-medium',
+    lg: 'px-6 py-3 font-medium',
+  },
+  radius: {
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+  },
+};

packages/daisy/src/index.ts

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

packages/headless/src/components/alert/alert.tsx

@@ -0,0 +1,11 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+
+export type AlertProps = HTMLAttributes<HTMLDivElement>;
+
+export const Alert = component$((props: AlertProps) => {
+  return (
+    <div {...props}>
+      <Slot />
+    </div>
+  );
+});

packages/headless/src/index.ts

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