@umami/shiso 0.55.0 → 0.61.0

package/src/components/docs/PropertiesTable.tsx

@@ -0,0 +1,84 @@
+import type { ReactNode } from 'react';
+import { Badge } from './Badge';
+import type { ResponseFieldProps } from './ResponseField';
+import { decodeHtmlEntities, toElementArray } from './utils';
+
+export interface PropertiesTableProps {
+  children?: ReactNode;
+}
+
+function displayValue(value: ResponseFieldProps['type']): string | undefined {
+  if (typeof value === 'string') {
+    return decodeHtmlEntities(value);
+  }
+
+  return value === undefined || value === null ? undefined : String(value);
+}
+
+export function PropertiesTable({ children }: PropertiesTableProps) {
+  const rows = toElementArray<ResponseFieldProps>(children);
+
+  if (!rows.length) {
+    return null;
+  }
+
+  return (
+    <div className="my-4 overflow-x-auto rounded-lg border border-border p-6">
+      <table className="m-0 min-w-[40rem] table-fixed border-collapse">
+        <thead>
+          <tr>
+            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-3 pr-6 text-left text-sm font-semibold text-foreground">
+              Name
+            </th>
+            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-3 pr-6 text-left text-sm font-semibold text-foreground">
+              Type
+            </th>
+            <th className="w-1/3 border-x-0 border-t-0 border-b border-border bg-transparent px-0 py-3 text-left text-sm font-semibold text-foreground">
+              Description
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => {
+            const { name, type, required, deprecated, children: description } = row.props;
+            const defaultValue = displayValue(row.props.default);
+            const borderClass = index === rows.length - 1 ? 'border-b-0' : 'border-b';
+
+            return (
+              <tr key={row.key ?? name}>
+                <td
+                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-3 pr-6 align-top text-sm text-foreground`}
+                >
+                  <span className="inline-flex flex-wrap items-center gap-2">
+                    {name}
+                    {required ? (
+                      <Badge size="xs" tone="primary">
+                        required
+                      </Badge>
+                    ) : null}
+                    {deprecated ? <Badge size="xs">deprecated</Badge> : null}
+                  </span>
+                </td>
+                <td
+                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-3 pr-6 align-top text-sm text-foreground`}
+                >
+                  {displayValue(type)}
+                </td>
+                <td
+                  className={`${borderClass} border-x-0 border-t-0 border-border px-0 py-3 align-top text-sm leading-6 text-foreground [&_p]:m-0`}
+                >
+                  {description}
+                  {defaultValue ? (
+                    <span className="mt-1 block text-sm text-muted-foreground">
+                      Default: {defaultValue}
+                    </span>
+                  ) : null}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/docs/ResponseField.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import { Badge } from './Badge';
+import { styles } from './styles';
+import { decodeHtmlEntities } from './utils';
+
+type FieldValue = string | number | boolean | null | undefined;
+
+export interface ResponseFieldProps {
+  name: string;
+  type?: FieldValue;
+  default?: FieldValue;
+  required?: boolean;
+  deprecated?: boolean;
+  children?: ReactNode;
+}
+
+export function ResponseField({ name, type, required, deprecated, children }: ResponseFieldProps) {
+  const normalizedType =
+    typeof type === 'string'
+      ? decodeHtmlEntities(type)
+      : type === undefined || type === null
+        ? undefined
+        : String(type);
+
+  return (
+    <div className={styles.field}>
+      <div className={styles.fieldHeader}>
+        <span className={styles.fieldName}>{name}</span>
+        {normalizedType ? <span className={styles.fieldType}>{normalizedType}</span> : null}
+        {required ? <Badge tone="primary">required</Badge> : null}
+        {deprecated ? <Badge>deprecated</Badge> : null}
+      </div>
+      {children ? <div className={styles.fieldBody}>{children}</div> : null}
+    </div>
+  );
+}

package/src/components/docs/Steps.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+import { styles } from './styles';
+import { toElementArray } from './utils';
+
+interface StepChildProps {
+  title?: ReactNode;
+  children?: ReactNode;
+}
+
+export function Step({ children }: StepChildProps) {
+  return <>{children}</>;
+}
+
+export interface StepsProps {
+  children?: ReactNode;
+}
+
+export function Steps({ children }: StepsProps) {
+  const steps = useMemo(() => {
+    return toElementArray<StepChildProps>(children).map((child, index) => {
+      return {
+        title: child.props.title || `Step ${index + 1}`,
+        content: child.props.children,
+      };
+    });
+  }, [children]);
+
+  if (!steps.length) {
+    return null;
+  }
+
+  return (
+    <div className={`${styles.steps} ${steps.length === 1 ? 'before:hidden' : ''}`}>
+      {steps.map((step, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: steps are static MDX content
+        <div key={`step-${index + 1}`} className={styles.step}>
+          <div className={styles.stepNumber}>{index + 1}</div>
+          <div className={styles.stepContent}>
+            <div className={styles.stepTitle}>{step.title}</div>
+            <div>{step.content}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/docs/Tabs.tsx

@@ -0,0 +1,116 @@
+import type { ReactNode } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { TabsContent, TabsList, Tabs as TabsPrimitive, TabsTrigger } from '@/components/ui/tabs';
+import { slugify, toElementArray } from './utils';
+
+interface TabChildProps {
+  title?: ReactNode;
+  children?: ReactNode;
+}
+
+export function Tab({ children }: TabChildProps) {
+  return <>{children}</>;
+}
+
+export interface TabsProps {
+  children?: ReactNode;
+  group?: string;
+}
+
+export function Tabs({ children, group }: TabsProps) {
+  const tabs = useMemo(() => {
+    const counts = new Map<string, number>();
+
+    return toElementArray<TabChildProps>(children).map((child, index) => {
+      const title = child.props.title || `Tab ${index + 1}`;
+      const keyBase = slugify(title, `tab-${index + 1}`);
+      const count = counts.get(keyBase) || 0;
+      counts.set(keyBase, count + 1);
+
+      return {
+        id: count ? `${keyBase}-${count + 1}` : keyBase,
+        title,
+        content: child.props.children,
+      };
+    });
+  }, [children]);
+
+  const defaultTab = tabs[0]?.id;
+  const [selectedKey, setSelectedKey] = useState<string | undefined>(defaultTab);
+
+  useEffect(() => {
+    if (!group || typeof window === 'undefined') {
+      return;
+    }
+
+    const storedKey = window.localStorage.getItem(`shiso-tabs:${group}`);
+    if (storedKey && tabs.some(tab => tab.id === storedKey)) {
+      setSelectedKey(storedKey);
+      return;
+    }
+
+    if (defaultTab) {
+      setSelectedKey(defaultTab);
+    }
+  }, [defaultTab, group, tabs]);
+
+  useEffect(() => {
+    if (!tabs.length) {
+      setSelectedKey(undefined);
+      return;
+    }
+
+    if (!selectedKey || !tabs.some(tab => tab.id === selectedKey)) {
+      setSelectedKey(tabs[0].id);
+    }
+  }, [selectedKey, tabs]);
+
+  const handleSelect = (id: string) => {
+    setSelectedKey(id);
+
+    if (group && typeof window !== 'undefined') {
+      window.localStorage.setItem(`shiso-tabs:${group}`, id);
+    }
+  };
+
+  if (!tabs.length) {
+    return null;
+  }
+
+  if (tabs.length === 1) {
+    return <div className="my-4">{tabs[0].content}</div>;
+  }
+
+  return (
+    <TabsPrimitive
+      className="my-4 gap-0"
+      value={selectedKey}
+      onValueChange={value => {
+        if (typeof value === 'string') {
+          handleSelect(value);
+        }
+      }}
+    >
+      <TabsList
+        variant="line"
+        className="w-full justify-start gap-5 overflow-x-auto overflow-y-hidden p-0 shadow-[inset_0_-1px_0_var(--border)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        aria-label="Content tabs"
+      >
+        {tabs.map(tab => (
+          <TabsTrigger
+            key={tab.id}
+            value={tab.id}
+            className="flex-none px-0 text-muted-foreground after:bg-primary data-active:text-foreground"
+          >
+            {tab.title}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map(tab => (
+        <TabsContent key={tab.id} value={tab.id} className="pt-4 text-base">
+          {tab.content}
+        </TabsContent>
+      ))}
+    </TabsPrimitive>
+  );
+}

package/src/components/docs/Tooltip.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import {
+  TooltipContent,
+  Tooltip as TooltipPrimitive,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { styles } from './styles';
+
+export interface TooltipProps {
+  tip?: ReactNode;
+  children?: ReactNode;
+}
+
+export function Tooltip({ tip, children }: TooltipProps) {
+  return (
+    <TooltipPrimitive>
+      <TooltipTrigger className={styles.tooltipTrigger}>{children}</TooltipTrigger>
+      <TooltipContent>{tip}</TooltipContent>
+    </TooltipPrimitive>
+  );
+}

package/src/components/docs/index.ts

@@ -0,0 +1,15 @@
+export * from './Accordion';
+export * from './Badge';
+export * from './Callout';
+export * from './Card';
+export * from './CodeGroup';
+export * from './Columns';
+export * from './Expandable';
+export * from './Frame';
+export * from './Icon';
+export * from './ParamField';
+export * from './PropertiesTable';
+export * from './ResponseField';
+export * from './Steps';
+export * from './Tabs';
+export * from './Tooltip';

package/src/components/docs/styles.ts

@@ -0,0 +1,82 @@
+/** Shared Tailwind utility groups for the built-in MDX components. */
+export const styles = {
+  accordion: 'my-3',
+  accordionGroup:
+    'my-4 overflow-hidden rounded-lg border border-border [&_[data-slot=accordion-item]]:rounded-none [&_[data-slot=accordion-item]]:border-0 [&_[data-slot=accordion-item]+[data-slot=accordion-item]]:border-t [&_[data-slot=accordion-trigger]]:rounded-none',
+  accordionItem: 'rounded-lg border border-border bg-transparent',
+  accordionTrigger:
+    'items-center px-4 py-3 text-base font-semibold text-foreground hover:no-underline',
+  accordionContent: 'px-4 pb-4 text-base leading-7',
+  expandableTrigger:
+    'items-center px-4 py-3 text-sm font-normal text-foreground hover:no-underline',
+
+  callout: 'my-4 flex items-start gap-3 rounded-lg border px-3 py-2.5 text-sm leading-6',
+  calloutIcon:
+    'mt-[calc((1.5em-1.25rem)/2)] inline-flex size-5 shrink-0 items-center justify-center [&_svg]:block [&_svg]:size-4',
+  calloutBody:
+    'flex min-w-0 flex-1 flex-col gap-[0.35rem] [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_:where(p,ul,ol)]:my-[0.35rem] [&>:where(p,ul,ol):first-child]:mt-0 [&>:where(p,ul,ol):last-child]:mb-0',
+  calloutTitle: 'font-semibold leading-6',
+  note: 'border-border bg-muted/50 text-foreground',
+  info: 'border-blue-300 bg-blue-50 text-blue-900 dark:border-blue-400/40 dark:bg-blue-400/10 dark:text-blue-300',
+  warning:
+    'border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-400/40 dark:bg-amber-400/10 dark:text-amber-300',
+  tip: 'border-green-300 bg-green-50 text-green-900 dark:border-green-400/40 dark:bg-green-400/10 dark:text-green-300',
+  check:
+    'border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-300',
+  danger: 'border-destructive/40 bg-destructive/10 text-destructive',
+
+  card: 'block h-full gap-0 rounded-lg border border-border bg-transparent p-4 text-base ring-0 hover:border-input',
+  cardHorizontal:
+    '[&_[data-slot=card-inner]]:items-center [&_[data-slot=card-main]]:flex-row [&_[data-slot=card-main]]:items-center [&_[data-slot=card-main]]:gap-3 [&_[data-slot=card-body]]:m-0',
+  cardTyped:
+    '[&_[data-slot=card-title]]:text-inherit [&_[data-slot=card-body]]:text-inherit [&_[data-slot=card-cta]]:text-inherit [&_[data-slot=card-arrow]]:text-inherit',
+  cardImageLayout: 'p-0 [&_[data-slot=card-inner]]:p-6',
+  cardImage: 'block aspect-video w-full border-border border-b object-cover',
+  cardInner: 'flex items-start justify-between gap-3',
+  cardMain: 'flex min-w-0 flex-col gap-2',
+  cardHeader: 'flex items-center gap-2',
+  cardIcon: 'inline-flex shrink-0 items-center justify-center [&_img]:size-4 [&_svg]:size-4',
+  cardTitle: 'text-base font-semibold text-foreground',
+  cardBody: 'text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0',
+  cardCta:
+    'flex shrink-0 items-center gap-[0.35rem] text-[0.9rem] font-medium text-muted-foreground',
+  cardArrow: 'shrink-0 text-muted-foreground',
+
+  grid: 'my-4 grid grid-cols-1 gap-4',
+  gridCols1: 'md:grid-cols-1',
+  gridCols2: 'md:grid-cols-2',
+  gridCols3: 'md:grid-cols-3',
+  gridCols4: 'md:grid-cols-4',
+  column: 'min-w-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0',
+  icon: 'inline-block align-[-0.145em]',
+
+  tabs: 'my-4 gap-0',
+
+  frameWrapper: 'my-4',
+  frameHint: 'mb-4 flex items-start gap-2 text-sm font-medium leading-5 text-foreground',
+  frameHintIcon:
+    'flex h-5 shrink-0 items-center text-muted-foreground [&_svg]:size-4 [&_svg]:fill-current',
+  frame: 'relative overflow-hidden rounded-2xl border border-border bg-muted/25 p-2',
+  frameContent:
+    'relative flex justify-center overflow-hidden rounded-xl [&_p]:m-0 [&_img]:w-full [&_video]:w-full',
+  frameCaption:
+    'relative mt-3 px-4 pb-1 text-center text-sm leading-5 text-muted-foreground [&_p]:m-0 [&_a]:font-semibold',
+
+  field: 'my-3',
+  paramField: 'my-3',
+  fieldHeader: 'flex flex-wrap items-center gap-2',
+  fieldBody: 'mt-3',
+  fieldType: 'text-[0.9rem] text-muted-foreground',
+  fieldName: 'font-bold text-foreground',
+  code: 'rounded-sm bg-[color-mix(in_srgb,currentColor_4%,transparent)] px-[0.35rem] py-[0.1rem] text-sm text-foreground font-mono',
+  steps:
+    "relative my-4 flex flex-col gap-5 before:absolute before:top-4 before:bottom-4 before:left-4 before:w-px before:-translate-x-1/2 before:bg-border before:content-['']",
+  step: 'relative flex items-start gap-4',
+  stepNumber:
+    'relative z-[1] flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-card text-[0.9rem] font-semibold text-foreground',
+  stepContent: 'flex min-w-0 grow flex-col gap-2',
+  stepTitle: 'text-[1.1rem] font-semibold text-foreground',
+
+  tooltipTrigger:
+    'peer cursor-help border-0 border-muted-foreground border-b border-dotted bg-transparent p-0 text-inherit [font:inherit]',
+} as const;

package/src/components/docs/utils.ts

@@ -0,0 +1,118 @@
+import { Children, createElement, isValidElement, type ReactElement, type ReactNode } from 'react';
+import { getIcon } from '@/lib/icons';
+
+interface NodeWithClassName {
+  className?: string;
+  'data-title'?: string;
+  children?: ReactNode;
+}
+
+export function toElementArray<T>(children: ReactNode): ReactElement<T>[] {
+  return Children.toArray(children).filter(isValidElement) as ReactElement<T>[];
+}
+
+/**
+ * Icon props accept either a rendered node or a lucide icon name, since MDX authors
+ * write `icon="rocket"` while first-party components pass elements directly.
+ */
+export function resolveIcon(icon: ReactNode | string, size = 14): ReactNode {
+  if (typeof icon !== 'string') {
+    return icon;
+  }
+
+  if (
+    /^(?:https?:|data:image\/|\/|\.\.?\/)/i.test(icon) ||
+    /\.(?:avif|gif|jpe?g|png|svg|webp)(?:[?#].*)?$/i.test(icon)
+  ) {
+    return createElement('img', { src: icon, alt: '', width: size, height: size });
+  }
+
+  const Component = getIcon(icon);
+
+  return Component ? createElement(Component, { size }) : null;
+}
+
+export function slugify(value: ReactNode, fallback: string): string {
+  const text = typeof value === 'string' ? value : '';
+  const normalized = text
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+
+  return normalized || fallback;
+}
+
+const GRID_COLS_CLASSES = {
+  1: 'gridCols1',
+  2: 'gridCols2',
+  3: 'gridCols3',
+  4: 'gridCols4',
+} as const;
+
+/** Shared by CardGroup and Columns: clamps a column count to a CSS module class name. */
+export function gridColsClass(cols: number): (typeof GRID_COLS_CLASSES)[1 | 2 | 3 | 4] {
+  const columns = Math.min(Math.max(Math.round(cols) || 1, 1), 4) as 1 | 2 | 3 | 4;
+
+  return GRID_COLS_CLASSES[columns];
+}
+
+export function decodeHtmlEntities(value: string): string {
+  return value
+    .replace(/&#x([0-9a-fA-F]+);/g, (_, hex) => {
+      return String.fromCodePoint(Number.parseInt(hex, 16));
+    })
+    .replace(/&#([0-9]+);/g, (_, decimal) => {
+      return String.fromCodePoint(Number.parseInt(decimal, 10));
+    })
+    .replace(/&quot;/g, '"')
+    .replace(/&apos;/g, "'")
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&');
+}
+
+function normalizeLanguage(value: string): string {
+  const label = value.toLowerCase();
+  const aliases: Record<string, string> = {
+    js: 'javascript',
+    ts: 'typescript',
+    sh: 'shell',
+    zsh: 'shell',
+    shell: 'shell',
+    bash: 'bash',
+    yml: 'yaml',
+    md: 'markdown',
+  };
+
+  return aliases[label] || label;
+}
+
+export function findCodeLanguage(node: ReactNode): string | undefined {
+  if (!isValidElement<NodeWithClassName>(node)) {
+    return undefined;
+  }
+
+  const className = node.props.className;
+  if (typeof className === 'string') {
+    const match = className.match(/language-([a-z0-9-]+)/i);
+    if (match?.[1]) {
+      return normalizeLanguage(match[1]);
+    }
+  }
+
+  return findCodeLanguage(node.props.children);
+}
+
+export function findCodeTitle(node: ReactNode): string | undefined {
+  if (!isValidElement<NodeWithClassName>(node)) {
+    return undefined;
+  }
+
+  const title = node.props['data-title'];
+  if (typeof title === 'string' && title.trim()) {
+    return title.trim();
+  }
+
+  return findCodeTitle(node.props.children);
+}

package/src/components/icons/index.ts

@@ -0,0 +1,17 @@
+export {
+  Check,
+  Check as CheckIcon,
+  ChevronRight,
+  CircleAlert,
+  Copy,
+  ExternalLink,
+  Hand,
+  Info as InfoIcon,
+  Lightbulb,
+  Menu,
+  Moon,
+  Search,
+  Sun,
+  TriangleAlert,
+  X,
+} from 'lucide-react';

package/src/components/ui/accordion.tsx

@@ -0,0 +1,69 @@
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn('flex w-full flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('not-last:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="m-0 flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          'h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/ui/alert.tsx

@@ -0,0 +1,69 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+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, AlertAction, AlertDescription, AlertTitle };