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>
2026-04-21 19:06:49 +02:00
commit 5a824c2eee
157 changed files with 11539 additions and 0 deletions
@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { Paper, Box, Text } from '@mantine/core'
+
+type CardVariant = 'default' | 'borderless' | 'ghost'
+
+function Card({
+  className,
+  size = 'default',
+  variant = 'default',
+  children,
+  ...props
+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm'; variant?: CardVariant }) {
+  return (
+    <Paper
+      data-slot="card"
+      data-size={size}
+      data-variant={variant}
+      withBorder={variant === 'default'}
+      shadow={variant === 'default' ? 'xs' : undefined}
+      radius="md"
+      p={size === 'sm' ? 'sm' : 'md'}
+      bg={variant === 'ghost' ? 'transparent' : undefined}
+      className={className}
+      {...props}
+    >
+      {children}
+    </Paper>
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Box
+      data-slot="card-header"
+      pb="xs"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Text
+      component="div"
+      data-slot="card-title"
+      fw={600}
+      size="sm"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Text
+      component="div"
+      data-slot="card-description"
+      size="sm"
+      c="dimmed"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, style, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Box
+      data-slot="card-action"
+      style={{ position: 'absolute', top: 0, right: 0, ...style }}
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Box
+      data-slot="card-content"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <Box
+      data-slot="card-footer"
+      pt="sm"
+      mt="auto"
+      style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}
+      className={className}
+      {...props}
+    />
+  )
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }