@baack-software/baack-ts-tasks 0.0.0-stage → 0.0.1

package/src/react/copy.tsx

@@ -0,0 +1,253 @@
+import { createContext, useCallback, useContext, useMemo, type ReactNode } from 'react';
+import type { Entity, TaskPriority, TaskStatus, TextItem } from '@baack-software/baack-ts-client';
+import { ContentText, LIVE_ATTRIBUTE, useLiveEntity } from '@baack-software/baack-ts-components/react';
+import { ACTIVITY_LABELS } from '../activity.ts';
+import { PRIORITY_LABELS, STATUS_LABELS } from '../tasks.ts';
+import type { Activity } from '../types.ts';
+
+/**
+ * The task components' own words (labels, headings, buttons, empty states) as Baack content: each is a text item
+ * named here, at sort order 0, on one content entity. Until that entity is loaded, or while an item is missing, the
+ * en-GB placeholder below is shown, so the components work without any content and editors can fill it in, or
+ * translate it, later.
+ *
+ * Text that varies with data uses `{name}` slots, e.g. `{count} tasks`.
+ */
+const BASE_COPY = {
+  tasks_heading: 'Tasks',
+  tasks_new: 'New task',
+  tasks_view: 'View',
+  tasks_view_board: 'Board',
+  tasks_view_table: 'Table',
+  tasks_group_by: 'Columns',
+  tasks_group_status: 'Status',
+  tasks_group_priority: 'Priority',
+  tasks_group_assignee: 'Assignee',
+  tasks_group_project: 'Project',
+  tasks_group_workflow: 'Workflow',
+  tasks_group_stages: '{workflow} stages',
+  tasks_count: '{count} tasks',
+  tasks_count_one: '1 task',
+  tasks_empty: 'No tasks match these filters.',
+  tasks_none: 'There are no tasks yet. Create the first one.',
+  tasks_loading: 'Loading tasks…',
+  tasks_load_failed: 'The tasks could not be loaded.',
+  tasks_retry: 'Try again',
+  about_heading: 'Tasks',
+  about_open_count: '{count} open',
+  about_add_label: 'New task',
+  about_add_placeholder: 'Add a task…',
+  about_add: 'Add',
+  about_add_failed: 'The task could not be added.',
+  about_none: 'No open tasks.',
+  about_show_done: 'Show completed ({count})',
+  about_hide_done: 'Hide completed',
+  about_complete: 'Mark {name} as completed',
+
+  filter_label: 'Filter tasks',
+  filter_search: 'Search tasks',
+  filter_any: 'Any',
+  filter_mine: 'Assigned to me',
+  filter_open: 'Open only',
+  filter_clear: 'Clear filters',
+
+  field_title: 'Title',
+  field_description: 'Description',
+  field_status: 'Status',
+  field_priority: 'Priority',
+  field_assignee: 'Assignee',
+  field_project: 'Project',
+  field_due: 'Due',
+  field_updated: 'Updated',
+  field_stage: 'Stage',
+  field_blocking: 'Blocking',
+
+  option_unassigned: 'Unassigned',
+  option_no_project: 'No project',
+  option_no_stage: 'No stage',
+  option_no_workflow: 'No workflow',
+  due_none: 'No due date',
+  due_overdue: 'overdue',
+  due_clear: 'Clear due date',
+
+  blockers_heading: 'Blocked by',
+  blockers_none: 'Nothing is blocking this task.',
+  blockers_add: 'Add a blocker',
+  blockers_remove: 'Remove {name} as a blocker',
+  blockers_cycle: 'That task already waits on this one.',
+  blocked: 'Blocked',
+  blocked_by: 'Blocked by {name}',
+
+  related_heading: 'Related',
+  related_none: 'Nothing related yet.',
+  related_add: 'Add related',
+  related_remove: 'Remove {name}',
+  related_people: 'People',
+  related_companies: 'Companies',
+  related_entities: 'Content',
+  related_tasks: 'Tasks',
+
+  activity_heading: 'Activity',
+  activity_filter: 'Show activity',
+  activity_filter_all: 'All',
+  activity_filter_changes: 'Changes',
+  activity_filter_comments: 'Comments',
+  activity_more: 'Show older activity',
+  activity_empty: 'No activity yet.',
+  activity_by: 'by {name}',
+  activity_loading: 'Loading activity…',
+
+  comment_label: 'Comment',
+  comment_placeholder: 'Add a comment…',
+  comment_submit: 'Comment',
+  comment_reply: 'Reply',
+  comment_reply_label: 'Reply to {name}',
+  comment_cancel: 'Cancel',
+
+  editor_label: 'Task details',
+  editor_close: 'Close',
+  editor_save: 'Save',
+  editor_saving: 'Saving…',
+  editor_save_failed: 'The change could not be saved.',
+  conflict_heading: 'Someone else changed this task',
+  conflict_intro: 'They saved changes to the same fields while you were editing, so yours weren’t saved. Choose what to keep.',
+  conflict_theirs: 'Use theirs',
+  conflict_mine: 'Keep mine',
+  conflict_save: 'Save choices',
+  conflict_discard: 'Use theirs for all',
+  value_empty: 'Empty',
+  changed_elsewhere: 'Someone else changed {fields} while you were editing. Their changes are kept.',
+  changed_elsewhere_dismiss: 'Dismiss',
+  task_delete: 'Delete task',
+  task_delete_confirm: 'Delete this task? This can’t be undone.',
+  task_delete_cancel: 'Keep it',
+
+  create_heading: 'New task',
+  create_submit: 'Create task',
+  create_cancel: 'Cancel',
+  create_failed: 'The task could not be created.',
+} as const;
+
+type Lower<T extends string> = Lowercase<T>;
+
+export type TaskCopyName =
+  | keyof typeof BASE_COPY
+  | `status_${Lower<TaskStatus>}`
+  | `priority_${Lower<TaskPriority>}`
+  | `activity_${Lower<Activity>}`;
+
+function labels<K extends string>(prefix: string, from: Readonly<Record<K, string>>): Record<string, string> {
+  return Object.fromEntries(
+    Object.entries<string>(from).map(([key, label]) => [`${prefix}_${key.toLowerCase()}`, label]),
+  );
+}
+
+/** Every copy item's name and its en-GB placeholder. */
+export const TASK_COPY = {
+  ...BASE_COPY,
+  ...labels('status', STATUS_LABELS),
+  ...labels('priority', PRIORITY_LABELS),
+  ...labels('activity', ACTIVITY_LABELS),
+} as Readonly<Record<TaskCopyName, string>>;
+
+export const statusCopy = (status: TaskStatus): TaskCopyName => `status_${status.toLowerCase() as Lower<TaskStatus>}`;
+export const priorityCopy = (priority: TaskPriority): TaskCopyName =>
+  `priority_${priority.toLowerCase() as Lower<TaskPriority>}`;
+/** The copy name for an activity, or undefined for one this library doesn't know yet. */
+export const activityCopy = (activity: string): TaskCopyName | undefined => {
+  const name = `activity_${activity.toLowerCase()}`;
+  return name in TASK_COPY ? (name as TaskCopyName) : undefined;
+};
+
+interface CopyContext {
+  texts: readonly TextItem[];
+  placeholders: Readonly<Record<string, string>>;
+}
+
+const Copy = createContext<CopyContext>({ texts: [], placeholders: TASK_COPY });
+
+export interface TaskCopyProviderProps {
+  /**
+   * The content entity holding the copy, for example read from the entity view. While it is absent, every text
+   * shows its placeholder.
+   */
+  entity?: Entity | undefined;
+  /** Replaces placeholders, for an app that wants different defaults before content exists. */
+  placeholders?: Partial<Record<TaskCopyName, string>> | undefined;
+  children: ReactNode;
+}
+
+/**
+ * Supplies the task components' copy. With an entity, the Baack editor can change the copy in place: the content is
+ * followed live (`useLiveEntity`) and marked with `data-content-live`.
+ */
+export function TaskCopyProvider({ entity, placeholders, children }: TaskCopyProviderProps) {
+  const merged = useMemo(() => ({ ...TASK_COPY, ...placeholders }), [placeholders]);
+  if (!entity) return <Copy.Provider value={{ texts: [], placeholders: merged }}>{children}</Copy.Provider>;
+  return (
+    <LiveCopy entity={entity} placeholders={merged}>
+      {children}
+    </LiveCopy>
+  );
+}
+
+function LiveCopy({
+  entity,
+  placeholders,
+  children,
+}: {
+  entity: Entity;
+  placeholders: Readonly<Record<string, string>>;
+  children: ReactNode;
+}) {
+  const live = useLiveEntity(entity);
+  const value = useMemo(() => ({ texts: live.texts ?? [], placeholders }), [live, placeholders]);
+  return (
+    <Copy.Provider value={value}>
+      <div {...{ [LIVE_ATTRIBUTE]: '' }} className="contents">
+        {children}
+      </div>
+    </Copy.Provider>
+  );
+}
+
+function item(context: CopyContext, name: TaskCopyName): TextItem | undefined {
+  return context.texts.find((text) => text.name === name && text.sortOrder === 0);
+}
+
+function fill(text: string, values?: Readonly<Record<string, string | number>>): string {
+  if (!values) return text;
+  return text.replace(/\{(\w+)\}/g, (slot, key: string) => (key in values ? String(values[key]) : slot));
+}
+
+/**
+ * Copy as plain strings, for attributes (`aria-label`, `placeholder`) and text with `{slots}`. Prefer `<CopyText>`
+ * for visible text without slots, which the Baack editor can edit in place.
+ */
+export function useCopy(): (name: TaskCopyName, values?: Readonly<Record<string, string | number>>) => string {
+  const context = useContext(Copy);
+  return useCallback(
+    (name, values) => fill(item(context, name)?.value.trim() || context.placeholders[name] || name, values),
+    [context],
+  );
+}
+
+export interface CopyTextProps {
+  name: TaskCopyName;
+  className?: string;
+  /** Element to render; default `span`. */
+  as?: string;
+}
+
+/** A piece of copy as a Baack text component, so the editor can find and change it. */
+export function CopyText({ name, className, as }: CopyTextProps) {
+  const context = useContext(Copy);
+  return (
+    <ContentText
+      content={{ name, sortOrder: 0, item: item(context, name) }}
+      placeholder={context.placeholders[name] ?? name}
+      className={className}
+      as={as}
+    />
+  );
+}

