ui: copy node-graph + progress components from scificn-ui (adds @radix-ui/react-progress)

2026-09-28 19:13:47 +00:00
parent 15096f15d5
commit e79015b15c
4 changed files with 383 additions and 0 deletions
@@ -0,0 +1,80 @@
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+import { cn } from '@/lib/utils'
+
+export interface ProgressProps
+  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+  showValue?: boolean
+  label?: string
+}
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(({ className, value = 0, showValue = true, label, ...props }, ref) => {
+  const pct     = Math.min(Math.max(value ?? 0, 0), 100)
+  const filled  = Math.round((pct / 100) * 20)
+  const empty   = 20 - filled
+  const barText = '='.repeat(filled) + ' '.repeat(empty)
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', width: '100%' }}>
+      {label && (
+        <span
+          style={{
+            fontSize:      '0.65rem',
+            color:         'var(--text-muted)',
+            letterSpacing: '0.1em',
+            textTransform: 'uppercase',
+          }}
+        >
+          {label}
+        </span>
+      )}
+
+      <ProgressPrimitive.Root
+        ref={ref}
+        className={cn('relative w-full overflow-hidden rounded-none', className)}
+        value={value}
+        {...props}
+      >
+        {/* Bracket-style visual */}
+        <div
+          style={{
+            display:    'flex',
+            alignItems: 'center',
+            gap:        '0.25rem',
+            fontFamily: 'var(--font-mono)',
+            fontSize:   '0.75rem',
+            color:      'var(--color-green)',
+            textShadow: 'var(--text-glow-green)',
+          }}
+        >
+          <span style={{ color: 'var(--text-muted)' }}>[</span>
+          <span style={{ letterSpacing: '-0.05em', whiteSpace: 'pre' }}>{barText}</span>
+          <span style={{ color: 'var(--text-muted)' }}>]</span>
+          {showValue && (
+            <span style={{ color: 'var(--text-muted)', fontSize: '0.65rem', marginLeft: '0.25rem' }}>
+              {Math.round(pct)}%
+            </span>
+          )}
+        </div>
+
+        {/* Accessible indicator (visually hidden, only for Radix a11y) */}
+        <ProgressPrimitive.Indicator
+          style={{
+            position:  'absolute',
+            width:     '1px',
+            height:    '1px',
+            overflow:  'hidden',
+            clip:      'rect(0,0,0,0)',
+            transform: `translateX(-${100 - pct}%)`,
+          }}
+        />
+      </ProgressPrimitive.Root>
+    </div>
+  )
+})
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }