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,87 @@
+import { Progress, Box } from "@mantine/core"
+
+export interface ProgressBarProps {
+  value: number
+  max?: number
+  buffer?: number
+  showValue?: boolean
+  animated?: boolean
+  indeterminate?: boolean
+  label?: string
+  size?: "sm" | "md" | "lg"
+  color?: "primary" | "success" | "warning" | "destructive"
+  className?: string
+}
+
+const colorMap: Record<NonNullable<ProgressBarProps["color"]>, string> = {
+  primary: "blue",
+  success: "green",
+  warning: "yellow",
+  destructive: "red",
+}
+
+const sizeMap: Record<NonNullable<ProgressBarProps["size"]>, number> = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+}
+
+export function ProgressBar({
+  value,
+  max = 100,
+  buffer,
+  showValue = false,
+  animated = false,
+  indeterminate = false,
+  size = "md",
+  color = "primary",
+  label,
+  className,
+}: ProgressBarProps) {
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100))
+  const bufferPercentage = buffer ? Math.min(100, Math.max(0, (buffer / max) * 100)) : undefined
+  const mantineColor = colorMap[color]
+  const mantineSize = sizeMap[size]
+
+  if (bufferPercentage !== undefined) {
+    return (
+      <Box data-slot="progress-bar" pos="relative" className={className}>
+        <Progress.Root size={mantineSize} aria-label={label}>
+          <Progress.Section value={bufferPercentage} color={mantineColor} style={{ opacity: 0.3 }} />
+        </Progress.Root>
+        <Box pos="absolute" top={0} left={0} right={0}>
+          <Progress.Root size={mantineSize} bg="transparent" aria-label={label}>
+            <Progress.Section
+              value={indeterminate ? 100 : percentage}
+              color={mantineColor}
+              animated={animated || indeterminate}
+            >
+              {showValue && !indeterminate && (
+                <Progress.Label>{Math.round(percentage)}%</Progress.Label>
+              )}
+            </Progress.Section>
+          </Progress.Root>
+        </Box>
+      </Box>
+    )
+  }
+
+  return (
+    <Progress.Root
+      data-slot="progress-bar"
+      size={mantineSize}
+      aria-label={label}
+      className={className}
+    >
+      <Progress.Section
+        value={indeterminate ? 100 : percentage}
+        color={mantineColor}
+        animated={animated || indeterminate}
+      >
+        {showValue && !indeterminate && (
+          <Progress.Label>{Math.round(percentage)}%</Progress.Label>
+        )}
+      </Progress.Section>
+    </Progress.Root>
+  )
+}