@licklist/design 0.78.5-dev.92 → 0.78.5-dev.94

package/src/v2/shadcn/_reference/zones/LegacyZoneSettings.tsx

@@ -0,0 +1,299 @@
+import React from 'react';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Textarea } from '../ui/textarea';
+import { RadioGroup } from '../ui/radio-group';
+import { RadioCard } from '../ui/radio-card';
+import { Switch } from '../ui/switch';
+import { Button } from '../ui/button';
+import { Checkbox } from '../ui/checkbox';
+import { useAppSettings } from '@/contexts/AppSettingsContext';
+import { IconPlus, IconDelete } from '../../../icons';
+
+const DAY_OPTIONS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+export interface StartTimePeriod {
+  intervalMinutes: string;
+  fromTime: string;
+  toTime: string;
+  days?: string[];
+}
+
+export interface LegacyZoneSettingsData {
+  zoneType: string;
+  avgResourceCapacity: string;
+  avgSlotDuration: string;
+  zoneServiceTime: string;
+  description: string;
+  sameStartTimesEveryDay: boolean;
+  startTimePeriods: StartTimePeriod[];
+}
+
+interface LegacyZoneSettingsProps {
+  data: LegacyZoneSettingsData;
+  onChange: (data: LegacyZoneSettingsData) => void;
+}
+
+const LegacyZoneSettings: React.FC<LegacyZoneSettingsProps> = ({ data, onChange }) => {
+  const { settings } = useAppSettings();
+
+  if (!settings.legacySystemEnabled) return null;
+
+  const update = (partial: Partial<LegacyZoneSettingsData>) => {
+    onChange({ ...data, ...partial });
+  };
+
+  const addPeriod = () => {
+    update({
+      startTimePeriods: [
+        ...data.startTimePeriods,
+        { intervalMinutes: '15', fromTime: '09:00', toTime: '17:00', days: data.sameStartTimesEveryDay ? undefined : [] },
+      ],
+    });
+  };
+
+  const removePeriod = (index: number) => {
+    update({
+      startTimePeriods: data.startTimePeriods.filter((_, i) => i !== index),
+    });
+  };
+
+  const updatePeriod = (index: number, partial: Partial<StartTimePeriod>) => {
+    const updated = data.startTimePeriods.map((p, i) =>
+      i === index ? { ...p, ...partial } : p
+    );
+    update({ startTimePeriods: updated });
+  };
+
+  const togglePeriodDay = (index: number, day: string) => {
+    const period = data.startTimePeriods[index];
+    const currentDays = period.days || [];
+    const updatedDays = currentDays.includes(day)
+      ? currentDays.filter(d => d !== day)
+      : [...currentDays, day];
+    updatePeriod(index, { days: updatedDays });
+  };
+
+  const getPeriodsOrDefault = () => {
+    if (data.startTimePeriods.length > 0) return data.startTimePeriods;
+    const defaultPeriods = [{ intervalMinutes: '15', fromTime: '09:00', toTime: '17:00', days: data.sameStartTimesEveryDay ? undefined : [] as string[] }];
+    // Sync default to parent state
+    onChange({ ...data, startTimePeriods: defaultPeriods });
+    return defaultPeriods;
+  };
+
+  return (
+    <>
+      {/* Legacy Settings Section */}
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-label-primary text-xl font-semibold">Legacy Settings</h2>
+          <p className="text-label-secondary text-sm">Configuration for legacy system integration</p>
+        </div>
+      </div>
+
+      {/* Zone Type */}
+      <div className="flex flex-col gap-2">
+        <Label className="text-sm font-semibold">Zone Type</Label>
+        <RadioGroup
+          value={data.zoneType}
+          onValueChange={(value) => update({ zoneType: value })}
+          className="flex flex-col gap-1"
+        >
+          <RadioCard
+            value="regular"
+            id="zone-type-regular"
+            title="Regular"
+            subtitle="Standard zone configuration"
+          />
+          <RadioCard
+            value="bowling"
+            id="zone-type-bowling"
+            title="Bowling"
+            subtitle="Bowling-specific zone configuration"
+          />
+        </RadioGroup>
+      </div>
+
+      {/* Average Resource Capacity */}
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="avgResourceCapacity">Average Resource Capacity</Label>
+        <Input
+          id="avgResourceCapacity"
+          type="number"
+          value={data.avgResourceCapacity}
+          onChange={(e) => update({ avgResourceCapacity: e.target.value })}
+        />
+      </div>
+
+      {/* Average Slot Duration */}
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="avgSlotDuration">Average Slot Duration</Label>
+        <Input
+          id="avgSlotDuration"
+          type="number"
+          value={data.avgSlotDuration}
+          onChange={(e) => update({ avgSlotDuration: e.target.value })}
+        />
+        <span className="text-label-secondary text-xs">Duration in minutes</span>
+      </div>
+
+      {/* Service Time */}
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="zoneServiceTime">Service Time</Label>
+        <Input
+          id="zoneServiceTime"
+          type="number"
+          value={data.zoneServiceTime}
+          onChange={(e) => update({ zoneServiceTime: e.target.value })}
+        />
+        <span className="text-label-secondary text-xs">Service time in minutes</span>
+      </div>
+
+      {/* Description */}
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="legacyDescription">Description</Label>
+          <span className="text-label-secondary text-xs">(optional)</span>
+        </div>
+        <Textarea
+          id="legacyDescription"
+          value={data.description}
+          onChange={(e) => update({ description: e.target.value })}
+          rows={3}
+        />
+      </div>
+
+      {/* Start Times */}
+      <div className="flex flex-col gap-1">
+        <Label className="text-sm font-semibold">Start Times</Label>
+        <p className="text-label-secondary text-sm">Configure session start time intervals</p>
+      </div>
+
+      <label className="flex items-center gap-2 cursor-pointer">
+        <Switch
+          checked={data.sameStartTimesEveryDay}
+          onCheckedChange={(checked) => {
+            const periods = getPeriodsOrDefault().map(p => ({
+              ...p,
+              days: checked ? undefined : (p.days || []),
+            }));
+            update({
+              sameStartTimesEveryDay: checked,
+              startTimePeriods: periods,
+            });
+          }}
+        />
+        <span className="text-sm font-medium leading-none">Same start times every day</span>
+      </label>
+
+      <div className="flex flex-col gap-4">
+        {getPeriodsOrDefault().map((period, index) => (
+          <div key={index} className="flex flex-col gap-3 p-4 rounded-lg bg-surface-secondary">
+            <div className="flex items-center justify-between">
+              <span className="text-label-primary text-sm font-semibold">Period {index + 1}</span>
+              {data.startTimePeriods.length > 1 && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => removePeriod(index)}
+                  className="h-8 w-8 bg-surface-danger-soft border-transparent hover:!bg-surface-danger-soft-hover [&_path]:fill-fill-danger"
+                >
+                  <IconDelete className="w-4 h-4" />
+                </Button>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <Label>Sessions every</Label>
+              <div className="flex items-center gap-2">
+                <Input
+                  type="number"
+                  min={5}
+                  value={period.intervalMinutes}
+                  onChange={(e) => updatePeriod(index, { intervalMinutes: e.target.value })}
+                  className="w-24"
+                />
+                <span className="text-label-secondary text-sm">minutes</span>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-2">
+                <Label>From</Label>
+                <Input
+                  type="time"
+                  value={period.fromTime}
+                  onChange={(e) => updatePeriod(index, { fromTime: e.target.value })}
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label>To</Label>
+                <Input
+                  type="time"
+                  value={period.toTime}
+                  onChange={(e) => updatePeriod(index, { toTime: e.target.value })}
+                />
+              </div>
+            </div>
+
+            {/* Day checkboxes when not same every day */}
+            {!data.sameStartTimesEveryDay && (
+              <div className="flex flex-col gap-2">
+                <Label className="text-sm font-semibold">Days</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="flex flex-col gap-2">
+                    {DAY_OPTIONS.slice(0, 4).map(day => (
+                      <label key={day} className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={(period.days || []).includes(day)}
+                          onCheckedChange={() => togglePeriodDay(index, day)}
+                        />
+                        <span className="text-label-primary text-sm">{day}</span>
+                      </label>
+                    ))}
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    {DAY_OPTIONS.slice(4).map(day => (
+                      <label key={day} className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={(period.days || []).includes(day)}
+                          onCheckedChange={() => togglePeriodDay(index, day)}
+                        />
+                        <span className="text-label-primary text-sm">{day}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+
+        <Button
+          type="button"
+          variant="ghost"
+          withIcon
+          onClick={addPeriod}
+          className="self-start"
+        >
+          <IconPlus size={16} />
+          Add Time Period
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export const getDefaultLegacyData = (): LegacyZoneSettingsData => ({
+  zoneType: 'regular',
+  avgResourceCapacity: '',
+  avgSlotDuration: '',
+  zoneServiceTime: '',
+  description: '',
+  sameStartTimesEveryDay: true,
+  startTimePeriods: [{ intervalMinutes: '15', fromTime: '09:00', toTime: '17:00' }],
+});
+
+export default LegacyZoneSettings;

package/src/v2/shadcn/components/ui/accordion.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion'
+
+export default {
+  title: 'v2/Shadcn/Accordion',
+  component: Accordion,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Accordion>
+
+type Story = StoryObj<typeof Accordion>
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-full max-w-md">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>Yes. It comes with default styles that match your design system.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>Yes. It uses CSS animations for smooth open/close transitions.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="w-full max-w-md">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>First section</AccordionTrigger>
+        <AccordionContent>Content for the first section.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Second section</AccordionTrigger>
+        <AccordionContent>Content for the second section.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Third section</AccordionTrigger>
+        <AccordionContent>Content for the third section.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const DefaultOpen: Story = {
+  render: () => (
+    <Accordion type="single" collapsible defaultValue="item-1" className="w-full max-w-md">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Open by default</AccordionTrigger>
+        <AccordionContent>This accordion item is open by default.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Closed by default</AccordionTrigger>
+        <AccordionContent>This accordion item starts closed.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}

package/src/v2/shadcn/components/ui/accordion.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { IconChevronDown } from "../../../icons";
+
+import { cn } from "../../lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconChevronDown className="h-4 w-4 shrink-0 fill-fill-primary transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/v2/shadcn/components/ui/alert-dialog.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from './alert-dialog'
+import { Button } from './button'
+
+export default {
+  title: 'v2/Shadcn/AlertDialog',
+  component: AlertDialog,
+  parameters: { layout: 'padded' },
+} as Meta<typeof AlertDialog>
+
+type Story = StoryObj<typeof AlertDialog>
+
+export const Default: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Delete Account</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your account and remove your data from our
+            servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+}

package/src/v2/shadcn/components/ui/alert-dialog.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-shade-darker/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border-primary bg-surface-primary p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-label-primary", className)} {...props} />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-label-secondary", className)} {...props} />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/v2/shadcn/components/ui/alert.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Alert, AlertTitle, AlertDescription } from './alert'
+
+export default {
+  title: 'v2/Shadcn/Alert',
+  component: Alert,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Alert>
+
+type Story = StoryObj<typeof Alert>
+
+export const Default: Story = {
+  render: () => (
+    <Alert>
+      <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">
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+    </Alert>
+  ),
+}
+
+export const TitleOnly: Story = {
+  render: () => (
+    <Alert>
+      <AlertTitle>Note: This action cannot be undone.</AlertTitle>
+    </Alert>
+  ),
+}
+
+export const DescriptionOnly: Story = {
+  render: () => (
+    <Alert>
+      <AlertDescription>Your changes have been saved successfully.</AlertDescription>
+    </Alert>
+  ),
+}

package/src/v2/shadcn/components/ui/alert.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border border-border-primary p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-label-primary",
+  {
+    variants: {
+      variant: {
+        default: "bg-surface-primary text-label-primary",
+        destructive: "border-fill-danger/50 text-label-danger dark:border-fill-danger [&>svg]:text-label-danger",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ 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 };