initial: mirror of @fn_library from fn_registry

75 components + DESIGN_SYSTEM.md + sync script.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/alert.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react'
+import { Alert as MantineAlert, Box, Text } from '@mantine/core'
+
+type AlertVariant = 'default' | 'destructive'
+
+const variantColorMap: Record<AlertVariant, string | undefined> = {
+  default: undefined,
+  destructive: 'red',
+}
+
+function Alert({
+  className,
+  variant = 'default',
+  children,
+  ...props
+}: React.ComponentProps<'div'> & { variant?: AlertVariant }) {
+  return (
+    <MantineAlert
+      data-slot="alert"
+      color={variantColorMap[variant]}
+      radius="md"
+      variant="light"
+      className={className}
+      {...props}
+    >
+      {children}
+    </MantineAlert>
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Text
+      component="div"
+      data-slot="alert-title"
+      fw={500}
+      size="sm"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Text
+      component="div"
+      data-slot="alert-description"
+      size="sm"
+      c="dimmed"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, style, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Box
+      data-slot="alert-action"
+      style={{ position: 'absolute', top: 'var(--mantine-spacing-xs)', right: 'var(--mantine-spacing-xs)', ...style }}
+      className={className}
+      {...props}
+    />
+  )
+}
+
+const alertVariants = {} as const
+
+export { Alert, AlertTitle, AlertDescription, AlertAction, alertVariants }