package/src/react/fields.tsx

@@ -0,0 +1,104 @@
+import type { ReactNode } from 'react';
+import { cn } from 'cn';
+import { Label } from './ui/label.tsx';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from './ui/select.tsx';
+
+/** Radix Select can't use '' as a value, so "none" and "any" choices use these. */
+export const NONE = '__none__';
+export const ANY = '__any__';
+
+/** A label above a control. */
+export function Field({
+  id,
+  label,
+  className,
+  children,
+}: {
+  id: string;
+  label: ReactNode;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className={cn('grid min-w-0 gap-1', className)}>
+      <Label htmlFor={id} className="text-muted-foreground text-xs">
+        {label}
+      </Label>
+      {children}
+    </div>
+  );
+}
+
+export interface Choice {
+  value: string;
+  label: string;
+  /** Shown before the label, e.g. an avatar. */
+  icon?: ReactNode;
+}
+
+/** Choices under a heading, in a select with several kinds of choice. */
+export interface ChoiceGroup {
+  label: string;
+  choices: readonly Choice[];
+}
+
+/** A shadcn Select over a list of choices, followed by any groups of choices under their headings. */
+export function ChoiceSelect({
+  id,
+  value,
+  choices,
+  groups = [],
+  onChange,
+  label,
+  size = 'sm',
+  disabled,
+  className,
+}: {
+  id?: string;
+  value: string;
+  choices: readonly Choice[];
+  groups?: readonly ChoiceGroup[];
+  onChange: (value: string) => void;
+  /** Accessible name when there is no visible label. */
+  label?: string;
+  size?: 'sm' | 'default';
+  disabled?: boolean;
+  className?: string;
+}) {
+  return (
+    <Select value={value} onValueChange={onChange} {...(disabled === undefined ? {} : { disabled })}>
+      <SelectTrigger
+        {...(id === undefined ? {} : { id })}
+        {...(label === undefined ? {} : { 'aria-label': label })}
+        size={size}
+        className={cn('w-full min-w-0', className)}
+      >
+        <SelectValue className="min-w-0" />
+      </SelectTrigger>
+      <SelectContent>
+        {choices.map((choice) => (
+          <ChoiceItem key={choice.value} choice={choice} />
+        ))}
+        {groups
+          .filter((group) => group.choices.length > 0)
+          .map((group) => (
+            <SelectGroup key={group.label}>
+              <SelectLabel>{group.label}</SelectLabel>
+              {group.choices.map((choice) => (
+                <ChoiceItem key={choice.value} choice={choice} />
+              ))}
+            </SelectGroup>
+          ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function ChoiceItem({ choice }: { choice: Choice }) {
+  return (
+    <SelectItem value={choice.value}>
+      {choice.icon}
+      <span className="truncate">{choice.label}</span>
+    </SelectItem>
+  );
+}

package/src/react/hooks.ts

@@ -0,0 +1,41 @@
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
+import type { TaskStore, TaskStoreState } from '../store.ts';
+import type { Named, TaskDirectory } from './parts.tsx';
+
+/** The store's state, re-rendering on every change. */
+export function useTaskStore(store: TaskStore): TaskStoreState {
+  return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+}
+
+/** People, projects, tasks and workflows from the store's state, for the components. */
+export function useTaskDirectory(state: TaskStoreState): TaskDirectory {
+  const { identities, projects, tasks, workflows } = state;
+  const people = useMemo(() => named(identities.values()), [identities]);
+  const projectList = useMemo(() => named(projects.values()), [projects]);
+  const workflowList = useMemo(() => [...workflows.values()], [workflows]);
+  return useMemo(
+    () => ({ people, projects: projectList, tasks, workflows: workflowList }),
+    [people, projectList, tasks, workflowList],
+  );
+}
+
+function named(items: Iterable<{ urn: string; name?: string | null }>): Named[] {
+  return [...items]
+    .map((item) => ({ urn: item.urn, name: item.name || `…${item.urn.slice(-6)}` }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/** Whether a media query matches, following changes. True where there is no `matchMedia`, such as on the server. */
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      if (typeof matchMedia !== 'function') return () => undefined;
+      const list = matchMedia(query);
+      list.addEventListener('change', onChange);
+      return () => list.removeEventListener('change', onChange);
+    },
+    [query],
+  );
+  const matches = () => typeof matchMedia !== 'function' || matchMedia(query).matches;
+  return useSyncExternalStore(subscribe, matches, () => true);
+}

package/src/react/index.ts

@@ -0,0 +1,12 @@
+export * from './copy.tsx';
+export * from './parts.tsx';
+export * from './fields.tsx';
+export * from './hooks.ts';
+export * from './TaskBoard.tsx';
+export * from './TaskFilters.tsx';
+export * from './TaskActivity.tsx';
+export * from './TaskEditor.tsx';
+export * from './TaskConflicts.tsx';
+export * from './TaskCreateForm.tsx';
+export * from './TaskView.tsx';
+export * from './TasksAbout.tsx';

package/src/react/parts.tsx

@@ -0,0 +1,176 @@
+import type { Task, TaskPriority, TaskStatus, Workflow } from '@baack-software/baack-ts-client';
+import { Ban, CalendarDays, CalendarX2 } from 'lucide-react';
+import { cn } from 'cn';
+import { isOverdue } from '../tasks.ts';
+import { parseTimestamp } from '../time.ts';
+import type { Ref } from '../types.ts';
+import { priorityCopy, statusCopy, useCopy } from './copy.tsx';
+import { Avatar, AvatarFallback } from './ui/avatar.tsx';
+
+/** A person, project or task the components can name. */
+export interface Named {
+  urn: string;
+  name: string;
+}
+
+/**
+ * What the components know beyond the tasks themselves: people to assign, projects, and the tasks a blocker or
+ * related task refers to. From `TaskStore` state, or from any other source. Companies and content (entities) are
+ * offered as related items when given, and workflows give stage columns and a stage picker.
+ */
+export interface TaskDirectory {
+  people: readonly Named[];
+  projects: readonly Named[];
+  tasks: readonly Task[];
+  companies?: readonly Named[] | undefined;
+  entities?: readonly Named[] | undefined;
+  workflows?: readonly Workflow[] | undefined;
+}
+
+export const EMPTY_DIRECTORY: TaskDirectory = { people: [], projects: [], tasks: [] };
+
+/** The name of a person, project, task or stage, from the reference itself or the directory, else the end of its URN. */
+export function nameOf(directory: TaskDirectory, ref: Ref & { name?: string | null; title?: string }): string {
+  return (
+    ref.name ||
+    ref.title ||
+    directory.people.find((p) => p.urn === ref.urn)?.name ||
+    directory.projects.find((p) => p.urn === ref.urn)?.name ||
+    directory.tasks.find((t) => t.urn === ref.urn)?.title ||
+    directory.companies?.find((c) => c.urn === ref.urn)?.name ||
+    directory.entities?.find((e) => e.urn === ref.urn)?.name ||
+    directory.workflows?.flatMap((w) => w.stages ?? []).find((s) => s.urn === ref.urn)?.name ||
+    `…${ref.urn.slice(-6)}`
+  );
+}
+
+const PRIORITY_CLASS: Record<TaskPriority, string> = {
+  CRITICAL: 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200',
+  HIGH: 'bg-orange-100 text-orange-800 dark:bg-orange-950 dark:text-orange-200',
+  MEDIUM: 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200',
+  LOW: 'bg-sky-100 text-sky-800 dark:bg-sky-950 dark:text-sky-200',
+  NONE: 'bg-muted text-muted-foreground',
+};
+
+export function PriorityBadge({ priority, className }: { priority: TaskPriority; className?: string }) {
+  const copy = useCopy();
+  return (
+    <span
+      data-priority={priority}
+      className={cn('rounded px-1.5 py-px text-[11px] font-semibold', PRIORITY_CLASS[priority], className)}
+    >
+      {copy(priorityCopy(priority))}
+    </span>
+  );
+}
+
+const STATUS_CLASS: Record<TaskStatus, string> = {
+  UNDEFINED: 'border-border text-muted-foreground',
+  PENDING: 'border-border text-foreground',
+  IN_PROGRESS: 'border-primary/40 text-primary',
+  BLOCKED: 'border-destructive/40 text-destructive',
+  COMPLETED: 'border-emerald-600/40 text-emerald-700 dark:text-emerald-400',
+  CLOSED: 'border-border text-muted-foreground',
+};
+
+export function StatusBadge({ status, className }: { status: TaskStatus; className?: string }) {
+  const copy = useCopy();
+  return (
+    <span
+      data-status={status}
+      className={cn(
+        'inline-flex h-5 items-center rounded-full border px-2 text-[11px] font-medium whitespace-nowrap',
+        STATUS_CLASS[status],
+        className,
+      )}
+    >
+      {copy(statusCopy(status))}
+    </span>
+  );
+}
+
+/** "Blocked" with an icon, for a task waiting on open blockers. */
+export function BlockedBadge({ title }: { title?: string }) {
+  const copy = useCopy();
+  return (
+    <span title={title} className="text-destructive inline-flex items-center gap-0.5 text-[11px] font-semibold">
+      <Ban aria-hidden="true" className="size-3" />
+      {copy('blocked')}
+    </span>
+  );
+}
+
+const dayFormat = new Intl.DateTimeFormat(undefined, { day: 'numeric', month: 'short' });
+const fullFormat = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+
+/** The due date ("12 Oct"), flagged when an open task is past it. */
+export function DueDate({ task, now }: { task: Pick<Task, 'dueTimestamp' | 'status'>; now?: Date }) {
+  const copy = useCopy();
+  const due = parseTimestamp(task.dueTimestamp);
+  if (!due) return <span className="text-muted-foreground text-[11px]">{copy('due_none')}</span>;
+  const overdue = isOverdue(task, now);
+  const Icon = overdue ? CalendarX2 : CalendarDays;
+  return (
+    <time
+      dateTime={due.toISOString()}
+      title={fullFormat.format(due)}
+      className={cn(
+        'inline-flex items-center gap-1 text-[11px] whitespace-nowrap',
+        overdue ? 'text-destructive font-semibold' : 'text-muted-foreground',
+      )}
+    >
+      <Icon aria-hidden="true" className="size-3" />
+      <span className="sr-only">{copy('field_due')} </span>
+      {dayFormat.format(due)}
+      {overdue && <span className="sr-only">, {copy('due_overdue')}</span>}
+    </time>
+  );
+}
+
+/** When something happened, in the viewer's locale and time zone. */
+export function Timestamp({ value, className }: { value: string | null | undefined; className?: string }) {
+  const date = parseTimestamp(value);
+  if (!date) return null;
+  return (
+    <time dateTime={date.toISOString()} className={className}>
+      {fullFormat.format(date)}
+    </time>
+  );
+}
+
+export function initials(name: string): string {
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((part) => part[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+// Each has at least 4.5:1 contrast with white text.
+const AVATAR_CLASS = ['bg-blue-700', 'bg-teal-700', 'bg-violet-700', 'bg-amber-700', 'bg-rose-700', 'bg-slate-700'];
+
+function avatarClass(urn: string): string {
+  let hash = 0;
+  for (const char of urn) hash = (hash * 31 + char.charCodeAt(0)) | 0;
+  return AVATAR_CLASS[Math.abs(hash) % AVATAR_CLASS.length]!;
+}
+
+/** A person's initials in a colour that stays the same for them; a dashed circle when no one is assigned. */
+export function PersonAvatar({ person, size = 'sm' }: { person?: Named | null; size?: 'sm' | 'default' | 'lg' }) {
+  if (!person) {
+    return (
+      <Avatar size={size} aria-hidden="true">
+        <AvatarFallback className="border-border border border-dashed bg-transparent">?</AvatarFallback>
+      </Avatar>
+    );
+  }
+  return (
+    <Avatar size={size} aria-hidden="true" title={person.name}>
+      <AvatarFallback className={cn('font-semibold text-white', avatarClass(person.urn))}>
+        {initials(person.name)}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

package/src/react/ui/README.md

@@ -0,0 +1,6 @@
+shadcn/ui primitives, generated from the shadcn registry (`npx shadcn@4.21.0 add …`, style `radix-nova`, base colour
+neutral, lucide icons) and kept as generated, apart from relative imports between them. Regenerate rather than edit,
+and keep task-specific styling in the components one level up.
+
+The colours come from the app's theme (the shadcn CSS variables: `--primary`, `--muted`, …), so the components follow
+whatever theme the host app defines.

package/src/react/ui/alert.tsx

@@ -0,0 +1,75 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full 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",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *: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]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        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 }