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,91 @@
+import * as React from 'react'
+import { Paper, Text, Group, Stack, Box } from '@mantine/core'
+
+type KPICardSize = 'sm' | 'default' | 'lg'
+
+interface Delta {
+  value: number
+  isPositive: boolean
+  label?: string
+  suffix?: string
+}
+
+interface KPICardProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: string
+  value: string | number
+  unit?: string
+  delta?: Delta
+  icon?: React.ReactNode
+  action?: React.ReactNode
+  chart?: React.ReactNode
+  subtitle?: string
+  size?: KPICardSize
+}
+
+const valueSizes: Record<KPICardSize, string> = {
+  sm: '1.5rem',
+  default: '1.875rem',
+  lg: '2.25rem',
+}
+
+const unitSizes: Record<KPICardSize, string> = {
+  sm: 'md',
+  default: 'lg',
+  lg: 'xl',
+}
+
+const labelSizes: Record<KPICardSize, string> = {
+  sm: 'xs',
+  default: 'sm',
+  lg: 'md',
+}
+
+const KPICard = React.forwardRef<HTMLDivElement, KPICardProps>(
+  ({ label, value, unit, delta, icon, action, chart, subtitle, size = 'default', className, ...props }, ref) => {
+    const deltaColor = delta
+      ? delta.value === 0 ? 'dimmed'
+        : delta.isPositive ? 'teal'
+        : 'red'
+      : undefined
+
+    return (
+      <Paper ref={ref} withBorder shadow="xs" radius="md" p="md" className={className} {...props}>
+        <Group justify="space-between" align="flex-start">
+          <Group gap="xs" align="center">
+            {icon && <Box c="dimmed">{icon}</Box>}
+            <Stack gap={2}>
+              <Text size={labelSizes[size]} c="dimmed">{label}</Text>
+              {subtitle && <Text size="xs" c="dimmed" opacity={0.8}>{subtitle}</Text>}
+            </Stack>
+          </Group>
+          {action && <Box c="dimmed">{action}</Box>}
+        </Group>
+
+        <Group justify="space-between" align="flex-end" mt="md" gap="lg">
+          <Stack gap={4}>
+            <Group gap={4} align="baseline">
+              <Text fw={700} style={{ fontSize: valueSizes[size], lineHeight: 1, letterSpacing: '-0.025em' }}>
+                {value}
+              </Text>
+              {unit && <Text size={unitSizes[size]} c="dimmed" fw={500}>{unit}</Text>}
+            </Group>
+            {delta && (
+              <Group gap={4} align="center">
+                {delta.label && <Text size="xs" c="dimmed">{delta.label}</Text>}
+                <Text size="xs" fw={500} c={deltaColor}>
+                  {delta.isPositive ? '\u25B2' : '\u25BC'} {delta.value > 0 ? '+' : ''}{delta.value}{delta.label ? '' : '%'}
+                </Text>
+                {delta.suffix && <Text size="xs" c="dimmed">{delta.suffix}</Text>}
+              </Group>
+            )}
+          </Stack>
+          {chart && <Box style={{ flexShrink: 0 }}>{chart}</Box>}
+        </Group>
+      </Paper>
+    )
+  }
+)
+KPICard.displayName = 'KPICard'
+
+export { KPICard }
+export type { KPICardProps, Delta, KPICardSize }