Revert "feat: Transitions, spacing, scroll fade, prompt area update (#11168)" (#11461)

Co-authored-by: adamelmore <2363879+adamdottv@users.noreply.github.com>

packages/ui/src/components/progress-circle.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, splitProps } from "solid-js"
+import { type ComponentProps, createMemo, splitProps } from "solid-js"
 
 export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList"> {
   percentage: number
@@ -9,15 +9,26 @@ export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class"
 export function ProgressCircle(props: ProgressCircleProps) {
   const [split, rest] = splitProps(props, ["percentage", "size", "strokeWidth", "class", "classList"])
 
-  const size = () => split.size || 18
-  const r = 7
+  const size = () => split.size || 16
+  const strokeWidth = () => split.strokeWidth || 3
+
+  const viewBoxSize = 16
+  const center = viewBoxSize / 2
+  const radius = () => center - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+
+  const offset = createMemo(() => {
+    const clampedPercentage = Math.max(0, Math.min(100, split.percentage || 0))
+    const progress = clampedPercentage / 100
+    return circumference() * (1 - progress)
+  })
 
   return (
     <svg
       {...rest}
       width={size()}
       height={size()}
-      viewBox="0 0 18 18"
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
       fill="none"
       data-component="progress-circle"
       classList={{
@@ -25,18 +36,21 @@ export function ProgressCircle(props: ProgressCircleProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <circle cx="9" cy="9" r="7.75" stroke="currentColor" stroke-width="1.5" />
-      <path
-        opacity="0.5"
-        d={(() => {
-          const pct = Math.min(100, Math.max(0, split.percentage))
-          const angle = (pct / 100) * 2 * Math.PI - Math.PI / 2
-          const x = 9 + r * Math.cos(angle)
-          const y = 9 + r * Math.sin(angle)
-          const largeArc = pct > 50 ? 1 : 0
-          return `M9 2A${r} ${r} 0 ${largeArc} 1 ${x} ${y}L9 9Z`
-        })()}
-        fill="currentColor"
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        data-slot="progress-circle-background"
+        stroke-width={strokeWidth()}
+      />
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        data-slot="progress-circle-progress"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
       />
     </svg>
   )