feat: add progress bar recipe

2025-09-29 14:27:37 -06:00
parent 1265ce7d18
commit c085bc8014
2 changed files with 80 additions and 18 deletions
--- a/src/recipes/progressBar.ts
+++ b/src/recipes/progressBar.ts
@@ -0,0 +1,59 @@
+import { defineRecipe, type SystemStyleObject } from '@pandacss/dev'
+
+interface ProgressBarRecipeArg {
+  semanticColorNames: string[]
+}
+
+const progressBarRecipe = ({ semanticColorNames }: ProgressBarRecipeArg) => {
+  const colors = ['neutral', ...semanticColorNames]
+  return defineRecipe({
+    className: 'progress-bar',
+    base: {
+      '-webkit-appearance': 'none',
+      appearance: 'none',
+      height: '1em',
+      borderRadius: 'sm',
+      border: '1px solid',
+      overflow: 'hidden',
+      '&::-webkit-progress-value, &::-moz-progress-bar': {
+        borderRadius: 'sm'
+      }
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(
+          colors.map((color) => [
+            color,
+            {
+              backgroundColor: `${color}.2`,
+              borderColor: `${color}.7`,
+              '&::-webkit-progress-bar': {
+                backgroundColor: `${color}.2`
+              },
+              '&::-webkit-progress-value, &::-moz-progress-bar': {
+                backgroundColor: `${color}.9`
+              },
+              _indeterminate: {
+                '&::-webkit-progress-value, &::-moz-progress-bar': {
+                  animationName: 'shimmer',
+                  animationIterationCount: 'infinite',
+                  animationDuration: '1s'
+                }
+              }
+            } as SystemStyleObject
+          ])
+        )
+      },
+      fullWidth: {
+        true: {
+          width: '100%'
+        }
+      }
+    },
+    defaultVariants: {
+      color: 'neutral'
+    }
+  })
+}
+
+export default progressBarRecipe