feat: add Callout component with note/tip/warning/danger variants

components/ui/Callout.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+interface CalloutProps {
+  type?: 'note' | 'tip' | 'warning' | 'danger';
+  title?: string;
+  children: ReactNode;
+}
+
+const iconMap: Record<string, string> = {
+  note: 'ℹ️',
+  tip: '💡',
+  warning: '⚠️',
+  danger: '🚫',
+};
+
+const typeClasses: Record<string, string> = {
+  note: 'callout-note',
+  tip: 'callout-tip',
+  warning: 'callout-warning',
+  danger: 'callout-danger',
+};
+
+export function Callout({ type = 'note', title, children }: CalloutProps) {
+  const className = `callout ${typeClasses[type] || typeClasses.note}`;
+
+  return (
+    <div className={className} role="note">
+      {title && (
+        <div className="callout-title">
+          <span className="callout-icon">{iconMap[type] || iconMap.note}</span>
+          <span>{title}</span>
+        </div>
+      )}
+      <div className="callout-content">{children}</div>
+    </div>
+  );
+}