From 7e3e57160dd3c59d2f558498c9ac20c90d03490e Mon Sep 17 00:00:00 2001
From: Cohan Carpentier <cohan.carpentier@gmail.com>
Date: Wed, 8 Jan 2025 14:26:31 -0500
Subject: [PATCH] 0.0.269 - feat: add indeterminate to progress

---
 README.md                      |  2 +-
 config/tailwind.config.base.ts | 38 ++++++++++++++++++++++++++++++----
 package.json                   |  2 +-
 progress.tsx                   | 15 ++++++++++----
 stories/progress.stories.tsx   |  4 ++++
 5 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 047bdac..9c46d06 100644
--- a/README.md
+++ b/README.md
@@ -18,4 +18,4 @@ https://www.npmjs.com/package/@risc0/ui
 
 | Statements                  | Branches                | Functions                 | Lines             |
 | --------------------------- | ----------------------- | ------------------------- | ----------------- |
-| ![Statements](https://img.shields.io/badge/statements-41.76%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-79.71%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-73.8%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-41.76%25-red.svg?style=flat) |
+| ![Statements](https://img.shields.io/badge/statements-41.95%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-78.57%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-73.8%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-41.95%25-red.svg?style=flat) |
diff --git a/config/tailwind.config.base.ts b/config/tailwind.config.base.ts
index 7e96115..1829a47 100644
--- a/config/tailwind.config.base.ts
+++ b/config/tailwind.config.base.ts
@@ -106,16 +106,46 @@ const config = {
           "43.5%": { transform: "translateX(2px) rotateY(3deg)" },
           "50%": { transform: "translateX(0)" },
         },
+        indeterminate1: {
+          "0%": {
+            left: "-35%",
+            right: "100%",
+          },
+          "60%": {
+            left: "100%",
+            right: "-90%",
+          },
+          "100%": {
+            left: "100%",
+            right: "-90%",
+          },
+        },
+        indeterminate2: {
+          "0%": {
+            left: "-200%",
+            right: "100%",
+          },
+          "60%": {
+            left: "100%",
+            right: "-8%",
+          },
+          "100%": {
+            left: "100%",
+            right: "-8%",
+          },
+        },
       },
       animation: {
-        "fade-in": "fade-in 1s ease-in-out",
-        "fade-in-up": "fade-in-up 1s ease-in-out",
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
         "fade-in-down": "fade-in-down 1s ease-in-out",
         "fade-in-left": "fade-in-left 1s ease-in-out",
         "fade-in-right": "fade-in-right 1s ease-in-out",
+        "fade-in-up": "fade-in-up 1s ease-in-out",
+        "fade-in": "fade-in 1s ease-in-out",
         "head-shake": "head-shake 1s ease-in-out",
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        indeterminate1: "indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite",
+        indeterminate2: "indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite",
         tilt: "tilt 10s linear infinite",
       },
     },
diff --git a/package.json b/package.json
index 5451c02..1540018 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.268",
+  "version": "0.0.269",
   "private": false,
   "sideEffects": false,
   "type": "module",
diff --git a/progress.tsx b/progress.tsx
index 9923671..2e13b30 100644
--- a/progress.tsx
+++ b/progress.tsx
@@ -13,10 +13,17 @@ const Progress = forwardRef<
     className={cn("relative h-1 w-full overflow-hidden rounded-full bg-primary/20", className)}
     {...rest}
   >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 rounded-full bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
+    {value != null ? (
+      <ProgressPrimitive.Indicator
+        className="h-full w-full flex-1 rounded-full bg-primary transition-transform duration-500 ease-in-out"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    ) : (
+      <>
+        <ProgressPrimitive.Indicator className="absolute h-full w-auto animate-indeterminate1 rounded-full bg-primary" />
+        <ProgressPrimitive.Indicator className="absolute h-full w-auto animate-indeterminate2 rounded-full bg-primary" />
+      </>
+    )}
   </ProgressPrimitive.Root>
 ));
 
diff --git a/stories/progress.stories.tsx b/stories/progress.stories.tsx
index 152bf1f..1e09cbc 100644
--- a/stories/progress.stories.tsx
+++ b/stories/progress.stories.tsx
@@ -5,3 +5,7 @@ import { Progress } from "../progress";
 export function Default() {
   return <Progress value={33} />;
 }
+
+export function Indeterminate() {
+  return <Progress />;
+}