feat: add focus-visible ring styles

src/recipes/input.ts

@@ -1,5 +1,6 @@
 import { defineRecipe } from '@pandacss/dev'
 
+export const inputSizes = ['small', 'medium', 'large'] as const
 export interface InputRecipeArg {
   semanticColorNames: string[]
 }
@@ -18,27 +19,50 @@ export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
       transitionDuration: 'normal',
       transitionTimingFunction: 'easeOut',
       cursor: 'text',
+      focusVisibleRing: 'outside',
+      focusRingWidth: '2px',
+      focusRingOffset: '0px',
       _disabled: {
         cursor: 'not-allowed'
       }
     },
     variants: {
       size: {
-        small: {
-          paddingBlock: 'calc({spacing.xs} * 0.5)',
-          paddingInline: 'calc({spacing.xs} * 1)',
-          fontSize: 'sm'
-        },
-        medium: {
-          paddingBlock: 'calc({spacing.xs} * 0.75)',
-          paddingInline: 'calc({spacing.xs} * 1.25)',
-          fontSize: 'base'
-        },
-        large: {
-          paddingBlock: 'calc({spacing.xs} * 1)',
-          paddingInline: 'calc({spacing.xs} * 1.5)',
-          fontSize: 'lg'
-        }
+        ...Object.fromEntries(
+          inputSizes.map((size) => {
+            switch (size) {
+              case 'small':
+                return [
+                  size,
+                  {
+                    paddingBlock: 'calc({spacing.xs} * 0.5)',
+                    paddingInline: 'calc({spacing.xs} * 1)',
+                    fontSize: 'sm'
+                  }
+                ]
+              case 'medium':
+                return [
+                  size,
+                  {
+                    paddingBlock: 'calc({spacing.xs} * 0.75)',
+                    paddingInline: 'calc({spacing.xs} * 1.25)',
+                    fontSize: 'base'
+                  }
+                ]
+              case 'large':
+                return [
+                  size,
+                  {
+                    paddingBlock: 'calc({spacing.xs} * 1)',
+                    paddingInline: 'calc({spacing.xs} * 1.5)',
+                    fontSize: 'lg'
+                  }
+                ]
+              default:
+                return [size, {}]
+            }
+          })
+        )
       },
       color: {
         ...Object.fromEntries(
@@ -48,6 +72,7 @@ export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
               borderColor: `${color}.6`,
               backgroundColor: `${color}.2`,
               color: `${color}.12`,
+              focusRingColor: `{colors.${color}.7}`,
               _placeholder: {
                 color: `${color}.11`
               },