feat: add progress bar recipe

src/index.ts

@@ -1,20 +1,21 @@
 import { definePreset } from '@pandacss/dev'
-import generateColors from '@/colors/generateColors.js'
-import generateNeutralColor from '@/colors/generateNeutralColor.js'
-import buttonRecipe from '@/recipes/button.js'
-import detailsRecipe from '@/recipes/details.js'
-import inputRecipe from '@/recipes/input.js'
-import { type BrandColor, type Color, type ColorVariation, color, type NeutralColor } from '@/types.js'
-import generateSemanticColors from './colors/generateSemanticColors.js'
-import fadeKeyframes from './keyframes/fade.js'
-import pulseKeyframes from './keyframes/pulse.js'
-import shimmerKeyframes from './keyframes/shimmer.js'
-import skeletonPattern from './patterns/skeleton.js'
-import alertRecipe from './recipes/alert.js'
-import chipRecipe from './recipes/chip.js'
-import iconButtonRecipe from './recipes/iconButton.js'
-import markRecipe from './recipes/mark.js'
-import selectRecipe from './recipes/select.js'
+import generateColors from '@/colors/generateColors'
+import generateNeutralColor from '@/colors/generateNeutralColor'
+import generateSemanticColors from '@/colors/generateSemanticColors'
+import fadeKeyframes from '@/keyframes/fade'
+import pulseKeyframes from '@/keyframes/pulse'
+import shimmerKeyframes from '@/keyframes/shimmer'
+import skeletonPattern from '@/patterns/skeleton'
+import alertRecipe from '@/recipes/alert'
+import buttonRecipe from '@/recipes/button'
+import chipRecipe from '@/recipes/chip'
+import detailsRecipe from '@/recipes/details'
+import iconButtonRecipe from '@/recipes/iconButton'
+import inputRecipe from '@/recipes/input'
+import markRecipe from '@/recipes/mark'
+import progressBarRecipe from '@/recipes/progressBar'
+import selectRecipe from '@/recipes/select'
+import { type BrandColor, type Color, type ColorVariation, color, type NeutralColor } from '@/types'
 
 export type ThemeConfig = {
   neutral?: NeutralColor
@@ -50,6 +51,7 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
         mark: markRecipe({ semanticColorNames: semanticColorKeysArray }),
         input: inputRecipe({ semanticColorNames: semanticColorKeysArray }),
         iconButton: iconButtonRecipe({ semanticColorNames: semanticColorKeysArray }),
+        progressBar: progressBarRecipe({ semanticColorNames: semanticColorKeysArray }),
         select: selectRecipe({ semanticColorNames: semanticColorKeysArray })
       },
       tokens: {
@@ -191,9 +193,10 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
     conditions: {
       extend: {
         active: '&:is(:active, [data-active], [data-state="active"], [data-state="open"])',
-        open: '&:is(:open, [open], [data-open], [data-state="open"])',
         checked: '&:is(:checked, [data-checked], [data-state="checked"])',
-        disabled: '&:is(:disabled, [data-disabled], [data-state="disabled"])'
+        disabled: '&:is(:disabled, [data-disabled], [data-state="disabled"])',
+        indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
+        open: '&:is(:open, [open], [data-open], [data-state="open"])'
       }
     },
     globalCss: {

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