docs: sort component size prop (#956)

docs/components/content/ComponentCard.vue

@@ -153,6 +153,23 @@ const generateOptions = (key: string, schema: { kind: string, schema: [], type:
     options = [...appConfig.ui.colors]
   }
 
+  if (key.toLowerCase() === 'size' && schema?.schema?.length > 0) {
+    const baseSizeOrder = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4, 'xl': 5 }
+    schema.schema.sort((a: string, b: string) => {
+      const aBase = a.match(/[a-zA-Z]+/)[0].toLowerCase()
+      const bBase = b.match(/[a-zA-Z]+/)[0].toLowerCase()
+
+      const aNum = parseInt(a.match(/\d+/)?.[0]) || 1
+      const bNum = parseInt(b.match(/\d+/)?.[0]) || 1
+
+      if (aBase === bBase) {
+        return aBase === 'xs' ? bNum - aNum : aNum - bNum
+      }
+
+      return baseSizeOrder[aBase] - baseSizeOrder[bBase]
+    })
+  }
+
   if (schema?.schema?.length > 0 && schema?.kind === 'enum' && !hasIgnoredTypes && optionItem?.restriction !== 'only') {
     options = schema.schema.filter(option => typeof option === 'string').map((option: string) => option.replaceAll('"', ''))
   }